This content originally appeared on DEV Community and was authored by egfx
The template includes everything you need to create a toolbar app in gif.com.ai
Today we will do a teardown of the "Paint it Black" toolbar app (widget). This is a very basic app you can pin to your toolbar. The template 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 keys in the settings tab. The title an description are straightforward changes.
Note the special mode key 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
This content originally appeared on DEV Community and was authored by egfx
egfx | Sciencx (2022-07-23T17:59:19+00:00) Paint it Black : Toolbar App. Retrieved from https://www.scien.cx/2022/07/23/paint-it-black-toolbar-app/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.