magix-components
Version:
1 lines • 7.96 kB
JavaScript
define("mx-color/index",["magix","$","../mx-dragdrop/index"],function(t,e,o){var i=t("magix"),s=t("$"),a=t("../mx-dragdrop/index");i.applyStyle("h",'.bq{padding:10px;background-color:#fff;display:inline-block;border:1px solid #ccc;border-radius:5px;overflow-y:hidden}.br{width:225px;zoom:1}.br:after,.br:before{display:table;content:""}.br:after{clear:both}.bs{border:1px solid #000;float:left;width:15px;height:15px;margin:-1px 0 0 -1px;position:relative}.bt:before{content:" ";position:absolute;left:2px;top:2px;border:2px solid #e8e8e8;border-style:inset;width:9px;height:9px}.bu{margin:10px 0;height:200px}.bv{position:relative;float:left}.bw{width:196px;height:196px}.bx{position:absolute;width:6px;height:6px;-webkit-box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);border-radius:50%;cursor:default}.by{position:relative;float:left;margin-left:10px}.bz{width:20px;height:196px}.bA{position:absolute;left:4px;top:-8px;border:8px solid transparent;border-right-color:#888;width:0;height:0;cursor:default}.bB{height:25px}.bC{width:99px;margin-right:5px;vertical-align:middle}.bD{width:50px;height:23px;line-height:23px;display:inline-block;margin-right:10px;vertical-align:middle;border:1px solid #ddd}');var r=window.SVGAngle||document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")?"SVG":"VML",d=function(t,e){e.append('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"><defs><linearGradient id="gradient-hsv" x1="0%" y1="100%" x2="0%" y2="0%"><stop offset="0%" stop-color="#FF0000" stop-opacity="1"></stop><stop offset="13%" stop-color="#FF00FF" stop-opacity="1"></stop><stop offset="25%" stop-color="#8000FF" stop-opacity="1"></stop><stop offset="38%" stop-color="#0040FF" stop-opacity="1"></stop><stop offset="50%" stop-color="#00FFFF" stop-opacity="1"></stop><stop offset="63%" stop-color="#00FF40" stop-opacity="1"></stop><stop offset="75%" stop-color="#0BED00" stop-opacity="1"></stop><stop offset="88%" stop-color="#FFFF00" stop-opacity="1"></stop><stop offset="100%" stop-color="#FF0000" stop-opacity="1"></stop></linearGradient></defs><rect x="0" y="0" width="100%" height="100%" fill="url(#gradient-hsv)"></rect></svg>'),t.append('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"><defs><lineargradient id="gradient-black" x1="0%" y1="100%" x2="0%" y2="0%"><stop offset="0%" stop-color="#000000" stop-opacity="1"></stop><stop offset="100%" stop-color="#CC9A81" stop-opacity="0"></stop></lineargradient><lineargradient id="gradient-white" x1="0%" y1="100%" x2="100%" y2="100%"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"></stop><stop offset="100%" stop-color="#CC9A81" stop-opacity="0"></stop></lineargradient></defs><rect x="0" y="0" width="100%" height="100%" fill="url(#gradient-white)"></rect><rect x="0" y="0" width="100%" height="100%" fill="url(#gradient-black)"></rect></svg>')},p=function(t,e){document.namespaces.mxv||document.namespaces.add("mxv","urn:schemas-microsoft-com:vml","#default#VML"),e.html('<div style="position: relative; width: 100%; height: 100%"><mxv:rect style="position: absolute; top: 0; left: 0; width: 100%; height: 100%" stroked="f" filled="t"><mxv:fill type="gradient" method="none" angle="0" color="red" color2="red" colors="8519f fuchsia;.25 #8000ff;24903f #0040ff;.5 aqua;41287f #00ff40;.75 #0bed00;57671f yellow"></mxv:fill></mxv:rect></div>'),t.html('<div style="position: relative; width: 100%; height: 100%"><mxv:rect style="position: absolute; left: -1px; top: -1px; width: 101%; height: 101%" stroked="f" filled="t"><mxv:fill type="gradient" method="none" angle="270" color="#FFFFFF" opacity="100%" color2="#CC9A81" o:opacity2="0%"></mxv:fill></mxv:rect><mxv:rect style="position: absolute; left: 0px; top: 0px; width: 100%; height: 101%" stroked="f" filled="t"><mxv:fill type="gradient" method="none" angle="0" color="#000000" opacity="100%" color2="#CC9A81" o:opacity2="0%"></mxv:fill></mxv:rect></div>')},c={selected:"bt",cnt:"bq"},l=["d81e06","f4ea2a","1afa29","1296db","13227a","d4237a","ffffff","e6e6e6","dbdbdb","cdcdcd","bfbfbf","8a8a8a","707070","515151","2c2c2c","000000","ea986c","eeb174","f3ca7e","f9f28b","c8db8c","aad08f","87c38f","83c6c2","7dc5eb","87a7d6","8992c8","a686ba","bd8cbb","be8dbd","e89abe","e8989a","e16632","e98f36","efb336","f6ef37","afcd51","7cba59","36ab60","1baba8","17ace3","3f81c1","4f68b0","594d9c","82529d","a4579d","db649b","dd6572","d84e06","e0620d","ea9518","f4ea2a","8cbb1a","2ba515","0e932e","0c9890","1295db","0061b2","0061b0","004198","122179","88147f","d3227b","d6204b"],n=function(t,e,o){var i,s,a,r,d;t=t%360/60,i=s=a=o-(d=o*e);var p=255*(i+=[d,r=d*(1-Math.abs(t%2-1)),0,0,r,d][t=~~t]),c=255*(s+=[r,d,d,r,0,0][t]),l=255*(a+=[0,0,r,d,d,r][t]);return{r:p,g:c,b:l,hex:"#"+(16777216|l|c<<8|p<<16).toString(16).slice(1)}},f=function(t,e,o){t/=255,e/=255,o/=255;var i,s,a,r;return a=Math.max(t,e,o),r=a-Math.min(t,e,o),i=0===r?null:a==t?(e-o)/r+(e<o?6:0):a==e?(o-t)/r+2:(t-e)/r+4,i=i%6*60,s=0===r?0:r/a,{h:i,s:s,v:a}};o.exports=i.View.extend({tmpl:{html:'<div id="shortcuts_<%=$$.id%>"><ul class="br"><%for(var a=0;a<$$.shortcuts.length;a++){%><li class="bs" id="sc_<%=$$.shortcuts[a]%>_<%=$$.id%>" style="background:#<%=$$.shortcuts[a]%>" mx-click=" __ab({color:\'#<%=$eq($$.shortcuts[a])%>\'})"></li><%}%></ul></div><div class="bu"><div class="bv"><div class="bw" id="cpicker_<%=$$.id%>" mx-click=" __aa()"></div><div class="bx" id="ph_<%=$$.id%>" mx-mousedown=" __Z()"></div></div><div class="by"><div class="bz" id="slide_<%=$$.id%>" mx-click=" __a_()"></div><div class="bA" mx-mousedown=" __Y();" id="sh_<%=$$.id%>"></div></div></div><div class="bB"><span class="bD" id="bgcolor_<%=$$.id%>"></span><input class="an bC" readonly="readonly" id="val_<%=$$.id%>"><button class="al am" type="button" mx-click=" __ac();">确定</button></div>',subs:[]},init:function(t){var e=this;e.__W=t.color||"#ffffff",e.__X={h:0,s:1,v:1},s("#"+e.id).addClass(c.cnt)},render:function(){var t=this;t.updater.digest({id:t.id,shortcuts:l});var e=s("#slide_"+t.id),o=s("#cpicker_"+t.id);"SVG"==r?d(o,e):p(o,e),t.setColor(t.__W)},setHSV:function(t,e){var o=this,i=o.__X;i.h=t.h%360,i.s=t.s,i.v=t.v;var a=n(t.h,t.s,t.v).hex,r=s("#cpicker_"+o.id),d=n(t.h,1,1);if(r.css("background",d.hex),s("#bgcolor_"+o.id).css("background",a),s("#val_"+o.id).val(a),!e){s("#shortcuts_"+o.id+" li").removeClass(c.selected);var p=Math.round(196*i.h/360-8);s("#sh_"+o.id).css({top:p}),p=Math.round(196*(1-i.v)-3);var l=Math.round(196*i.s-3);s("#ph_"+o.id).css({left:l,top:p})}s("#sc_"+a.substr(1,6)+"_"+o.id).addClass(c.selected)},setColor:function(t){var e=this,o=parseInt(t.substr(1,2),16),i=parseInt(t.substr(3,2),16),s=parseInt(t.substr(5,2),16),a=f(o,i,s);e.setHSV(a)},"__Y<mousedown>":function(t){var e=this,o=s(t.eventTarget),i=parseInt(o.css("top"),10),r=t;a.begin(t.eventTarget,function(t){var s=t.pageY-r.pageY;(s+=i)<=-8?s=-8:s>=188&&(s=188),o.css({top:s});var a=(s+8)/196*360;e.setHSV({h:a,s:e.__X.s,v:e.__X.v},!0)})},"__Z<mousedown>":function(t){var e=this,o=s(t.eventTarget),i=parseInt(o.css("left"),10),r=parseInt(o.css("top"),10),d=t;a.begin(t.eventTarget,function(t){var s=t.pageY-d.pageY,a=t.pageX-d.pageX;(s+=r)<=-3?s=-3:s>=193&&(s=193),(a+=i)<=-3?a=-3:a>=193&&(a=193),o.css({top:s,left:a});var p=(a+3)/196,c=(196-(s+3))/196;e.setHSV({h:e.__X.h,s:p,v:c})})},"__a_<click>":function(t){var e=this,o=s(t.eventTarget).offset(),i=(t.pageY-o.top)/196*360;e.setHSV({h:i,s:e.__X.s,v:e.__X.v})},"__aa<click>":function(t){var e=this,o=s(t.eventTarget).offset(),i=(t.pageX-o.left)/196,a=(196-(t.pageY-o.top))/196;e.setHSV({h:e.__X.h,s:i,v:a})},"__ab<click>":function(t){this.setColor(t.params.color),s(t.eventTarget).addClass(c.selected)},"__ac<click>":function(){var t=this,e=s("#val_"+t.id);s("#"+t.id).trigger({type:"change",color:e.val()})}})});