Skip to content

Instantly share code, notes, and snippets.

@cyrus-and

cyrus-and/adjust.js

Last active July 14, 2016 11:49
Show Gist options
  • Save cyrus-and/114e2be2433470af878f848d19a48a77 to your computer and use it in GitHub Desktop.
Save cyrus-and/114e2be2433470af878f848d19a48a77 to your computer and use it in GitHub Desktop.
Download ZIP
CSS color adjustment
Raw
adjust.js
// javascript:
(function () {
/* inject dat.gui library */
var script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js';
document.head.appendChild(script);
/* wait for the script to be loaded */
script.addEventListener('load', function () {
/* CSS params */
var params = [
{name: 'brightness', min: 0, max: 200, default: 100, unit: '%'},
{name: 'contrast', min: 0, max: 200, default: 100, unit: '%'},
{name: 'grayscale', min: 0, max: 100, default: 0, unit: '%'},
{name: 'hue-rotate', min: 0, max: 360, default: 0, unit: 'deg'},
{name: 'invert', min: 0, max: 100, default: 0, unit: '%'},
{name: 'saturate', min: 0, max: 200, default: 100, unit: '%'},
{name: 'sepia', min: 0, max: 100, default: 0, unit: '%'}
];
/* dat.gui controller */
var Control = function() {
var self = this;
params.forEach(function (param) {
self[param.name] = param.default;
});
this.reset = reset;
};
/* update function */
function update() {
var filter = '';
params.forEach(function (param) {
filter += param.name + '(' + control[param.name] + param.unit + ')';
});
document.body.style.webkitFilter = filter;
}
/* reset function */
function reset() {
Control.call(control);
update();
}
/* fill the dat.gui controller */
function setup() {
params.forEach(function (param) {
var c = gui.add(control, param.name, param.min, param.max);
c.onChange(update);
c.listen();
});
gui.add(control, 'reset');
/* custom placement: child of <html> */
gui.domElement.style.position = 'fixed';
gui.domElement.style.top = '0';
gui.domElement.style.right = '0';
gui.domElement.style.zIndex = '9999999999';
document.documentElement.appendChild(gui.domElement);
}
/* create and setup */
var gui = new dat.GUI({ autoPlace: false });
var control = new Control();
setup();
});
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment