diff --git a/package.json b/package.json index 5cd095b..b5324a3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tourguidejs", - "version": "1.1.1", + "version": "1.1.2", "src": "src/Tour.js", "main": "tourguide.js", "module": "tourguide.esm.js", diff --git a/src/step/index.js b/src/step/index.js index 368ce25..2696b3c 100644 --- a/src/step/index.js +++ b/src/step/index.js @@ -116,8 +116,8 @@ export default class Step { content.append(actions); } const tooltip = this.tooltip = u("
"); - if (this.width) setStyle(tooltip, { width: this.width }); - if (this.height) setStyle(tooltip, { height: this.height }); + if (this.width) setStyle(tooltip, { width: this.width + "px", maxWidth: this.width + "px" }); + if (this.height) setStyle(tooltip, { height: this.height + "px", maxHeight: this.height + "px" }); const tooltipinner = u(``); const container = u(``); container.append(image).append(content); diff --git a/tourguide.esm.js b/tourguide.esm.js index 8569ecb..b9ccc10 100644 --- a/tourguide.esm.js +++ b/tourguide.esm.js @@ -152,279 +152,279 @@ var u$2 = umbrella_min.exports; var Icons = ""; -var COMPLETE = 'complete', - CANCELED = 'canceled'; - -function raf(task){ - if('requestAnimationFrame' in window){ - return window.requestAnimationFrame(task); - } - - setTimeout(task, 16); -} - -function setElementScroll$1(element, x, y){ - - if(element.self === element){ - element.scrollTo(x, y); - }else { - element.scrollLeft = x; - element.scrollTop = y; - } -} - -function getTargetScrollLocation(scrollSettings, parent){ - var align = scrollSettings.align, - target = scrollSettings.target, - targetPosition = target.getBoundingClientRect(), - parentPosition, - x, - y, - differenceX, - differenceY, - targetWidth, - targetHeight, - leftAlign = align && align.left != null ? align.left : 0.5, - topAlign = align && align.top != null ? align.top : 0.5, - leftOffset = align && align.leftOffset != null ? align.leftOffset : 0, - topOffset = align && align.topOffset != null ? align.topOffset : 0, - leftScalar = leftAlign, - topScalar = topAlign; - - if(scrollSettings.isWindow(parent)){ - targetWidth = Math.min(targetPosition.width, parent.innerWidth); - targetHeight = Math.min(targetPosition.height, parent.innerHeight); - x = targetPosition.left + parent.pageXOffset - parent.innerWidth * leftScalar + targetWidth * leftScalar; - y = targetPosition.top + parent.pageYOffset - parent.innerHeight * topScalar + targetHeight * topScalar; - x -= leftOffset; - y -= topOffset; - x = scrollSettings.align.lockX ? parent.pageXOffset : x; - y = scrollSettings.align.lockY ? parent.pageYOffset : y; - differenceX = x - parent.pageXOffset; - differenceY = y - parent.pageYOffset; - }else { - targetWidth = targetPosition.width; - targetHeight = targetPosition.height; - parentPosition = parent.getBoundingClientRect(); - var offsetLeft = targetPosition.left - (parentPosition.left - parent.scrollLeft); - var offsetTop = targetPosition.top - (parentPosition.top - parent.scrollTop); - x = offsetLeft + (targetWidth * leftScalar) - parent.clientWidth * leftScalar; - y = offsetTop + (targetHeight * topScalar) - parent.clientHeight * topScalar; - x -= leftOffset; - y -= topOffset; - x = Math.max(Math.min(x, parent.scrollWidth - parent.clientWidth), 0); - y = Math.max(Math.min(y, parent.scrollHeight - parent.clientHeight), 0); - x = scrollSettings.align.lockX ? parent.scrollLeft : x; - y = scrollSettings.align.lockY ? parent.scrollTop : y; - differenceX = x - parent.scrollLeft; - differenceY = y - parent.scrollTop; - } - - return { - x: x, - y: y, - differenceX: differenceX, - differenceY: differenceY - }; -} - -function animate(parent){ - var scrollSettings = parent._scrollSettings; - - if(!scrollSettings){ - return; - } - - var maxSynchronousAlignments = scrollSettings.maxSynchronousAlignments; - - var location = getTargetScrollLocation(scrollSettings, parent), - time = Date.now() - scrollSettings.startTime, - timeValue = Math.min(1 / scrollSettings.time * time, 1); - - if(scrollSettings.endIterations >= maxSynchronousAlignments){ - setElementScroll$1(parent, location.x, location.y); - parent._scrollSettings = null; - return scrollSettings.end(COMPLETE); - } - - var easeValue = 1 - scrollSettings.ease(timeValue); - - setElementScroll$1(parent, - location.x - location.differenceX * easeValue, - location.y - location.differenceY * easeValue - ); - - if(time >= scrollSettings.time){ - scrollSettings.endIterations++; - // Align ancestor synchronously - scrollSettings.scrollAncestor && animate(scrollSettings.scrollAncestor); - animate(parent); - return; - } - - raf(animate.bind(null, parent)); -} - -function defaultIsWindow(target){ - return target.self === target -} - -function transitionScrollTo(target, parent, settings, scrollAncestor, callback){ - var idle = !parent._scrollSettings, - lastSettings = parent._scrollSettings, - now = Date.now(), - cancelHandler, - passiveOptions = { passive: true }; - - if(lastSettings){ - lastSettings.end(CANCELED); - } - - function end(endType){ - parent._scrollSettings = null; - - if(parent.parentElement && parent.parentElement._scrollSettings){ - parent.parentElement._scrollSettings.end(endType); - } - - if(settings.debug){ - console.log('Scrolling ended with type', endType, 'for', parent); - } - - callback(endType); - if(cancelHandler){ - parent.removeEventListener('touchstart', cancelHandler, passiveOptions); - parent.removeEventListener('wheel', cancelHandler, passiveOptions); - } - } - - var maxSynchronousAlignments = settings.maxSynchronousAlignments; - - if(maxSynchronousAlignments == null){ - maxSynchronousAlignments = 3; - } - - parent._scrollSettings = { - startTime: now, - endIterations: 0, - target: target, - time: settings.time, - ease: settings.ease, - align: settings.align, - isWindow: settings.isWindow || defaultIsWindow, - maxSynchronousAlignments: maxSynchronousAlignments, - end: end, - scrollAncestor - }; - - if(!('cancellable' in settings) || settings.cancellable){ - cancelHandler = end.bind(null, CANCELED); - parent.addEventListener('touchstart', cancelHandler, passiveOptions); - parent.addEventListener('wheel', cancelHandler, passiveOptions); - } - - if(idle){ - animate(parent); - } - - return cancelHandler -} - -function defaultIsScrollable(element){ - return ( - 'pageXOffset' in element || - ( - element.scrollHeight !== element.clientHeight || - element.scrollWidth !== element.clientWidth - ) && - getComputedStyle(element).overflow !== 'hidden' - ); -} - -function defaultValidTarget(){ - return true; -} - -function findParentElement(el){ - if (el.assignedSlot) { - return findParentElement(el.assignedSlot); - } - - if (el.parentElement) { - if(el.parentElement.tagName === 'BODY'){ - return el.parentElement.ownerDocument.defaultView || el.parentElement.ownerDocument.ownerWindow; - } - return el.parentElement; - } - - if (el.getRootNode){ - var parent = el.getRootNode(); - if(parent.nodeType === 11) { - return parent.host; - } - } -} - -var scrollIntoView = function(target, settings, callback){ - if(!target){ - return; - } - - if(typeof settings === 'function'){ - callback = settings; - settings = null; - } - - if(!settings){ - settings = {}; - } - - settings.time = isNaN(settings.time) ? 1000 : settings.time; - settings.ease = settings.ease || function(v){return 1 - Math.pow(1 - v, v / 2);}; - settings.align = settings.align || {}; - - var parent = findParentElement(target), - parents = 1; - - function done(endType){ - parents--; - if(!parents){ - callback && callback(endType); - } - } - - var validTarget = settings.validTarget || defaultValidTarget; - var isScrollable = settings.isScrollable; - - if(settings.debug){ - console.log('About to scroll to', target); - - if(!parent){ - console.error('Target did not have a parent, is it mounted in the DOM?'); - } - } - - var scrollingElements = []; - - while(parent){ - if(settings.debug){ - console.log('Scrolling parent node', parent); - } - - if(validTarget(parent, parents) && (isScrollable ? isScrollable(parent, defaultIsScrollable) : defaultIsScrollable(parent))){ - parents++; - scrollingElements.push(parent); - } - - parent = findParentElement(parent); - - if(!parent){ - done(COMPLETE); - break; - } - } - - return scrollingElements.reduce((cancel, parent, index) => transitionScrollTo(target, parent, settings, scrollingElements[index + 1], done), null); +var COMPLETE = 'complete', + CANCELED = 'canceled'; + +function raf(task){ + if('requestAnimationFrame' in window){ + return window.requestAnimationFrame(task); + } + + setTimeout(task, 16); +} + +function setElementScroll$1(element, x, y){ + + if(element.self === element){ + element.scrollTo(x, y); + }else { + element.scrollLeft = x; + element.scrollTop = y; + } +} + +function getTargetScrollLocation(scrollSettings, parent){ + var align = scrollSettings.align, + target = scrollSettings.target, + targetPosition = target.getBoundingClientRect(), + parentPosition, + x, + y, + differenceX, + differenceY, + targetWidth, + targetHeight, + leftAlign = align && align.left != null ? align.left : 0.5, + topAlign = align && align.top != null ? align.top : 0.5, + leftOffset = align && align.leftOffset != null ? align.leftOffset : 0, + topOffset = align && align.topOffset != null ? align.topOffset : 0, + leftScalar = leftAlign, + topScalar = topAlign; + + if(scrollSettings.isWindow(parent)){ + targetWidth = Math.min(targetPosition.width, parent.innerWidth); + targetHeight = Math.min(targetPosition.height, parent.innerHeight); + x = targetPosition.left + parent.pageXOffset - parent.innerWidth * leftScalar + targetWidth * leftScalar; + y = targetPosition.top + parent.pageYOffset - parent.innerHeight * topScalar + targetHeight * topScalar; + x -= leftOffset; + y -= topOffset; + x = scrollSettings.align.lockX ? parent.pageXOffset : x; + y = scrollSettings.align.lockY ? parent.pageYOffset : y; + differenceX = x - parent.pageXOffset; + differenceY = y - parent.pageYOffset; + }else { + targetWidth = targetPosition.width; + targetHeight = targetPosition.height; + parentPosition = parent.getBoundingClientRect(); + var offsetLeft = targetPosition.left - (parentPosition.left - parent.scrollLeft); + var offsetTop = targetPosition.top - (parentPosition.top - parent.scrollTop); + x = offsetLeft + (targetWidth * leftScalar) - parent.clientWidth * leftScalar; + y = offsetTop + (targetHeight * topScalar) - parent.clientHeight * topScalar; + x -= leftOffset; + y -= topOffset; + x = Math.max(Math.min(x, parent.scrollWidth - parent.clientWidth), 0); + y = Math.max(Math.min(y, parent.scrollHeight - parent.clientHeight), 0); + x = scrollSettings.align.lockX ? parent.scrollLeft : x; + y = scrollSettings.align.lockY ? parent.scrollTop : y; + differenceX = x - parent.scrollLeft; + differenceY = y - parent.scrollTop; + } + + return { + x: x, + y: y, + differenceX: differenceX, + differenceY: differenceY + }; +} + +function animate(parent){ + var scrollSettings = parent._scrollSettings; + + if(!scrollSettings){ + return; + } + + var maxSynchronousAlignments = scrollSettings.maxSynchronousAlignments; + + var location = getTargetScrollLocation(scrollSettings, parent), + time = Date.now() - scrollSettings.startTime, + timeValue = Math.min(1 / scrollSettings.time * time, 1); + + if(scrollSettings.endIterations >= maxSynchronousAlignments){ + setElementScroll$1(parent, location.x, location.y); + parent._scrollSettings = null; + return scrollSettings.end(COMPLETE); + } + + var easeValue = 1 - scrollSettings.ease(timeValue); + + setElementScroll$1(parent, + location.x - location.differenceX * easeValue, + location.y - location.differenceY * easeValue + ); + + if(time >= scrollSettings.time){ + scrollSettings.endIterations++; + // Align ancestor synchronously + scrollSettings.scrollAncestor && animate(scrollSettings.scrollAncestor); + animate(parent); + return; + } + + raf(animate.bind(null, parent)); +} + +function defaultIsWindow(target){ + return target.self === target +} + +function transitionScrollTo(target, parent, settings, scrollAncestor, callback){ + var idle = !parent._scrollSettings, + lastSettings = parent._scrollSettings, + now = Date.now(), + cancelHandler, + passiveOptions = { passive: true }; + + if(lastSettings){ + lastSettings.end(CANCELED); + } + + function end(endType){ + parent._scrollSettings = null; + + if(parent.parentElement && parent.parentElement._scrollSettings){ + parent.parentElement._scrollSettings.end(endType); + } + + if(settings.debug){ + console.log('Scrolling ended with type', endType, 'for', parent); + } + + callback(endType); + if(cancelHandler){ + parent.removeEventListener('touchstart', cancelHandler, passiveOptions); + parent.removeEventListener('wheel', cancelHandler, passiveOptions); + } + } + + var maxSynchronousAlignments = settings.maxSynchronousAlignments; + + if(maxSynchronousAlignments == null){ + maxSynchronousAlignments = 3; + } + + parent._scrollSettings = { + startTime: now, + endIterations: 0, + target: target, + time: settings.time, + ease: settings.ease, + align: settings.align, + isWindow: settings.isWindow || defaultIsWindow, + maxSynchronousAlignments: maxSynchronousAlignments, + end: end, + scrollAncestor + }; + + if(!('cancellable' in settings) || settings.cancellable){ + cancelHandler = end.bind(null, CANCELED); + parent.addEventListener('touchstart', cancelHandler, passiveOptions); + parent.addEventListener('wheel', cancelHandler, passiveOptions); + } + + if(idle){ + animate(parent); + } + + return cancelHandler +} + +function defaultIsScrollable(element){ + return ( + 'pageXOffset' in element || + ( + element.scrollHeight !== element.clientHeight || + element.scrollWidth !== element.clientWidth + ) && + getComputedStyle(element).overflow !== 'hidden' + ); +} + +function defaultValidTarget(){ + return true; +} + +function findParentElement(el){ + if (el.assignedSlot) { + return findParentElement(el.assignedSlot); + } + + if (el.parentElement) { + if(el.parentElement.tagName.toLowerCase() === 'body'){ + return el.parentElement.ownerDocument.defaultView || el.parentElement.ownerDocument.ownerWindow; + } + return el.parentElement; + } + + if (el.getRootNode){ + var parent = el.getRootNode(); + if(parent.nodeType === 11) { + return parent.host; + } + } +} + +var scrollIntoView = function(target, settings, callback){ + if(!target){ + return; + } + + if(typeof settings === 'function'){ + callback = settings; + settings = null; + } + + if(!settings){ + settings = {}; + } + + settings.time = isNaN(settings.time) ? 1000 : settings.time; + settings.ease = settings.ease || function(v){return 1 - Math.pow(1 - v, v / 2);}; + settings.align = settings.align || {}; + + var parent = findParentElement(target), + parents = 1; + + function done(endType){ + parents--; + if(!parents){ + callback && callback(endType); + } + } + + var validTarget = settings.validTarget || defaultValidTarget; + var isScrollable = settings.isScrollable; + + if(settings.debug){ + console.log('About to scroll to', target); + + if(!parent){ + console.error('Target did not have a parent, is it mounted in the DOM?'); + } + } + + var scrollingElements = []; + + while(parent){ + if(settings.debug){ + console.log('Scrolling parent node', parent); + } + + if(validTarget(parent, parents) && (isScrollable ? isScrollable(parent, defaultIsScrollable) : defaultIsScrollable(parent))){ + parents++; + scrollingElements.push(parent); + } + + parent = findParentElement(parent); + + if(!parent){ + done(COMPLETE); + break; + } + } + + return scrollingElements.reduce((cancel, parent, index) => transitionScrollTo(target, parent, settings, scrollingElements[index + 1], done), null); }; function assert(assertion, message) { @@ -622,9 +622,9 @@ function getMaxZIndex() { })).concat([0])); } -function t$1(t){return t.split("-")[0]}function e$1(t){return t.split("-")[1]}function n$2(e){return ["top","bottom"].includes(t$1(e))?"x":"y"}function i$1(t){return "y"===t?"height":"width"}function r$2(r,o,a){let{reference:l,floating:s}=r;const c=l.x+l.width/2-s.width/2,f=l.y+l.height/2-s.height/2,u=n$2(o),m=i$1(u),g=l[m]/2-s[m]/2,d="x"===u;let p;switch(t$1(o)){case"top":p={x:c,y:l.y-s.height};break;case"bottom":p={x:c,y:l.y+l.height};break;case"right":p={x:l.x+l.width,y:f};break;case"left":p={x:l.x-s.width,y:f};break;default:p={x:l.x,y:l.y};}switch(e$1(o)){case"start":p[u]-=g*(a&&d?-1:1);break;case"end":p[u]+=g*(a&&d?-1:1);}return p}const o$1=async(t,e,n)=>{const{placement:i="bottom",strategy:o="absolute",middleware:a=[],platform:l}=n,s=a.filter(Boolean),c=await(null==l.isRTL?void 0:l.isRTL(e));let f=await l.getElementRects({reference:t,floating:e,strategy:o}),{x:u,y:m}=r$2(f,i,c),g=i,d={},p=0;for(let n=0;n"+n(r(p).replace(/^\n+|\n+$/g,""))+"
":(p=g[6])?(p.match(/\./)&&(g[5]=g[5].replace(/^\d+/gm,"")),s=t(n(g[5].replace(/^\s*[>*+.-]/gm,""))),">"==p?p="blockquote":(p=p.match(/\./)?"ol":"ul",s=s.replace(/^(.*)(\n|$)/gm,""+r(g[16])+"
":(g[17]||g[1])&&(o=f(g[17]||"--"))),h+=l,h+=o;return (h+a.substring(d)+$()).replace(/^\n+|\n+$/g,"")}
@@ -658,13 +658,13 @@ var keepinview = function keepinview(_ref) {
};
function positionTooltip(target, tooltipEl, arrowEl, context) {
//context._options.root
- O(target, tooltipEl, {
+ V(target, tooltipEl, {
// placement: 'bottom-start',
middleware: [
// flip(),
v$1({
alignment: 'bottom-start'
- }), T$1(function (props) {
+ }), O$1(function (props) {
var side = props.placement.split("-")[0];
switch (side) {
case "top":
@@ -787,10 +787,12 @@ var Step = /*#__PURE__*/function () {
}
var tooltip = this.tooltip = u$2("");
if (this.width) setStyle(tooltip, {
- width: this.width
+ width: this.width + "px",
+ maxWidth: this.width + "px"
});
if (this.height) setStyle(tooltip, {
- height: this.height
+ height: this.height + "px",
+ maxHeight: this.height + "px"
});
var tooltipinner = u$2(""));
var container = u$2("");
diff --git a/tourguide.js b/tourguide.js
index 53d3895..d2515a2 100644
--- a/tourguide.js
+++ b/tourguide.js
@@ -155,279 +155,279 @@ var Tourguide = (function () {
var Icons = "";
- var COMPLETE = 'complete',
- CANCELED = 'canceled';
-
- function raf(task){
- if('requestAnimationFrame' in window){
- return window.requestAnimationFrame(task);
- }
-
- setTimeout(task, 16);
- }
-
- function setElementScroll$1(element, x, y){
-
- if(element.self === element){
- element.scrollTo(x, y);
- }else {
- element.scrollLeft = x;
- element.scrollTop = y;
- }
- }
-
- function getTargetScrollLocation(scrollSettings, parent){
- var align = scrollSettings.align,
- target = scrollSettings.target,
- targetPosition = target.getBoundingClientRect(),
- parentPosition,
- x,
- y,
- differenceX,
- differenceY,
- targetWidth,
- targetHeight,
- leftAlign = align && align.left != null ? align.left : 0.5,
- topAlign = align && align.top != null ? align.top : 0.5,
- leftOffset = align && align.leftOffset != null ? align.leftOffset : 0,
- topOffset = align && align.topOffset != null ? align.topOffset : 0,
- leftScalar = leftAlign,
- topScalar = topAlign;
-
- if(scrollSettings.isWindow(parent)){
- targetWidth = Math.min(targetPosition.width, parent.innerWidth);
- targetHeight = Math.min(targetPosition.height, parent.innerHeight);
- x = targetPosition.left + parent.pageXOffset - parent.innerWidth * leftScalar + targetWidth * leftScalar;
- y = targetPosition.top + parent.pageYOffset - parent.innerHeight * topScalar + targetHeight * topScalar;
- x -= leftOffset;
- y -= topOffset;
- x = scrollSettings.align.lockX ? parent.pageXOffset : x;
- y = scrollSettings.align.lockY ? parent.pageYOffset : y;
- differenceX = x - parent.pageXOffset;
- differenceY = y - parent.pageYOffset;
- }else {
- targetWidth = targetPosition.width;
- targetHeight = targetPosition.height;
- parentPosition = parent.getBoundingClientRect();
- var offsetLeft = targetPosition.left - (parentPosition.left - parent.scrollLeft);
- var offsetTop = targetPosition.top - (parentPosition.top - parent.scrollTop);
- x = offsetLeft + (targetWidth * leftScalar) - parent.clientWidth * leftScalar;
- y = offsetTop + (targetHeight * topScalar) - parent.clientHeight * topScalar;
- x -= leftOffset;
- y -= topOffset;
- x = Math.max(Math.min(x, parent.scrollWidth - parent.clientWidth), 0);
- y = Math.max(Math.min(y, parent.scrollHeight - parent.clientHeight), 0);
- x = scrollSettings.align.lockX ? parent.scrollLeft : x;
- y = scrollSettings.align.lockY ? parent.scrollTop : y;
- differenceX = x - parent.scrollLeft;
- differenceY = y - parent.scrollTop;
- }
-
- return {
- x: x,
- y: y,
- differenceX: differenceX,
- differenceY: differenceY
- };
- }
-
- function animate(parent){
- var scrollSettings = parent._scrollSettings;
-
- if(!scrollSettings){
- return;
- }
-
- var maxSynchronousAlignments = scrollSettings.maxSynchronousAlignments;
-
- var location = getTargetScrollLocation(scrollSettings, parent),
- time = Date.now() - scrollSettings.startTime,
- timeValue = Math.min(1 / scrollSettings.time * time, 1);
-
- if(scrollSettings.endIterations >= maxSynchronousAlignments){
- setElementScroll$1(parent, location.x, location.y);
- parent._scrollSettings = null;
- return scrollSettings.end(COMPLETE);
- }
-
- var easeValue = 1 - scrollSettings.ease(timeValue);
-
- setElementScroll$1(parent,
- location.x - location.differenceX * easeValue,
- location.y - location.differenceY * easeValue
- );
-
- if(time >= scrollSettings.time){
- scrollSettings.endIterations++;
- // Align ancestor synchronously
- scrollSettings.scrollAncestor && animate(scrollSettings.scrollAncestor);
- animate(parent);
- return;
- }
-
- raf(animate.bind(null, parent));
- }
-
- function defaultIsWindow(target){
- return target.self === target
- }
-
- function transitionScrollTo(target, parent, settings, scrollAncestor, callback){
- var idle = !parent._scrollSettings,
- lastSettings = parent._scrollSettings,
- now = Date.now(),
- cancelHandler,
- passiveOptions = { passive: true };
-
- if(lastSettings){
- lastSettings.end(CANCELED);
- }
-
- function end(endType){
- parent._scrollSettings = null;
-
- if(parent.parentElement && parent.parentElement._scrollSettings){
- parent.parentElement._scrollSettings.end(endType);
- }
-
- if(settings.debug){
- console.log('Scrolling ended with type', endType, 'for', parent);
- }
-
- callback(endType);
- if(cancelHandler){
- parent.removeEventListener('touchstart', cancelHandler, passiveOptions);
- parent.removeEventListener('wheel', cancelHandler, passiveOptions);
- }
- }
-
- var maxSynchronousAlignments = settings.maxSynchronousAlignments;
-
- if(maxSynchronousAlignments == null){
- maxSynchronousAlignments = 3;
- }
-
- parent._scrollSettings = {
- startTime: now,
- endIterations: 0,
- target: target,
- time: settings.time,
- ease: settings.ease,
- align: settings.align,
- isWindow: settings.isWindow || defaultIsWindow,
- maxSynchronousAlignments: maxSynchronousAlignments,
- end: end,
- scrollAncestor
- };
-
- if(!('cancellable' in settings) || settings.cancellable){
- cancelHandler = end.bind(null, CANCELED);
- parent.addEventListener('touchstart', cancelHandler, passiveOptions);
- parent.addEventListener('wheel', cancelHandler, passiveOptions);
- }
-
- if(idle){
- animate(parent);
- }
-
- return cancelHandler
- }
-
- function defaultIsScrollable(element){
- return (
- 'pageXOffset' in element ||
- (
- element.scrollHeight !== element.clientHeight ||
- element.scrollWidth !== element.clientWidth
- ) &&
- getComputedStyle(element).overflow !== 'hidden'
- );
- }
-
- function defaultValidTarget(){
- return true;
- }
-
- function findParentElement(el){
- if (el.assignedSlot) {
- return findParentElement(el.assignedSlot);
- }
-
- if (el.parentElement) {
- if(el.parentElement.tagName === 'BODY'){
- return el.parentElement.ownerDocument.defaultView || el.parentElement.ownerDocument.ownerWindow;
- }
- return el.parentElement;
- }
-
- if (el.getRootNode){
- var parent = el.getRootNode();
- if(parent.nodeType === 11) {
- return parent.host;
- }
- }
- }
-
- var scrollIntoView = function(target, settings, callback){
- if(!target){
- return;
- }
-
- if(typeof settings === 'function'){
- callback = settings;
- settings = null;
- }
-
- if(!settings){
- settings = {};
- }
-
- settings.time = isNaN(settings.time) ? 1000 : settings.time;
- settings.ease = settings.ease || function(v){return 1 - Math.pow(1 - v, v / 2);};
- settings.align = settings.align || {};
-
- var parent = findParentElement(target),
- parents = 1;
-
- function done(endType){
- parents--;
- if(!parents){
- callback && callback(endType);
- }
- }
-
- var validTarget = settings.validTarget || defaultValidTarget;
- var isScrollable = settings.isScrollable;
-
- if(settings.debug){
- console.log('About to scroll to', target);
-
- if(!parent){
- console.error('Target did not have a parent, is it mounted in the DOM?');
- }
- }
-
- var scrollingElements = [];
-
- while(parent){
- if(settings.debug){
- console.log('Scrolling parent node', parent);
- }
-
- if(validTarget(parent, parents) && (isScrollable ? isScrollable(parent, defaultIsScrollable) : defaultIsScrollable(parent))){
- parents++;
- scrollingElements.push(parent);
- }
-
- parent = findParentElement(parent);
-
- if(!parent){
- done(COMPLETE);
- break;
- }
- }
-
- return scrollingElements.reduce((cancel, parent, index) => transitionScrollTo(target, parent, settings, scrollingElements[index + 1], done), null);
+ var COMPLETE = 'complete',
+ CANCELED = 'canceled';
+
+ function raf(task){
+ if('requestAnimationFrame' in window){
+ return window.requestAnimationFrame(task);
+ }
+
+ setTimeout(task, 16);
+ }
+
+ function setElementScroll$1(element, x, y){
+
+ if(element.self === element){
+ element.scrollTo(x, y);
+ }else {
+ element.scrollLeft = x;
+ element.scrollTop = y;
+ }
+ }
+
+ function getTargetScrollLocation(scrollSettings, parent){
+ var align = scrollSettings.align,
+ target = scrollSettings.target,
+ targetPosition = target.getBoundingClientRect(),
+ parentPosition,
+ x,
+ y,
+ differenceX,
+ differenceY,
+ targetWidth,
+ targetHeight,
+ leftAlign = align && align.left != null ? align.left : 0.5,
+ topAlign = align && align.top != null ? align.top : 0.5,
+ leftOffset = align && align.leftOffset != null ? align.leftOffset : 0,
+ topOffset = align && align.topOffset != null ? align.topOffset : 0,
+ leftScalar = leftAlign,
+ topScalar = topAlign;
+
+ if(scrollSettings.isWindow(parent)){
+ targetWidth = Math.min(targetPosition.width, parent.innerWidth);
+ targetHeight = Math.min(targetPosition.height, parent.innerHeight);
+ x = targetPosition.left + parent.pageXOffset - parent.innerWidth * leftScalar + targetWidth * leftScalar;
+ y = targetPosition.top + parent.pageYOffset - parent.innerHeight * topScalar + targetHeight * topScalar;
+ x -= leftOffset;
+ y -= topOffset;
+ x = scrollSettings.align.lockX ? parent.pageXOffset : x;
+ y = scrollSettings.align.lockY ? parent.pageYOffset : y;
+ differenceX = x - parent.pageXOffset;
+ differenceY = y - parent.pageYOffset;
+ }else {
+ targetWidth = targetPosition.width;
+ targetHeight = targetPosition.height;
+ parentPosition = parent.getBoundingClientRect();
+ var offsetLeft = targetPosition.left - (parentPosition.left - parent.scrollLeft);
+ var offsetTop = targetPosition.top - (parentPosition.top - parent.scrollTop);
+ x = offsetLeft + (targetWidth * leftScalar) - parent.clientWidth * leftScalar;
+ y = offsetTop + (targetHeight * topScalar) - parent.clientHeight * topScalar;
+ x -= leftOffset;
+ y -= topOffset;
+ x = Math.max(Math.min(x, parent.scrollWidth - parent.clientWidth), 0);
+ y = Math.max(Math.min(y, parent.scrollHeight - parent.clientHeight), 0);
+ x = scrollSettings.align.lockX ? parent.scrollLeft : x;
+ y = scrollSettings.align.lockY ? parent.scrollTop : y;
+ differenceX = x - parent.scrollLeft;
+ differenceY = y - parent.scrollTop;
+ }
+
+ return {
+ x: x,
+ y: y,
+ differenceX: differenceX,
+ differenceY: differenceY
+ };
+ }
+
+ function animate(parent){
+ var scrollSettings = parent._scrollSettings;
+
+ if(!scrollSettings){
+ return;
+ }
+
+ var maxSynchronousAlignments = scrollSettings.maxSynchronousAlignments;
+
+ var location = getTargetScrollLocation(scrollSettings, parent),
+ time = Date.now() - scrollSettings.startTime,
+ timeValue = Math.min(1 / scrollSettings.time * time, 1);
+
+ if(scrollSettings.endIterations >= maxSynchronousAlignments){
+ setElementScroll$1(parent, location.x, location.y);
+ parent._scrollSettings = null;
+ return scrollSettings.end(COMPLETE);
+ }
+
+ var easeValue = 1 - scrollSettings.ease(timeValue);
+
+ setElementScroll$1(parent,
+ location.x - location.differenceX * easeValue,
+ location.y - location.differenceY * easeValue
+ );
+
+ if(time >= scrollSettings.time){
+ scrollSettings.endIterations++;
+ // Align ancestor synchronously
+ scrollSettings.scrollAncestor && animate(scrollSettings.scrollAncestor);
+ animate(parent);
+ return;
+ }
+
+ raf(animate.bind(null, parent));
+ }
+
+ function defaultIsWindow(target){
+ return target.self === target
+ }
+
+ function transitionScrollTo(target, parent, settings, scrollAncestor, callback){
+ var idle = !parent._scrollSettings,
+ lastSettings = parent._scrollSettings,
+ now = Date.now(),
+ cancelHandler,
+ passiveOptions = { passive: true };
+
+ if(lastSettings){
+ lastSettings.end(CANCELED);
+ }
+
+ function end(endType){
+ parent._scrollSettings = null;
+
+ if(parent.parentElement && parent.parentElement._scrollSettings){
+ parent.parentElement._scrollSettings.end(endType);
+ }
+
+ if(settings.debug){
+ console.log('Scrolling ended with type', endType, 'for', parent);
+ }
+
+ callback(endType);
+ if(cancelHandler){
+ parent.removeEventListener('touchstart', cancelHandler, passiveOptions);
+ parent.removeEventListener('wheel', cancelHandler, passiveOptions);
+ }
+ }
+
+ var maxSynchronousAlignments = settings.maxSynchronousAlignments;
+
+ if(maxSynchronousAlignments == null){
+ maxSynchronousAlignments = 3;
+ }
+
+ parent._scrollSettings = {
+ startTime: now,
+ endIterations: 0,
+ target: target,
+ time: settings.time,
+ ease: settings.ease,
+ align: settings.align,
+ isWindow: settings.isWindow || defaultIsWindow,
+ maxSynchronousAlignments: maxSynchronousAlignments,
+ end: end,
+ scrollAncestor
+ };
+
+ if(!('cancellable' in settings) || settings.cancellable){
+ cancelHandler = end.bind(null, CANCELED);
+ parent.addEventListener('touchstart', cancelHandler, passiveOptions);
+ parent.addEventListener('wheel', cancelHandler, passiveOptions);
+ }
+
+ if(idle){
+ animate(parent);
+ }
+
+ return cancelHandler
+ }
+
+ function defaultIsScrollable(element){
+ return (
+ 'pageXOffset' in element ||
+ (
+ element.scrollHeight !== element.clientHeight ||
+ element.scrollWidth !== element.clientWidth
+ ) &&
+ getComputedStyle(element).overflow !== 'hidden'
+ );
+ }
+
+ function defaultValidTarget(){
+ return true;
+ }
+
+ function findParentElement(el){
+ if (el.assignedSlot) {
+ return findParentElement(el.assignedSlot);
+ }
+
+ if (el.parentElement) {
+ if(el.parentElement.tagName.toLowerCase() === 'body'){
+ return el.parentElement.ownerDocument.defaultView || el.parentElement.ownerDocument.ownerWindow;
+ }
+ return el.parentElement;
+ }
+
+ if (el.getRootNode){
+ var parent = el.getRootNode();
+ if(parent.nodeType === 11) {
+ return parent.host;
+ }
+ }
+ }
+
+ var scrollIntoView = function(target, settings, callback){
+ if(!target){
+ return;
+ }
+
+ if(typeof settings === 'function'){
+ callback = settings;
+ settings = null;
+ }
+
+ if(!settings){
+ settings = {};
+ }
+
+ settings.time = isNaN(settings.time) ? 1000 : settings.time;
+ settings.ease = settings.ease || function(v){return 1 - Math.pow(1 - v, v / 2);};
+ settings.align = settings.align || {};
+
+ var parent = findParentElement(target),
+ parents = 1;
+
+ function done(endType){
+ parents--;
+ if(!parents){
+ callback && callback(endType);
+ }
+ }
+
+ var validTarget = settings.validTarget || defaultValidTarget;
+ var isScrollable = settings.isScrollable;
+
+ if(settings.debug){
+ console.log('About to scroll to', target);
+
+ if(!parent){
+ console.error('Target did not have a parent, is it mounted in the DOM?');
+ }
+ }
+
+ var scrollingElements = [];
+
+ while(parent){
+ if(settings.debug){
+ console.log('Scrolling parent node', parent);
+ }
+
+ if(validTarget(parent, parents) && (isScrollable ? isScrollable(parent, defaultIsScrollable) : defaultIsScrollable(parent))){
+ parents++;
+ scrollingElements.push(parent);
+ }
+
+ parent = findParentElement(parent);
+
+ if(!parent){
+ done(COMPLETE);
+ break;
+ }
+ }
+
+ return scrollingElements.reduce((cancel, parent, index) => transitionScrollTo(target, parent, settings, scrollingElements[index + 1], done), null);
};
function assert(assertion, message) {
@@ -625,9 +625,9 @@ var Tourguide = (function () {
})).concat([0]));
}
- function t$1(t){return t.split("-")[0]}function e$1(t){return t.split("-")[1]}function n$2(e){return ["top","bottom"].includes(t$1(e))?"x":"y"}function i$1(t){return "y"===t?"height":"width"}function r$2(r,o,a){let{reference:l,floating:s}=r;const c=l.x+l.width/2-s.width/2,f=l.y+l.height/2-s.height/2,u=n$2(o),m=i$1(u),g=l[m]/2-s[m]/2,d="x"===u;let p;switch(t$1(o)){case"top":p={x:c,y:l.y-s.height};break;case"bottom":p={x:c,y:l.y+l.height};break;case"right":p={x:l.x+l.width,y:f};break;case"left":p={x:l.x-s.width,y:f};break;default:p={x:l.x,y:l.y};}switch(e$1(o)){case"start":p[u]-=g*(a&&d?-1:1);break;case"end":p[u]+=g*(a&&d?-1:1);}return p}const o$1=async(t,e,n)=>{const{placement:i="bottom",strategy:o="absolute",middleware:a=[],platform:l}=n,s=a.filter(Boolean),c=await(null==l.isRTL?void 0:l.isRTL(e));let f=await l.getElementRects({reference:t,floating:e,strategy:o}),{x:u,y:m}=r$2(f,i,c),g=i,d={},p=0;for(let n=0;n"+n(r(p).replace(/^\n+|\n+$/g,""))+"
":(p=g[6])?(p.match(/\./)&&(g[5]=g[5].replace(/^\d+/gm,"")),s=t(n(g[5].replace(/^\s*[>*+.-]/gm,""))),">"==p?p="blockquote":(p=p.match(/\./)?"ol":"ul",s=s.replace(/^(.*)(\n|$)/gm,""+r(g[16])+"
":(g[17]||g[1])&&(o=f(g[17]||"--"))),h+=l,h+=o;return (h+a.substring(d)+$()).replace(/^\n+|\n+$/g,"")}
@@ -661,13 +661,13 @@ var Tourguide = (function () {
};
function positionTooltip(target, tooltipEl, arrowEl, context) {
//context._options.root
- O(target, tooltipEl, {
+ V(target, tooltipEl, {
// placement: 'bottom-start',
middleware: [
// flip(),
v$1({
alignment: 'bottom-start'
- }), T$1(function (props) {
+ }), O$1(function (props) {
var side = props.placement.split("-")[0];
switch (side) {
case "top":
@@ -790,10 +790,12 @@ var Tourguide = (function () {
}
var tooltip = this.tooltip = u$2("");
if (this.width) setStyle(tooltip, {
- width: this.width
+ width: this.width + "px",
+ maxWidth: this.width + "px"
});
if (this.height) setStyle(tooltip, {
- height: this.height
+ height: this.height + "px",
+ maxHeight: this.height + "px"
});
var tooltipinner = u$2(""));
var container = u$2("");
diff --git a/tourguide.min.js b/tourguide.min.js
index fabb47b..91db492 100644
--- a/tourguide.min.js
+++ b/tourguide.min.js
@@ -1 +1 @@
-!function(){function t(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function e(e){for(var n=1;n"+jt(Ot(s).replace(/^\n+|\n+$/g,""))+"
":(s=i[6])?(s.match(/\./)&&(i[5]=i[5].replace(/^\d+/gm,"")),r=Tt(jt(i[5].replace(/^\s*[>*+.-]/gm,""))),">"==s?s="blockquote":(s=s.match(/\./)?"ol":"ul",r=r.replace(/^(.*)(\n|$)/gm,""+Ot(i[16])+"
":(i[17]||i[1])&&(n=p(i[17]||"--"))),a+=o,a+=n;return(a+t.substring(d)+h()).replace(/^\n+|\n+$/g,"")}var At=function(){function t(i,r){var s,u=this;if(o(this,t),this.active=!1,this.first=!1,this.last=!1,this.container=null,this.highlight=null,this.tooltip=null,this.arrow=null,this.context=r,this._target=null,this._timerHandler=null,this._scrollCancel=null,i instanceof HTMLElement?(this.target=i,s=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=t.split(";"),i=e({},n);return o.forEach((function(t){var e=(t||"").split(":");i[(e[0]||"").trim()]=(e[1]||"").trim()})),i}(h(i).data("tour"))):(s=i,this._selector=i.selector),k(s.hasOwnProperty("title"),"missing required step parameter: title\n"+JSON.stringify(s,null,2)+"\nsee this doc for more detail: https://github.com/LikaloLLC/tourguide.js#json-based-approach"),k(s.hasOwnProperty("content"),"missing required step parameter: content\n"+JSON.stringify(s,null,2)+"\nsee this doc for more detail: https://github.com/LikaloLLC/tourguide.js#json-based-approach"),this.index=parseInt(s.step),this.title=s.title,this.content=Tt(s.content),this.image=s.image,this.width=s.width,this.height=s.height,this.layout=s.layout||"vertical",this.placement=s.placement||"bottom",this.overlay=!1!==s.overlay,this.navigation=!1!==s.navigation,s.image&&r.options.preloadimages&&!/^data:/i.test(s.image)){var l=new Image;l.onerror=function(){console.error(new Error("Invalid image URL: ".concat(s.image))),u.image=null},l.src=this.image}this.actions=[],s.actions&&(Array.isArray(s.actions)?this.actions=s.actions:console.error(new Error("actions must be array but got ".concat(n(s.actions)))))}return r(t,[{key:"el",get:function(){var t=this;if(!this.container){var e=h('"+Lt(At(s).replace(/^\n+|\n+$/g,""))+"
":(s=i[6])?(s.match(/\./)&&(i[5]=i[5].replace(/^\d+/gm,"")),r=Nt(Lt(i[5].replace(/^\s*[>*+.-]/gm,""))),">"==s?s="blockquote":(s=s.match(/\./)?"ol":"ul",r=r.replace(/^(.*)(\n|$)/gm,""+At(i[16])+"
":(i[17]||i[1])&&(n=p(i[17]||"--"))),l+=o,l+=n;return(l+t.substring(d)+h()).replace(/^\n+|\n+$/g,"")}var Rt=function(){function t(i,r){var s,u=this;if(o(this,t),this.active=!1,this.first=!1,this.last=!1,this.container=null,this.highlight=null,this.tooltip=null,this.arrow=null,this.context=r,this._target=null,this._timerHandler=null,this._scrollCancel=null,i instanceof HTMLElement?(this.target=i,s=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=t.split(";"),i=e({},n);return o.forEach((function(t){var e=(t||"").split(":");i[(e[0]||"").trim()]=(e[1]||"").trim()})),i}(h(i).data("tour"))):(s=i,this._selector=i.selector),k(s.hasOwnProperty("title"),"missing required step parameter: title\n"+JSON.stringify(s,null,2)+"\nsee this doc for more detail: https://github.com/LikaloLLC/tourguide.js#json-based-approach"),k(s.hasOwnProperty("content"),"missing required step parameter: content\n"+JSON.stringify(s,null,2)+"\nsee this doc for more detail: https://github.com/LikaloLLC/tourguide.js#json-based-approach"),this.index=parseInt(s.step),this.title=s.title,this.content=Nt(s.content),this.image=s.image,this.width=s.width,this.height=s.height,this.layout=s.layout||"vertical",this.placement=s.placement||"bottom",this.overlay=!1!==s.overlay,this.navigation=!1!==s.navigation,s.image&&r.options.preloadimages&&!/^data:/i.test(s.image)){var a=new Image;a.onerror=function(){console.error(new Error("Invalid image URL: ".concat(s.image))),u.image=null},a.src=this.image}this.actions=[],s.actions&&(Array.isArray(s.actions)?this.actions=s.actions:console.error(new Error("actions must be array but got ".concat(n(s.actions)))))}return r(t,[{key:"el",get:function(){var t=this;if(!this.container){var e=h('"+n(r(p).replace(/^\n+|\n+$/g,""))+"
":(p=g[6])?(p.match(/\./)&&(g[5]=g[5].replace(/^\d+/gm,"")),s=t(n(g[5].replace(/^\s*[>*+.-]/gm,""))),">"==p?p="blockquote":(p=p.match(/\./)?"ol":"ul",s=s.replace(/^(.*)(\n|$)/gm,""+r(g[16])+"
":(g[17]||g[1])&&(o=f(g[17]||"--"))),h+=l,h+=o;return (h+a.substring(d)+$()).replace(/^\n+|\n+$/g,"")}
@@ -664,13 +664,13 @@
};
function positionTooltip(target, tooltipEl, arrowEl, context) {
//context._options.root
- O(target, tooltipEl, {
+ V(target, tooltipEl, {
// placement: 'bottom-start',
middleware: [
// flip(),
v$1({
alignment: 'bottom-start'
- }), T$1(function (props) {
+ }), O$1(function (props) {
var side = props.placement.split("-")[0];
switch (side) {
case "top":
@@ -793,10 +793,12 @@
}
var tooltip = this.tooltip = u$2("");
if (this.width) setStyle(tooltip, {
- width: this.width
+ width: this.width + "px",
+ maxWidth: this.width + "px"
});
if (this.height) setStyle(tooltip, {
- height: this.height
+ height: this.height + "px",
+ maxHeight: this.height + "px"
});
var tooltipinner = u$2(""));
var container = u$2("");