Gif Widget : "Paint it Black"

Today we will do a teardown of the "Paint it Black" widget. This is a very basic widget that you pin to your toolbar. The template to the "Paint it Black" widget is included at the bottom of this post.

1) JS Context

The JS consists of a single jquery selector.

Every time the toolbar button is clicked the code is executed, resulting in everything in the canvas turning grayscale.

$('#gifcanvas > *').css('filter', 'grayscale(1)');

2) Settings Context

We included the title, description and mode properties in settings. The title and description are straight forward additions.

Note the special mode property with the value of pin. Including this property and setting the value to pin tells our gif webtop that this item belongs in the toolbar.

{
    title: "Paint it BLACK",
    description: "No colors anymore I want them to turn black. Turns everything in the gif canvas grayscale.",
    mode: "pin"
}

Check out "Paint it Black" with our starter template below.

Open template