From d4acdca9c531aae713fef318e1689a52dac3d73d Mon Sep 17 00:00:00 2001 From: nobody Date: Sat, 26 Sep 2020 07:21:07 +0200 Subject: [PATCH] AMO warning fixed: Replaced innerHTML in Color Picker --- .../internal/color-picker/color-picker.min.js | 625 +++++++++++++++++- modules/internal/color-picker/credits | 4 + 2 files changed, 628 insertions(+), 1 deletion(-) diff --git a/modules/internal/color-picker/color-picker.min.js b/modules/internal/color-picker/color-picker.min.js index 7cedcf23..a5e2d23b 100644 --- a/modules/internal/color-picker/color-picker.min.js +++ b/modules/internal/color-picker/color-picker.min.js @@ -5,5 +5,628 @@ * Author: Taufik Nurrohman * License: MIT * -------------------------------------------------------------- + * + * Modified in L328 by nobody */ -!function(n,e,t){var r,i=e.documentElement,o="HEX",c="top",u="right",a="left",f="px",s=n.setTimeout,l=["touchstart","mousedown"],d=["touchmove","mousemove"],v=["orientationchange","resize"],h=["touchend","mouseup"];function p(n){var e,t,r,i,o,c,u,a,f=+n[0],s=+n[1],l=+n[2];switch(c=l*(1-s),u=l*(1-(o=6*f-(i=Math.floor(6*f)))*s),a=l*(1-(1-o)*s),i=i||0,u=u||0,a=a||0,i%6){case 0:e=l,t=a,r=c;break;case 1:e=u,t=l,r=c;break;case 2:e=c,t=l,r=a;break;case 3:e=c,t=u,r=l;break;case 4:e=a,t=c,r=l;break;case 5:e=l,t=c,r=u}return[L(255*e),L(255*t),L(255*r),H(w(n[3])?+n[3]:1,2)]}function g(n){var e,t=+n[0]/255,r=+n[1]/255,i=+n[2]/255,o=Math.max(t,r,i),c=Math.min(t,r,i),u=o,a=o-c,f=0===o?0:a/o;if(o===c)e=0;else{switch(o){case t:e=(r-i)/a+(re[1]?e[1]:n}function H(n,e){return+n.toFixed(e)}function M(n,e){return parseInt(n,e||10)}function L(n){return Math.round(n)}function O(n,e){return n.toString(e)}function X(n,e,t){for(var r=0,i=e.length;r
';var I,N,W,$,B=e.body,D=rn(),F=g(D),R=O.firstChild,S=R.children[0],_=R.children[1],q=R.children[2],A=S.children[0],G=S.children[3],J=(_.children[0],_.children[1]),K=q.children[0],Q=q.children[2],U=0,V=0,Z=0,nn=0,en=0,tn=0;!function r(o,x){F=g(D=rn()),o||((x||T.parent||B).appendChild(O),H.visible=!0),I=function(n){return r(0,n),on("enter",D),H},N=function(){var t=cn();return t&&(t.removeChild(O),H.current=null,H.visible=!1),X(S,l,gn),X(_,l,bn),X(q,l,mn),X(e,d,hn),X(e,h,pn),X(n,v,$),on("exit",D),H},W=function(e){var r=k(n),o=k(i),u=r[0]-o[0],s=r[1]-i.clientHeight,l=C(n),d=C(t),v=k(O),h=v[0],p=v[1],g=d[0]+l[0],b=d[1]+l[1]+k(t)[1];if("object"==typeof e)w(e[0])&&(g=e[0]),w(e[1])&&(b=e[1]);else{var m=l[0],y=l[1],x=l[0]+r[0]-h-u,E=l[1]+r[1]-p-s;g=P(g,[m,x])>>0,b=P(b,[y,E])>>0}return z(O,a,g+f),z(O,c,b+f),on("fit",D),H},$=function(){return W()};var E=k(S),M=E[0],Y=E[1],R=k(G),an=R[0],fn=R[1],sn=k(_)[1],ln=k(J)[1],dn=k(q)[1],vn=k(Q)[1];function hn(n){nn&&function(n){var e=b(S,n),t=P(e[0],[0,M]),r=P(e[1],[0,Y]);F[1]=1-(M-t)/M,F[2]=(Y-r)/Y,Cn()}(n),en&&function(n){F[0]=(sn-P(b(_,n)[1],[0,sn]))/sn,Cn()}(n),tn&&function(n){F[3]=(dn-P(b(q,n)[1],[0,dn]))/dn,Cn()}(n),D=p(F),(nn||en||tn)&&(on(U||V||Z?"start":"drag",D),on("change",D)),U=V=Z=0}function pn(n){D=p(F);var e=n.target,r=t===m(e,t),i=O===m(e,O);H.current=null,r||i?i&&(nn||en||tn)&&on("stop",D):L.blur?on("blur",D):cn()&&N(),nn=en=tn=0}function gn(n){H.current=S,U=nn=1,hn(n),y(n)}function bn(n){H.current=_,V=en=1,hn(n),y(n)}function mn(n){H.current=q,Z=tn=1,hn(n),y(n)}function Cn(){var n;w((n=F)[1])&&z(G,u,M-an/2-M*+n[1]+f),w(n[2])&&z(G,c,Y-fn/2-Y*+n[2]+f),w(n[0])&&z(J,c,sn-ln/2-sn*+n[0]+f),w(n[3])&&z(Q,c,dn-vn/2-dn*+n[3]+f);var e=p(F),t=p([F[0],1,1]);z(A,"backgroundColor","rgb("+t[0]+","+t[1]+","+t[2]+")"),z(K,"backgroundImage","linear-gradient(rgb("+e[0]+","+e[1]+","+e[2]+"),transparent)")}o?(j(t,l,un),s(function(){on("change",D)},1)):(j(S,l,gn),j(_,l,bn),j(q,l,mn),j(e,d,hn),j(e,h,pn),j(n,v,$),W()),H.get=function(){return rn()},H.set=function(n,e,t,r){return F=g([n,e,t,r]),Cn(),H},Cn()}(1),H.color=function(n,e,t,r){return M[x(M[T.color])?T.color:o]([n,e,t,r])},H.current=null,H.enter=I,H.exit=N,H.fire=on,H.fit=W,H.hooks=L,H.off=function(n,e){if(!w(n))return L={},H;if(w(L[n]))if(w(e)){for(var t=0,r=L[n].length;t b[1]) return b[1]; + return a; + } + + function toFixed(a, b) { + return +(a.toFixed(b)); + } + + function toInt(a, b) { + return parseInt(a, b || 10); + } + + function toRound(a) { + return Math.round(a); + } + + function toString(a, b) { + return a.toString(b); + } + + function eventsLet(to, events, fn) { + for (var i = 0, j = events.length; i < j; ++i) { + to.removeEventListener(events[i], fn, false); + } + } + + function eventsSet(to, events, fn) { + for (var i = 0, j = events.length; i < j; ++i) { + to.addEventListener(events[i], fn, false); + } + } + + function styleSet(to, prop, value) { + to.style[prop] = value; + } + + (function($$) { + + $$.version = '2.1.2'; + + $$.state = { + 'class': 'color-picker', + 'color': HEX, + 'parent': null + }; + + // Collect all instance(s) + $$[instances] = {}; + + $$[HEX] = function(x) { + if (isString(x)) { + var count = (x = x.trim()).length; + if ((4 === count || 7 === count) && '#' === x[0]) { + if (/^#([a-z\d]{1,2}){3}$/i.test(x)) { + if (4 === count) { + return [toInt(x[1] + x[1], 16), toInt(x[2] + x[2], 16), toInt(x[3] + x[3], 16), 1]; + } + return [toInt(x[1] + x[2], 16), toInt(x[3] + x[4], 16), toInt(x[5] + x[6], 16), 1]; + } + } else if ((5 === count || 9 === count) && '#' === x[0]) { + if (/^#([a-z\d]{1,2}){4}$/i.test(x)) { + if (5 === count) { + return [toInt(x[1] + x[1], 16), toInt(x[2] + x[2], 16), toInt(x[3] + x[3], 16), toFixed(toInt(x[4] + x[4], 16) / 255, 2)]; + } + return [toInt(x[1] + x[2], 16), toInt(x[3] + x[4], 16), toInt(x[5] + x[6], 16), toFixed(toInt(x[7] + x[8], 16) / 255, 2)]; + } + } + return [0, 0, 0, 1]; // Default to black + } + return '#' + ('000000' + toString(+x[2] | (+x[1] << 8) | (+x[0] << 16), 16)).slice(-6) + (isSet(x[3]) && x[3] < 1 ? toString(toRound(x[3] * 255) + 0x10000, 16).substr(-2) : ""); + }; + + $$._ = $$.prototype; + + })(win[name] = function(source, o) { + + if (!source) return; + + var $ = this, + $$ = win[name], + hooks = {}, + self = doc.createElement('div'), + state = Object.assign({}, $$.state, isString(o) ? { + 'color': o + } : (o || {})), + cn = state['class']; + + // Already instantiated, skip! + if (source[name]) { + return $; + } + + // Return new instance if `CP` was called without the `new` operator + if (!($ instanceof $$)) { + return new $$(source, o); + } + + // Store color picker instance to `CP.instances` + $$[instances][source.id || source.name || Object.keys($$[instances]).length] = $; + + // Mark current DOM as active color picker to prevent duplicate instance + source[name] = 1; + + $.visible = false; + + function value(a) { + var to = $$[isFunction($$[state.color]) ? state.color : HEX], + color; + if (color = source.dataset.color) { + if (isSet(a)) { + return (source.dataset.color = to(color)); + } + return to(color); + } + if (color = source.value) { + if (isSet(a)) { + return (source.value = to(color)); + } + return to(color); + } + if (color = source.textContent) { + if (isSet(a)) { + return (source.textContent = to(color)); + } + return to(color); + } + if (isSet(a)) { + return; // Do nothing + } + return [0, 0, 0, 1]; // Default to black + } + + function hookLet(name, fn) { + if (!isSet(name)) { + return (hooks = {}), $; + } + if (isSet(hooks[name])) { + if (isSet(fn)) { + for (var i = 0, j = hooks[name].length; i < j; ++i) { + if (fn === hooks[name][i]) { + hooks[name].splice(i, 1); + } + } + // Clean-up empty hook(s) + if (0 === j) { + delete hooks[name]; + } + } else { + delete hooks[name]; + } + } + return $; + } + + function hookSet(name, fn) { + if (!isSet(hooks[name])) { + hooks[name] = []; + } + if (isSet(fn)) { + hooks[name].push(fn); + } + return $; + } + + function hookFire(name, lot) { + if (!isSet(hooks[name])) { + return $; + } + for (var i = 0, j = hooks[name].length; i < j; ++i) { + hooks[name][i].apply($, lot); + } + return $; + } + + self.className = cn; + + // ****************************************************************************************** + // Modified part (innerHTML removed, because AMO warning) + // https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML + + var outerDiv = document.createElement('div'); + + var svDiv = document.createElement('div'); + svDiv.classList.add(cn + ':sv'); + svDiv.appendChild(document.createElement('div')); + svDiv.appendChild(document.createElement('div')); + svDiv.appendChild(document.createElement('div')); + svDiv.appendChild(document.createElement('i')); + + var hDiv = document.createElement('div'); + hDiv.classList.add(cn + ':h'); + hDiv.appendChild(document.createElement('div')); + hDiv.appendChild(document.createElement('div')); + hDiv.appendChild(document.createElement('div')); + hDiv.appendChild(document.createElement('i')); + + var aDiv = document.createElement('div'); + aDiv.classList.add(cn + ':a'); + aDiv.appendChild(document.createElement('div')); + aDiv.appendChild(document.createElement('div')); + aDiv.appendChild(document.createElement('div')); + aDiv.appendChild(document.createElement('i')); + + outerDiv.appendChild(svDiv); + outerDiv.appendChild(hDiv); + outerDiv.appendChild(aDiv); + + self.appendChild(outerDiv); + // ****************************************************************************************** + + var doEnter, + doExit, + doFit, + doFitTo, + body = doc.body, + color = value(), + data = RGB2HSV(color), + C = self.firstChild, + SV = C[children][0], + H = C[children][1], + A = C[children][2], + + SVColor = SV[children][0], + // SVSaturation = SV[children][1], + // SVValue = SV[children][2], + SVCursor = SV[children][3], + + HColor = H[children][0], + HCursor = H[children][1], + + AColor = A[children][0], + // APattern = A[children][1], + ACursor = A[children][2], + + SVStarting = 0, + HStarting = 0, + AStarting = 0, + + SVDragging = 0, + HDragging = 0, + ADragging = 0; + + function isVisible() { + return self.parentNode; + } + + function doClick(e) { + if (hooks.focus) { + hookFire('focus', color); + } else { + var t = e.target, + isSource = source === closestGet(t, source); + if (isSource) { + !isVisible() && doEnter(state.parent); + } else { + doExit(); + } + } + } + + function doApply(isFirst, to) { + + // Refresh value + data = RGB2HSV(color = value()); + + if (!isFirst) { + (to || state.parent || body).appendChild(self), ($.visible = true); + } + + doEnter = function(to) { + return doApply(0, to), hookFire('enter', color), $; + }; + + doExit = function() { + var exist = isVisible(); + if (exist) { + exist.removeChild(self); + $.current = null; + $.visible = false; + } + eventsLet(SV, downEvents, doDownSV); + eventsLet(H, downEvents, doDownH); + eventsLet(A, downEvents, doDownA); + eventsLet(doc, moveEvents, doMove); + eventsLet(doc, upEvents, doStop); + eventsLet(win, resizeEvents, doFitTo); + return hookFire('exit', color), $; + }; + + doFit = function(to) { + var winSize = sizeGet(win), + htmlSize = sizeGet(html), + scrollBarSizeV = winSize[0] - htmlSize[0], // Vertical scroll bar + scrollBarSizeH = winSize[1] - html.clientHeight, // Horizontal scroll bar + winOffset = offsetGet(win), + sourceOffset = offsetGet(source), + selfSize = sizeGet(self), + selfSizeWidth = selfSize[0], + selfSizeHeight = selfSize[1], + selfOffsetLeft = sourceOffset[0] + winOffset[0], + selfOffsetTop = sourceOffset[1] + winOffset[1] + sizeGet(source)[1]; // Drop! + if (isObject(to)) { + isSet(to[0]) && (selfOffsetLeft = to[0]); + isSet(to[1]) && (selfOffsetTop = to[1]); + } else { + var minX = winOffset[0], + minY = winOffset[1], + maxX = winOffset[0] + winSize[0] - selfSizeWidth - scrollBarSizeV, + maxY = winOffset[1] + winSize[1] - selfSizeHeight - scrollBarSizeH; + selfOffsetLeft = toEdge(selfOffsetLeft, [minX, maxX]) >> 0; + selfOffsetTop = toEdge(selfOffsetTop, [minY, maxY]) >> 0; + } + styleSet(self, left, selfOffsetLeft + px); + styleSet(self, top, selfOffsetTop + px); + return hookFire('fit', color), $; + }; + + doFitTo = function() { + return doFit(); + }; + + var SVSize = sizeGet(SV), + SVSizeWidth = SVSize[0], + SVSizeHeight = SVSize[1], + SVCursorSize = sizeGet(SVCursor), + SVCursorSizeWidth = SVCursorSize[0], + SVCursorSizeHeight = SVCursorSize[1], + HSizeHeight = sizeGet(H)[1], + HCursorSizeHeight = sizeGet(HCursor)[1], + ASizeHeight = sizeGet(A)[1], + ACursorSizeHeight = sizeGet(ACursor)[1]; + + if (isFirst) { + eventsSet(source, downEvents, doClick); + delay(function() { + hookFire('change', color); + }, 1); + } else { + eventsSet(SV, downEvents, doDownSV); + eventsSet(H, downEvents, doDownH); + eventsSet(A, downEvents, doDownA); + eventsSet(doc, moveEvents, doMove); + eventsSet(doc, upEvents, doStop); + eventsSet(win, resizeEvents, doFitTo); + doFit(); + } + + function doMove(e) { + SVDragging && cursorSVSet(e); + HDragging && cursorHSet(e); + ADragging && cursorASet(e); + color = P2RGB(data); + if (SVDragging || HDragging || ADragging) { + hookFire((SVStarting || HStarting || AStarting ? 'start' : 'drag'), color); + hookFire('change', color); + } + SVStarting = HStarting = AStarting = 0; + } + + function doStop(e) { + color = P2RGB(data); + var t = e.target, + isSource = source === closestGet(t, source), + isSelf = self === closestGet(t, self); + $.current = null; + if (!isSource && !isSelf) { + if (hooks.blur) { + hookFire('blur', color); + } else { + // Click outside the source or picker element to exit + isVisible() && doExit(); + } + } else { + if (isSelf) { + if (SVDragging || HDragging || ADragging) { + hookFire('stop', color); + } + } + } + SVDragging = HDragging = ADragging = 0; + } + + function doDownSV(e) { + $.current = SV; + SVStarting = SVDragging = 1; + doMove(e); + doPreventDefault(e); + } + + function doDownH(e) { + $.current = H; + HStarting = HDragging = 1; + doMove(e); + doPreventDefault(e); + } + + function doDownA(e) { + $.current = A; + AStarting = ADragging = 1; + doMove(e); + doPreventDefault(e); + } + + function cursorSet(x) { + isSet(x[1]) && styleSet(SVCursor, right, (SVSizeWidth - (SVCursorSizeWidth / 2) - (SVSizeWidth * +x[1])) + px); + isSet(x[2]) && styleSet(SVCursor, top, (SVSizeHeight - (SVCursorSizeHeight / 2) - (SVSizeHeight * +x[2])) + px); + isSet(x[0]) && styleSet(HCursor, top, (HSizeHeight - (HCursorSizeHeight / 2) - (HSizeHeight * +x[0])) + px); + isSet(x[3]) && styleSet(ACursor, top, (ASizeHeight - (ACursorSizeHeight / 2) - (ASizeHeight * +x[3])) + px); + } + + $.get = function() { + return value(); + }; + + $.set = function(r, g, b, a) { + data = RGB2HSV([r, g, b, a]); + return colorSet(), $; + }; + + function cursorSVSet(e) { + var SVPoint = axixGet(SV, e), + x = toEdge(SVPoint[0], [0, SVSizeWidth]), + y = toEdge(SVPoint[1], [0, SVSizeHeight]); + data[1] = 1 - ((SVSizeWidth - x) / SVSizeWidth); + data[2] = (SVSizeHeight - y) / SVSizeHeight; + colorSet(); + } + + function cursorHSet(e) { + data[0] = (HSizeHeight - toEdge(axixGet(H, e)[1], [0, HSizeHeight])) / HSizeHeight; + colorSet(); + } + + function cursorASet(e) { + data[3] = (ASizeHeight - toEdge(axixGet(A, e)[1], [0, ASizeHeight])) / ASizeHeight; + colorSet(); + } + + function colorSet() { + cursorSet(data); + var a = P2RGB(data), + b = P2RGB([data[0], 1, 1]); + styleSet(SVColor, 'backgroundColor', 'rgb(' + b[0] + ',' + b[1] + ',' + b[2] + ')'); + styleSet(AColor, 'backgroundImage', 'linear-gradient(rgb(' + a[0] + ',' + a[1] + ',' + a[2] + '),transparent)'); + } colorSet(); + + } doApply(1); + + $.color = function(r, g, b, a) { + return $$[isFunction($$[state.color]) ? state.color : HEX]([r, g, b, a]); + }; + + $.current = null; + $.enter = doEnter; + $.exit = doExit; + $.fire = hookFire; + $.fit = doFit; + $.hooks = hooks; + $.off = hookLet; + $.on = hookSet; + + $.pop = function() { + if (!source[name]) { + return $; // Already ejected + } + delete source[name]; + eventsLet(source, downEvents, doClick); + return doExit(), hookFire('pop', color); + }; + + $.value = function(r, g, b, a) { + return $.set(r, g, b, a), hookFire('change', [r, g, b, a]); + }; + + $.self = self; + $.source = source; + $.state = state; + + }); + +})(window, document, 'CP'); diff --git a/modules/internal/color-picker/credits b/modules/internal/color-picker/credits index a352fbcb..3adb6a3b 100644 --- a/modules/internal/color-picker/credits +++ b/modules/internal/color-picker/credits @@ -6,3 +6,7 @@ https://github.com/taufik-nurrohman/color-picker https://taufik-nurrohman.js.org/color-picker/ MIT License (MIT) + + +L328: Modified part (innerHTML removed, because AMO warning) + https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML