web-story
Version:
Library for building tours on your front page (Step-by-step guide and feature introduction)
3 lines (2 loc) • 17.3 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.WebStory=t.WebStory||{})}(this,function(t){"use strict";function e(t,e){document.body&&(document.body.appendChild(t),e&&n(t,e))}function n(t,e){var n=t.getBoundingClientRect(),o=t.style.top?parseInt(t.style.top):n.bottom,i=t.style.left?parseInt(t.style.left)+n.width:n.right;window.scrollTo(i-2*e,o-2*e)}function o(t,e){for(var n=Object.keys(e),o=0;o<n.length;o++){var i=n[o];void 0!==t.style[i]&&null!==t.style[i]&&(t.style[i]=e[i])}}function i(t){var e=document.createElement("template");return e.innerHTML=t,e.content.firstChild}function s(t,e){var n=100;return new Promise(function(o,i){function s(){r>=e/n&&i("element has not been found and the timeout is passed"),setTimeout(function(){var e=document.querySelector(t);e?o(e):(r++,s())},n)}var r=0;s()})}function r(t){return t?typeof t===f:null}function a(){function t(t){return t<9?"0"+t:t}var e=new Date;return e.getFullYear()+"-"+(e.getMonth()+1)+"-"+e.getDate()+"-"+t(e.getHours()+1)+":"+t(e.getMinutes()+1)}function l(t){return null===t}function c(t){return t?typeof t===m:null}function u(t){return t?typeof t===v:null}function p(t){return function(e){for(var n=Object.keys(e),o=0;o<n.length;o++){var i=new RegExp(p.interpolateReg.replace("key",n[o]),"g");t=t.replace(i,e[n[o]])}return t}}var d=function(){function t(t,e){this.isFirstCount=e,this.items=t,this.currentIndex=-1}return t.prototype.moveNext=function(){return this.currentIndex+1>=this.items.length?null:{isLast:++this.currentIndex>=this.items.length-1,data:this.items[this.currentIndex]}},t.prototype.moveBack=function(){return this.currentIndex<=0?null:(this.currentIndex--,{isLast:this.isFirstCount?1===this.currentIndex:0===this.currentIndex,data:this.items[this.currentIndex]})},t}(),h=2,m="boolean",f="function",v="string";p.interpolateReg="{{key}}";var y=function(){function t(t,e,n){this.isAutoScrolling=n,this.sizePrefix="px",this.defaultSize={width:100,height:100},this.marginFromContainer=25,this.containerClass="story-tool-tip-container ",this.timeout=e||5e3,this.htmlTemaplte=this.setTooltipTemplate(t),this.isAutoScrolling=!c(n)||n}return t.prototype.setTooltip=function(t,e){var n=this;return new Promise(function(o,i){n.calculateElementLocationAndSizes(t).then(function(t){var i=n.getTooltipLocaiton(t,e);null!==i&&(n.currentTooltipId=n.generateTooltipId(i),n.appandTooltip(i,e),o(1))},function(t){i(t)})})},t.prototype.resetTooltip=function(t,e){return this.removeTooltip(),this.setTooltip(t,e)},t.prototype.removeTooltip=function(){var t=document.getElementById(this.currentTooltipId);t&&this.removeFromDom(t)},t.prototype.distroy=function(){this.removeTooltip()},t.prototype.calculateElementLocationAndSizes=function(t){var e=this;return new Promise(function(n,o){s(t,e.timeout).then(function(t){n({location:e.calculateElementLocation(t),size:e.calculateElementSize(t)})},function(t){o(t)})})},t.prototype.calculateElementLocation=function(t){if(t){var e=t.getBoundingClientRect(),n=void 0,o=void 0,i=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop,s=document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft;return o=e.top+i,n=e.left+s,{left:n,top:o}}return null},t.prototype.calculateElementSize=function(t){if(t){var e=t.getBoundingClientRect();return{height:e.height,width:e.width}}},t.prototype.getTooltipLocaiton=function(t,e){var n=this.measureSize(this.htmlTemaplte);if(null!==n)switch(e){case"right":return{top:t.location.top-(n.height-t.size.height)/2,left:t.location.left+(t.size.width+this.marginFromContainer)};case"left":return{top:t.location.top-(n.height-t.size.height)/2,left:t.location.left-(n.width+this.marginFromContainer)};case"top":return{top:t.location.top-(n.height+this.marginFromContainer),left:this.getPercentage(t.size.width,n.width)<6?t.location.left-.05*n.width:t.location.left};case"bottom":return{top:t.location.top+(t.size.height+this.marginFromContainer),left:this.getPercentage(t.size.width,n.width)<6?t.location.left-.05*n.width:t.location.left};default:return null}return null},t.prototype.getPercentage=function(t,e){return 100*Math.abs(t/e)},t.prototype.measureSize=function(t){if(null===t)return null;var n=i(t);if(n.style.position="absolute",n){e(n);var o=document.getElementsByClassName(this.containerClass)[0].getBoundingClientRect(),s={height:o.height,width:o.width>700?700:o.width};return n.remove(),s}},t.prototype.generateTooltipId=function(t){return a()+"|"+t.top+"|"+t.left},t.prototype.setTooltipTemplate=function(t){return'<div class="'+this.containerClass+'">'+t+"</div>"},t.prototype.appandTooltip=function(t,n){var s=i(this.htmlTemaplte);o(s,{position:"absolute",left:""+t.left+this.sizePrefix,top:""+t.top+this.sizePrefix,zIndex:9999,maxWidth:"700"+this.sizePrefix}),s.id=this.currentTooltipId,s.classList.add(n),e(s,this.isAutoScrolling?this.marginFromContainer:null)},t.prototype.removeFromDom=function(t){t.remove()},t}(),g=function(){function t(t){this.containerMaskClass="story-modal-container-mask",this.containerContentClass="story-modal-container",this.currentModelId=this.generateId(),this.modelTemplate=this.setTemplate(t)}return t.prototype.showModal=function(){return e(i(this.modelTemplate)),new Promise(function(t,e){t(h)})},t.prototype.removeModal=function(){document.getElementById(this.currentModelId).remove()},t.prototype.setTemplate=function(t){return'<div id="'+this.currentModelId+'" class="'+this.containerMaskClass+'">\n <div class="'+this.containerContentClass+'">'+t+"</div>\n </div>"},t.prototype.generateId=function(){return"story-modal-"+a()},t}(),C=function(){function t(t,e){this.renderTimeout=t,this.isAutoScrolling=e,this.renderTimeout=t,this.isAutoScrolling=e}return t.prototype.setPage=function(t){if(this.tooltip&&this.distroyTooltipInstance(),this.modalCreator&&this.distroyModal(),t)if(t.pageContainer){if(e=this.createTemplate(t.data,t.template))return this.tooltip=new y(e,this.renderTimeout),this.currentPage=t,this.tooltip.setTooltip(t.pageContainer.cssSelector,t.pageContainer.position)}else{var e=this.createTemplate(t.data,t.template);if(e)return this.modalCreator=new g(e),this.modalCreator.showModal()}},t.prototype.resetPage=function(){try{return this.tooltip.resetTooltip(this.currentPage.pageContainer.cssSelector,this.currentPage.pageContainer.position)}catch(t){return null}},t.prototype.distroyTooltipInstance=function(){this.tooltip.distroy(),this.tooltip=void 0},t.prototype.distroyModal=function(){this.modalCreator.removeModal(),this.modalCreator=void 0},t.prototype.createTemplate=function(t,e){try{return p(e)(t)}catch(t){return console.error("cant create template the data and the template is not suitable"),null}},t}(),k=function(){function t(t,e,n){this.isHasModal=this.setPageDataWithCurrentPageNumber(t),this.storage=new d(t,this.isHasModal),this.viewer=new C(e,n)}return t.prototype.moveNext=function(){var t=this.storage.moveNext();return this.viewer.setPage(t.data).then(function(e){return{viewType:e,isLast:t.isLast,isDefault:t.data.isDefault}})},t.prototype.resetPage=function(){return this.viewer.resetPage()},t.prototype.moveBack=function(){var t=this.storage.moveBack();return this.viewer.setPage(t.data).then(function(e){return{viewType:e,isLast:t.isLast,isDefault:t.data.isDefault}})},t.prototype.skipStory=function(){this.endStory()},t.prototype.endStory=function(){this.storage=void 0,this.viewer.setPage(null),this.viewer=void 0},t.prototype.setPageDataWithCurrentPageNumber=function(t){for(var e=!1,n=0;n<t.length;n++){if(!t[n].pageContainer){e=!0;break}t[n].data.currentPageNumber=n+1,t[n].data.totalPages=t.length}if(e)for(n=1;n<t.length;n++)t[n].data.currentPageNumber=n,t[n].data.totalPages=t.length-1;return e},t}(),b='<div class="welcome-page">\n <div class="flex wp-container">\n <div class="up flex">\n <div class="up-content">\n <div class="header flex">\n <span>{{header}}</span>\n <div class="subHeader flex">{{subHeader}}</div>\n </div>\n </div>\n </div>\n <div class="down flex">\n <div class="flex start-section">\n <div class="start-story"><span>START TOUR</span></div>\n </div>\n <div class="flex bye-actions">\n <div>\n <input class="story-neverTell" type="checkbox"> <span class="story-neverTell-label">Do not suggest tours for this page</span>\n </div>\n <a href="#" class="story-skip"><span>Skip Tour</span></a>\n </div>\n </div>\n </div>\n</div>\n',T=function(){function t(t){var e=this;if(this.startStoryCallCount=0,this.moveNextStoryCallCount=0,this.startStory=function(){if(!e.isNeverTell()){if(e.startStoryCallCount++,0===e.moveNextStoryCallCount&&e.startStoryCallCount<=1)return e.storyContainer.moveNext().then(function(t){t.viewType===h&&(e.setClickLisenerByClassName("start-story",e.startFirstPage),e.setClickLisenerByClassName("story-skip",e.skip),e.setClickLisenerByClassName("story-neverTell",e.setNeverTell))});console.error("you calling moveNext before start or you called startStory already")}},this.endStory=function(t){t&&t.preventDefault(),e.lifeStyleCallbacks&&r(e.lifeStyleCallbacks.afterEnding)&&e.lifeStyleCallbacks.afterEnding(),e.storyContainer.endStory(),window.removeEventListener("resize",e.onResize),e.removeAllStoryAction()},this.startFirstPage=function(){return e.storyContainer.moveNext().then(function(t){e.isLastPage=t.isLast,e.setStoryActions(e.isLastPage),e.configuration.isVisableMode&&!t.isDefault?e.hideBackStoryBtn():e.disableByClassName("story-back")})},this.moveNext=function(t){t.preventDefault(),e.lifeStyleCallbacks&&r(e.lifeStyleCallbacks.preMoveNext)&&e.lifeStyleCallbacks.preMoveNext(),e.isLastPage||(e.moveNextStoryCallCount++,e.removeOldStoryAction(),e.storyContainer.moveNext().then(function(t){e.isLastPage=t.isLast,e.isFirstPage=!1,e.setStoryActions(e.isLastPage)}))},this.moveBack=function(t){t.preventDefault(),e.lifeStyleCallbacks&&r(e.lifeStyleCallbacks.preMoveBack)&&e.lifeStyleCallbacks.preMoveBack(),e.isFirstPage||e.storyContainer.moveBack().then(function(t){e.isFirstPage=t.isLast,e.isLastPage=!1,e.setStoryActions(),e.isFirstPage&&(e.configuration.isVisableMode&&!t.isDefault?e.hideBackStoryBtn():e.disableByClassName("story-back"))})},this.skip=function(t){t.preventDefault(),e.lifeStyleCallbacks&&r(e.lifeStyleCallbacks.preSkip)&&e.lifeStyleCallbacks.preSkip(),e.storyContainer.skipStory()},this.setNeverTell=function(t){var n=u(t.target.attributes.isChecked)?"true"===t.target.attributes.isChecked:c(t.target.checked)?t.target.checked:null;l(n)||(n?localStorage.setItem(e.getNeverTellId(),"never"):localStorage.removeItem(e.getNeverTellId()))},this.getNeverTellId=function(){var t=e.getCurrentPageName();return t?"story-never-tell-"+t:null},this.onResize=function(){e.isNeverTell()||e.storyContainer&&r(e.storyContainer.resetPage)&&e.storyContainer.resetPage().then(function(){e.isLastPage?(e.setClickLisenerByClassName("story-end",e.endStory),e.setStoryActions(!0)):e.isFirstPage?(e.setStoryActions(),e.disableByClassName("story-back")):e.setStoryActions()})},this.getCurrentPageName=t.getCurrentPageName,!r(this.getCurrentPageName)){var n="please insert page name by setting the getCurrentPageName function in the settings";throw console.error(n),new Error(n)}this.lifeStyleCallbacks=t.lifeStyleCallbacks,this.configuration=t.configuration?t.configuration:{isVisableMode:!0,isAutoScrolling:null,renderTimeout:null},window.addEventListener("resize",this.onResize,null),this.storyContainer=new k(this.setPagesWithDefaultTemplate(t.pages),this.configuration.renderTimeout,this.configuration.isAutoScrolling)}return t.prototype.neverTell=function(){localStorage.setItem(this.getNeverTellId(),"never")},t.prototype.removeNeverTell=function(){localStorage.removeItem(this.getNeverTellId())},t.prototype.isNeverTell=function(){var t=this.getNeverTellId();return t?localStorage.getItem(t):(console.error("cant start get page name please fill getCurrentPageName function"),null)},t.prototype.disableByClassName=function(t){var e=document.getElementsByClassName(t);e[0]&&e[0].attributes.setNamedItem(document.createAttribute("disabled"))},t.prototype.hideBackStoryBtn=function(){this.hideByClassName("story-back");var t=document.getElementsByClassName("story-next"),e=document.getElementsByClassName("page-counter");t&&t.length&&t[0]&&e&&e.length&&e[0]&&(t[0].classList.add("hide-back"),e[0].classList.add("no-back"))},t.prototype.hideByClassName=function(t){var e=document.getElementsByClassName(t);e[0]&&(e[0].style.display="none")},t.prototype.setStoryActions=function(t){void 0===t&&(t=!1),t?this.setClickLisenerByClassName("story-end",this.endStory):this.setClickLisenerByClassName("story-next",this.moveNext),this.setClickLisenerByClassName("story-back",this.moveBack),this.setClickLisenerByClassName("story-skip",this.skip),this.setClickLisenerByClassName("story-neverTell",this.setNeverTell)},t.prototype.removeOldStoryAction=function(){this.removeClickLisenerByClassName("story-next",this.moveNext),this.removeClickLisenerByClassName("story-back",this.moveBack),this.removeClickLisenerByClassName("story-skip",this.skip),this.removeClickLisenerByClassName("story-neverTell",this.setNeverTell)},t.prototype.removeAllStoryAction=function(){this.removeClickLisenerByClassName("story-next",this.moveNext),this.removeClickLisenerByClassName("story-back",this.moveBack),this.removeClickLisenerByClassName("story-skip",this.skip),this.removeClickLisenerByClassName("story-neverTell",this.setNeverTell),this.removeClickLisenerByClassName("story-end",this.endStory)},t.prototype.removeClickLisenerByClassName=function(t,e){var n=document.getElementsByClassName(t);n[0]&&n[0].removeEventListener("click",e)},t.prototype.setClickLisenerByClassName=function(t,e){var n=document.getElementsByClassName(t);n[0]&&n[0].addEventListener("click",e,null)},t.prototype.setPagesWithDefaultTemplate=function(t){for(var e=[],n=!1,o=0;o<t.length;o++)t[o].pageContainer||(n=!0,t[o].data.header||(t[o].data.header="Welcome to "+this.getCurrentPageName()+" Tour!"),t[o].data.subHeader||(t[o].data.subHeader=""),t[o].template?t[o].isDefault=!1:(t[o].template=b,t[o].isDefault=!0)),e.push({data:t[o].data,pageContainer:t[o].pageContainer,template:t[o].template?t[o].template:this.getDefaultTemplate(o==t.length-1),isDefault:!t[o].template});return n||e.unshift({data:{header:"Welcome to "+this.getCurrentPageName()+" Tour!",subHeader:""},pageContainer:null,template:b}),e},t.prototype.getDefaultTemplate=function(t){return t?'<div class="purple-flower">\n\t<div class="flex header">{{header}}</div>\n\t<div class="flex content">\n\t\t<span>{{content}}</span>\n\t</div>\n\t<div flex class="story-actions">\n\t\t<span class="page-counter">{{currentPageNumber}}/{{totalPages}}</span>\n\t\t<button class="story-back flex-auto">\n\t\t\t<div class="btn-content-left">\n\t\t\t\t<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22">\n\t\t\t\t\t<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>\n\t\t\t\t</svg>\n\t\t\t\t<span>Back</span>\n\t\t\t</div>\n\t\t</button>\n\t\t<button class="story-end flex-auto">\n\t\t\t<div class="btn-content-right">\n\t\t\t\t<span>End</span>\n\t\t\t\t<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22">\n\t\t\t\t\t<path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</button>\n\t</div>\n\t<div class="seperator"></div>\n\t<div class="fotter">\n\t\t<div>\n\t\t\t<input class="story-neverTell" type="checkbox"> <span>Do not suggest tours for this page</span>\n\t\t</div>\n\t\t<a href="#" class="story-skip"><span>Skip Tour</span></a>\n\t</div>\n</div>\n':'<div class="purple-flower">\n\t<div class="flex header">{{header}}</div>\n\t<div class="flex content">\n\t\t<span>{{content}}</span>\n\t</div>\n\t<div flex class="story-actions">\n\t\t<span class="page-counter">{{currentPageNumber}}/{{totalPages}}</span>\n\t\t<button class="story-back flex-auto">\n\t\t\t<div class="btn-content-left">\n\t\t\t\t<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22">\n\t\t\t\t\t<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>\n\t\t\t\t</svg>\n\t\t\t\t<span>Back</span>\n\t\t\t</div>\n\t\t</button>\n\t\t<button class="story-next flex-auto">\n\t\t\t<div class="btn-content-right">\n\t\t\t\t<span>Next</span>\n\t\t\t\t<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22">\n\t\t\t\t\t<path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</button>\n\t</div>\n\t<div class="seperator"></div>\n\t<div class="fotter">\n\t\t<div>\n\t\t\t<input class="story-neverTell" type="checkbox"> <span>Do not suggest tours for this page</span>\n\t\t</div>\n\t\t<a href="#" class="story-skip"><span>Skip Tour</span></a>\n\t</div>\n</div>\n'},t}();t.WebStory=T,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=index.js.map