Functions of blackbird.js

In today's blog, I will go through each function of the blackbird.js as an exercise. Basically, I thought going through some JS code would be nice as a way to brush up and learn more about the beautiful and fluid language of JavaScript.

I find the naming of these functions are pretty evident in what it does. Looking at the code closer does helps one to grasp the branches and leaves of the code with greater confidence.

Below are the functions in more details:

generateMarkup: Generates the tool's content markup, including the header (filters and controls), main log body, and the footer (checkbox).

addMessage: Addes the log message to the output list.

clear: Clears the output list.

clickControl: Event handler for clicking to clear, resize, or hide log.

clickFilter: Event handler for filtering out logs based on type (debug, error, warning, etc)

clickVis: Event handler for setting to start tool on load.

scrollToBottom: Scrolls to the bottom of the log output list.

isVisible: This determines whether the display is visible or not by checking the css display style.

hide: This hides the display by setting the css style display attribute to none.

show: This gets the body element, then remove and add the tool content code into the body element. Also, it sets to display the tool.

reposition: Sets the position according the the position argument. If no argument is provided, use the default topRight or move to the next position as stored in the state. This calls setState after the classes have been set accordingly.

resize: Resizes the tool display to either small or large based on the argument, default or state value.

setState: Goes thru the state object and sets the property (props) array to be written to the cookie. Then it sets the class attribute for CSS styling.

getState: Retrieves the state object from cookie.

readKey: This is the event handler for keyup. Based on the F2 key combination with alt and shift, as well as the current visible state, the function clears the log, reposition or hide/show the tool display.