From 53c105877aeeff45cc26c912d9f0b9f0c965d601 Mon Sep 17 00:00:00 2001 From: Manu M Date: Wed, 11 May 2016 08:58:34 +0300 Subject: [PATCH 1/2] Touch Events added and Click event minor fix --- js/bootstrap-colorpicker-module.js | 124 ++++++++++++++++++++++++++--- 1 file changed, 114 insertions(+), 10 deletions(-) diff --git a/js/bootstrap-colorpicker-module.js b/js/bootstrap-colorpicker-module.js index 384931e..910a9c3 100644 --- a/js/bootstrap-colorpicker-module.js +++ b/js/bootstrap-colorpicker-module.js @@ -2,6 +2,10 @@ angular.module('colorpicker.module', []) .factory('Helper', function () { 'use strict'; return { + // Method to check if the device is touch enabled + isMobile: function () { + return 'ontouchstart' in document.documentElement; + }, closestSlider: function (elem) { var matchesSelector = elem.matches || elem.webkitMatchesSelector || elem.mozMatchesSelector || elem.msMatchesSelector; if (matchesSelector.bind(elem)('I')) { @@ -204,26 +208,59 @@ angular.module('colorpicker.module', []) return slider; }, getLeftPosition: function(event) { - return Math.max(0, Math.min(slider.maxLeft, slider.left + ((event.pageX || pointer.left) - pointer.left))); + // Check if touch device by checking the pageX node in the event - + // for touch devices, pageX will be present only within touches array + var pointX; + if(event.pageX) { + pointX = event.pageX; + } + else { + pointX = event.touches[0].pageX; + } + return Math.max(0, Math.min(slider.maxLeft, slider.left + ((pointX || pointer.left) - pointer.left))); }, getTopPosition: function(event) { - return Math.max(0, Math.min(slider.maxTop, slider.top + ((event.pageY || pointer.top) - pointer.top))); + // Check if touch device by checking the pageY node in the event - + // for touch devices, pageY will be present only within touches array + var pointY; + if(event.pageY) { + pointY = event.pageY; + } + else { + pointY = event.touches[0].pageY; + } + return Math.max(0, Math.min(slider.maxTop, slider.top + ((pointY || pointer.top) - pointer.top))); }, setSlider: function (event, fixedPosition) { + // Check if touch device by checking the pageX node in the event - + // for touch devices, pageX will be present only within touches array + var clientX, clientY, pageX, pageY; + if(event.pageX) { + clientX = event.clientX; + clientY = event.clientY; + pageX = event.pageX; + pageY = event.pageY; + } + else { + clientX = event.touches[0].clientX, + clientY = event.touches[0].clientY; + pageX = event.touches[0].pageX; + pageY = event.touches[0].pageY; + } var target = Helper.closestSlider(event.target), targetOffset = Helper.getOffset(target, fixedPosition), rect = target.getBoundingClientRect(), - offsetX = event.clientX - rect.left, - offsetY = event.clientY - rect.top; + offsetX = clientX - rect.left, + offsetY = clientY - rect.top; slider.knob = target.children[0].style; - slider.left = event.pageX - targetOffset.left - window.pageXOffset + targetOffset.scrollX; - slider.top = event.pageY - targetOffset.top - window.pageYOffset + targetOffset.scrollY; + slider.left = pageX - targetOffset.left - window.pageXOffset + targetOffset.scrollX; + slider.top = pageY - targetOffset.top - window.pageYOffset + targetOffset.scrollY; pointer = { - left: event.pageX - (offsetX - slider.left), - top: event.pageY - (offsetY - slider.top) + left: pageX - (offsetX - slider.left), + top: pageY - (offsetY - slider.top) }; }, setSaturation: function(event, fixedPosition, componentSize) { @@ -326,6 +363,12 @@ angular.module('colorpicker.module', []) $document.on('mouseup', mouseup); } + // Method for binding touch events + function bindTouchEvents() { + $document.on('touchmove', mousemove); + $document.on('touchend', mouseup); + } + if (thisFormat === 'rgba') { colorpickerTemplate.addClass('alpha'); sliderAlpha = colorpickerTemplate.find('colorpicker-alpha'); @@ -335,27 +378,58 @@ angular.module('colorpicker.module', []) Slider.setAlpha(event, fixedPosition, componentSize); mousemove(event); }) + if(Helper.isMobile()) { + sliderAlpha + .on('touchstart', function(event) { + Slider.setAlpha(event, fixedPosition, componentSize); + bindTouchEvents(); + return false; + }) + .on('touchend', function(event){ + emitEvent('colorpicker-selected-alpha'); + }); + } + else { + sliderAlpha .on('mousedown', function(event) { Slider.setAlpha(event, fixedPosition, componentSize); bindMouseEvents(); + return false; }) .on('mouseup', function(event){ emitEvent('colorpicker-selected-alpha'); }); + } } sliderHue - .on('click', function(event) { + .on('click', function(event) { + Slider.setHue(event, fixedPosition, componentSize); + mousemove(event); + }) + + if(Helper.isMobile()) { + sliderHue + .on('touchstart', function(event) { Slider.setHue(event, fixedPosition, componentSize); - mousemove(event); + bindTouchEvents(); + return false; }) + .on('touchend', function(event){ + emitEvent('colorpicker-selected-hue'); + }); + } + else { + sliderHue .on('mousedown', function(event) { Slider.setHue(event, fixedPosition, componentSize); bindMouseEvents(); + return false; }) .on('mouseup', function(event){ emitEvent('colorpicker-selected-hue'); }); + } sliderSaturation .on('click', function(event) { @@ -365,13 +439,29 @@ angular.module('colorpicker.module', []) hideColorpickerTemplate(); } }) + + if(Helper.isMobile()) { + sliderSaturation + .on('touchstart', function(event) { + Slider.setSaturation(event, fixedPosition, componentSize); + bindTouchEvents(); + return false; + }) + .on('touchend', function(event){ + emitEvent('colorpicker-selected-saturation'); + }); + } + else { + sliderSaturation .on('mousedown', function(event) { Slider.setSaturation(event, fixedPosition, componentSize); bindMouseEvents(); + return false; }) .on('mouseup', function(event){ emitEvent('colorpicker-selected-saturation'); }); + } if (fixedPosition) { colorpickerTemplate.addClass('colorpicker-fixed-position'); @@ -442,6 +532,10 @@ angular.module('colorpicker.module', []) emitEvent('colorpicker-selected'); $document.off('mousemove', mousemove); $document.off('mouseup', mouseup); + + // Remove touch events as well + $document.off('touchmove', mousemove); + $document.off('touchend', mouseup); } function update(omitInnerInput) { @@ -511,6 +605,9 @@ angular.module('colorpicker.module', []) if (inline === false) { // register global mousedown event to hide the colorpicker $document.on('mousedown', documentMousedownHandler); + + // register golbal touchstart event to hide the colorpicker + $document.on('touchstart', documentMousedownHandler); } if (attrs.colorpickerIsOpen) { @@ -533,6 +630,11 @@ angular.module('colorpicker.module', []) event.preventDefault(); }); + colorpickerTemplate.on('touchstart', function (event) { + event.stopPropagation(); + event.preventDefault(); + }); + function emitEvent(name) { if (ngModel) { $scope.$emit(name, { @@ -548,6 +650,8 @@ angular.module('colorpicker.module', []) emitEvent('colorpicker-closed'); // unregister the global mousedown event $document.off('mousedown', documentMousedownHandler); + // unregister the global touchstart event + $document.off('touchstart', documentMousedownHandler); if (attrs.colorpickerIsOpen) { $scope[attrs.colorpickerIsOpen] = false; From fa78e2e704a632c3bfefe589e9ba557dad8fa041 Mon Sep 17 00:00:00 2001 From: Manu M Date: Wed, 11 May 2016 09:07:37 +0300 Subject: [PATCH 2/2] Touch Events added and Click event minor fix - minified js --- js/bootstrap-colorpicker-module.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/bootstrap-colorpicker-module.min.js b/js/bootstrap-colorpicker-module.min.js index 3556244..affa512 100644 --- a/js/bootstrap-colorpicker-module.min.js +++ b/js/bootstrap-colorpicker-module.min.js @@ -1 +1 @@ -angular.module("colorpicker.module",[]).factory("Helper",function(){"use strict";return{closestSlider:function(e){var o=e.matches||e.webkitMatchesSelector||e.mozMatchesSelector||e.msMatchesSelector;return o.bind(e)("I")?e.parentNode:e},getOffset:function(e,o){for(var t=0,n=0,r=e.getBoundingClientRect();e&&!isNaN(e.offsetLeft)&&!isNaN(e.offsetTop);)o||"BODY"!==e.tagName?(t+=e.scrollLeft,n+=e.scrollTop):(t+=document.documentElement.scrollLeft||e.scrollLeft,n+=document.documentElement.scrollTop||e.scrollTop),e=e.offsetParent;return{top:r.top+window.pageYOffset,left:r.left+window.pageXOffset,scrollX:t,scrollY:n}},stringParsers:[{re:/rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,parse:function(e){return[e[1],e[2],e[3],e[4]]}},{re:/rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,parse:function(e){return[2.55*e[1],2.55*e[2],2.55*e[3],e[4]]}},{re:/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,parse:function(e){return[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]}},{re:/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,parse:function(e){return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16)]}}]}}).factory("Color",["Helper",function(e){"use strict";return{value:{h:1,s:1,b:1,a:1},rgb:function(){var e=this.toRGB();return"rgb("+e.r+","+e.g+","+e.b+")"},rgba:function(){var e=this.toRGB();return"rgba("+e.r+","+e.g+","+e.b+","+e.a+")"},hex:function(){return this.toHex()},RGBtoHSB:function(e,o,t,n){e/=255,o/=255,t/=255;var r,i,l,s;return l=Math.max(e,o,t),s=l-Math.min(e,o,t),r=0===s?null:l===e?(o-t)/s:l===o?(t-e)/s+2:(e-o)/s+4,r=(r+360)%6*60/360,i=0===s?0:s/l,{h:r||1,s:i,b:l,a:n||1}},setColor:function(o){o=o?o.toLowerCase():o;for(var t in e.stringParsers)if(e.stringParsers.hasOwnProperty(t)){var n=e.stringParsers[t],r=n.re.exec(o),i=r&&n.parse(r);if(i)return this.value=this.RGBtoHSB.apply(null,i),!1}},setHue:function(e){this.value.h=1-e},setSaturation:function(e){this.value.s=e},setLightness:function(e){this.value.b=1-e},setAlpha:function(e){this.value.a=parseInt(100*(1-e),10)/100},toRGB:function(e,o,t,n){e||(e=this.value.h,o=this.value.s,t=this.value.b),e*=360;var r,i,l,s,c;return e=e%360/60,c=t*o,s=c*(1-Math.abs(e%2-1)),r=i=l=t-c,e=~~e,r+=[c,s,0,0,s,c][e],i+=[s,c,c,s,0,0][e],l+=[0,0,s,c,c,s][e],{r:Math.round(255*r),g:Math.round(255*i),b:Math.round(255*l),a:n||this.value.a}},toHex:function(e,o,t,n){var r=this.toRGB(e,o,t,n);return"#"+(1<<24|parseInt(r.r,10)<<16|parseInt(r.g,10)<<8|parseInt(r.b,10)).toString(16).substr(1)}}}]).factory("Slider",["Helper",function(e){"use strict";var o={maxLeft:0,maxTop:0,callLeft:null,callTop:null,knob:{top:0,left:0}},t={};return{getSlider:function(){return o},getLeftPosition:function(e){return Math.max(0,Math.min(o.maxLeft,o.left+((e.pageX||t.left)-t.left)))},getTopPosition:function(e){return Math.max(0,Math.min(o.maxTop,o.top+((e.pageY||t.top)-t.top)))},setSlider:function(n,r){var i=e.closestSlider(n.target),l=e.getOffset(i,r),s=i.getBoundingClientRect(),c=n.clientX-s.left,a=n.clientY-s.top;o.knob=i.children[0].style,o.left=n.pageX-l.left-window.pageXOffset+l.scrollX,o.top=n.pageY-l.top-window.pageYOffset+l.scrollY,t={left:n.pageX-(c-o.left),top:n.pageY-(a-o.top)}},setSaturation:function(e,t,n){o={maxLeft:n,maxTop:n,callLeft:"setSaturation",callTop:"setLightness"},this.setSlider(e,t)},setHue:function(e,t,n){o={maxLeft:0,maxTop:n,callLeft:!1,callTop:"setHue"},this.setSlider(e,t)},setAlpha:function(e,t,n){o={maxLeft:0,maxTop:n,callLeft:!1,callTop:"setAlpha"},this.setSlider(e,t)},setKnob:function(e,t){o.knob.top=e+"px",o.knob.left=t+"px"}}}]).directive("colorpicker",["$document","$compile","Color","Slider","Helper",function(e,o,t,n,r){"use strict";return{require:"?ngModel",restrict:"A",link:function(i,l,s,c){function a(){e.on("mousemove",u),e.on("mouseup",f)}function p(){try{D.css("backgroundColor",M[w]())}catch(e){D.css("backgroundColor",M.toHex())}B.css("backgroundColor",M.toHex(M.value.h,1,1,1)),"rgba"===w&&(x.css.backgroundColor=M.toHex())}function u(e){var o=n.getLeftPosition(e),t=n.getTopPosition(e),r=n.getSlider();n.setKnob(t,o),r.callLeft&&M[r.callLeft].call(M,o/P),r.callTop&&M[r.callTop].call(M,t/P),p();var s=M[w]();return l.val(s),c&&i.$apply(c.$setViewValue(s)),$&&F.val(s),!1}function f(){m("colorpicker-selected"),e.off("mousemove",u),e.off("mouseup",f)}function d(e){M.setColor(l.val()),$&&!e&&F.val(l.val()),Y.eq(0).css({left:M.value.s*P+"px",top:P-M.value.b*P+"px"}),Y.eq(1).css("top",P*(1-M.value.h)+"px"),Y.eq(2).css("top",P*(1-M.value.a)+"px"),p()}function h(){var e,o=r.getOffset(l[0]);return angular.isDefined(s.colorpickerParent)&&(o.left=0,o.top=0),"top"===S?e={top:o.top-147,left:o.left}:"right"===S?e={top:o.top,left:o.left+126}:"bottom"===S?e={top:o.top+l[0].offsetHeight+2,left:o.left}:"left"===S&&(e={top:o.top,left:o.left-150}),{top:e.top+"px",left:e.left+"px"}}function g(){v()}function k(){y.hasClass("colorpicker-visible")||(d(),y.addClass("colorpicker-visible").css(h()),m("colorpicker-shown"),I===!1&&e.on("mousedown",g),s.colorpickerIsOpen&&(i[s.colorpickerIsOpen]=!0,i.$$phase||i.$digest()))}function m(e){c&&i.$emit(e,{name:s.ngModel,value:c.$modelValue})}function v(){y.hasClass("colorpicker-visible")&&(y.removeClass("colorpicker-visible"),m("colorpicker-closed"),e.off("mousedown",g),s.colorpickerIsOpen&&(i[s.colorpickerIsOpen]=!1,i.$$phase||i.$digest()))}var b,x,w=s.colorpicker?s.colorpicker:"hex",S=angular.isDefined(s.colorpickerPosition)?s.colorpickerPosition:"bottom",I=angular.isDefined(s.colorpickerInline)?s.colorpickerInline:!1,C=angular.isDefined(s.colorpickerFixedPosition)?s.colorpickerFixedPosition:!1,L=angular.isDefined(s.colorpickerParent)?l.parent():angular.element(document.body),$=angular.isDefined(s.colorpickerWithInput)?s.colorpickerWithInput:!1,P=angular.isDefined(s.colorpickerSize)?s.colorpickerSize:100,b=P+"px",H=$?'':"",T=I?"":'',O='
'+H+T+"
",y=angular.element(O),M=t,A=y.find("colorpicker-hue"),B=y.find("colorpicker-saturation"),D=y.find("colorpicker-preview"),Y=y.find("i");if(o(y)(i),y.css("min-width",parseInt(P)+29+"px"),B.css({width:b,height:b}),A.css("height",b),$){var F=y.find("input");F.css("width",b),F.on("mousedown",function(e){e.stopPropagation()}).on("keyup",function(){var e=this.value;l.val(e),c&&c.$modelValue!==e&&(i.$apply(c.$setViewValue(e)),d(!0))})}"rgba"===w&&(y.addClass("alpha"),x=y.find("colorpicker-alpha"),x.css("height",b),x.on("click",function(e){n.setAlpha(e,C,P),u(e)}).on("mousedown",function(e){n.setAlpha(e,C,P),a()}).on("mouseup",function(e){m("colorpicker-selected-alpha")})),A.on("click",function(e){n.setHue(e,C,P),u(e)}).on("mousedown",function(e){n.setHue(e,C,P),a()}).on("mouseup",function(e){m("colorpicker-selected-hue")}),B.on("click",function(e){n.setSaturation(e,C,P),u(e),angular.isDefined(s.colorpickerCloseOnSelect)&&v()}).on("mousedown",function(e){n.setSaturation(e,C,P),a()}).on("mouseup",function(e){m("colorpicker-selected-saturation")}),C&&y.addClass("colorpicker-fixed-position"),y.addClass("colorpicker-position-"+S),"true"===I&&y.addClass("colorpicker-inline"),L.append(y),c&&(c.$render=function(){l.val(c.$viewValue),d()}),l.on("blur keyup change",function(){d()}),l.on("$destroy",function(){y.remove()}),I===!1?l.on("click",k):k(),y.on("mousedown",function(e){e.stopPropagation(),e.preventDefault()}),y.find("button").on("click",function(){v()}),s.colorpickerIsOpen&&i.$watch(s.colorpickerIsOpen,function(e){e===!0?k():e===!1&&v()})}}}]); \ No newline at end of file +angular.module("colorpicker.module",[]).factory("Helper",function(){"use strict";return{isMobile:function(){return"ontouchstart"in document.documentElement},closestSlider:function(e){var o=e.matches||e.webkitMatchesSelector||e.mozMatchesSelector||e.msMatchesSelector;return o.bind(e)("I")?e.parentNode:e},getOffset:function(e,o){for(var t=0,n=0,r=e.getBoundingClientRect();e&&!isNaN(e.offsetLeft)&&!isNaN(e.offsetTop);)o||"BODY"!==e.tagName?(t+=e.scrollLeft,n+=e.scrollTop):(t+=document.documentElement.scrollLeft||e.scrollLeft,n+=document.documentElement.scrollTop||e.scrollTop),e=e.offsetParent;return{top:r.top+window.pageYOffset,left:r.left+window.pageXOffset,scrollX:t,scrollY:n}},stringParsers:[{re:/rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,parse:function(e){return[e[1],e[2],e[3],e[4]]}},{re:/rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,parse:function(e){return[2.55*e[1],2.55*e[2],2.55*e[3],e[4]]}},{re:/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,parse:function(e){return[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]}},{re:/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,parse:function(e){return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16)]}}]}}).factory("Color",["Helper",function(e){"use strict";return{value:{h:1,s:1,b:1,a:1},rgb:function(){var e=this.toRGB();return"rgb("+e.r+","+e.g+","+e.b+")"},rgba:function(){var e=this.toRGB();return"rgba("+e.r+","+e.g+","+e.b+","+e.a+")"},hex:function(){return this.toHex()},RGBtoHSB:function(e,o,t,n){e/=255,o/=255,t/=255;var r,i,c,s;return c=Math.max(e,o,t),s=c-Math.min(e,o,t),r=0===s?null:c===e?(o-t)/s:c===o?(t-e)/s+2:(e-o)/s+4,r=(r+360)%6*60/360,i=0===s?0:s/c,{h:r||1,s:i,b:c,a:n||1}},setColor:function(o){o=o?o.toLowerCase():o;for(var t in e.stringParsers)if(e.stringParsers.hasOwnProperty(t)){var n=e.stringParsers[t],r=n.re.exec(o),i=r&&n.parse(r);if(i)return this.value=this.RGBtoHSB.apply(null,i),!1}},setHue:function(e){this.value.h=1-e},setSaturation:function(e){this.value.s=e},setLightness:function(e){this.value.b=1-e},setAlpha:function(e){this.value.a=parseInt(100*(1-e),10)/100},toRGB:function(e,o,t,n){e||(e=this.value.h,o=this.value.s,t=this.value.b),e*=360;var r,i,c,s,l;return e=e%360/60,l=t*o,s=l*(1-Math.abs(e%2-1)),r=i=c=t-l,e=~~e,r+=[l,s,0,0,s,l][e],i+=[s,l,l,s,0,0][e],c+=[0,0,s,l,l,s][e],{r:Math.round(255*r),g:Math.round(255*i),b:Math.round(255*c),a:n||this.value.a}},toHex:function(e,o,t,n){var r=this.toRGB(e,o,t,n);return"#"+(1<<24|parseInt(r.r,10)<<16|parseInt(r.g,10)<<8|parseInt(r.b,10)).toString(16).substr(1)}}}]).factory("Slider",["Helper",function(e){"use strict";var o={maxLeft:0,maxTop:0,callLeft:null,callTop:null,knob:{top:0,left:0}},t={};return{getSlider:function(){return o},getLeftPosition:function(e){var n;return n=e.pageX?e.pageX:e.touches[0].pageX,Math.max(0,Math.min(o.maxLeft,o.left+((n||t.left)-t.left)))},getTopPosition:function(e){var n;return n=e.pageY?e.pageY:e.touches[0].pageY,Math.max(0,Math.min(o.maxTop,o.top+((n||t.top)-t.top)))},setSlider:function(n,r){var i,c,s,l;n.pageX?(i=n.clientX,c=n.clientY,s=n.pageX,l=n.pageY):(i=n.touches[0].clientX,c=n.touches[0].clientY,s=n.touches[0].pageX,l=n.touches[0].pageY);var a=e.closestSlider(n.target),u=e.getOffset(a,r),p=a.getBoundingClientRect(),f=i-p.left,d=c-p.top;o.knob=a.children[0].style,o.left=s-u.left-window.pageXOffset+u.scrollX,o.top=l-u.top-window.pageYOffset+u.scrollY,t={left:s-(f-o.left),top:l-(d-o.top)}},setSaturation:function(e,t,n){o={maxLeft:n,maxTop:n,callLeft:"setSaturation",callTop:"setLightness"},this.setSlider(e,t)},setHue:function(e,t,n){o={maxLeft:0,maxTop:n,callLeft:!1,callTop:"setHue"},this.setSlider(e,t)},setAlpha:function(e,t,n){o={maxLeft:0,maxTop:n,callLeft:!1,callTop:"setAlpha"},this.setSlider(e,t)},setKnob:function(e,t){o.knob.top=e+"px",o.knob.left=t+"px"}}}]).directive("colorpicker",["$document","$compile","Color","Slider","Helper",function(e,o,t,n,r){"use strict";return{require:"?ngModel",restrict:"A",link:function(i,c,s,l){function a(){e.on("mousemove",f),e.on("mouseup",d)}function u(){e.on("touchmove",f),e.on("touchend",d)}function p(){try{B.css("backgroundColor",A[S]())}catch(e){B.css("backgroundColor",A.toHex())}Y.css("backgroundColor",A.toHex(A.value.h,1,1,1)),"rgba"===S&&(w.css.backgroundColor=A.toHex())}function f(e){var o=n.getLeftPosition(e),t=n.getTopPosition(e),r=n.getSlider();n.setKnob(t,o),r.callLeft&&A[r.callLeft].call(A,o/$),r.callTop&&A[r.callTop].call(A,t/$),p();var s=A[S]();return c.val(s),l&&i.$apply(l.$setViewValue(s)),P&&F.val(s),!1}function d(){v("colorpicker-selected"),e.off("mousemove",f),e.off("mouseup",d),e.off("touchmove",f),e.off("touchend",d)}function h(e){A.setColor(c.val()),P&&!e&&F.val(c.val()),D.eq(0).css({left:A.value.s*$+"px",top:$-A.value.b*$+"px"}),D.eq(1).css("top",$*(1-A.value.h)+"px"),D.eq(2).css("top",$*(1-A.value.a)+"px"),p()}function g(){var e,o=r.getOffset(c[0]);return angular.isDefined(s.colorpickerParent)&&(o.left=0,o.top=0),"top"===I?e={top:o.top-147,left:o.left}:"right"===I?e={top:o.top,left:o.left+126}:"bottom"===I?e={top:o.top+c[0].offsetHeight+2,left:o.left}:"left"===I&&(e={top:o.top,left:o.left-150}),{top:e.top+"px",left:e.left+"px"}}function k(){b()}function m(){y.hasClass("colorpicker-visible")||(h(),y.addClass("colorpicker-visible").css(g()),v("colorpicker-shown"),C===!1&&(e.on("mousedown",k),e.on("touchstart",k)),s.colorpickerIsOpen&&(i[s.colorpickerIsOpen]=!0,i.$$phase||i.$digest()))}function v(e){l&&i.$emit(e,{name:s.ngModel,value:l.$modelValue})}function b(){y.hasClass("colorpicker-visible")&&(y.removeClass("colorpicker-visible"),v("colorpicker-closed"),e.off("mousedown",k),e.off("touchstart",k),s.colorpickerIsOpen&&(i[s.colorpickerIsOpen]=!1,i.$$phase||i.$digest()))}var x,w,S=s.colorpicker?s.colorpicker:"hex",I=angular.isDefined(s.colorpickerPosition)?s.colorpickerPosition:"bottom",C=angular.isDefined(s.colorpickerInline)?s.colorpickerInline:!1,L=angular.isDefined(s.colorpickerFixedPosition)?s.colorpickerFixedPosition:!1,M=angular.isDefined(s.colorpickerParent)?c.parent():angular.element(document.body),P=angular.isDefined(s.colorpickerWithInput)?s.colorpickerWithInput:!1,$=angular.isDefined(s.colorpickerSize)?s.colorpickerSize:100,x=$+"px",H=P?'':"",T=C?"":'',O='
'+H+T+"
",y=angular.element(O),A=t,X=y.find("colorpicker-hue"),Y=y.find("colorpicker-saturation"),B=y.find("colorpicker-preview"),D=y.find("i");if(o(y)(i),y.css("min-width",parseInt($)+29+"px"),Y.css({width:x,height:x}),X.css("height",x),P){var F=y.find("input");F.css("width",x),F.on("mousedown",function(e){e.stopPropagation()}).on("keyup",function(){var e=this.value;c.val(e),l&&l.$modelValue!==e&&(i.$apply(l.$setViewValue(e)),h(!0))})}"rgba"===S&&(y.addClass("alpha"),w=y.find("colorpicker-alpha"),w.css("height",x),w.on("click",function(e){n.setAlpha(e,L,$),f(e)}),r.isMobile()?w.on("touchstart",function(e){return n.setAlpha(e,L,$),u(),!1}).on("touchend",function(){v("colorpicker-selected-alpha")}):w.on("mousedown",function(e){return n.setAlpha(e,L,$),a(),!1}).on("mouseup",function(){v("colorpicker-selected-alpha")})),X.on("click",function(e){n.setHue(e,L,$),f(e)}),r.isMobile()?X.on("touchstart",function(e){return n.setHue(e,L,$),u(),!1}).on("touchend",function(){v("colorpicker-selected-hue")}):X.on("mousedown",function(e){return n.setHue(e,L,$),a(),!1}).on("mouseup",function(){v("colorpicker-selected-hue")}),Y.on("click",function(e){n.setSaturation(e,L,$),f(e),angular.isDefined(s.colorpickerCloseOnSelect)&&b()}),r.isMobile()?Y.on("touchstart",function(e){return n.setSaturation(e,L,$),u(),!1}).on("touchend",function(){v("colorpicker-selected-saturation")}):Y.on("mousedown",function(e){return n.setSaturation(e,L,$),a(),!1}).on("mouseup",function(){v("colorpicker-selected-saturation")}),L&&y.addClass("colorpicker-fixed-position"),y.addClass("colorpicker-position-"+I),"true"===C&&y.addClass("colorpicker-inline"),M.append(y),l&&(l.$render=function(){c.val(l.$viewValue),h()}),c.on("blur keyup change",function(){h()}),c.on("$destroy",function(){y.remove()}),C===!1?c.on("click",m):m(),y.on("mousedown",function(e){e.stopPropagation(),e.preventDefault()}),y.on("touchstart",function(e){e.stopPropagation(),e.preventDefault()}),y.find("button").on("click",function(){b()}),s.colorpickerIsOpen&&i.$watch(s.colorpickerIsOpen,function(e){e===!0?m():e===!1&&b()})}}}]); \ No newline at end of file