ecomp-sdk-app/src/main/webapp/static/fusion/raptor/js/script.js

   1 // A few configuration settings
   2 var CROSSHAIRS_LOCATION = 'static/fusion/raptor/images/crosshairs.png';
   3 var HUE_SLIDER_LOCATION = 'static/fusion/raptor/images/h.png';
   4 var HUE_SLIDER_ARROWS_LOCATION = 'static/fusion/raptor/images/position.png';
   5 var SAT_VAL_SQUARE_LOCATION = 'static/fusion/raptor/images/sv.png';
   6
   7 // Here are some boring utility functions. The real code comes later.
   8
   9 function hexToRgb(hex_string, default_)
  10 {
  11     if (default_ == undefined)
  12     {
  13         default_ = null;
  14     }
  15
  16     if (hex_string.substr(0, 1) == '#')
  17     {
  18         hex_string = hex_string.substr(1);
  19     }
  20
  21     var r;
  22     var g;
  23     var b;
  24     if (hex_string.length == 3)
  25     {
  26         r = hex_string.substr(0, 1);
  27         r += r;
  28         g = hex_string.substr(1, 1);
  29         g += g;
  30         b = hex_string.substr(2, 1);
  31         b += b;
  32     }
  33     else if (hex_string.length == 6)
  34     {
  35         r = hex_string.substr(0, 2);
  36         g = hex_string.substr(2, 2);
  37         b = hex_string.substr(4, 2);
  38     }
  39     else
  40     {
  41         return default_;
  42     }
  43
  44     r = parseInt(r, 16);
  45     g = parseInt(g, 16);
  46     b = parseInt(b, 16);
  47     if (isNaN(r) || isNaN(g) || isNaN(b))
  48     {
  49         return default_;
  50     }
  51     else
  52     {
  53         return {r: r / 255, g: g / 255, b: b / 255};
  54     }
  55 }
  56
  57 function rgbToHex(r, g, b, includeHash)
  58 {
  59     r = Math.round(r * 255);
  60     g = Math.round(g * 255);
  61     b = Math.round(b * 255);
  62     if (includeHash == undefined)
  63     {
  64         includeHash = true;
  65     }
  66
  67     r = r.toString(16);
  68     if (r.length == 1)
  69     {
  70         r = '0' + r;
  71     }
  72     g = g.toString(16);
  73     if (g.length == 1)
  74     {
  75         g = '0' + g;
  76     }
  77     b = b.toString(16);
  78     if (b.length == 1)
  79     {
  80         b = '0' + b;
  81     }
  82     return ((includeHash ? '#' : '') + r + g + b).toUpperCase();
  83 }
  84
  85 var arVersion = navigator.appVersion.split("MSIE");
  86 var version = parseFloat(arVersion[1]);
  87
  88 function fixPNG(myImage)
  89 {
  90     if ((version >= 5.5) && (version < 7) && (document.body.filters))
  91     {
  92         var node = document.createElement('span');
  93         node.id = myImage.id;
  94         node.className = myImage.className;
  95         node.title = myImage.title;
  96         node.style.cssText = myImage.style.cssText;
  97         node.style.setAttribute('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader"
  98                                         + "(src=\'" + myImage.src + "\', sizingMethod='scale')");
  99         node.style.fontSize = '0';
 100         node.style.width = myImage.width.toString() + 'px';
 101         node.style.height = myImage.height.toString() + 'px';
 102         node.style.display = 'inline-block';
 103         return node;
 104     }
 105     else
 106     {
 107         return myImage.cloneNode(false);
 108     }
 109 }
 110
 111 function trackDrag(node, handler)
 112 {
 113     function fixCoords(x, y)
 114     {
 115         var nodePageCoords = pageCoords(node);
 116         x = (x - nodePageCoords.x) + document.documentElement.scrollLeft;
 117         y = (y - nodePageCoords.y) + document.documentElement.scrollTop;
 118         if (x < 0) x = 0;
 119         if (y < 0) y = 0;
 120         if (x > node.offsetWidth - 1) x = node.offsetWidth - 1;
 121         if (y > node.offsetHeight - 1) y = node.offsetHeight - 1;
 122         return {x: x, y: y};
 123     }
 124     function mouseDown(ev)
 125     {
 126         var coords = fixCoords(ev.clientX, ev.clientY);
 127         var lastX = coords.x;
 128         var lastY = coords.y;
 129         handler(coords.x, coords.y);
 130
 131         function moveHandler(ev)
 132         {
 133             var coords = fixCoords(ev.clientX, ev.clientY);
 134             if (coords.x != lastX || coords.y != lastY)
 135             {
 136                 lastX = coords.x;
 137                 lastY = coords.y;
 138                 handler(coords.x, coords.y);
 139             }
 140         }
 141         function upHandler(ev)
 142         {
 143             myRemoveEventListener(document, 'mouseup', upHandler);
 144             myRemoveEventListener(document, 'mousemove', moveHandler);
 145             myAddEventListener(node, 'mousedown', mouseDown);
 146         }
 147         myAddEventListener(document, 'mouseup', upHandler);
 148         myAddEventListener(document, 'mousemove', moveHandler);
 149         myRemoveEventListener(node, 'mousedown', mouseDown);
 150         if (ev.preventDefault) ev.preventDefault();
 151     }
 152     myAddEventListener(node, 'mousedown', mouseDown);
 153     node.onmousedown = function(e) { return false; };
 154     node.onselectstart = function(e) { return false; };
 155     node.ondragstart = function(e) { return false; };
 156 }
 157
 158 var eventListeners = [];
 159
 160 function findEventListener(node, event, handler)
 161 {
 162     var i;
 163     for (i in eventListeners)
 164     {
 165         if (eventListeners[i].node == node && eventListeners[i].event == event
 166          && eventListeners[i].handler == handler)
 167         {
 168             return i;
 169         }
 170     }
 171     return null;
 172 }
 173 function myAddEventListener(node, event, handler)
 174 {
 175     if (findEventListener(node, event, handler) != null)
 176     {
 177         return;
 178     }
 179
 180     if (!node.addEventListener)
 181     {
 182         node.attachEvent('on' + event, handler);
 183     }
 184     else
 185     {
 186         node.addEventListener(event, handler, false);
 187     }
 188
 189     eventListeners.push({node: node, event: event, handler: handler});
 190 }
 191
 192 function removeEventListenerIndex(index)
 193 {
 194     var eventListener = eventListeners[index];
 195     delete eventListeners[index];
 196
 197     if (!eventListener.node.removeEventListener)
 198     {
 199         eventListener.node.detachEvent('on' + eventListener.event,
 200                                        eventListener.handler);
 201     }
 202     else
 203     {
 204         eventListener.node.removeEventListener(eventListener.event,
 205                                                eventListener.handler, false);
 206     }
 207 }
 208
 209 function myRemoveEventListener(node, event, handler)
 210 {
 211     removeEventListenerIndex(findEventListener(node, event, handler));
 212 }
 213
 214 function cleanupEventListeners()
 215 {
 216     var i;
 217     for (i = eventListeners.length; i > 0; i--)
 218     {
 219         if (eventListeners[i] != undefined)
 220         {
 221             removeEventListenerIndex(i);
 222         }
 223     }
 224 }
 225 myAddEventListener(window, 'unload', cleanupEventListeners);
 226
 227 // This copyright statement applies to the following two functions,
 228 // which are taken from MochiKit.
 229 //
 230 // Copyright 2005 Bob Ippolito <bob@redivi.com>
 231 //
 232 // Permission is hereby granted, free of charge, to any person obtaining
 233 // a copy of this software and associated documentation files (the
 234 // "Software"), to deal in the Software without restriction, including
 235 // without limitation the rights to use, copy, modify, merge, publish,
 236 // distribute, sublicense, and/or sell copies of the Software, and to
 237 // permit persons to whom the Software is furnished to do so, subject
 238 // to the following conditions:
 239 //
 240 // The above copyright notice and this permission notice shall be
 241 // included in all copies or substantial portions of the Software.
 242 //
 243 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 244 // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 245 // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 246 // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
 247 // BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
 248 // ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 249 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 250
 251 function hsvToRgb(hue, saturation, value)
 252 {
 253     var red;
 254     var green;
 255     var blue;
 256     if (value == 0.0)
 257     {
 258         red = 0;
 259         green = 0;
 260         blue = 0;
 261     }
 262     else
 263     {
 264         var i = Math.floor(hue * 6);
 265         var f = (hue * 6) - i;
 266         var p = value * (1 - saturation);
 267         var q = value * (1 - (saturation * f));
 268         var t = value * (1 - (saturation * (1 - f)));
 269         switch (i)
 270         {
 271             case 1: red = q; green = value; blue = p; break;
 272             case 2: red = p; green = value; blue = t; break;
 273             case 3: red = p; green = q; blue = value; break;
 274             case 4: red = t; green = p; blue = value; break;
 275             case 5: red = value; green = p; blue = q; break;
 276             case 6: // fall through
 277             case 0: red = value; green = t; blue = p; break;
 278         }
 279     }
 280     return {r: red, g: green, b: blue};
 281 }
 282
 283 function rgbToHsv(red, green, blue)
 284 {
 285     var max = Math.max(Math.max(red, green), blue);
 286     var min = Math.min(Math.min(red, green), blue);
 287     var hue;
 288     var saturation;
 289     var value = max;
 290     if (min == max)
 291     {
 292         hue = 0;
 293         saturation = 0;
 294     }
 295     else
 296     {
 297         var delta = (max - min);
 298         saturation = delta / max;
 299         if (red == max)
 300         {
 301             hue = (green - blue) / delta;
 302         }
 303         else if (green == max)
 304         {
 305             hue = 2 + ((blue - red) / delta);
 306         }
 307         else
 308         {
 309             hue = 4 + ((red - green) / delta);
 310         }
 311         hue /= 6;
 312         if (hue < 0)
 313         {
 314             hue += 1;
 315         }
 316         if (hue > 1)
 317         {
 318             hue -= 1;
 319         }
 320     }
 321     return {
 322         h: hue,
 323         s: saturation,
 324         v: value
 325     };
 326 }
 327
 328 function pageCoords(node)
 329 {
 330     var x = node.offsetLeft;
 331     var y = node.offsetTop;
 332     var parent = node.offsetParent;
 333     while (parent != null)
 334     {
 335         x += parent.offsetLeft;
 336         y += parent.offsetTop;
 337         parent = parent.offsetParent;
 338     }
 339     return {x: x, y: y};
 340 }
 341
 342 // The real code begins here.
 343 var huePositionImg = document.createElement('img');
 344 huePositionImg.galleryImg = false;
 345 huePositionImg.width = 35;
 346 huePositionImg.height = 11;
 347 huePositionImg.src = HUE_SLIDER_ARROWS_LOCATION;
 348 huePositionImg.style.position = 'absolute';
 349
 350 var hueSelectorImg = document.createElement('img');
 351 hueSelectorImg.galleryImg = false;
 352 hueSelectorImg.width = 35;
 353 hueSelectorImg.height = 200;
 354 hueSelectorImg.src = HUE_SLIDER_LOCATION;
 355 hueSelectorImg.style.display = 'block';
 356
 357 var satValImg = document.createElement('img');
 358 satValImg.galleryImg = false;
 359 satValImg.width = 200;
 360 satValImg.height = 200;
 361 satValImg.src = SAT_VAL_SQUARE_LOCATION;
 362 satValImg.style.display = 'block';
 363
 364 var crossHairsImg = document.createElement('img');
 365 crossHairsImg.galleryImg = false;
 366 crossHairsImg.width = 21;
 367 crossHairsImg.height = 21;
 368 crossHairsImg.src = CROSSHAIRS_LOCATION;
 369 crossHairsImg.style.position = 'absolute';
 370
 371 function makeColorSelector(inputBox)
 372 {
 373     var rgb, hsv
 374
 375     function colorChanged()
 376     {
 377         var hex = rgbToHex(rgb.r, rgb.g, rgb.b);
 378         var hueRgb = hsvToRgb(hsv.h, 1, 1);
 379         var hueHex = rgbToHex(hueRgb.r, hueRgb.g, hueRgb.b);
 380         previewDiv.style.background = hex;
 381         inputBox.value = hex;
 382         satValDiv.style.background = hueHex;
 383         crossHairs.style.left = ((hsv.v*199)-10).toString() + 'px';
 384         crossHairs.style.top = (((1-hsv.s)*199)-10).toString() + 'px';
 385         huePos.style.top = ((hsv.h*199)-5).toString() + 'px';
 386     }
 387     function rgbChanged()
 388     {
 389         hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
 390         colorChanged();
 391     }
 392     function hsvChanged()
 393     {
 394         rgb = hsvToRgb(hsv.h, hsv.s, hsv.v);
 395         colorChanged();
 396     }
 397
 398     var colorSelectorDiv = document.createElement('div');
 399     colorSelectorDiv.style.padding = '15px';
 400     colorSelectorDiv.style.position = 'relative';
 401     colorSelectorDiv.style.height = '275px';
 402     colorSelectorDiv.style.width = '250px';
 403
 404     var satValDiv = document.createElement('div');
 405     satValDiv.style.position = 'relative';
 406     satValDiv.style.width = '200px';
 407     satValDiv.style.height = '200px';
 408     var newSatValImg = fixPNG(satValImg);
 409     satValDiv.appendChild(newSatValImg);
 410     var crossHairs = crossHairsImg.cloneNode(false);
 411     satValDiv.appendChild(crossHairs);
 412     function satValDragged(x, y)
 413     {
 414         hsv.s = 1-(y/199);
 415         hsv.v = (x/199);
 416         hsvChanged();
 417     }
 418     trackDrag(satValDiv, satValDragged)
 419     colorSelectorDiv.appendChild(satValDiv);
 420
 421     var hueDiv = document.createElement('div');
 422     hueDiv.style.position = 'absolute';
 423     hueDiv.style.left = '230px';
 424     hueDiv.style.top = '15px';
 425     hueDiv.style.width = '35px';
 426     hueDiv.style.height = '200px';
 427     var huePos = fixPNG(huePositionImg);
 428     hueDiv.appendChild(hueSelectorImg.cloneNode(false));
 429     hueDiv.appendChild(huePos);
 430     function hueDragged(x, y)
 431     {
 432         hsv.h = y/199;
 433         hsvChanged();
 434     }
 435     trackDrag(hueDiv, hueDragged);
 436     colorSelectorDiv.appendChild(hueDiv);
 437
 438     var previewDiv = document.createElement('div');
 439     previewDiv.style.height = '50px'
 440     previewDiv.style.width = '50px';
 441     previewDiv.style.position = 'absolute';
 442     previewDiv.style.top = '225px';
 443     previewDiv.style.left = '15px';
 444     previewDiv.style.border = '1px solid black';
 445     colorSelectorDiv.appendChild(previewDiv);
 446
 447     function inputBoxChanged()
 448     {
 449         rgb = hexToRgb(inputBox.value, {r: 0, g: 0, b: 0});
 450         rgbChanged();
 451     }
 452     myAddEventListener(inputBox, 'change', inputBoxChanged);
 453     inputBox.size = 8;
 454     inputBox.style.position = 'absolute';
 455     inputBox.style.right = '15px';
 456     inputBox.style.top = (225 + (25 - (inputBox.offsetHeight/2))).toString() + 'px';
 457     colorSelectorDiv.appendChild(inputBox);
 458
 459     inputBoxChanged();
 460
 461     return colorSelectorDiv;
 462 }
 463
 464 function makeColorSelectors(ev)
 465 {
 466     var inputNodes = document.getElementsByTagName('input');
 467     var i;
 468     for (i = 0; i < inputNodes.length; i++)
 469     {
 470         var node = inputNodes[i];
 471         if (node.className != 'color')
 472         {
 473             continue;
 474         }
 475         var parent = node.parentNode;
 476         var prevNode = node.previousSibling;
 477         var selector = makeColorSelector(node);
 478         parent.insertBefore(selector, (prevNode ? prevNode.nextSibling : null));
 479     }
 480 }
 481
 482 myAddEventListener(window, 'load', makeColorSelectors);