Skip to content

Commit

Permalink
Changelog:
Browse files Browse the repository at this point in the history 
* Reverting to previous version of the `styleTip` utility
* Applying the suggested fix #215 (comment) thanks to @Gruven

Please @Rudi-Batubara @duduik test and provide feedback.
  • Loading branch information
@thednp
thednp committed Aug 23, 2019
1 parent 92ccb11 commit 145defd
Show file tree
Hide file tree
Showing 5 changed files with 25 additions and 93 deletions.
58 changes: 12 additions & 46 deletions dist/bootstrap-native-v4.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,18 +260,12 @@
x : globalObject.pageXOffset || HTML[scrollLeft]
}
},
styleTip = function(link, element, position, parentObject) { // both popovers and tooltips (target,tooltip,placement,elementToAppendTo)
styleTip = function(link,element,position,parent) { // both popovers and tooltips (target,tooltip,placement,elementToAppendTo)
var elementDimensions = { w : element[offsetWidth], h: element[offsetHeight] },
parentIsBody = parentObject[parentNode] === DOC[body],
windowOverflow = parentIsBody ? (parentObject[parentNode+offsetHeight] !== parentObject[parentNode+clientHeight] || parentObject[parentNode+offsetWidth] !== parentObject[parentNode+clientWidth])
: (parentObject[offsetHeight] !== parentObject[clientHeight] || parentObject[offsetWidth] !== parentObject[clientWidth]),
linkParentStyle = globalObject[getComputedStyle](link[parentNode]),
parentIsCenterAligned = linkParentStyle.alignItems === 'center' && linkParentStyle.justifyContent === 'center' && linkParentStyle.display === 'flex',
windowWidth = parentObject[parentNode+clientWidth],
windowHeight = parentObject[parentNode+clientHeight],
windowWidth = (HTML[clientWidth] || DOC[body][clientWidth]),
windowHeight = (HTML[clientHeight] || DOC[body][clientHeight]),
rect = link[getBoundingClientRect](),
scroll = parentIsBody ? getScroll() : { x: parentObject[offsetLeft] + parentObject[scrollLeft],
y: parentObject[offsetTop] + parentObject[scrollTop] },
scroll = parent === DOC[body] ? getScroll() : { x: parent[offsetLeft] + parent[scrollLeft], y: parent[offsetTop] + parent[scrollTop] },
linkDimensions = { w: rect[right] - rect[left], h: rect[bottom] - rect[top] },
isPopover = hasClass(element,'popover'),
topPosition, leftPosition,
Expand Down Expand Up @@ -334,7 +328,7 @@
leftPosition = windowWidth - elementDimensions.w*1.01;
arrowLeft = elementDimensions.w - ( windowWidth - rect[left] ) + linkDimensions.w/2 - arrowWidth/2;
} else {
leftPosition = rect[left] + scroll.x - elementDimensions.w/2 + linkDimensions.w/2 + ( !isPopover && parentIsCenterAligned && !windowOverflow ? arrowWidth/2 : 0 );
leftPosition = rect[left] + scroll.x - elementDimensions.w/2 + linkDimensions.w/2;
arrowLeft = elementDimensions.w/2 - ( isPopover ? arrowWidth : arrowWidth/2 );
}
}
Expand Down Expand Up @@ -1360,7 +1354,7 @@
if ( !contentString && !this[template] ) return; // invalidate

// constants, vars
var popover = null, timer = 0, placementSetting = this[placement], parentObject = {},
var popover = null, timer = 0, placementSetting = this[placement],

// handlers
dismissibleHandler = function(e) {
Expand Down Expand Up @@ -1389,22 +1383,7 @@

if ( contentString !== null && self[template] === null ) { //create the popover from data attributes

popover[setAttribute]('role','tooltip');

// for some reason the parent dimensions are skewed when tooltip is shown
parentObject[parentNode] = self[container];
parentObject[offsetLeft] = self[container][offsetLeft];
parentObject[offsetTop] = self[container][offsetTop];
parentObject[offsetWidth] = self[container][offsetWidth];
parentObject[offsetHeight] = self[container][offsetHeight];
parentObject[clientWidth] = self[container][clientWidth];
parentObject[clientHeight] = self[container][clientHeight];
parentObject[scrollLeft] = self[container][scrollLeft];
parentObject[scrollTop] = self[container][scrollTop];
parentObject[parentNode+offsetWidth] = HTML[offsetWidth];
parentObject[parentNode+offsetHeight] = HTML[offsetHeight];
parentObject[parentNode+clientWidth] = HTML[clientWidth];
parentObject[parentNode+clientHeight] = HTML[clientHeight];
popover[setAttribute]('role','tooltip');

if (titleString !== null) {
var popoverTitle = DOC[createElement]('h3');
Expand Down Expand Up @@ -1436,7 +1415,7 @@
!hasClass(popover,showClass) && ( addClass(popover,showClass) );
},
updatePopover = function() {
styleTip(element, popover, placementSetting, parentObject);
styleTip(element, popover, placementSetting, self[container]);
},

// event toggle
Expand Down Expand Up @@ -1900,7 +1879,7 @@
: modal ? modal : DOC[body];

// bind, event targets, title and constants
var self = this, timer = 0, placementSetting = this[placement], tooltip = null, parentObject = {},
var self = this, timer = 0, placementSetting = this[placement], tooltip = null,
titleString = element[getAttribute](title) || element[getAttribute](dataTitle) || element[getAttribute](dataOriginalTitle);

if ( !titleString || titleString == "" ) return; // invalidate
Expand All @@ -1913,24 +1892,11 @@
createToolTip = function() {
titleString = element[getAttribute](title) || element[getAttribute](dataTitle) || element[getAttribute](dataOriginalTitle); // read the title again

// for some reason the parent dimensions are skewed when tooltip is shown
parentObject[parentNode] = self[container];
parentObject[offsetLeft] = self[container][offsetLeft];
parentObject[offsetTop] = self[container][offsetTop];
parentObject[offsetWidth] = self[container][offsetWidth];
parentObject[offsetHeight] = self[container][offsetHeight];
parentObject[clientWidth] = self[container][clientWidth];
parentObject[clientHeight] = self[container][clientHeight];
parentObject[scrollLeft] = self[container][scrollLeft];
parentObject[scrollTop] = self[container][scrollTop];
parentObject[parentNode+offsetWidth] = HTML[offsetWidth];
parentObject[parentNode+offsetHeight] = HTML[offsetHeight];
parentObject[parentNode+clientWidth] = HTML[clientWidth];
parentObject[parentNode+clientHeight] = HTML[clientHeight];

if ( titleString && titleString !== "" ) { // invalidate, maybe markup changed
tooltip = DOC[createElement](div);
tooltip[setAttribute]('role',component);
tooltip[style][left] = '0';
tooltip[style][top] = '0';

// tooltip arrow
var tooltipArrow = DOC[createElement](div);
Expand All @@ -1947,7 +1913,7 @@
}
},
updateTooltip = function () {
styleTip(element, tooltip, placementSetting, parentObject);
styleTip(element, tooltip, placementSetting, self[container]);
},
showTooltip = function () {
!hasClass(tooltip,showClass) && ( addClass(tooltip,showClass) );
Expand Down

2 comments on commit 145defd

@duduik
Copy link

@duduik duduik commented on 145defd Aug 23, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It works.

Thanks

@Gruven
Copy link

@Gruven Gruven commented on 145defd Aug 23, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirm. It works. Thanks.

Please sign in to comment.