1. /**
    2.  * Normalize the browser animation API across implementations. This requests
    3.  * the browser to schedule a repaint of the window for the next animation frame.
    4.  * Checks for cross-browser support, and, failing to find it, falls back to setTimeout.
    5.  * @param {function}    callback  Function to call when it's time to update your animation for the next repaint.
    6.  * @param {HTMLElement} element   Optional parameter specifying the element that visually bounds the entire animation.
    7.  * @return {number} Animation frame request.
    8.  */
    9. if (!window.requestAnimationFrame) {
    10.   window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
    11.                                   window.mozRequestAnimationFrame ||
    12.                                   window.msRequestAnimationFrame ||
    13.                                   window.oRequestAnimationFrame ||
    14.                                   function (callback) {
    15.                                     return window.setTimeout(callback, 17 /*~ 1000/60*/);
    16.                                   });
    17. }
    18. /**
    19.  * ERRATA: 'cancelRequestAnimationFrame' renamed to 'cancelAnimationFrame' to reflect an update to the W3C Animation-Timing Spec.
    20.  *
    21.  * Cancels an animation frame request.
    22.  * Checks for cross-browser support, falls back to clearTimeout.
    23.  * @param {number}  Animation frame request.
    24.  */
    25. if (!window.cancelAnimationFrame) {
    26.   window.cancelAnimationFrame = (window.cancelRequestAnimationFrame ||
    27.                                  window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame ||
    28.                                  window.mozCancelAnimationFrame || window.mozCancelRequestAnimationFrame ||
    29.                                  window.msCancelAnimationFrame || window.msCancelRequestAnimationFrame ||
    30.                                  window.oCancelAnimationFrame || window.oCancelRequestAnimationFrame ||
    31.                                  window.clearTimeout);
    32. }
    33. /* Object that contains our utility functions.
    34.  * Attached to the window object which acts as the global namespace.
    35.  */
    36. window.utils = {};
    37. /**
    38.  * Keeps track of the current mouse position, relative to an element.
    39.  * @param {HTMLElement} element
    40.  * @return {object} Contains properties: x, y, event
    41.  */
    42. window.utils.captureMouse = function (element) {
    43.   var mouse = {x: 0, y: 0, event: null},
    44.       body_scrollLeft = document.body.scrollLeft,
    45.       element_scrollLeft = document.documentElement.scrollLeft,
    46.       body_scrollTop = document.body.scrollTop,
    47.       element_scrollTop = document.documentElement.scrollTop,
    48.       offsetLeft = element.offsetLeft,
    49.       offsetTop = element.offsetTop;
    51.   element.addEventListener('mousemove', function (event) {
    52.     var x, y;
    54.     if (event.pageX || event.pageY) {
    55.       x = event.pageX;
    56.       y = event.pageY;
    57.     } else {
    58.       x = event.clientX + body_scrollLeft + element_scrollLeft;
    59.       y = event.clientY + body_scrollTop + element_scrollTop;
    60.     }
    61.     x -= offsetLeft;
    62.     y -= offsetTop;
    64.     mouse.x = x;
    65.     mouse.y = y;
    66.     mouse.event = event;
    67.   }, false);
    69.   return mouse;
    70. };
    71. /**
    72.  * Keeps track of the current (first) touch position, relative to an element.
    73.  * @param {HTMLElement} element
    74.  * @return {object} Contains properties: x, y, isPressed, event
    75.  */
    76. window.utils.captureTouch = function (element) {
    77.   var touch = {x: null, y: null, isPressed: false, event: null},
    78.       body_scrollLeft = document.body.scrollLeft,
    79.       element_scrollLeft = document.documentElement.scrollLeft,
    80.       body_scrollTop = document.body.scrollTop,
    81.       element_scrollTop = document.documentElement.scrollTop,
    82.       offsetLeft = element.offsetLeft,
    83.       offsetTop = element.offsetTop;
    84.   element.addEventListener('touchstart', function (event) {
    85.     touch.isPressed = true;
    86.     touch.event = event;
    87.   }, false);
    88.   element.addEventListener('touchend', function (event) {
    89.     touch.isPressed = false;
    90.     touch.x = null;
    91.     touch.y = null;
    92.     touch.event = event;
    93.   }, false);
    95.   element.addEventListener('touchmove', function (event) {
    96.     var x, y,
    97.         touch_event = event.touches[0]; //first touch
    99.     if (touch_event.pageX || touch_event.pageY) {
    100.       x = touch_event.pageX;
    101.       y = touch_event.pageY;
    102.     } else {
    103.       x = touch_event.clientX + body_scrollLeft + element_scrollLeft;
    104.       y = touch_event.clientY + body_scrollTop + element_scrollTop;
    105.     }
    106.     x -= offsetLeft;
    107.     y -= offsetTop;
    109.     touch.x = x;
    110.     touch.y = y;
    111.     touch.event = event;
    112.   }, false);
    114.   return touch;
    115. };
    116. /**
    117.  * Returns a color in the format: '#RRGGBB', or as a hex number if specified.
    118.  * @param {number|string} color
    119.  * @param {boolean=}      toNumber=false  Return color as a hex number.
    120.  * @return {string|number}
    121.  */
    122. window.utils.parseColor = function (color, toNumber) {
    123.   if (toNumber === true) {
    124.     if (typeof color === 'number') {
    125.       return (color | 0); //chop off decimal
    126.     }
    127.     if (typeof color === 'string' && color[0] === '#') {
    128.       color = color.slice(1);
    129.     }
    130.     return window.parseInt(color, 16);
    131.   } else {
    132.     if (typeof color === 'number') {
    133.       color = '#' + ('00000' + (color | 0).toString(16)).substr(-6); //pad
    134.     }
    135.     return color;
    136.   }
    137. };
    138. /**
    139.  * Converts a color to the RGB string format: 'rgb(r,g,b)' or 'rgba(r,g,b,a)'
    140.  * @param {number|string} color
    141.  * @param {number}        alpha
    142.  * @return {string}
    143.  */
    144. window.utils.colorToRGB = function (color, alpha) {
    145.   //number in octal format or string prefixed with #
    146.   if (typeof color === 'string' && color[0] === '#') {
    147.     color = window.parseInt(color.slice(1), 16);
    148.   }
    149.   alpha = (alpha === undefined) ? 1 : alpha;
    150.   //parse hex values
    151.   var r = color >> 16 & 0xff,
    152.       g = color >> 8 & 0xff,
    153.       b = color & 0xff,
    154.       a = (alpha < 0) ? 0 : ((alpha > 1) ? 1 : alpha);
    155.   //only use 'rgba' if needed
    156.   if (a === 1) {
    157.     return "rgb("+ r +","+ g +","+ b +")";
    158.   } else {
    159.     return "rgba("+ r +","+ g +","+ b +","+ a +")";
    160.   }
    161. };
    162. /**
    163.  * Determine if a rectangle contains the coordinates (x,y) within it's boundaries.
    164.  * @param {object}  rect  Object with properties: x, y, width, height.
    165.  * @param {number}  x     Coordinate position x.
    166.  * @param {number}  y     Coordinate position y.
    167.  * @return {boolean}
    168.  */
    169. window.utils.containsPoint = function (rect, x, y) {
    170.   return !(x < rect.x ||
    171.            x > rect.x + rect.width ||
    172.            y < rect.y ||
    173.            y > rect.y + rect.height);
    174. };
    175. /**
    176.  * Determine if two rectangles overlap.
    177.  * @param {object}  rectA Object with properties: x, y, width, height.
    178.  * @param {object}  rectB Object with properties: x, y, width, height.
    179.  * @return {boolean}
    180.  */
    181. window.utils.intersects = function (rectA, rectB) {
    182.   return !(rectA.x + rectA.width < rectB.x ||
    183.            rectB.x + rectB.width < rectA.x ||
    184.            rectA.y + rectA.height < rectB.y ||
    185.            rectB.y + rectB.height < rectA.y);
    186. };