0byt3m1n1-V2
Path:
/
home
/
a
/
c
/
a
/
academiac
/
www
/
[
Home
]
File: mooRainbow.js.tar
home/academiac/www/media/system/js/mooRainbow.js 0000644 00000032546 15137316056 0015721 0 ustar 00 var MooRainbow=new Class({options:{id:"mooRainbow",prefix:"moor-",imgPath:"images/",startColor:[255,0,0],wheel:!1,onComplete:Class.empty,onChange:Class.empty},initialize:function(b,c){if(this.element=document.id(b))this.setOptions(c),this.sliderPos=0,this.pickerPos={x:0,y:0},this.currentColor=this.backupColor=this.options.startColor,this.sets={rgb:[],hsb:[],hex:[]},this.pickerClick=this.sliderClick=!1,this.layout||this.doLayout(),this.OverlayEvents(),this.sliderEvents(),this.backupEvent(),this.options.wheel&& this.wheelEvents(),this.element.addEvent("click",function(a){this.toggle(a)}.bind(this)),this.layout.overlay.setStyle("background-color",this.options.startColor.rgbToHex()),this.layout.backup.setStyle("background-color",this.backupColor.rgbToHex()),this.pickerPos.x=this.snippet("curPos").l+this.snippet("curSize","int").w,this.pickerPos.y=this.snippet("curPos").t+this.snippet("curSize","int").h,this.manualSet(this.options.startColor),this.pickerPos.x=this.snippet("curPos").l+this.snippet("curSize", "int").w,this.pickerPos.y=this.snippet("curPos").t+this.snippet("curSize","int").h,this.sliderPos=this.snippet("arrPos")-this.snippet("arrSize","int"),window.khtml&&this.hide()},toggle:function(){this[this.visible?"hide":"show"]()},show:function(){this.rePosition();this.layout.setStyle("display","block");this.layout.set("aria-hidden","false");this.visible=!0},hide:function(){this.layout.setStyles({display:"none"});this.layout.set("aria-hidden","true");this.visible=!1},manualSet:function(b,c){if(!c|| c!="hsb"&&c!="hex")c="rgb";var a,d;c=="rgb"?(a=b,d=b.rgbToHsb(),b.rgbToHex()):c=="hsb"?(d=b,a=b.hsbToRgb(),a.rgbToHex()):(a=b.hexToRgb(!0),d=a.rgbToHsb());this.setMooRainbow(a);this.autoSet(d)},autoSet:function(b){var c=this.snippet("curSize","int").h,a=this.snippet("curSize","int").w,d=this.layout.overlay.height,e=this.layout.overlay.width,f=this.layout.slider.height,g=this.snippet("arrSize","int"),e=Math.round(e*b[1]/100-a),d=Math.round(-(d*b[2]/100)+d-c),b=Math.round(f*b[0]/360),b=f-(b==360?0: b)+this.snippet("slider")-g,f=[this.sets.hsb[0],100,100].hsbToRgb().rgbToHex();this.layout.cursor.setStyles({top:d,left:e});this.layout.arrows.setStyle("top",b);this.layout.overlay.setStyle("background-color",f);this.sliderPos=this.snippet("arrPos")-g;this.pickerPos.x=this.snippet("curPos").l+a;this.pickerPos.y=this.snippet("curPos").t+c},setMooRainbow:function(b,c){if(!c||c!="hsb"&&c!="hex")c="rgb";var a,d,e;c=="rgb"?(a=b,d=b.rgbToHsb(),e=b.rgbToHex()):c=="hsb"?(d=b,a=b.hsbToRgb(),e=a.rgbToHex()): (e=b,a=b.hexToRgb(),d=a.rgbToHsb());this.sets={rgb:a,hsb:d,hex:e};this.pickerPos.x||this.autoSet(d);this.RedInput.value=a[0];this.GreenInput.value=a[1];this.BlueInput.value=a[2];this.HueInput.value=d[0];this.SatuInput.value=d[1];this.BrighInput.value=d[2];this.hexInput.value=e;this.currentColor=a;this.chooseColor.setStyle("background-color",a.rgbToHex());this.fireEvent("onChange",[this.sets,this])},parseColors:function(b,c,a){b=Math.round(b*100/this.layout.overlay.width);c=100-Math.round(c*100/this.layout.overlay.height); a=360-Math.round(a*360/this.layout.slider.height)+this.snippet("slider")-this.snippet("arrSize","int");a-=this.snippet("arrSize","int");return[a>=360?0:a<0?0:a,b>100?100:b<0?0:b,c>100?100:c<0?0:c]},OverlayEvents:function(){var b,c,a;b=this.snippet("curSize","int").h;c=this.snippet("curSize","int").w;a=this.arrRGB.concat(this.arrHSB,this.hexInput);document.addEvent("click",function(){this.visible&&this.hide(this.layout)}.bind(this));a.each(function(a){a.addEvent("keydown",this.eventKeydown.bind(this, a));a.addEvent("keyup",this.eventKeyup.bind(this,a))},this);[this.element,this.layout].each(function(a){a.addEvents({click:function(a){(new Event(a)).stop()},keyup:function(a){a=new Event(a);a.key=="esc"&&this.visible&&this.hide(this.layout)}.bind(this)},this)},this);this.layout.drag=new Drag(this.layout.cursor,{onStart:this.overlayDrag.bind(this),onDrag:this.overlayDrag.bind(this),snap:0});this.layout.overlay2.addEvent("mousedown",function(a){a=new Event(a);this.layout.cursor.setStyles({top:a.page.y- this.layout.overlay.getTop()-b,left:a.page.x-this.layout.overlay.getLeft()-c});this.overlayDrag.call(this);this.layout.drag.start(a)}.bind(this));this.okButton.addEvent("click",function(){if(this.currentColor!=this.options.startColor)this.backupColor=this.currentColor,this.layout.backup.setStyle("background-color",this.backupColor.rgbToHex());this.hide();this.fireEvent("onComplete",[this.sets,this])}.bind(this))},overlayDrag:function(){var b=this.snippet("curSize","int").h,c=this.snippet("curSize", "int").w;this.pickerPos.x=this.snippet("curPos").l+c;this.pickerPos.y=this.snippet("curPos").t+b;this.setMooRainbow(this.parseColors(this.pickerPos.x,this.pickerPos.y,this.sliderPos),"hsb");this.fireEvent("onChange",[this.sets,this])},sliderEvents:function(){var b=this.snippet("arrSize","int"),c;c=[0+this.snippet("slider")-b,this.layout.slider.height-b+this.snippet("slider")];this.layout.sliderDrag=new Drag(this.layout.arrows,{limit:{y:c},modifiers:{x:!1},onStart:this.sliderDrag.bind(this),onDrag:this.sliderDrag.bind(this), snap:0});this.layout.slider.addEvent("mousedown",function(a){a=new Event(a);this.layout.arrows.setStyle("top",a.page.y-this.layout.slider.getTop()+this.snippet("slider")-b);this.sliderDrag.call(this);this.layout.sliderDrag.start(a)}.bind(this))},sliderDrag:function(){var b=this.snippet("arrSize","int");this.sliderPos=this.snippet("arrPos")-b;this.setMooRainbow(this.parseColors(this.pickerPos.x,this.pickerPos.y,this.sliderPos),"hsb");this.layout.overlay.setStyle("background-color",[this.sets.hsb[0], 100,100].hsbToRgb().rgbToHex());this.fireEvent("onChange",[this.sets,this])},backupEvent:function(){this.layout.backup.addEvent("click",function(){this.manualSet(this.backupColor);this.fireEvent("onChange",[this.sets,this])}.bind(this))},wheelEvents:function(){this.arrRGB.copy().extend(this.arrHSB).each(function(b){b.addEvents({mousewheel:this.eventKeys.bindWithEvent(this,b),keydown:this.eventKeys.bindWithEvent(this,b)})},this);[this.layout.arrows,this.layout.slider].each(function(b){b.addEvents({mousewheel:this.eventKeys.bindWithEvent(this, [this.arrHSB[0],"slider"]),keydown:this.eventKeys.bindWithEvent(this,[this.arrHSB[0],"slider"])})},this)},eventKeys:function(b,c){var a,d;if(b.type=="keydown")if(b.key=="up")a=1;else if(b.key=="down")a=-1;else return;else b.type==Element.Events.mousewheel.type&&(a=b.wheel>0?1:-1);this.arrRGB.test(c)?d="rgb":(this.arrHSB.test(c),d="hsb");if(d=="rgb"){d=this.sets.rgb;var e=this.sets.hsb,f=this.options.prefix;a=c.value.toInt()+a;a=a>255?255:a<0?0:a;switch(c.className){case f+"rInput":a=[a,d[1],d[2]]; break;case f+"gInput":a=[d[0],a,d[2]];break;case f+"bInput":a=[d[0],d[1],a];break;default:a=d}this.manualSet(a)}else{e=this.sets.hsb;f=this.options.prefix;a=c.value.toInt()+a;a=c.className.test(/(HueInput)/)?a>359?0:a<0?0:a:a>100?100:a<0?0:a;switch(c.className){case f+"HueInput":a=[a,e[1],e[2]];break;case f+"SatuInput":a=[e[0],a,e[2]];break;case f+"BrighInput":a=[e[0],e[1],a];break;default:a=e}this.manualSet(a,"hsb")}this.fireEvent("onChange",[this.sets,this]);b.stop()},eventKeydown:function(b,c){var a= c.code,d=c.key;!b.className.test(/hexInput/)&&!(a>=48&&a<=57)&&d!="backspace"&&d!="tab"&&d!="delete"&&d!="left"&&d!="right"&&c.stop()},eventKeyup:function(b,c){var a=c.code,d=c.key,e=b.value.charAt(0);if(b.value||b.value===0){if(b.className.test(/hexInput/)){if(e!="#"&&b.value.length!=6)return;if(e=="#"&&b.value.length!=7)return}else if(!(a>=48&&a<=57)&&!["backspace","tab","delete","left","right"].test(d)&&b.value.length>3)return;a=this.options.prefix;if(b.className.test(/(rInput|gInput|bInput)/)){if(!(b.value< 0||b.value>255)){switch(b.className){case a+"rInput":a=[b.value,this.sets.rgb[1],this.sets.rgb[2]];break;case a+"gInput":a=[this.sets.rgb[0],b.value,this.sets.rgb[2]];break;case a+"bInput":a=[this.sets.rgb[0],this.sets.rgb[1],b.value];break;default:a=this.sets.rgb}this.manualSet(a);this.fireEvent("onChange",[this.sets,this])}}else if(b.className.test(/hexInput/)){if(a=b.value.hexToRgb(!0),!isNaN(a[0])&&!isNaN(a[1])&&!isNaN(a[2])&&(a||a===0))this.manualSet(a),this.fireEvent("onChange",[this.sets,this])}else if(!(b.className.test(/HueInput/)&& b.value<0||b.value>360)){if(b.className.test(/HueInput/)&&b.value==360)b.value=0;else if(b.className.test(/(SatuInput|BrighInput)/)&&b.value<0||b.value>100)return;switch(b.className){case a+"HueInput":a=[b.value,this.sets.hsb[1],this.sets.hsb[2]];break;case a+"SatuInput":a=[this.sets.hsb[0],b.value,this.sets.hsb[2]];break;case a+"BrighInput":a=[this.sets.hsb[0],this.sets.hsb[1],b.value];break;default:a=this.sets.hsb}this.manualSet(a,"hsb");this.fireEvent("onChange",[this.sets,this])}}},doLayout:function(){var b= this.options.id,c=this.options.prefix,a=b+" ."+c;this.layout=(new Element("div",{styles:{display:"block",position:"absolute"},id:b})).inject(document.body);var b=(new Element("div",{styles:{position:"relative"},"class":c+"box"})).inject(this.layout),d=(new Element("div",{styles:{position:"absolute",overflow:"hidden"},"class":c+"overlayBox"})).inject(b),e=(new Element("div",{styles:{position:"absolute",zIndex:1},"class":c+"arrows"})).inject(b);e.width=e.getStyle("width").toInt();e.height=e.getStyle("height").toInt(); var e=(new Element("img",{styles:{"background-color":"#fff",position:"relative",zIndex:2},src:this.options.imgPath+"moor_woverlay.png","class":c+"overlay"})).inject(d),f=(new Element("img",{styles:{position:"absolute",top:0,left:0,zIndex:2},src:this.options.imgPath+"moor_boverlay.png","class":c+"overlay"})).inject(d);if(window.ie6){d.setStyle("overflow","");var g=e.src;e.src=this.options.imgPath+"blank.gif";e.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+g+"', sizingMethod='scale')"; g=f.src;f.src=this.options.imgPath+"blank.gif";f.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+g+"', sizingMethod='scale')"}e.width=f.width=d.getStyle("width").toInt();e.height=f.height=d.getStyle("height").toInt();d=(new Element("div",{styles:{overflow:"hidden",position:"absolute",zIndex:2},"class":c+"cursor"})).inject(d);d.width=d.getStyle("width").toInt();d.height=d.getStyle("height").toInt();d=(new Element("img",{styles:{position:"absolute","z-index":2},src:this.options.imgPath+ "moor_slider.png","class":c+"slider"})).inject(b);this.layout.slider=Slick.find(document,"#"+a+"slider");d.width=d.getStyle("width").toInt();d.height=d.getStyle("height").toInt();(new Element("div",{styles:{position:"absolute"},"class":c+"colorBox"})).inject(b);(new Element("div",{styles:{zIndex:2,position:"absolute"},"class":c+"chooseColor"})).inject(b);this.layout.backup=(new Element("div",{styles:{zIndex:2,position:"absolute",cursor:"pointer"},"class":c+"currentColor"})).inject(b);d=(new Element("label")).inject(b).setStyle("position", "absolute");e=d.clone().inject(b).addClass(c+"gLabel").appendText("G: ");f=d.clone().inject(b).addClass(c+"bLabel").appendText("B: ");d.appendText("R: ").addClass(c+"rLabel");g=new Element("input");g.clone().inject(e).addClass(c+"gInput");g.clone().inject(f).addClass(c+"bInput");g.inject(d).addClass(c+"rInput");d=(new Element("label")).inject(b).setStyle("position","absolute");e=d.clone().inject(b).addClass(c+"SatuLabel").appendText("S: ");f=d.clone().inject(b).addClass(c+"BrighLabel").appendText("B: "); d.appendText("H: ").addClass(c+"HueLabel");g=new Element("input");g.clone().inject(e).addClass(c+"SatuInput");g.clone().inject(f).addClass(c+"BrighInput");g.inject(d).addClass(c+"HueInput");e.appendText(" %");f.appendText(" %");(new Element("span",{styles:{position:"absolute"},"class":c+"ballino"})).set("html"," °").inject(d,"after");(new Element("label")).inject(b).setStyle("position","absolute").addClass(c+"hexLabel").appendText("#hex: ").adopt((new Element("input")).addClass(c+"hexInput")); (new Element("input",{styles:{position:"absolute"},type:"button",value:"Select","class":c+"okButton"})).inject(b);this.rePosition();c=$$("#"+a+"overlay");this.layout.overlay=c[0];this.layout.overlay2=c[1];this.layout.cursor=Slick.find(document,"#"+a+"cursor");this.layout.arrows=Slick.find(document,"#"+a+"arrows");this.chooseColor=Slick.find(document,"#"+a+"chooseColor");this.layout.backup=Slick.find(document,"#"+a+"currentColor");this.RedInput=Slick.find(document,"#"+a+"rInput");this.GreenInput=Slick.find(document, "#"+a+"gInput");this.BlueInput=Slick.find(document,"#"+a+"bInput");this.HueInput=Slick.find(document,"#"+a+"HueInput");this.SatuInput=Slick.find(document,"#"+a+"SatuInput");this.BrighInput=Slick.find(document,"#"+a+"BrighInput");this.hexInput=Slick.find(document,"#"+a+"hexInput");this.arrRGB=[this.RedInput,this.GreenInput,this.BlueInput];this.arrHSB=[this.HueInput,this.SatuInput,this.BrighInput];this.okButton=Slick.find(document,"#"+a+"okButton");this.layout.cursor.setStyle("background-image","url("+ this.options.imgPath+"moor_cursor.gif)");window.khtml||this.hide()},rePosition:function(){var b=this.element.getCoordinates();this.layout.setStyles({left:b.left,top:b.top+b.height+1})},snippet:function(b,c){var a,c=c?c:"none";switch(b){case "arrPos":a=this.layout.arrows.getStyle("top").toInt();break;case "arrSize":a=this.layout.arrows.height;a=c=="int"?(a/2).toInt():a;break;case "curPos":var d=this.layout.cursor.getStyle("left").toInt();a=this.layout.cursor.getStyle("top").toInt();a={l:d,t:a};break; case "slider":a=this.layout.slider.getStyle("marginTop").toInt();break;default:a=this.layout.cursor.height,d=this.layout.cursor.width,a=c=="int"?(a/2).toInt():a,d=c=="int"?(d/2).toInt():d,a={w:d,h:a}}return a}});MooRainbow.implement(new Options);MooRainbow.implement(new Events); home/academiac/www/modules/mod_avatar_slide_galleria/assets/js/mooRainbow.js 0000604 00000045555 15137504517 0023426 0 ustar 00 /* --- script: mooRainbow.js version: 1.3 description: MooRainbow is a ColorPicker for MooTools 1.3 and higher license: MIT-Style authors: - Djamil Legato (w00fz) - Christopher Beloch requires: core:1.3: [*] more:1.3: [Slider, Drag, Color] provides: [mooRainbow] ... */ var MooRainbow = new Class({ options: { id: 'mooRainbow', prefix: 'moor-', imgPath: 'images/', startColor: [255, 0, 0], wheel: false, onComplete: Class.empty, onChange: Class.empty }, initialize: function(el, options) { this.element = document.id(el); if (!this.element) return; this.setOptions(options); this.sliderPos = 0; this.pickerPos = {x: 0, y: 0}; this.backupColor = this.options.startColor; this.currentColor = this.options.startColor; this.sets = { rgb: [], hsb: [], hex: [] }; this.pickerClick = this.sliderClick = false; if (!this.layout) this.doLayout(); this.OverlayEvents(); this.sliderEvents(); this.backupEvent(); if (this.options.wheel) this.wheelEvents(); this.element.addEvent('click', function(e) { this.toggle(e); }.bind(this)); this.layout.overlay.setStyle('background-color', this.options.startColor.rgbToHex()); this.layout.backup.setStyle('background-color', this.backupColor.rgbToHex()); this.pickerPos.x = this.snippet('curPos').l + this.snippet('curSize', 'int').w; this.pickerPos.y = this.snippet('curPos').t + this.snippet('curSize', 'int').h; this.manualSet(this.options.startColor); this.pickerPos.x = this.snippet('curPos').l + this.snippet('curSize', 'int').w; this.pickerPos.y = this.snippet('curPos').t + this.snippet('curSize', 'int').h; this.sliderPos = this.snippet('arrPos') - this.snippet('arrSize', 'int'); if (window.khtml) this.hide(); }, toggle: function() { this[this.visible ? 'hide' : 'show']() }, show: function() { this.rePosition(); this.layout.setStyle('display', 'block'); this.layout.set('aria-hidden', 'false'); this.visible = true; }, hide: function() { this.layout.setStyles({'display': 'none'}); this.layout.set('aria-hidden', 'true'); this.visible = false; }, manualSet: function(color, type) { if (!type || (type != 'hsb' && type != 'hex')) type = 'rgb'; var rgb, hsb, hex; if (type == 'rgb') { rgb = color; hsb = color.rgbToHsb(); hex = color.rgbToHex(); } else if (type == 'hsb') { hsb = color; rgb = color.hsbToRgb(); hex = rgb.rgbToHex(); } else { hex = color; rgb = color.hexToRgb(true); hsb = rgb.rgbToHsb(); } this.setMooRainbow(rgb); this.autoSet(hsb); }, autoSet: function(hsb) { var curH = this.snippet('curSize', 'int').h; var curW = this.snippet('curSize', 'int').w; var oveH = this.layout.overlay.height; var oveW = this.layout.overlay.width; var sliH = this.layout.slider.height; var arwH = this.snippet('arrSize', 'int'); var hue; var posx = Math.round(((oveW * hsb[1]) / 100) - curW); var posy = Math.round(- ((oveH * hsb[2]) / 100) + oveH - curH); var c = Math.round(((sliH * hsb[0]) / 360)); c = (c == 360) ? 0 : c; var position = sliH - c + this.snippet('slider') - arwH; hue = [this.sets.hsb[0], 100, 100].hsbToRgb().rgbToHex(); this.layout.cursor.setStyles({'top': posy, 'left': posx}); this.layout.arrows.setStyle('top', position); this.layout.overlay.setStyle('background-color', hue); this.sliderPos = this.snippet('arrPos') - arwH; this.pickerPos.x = this.snippet('curPos').l + curW; this.pickerPos.y = this.snippet('curPos').t + curH; }, setMooRainbow: function(color, type) { if (!type || (type != 'hsb' && type != 'hex')) type = 'rgb'; var rgb, hsb, hex; if (type == 'rgb') { rgb = color; hsb = color.rgbToHsb(); hex = color.rgbToHex(); } else if (type == 'hsb') { hsb = color; rgb = color.hsbToRgb(); hex = rgb.rgbToHex(); } else { hex = color; rgb = color.hexToRgb(); hsb = rgb.rgbToHsb(); } this.sets = { rgb: rgb, hsb: hsb, hex: hex }; if (!this.pickerPos.x) this.autoSet(hsb); this.RedInput.value = rgb[0]; this.GreenInput.value = rgb[1]; this.BlueInput.value = rgb[2]; this.HueInput.value = hsb[0]; this.SatuInput.value = hsb[1]; this.BrighInput.value = hsb[2]; this.hexInput.value = hex; this.currentColor = rgb; this.chooseColor.setStyle('background-color', rgb.rgbToHex()); this.fireEvent('onChange', [this.sets, this]); }, parseColors: function(x, y, z) { var s = Math.round((x * 100) / this.layout.overlay.width); var b = 100 - Math.round((y * 100) / this.layout.overlay.height); var h = 360 - Math.round((z * 360) / this.layout.slider.height) + this.snippet('slider') - this.snippet('arrSize', 'int'); h -= this.snippet('arrSize', 'int'); h = (h >= 360) ? 0 : (h < 0) ? 0 : h; s = (s > 100) ? 100 : (s < 0) ? 0 : s; b = (b > 100) ? 100 : (b < 0) ? 0 : b; return [h, s, b]; }, OverlayEvents: function() { var lim, curH, curW, inputs; curH = this.snippet('curSize', 'int').h; curW = this.snippet('curSize', 'int').w; inputs = this.arrRGB.concat(this.arrHSB, this.hexInput); document.addEvent('click', function() { if(this.visible) this.hide(this.layout); }.bind(this)); inputs.each(function(el) { el.addEvent('keydown', this.eventKeydown.bind(this, el)); el.addEvent('keyup', this.eventKeyup.bind(this, el)); }, this); [this.element, this.layout].each(function(el) { el.addEvents({ 'click': function(e) { e.stop(); }, 'keyup': function(e) { if(e.key == 'esc' && this.visible) this.hide(this.layout); }.bind(this) }, this); }, this); lim = { x: [0 - curW, (this.layout.overlay.width - curW)], y: [0 - curH, (this.layout.overlay.height - curH)] }; this.layout.drag = new Drag(this.layout.cursor, { onStart: this.overlayDrag.bind(this), onDrag: this.overlayDrag.bind(this), snap: 0 }); this.layout.overlay2.addEvent('mousedown', function(e){ this.layout.cursor.setStyles({ 'top': e.page.y - this.layout.overlay.getTop() - curH, 'left': e.page.x - this.layout.overlay.getLeft() - curW }); this.overlayDrag.call(this); this.layout.drag.start(e); }.bind(this)); this.okButton.addEvent('click', function() { if(this.currentColor == this.options.startColor) { this.hide(); this.fireEvent('onComplete', [this.sets, this]); } else { this.backupColor = this.currentColor; this.layout.backup.setStyle('background-color', this.backupColor.rgbToHex()); this.hide(); this.fireEvent('onComplete', [this.sets, this]); } }.bind(this)); }, overlayDrag: function() { var curH = this.snippet('curSize', 'int').h; var curW = this.snippet('curSize', 'int').w; this.pickerPos.x = this.snippet('curPos').l + curW; this.pickerPos.y = this.snippet('curPos').t + curH; this.setMooRainbow(this.parseColors(this.pickerPos.x, this.pickerPos.y, this.sliderPos), 'hsb'); this.fireEvent('onChange', [this.sets, this]); }, sliderEvents: function() { var arwH = this.snippet('arrSize', 'int'), lim; lim = [0 + this.snippet('slider') - arwH, this.layout.slider.height - arwH + this.snippet('slider')]; this.layout.sliderDrag = new Drag(this.layout.arrows, { limit: {y: lim}, modifiers: {x: false}, onStart: this.sliderDrag.bind(this), onDrag: this.sliderDrag.bind(this), snap: 0 }); this.layout.slider.addEvent('mousedown', function(e){ this.layout.arrows.setStyle( 'top', e.page.y - this.layout.slider.getTop() + this.snippet('slider') - arwH ); this.sliderDrag.call(this); this.layout.sliderDrag.start(e); }.bind(this)); }, sliderDrag: function() { var arwH = this.snippet('arrSize', 'int'), hue; this.sliderPos = this.snippet('arrPos') - arwH; this.setMooRainbow(this.parseColors(this.pickerPos.x, this.pickerPos.y, this.sliderPos), 'hsb'); hue = [this.sets.hsb[0], 100, 100].hsbToRgb().rgbToHex(); this.layout.overlay.setStyle('background-color', hue); this.fireEvent('onChange', [this.sets, this]); }, backupEvent: function() { this.layout.backup.addEvent('click', function() { this.manualSet(this.backupColor); this.fireEvent('onChange', [this.sets, this]); }.bind(this)); }, wheelEvents: function() { var arrColors = this.arrRGB.copy().extend(this.arrHSB); arrColors.each(function(el) { el.addEvents({ 'mousewheel': function(e) { this.eventKeys(e, el); }.bind(this), 'keydown': function(e) { this.eventKeys(e, el); }.bind(this), }); }, this); [this.layout.arrows, this.layout.slider].each(function(el) { el.addEvents({ 'mousewheel': function(e) { this.eventKeys(e, this.arrHSB[0], 'slider'); }.bind(this), 'keydown': function(e) { this.eventKeys(e, this.arrHSB[0], 'slider'); }.bind(this) }); }, this); }, eventKeys: function(e, el, id) { var wheel, type; id = (!id) ? el.id : this.arrHSB[0]; if (e.type == 'keydown') { if (e.key == 'up') wheel = 1; else if (e.key == 'down') wheel = -1; else return; } else if (e.type == Element.Events.mousewheel.type) wheel = (e.wheel > 0) ? 1 : -1; if (this.arrRGB.test(el)) type = 'rgb'; else if (this.arrHSB.test(el)) type = 'hsb'; else type = 'hsb'; if (type == 'rgb') { var rgb = this.sets.rgb, hsb = this.sets.hsb, prefix = this.options.prefix, pass; var value = el.value.toInt() + wheel; value = (value > 255) ? 255 : (value < 0) ? 0 : value; switch(el.className) { case prefix + 'rInput': pass = [value, rgb[1], rgb[2]]; break; case prefix + 'gInput': pass = [rgb[0], value, rgb[2]]; break; case prefix + 'bInput': pass = [rgb[0], rgb[1], value]; break; default : pass = rgb; } this.manualSet(pass); this.fireEvent('onChange', [this.sets, this]); } else { var rgb = this.sets.rgb, hsb = this.sets.hsb, prefix = this.options.prefix, pass; var value = el.value.toInt() + wheel; if (el.className.test(/(HueInput)/)) value = (value > 359) ? 0 : (value < 0) ? 0 : value; else value = (value > 100) ? 100 : (value < 0) ? 0 : value; switch(el.className) { case prefix + 'HueInput': pass = [value, hsb[1], hsb[2]]; break; case prefix + 'SatuInput': pass = [hsb[0], value, hsb[2]]; break; case prefix + 'BrighInput': pass = [hsb[0], hsb[1], value]; break; default : pass = hsb; } this.manualSet(pass, 'hsb'); this.fireEvent('onChange', [this.sets, this]); } e.stop(); }, eventKeydown: function(el, e) { var n = e.code, k = e.key; if ((!el.className.test(/hexInput/) && !(n >= 48 && n <= 57)) && (k!='backspace' && k!='tab' && k !='delete' && k!='left' && k!='right')) e.stop(); }, eventKeyup: function(el, e) { var n = e.code, k = e.key, pass, prefix, chr = el.value.charAt(0); if (!(el.value || el.value === 0)) return; if (el.className.test(/hexInput/)) { if (chr != "#" && el.value.length != 6) return; if (chr == '#' && el.value.length != 7) return; } else { if (!(n >= 48 && n <= 57) && (!['backspace', 'tab', 'delete', 'left', 'right'].test(k)) && el.value.length > 3) return; } prefix = this.options.prefix; if (el.className.test(/(rInput|gInput|bInput)/)) { if (el.value < 0 || el.value > 255) return; switch(el.className){ case prefix + 'rInput': pass = [el.value, this.sets.rgb[1], this.sets.rgb[2]]; break; case prefix + 'gInput': pass = [this.sets.rgb[0], el.value, this.sets.rgb[2]]; break; case prefix + 'bInput': pass = [this.sets.rgb[0], this.sets.rgb[1], el.value]; break; default : pass = this.sets.rgb; } this.manualSet(pass); this.fireEvent('onChange', [this.sets, this]); } else if (!el.className.test(/hexInput/)) { if (el.className.test(/HueInput/) && el.value < 0 || el.value > 360) return; else if (el.className.test(/HueInput/) && el.value == 360) el.value = 0; else if (el.className.test(/(SatuInput|BrighInput)/) && el.value < 0 || el.value > 100) return; switch(el.className){ case prefix + 'HueInput': pass = [el.value, this.sets.hsb[1], this.sets.hsb[2]]; break; case prefix + 'SatuInput': pass = [this.sets.hsb[0], el.value, this.sets.hsb[2]]; break; case prefix + 'BrighInput': pass = [this.sets.hsb[0], this.sets.hsb[1], el.value]; break; default : pass = this.sets.hsb; } this.manualSet(pass, 'hsb'); this.fireEvent('onChange', [this.sets, this]); } else { pass = el.value.hexToRgb(true); if (isNaN(pass[0])||isNaN(pass[1])||isNaN(pass[2])) return; if (pass || pass === 0) { this.manualSet(pass); this.fireEvent('onChange', [this.sets, this]); } } }, doLayout: function() { var id = this.options.id, prefix = this.options.prefix; var idPrefix = id + ' .' + prefix; this.layout = new Element('div', { 'styles': {'display': 'block', 'position': 'absolute'}, 'id': id }).inject(document.body); var box = new Element('div', { 'styles': {'position': 'relative'}, 'class': prefix + 'box' }).inject(this.layout); var div = new Element('div', { 'styles': {'position': 'absolute', 'overflow': 'hidden'}, 'class': prefix + 'overlayBox' }).inject(box); var ar = new Element('div', { 'styles': {'position': 'absolute', 'zIndex': 1}, 'class': prefix + 'arrows' }).inject(box); ar.width = ar.getStyle('width').toInt(); ar.height = ar.getStyle('height').toInt(); var ov = new Element('img', { 'styles': {'background-color': '#fff', 'position': 'relative', 'zIndex': 2}, 'src': this.options.imgPath + 'moor_woverlay.png', 'class': prefix + 'overlay' }).inject(div); var ov2 = new Element('img', { 'styles': {'position': 'absolute', 'top': 0, 'left': 0, 'zIndex': 2}, 'src': this.options.imgPath + 'moor_boverlay.png', 'class': prefix + 'overlay' }).inject(div); if (window.ie6) { div.setStyle('overflow', ''); var src = ov.src; ov.src = this.options.imgPath + 'blank.gif'; ov.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"; src = ov2.src; ov2.src = this.options.imgPath + 'blank.gif'; ov2.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"; } ov.width = ov2.width = div.getStyle('width').toInt(); ov.height = ov2.height = div.getStyle('height').toInt(); var cr = new Element('div', { 'styles': {'overflow': 'hidden', 'position': 'absolute', 'zIndex': 2}, 'class': prefix + 'cursor' }).inject(div); cr.width = cr.getStyle('width').toInt(); cr.height = cr.getStyle('height').toInt(); var sl = new Element('img', { 'styles': {'position': 'absolute', 'z-index': 2}, 'src': this.options.imgPath + 'moor_slider.png', 'class': prefix + 'slider' }).inject(box); this.layout.slider = Slick.find(document, '#' + idPrefix + 'slider'); sl.width = sl.getStyle('width').toInt(); sl.height = sl.getStyle('height').toInt(); new Element('div', { 'styles': {'position': 'absolute'}, 'class': prefix + 'colorBox' }).inject(box); new Element('div', { 'styles': {'zIndex': 2, 'position': 'absolute'}, 'class': prefix + 'chooseColor' }).inject(box); this.layout.backup = new Element('div', { 'styles': {'zIndex': 2, 'position': 'absolute', 'cursor': 'pointer'}, 'class': prefix + 'currentColor' }).inject(box); var R = new Element('label').inject(box).setStyle('position', 'absolute'); var G = R.clone().inject(box).addClass(prefix + 'gLabel').appendText('G: '); var B = R.clone().inject(box).addClass(prefix + 'bLabel').appendText('B: '); R.appendText('R: ').addClass(prefix + 'rLabel'); var inputR = new Element('input'); var inputG = inputR.clone().inject(G).addClass(prefix + 'gInput'); var inputB = inputR.clone().inject(B).addClass(prefix + 'bInput'); inputR.inject(R).addClass(prefix + 'rInput'); var HU = new Element('label').inject(box).setStyle('position', 'absolute'); var SA = HU.clone().inject(box).addClass(prefix + 'SatuLabel').appendText('S: '); var BR = HU.clone().inject(box).addClass(prefix + 'BrighLabel').appendText('B: '); HU.appendText('H: ').addClass(prefix + 'HueLabel'); var inputHU = new Element('input'); var inputSA = inputHU.clone().inject(SA).addClass(prefix + 'SatuInput'); var inputBR = inputHU.clone().inject(BR).addClass(prefix + 'BrighInput'); inputHU.inject(HU).addClass(prefix + 'HueInput'); SA.appendText(' %'); BR.appendText(' %'); (new Element('span', {'styles': {'position': 'absolute'}, 'class': prefix + 'ballino'}).set('html', " °").inject(HU, 'after')); var hex = new Element('label').inject(box).setStyle('position', 'absolute').addClass(prefix + 'hexLabel').appendText('#hex: ').adopt(new Element('input').addClass(prefix + 'hexInput')); var ok = new Element('input', { 'styles': {'position': 'absolute'}, 'type': 'button', 'value': 'Select', 'class': prefix + 'okButton' }).inject(box); this.rePosition(); var overlays = $$('#' + idPrefix + 'overlay'); this.layout.overlay = overlays[0]; this.layout.overlay2 = overlays[1]; this.layout.cursor = Slick.find(document, '#' + idPrefix + 'cursor'); this.layout.arrows = Slick.find(document, '#' + idPrefix + 'arrows'); this.chooseColor = Slick.find(document, '#' + idPrefix + 'chooseColor'); this.layout.backup = Slick.find(document, '#' + idPrefix + 'currentColor'); this.RedInput = Slick.find(document, '#' + idPrefix + 'rInput'); this.GreenInput = Slick.find(document, '#' + idPrefix + 'gInput'); this.BlueInput = Slick.find(document, '#' + idPrefix + 'bInput'); this.HueInput = Slick.find(document, '#' + idPrefix + 'HueInput'); this.SatuInput = Slick.find(document, '#' + idPrefix + 'SatuInput'); this.BrighInput = Slick.find(document, '#' + idPrefix + 'BrighInput'); this.hexInput = Slick.find(document, '#' + idPrefix + 'hexInput'); this.arrRGB = [this.RedInput, this.GreenInput, this.BlueInput]; this.arrHSB = [this.HueInput, this.SatuInput, this.BrighInput]; this.okButton = Slick.find(document, '#' + idPrefix + 'okButton'); this.layout.cursor.setStyle('background-image', 'url(' + this.options.imgPath + 'moor_cursor.gif)'); if (!window.khtml) this.hide(); }, rePosition: function() { var coords = this.element.getCoordinates(); this.layout.setStyles({ 'left': coords.left, 'top': coords.top + coords.height + 1 }); }, snippet: function(mode, type) { var size; type = (type) ? type : 'none'; switch(mode) { case 'arrPos': var t = this.layout.arrows.getStyle('top').toInt(); size = t; break; case 'arrSize': var h = this.layout.arrows.height; h = (type == 'int') ? (h/2).toInt() : h; size = h; break; case 'curPos': var l = this.layout.cursor.getStyle('left').toInt(); var t = this.layout.cursor.getStyle('top').toInt(); size = {'l': l, 't': t}; break; case 'slider': var t = this.layout.slider.getStyle('marginTop').toInt(); size = t; break; default : var h = this.layout.cursor.height; var w = this.layout.cursor.width; h = (type == 'int') ? (h/2).toInt() : h; w = (type == 'int') ? (w/2).toInt() : w; size = {w: w, h: h}; }; return size; } }); MooRainbow.implement(new Options); MooRainbow.implement(new Events);
©
2018.