Skip to content
This repository has been archived by the owner on Jan 7, 2022. It is now read-only.

Commit

Permalink
Merge pull request #2 from jonshaffer/popover
Browse files Browse the repository at this point in the history 
Popover fixes
  • Loading branch information
@jonshaffer
jonshaffer authored Oct 26, 2016
2 parents a3e4822 + d8e8491 commit 38d620f
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 70 deletions.
69 changes: 49 additions & 20 deletions demos/tooltip.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 "<span popover popover-placement='left' popover-text='{{value}}' popover-group='main'>{{value}}</span>";
return '<span popover popover-placement="left" popover-text="{{$row.comments}}" popover-group="main">{{$row.comments}}</span>';
}


}
]
};

$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'
}
];

});
Expand Down
7 changes: 7 additions & 0 deletions src/components/popover/Popover.constants.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export let POSITION = {
LEFT: 'left',
RIGHT: 'right',
TOP: 'top',
BOTTOM: 'bottom',
CENTER: 'center'
}
77 changes: 39 additions & 38 deletions src/components/popover/PopoverDirective.js
View file
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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;
Expand Down Expand Up @@ -81,15 +82,15 @@ 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){
PopoverRegistry.removeGroup($scope.options.group, $scope.popoverId);
}

if ($scope.options.text && !$scope.options.template){
$scope.popover = angular.element(`<div class="popover popover-text
$scope.popover = angular.element(`<div class="popover popover-text
popover${$scope.options.placement}" id="${$scope.popoverId}"></div>`);

$scope.popover.html($scope.options.text);
Expand All @@ -107,7 +108,7 @@ export function PopoverDirective($q, $timeout, $templateCache, $compile, Popover
}
}

$scope.popover = angular.element(`<div class="popover
$scope.popover = angular.element(`<div class="popover
popover-${$scope.options.placement}" id="${$scope.popoverId}"></div>`);

$scope.popover.html(template);
Expand Down Expand Up @@ -145,39 +146,39 @@ 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(){
var elDimensions = triggerElement[0].getBoundingClientRect(),
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'
});

Expand All @@ -191,40 +192,40 @@ 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(`<span class="popover-caret caret-${$scope.options.placement}"></span>`);
popoverEl.append(caret);
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'
});
};
Expand Down
27 changes: 15 additions & 12 deletions src/components/popover/PositionHelper.js
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
Expand Down

0 comments on commit 38d620f

Please sign in to comment.