integrated event scrubbing with direct image access - need to clean up code

1 files changed, 357 insertions, 0 deletions

diff --git a/www/lib/angular-tooltips/src/js/angular-tooltips.js b/www/lib/angular-tooltips/src/js/angular-tooltips.js
new file mode 100644
index 00000000..5ad62199
--- /dev/null
+++ b/www/lib/angular-tooltips/src/js/angular-tooltips.js
@@ -0,0 +1,357 @@
+/*global angular*/
+
+(function withAngular(angular) {
+  'use strict';
+
+  angular.module('720kb.tooltips', [])
+  .directive('tooltips', ['$window', '$compile', '$interpolate',
+   function manageDirective($window, $compile, $interpolate) {
+
+    var TOOLTIP_SMALL_MARGIN = 8 //px
+      , TOOLTIP_MEDIUM_MARGIN = 9 //px
+      , TOOLTIP_LARGE_MARGIN = 10 //px
+      , CSS_PREFIX = '_720kb-tooltip-'
+      , INTERPOLATE_START_SYM = $interpolate.startSymbol()
+      , INTERPOLATE_END_SYM = $interpolate.endSymbol();
+    return {
+      'restrict': 'A',
+      'scope': {},
+      'link': function linkingFunction($scope, element, attr) {
+
+        var initialized = false
+          , thisElement = angular.element(element[0])
+          , body = angular.element($window.document.getElementsByTagName('body')[0])
+          , theTooltip
+          , theTooltipHeight
+          , theTooltipWidth
+          , theTooltipMargin //used both for margin top left right bottom
+          , height
+          , width
+          , offsetTop
+          , offsetLeft
+          , title = attr.tooltipTitle || attr.title || ''
+          , content = attr.tooltipContent || ''
+          , html = attr.tooltipHtml || ''
+          , showTriggers = attr.tooltipShowTrigger || 'mouseover'
+          , hideTriggers = attr.tooltipHideTrigger || 'mouseleave'
+          , originSide = attr.tooltipSide || 'top'
+          , side = originSide
+          , size = attr.tooltipSize || 'medium'
+          , tryPosition = typeof attr.tooltipTry !== 'undefined' && attr.tooltipTry !== null ? $scope.$eval(attr.tooltipTry) : true
+          , className = attr.tooltipClass || ''
+          , speed = (attr.tooltipSpeed || 'medium').toLowerCase()
+          , delay = attr.tooltipDelay || 0
+          , lazyMode = typeof attr.tooltipLazy !== 'undefined' && attr.tooltipLazy !== null ? $scope.$eval(attr.tooltipLazy) : true
+          , hasCloseButton = typeof attr.tooltipCloseButton !== 'undefined' && attr.tooltipCloseButton !== null
+          , closeButtonContent = attr.tooltipCloseButton || ''
+          , htmlTemplate = '<div class="_720kb-tooltip ' + CSS_PREFIX + size + '">';
+
+        if (hasCloseButton) {
+
+          htmlTemplate = htmlTemplate + '<span class="' + CSS_PREFIX + 'close-button" ng-click="hideTooltip()"> ' + closeButtonContent + ' </span>';
+        }
+        if (attr.tooltipView) {
+          if (attr.tooltipViewCtrl) {
+
+            htmlTemplate = htmlTemplate + '<div ng-controller="' + attr.tooltipViewCtrl + '" ng-include="\'' + attr.tooltipView + '\'"></div>';
+          } else {
+
+            htmlTemplate = htmlTemplate + '<div ng-include="\'' + attr.tooltipView + '\'"></div>';
+          }
+        }
+
+
+        htmlTemplate = htmlTemplate + '<div class="' + CSS_PREFIX + 'title"> ' + INTERPOLATE_START_SYM + 'title' + INTERPOLATE_END_SYM + '</div>' +
+                                      INTERPOLATE_START_SYM + 'content' + INTERPOLATE_END_SYM + html + ' <span class="' + CSS_PREFIX + 'caret"></span>' +
+                                      '</div>';
+
+        $scope.title = title;
+        $scope.content = content;
+        $scope.html = html;
+        //parse the animation speed of tooltips
+        $scope.parseSpeed = function parseSpeed () {
+
+          switch (speed) {
+            case 'fast':
+              speed = 100;
+              break;
+            case 'medium':
+              speed = 450;
+              break;
+            case 'slow':
+              speed = 800;
+              break;
+            default:
+              speed = Number(speed);
+          }
+        };
+        //create the tooltip
+        theTooltip = $compile(htmlTemplate)($scope);
+
+        theTooltip.addClass(className);
+
+        body.append(theTooltip);
+
+        $scope.isTooltipEmpty = function checkEmptyTooltip () {
+
+          if (!$scope.title && !$scope.content && !$scope.html) {
+
+            return true;
+          }
+        };
+
+        $scope.initTooltip = function initTooltip (tooltipSide) {
+          if (!$scope.isTooltipEmpty()) {
+            theTooltip.css('visibility', '');
+
+            height = thisElement[0].offsetHeight;
+            width = thisElement[0].offsetWidth;
+            offsetTop = $scope.getRootOffsetTop(thisElement[0], 0);
+            offsetLeft = $scope.getRootOffsetLeft(thisElement[0], 0);
+            //get tooltip dimension
+            theTooltipHeight = theTooltip[0].offsetHeight;
+            theTooltipWidth = theTooltip[0].offsetWidth;
+
+            $scope.parseSpeed();
+            $scope.tooltipPositioning(tooltipSide);
+          } else {
+            theTooltip.css('visibility', 'hidden');
+          }
+        };
+
+        $scope.getRootOffsetTop = function getRootOffsetTop (elem, val){
+
+          if (!elem.offsetParent){
+
+            return val + elem.offsetTop;
+          }
+
+          return $scope.getRootOffsetTop(elem.offsetParent, val + elem.offsetTop - elem.scrollTop);
+        };
+
+        $scope.getRootOffsetLeft = function getRootOffsetLeft (elem, val){
+
+          if (!elem.offsetParent){
+
+            return val + elem.offsetLeft;
+          }
+
+          return $scope.getRootOffsetLeft(elem.offsetParent, val + elem.offsetLeft - elem.scrollLeft);
+        };
+
+        function onMouseEnterAndMouseOver() {
+          if (!lazyMode || !initialized) {
+
+            initialized = true;
+            $scope.initTooltip(side);
+          }
+          if (tryPosition) {
+
+            $scope.tooltipTryPosition();
+          }
+          $scope.showTooltip();
+        }
+
+        $scope.bindShowTriggers = function() {
+          thisElement.bind(showTriggers, onMouseEnterAndMouseOver);
+        };
+
+        function onMouseLeaveAndMouseOut() {
+          $scope.hideTooltip();
+        }
+
+        $scope.bindHideTriggers = function() {
+          thisElement.bind(hideTriggers, onMouseLeaveAndMouseOut);
+        };
+
+        $scope.clearTriggers = function() {
+          thisElement.unbind(showTriggers, onMouseEnterAndMouseOver);
+          thisElement.unbind(hideTriggers, onMouseLeaveAndMouseOut);
+        };
+
+        $scope.bindShowTriggers();
+
+        $scope.showTooltip = function showTooltip () {
+          theTooltip.addClass(CSS_PREFIX + 'open');
+          theTooltip.css('transition', 'opacity ' + speed + 'ms linear');
+
+          if (delay) {
+
+            theTooltip.css('transition-delay', delay + 'ms' );
+
+          }
+
+          $scope.clearTriggers();
+          $scope.bindHideTriggers();
+        };
+
+        $scope.hideTooltip = function hideTooltip () {
+          theTooltip.removeClass(CSS_PREFIX + 'open');
+          theTooltip.css('transition', '');
+          $scope.clearTriggers();
+          $scope.bindShowTriggers();
+        };
+
+        $scope.removePosition = function removeTooltipPosition () {
+
+          theTooltip
+          .removeClass(CSS_PREFIX + 'left')
+          .removeClass(CSS_PREFIX + 'right')
+          .removeClass(CSS_PREFIX + 'top')
+          .removeClass(CSS_PREFIX + 'bottom ');
+        };
+
+        $scope.tooltipPositioning = function tooltipPositioning (tooltipSide) {
+
+          $scope.removePosition();
+
+          var topValue
+            , leftValue;
+
+          if (size === 'small') {
+
+            theTooltipMargin = TOOLTIP_SMALL_MARGIN;
+
+          } else if (size === 'medium') {
+
+            theTooltipMargin = TOOLTIP_MEDIUM_MARGIN;
+
+          } else if (size === 'large') {
+
+            theTooltipMargin = TOOLTIP_LARGE_MARGIN;
+          }
+
+          if (tooltipSide === 'left') {
+
+            topValue = offsetTop + height / 2 - theTooltipHeight / 2;
+            leftValue = offsetLeft - (theTooltipWidth + theTooltipMargin);
+
+            theTooltip.css('top', topValue + 'px');
+            theTooltip.css('left', leftValue + 'px');
+            theTooltip.addClass(CSS_PREFIX + 'left');
+          }
+
+          if (tooltipSide === 'right') {
+
+            topValue = offsetTop + height / 2 - theTooltipHeight / 2;
+            leftValue = offsetLeft + width + theTooltipMargin;
+
+            theTooltip.css('top', topValue + 'px');
+            theTooltip.css('left', leftValue + 'px');
+            theTooltip.addClass(CSS_PREFIX + 'right');
+          }
+
+          if (tooltipSide === 'top') {
+
+            topValue = offsetTop - theTooltipMargin - theTooltipHeight;
+            leftValue = offsetLeft + width / 2 - theTooltipWidth / 2;
+
+            theTooltip.css('top', topValue + 'px');
+            theTooltip.css('left', leftValue + 'px');
+            theTooltip.addClass(CSS_PREFIX + 'top');
+          }
+
+          if (tooltipSide === 'bottom') {
+
+            topValue = offsetTop + height + theTooltipMargin;
+            leftValue = offsetLeft + width / 2 - theTooltipWidth / 2;
+            theTooltip.css('top', topValue + 'px');
+            theTooltip.css('left', leftValue + 'px');
+            theTooltip.addClass(CSS_PREFIX + 'bottom');
+          }
+        };
+
+        $scope.tooltipTryPosition = function tooltipTryPosition () {
+
+
+          var theTooltipH = theTooltip[0].offsetHeight
+            , theTooltipW = theTooltip[0].offsetWidth
+            , topOffset = theTooltip[0].offsetTop
+            , leftOffset = theTooltip[0].offsetLeft
+            , winWidth = $window.outerWidth
+            , winHeight = $window.outerHeight
+            , rightOffset = winWidth - (theTooltipW + leftOffset)
+            , bottomOffset = winHeight - (theTooltipH + topOffset)
+            //element OFFSETS (not tooltip offsets)
+            , elmHeight = thisElement[0].offsetHeight
+            , elmWidth = thisElement[0].offsetWidth
+            , elmOffsetLeft = thisElement[0].offsetLeft
+            , elmOffsetTop = thisElement[0].offsetTop
+            , elmOffsetRight = winWidth - (elmOffsetLeft + elmWidth)
+            , elmOffsetBottom = winHeight - (elmHeight + elmOffsetTop)
+            , offsets = {
+              'left': leftOffset,
+              'top': topOffset,
+              'bottom': bottomOffset,
+              'right': rightOffset
+            }
+            , posix = {
+              'left': elmOffsetLeft,
+              'right': elmOffsetRight,
+              'top': elmOffsetTop,
+              'bottom': elmOffsetBottom
+            }
+            , bestPosition = Object.keys(posix).reduce(function (best, key) {
+
+                return posix[best] > posix[key] ? best : key;
+            })
+            , worstOffset = Object.keys(offsets).reduce(function (worst, key) {
+
+                return offsets[worst] < offsets[key] ? worst : key;
+            });
+
+            if (originSide !== bestPosition && offsets[worstOffset] < 20) {
+
+              side = bestPosition;
+
+              $scope.tooltipPositioning(side);
+              $scope.initTooltip(bestPosition);
+            }
+        };
+
+        function onResize() {
+          $scope.hideTooltip();
+          $scope.initTooltip(originSide);
+        }
+
+        angular.element($window).bind('resize', onResize);
+
+        // destroy the tooltip when the directive is destroyed
+        // unbind all dom event handlers
+        $scope.$on('$destroy', function() {
+          angular.element($window).unbind('resize', onResize);
+          $scope.clearTriggers();
+          theTooltip.remove();
+        });
+
+        if (attr.tooltipTitle) {
+          attr.$observe('tooltipTitle', function(val) {
+            $scope.title = val;
+            $scope.initTooltip(side);
+          });
+        }
+
+        if (attr.title) {
+          attr.$observe('title', function(val) {
+            $scope.title = val;
+            $scope.initTooltip(side);
+          });
+        }
+
+        if (attr.tooltipContent) {
+          attr.$observe('tooltipContent', function(val) {
+            $scope.content = val;
+            $scope.initTooltip(side);
+          });
+        }
+
+        if (attr.tooltipHtml) {
+          attr.$observe('tooltipHtml', function(val) {
+            $scope.html = val;
+            $scope.initTooltip(side);
+          });
+        }
+      }
+    };
+  }]);
+}(angular));