diff --git a/demos/tooltip.html b/demos/tooltip.html index 7d11fc0..105007e 100644 --- a/demos/tooltip.html +++ b/demos/tooltip.html @@ -65,41 +65,70 @@ headerHeight: 50, scrollbarV: true, columns: [ - { - name: "Company", - prop: "company", + { + name: "Company", + prop: "company", flexGrow: 2 }, - { - name: "Revenue", + { + name: "Revenue", flexGrow: 1, - prop: "revenue" + prop: "revenue" }, - { - name: "Sales", + { + name: "Sales", flexGrow: 1, prop: "sales" - },{ - name: "Comments", + },{ + name: "Comments", prop: "comments", tooltips: true, cellRenderer: function(scope, elm){ - return "{{value}}"; + return '{{$row.comments}}'; } - - } ] }; $scope.data = [ - { 'company': 'Acme', 'revenue': '$3,452,342', 'sales': '$3,452,342,353', comments: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non orci libero. Suspendisse aliquam eu magna ac tristique. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sem erat, suscipit nec faucibus sed, interdum quis enim. Cras id laoreet dolor. Quisque ex odio, consectetur et neque nec, sagittis tempus erat. Donec at maximus purus. Nulla molestie arcu eros, ac pulvinar ligula mattis in. Nulla ut dolor eu metus dignissim auctor. Phasellus auctor quam quis ullamcorper tincidunt.' }, - { 'company': 'Acme Holdings', 'revenue': '$345,342', 'sales': '$4,452,222,353' }, - { 'company': 'Acme Limited', 'revenue': '$344,442', 'sales': '$10,452,444,353' }, - { 'company': 'Sterling', 'revenue': '$40,443,111', 'sales': '$50,433,777,564', comments: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non orci libero. Suspendisse aliquam eu magna ac tristique. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sem erat, suscipit nec faucibus sed, interdum quis enim. Cras id laoreet dolor. Quisque ex odio, consectetur et neque nec, sagittis tempus erat. Donec at maximus purus. Nulla molestie arcu eros, ac pulvinar ligula mattis in. Nulla ut dolor eu metus dignissim auctor. Phasellus auctor quam quis ullamcorper tincidunt.' }, - { 'company': 'Apple', 'revenue': '$1,440,443,111', 'sales': '$999,509,433,777,564' }, - { 'company': 'Apple IBS', 'revenue': '$1,440,443,111', 'sales': '$999,509,433,777,564', comments: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non orci libero. Suspendisse aliquam eu magna ac tristique. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sem erat, suscipit nec faucibus sed, interdum quis enim. Cras id laoreet dolor. Quisque ex odio, consectetur et neque nec, sagittis tempus erat. Donec at maximus purus. Nulla molestie arcu eros, ac pulvinar ligula mattis in. Nulla ut dolor eu metus dignissim auctor. Phasellus auctor quam quis ullamcorper tincidunt.' }, - { 'company': 'Apple IBS South', 'revenue': '$1,440,443,111', 'sales': '$999,509,433,777,564' } + { + company: 'Acme', + revenue: '$3,452,342', + sales: '$3,452,342,353', + comments: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non orci libero. Suspendisse aliquam eu magna ac tristique. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sem erat, suscipit nec faucibus sed, interdum quis enim. Cras id laoreet dolor. Quisque ex odio, consectetur et neque nec, sagittis tempus erat. Donec at maximus purus. Nulla molestie arcu eros, ac pulvinar ligula mattis in. Nulla ut dolor eu metus dignissim auctor. Phasellus auctor quam quis ullamcorper tincidunt.' + }, + { + company: 'Acme Holdings', + revenue: '$345,342', + sales: '$4,452,222,353' + }, + { + company: 'Acme Limited', + revenue: '$344,442', + sales: '$10,452,444,353' + }, + { + company: 'Sterling', + revenue: '$40,443,111', + sales: '$50,433,777,564', + comments: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non orci libero. Suspendisse aliquam eu magna ac tristique. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sem erat, suscipit nec faucibus sed, interdum quis enim. Cras id laoreet dolor. Quisque ex odio, consectetur et neque nec, sagittis tempus erat. Donec at maximus purus. Nulla molestie arcu eros, ac pulvinar ligula mattis in. Nulla ut dolor eu metus dignissim auctor. Phasellus auctor quam quis ullamcorper tincidunt.' + }, + { + company: 'Apple', + revenue: '$1,440,443,111', + sales: '$999,509,433,777,564' + }, + { + company: 'Apple IBS', + revenue: '$1,440,443,111', + sales: '$999,509,433,777,564', + comments: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non orci libero. Suspendisse aliquam eu magna ac tristique. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sem erat, suscipit nec faucibus sed, interdum quis enim. Cras id laoreet dolor. Quisque ex odio, consectetur et neque nec, sagittis tempus erat. Donec at maximus purus. Nulla molestie arcu eros, ac pulvinar ligula mattis in. Nulla ut dolor eu metus dignissim auctor. Phasellus auctor quam quis ullamcorper tincidunt.' + }, + { + company: 'Apple IBS South', + revenue: '$1,440,443,111', + sales: '$999,509,433,777,564' + } ]; }); diff --git a/src/components/popover/Popover.constants.js b/src/components/popover/Popover.constants.js new file mode 100644 index 0000000..256b037 --- /dev/null +++ b/src/components/popover/Popover.constants.js @@ -0,0 +1,7 @@ +export let POSITION = { + LEFT: 'left', + RIGHT: 'right', + TOP: 'top', + BOTTOM: 'bottom', + CENTER: 'center' +} diff --git a/src/components/popover/PopoverDirective.js b/src/components/popover/PopoverDirective.js index d5f88ac..87eaa19 100644 --- a/src/components/popover/PopoverDirective.js +++ b/src/components/popover/PopoverDirective.js @@ -1,20 +1,21 @@ import angular from 'angular'; +import { POSITION } from './Popover.constants'; /** * Popover Directive - * @param {object} $q - * @param {function} $timeout - * @param {function} $templateCache - * @param {function} $compile - * @param {function} PopoverRegistry - * @param {function} $animate + * @param {object} $q + * @param {function} $timeout + * @param {function} $templateCache + * @param {function} $compile + * @param {function} PopoverRegistry + * @param {function} $animate */ export function PopoverDirective($q, $timeout, $templateCache, $compile, PopoverRegistry, PositionHelper, $animate){ /** * Loads a template from the template cache - * @param {string} template - * @param {boolean} plain + * @param {string} template + * @param {boolean} plain * @return {object} html template */ function loadTemplate(template, plain) { @@ -31,12 +32,12 @@ export function PopoverDirective($q, $timeout, $templateCache, $compile, Popover /** * Determines a boolean given a value - * @param {object} value - * @return {boolean} + * @param {object} value + * @return {boolean} */ function toBoolean(value) { if (value && value.length !== 0) { - var v = ("" + value).toLowerCase(); + var v = value.toString().toLowerCase(); value = (v == 'true'); } else { value = false; @@ -81,7 +82,7 @@ export function PopoverDirective($q, $timeout, $templateCache, $compile, Popover $timeout.cancel($scope.exitTimeout); var elm = document.getElementById(`#${$scope.popoverId}`); - if ($scope.popover && elm) return; + if ($scope.popover && elm) return; // remove other popovers from the same group if ($scope.options.group){ @@ -89,7 +90,7 @@ export function PopoverDirective($q, $timeout, $templateCache, $compile, Popover } if ($scope.options.text && !$scope.options.template){ - $scope.popover = angular.element(`
`); $scope.popover.html($scope.options.text); @@ -107,7 +108,7 @@ export function PopoverDirective($q, $timeout, $templateCache, $compile, Popover } } - $scope.popover = angular.element(`
`); $scope.popover.html(template); @@ -145,9 +146,9 @@ export function PopoverDirective($q, $timeout, $templateCache, $compile, Popover /** * Positions the popover - * @param {object} triggerElement - * @param {object} popover - * @param {object} options + * @param {object} triggerElement + * @param {object} popover + * @param {object} options */ function positionPopover(triggerElement, popover, options){ $timeout(function(){ @@ -155,29 +156,29 @@ export function PopoverDirective($q, $timeout, $templateCache, $compile, Popover popoverDimensions = popover[0].getBoundingClientRect(), top, left; - if (options.placement === 'right'){ + if (options.placement === POSITION.RIGHT){ left = elDimensions.left + elDimensions.width + options.spacing; - top = PositionHelper.calculateVerticalAlignment(elDimensions, + top = PositionHelper.calculateVerticalAlignment(elDimensions, popoverDimensions, options.alignment); } - if (options.placement === 'left'){ + if (options.placement === POSITION.LEFT){ left = elDimensions.left - popoverDimensions.width - options.spacing; - top = PositionHelper.calculateVerticalAlignment(elDimensions, + top = PositionHelper.calculateVerticalAlignment(elDimensions, popoverDimensions, options.alignment); } - if (options.placement === 'top'){ + if (options.placement === POSITION.TOP){ top = elDimensions.top - popoverDimensions.height - options.spacing; - left = PositionHelper.calculateHorizontalAlignment(elDimensions, + left = PositionHelper.calculateHorizontalAlignment(elDimensions, popoverDimensions, options.alignment); } - if (options.placement === 'bottom'){ + if (options.placement === POSITION.BOTTOM){ top = elDimensions.top + elDimensions.height + options.spacing; - left = PositionHelper.calculateHorizontalAlignment(elDimensions, + left = PositionHelper.calculateHorizontalAlignment(elDimensions, popoverDimensions, options.alignment); } popover.css({ - top: top + 'px', + top: top + 'px', left: left + 'px' }); @@ -191,9 +192,9 @@ export function PopoverDirective($q, $timeout, $templateCache, $compile, Popover /** * Adds a caret and positions it relatively to the popover - * @param {object} popoverEl - * @param {object} elDimensions - * @param {object} popoverDimensions + * @param {object} popoverEl + * @param {object} elDimensions + * @param {object} popoverDimensions */ function addCaret(popoverEl, elDimensions, popoverDimensions){ var caret = angular.element(``); @@ -201,30 +202,30 @@ export function PopoverDirective($q, $timeout, $templateCache, $compile, Popover var caretDimensions = caret[0].getBoundingClientRect(); var left, top; - if ($scope.options.placement === 'right'){ + if ($scope.options.placement === POSITION.RIGHT){ left = -6; - top = PositionHelper.calculateVerticalCaret(elDimensions, + top = PositionHelper.calculateVerticalCaret(elDimensions, popoverDimensions, caretDimensions, $scope.options.alignment); } - if ($scope.options.placement === 'left'){ + if ($scope.options.placement === POSITION.LEFT){ left = popoverDimensions.width - 2; - top = PositionHelper.calculateVerticalCaret(elDimensions, + top = PositionHelper.calculateVerticalCaret(elDimensions, popoverDimensions, caretDimensions, $scope.options.alignment); } - if ($scope.options.placement === 'top'){ + if ($scope.options.placement === POSITION.TOP){ top = popoverDimensions.height - 5; - left = PositionHelper.calculateHorizontalCaret(elDimensions, + left = PositionHelper.calculateHorizontalCaret(elDimensions, popoverDimensions, caretDimensions, $scope.options.alignment); } - if ($scope.options.placement === 'bottom'){ + if ($scope.options.placement === POSITION.BOTTOM){ top = -8; - left = PositionHelper.calculateHorizontalCaret(elDimensions, + left = PositionHelper.calculateHorizontalCaret(elDimensions, popoverDimensions, caretDimensions, $scope.options.alignment); } caret.css({ - top: top + 'px', + top: top + 'px', left: left + 'px' }); }; diff --git a/src/components/popover/PositionHelper.js b/src/components/popover/PositionHelper.js index c700618..1f34f1a 100644 --- a/src/components/popover/PositionHelper.js +++ b/src/components/popover/PositionHelper.js @@ -1,53 +1,56 @@ /** * Position helper for the popover directive. */ + +import { POSITION } from './Popover.constants'; + export function PositionHelper(){ return { calculateVerticalAlignment: function(elDimensions, popoverDimensions, alignment){ - if (alignment === 'top'){ + if (alignment === POSITION.TOP){ return elDimensions.top; } - if (alignment === 'bottom'){ + if (alignment === POSITION.BOTTOM){ return elDimensions.top + elDimensions.height - popoverDimensions.height; } - if (alignment === 'center'){ + if (alignment === POSITION.CENTER){ return elDimensions.top + elDimensions.height/2 - popoverDimensions.height/2; } }, calculateVerticalCaret: function(elDimensions, popoverDimensions, caretDimensions, alignment){ - if (alignment === 'top'){ + if (alignment === POSITION.TOP){ return elDimensions.height/2 - caretDimensions.height/2 - 1; } - if (alignment === 'bottom'){ + if (alignment === POSITION.BOTTOM){ return popoverDimensions.height - elDimensions.height/2 - caretDimensions.height/2 - 1; } - if (alignment === 'center'){ + if (alignment === POSITION.CENTER){ return popoverDimensions.height/2 - caretDimensions.height/2 - 1; } }, calculateHorizontalCaret: function(elDimensions, popoverDimensions, caretDimensions, alignment){ - if (alignment === 'left'){ + if (alignment === POSITION.LEFT){ return elDimensions.width/2 - caretDimensions.height/2 - 1; } - if (alignment === 'right'){ + if (alignment === POSITION.RIGHT){ return popoverDimensions.width - elDimensions.width/2 - caretDimensions.height/2 - 1; } - if (alignment === 'center'){ + if (alignment === POSITION.CENTER){ return popoverDimensions.width/2 - caretDimensions.height/2 - 1; } }, calculateHorizontalAlignment: function(elDimensions, popoverDimensions, alignment){ - if (alignment === 'left'){ + if (alignment === POSITION.LEFT){ return elDimensions.left; } - if (alignment === 'right'){ + if (alignment === POSITION.RIGHT){ return elDimensions.left + elDimensions.width - popoverDimensions.width; } - if (alignment === 'center'){ + if (alignment === POSITION.CENTER){ return elDimensions.left + elDimensions.width/2 - popoverDimensions.width/2; } }