From 10f5788d747d2f96027c0591fe332b74f9b9aac7 Mon Sep 17 00:00:00 2001 From: PliablePixels Date: Wed, 5 Aug 2015 17:59:26 -0400 Subject: Timeline feature (Experimental) --- .../angular-tooltips/src/css/angular-tooltips.css | 124 ------- .../angular-tooltips/src/js/angular-tooltips.js | 357 --------------------- 2 files changed, 481 deletions(-) delete mode 100644 www/lib/angular-tooltips/src/css/angular-tooltips.css delete mode 100644 www/lib/angular-tooltips/src/js/angular-tooltips.js (limited to 'www/lib/angular-tooltips/src') diff --git a/www/lib/angular-tooltips/src/css/angular-tooltips.css b/www/lib/angular-tooltips/src/css/angular-tooltips.css deleted file mode 100644 index 6d3f4712..00000000 --- a/www/lib/angular-tooltips/src/css/angular-tooltips.css +++ /dev/null @@ -1,124 +0,0 @@ -._720kb-tooltip { - background: rgba(0, 0, 0, 0.8); - color:white; - position:absolute; - z-index:9; - padding:0.4% 1%; - opacity:0; - visibility: hidden; - -webkit-border-radius:3px; - -moz-border-radius:3px; - border-radius:3px; - left: -200%; - top: 0; -} -._720kb-tooltip-title{ - color:rgba(255,255,255,0.95); - font-weight: 500; - width: 100%; - clear:both; -} -._720kb-tooltip._720kb-tooltip-small { - padding:4.5px 10px; - font-size: 12px; -} -._720kb-tooltip._720kb-tooltip-medium { - padding:7px 15px; - font-size: 13.5px; -} -._720kb-tooltip._720kb-tooltip-large { - padding:10px 20px; - font-size: 14px; -} -._720kb-tooltip._720kb-tooltip-open { - visibility: visible; - visibility: initial; - opacity: 1; -} -._720kb-tooltip-caret:before { - content:''; - position: absolute; - width: 0; - height: 0; - border: 6px solid rgba(0, 0, 0, 0.8); -} -._720kb-tooltip-caret:after { - content:''; - position: absolute; - width: 0; - height: 0; - border: 5px solid transparent; -} -._720kb-tooltip-left ._720kb-tooltip-caret:before { - top: 50%; - left: 100%; - margin-left:0; - margin-top: -6px; - border-top-color: transparent; - border-bottom-color: transparent; - border-right-width: 0; -} -._720kb-tooltip-left ._720kb-tooltip-caret:after { - top: 50%; - left: 100%; - margin-left:0; - margin-top: -5px; - border-top-color: transparent; - border-bottom-color: transparent; - border-right-width: 0; -} -._720kb-tooltip-right ._720kb-tooltip-caret:before { - top: 50%; - left:0; - margin-left:-6px; - margin-top: -6px; - border-top-color: transparent; - border-bottom-color: transparent; - border-left-width: 0; -} -._720kb-tooltip-right ._720kb-tooltip-caret:after { - top: 50%; - left:0; - margin-left:-5px; - margin-top: -5px; - border-top-color: transparent; - border-bottom-color: transparent; - border-left-width: 0; -} -._720kb-tooltip-top ._720kb-tooltip-caret:before { - top: 100%; - left: 50%; - margin-left: -6px; - margin-bottom:-6px; - border-right-color: transparent; - border-left-color: transparent; - border-bottom-width: 0; -} -._720kb-tooltip-top ._720kb-tooltip-caret:after { - top: 100%; - left: 50%; - margin-left: -5px; - margin-bottom:-5px; - border-right-color: transparent; - border-left-color: transparent; - border-bottom-width: 0; -} -._720kb-tooltip-bottom ._720kb-tooltip-caret:before { - bottom: 100%; - left: 50%; - margin-left: -6px; - border-right-color: transparent; - border-left-color: transparent; - border-top-width: 0; -} -._720kb-tooltip-bottom ._720kb-tooltip-caret:after { - bottom: 100%; - left: 50%; - margin-left: -5px; - border-right-color: transparent; - border-left-color: transparent; - border-top-width: 0; -} -._720kb-tooltip-close-button { - float: right; -} diff --git a/www/lib/angular-tooltips/src/js/angular-tooltips.js b/www/lib/angular-tooltips/src/js/angular-tooltips.js deleted file mode 100644 index 5ad62199..00000000 --- a/www/lib/angular-tooltips/src/js/angular-tooltips.js +++ /dev/null @@ -1,357 +0,0 @@ -/*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 = '
'; - - if (hasCloseButton) { - - htmlTemplate = htmlTemplate + ' ' + closeButtonContent + ' '; - } - if (attr.tooltipView) { - if (attr.tooltipViewCtrl) { - - htmlTemplate = htmlTemplate + '
'; - } else { - - htmlTemplate = htmlTemplate + '
'; - } - } - - - htmlTemplate = htmlTemplate + '
' + INTERPOLATE_START_SYM + 'title' + INTERPOLATE_END_SYM + '
' + - INTERPOLATE_START_SYM + 'content' + INTERPOLATE_END_SYM + html + ' ' + - '
'; - - $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)); -- cgit v1.2.3