Blobity

:warning: Note that the product domain have changed from blobity.dev to blobity.gmrchk.com, including the respective subsdomains. Turns out the auto renew wasn't turned on for the domain, and GoDaddy snatched it and wants $3000 for it. That's why we can't have nice things. :)

Installation

There are several options how to install Blobity to your site.

The first is to include Blobity with scripts tag from the downloaded version available in this repository. This version will create a global Blobity object which you can use to create your instance.

<script src="./dist/blobity.min.js"></script>

The second is to include the same script from CDN. This version will also create a global Blobity object which you can use to create your instance.

<script src="https://cdn.blobity.gmrchk.com/by.js"></script>

The CDN version of Blobity also includes something called autostart, which will initialize Blobity with the default options, in case the autoStart param is defined. Note that loading and auto-initializing Blobity in the <head> tag can lead to error of document.body is null, as body does not exist at the time.

<script src="https://cdn.blobity.gmrchk.com/by.js?autoStart&licenseKey=..."></script>

The third and most flexible option is to install with package managers like npm or yarn.

npm install blobity --save
# or 
yarn add blobity

Once the package is installed as a node module (eg. inside of node_modules folder), you can access it from blobity path.

import Blobity from 'blobity';

There is an advantage to the latest format, because the library is not bundled, doesn't contain boiler plate code of the bundler, doesn't pollute the global scope and is much smaller and can be effectively tree-shaked as well. The package also contains additional utils for React for example.

License

Check the LICENSE.md file in the root of this repository tree for closer details.

Open source license

Blobity is distributed under GPLv3 for any project compatible with GPLv3. In other words, as long as your application is open source under GPLv3, you may use Blobity under open source license.

Commercial license

To use Blobity as part of commercial projects including website, themes and application, Commercial license is a way to go. License can be purchased at blobity.gmrchk.com.

Usage

To start Blobity, the instance needs to be created from its class. The class is either defined globally from a standalone versions, or can be imported from a package as a default export.

const options = { color: 'rgb(180, 180, 180)' };
new Blobity(options);

// or if imported from package
import Blobity from 'blobity';

const options = { color: 'rgb(180, 180, 180)' };
new Blobity(options);

⚠️ Blobity creates canvas element in body. For this, <body> must be present on the page at the time of initialization., so initializing Blobity in <head> can lead to error! A good practice is to load and initialize Blobity as late as possible (like before </body>), as it's usually not critical for the page to be displayed and work properly.

Options

As you may have noticed in a previous example, Blobity accepts options as an argument when the instance is being created. Options are passed as an object.

const blobity = new Blobity({ option: "value" });

Blobity also allows to change options on the go with updateOptions method. This will only overwrite the defined subset of options and won't affect any options that are not passed in the method parameter object.

const blobity = new Blobity({ option: "value" });
blobity.updateOptions({ option: "newValue" });

Following is a table of all available options, together with the description and default value.

| Option | Description | Default value | |---------------------------- |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------| | color | Color option let's you define what color has the blob. It accepts values as a string, and in a format of rgb (eg. rgb(0, 0, 0) or hex values (eg. #000000). The alpha (eg. opacity) is defined in a separate option. | 'rgb(180, 180, 180)' | | opacity | The opacity of the canvas used by Blobity to draw all of its content. It's helpful mainly when zIndex options is set to higher values and Blobity canvas is on top of the page content. | 1 | | licenseKey | The license key you have received when purchasing your Blobity license. In case you are a GitHub sponsor (who are free to use this software without limits for as long as the monthly sponsorship is active), use your GitHub username as a license key. Not defining this option will result in a console warning. | null | | size | The size of the blob when it's not focused on any focusable element. The size is defined in pixels. | 40 | | focusableElements | A selector of focusable elements which Blobity will consider clickable and will draw the highlight around. | '[data-blobity], a:not([data-no-blobity]), button:not([data-no-blobity]), [data-blobity-tooltip]' | | focusableElementsOffsetX | An extra space on the X axis in pixels that Blobity should highlight around the focusable elements. | 0 | | focusableElementsOffsetY | An extra space on the Y axis in pixels that Blobity should highlight around the focusable elements. | 0 | | zIndex | A z-index CSS property value that will be assigned to the canvas used by Blobity to draw any of its elements