js/mooRainbow/mooRainbow.js

   1 /***
   2  * MooRainbow
   3  *
   4  * @version             1.2b1
   5  * @license             MIT-style license
   6  * @author              Djamil Legato (w00fz) - < w00fzIT [at] gmail.com >
   7  * @infos               http://moorainbow.woolly-sheep.net
   8  * @copyright   Author
   9  *
  10  * includes a fix for mootools 1.2 by Piotr Przybylski
  11  */
  12
  13 var MooRainbow = new Class({
  14         Implements: [Options, Events],
  15         options: {
  16                 id: 'mooRainbow',
  17                 prefix: 'moor-',
  18                 imgPath: 'images/',
  19                 startColor: [255, 0, 0],
  20                 wheel: false,
  21                 onComplete: Class.empty,
  22                 onChange: Class.empty,
  23                 selectText: 'Select'
  24         },
  25
  26         initialize: function(el, options) {
  27                 this.element = $(el); if (!this.element) return;
  28                 this.setOptions(options);
  29
  30                 this.sliderPos = 0;
  31                 this.pickerPos = {x: 0, y: 0};
  32                 this.backupColor = this.options.startColor;
  33                 this.currentColor = this.options.startColor;
  34                 this.sets = {
  35                         rgb: [],
  36                         hsb: [],
  37                         hex: []
  38                 };
  39                 this.pickerClick = this.sliderClick  = false;
  40                 if (!this.layout) this.doLayout();
  41                 this.OverlayEvents();
  42                 this.sliderEvents();
  43                 this.backupEvent();
  44                 if (this.options.wheel) this.wheelEvents();
  45                 this.element.addEvent('click', function(e) { this.toggle(e); }.bind(this));
  46
  47                 this.layout.overlay.setStyle('background-color', this.options.startColor.rgbToHex());
  48                 this.layout.backup.setStyle('background-color', this.backupColor.rgbToHex());
  49
  50                 this.pickerPos.x = this.snippet('curPos').l + this.snippet('curSize', 'int').w;
  51                 this.pickerPos.y = this.snippet('curPos').t + this.snippet('curSize', 'int').h;
  52
  53                 this.manualSet(this.options.startColor);
  54
  55                 this.pickerPos.x = this.snippet('curPos').l + this.snippet('curSize', 'int').w;
  56                 this.pickerPos.y = this.snippet('curPos').t + this.snippet('curSize', 'int').h;
  57                 this.sliderPos = this.snippet('arrPos') - this.snippet('arrSize', 'int');
  58
  59                 if (Browser.Engine.webkit) this.hide();
  60         },
  61
  62         toggle: function() {
  63                 this[this.visible ? 'hide' : 'show']()
  64         },
  65
  66         show: function() {
  67                 this.rePosition();
  68                 this.layout.setStyle('display', 'block');
  69                 this.visible = true;
  70         },
  71
  72         hide: function() {
  73                 this.layout.setStyles({'display': 'none'});
  74                 this.visible = false;
  75         },
  76
  77         manualSet: function(color, type) {
  78                 if (!type || (type != 'hsb' && type != 'hex')) type = 'rgb';
  79                 var rgb, hsb, hex;
  80
  81                 if (type == 'rgb') { rgb = color; hsb = color.rgbToHsb(); hex = color.rgbToHex(); }
  82                 else if (type == 'hsb') { hsb = color; rgb = color.hsbToRgb(); hex = rgb.rgbToHex(); }
  83                 else { hex = color; rgb = color.hexToRgb(true); hsb = rgb.rgbToHsb(); }
  84
  85                 this.setMooRainbow(rgb);
  86                 this.autoSet(hsb);
  87         },
  88
  89         autoSet: function(hsb) {
  90                 var curH = this.snippet('curSize', 'int').h;
  91                 var curW = this.snippet('curSize', 'int').w;
  92                 var oveH = this.layout.overlay.height;
  93                 var oveW = this.layout.overlay.width;
  94                 var sliH = this.layout.slider.height;
  95                 var arwH = this.snippet('arrSize', 'int');
  96                 var hue;
  97
  98                 var posx = Math.round(((oveW * hsb[1]) / 100) - curW);
  99                 var posy = Math.round(- ((oveH * hsb[2]) / 100) + oveH - curH);
 100
 101                 var c = Math.round(((sliH * hsb[0]) / 360)); c = (c == 360) ? 0 : c;
 102                 var position = sliH - c + this.snippet('slider') - arwH;
 103                 hue = [this.sets.hsb[0], 100, 100].hsbToRgb().rgbToHex();
 104
 105                 this.layout.cursor.setStyles({'top': posy, 'left': posx});
 106                 this.layout.arrows.setStyle('top', position);
 107                 this.layout.overlay.setStyle('background-color', hue);
 108                 this.sliderPos = this.snippet('arrPos') - arwH;
 109                 this.pickerPos.x = this.snippet('curPos').l + curW;
 110                 this.pickerPos.y = this.snippet('curPos').t + curH;
 111         },
 112
 113         setMooRainbow: function(color, type) {
 114                 if (!type || (type != 'hsb' && type != 'hex')) type = 'rgb';
 115                 var rgb, hsb, hex;
 116
 117                 if (type == 'rgb') { rgb = color; hsb = color.rgbToHsb(); hex = color.rgbToHex(); }
 118                 else if (type == 'hsb') { hsb = color; rgb = color.hsbToRgb(); hex = rgb.rgbToHex(); }
 119                 else { hex = color; rgb = color.hexToRgb(); hsb = rgb.rgbToHsb(); }
 120
 121                 this.sets = {
 122                         rgb: rgb,
 123                         hsb: hsb,
 124                         hex: hex
 125                 };
 126
 127                 if (!$chk(this.pickerPos.x))
 128                         this.autoSet(hsb);
 129
 130                 this.RedInput.value = rgb[0];
 131                 this.GreenInput.value = rgb[1];
 132                 this.BlueInput.value = rgb[2];
 133                 this.HueInput.value = hsb[0];
 134                 this.SatuInput.value =  hsb[1];
 135                 this.BrighInput.value = hsb[2];
 136                 this.hexInput.value = hex;
 137
 138                 this.currentColor = rgb;
 139
 140                 this.chooseColor.setStyle('background-color', rgb.rgbToHex());
 141         },
 142
 143         parseColors: function(x, y, z) {
 144                 var s = Math.round((x * 100) / this.layout.overlay.width);
 145                 var b = 100 - Math.round((y * 100) / this.layout.overlay.height);
 146                 var h = 360 - Math.round((z * 360) / this.layout.slider.height) + this.snippet('slider') - this.snippet('arrSize', 'int');
 147                 h -= this.snippet('arrSize', 'int');
 148                 h = (h >= 360) ? 0 : (h < 0) ? 0 : h;
 149                 s = (s > 100) ? 100 : (s < 0) ? 0 : s;
 150                 b = (b > 100) ? 100 : (b < 0) ? 0 : b;
 151
 152                 return [h, s, b];
 153         },
 154
 155         OverlayEvents: function() {
 156                 var lim, curH, curW, inputs;
 157                 curH = this.snippet('curSize', 'int').h;
 158                 curW = this.snippet('curSize', 'int').w;
 159                 inputs = $A(this.arrRGB).concat(this.arrHSB, this.hexInput);
 160
 161                 document.addEvent('click', function() {
 162                         if(this.visible) this.hide(this.layout);
 163                 }.bind(this));
 164
 165                 inputs.each(function(el) {
 166                         if(el) {
 167                                 el.addEvent('keydown', this.eventKeydown.bindWithEvent(this, el));
 168                                 el.addEvent('keyup', this.eventKeyup.bindWithEvent(this, el));
 169                         }
 170                 }, this);
 171                 [this.element, this.layout].each(function(el) {
 172                         el.addEvents({
 173                                 'click': function(e) { new Event(e).stop();},
 174                                 'keyup': function(e) {
 175                                         e = new Event(e);
 176                                         if(e.key == 'esc' && this.visible) this.hide(this.layout);
 177                                 }.bind(this)
 178                         }, this);
 179                 }, this);
 180
 181                 lim = {
 182                         x: [0 - curW, (this.layout.overlay.width - curW)],
 183                         y: [0 - curH, (this.layout.overlay.height - curH)]
 184                 };
 185
 186                 this.layout.drag = new Drag(this.layout.cursor, {
 187                         limit: lim,
 188                         onStart: this.overlayDrag.bind(this),
 189                         onDrag: this.overlayDrag.bind(this),
 190                         snap: 0
 191                 });
 192
 193                 this.layout.overlay2.addEvent('mousedown', function(e){
 194                         e = new Event(e);
 195                         this.layout.cursor.setStyles({
 196                                 'top': e.page.y - this.layout.overlay.getPosition().y - curH,
 197                                 'left': e.page.x - this.layout.overlay.getPosition().x - curW
 198                         });
 199                         this.overlayDrag();
 200                         this.layout.drag.start(e);
 201                 }.bind(this));
 202
 203                 this.okButton.addEvent('click', function() {
 204                         if(this.currentColor == this.options.startColor) {
 205                                 this.hide();
 206                                 this.fireEvent('onComplete', [this.sets, this]);
 207                         }
 208                         else {
 209                                 this.backupColor = this.currentColor;
 210                                 this.layout.backup.setStyle('background-color', this.backupColor.rgbToHex());
 211                                 this.hide();
 212                                 this.fireEvent('onComplete', [this.sets, this]);
 213                         }
 214                 }.bind(this));
 215         },
 216
 217         overlayDrag: function() {
 218                 var curH = this.snippet('curSize', 'int').h;
 219                 var curW = this.snippet('curSize', 'int').w;
 220                 this.pickerPos.x = this.snippet('curPos').l + curW;
 221                 this.pickerPos.y = this.snippet('curPos').t + curH;
 222
 223                 this.setMooRainbow(this.parseColors(this.pickerPos.x, this.pickerPos.y, this.sliderPos), 'hsb');
 224                 this.fireEvent('onChange', [this.sets, this]);
 225         },
 226
 227         sliderEvents: function() {
 228                 var arwH = this.snippet('arrSize', 'int'), lim;
 229
 230                 lim = [0 + this.snippet('slider') - arwH, this.layout.slider.height - arwH + this.snippet('slider')];
 231                 this.layout.sliderDrag = new Drag(this.layout.arrows, {
 232                         limit: {y: lim},
 233                         modifiers: {x: false},
 234                         onStart: this.sliderDrag.bind(this),
 235                         onDrag: this.sliderDrag.bind(this),
 236                         snap: 0
 237                 });
 238
 239                 this.layout.slider.addEvent('mousedown', function(e){
 240                         e = new Event(e);
 241
 242                         this.layout.arrows.setStyle(
 243                                 'top', e.page.y - this.layout.slider.getPosition().y + this.snippet('slider') - arwH
 244                         );
 245                         this.sliderDrag();
 246                         this.layout.sliderDrag.start(e);
 247                 }.bind(this));
 248         },
 249
 250         sliderDrag: function() {
 251                 var arwH = this.snippet('arrSize', 'int'), hue;
 252
 253                 this.sliderPos = this.snippet('arrPos') - arwH;
 254                 this.setMooRainbow(this.parseColors(this.pickerPos.x, this.pickerPos.y, this.sliderPos), 'hsb');
 255                 hue = [this.sets.hsb[0], 100, 100].hsbToRgb().rgbToHex();
 256                 this.layout.overlay.setStyle('background-color', hue);
 257                 this.fireEvent('onChange', [this.sets, this]);
 258         },
 259
 260         backupEvent: function() {
 261                 this.layout.backup.addEvent('click', function() {
 262                         this.manualSet(this.backupColor);
 263                         this.fireEvent('onChange', [this.sets, this]);
 264                 }.bind(this));
 265         },
 266
 267         wheelEvents: function() {
 268                 var arrColors = $A(this.arrRGB).extend(this.arrHSB);
 269
 270                 arrColors.each(function(el) {
 271                         el.addEvents({
 272                                 'mousewheel': this.eventKeys.bindWithEvent(this, el),
 273                                 'keydown': this.eventKeys.bindWithEvent(this, el)
 274                         });
 275                 }, this);
 276
 277                 [this.layout.arrows, this.layout.slider].each(function(el) {
 278                         el.addEvents({
 279                                 'mousewheel': this.eventKeys.bindWithEvent(this, [this.arrHSB[0], 'slider']),
 280                                 'keydown': this.eventKeys.bindWithEvent(this, [this.arrHSB[0], 'slider'])
 281                         });
 282                 }, this);
 283         },
 284
 285         eventKeys: function(e, el, id) {
 286                 var wheel, type;
 287                 id = (!id) ? el.id : this.arrHSB[0];
 288
 289                 if (e.type == 'keydown') {
 290                         if (e.key == 'up') wheel = 1;
 291                         else if (e.key == 'down') wheel = -1;
 292                         else return;
 293                 } else if (e.type == Element.Events.mousewheel.base) wheel = (e.wheel > 0) ? 1 : -1;
 294
 295                 if (this.arrRGB.contains(el)) type = 'rgb';
 296                 else if (this.arrHSB.contains(el)) type = 'hsb';
 297                 else type = 'hsb';
 298
 299                 if (type == 'rgb') {
 300                         var rgb = this.sets.rgb, hsb = this.sets.hsb, prefix = this.options.prefix, pass;
 301                         var value = (el.value.toInt() || 0) + wheel;
 302                         value = (value > 255) ? 255 : (value < 0) ? 0 : value;
 303
 304                         switch(el.className) {
 305                                 case prefix + 'rInput': pass = [value, rgb[1], rgb[2]]; break;
 306                                 case prefix + 'gInput': pass = [rgb[0], value, rgb[2]]; break;
 307                                 case prefix + 'bInput': pass = [rgb[0], rgb[1], value]; break;
 308                                 default : pass = rgb;
 309                         }
 310                         this.manualSet(pass);
 311                         this.fireEvent('onChange', [this.sets, this]);
 312                 } else {
 313                         var rgb = this.sets.rgb, hsb = this.sets.hsb, prefix = this.options.prefix, pass;
 314                         var value = (el.value.toInt() || 0) + wheel;
 315
 316                         if (el.className.test(/(HueInput)/)) value = (value > 359) ? 0 : (value < 0) ? 0 : value;
 317                         else value = (value > 100) ? 100 : (value < 0) ? 0 : value;
 318
 319                         switch(el.className) {
 320                                 case prefix + 'HueInput': pass = [value, hsb[1], hsb[2]]; break;
 321                                 case prefix + 'SatuInput': pass = [hsb[0], value, hsb[2]]; break;
 322                                 case prefix + 'BrighInput':     pass = [hsb[0], hsb[1], value]; break;
 323                                 default : pass = hsb;
 324                         }
 325
 326                         this.manualSet(pass, 'hsb');
 327                         this.fireEvent('onChange', [this.sets, this]);
 328                 }
 329                 e.stop();
 330         },
 331
 332         eventKeydown: function(e, el) {
 333                 var n = e.code, k = e.key;
 334
 335                 if      ((!el.className.test(/hexInput/) && !(n >= 48 && n <= 57)) &&
 336                         (k!='backspace' && k!='tab' && k !='delete' && k!='left' && k!='right'))
 337                 e.stop();
 338         },
 339
 340         eventKeyup: function(e, el) {
 341                 var n = e.code, k = e.key, pass, prefix, chr = el.value.charAt(0);
 342
 343                 if (!$chk(el.value)) return;
 344                 if (el.className.test(/hexInput/)) {
 345                         if (chr != "#" && el.value.length != 6) return;
 346                         if (chr == '#' && el.value.length != 7) return;
 347                 } else {
 348                         if (!(n >= 48 && n <= 57) && (!['backspace', 'tab', 'delete', 'left', 'right'].contains(k)) && el.value.length > 3) return;
 349                 }
 350
 351                 prefix = this.options.prefix;
 352
 353                 if (el.className.test(/(rInput|gInput|bInput)/)) {
 354                         if (el.value  < 0 || el.value > 255) return;
 355                         switch(el.className){
 356                                 case prefix + 'rInput': pass = [el.value, this.sets.rgb[1], this.sets.rgb[2]]; break;
 357                                 case prefix + 'gInput': pass = [this.sets.rgb[0], el.value, this.sets.rgb[2]]; break;
 358                                 case prefix + 'bInput': pass = [this.sets.rgb[0], this.sets.rgb[1], el.value]; break;
 359                                 default : pass = this.sets.rgb;
 360                         }
 361                         this.manualSet(pass);
 362                         this.fireEvent('onChange', [this.sets, this]);
 363                 }
 364                 else if (!el.className.test(/hexInput/)) {
 365                         if (el.className.test(/HueInput/) && el.value  < 0 || el.value > 360) return;
 366                         else if (el.className.test(/HueInput/) && el.value == 360) el.value = 0;
 367                         else if (el.className.test(/(SatuInput|BrighInput)/) && el.value  < 0 || el.value > 100) return;
 368                         switch(el.className){
 369                                 case prefix + 'HueInput': pass = [el.value, this.sets.hsb[1], this.sets.hsb[2]]; break;
 370                                 case prefix + 'SatuInput': pass = [this.sets.hsb[0], el.value, this.sets.hsb[2]]; break;
 371                                 case prefix + 'BrighInput': pass = [this.sets.hsb[0], this.sets.hsb[1], el.value]; break;
 372                                 default : pass = this.sets.hsb;
 373                         }
 374                         this.manualSet(pass, 'hsb');
 375                         this.fireEvent('onChange', [this.sets, this]);
 376                 } else {
 377                         pass = el.value.hexToRgb(true);
 378                         if (isNaN(pass[0])||isNaN(pass[1])||isNaN(pass[2])) return;
 379
 380                         if ($chk(pass)) {
 381                                 this.manualSet(pass);
 382                                 this.fireEvent('onChange', [this.sets, this]);
 383                         }
 384                 }
 385
 386         },
 387
 388         doLayout: function() {
 389                 var id = this.options.id, prefix = this.options.prefix;
 390                 var idPrefix = id + ' .' + prefix;
 391
 392                 this.layout = new Element('div', {
 393                         'styles': {'display': 'block', 'position': 'absolute'},
 394                         'id': id
 395                 }).inject(document.body);
 396
 397                 var box = new Element('div', {
 398                         'styles':  {'position': 'relative'},
 399                         'class': prefix + 'box'
 400                 }).inject(this.layout);
 401
 402                 var div = new Element('div', {
 403                         'styles': {'position': 'absolute', 'overflow': 'hidden'},
 404                         'class': prefix + 'overlayBox'
 405                 }).inject(box);
 406
 407                 var ar = new Element('div', {
 408                         'styles': {'position': 'absolute', 'zIndex': 1},
 409                         'class': prefix + 'arrows'
 410                 }).inject(box);
 411                 ar.width = ar.getStyle('width').toInt();
 412                 ar.height = ar.getStyle('height').toInt();
 413
 414                 var ov = new Element('img', {
 415                         'styles': {'background-color': '#fff', 'position': 'relative', 'zIndex': 2},
 416                         'src': this.options.imgPath + 'moor_woverlay.png',
 417                         'class': prefix + 'overlay'
 418                 }).inject(div);
 419
 420                 var ov2 = new Element('img', {
 421                         'styles': {'position': 'absolute', 'top': 0, 'left': 0, 'zIndex': 2},
 422                         'src': this.options.imgPath + 'moor_boverlay.png',
 423                         'class': prefix + 'overlay'
 424                 }).inject(div);
 425
 426                 if (Browser.Engine.trident4) {
 427                         div.setStyle('overflow', '');
 428                         var src = ov.src;
 429                         ov.src = this.options.imgPath + 'blank.gif';
 430                         ov.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
 431                         src = ov2.src;
 432                         ov2.src = this.options.imgPath + 'blank.gif';
 433                         ov2.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
 434                 }
 435                 ov.width = ov2.width = div.getStyle('width').toInt();
 436                 ov.height = ov2.height = div.getStyle('height').toInt();
 437
 438                 var cr = new Element('div', {
 439                         'styles': {'overflow': 'hidden', 'position': 'absolute', 'zIndex': 2},
 440                         'class': prefix + 'cursor'
 441                 }).inject(div);
 442                 cr.width = cr.getStyle('width').toInt();
 443                 cr.height = cr.getStyle('height').toInt();
 444
 445                 var sl = new Element('img', {
 446                         'styles': {'position': 'absolute', 'z-index': 2},
 447                         'src': this.options.imgPath + 'moor_slider.png',
 448                         'class': prefix + 'slider'
 449                 }).inject(box);
 450                 this.layout.slider = sl;
 451                 sl.width = sl.getStyle('width').toInt();
 452                 sl.height = sl.getStyle('height').toInt();
 453
 454                 new Element('div', {
 455                         'styles': {'position': 'absolute'},
 456                         'class': prefix + 'colorBox'
 457                 }).inject(box);
 458
 459                 new Element('div', {
 460                         'styles': {'zIndex': 2, 'position': 'absolute'},
 461                         'class': prefix + 'chooseColor'
 462                 }).inject(box);
 463
 464                 this.layout.backup = new Element('div', {
 465                         'styles': {'zIndex': 2, 'position': 'absolute', 'cursor': 'pointer'},
 466                         'class': prefix + 'currentColor'
 467                 }).inject(box);
 468
 469                 var R = new Element('label').inject(box).setStyle('position', 'absolute');
 470                 var G = R.clone().inject(box).addClass(prefix + 'gLabel').set('html', 'G: ');
 471                 var B = R.clone().inject(box).addClass(prefix + 'bLabel').set('html', 'B: ');
 472                 R.set('html', 'R: ').addClass(prefix + 'rLabel');
 473
 474                 var inputR = new Element('input');
 475                 var inputG = inputR.clone().inject(G).addClass(prefix + 'gInput');
 476                 var inputB = inputR.clone().inject(B).addClass(prefix + 'bInput');
 477                 inputR.inject(R).addClass(prefix + 'rInput');
 478
 479                 var HU = new Element('label').inject(box).setStyle('position', 'absolute');
 480                 var SA = HU.clone().inject(box).addClass(prefix + 'SatuLabel').set('html', 'S: ');
 481                 var BR = HU.clone().inject(box).addClass(prefix + 'BrighLabel').set('html', 'B: ');
 482                 HU.set('html', 'H: ').addClass(prefix + 'HueLabel');
 483
 484                 var inputHU = new Element('input');
 485                 var inputSA = inputHU.clone().inject(SA).addClass(prefix + 'SatuInput');
 486                 var inputBR = inputHU.clone().inject(BR).addClass(prefix + 'BrighInput');
 487                 inputHU.inject(HU).addClass(prefix + 'HueInput');
 488                 SA.innerHTML += " %"; BR.innerHTML += " %";
 489                 SP = new Element('span', {'styles': {'position': 'absolute'}, 'class': prefix + 'ballino'})
 490                 SP.innerHTML = " &deg;"
 491                 SP.inject(HU,'after');
 492
 493                 var hex = new Element('label').inject(box).setStyle('position', 'absolute').addClass(prefix + 'hexLabel').set('html', '#hex: ').adopt(new Element('input').addClass(prefix + 'hexInput'));
 494
 495                 var ok = new Element('input', {
 496                         'styles': {'position': 'absolute'},
 497                         'type': 'button',
 498                         'value': this.options.selectText,
 499                         'class': prefix + 'okButton'
 500                 }).inject(box);
 501
 502                 this.rePosition();
 503
 504                 var overlays = $$('#' + id + ' .' + prefix + 'overlay');
 505                 this.layout.overlay = overlays[0];
 506                 this.layout.overlay2 = overlays[1];
 507                 this.layout.cursor = cr;
 508                 this.layout.arrows = ar;
 509                 this.chooseColor = this.layout.getElement('.' + prefix + 'chooseColor');
 510                 this.RedInput = inputR;
 511                 this.GreenInput = inputG;
 512                 this.BlueInput = inputB;
 513                 this.HueInput = inputHU;
 514                 this.SatuInput = this.layout.getElement('.' + prefix + 'SatuInput');
 515                 this.BrighInput = this.layout.getElement('.' + prefix + 'BrighInput');
 516                 this.hexInput = this.layout.getElement('.' + prefix + 'hexInput');;
 517
 518                 this.arrRGB = [this.RedInput, this.GreenInput, this.BlueInput];
 519                 this.arrHSB = [this.HueInput, this.SatuInput, this.BrighInput];
 520                 this.okButton = ok;
 521
 522                 if (!Browser.Engine.webkit419) this.hide();
 523         },
 524         rePosition: function() {
 525                 var coords = this.element.getCoordinates();
 526                 this.layout.setStyles({
 527                         'left': coords.left,
 528                         'top': coords.top + coords.height + 1
 529                 });
 530         },
 531
 532         snippet: function(mode, type) {
 533                 var size; type = (type) ? type : 'none';
 534
 535                 switch(mode) {
 536                         case 'arrPos':
 537                                 var t = this.layout.arrows.getStyle('top').toInt();
 538                                 size = t;
 539                                 break;
 540                         case 'arrSize':
 541                                 var h = this.layout.arrows.height;
 542                                 h = (type == 'int') ? (h/2).toInt() : h;
 543                                 size = h;
 544                                 break;
 545                         case 'curPos':
 546                                 var l = this.layout.cursor.getStyle('left').toInt();
 547                                 var t = this.layout.cursor.getStyle('top').toInt();
 548                                 size = {'l': l, 't': t};
 549                                 break;
 550                         case 'slider':
 551                                 var t = this.layout.slider.getStyle('marginTop').toInt();
 552                                 size = t;
 553                                 break;
 554                         default :
 555                                 var h = this.layout.cursor.height;
 556                                 var w = this.layout.cursor.width;
 557                                 h = (type == 'int') ? (h/2).toInt() : h;
 558                                 w = (type == 'int') ? (w/2).toInt() : w;
 559                                 size = {w: w, h: h};
 560                 };
 561                 return size;
 562         }
 563 });