diff --git a/assets/javascripts/vendor/jQuery.LifxColorPicker.js b/assets/javascripts/vendor/jQuery.LifxColorPicker.js index 9d533fd..a9bf3da 100644 --- a/assets/javascripts/vendor/jQuery.LifxColorPicker.js +++ b/assets/javascripts/vendor/jQuery.LifxColorPicker.js @@ -39,7 +39,8 @@ */ const dom = { rotation: 0, - brightness: 0 + brightness: 0, + saturation: 0 }; @@ -78,10 +79,10 @@ * 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 = Math.round(self.data.saturation * 100); - let l = Math.round(s < 50 ? 100 - s : 50); + let s = 100;//round_sat; + let l = Math.round(100 - (round_sat / 2)); return 'hsl('+h+', '+s+'%, '+l+'%)'; }; @@ -93,8 +94,8 @@ const generate_gradient = () => { for (let angle = 0; angle <= 360; angle++) { - const arc_start = (angle - 90) * d2r; - const arc_end = (angle - 88) * d2r; + const arc_start = -((angle + 90) * d2r); + const arc_end = -((angle + 88) * d2r); // Draw shape context.beginPath(); @@ -104,8 +105,9 @@ // Generate gradient for shape let gradient = context.createRadialGradient(x, y, 0, x, y, r); - gradient.addColorStop(0.475, 'hsl('+angle+', 10%, 100%)'); - gradient.addColorStop(1, 'hsl('+angle+', 100%, 50%)'); + 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(); @@ -132,7 +134,7 @@ const trigger_change = () => { let c_color = self.hsl(); - let c_top = ((1 - self.data.saturation) * ($saturation_handle.parent().outerHeight() - $saturation_handle.outerHeight()) ); + let c_top = ((1 - dom.saturation) * ($saturation_handle.parent().outerHeight() - $saturation_handle.outerHeight()) ); // Update dial rotation @@ -148,11 +150,7 @@ // Send data to callback if (typeof options.changed === 'function') { let send_data = self.data; - - send_data.hsl = self.hsl(); - send_data.brightness = parseFloat(send_data.brightness); - send_data.saturation = parseFloat(send_data.saturation); - + send_data.hsl = self.hsl(); options.changed(send_data); } }; @@ -160,10 +158,9 @@ /** * Public * Set Hue - * @param {integer} hue // 0 - 360 */ self.set_hue = (rotation) => { - let hue = typeof rotation !== 'undefined' ? rotation : self.data.hue; + let hue = typeof rotation !== undefined ? rotation : self.data.hue; if (hue > 360) { hue = hue - 360; } @@ -171,7 +168,7 @@ hue = 360 - Math.abs(hue); } // Set data values - self.data.hue = Math.round(360 - hue); + self.data.hue = hue; dom.rotation = rotation; trigger_change(); }; @@ -179,23 +176,22 @@ /** * Public * Set saturation - * @param {integer} saturation // 0.0 - 1.0 */ self.set_saturation = (saturation) => { - saturation = typeof saturation !== 'undefined' ? saturation : self.data.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); + self.data.saturation = saturation.toFixed(2); + dom.saturation = saturation; trigger_change(); }; /** * Public * Set brightness - * @param {integer} brightness // 0.0 - 1.0 */ self.set_brightness = (brightness) => { - brightness = typeof brightness !== 'undefined' ? brightness : self.data.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); @@ -206,9 +202,6 @@ /** * Public * Set color from Hue and Saturation - * @param {integer} hue // 0 - 360 - * @param {integer} saturation // 0.0 - 1.0 - * @param {integer} brightness // 0.0 - 1.0 */ self.set_color = (hue, saturation, brightness) => { self.set_hue(hue); @@ -291,7 +284,7 @@ * Initiate */ generate_gradient(); - self.set_color(Math.round(360 - options.hue), parseFloat(options.saturation), parseFloat(options.brightness)); + self.set_color(Math.round(options.hue), parseFloat(options.saturation), parseFloat(options.brightness)); }; diff --git a/assets/sass/partials/color-picker.scss b/assets/sass/partials/color-picker.scss index d643587..66f0b7f 100644 --- a/assets/sass/partials/color-picker.scss +++ b/assets/sass/partials/color-picker.scss @@ -9,7 +9,7 @@ $size: 320px; } &.power-off { - canvas { + .dial { opacity: 0.3; } } @@ -28,7 +28,7 @@ $size: 320px; height: 100%; } - canvas { + .dial { z-index: 1; background-position: center; background-repeat: no-repeat; diff --git a/css/app.css b/css/app.css index 2c25541..1904652 100644 --- a/css/app.css +++ b/css/app.css @@ -1 +1 @@ -body{background:#000002;font-family:Helvetica,Arial,sans-serif;color:#fff;padding-top:48px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;font-weight:100}*,:after,:before{box-sizing:border-box}a{color:#fff;text-decoration:underline}h1,h2,h3,h4,h5,h6{font-weight:100}[vue-app].loading{opacity:.4;pointer-events:none}header{position:fixed;top:0;left:0;right:0;height:38px;background:#141316;text-align:center;font-size:1rem;height:38px;line-height:38px;-webkit-app-region:drag;font-weight:700}header img{display:inline-block;vertical-align:middle}header a{position:absolute;top:0;right:12px;bottom:0;font-weight:400;font-size:.75rem;cursor:pointer;text-decoration:none}.btn{display:inline-block;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;padding:0;margin:0;outline:0;cursor:pointer;position:relative;background:rgba(255,255,255,.1);color:#fff;font-size:12px;letter-spacing:.52;padding:10px;border-radius:10px}.switch{width:120px;display:inline-block;margin:0 10px}.switch button.toggle-power{display:block;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;padding:0;margin:0;outline:0;cursor:pointer;background:0 0;position:relative}.switch button.toggle-power .svg{display:block;margin:0 auto;width:100%;max-width:72px;transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease}.switch button.toggle-power .svg:active{-webkit-transform:scale(.9);transform:scale(.9)}.switch button.toggle-power .svg .base{stroke:#3b434b;fill:none;stroke-width:2}.switch button.toggle-power .svg .progress{fill:none;stroke-width:2;transition:stroke-dasharray 1s ease}.switch button.toggle-power .glow{width:45px;height:12px;left:50%;margin-left:-22.5px;position:absolute;-webkit-filter:blur(10px);filter:blur(10px);opacity:.6}.switch button.goto-single{position:relative;z-index:2;display:block;width:100%;margin:10px auto 0}.color-picker{width:320px;margin:10px auto 0}.color-picker button.close{margin:0 auto 30px}.color-picker.power-off canvas{opacity:.3}.color-picker .inner{position:relative;width:100%;height:0;padding-bottom:100%}.color-picker .inner .controls,.color-picker .inner .dial{position:absolute;top:0;left:0;width:100%;height:100%}.color-picker .inner canvas{z-index:1;background-position:center;background-repeat:no-repeat;background-size:contain}.color-picker .inner .controls{z-index:2;pointer-events:none}.color-picker .inner .controls .color{width:4px;height:25%;position:absolute;left:50%;top:0;z-index:2;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#000002}.color-picker .inner .controls .color .handle{width:30px;height:30px;background:#fff;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);border-radius:50%;top:10px;cursor:pointer;pointer-events:auto;border:3px solid #fff;box-shadow:0 3px 10px 0 rgba(0,0,0,.3)}.color-picker .inner .controls .brightness{position:absolute;top:25%;left:25%;width:50%;height:50%;border-radius:50%;z-index:1;overflow:hidden;background-image:linear-gradient(-180deg,#66717d 0,#4d5660 50%,#333b44 100%);border:5px solid #000002;pointer-events:auto;cursor:pointer}.color-picker .inner .controls .brightness:after{content:'';display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background-image:linear-gradient(-180deg,#66717d 0,rgba(77,86,96,0) 50%,#333b44 100%);pointer-events:none}.color-picker .inner .controls .brightness .handle{position:absolute;left:0;right:0;top:0;padding:50% 0}.color-picker .inner .controls .brightness .handle i{display:block;width:20px;height:2px;background:#cfcbc7;margin:40px auto 0}.color-picker .inner .controls .brightness .handle i:first-child{margin-top:0}.handle{cursor:move;cursor:-webkit-grab;cursor:grab}.handle:active{cursor:-webkit-grabbing;cursor:grabbing} \ No newline at end of file +body{background:#000002;font-family:Helvetica,Arial,sans-serif;color:#fff;padding-top:48px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;font-weight:100}*,:after,:before{box-sizing:border-box}a{color:#fff;text-decoration:underline}h1,h2,h3,h4,h5,h6{font-weight:100}[vue-app].loading{opacity:.4;pointer-events:none}header{position:fixed;top:0;left:0;right:0;height:38px;background:#141316;text-align:center;font-size:1rem;height:38px;line-height:38px;-webkit-app-region:drag;font-weight:700}header img{display:inline-block;vertical-align:middle}header a{position:absolute;top:0;right:12px;bottom:0;font-weight:400;font-size:.75rem;cursor:pointer;text-decoration:none}.btn{display:inline-block;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;padding:0;margin:0;outline:0;cursor:pointer;position:relative;background:rgba(255,255,255,.1);color:#fff;font-size:12px;letter-spacing:.52;padding:10px;border-radius:10px}.switch{width:120px;display:inline-block;margin:0 10px}.switch button.toggle-power{display:block;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;padding:0;margin:0;outline:0;cursor:pointer;background:0 0;position:relative}.switch button.toggle-power .svg{display:block;margin:0 auto;width:100%;max-width:72px;transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease}.switch button.toggle-power .svg:active{-webkit-transform:scale(.9);transform:scale(.9)}.switch button.toggle-power .svg .base{stroke:#3b434b;fill:none;stroke-width:2}.switch button.toggle-power .svg .progress{fill:none;stroke-width:2;transition:stroke-dasharray 1s ease}.switch button.toggle-power .glow{width:45px;height:12px;left:50%;margin-left:-22.5px;position:absolute;-webkit-filter:blur(10px);filter:blur(10px);opacity:.6}.switch button.goto-single{position:relative;z-index:2;display:block;width:100%;margin:10px auto 0}.color-picker{width:320px;margin:10px auto 0}.color-picker button.close{margin:0 auto 30px}.color-picker.power-off .dial{opacity:.3}.color-picker .inner{position:relative;width:100%;height:0;padding-bottom:100%}.color-picker .inner .controls,.color-picker .inner .dial{position:absolute;top:0;left:0;width:100%;height:100%}.color-picker .inner .dial{z-index:1;background-position:center;background-repeat:no-repeat;background-size:contain}.color-picker .inner .controls{z-index:2;pointer-events:none}.color-picker .inner .controls .color{width:4px;height:25%;position:absolute;left:50%;top:0;z-index:2;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#000002}.color-picker .inner .controls .color .handle{width:30px;height:30px;background:#fff;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);border-radius:50%;top:10px;cursor:pointer;pointer-events:auto;border:3px solid #fff;box-shadow:0 3px 10px 0 rgba(0,0,0,.3)}.color-picker .inner .controls .brightness{position:absolute;top:25%;left:25%;width:50%;height:50%;border-radius:50%;z-index:1;overflow:hidden;background-image:linear-gradient(-180deg,#66717d 0,#4d5660 50%,#333b44 100%);border:5px solid #000002;pointer-events:auto;cursor:pointer}.color-picker .inner .controls .brightness:after{content:'';display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background-image:linear-gradient(-180deg,#66717d 0,rgba(77,86,96,0) 50%,#333b44 100%);pointer-events:none}.color-picker .inner .controls .brightness .handle{position:absolute;left:0;right:0;top:0;padding:50% 0}.color-picker .inner .controls .brightness .handle i{display:block;width:20px;height:2px;background:#cfcbc7;margin:40px auto 0}.color-picker .inner .controls .brightness .handle i:first-child{margin-top:0}.handle{cursor:move;cursor:-webkit-grab;cursor:grab}.handle:active{cursor:-webkit-grabbing;cursor:grabbing} \ No newline at end of file diff --git a/js/color-picker.js b/js/color-picker.js index af328e7..e886345 100644 --- a/js/color-picker.js +++ b/js/color-picker.js @@ -1 +1 @@ -"use strict";!function(t){t.fn.LifxColorPicker=function(a){var e=this;a=t.extend(!0,{hue:0,saturation:.5,brightness:1,size:320,changed:function(t){}},a),e.data={hue:0,saturation:0,brightness:0};var n={rotation:0,brightness:0},o=this.find(".dial"),s=this.find(".color .handle"),i=this.find(".brightness .handle"),r=document.createElement("canvas"),u=r.getContext("2d");r.width=a.size,r.height=a.size,u.scale(2,2);var h=a.size/4,d=a.size/4,c=h,f=Math.PI/180,g=180/Math.PI,l=o.offset().left+2*c,v=o.offset().top+2*c;e.hsl=function(){var t=e.data.hue,a=Math.round(100*e.data.saturation);return"hsl("+t+", "+a+"%, "+Math.round(a<50?100-a:50)+"%)"};var p=function(t,a){var e=Math.atan2(t-l,a-v);return Math.round(e*g*-1+100)},b=function(){var t=e.hsl(),r=(1-e.data.saturation)*(s.parent().outerHeight()-s.outerHeight());if(o.css("transform","rotate("+n.rotation+"deg)"),s.css("background",t),s.css("top",r+"px"),i.css("top",-n.brightness*i.height()+"px"),"function"==typeof a.changed){var u=e.data;u.hsl=e.hsl(),u.brightness=parseFloat(u.brightness),u.saturation=parseFloat(u.saturation),a.changed(u)}};e.set_hue=function(t){var a=void 0!==t?t:e.data.hue;a>360&&(a-=360),a<0&&(a=360-Math.abs(a)),e.data.hue=Math.round(360-a),n.rotation=t,b()},e.set_saturation=function(t){(t=void 0!==t?t:e.data.saturation)>1&&(t=1),t<0&&(t=0),e.data.saturation=t.toFixed(2),b()},e.set_brightness=function(t){(t=void 0!==t?t:e.data.brightness)>1&&(t=1),t<0&&(t=0),e.data.brightness=t.toFixed(2),n.brightness=t,b()},e.set_color=function(t,a,n){e.set_hue(t),e.set_saturation(a),e.set_brightness(n)},o.on("mousedown",function(a){var n=p(a.pageX,a.pageY);t(document).bind("mousemove",function(t){var a=p(t.pageX,t.pageY)-n;e.set_hue(a)})}),s.on("mousedown",function(){t(document).bind("mousemove",function(t){var a=s.parent(),n=s.outerWidth(),o=n/2,i=a.outerHeight()-n,r=a.offset(),u=t.clientY-(r.top+o);u>i&&(u=i),u<0&&(u=0),e.set_saturation(1-u/i)})}),i.parent().on("mousedown",function(a){var n=a.clientY,o=parseInt(i.css("top"));t(document).bind("mousemove",o,function(t){var a=i.height(),s=o-(n-t.clientY);s>0&&(s=0),s<-a&&(s=-a),e.set_brightness(Math.abs(s)/a)})}),t(document).on("mouseup",function(){t(document).unbind("mousemove")}),function(){for(var t=0;t<=360;t++){var a=(t-90)*f,e=(t-88)*f;u.beginPath(),u.moveTo(h,d),u.arc(h,d,c,a,e,!1),u.closePath();var n=u.createRadialGradient(h,d,0,h,d,c);n.addColorStop(.475,"hsl("+t+", 10%, 100%)"),n.addColorStop(1,"hsl("+t+", 100%, 50%)"),u.fillStyle=n,u.fill()}o.css("background-image","url("+r.toDataURL("image/png",1)+")")}(),e.set_color(Math.round(360-a.hue),parseFloat(a.saturation),parseFloat(a.brightness))}}(jQuery); \ No newline at end of file +"use strict";var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};!function(t){t.fn.LifxColorPicker=function(o){var e=this;o=t.extend(!0,{hue:0,saturation:.5,brightness:1,size:320,changed:function(t){}},o),e.data={hue:0,saturation:0,brightness:0};var n={rotation:0,brightness:0,saturation:0},a=this.find(".dial"),i=this.find(".color .handle"),s=this.find(".brightness .handle"),r=document.createElement("canvas"),u=r.getContext("2d");r.width=o.size,r.height=o.size,u.scale(2,2);var d=o.size/4,h=o.size/4,c=d,f=Math.PI/180,l=180/Math.PI,p=a.offset().left+2*c,g=a.offset().top+2*c;e.hsl=function(){var t=Math.round(100*e.data.saturation);return"hsl("+e.data.hue+", 100%, "+Math.round(100-t/2)+"%)"};var m=function(t,o){var e=Math.atan2(t-p,o-g);return Math.round(e*l*-1+100)},v=function(){var t=e.hsl(),r=(1-n.saturation)*(i.parent().outerHeight()-i.outerHeight());if(a.css("transform","rotate("+n.rotation+"deg)"),i.css("background",t),i.css("top",r+"px"),s.css("top",-n.brightness*s.height()+"px"),"function"==typeof o.changed){var u=e.data;u.hsl=e.hsl(),o.changed(u)}};e.set_hue=function(t){var o=void 0!==(void 0===t?"undefined":_typeof(t))?t:e.data.hue;o>360&&(o-=360),o<0&&(o=360-Math.abs(o)),e.data.hue=o,n.rotation=t,v()},e.set_saturation=function(t){(t=void 0!==(void 0===t?"undefined":_typeof(t))?t:e.data.saturation)>1&&(t=1),t<0&&(t=0),e.data.saturation=t.toFixed(2),n.saturation=t,v()},e.set_brightness=function(t){(t=void 0!==(void 0===t?"undefined":_typeof(t))?t:e.data.brightness)>1&&(t=1),t<0&&(t=0),e.data.brightness=t.toFixed(2),n.brightness=t,v()},e.set_color=function(t,o,n){e.set_hue(t),e.set_saturation(o),e.set_brightness(n)},a.on("mousedown",function(o){var n=m(o.pageX,o.pageY);t(document).bind("mousemove",function(t){var o=m(t.pageX,t.pageY)-n;e.set_hue(o)})}),i.on("mousedown",function(){t(document).bind("mousemove",function(t){var o=i.parent(),n=i.outerWidth(),a=n/2,s=o.outerHeight()-n,r=o.offset(),u=t.clientY-(r.top+a);u>s&&(u=s),u<0&&(u=0),e.set_saturation(1-u/s)})}),s.parent().on("mousedown",function(o){var n=o.clientY,a=parseInt(s.css("top"));t(document).bind("mousemove",a,function(t){var o=s.height(),i=a-(n-t.clientY);i>0&&(i=0),i<-o&&(i=-o),e.set_brightness(Math.abs(i)/o)})}),t(document).on("mouseup",function(){t(document).unbind("mousemove")}),function(){for(var t=0;t<=360;t++){var o=-(t+90)*f,e=-(t+88)*f;u.beginPath(),u.moveTo(d,h),u.arc(d,h,c,o,e,!1),u.closePath();var n=u.createRadialGradient(d,h,0,d,h,c);n.addColorStop(.5,"hsl("+t+", 10%, 100%)"),n.addColorStop(.75,"hsl("+t+", 100%, 70%)"),n.addColorStop(1,"hsl("+t+", 100%, 30%)"),u.fillStyle=n,u.fill()}a.css("background-image","url("+r.toDataURL("image/png",1)+")")}(),e.set_color(Math.round(o.hue),parseFloat(o.saturation),parseFloat(o.brightness))}}(jQuery); \ No newline at end of file