Rather than calling each function separately, and tightly binding the code to the exact HTML I have used in the demo, swatchr should be able to be called using something like the following:
swatchr() {
tabs: [colors, images], //define the different groupings of swatches that can be tabbed through
swatches: .swatch, //define where to look for the data-swatch attribute
hud: color-demo__hud, //define where to look for the div that contains all the hud elements
};
Rather than calling each function separately, and tightly binding the code to the exact HTML I have used in the demo, swatchr should be able to be called using something like the following: