Skip to content

Commit

Permalink
Fixed #122 - Implemented Tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
cagataycivici committed Dec 26, 2019
1 parent 5e2e72b commit d3a3e0f
Show file tree
Hide file tree
Showing 11 changed files with 481 additions and 3 deletions.
2 changes: 2 additions & 0 deletions exports/tooltip.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
'use strict';
module.exports = require('./components/tooltip/Tooltip.js');
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "primevue",
"version": "1.0.0-rc.3",
"version": "1.0.0-rc.4-SNAPSHOT",
"repository": {
"type": "git",
"url": "https://github.com/primefaces/primevue.git"
Expand Down
2 changes: 1 addition & 1 deletion src/AppFooter.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="content-section layout-footer clearfix">
<span>PrimeVUE 1.0.0-rc.3</span>
<span>PrimeVue 1.0.0-rc.4</span>
<div class="footer-links">
<a href="https://github.com/primefaces/primevue"><i class=" icon-github fa fa-github-square"></i></a>
<a href="https://twitter.com/primevue"><i class="icon-twitter fa fa-twitter-square"></i></a>
Expand Down
1 change: 1 addition & 0 deletions src/AppMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@
<router-link to="/dialog">Dialog</router-link>
<router-link to="/overlaypanel">OverlayPanel</router-link>
<router-link to="/sidebar">Sidebar</router-link>
<router-link to="/tooltip">Tooltip</router-link>
</div>

<span>
Expand Down
3 changes: 2 additions & 1 deletion src/assets/styles/primevue.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@
@import '../../components/inputtext/InputText.css';
@import '../../components/password/Password.css';
@import '../../components/radiobutton/RadioButton.css';
@import '../../components/splitbutton/SplitButton.css';
@import '../../components/splitbutton/SplitButton.css';
@import '../../components/tooltip/Tooltip.css';
67 changes: 67 additions & 0 deletions src/components/tooltip/Tooltip.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
.p-tooltip {
position:absolute;
display:none;
padding: .25em .5em;
max-width: 12.5em;
}

.p-tooltip.p-tooltip-right,
.p-tooltip.p-tooltip-left {
padding: 0 .25em;
}

.p-tooltip.p-tooltip-top,
.p-tooltip.p-tooltip-bottom {
padding:.25em 0;
}

.p-tooltip .p-tooltip-text {
padding: .125em .5em;
background-color: rgb(76, 76, 76);
color: #ffffff;
white-space: pre-line;
}

.p-tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}

.p-tooltip-right .p-tooltip-arrow {
top: 50%;
left: 0;
margin-top: -.25em;
border-width: .25em .25em .25em 0;
border-right-color: rgb(76, 76, 76);
}

.p-tooltip-left .p-tooltip-arrow {
top: 50%;
right: 0;
margin-top: -.25em;
border-width: .25em 0 .25em .25em;
border-left-color: rgb(76, 76, 76);
}

.p-tooltip.p-tooltip-top {
padding: .25em 0;
}

.p-tooltip-top .p-tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -.25em;
border-width: .25em .25em 0;
border-top-color: rgb(76, 76, 76);
}

.p-tooltip-bottom .p-tooltip-arrow {
top: 0;
left: 50%;
margin-left: -.25em;
border-width: 0 .25em .25em;
border-bottom-color: rgb(76, 76, 76);
}
226 changes: 226 additions & 0 deletions src/components/tooltip/Tooltip.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,226 @@
import UniqueComponentId from '../utils/UniqueComponentId';
import DomHandler from '../utils/DomHandler';

function bindEvents(el) {
const modifiers = el.$_ptooltipModifiers;
if (modifiers.focus) {
el.addEventListener('focus', onFocus);
el.addEventListener('blur', onBlur);
}
else {
el.addEventListener('mouseenter', onMouseEnter);
el.addEventListener('mouseleave', onMouseLeave);
el.addEventListener('click', onClick);
}
}

function unbindEvents(el) {
const modifiers = el.$_ptooltipModifiers;
if (modifiers.focus) {
el.removeEventListener('focus', onFocus);
el.removeEventListener('blur', onBlur);
}
else {
el.removeEventListener('mouseenter', onMouseEnter);
el.removeEventListener('mouseleave', onMouseLeave);
el.removeEventListener('click', onClick);
}

//this.unbindDocumentResizeListener();
}

function onMouseEnter(event) {
show(event.currentTarget);
}

function onMouseLeave(event) {
hide(event.currentTarget);
}

function onFocus(event) {
show(event.currentTarget);
}

function onBlur(event) {
hide(event.currentTarget);
}

function onClick(event) {
hide(event.currentTarget);
}

function show(el) {
if (!el.$_ptooltipValue) {
return;
}

let tooltipElement = create(el);
align(el);
DomHandler.fadeIn(tooltipElement, 250);
tooltipElement.style.zIndex = ++DomHandler.zindex;
}

function hide(el) {
remove(el);
}

function getTooltipElement(el) {
return document.getElementById(el.$_ptooltipId);
}

function create(el) {
const id = UniqueComponentId() + '_tooltip';
el.$_ptooltipId = id;

let container = document.createElement('div');
container.id = id;

let tooltipArrow = document.createElement('div');
tooltipArrow.className = 'p-tooltip-arrow';
container.appendChild(tooltipArrow);

let tooltipText = document.createElement('div');
tooltipText.className = 'p-tooltip-text';
tooltipText.innerHTML = el.$_ptooltipValue;

container.appendChild(tooltipText);
document.body.appendChild(container);

container.style.display = 'inline-block';

return container;
}

function remove(el) {
let tooltipElement = getTooltipElement(el);
if (tooltipElement && tooltipElement.parentElement) {
document.body.removeChild(tooltipElement);
}
el.$_ptooltipId = null;
}

function align(el) {
const modifiers = el.$_ptooltipModifiers;

if (modifiers.top) {
alignTop(el);
if (isOutOfBounds(el)) {
alignBottom(el);
}
}
else if (modifiers.left) {
alignLeft(el);
if (isOutOfBounds(el)) {
alignRight(el);

if (isOutOfBounds(el)) {
alignTop(el);

if (isOutOfBounds(el)) {
alignBottom(el);
}
}
}
}
else if (modifiers.bottom) {
alignBottom(el);
if (isOutOfBounds(el)) {
alignTop(el);
}
}
else {
alignRight(el);
if (isOutOfBounds(el)) {
alignLeft(el);

if (isOutOfBounds(el)) {
alignTop(el);

if (isOutOfBounds(el)) {
alignBottom(el);
}
}
}
}
}

function getHostOffset(el) {
let offset = el.getBoundingClientRect();
let targetLeft = offset.left + DomHandler.getWindowScrollLeft();
let targetTop = offset.top + DomHandler.getWindowScrollTop();

return {left: targetLeft, top: targetTop};
}

function alignRight(el) {
preAlign(el, 'right');
let tooltipElement = getTooltipElement(el);
let hostOffset = getHostOffset(el);
let left = hostOffset.left + DomHandler.getOuterWidth(el);
let top = hostOffset.top + (DomHandler.getOuterHeight(el) - DomHandler.getOuterHeight(tooltipElement)) / 2;
tooltipElement.style.left = left + 'px';
tooltipElement.style.top = top + 'px';
}

function alignLeft(el) {
preAlign(el, 'left');
let tooltipElement = getTooltipElement(el);
let hostOffset = getHostOffset(el);
let left = hostOffset.left - DomHandler.getOuterWidth(tooltipElement);
let top = hostOffset.top + (DomHandler.getOuterHeight(el) - DomHandler.getOuterHeight(tooltipElement)) / 2;
tooltipElement.style.left = left + 'px';
tooltipElement.style.top = top + 'px';
}

function alignTop(el) {
preAlign(el, 'top');
let tooltipElement = getTooltipElement(el);
let hostOffset = getHostOffset(el);
let left = hostOffset.left + (DomHandler.getOuterWidth(el) - DomHandler.getOuterWidth(tooltipElement)) / 2;
let top = hostOffset.top - DomHandler.getOuterHeight(tooltipElement);
tooltipElement.style.left = left + 'px';
tooltipElement.style.top = top + 'px';
}

function alignBottom(el) {
preAlign(el, 'bottom');
let tooltipElement = getTooltipElement(el);
let hostOffset = getHostOffset(el);
let left = hostOffset.left + (DomHandler.getOuterWidth(el) - DomHandler.getOuterWidth(tooltipElement)) / 2;
let top = hostOffset.top + DomHandler.getOuterHeight(el);
tooltipElement.style.left = left + 'px';
tooltipElement.style.top = top + 'px';
}

function preAlign(el, position) {
let tooltipElement = getTooltipElement(el);
tooltipElement.style.left = -999 + 'px';
tooltipElement.style.top = -999 + 'px';
tooltipElement.className = 'p-tooltip p-component p-tooltip-' + position;
}

function isOutOfBounds(el) {
let tooltipElement = getTooltipElement(el);
let offset = tooltipElement.getBoundingClientRect();
let targetTop = offset.top;
let targetLeft = offset.left;
let width = DomHandler.getOuterWidth(tooltipElement);
let height = DomHandler.getOuterHeight(tooltipElement);
let viewport = DomHandler.getViewport();

return (targetLeft + width > viewport.width) || (targetLeft < 0) || (targetTop < 0) || (targetTop + height > viewport.height);
}

const Tooltip = {
bind(el, options) {
el.$_ptooltipModifiers = options.modifiers;
el.$_ptooltipValue = options.value;
bindEvents(el);
},
unbind(el) {
remove(el);
unbindEvents(el);
}
};

export default Tooltip;
3 changes: 3 additions & 0 deletions src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ import TreeTable from './components/treetable/TreeTable';
import Toast from './components/toast/Toast';
import ToastService from './components/toast/ToastService';
import Toolbar from './components/toolbar/Toolbar';
import Tooltip from './components/tooltip/Tooltip';
import ToggleButton from './components/togglebutton/ToggleButton';
import TriStateCheckbox from './components/tristatecheckbox/TriStateCheckbox';
import InputMask from './components/inputmask/InputMask';
Expand All @@ -80,6 +81,8 @@ import '@fullcalendar/timegrid/main.min.css';

Vue.use(ToastService);

Vue.directive('tooltip', Tooltip);

Vue.config.productionTip = false;

Vue.component('Accordion', Accordion);
Expand Down
5 changes: 5 additions & 0 deletions src/router.js
Original file line number Diff line number Diff line change
Expand Up @@ -492,6 +492,11 @@ export default new Router({
name: 'toolbar',
component: () => import('./views/toolbar/ToolbarDemo.vue')
},
{
path: '/tooltip',
name: 'tooltip',
component: () => import('./views/tooltip/TooltipDemo.vue')
},
{
path: '/tree',
name: 'tree',
Expand Down
Loading

0 comments on commit d3a3e0f

Please sign in to comment.