/**
*
* ----------------------------------
* Inspired by the Lifx app
* @see https://itunes.apple.com/us/app/lifx/id657758311
* @author Levi Cole at Skape Collective
* ----------------------------------
*
*/
(function ($) {
'use strict';
$.fn.LifxColorPicker = function(options) {
const self = this;
options = $.extend(true, {
hue: 0,
saturation: 0.5,
brightness: 1,
size: 320,
// Callback
changed: function(color) {
// color.hex
// color.hue
// color.saturation
// color.brigtness
}
}, options);
/**
* Public
* Color data
*/
self.data = {
hue: 0,
saturation: 0,
brightness: 0
};
/**
* Private
* DOM data
*/
const dom = {
rotation: 0,
brightness: 0,
saturation: 0
};
/**
* Global DOM Elements
* @type {jQuery}
*/
const $this = this;
const $dial = $this.find('.dial');
const $saturation_handle = $this.find('.color .handle');
const $brightness_handle = $this.find('.brightness .handle');
/*
* Canvas properties
*/
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = options.size;
canvas.height = options.size;
context.scale(2, 2);
/**
* Math variables
*/
const x = options.size / 4; // Canvas center X (divided by 4 because of retina)
const y = options.size / 4; // Canvas center Y (divided by 4 because of retina)
const r = x; // Canvas radius
const d2r = Math.PI / 180; // Degrees to radians
const r2d = 180 / Math.PI; // Radians to degrees
const abs_x = $dial.offset().left + (r * 2);
const abs_y = $dial.offset().top + (r * 2);
/**
* Public
* Simple function to retrieve the current [H]ue [S]aturation [L]ightness
*/
self.hsl = () => {
let round_sat = Math.round(self.data.saturation * 100);
let h = self.data.hue;
let s = 100;//round_sat;
let l = Math.round(100 - (round_sat / 2));
return 'hsl('+h+', '+s+'%, '+l+'%)';
};
/**
* Private
* Generate radial gradient image
*/
const generate_gradient = () => {
for (let angle = 0; angle <= 360; angle++) {
const arc_start = -((angle + 90) * d2r);
const arc_end = -((angle + 88) * d2r);
// Draw shape
context.beginPath();
context.moveTo(x, y);
context.arc(x, y, r, arc_start, arc_end, false);
context.closePath();
// Generate gradient for shape
let gradient = context.createRadialGradient(x, y, 0, x, y, r);
gradient.addColorStop(0.5, 'hsl('+angle+', 10%, 100%)');
gradient.addColorStop(0.75, 'hsl('+angle+', 100%, 70%)');
gradient.addColorStop(1, 'hsl('+angle+', 100%, 30%)');
context.fillStyle = gradient;
context.fill();
}
$dial.css('background-image', 'url('+canvas.toDataURL('image/png', 1)+')');
};
/**
* Calculate mouse rotation relative to $dial center
* @param int mouse_x
* @param int mouse_y
*/
const get_degrees = (mouse_x, mouse_y) => {
const radians = Math.atan2(mouse_x - abs_x, mouse_y - abs_y);
const degrees = Math.round((radians * r2d * -1) + 100);
return degrees < 0 ? 360 - Math.abs(degrees) : degrees;
};
/**
* Private
* Run when any values are changed
*/
const trigger_change = () => {
let c_color = self.hsl();
let c_top = ((1 - dom.saturation) * ($saturation_handle.parent().outerHeight() - $saturation_handle.outerHeight()) );
// Update dial rotation
$dial.css('transform', 'rotate('+dom.rotation+'deg)');
// Update saturation handle
$saturation_handle.css('background', c_color);
$saturation_handle.css('top', c_top+'px');
// Update brightness handle
$brightness_handle.css('top', -(dom.brightness * $brightness_handle.height())+'px')
// Send data to callback
if (typeof options.changed === 'function') {
let send_data = self.data;
send_data.hsl = self.hsl();
options.changed(send_data);
}
};
/**
* Public
* Set Hue
*/
self.set_hue = (rotation) => {
let hue = typeof rotation !== undefined ? rotation : self.data.hue;
if (hue > 360) {
hue = hue - 360;
}
if (hue < 0) {
hue = 360 - Math.abs(hue);
}
// Set data values
self.data.hue = hue;
dom.rotation = hue;
trigger_change();
};
/**
* Public
* Set saturation
*/
self.set_saturation = (saturation) => {
saturation = typeof saturation !== undefined ? saturation : self.data.saturation;
if (saturation > 1) { saturation = 1; }
if (saturation < 0) { saturation = 0; }
self.data.saturation = saturation.toFixed(2);
dom.saturation = saturation;
trigger_change();
};
/**
* Public
* Set brightness
*/
self.set_brightness = (brightness) => {
brightness = typeof brightness !== undefined ? brightness : self.data.brightness;
if (brightness > 1) { brightness = 1; }
if (brightness < 0) { brightness = 0; }
self.data.brightness = brightness.toFixed(2);
dom.brightness = brightness;
trigger_change();
};
/**
* Public
* Set color from Hue and Saturation
*/
self.set_color = (hue, saturation, brightness) => {
self.set_hue(hue);
self.set_saturation(saturation);
self.set_brightness(brightness);
};
/**
* Dial rotate click and drag binding
*/
$dial.on('mousedown', function(event) {
// Calculate the mouse position in degrees
const start_degrees = get_degrees(event.pageX, event.pageY);
const start_dom = dom.rotation;
$(document).bind('mousemove', function(event) {
// Calculate the mouse move position, removing starting point
const end_degrees = get_degrees(event.pageX, event.pageY);
let difference = 0;
if (end_degrees < start_degrees) {
difference = (end_degrees + 360) - start_degrees;
} else {
difference = end_degrees - start_degrees;
}
self.set_hue( start_dom + difference );
});
});
/**
* Vertical color range click and drag binding
*/
$saturation_handle.on('mousedown', function() {
$(document).bind('mousemove', function(event) {
const $parent = $saturation_handle.parent();
const h_size = $saturation_handle.outerWidth();
const h_half = h_size / 2;
const p_size = $parent.outerHeight() - h_size;
const bounds = $parent.offset();
var y = event.clientY - (bounds.top + h_half);
if (y > p_size) {
y = p_size;
}
if (y < 0) {
y = 0;
}
self.set_saturation( 1 - (y / p_size) );
});
});
/**
* Brightness click and drag binding
*/
$brightness_handle.parent().on('mousedown', function(event) {
var click_y = event.clientY;
const top = parseInt($brightness_handle.css('top'));
$(document).bind('mousemove', top, function(event) {
const h_size = $brightness_handle.height();
var y = top - (click_y - event.clientY);
if (y > 0) {
y = 0;
}
if (y < (-h_size)) {
y = -h_size;
}
self.set_brightness( Math.abs(y) / h_size );
});
});
/**
* Remove all click and drag bindings
*/
$(document).on('mouseup', function() {
$(document).unbind('mousemove');
});
$(window).bind('mousewheel DOMMouseScroll', function(event) {
if (event.target === $brightness_handle.parent()[0] || $brightness_handle.parent().has( event.target ).length) {
const current_value = self.data.brightness * 100;
let new_value = 0;
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
new_value = current_value - 1;
} else {
new_value = current_value + 1;
}
new_value = new_value / 100;
self.set_brightness( new_value );
event.preventDefault();
return false;
}
});
/**
* Initiate
*/
generate_gradient();
self.set_color(Math.round(options.hue), parseFloat(options.saturation), parseFloat(options.brightness));
};
})(jQuery);
/**
*
* ----------------------------------
* Initiate plugin
* ----------------------------------
*
*/
$(document).ready(function() {
$('.holder').LifxColorPicker({
changed: (color) => {
$('span.hsl').text(color.hsl);
$('span.brightness').text(color.brightness);
$('span.hsl-swatch').css({
'background': color.hsl,
'opacity': color.brightness
});
}
});
});
!
