web-story
Version:
Library for building tours on your front page (Step-by-step guide and feature introduction)
699 lines (681 loc) • 32.4 kB
JavaScript
/* web-story 1.3.6 */
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.WebStory = global.WebStory || {})));
}(this, (function (exports) { 'use strict';
var StorageContainer = (function () {
function StorageContainer(itemList, isFirstCount) {
this.isFirstCount = isFirstCount;
this.items = itemList;
this.currentIndex = -1;
}
StorageContainer.prototype.moveNext = function () {
if ((this.currentIndex + 1) >= this.items.length)
return null;
//handle case first time then isDone only in case there is less or equal then 1 item in the itemList
this.currentIndex++;
var page = {
isLast: this.currentIndex >= (this.items.length - 1),
data: this.items[this.currentIndex]
};
return page;
};
StorageContainer.prototype.moveBack = function () {
if (this.currentIndex <= 0)
return null;
this.currentIndex--;
var page = {
isLast: this.isFirstCount ? this.currentIndex === 1 : this.currentIndex === 0,
data: this.items[this.currentIndex]
};
return page;
};
return StorageContainer;
}());
var Left = "left";
var Right = "right";
var Top = "top";
var Bottom = "bottom";
var ToolTip = 1;
var Modal = 2;
function appandToBody(element, marginFromElement) {
if (document.body) {
document.body.appendChild(element);
if (marginFromElement)
setScrollPosition(element, marginFromElement);
}
}
function setScrollPosition(element, margin) {
var elementRectInfo = element.getBoundingClientRect();
var elementBottomPosition = element.style.top ? parseInt(element.style.top) : elementRectInfo.bottom;
var elementRightPosition = element.style.left ? (parseInt(element.style.left) + elementRectInfo.width) : elementRectInfo.right;
window.scrollTo(elementRightPosition - (margin * 2), elementBottomPosition - (margin * 2));
}
function setStyle(element, styleObj) {
var keys = Object.keys(styleObj);
for (var i = 0; i < keys.length; i++) {
var styleName = keys[i];
if (element.style[styleName] !== undefined && element.style[styleName] !== null) {
element.style[styleName] = styleObj[styleName];
}
}
}
function getElementByHtmlTemplate(htmlTemplate) {
var template = document.createElement('template');
template.innerHTML = htmlTemplate;
return template.content.firstChild;
}
function waitForElement(selector, timeout) {
var timeToTryAgain = 100;
return new Promise(function (resolve, reject) {
var executeCount = 0;
function start() {
if (executeCount >= (timeout / timeToTryAgain))
reject("element has not been found and the timeout is passed");
setTimeout(function () {
var element = document.querySelector(selector);
if (element) {
resolve(element);
return;
}
else {
executeCount++;
start();
}
}, timeToTryAgain);
}
start();
});
}
var boolType = "boolean";
var funType = "function";
var stringType = "string";
function isFunction(obj) {
if (!obj)
return null;
return typeof obj === funType;
}
function getFullDateFormated() {
function getTime(timeDigit) {
return timeDigit < 9 ? "0" + timeDigit : timeDigit;
}
var date = new Date();
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + "-" + getTime(date.getHours() + 1) + ":" + getTime(date.getMinutes() + 1);
}
function isNull(obj) {
return obj === null;
}
function isBoolean(obj) {
if (!obj)
return null;
return typeof obj === boolType;
}
function isString(obj) {
if (!obj)
return null;
return typeof obj === stringType;
}
function getTemplate(htmlTemplate) {
return function (data) {
var keys = Object.keys(data);
for (var i = 0; i < keys.length; i++) {
var reg = new RegExp(getTemplate.interpolateReg.replace("key", keys[i]), 'g');
htmlTemplate = htmlTemplate.replace(reg, data[keys[i]]);
}
return htmlTemplate;
};
}
getTemplate.interpolateReg = "{{key}}";
var MAX_WIDTH = 700;
var StoryTooltip = (function () {
function StoryTooltip(template, timeout, isAutoScrolling) {
this.isAutoScrolling = isAutoScrolling;
this.sizePrefix = "px";
this.defaultSize = {
width: 100,
height: 100
};
this.marginFromContainer = 25;
this.containerClass = "story-tool-tip-container ";
this.timeout = timeout ? timeout : 5000;
this.htmlTemaplte = this.setTooltipTemplate(template);
this.isAutoScrolling = isBoolean(isAutoScrolling) ? isAutoScrolling : true;
}
StoryTooltip.prototype.setTooltip = function (selector, position) {
var _this = this;
return new Promise(function (resolve, reject) {
_this.calculateElementLocationAndSizes(selector).then(function (elementData) {
var tooltipLocation = _this.getTooltipLocaiton(elementData, position);
if (tooltipLocation !== null) {
_this.currentTooltipId = _this.generateTooltipId(tooltipLocation);
_this.appandTooltip(tooltipLocation, position);
resolve(ToolTip);
}
}, function (error) {
reject(error);
});
});
};
StoryTooltip.prototype.resetTooltip = function (selector, position) {
this.removeTooltip();
return this.setTooltip(selector, position);
};
StoryTooltip.prototype.removeTooltip = function () {
var tooltip = document.getElementById(this.currentTooltipId);
if (tooltip) {
this.removeFromDom(tooltip);
}
};
StoryTooltip.prototype.distroy = function () {
this.removeTooltip();
};
//locations and size(calculation)
StoryTooltip.prototype.calculateElementLocationAndSizes = function (selector) {
var _this = this;
return new Promise(function (resolve, reject) {
waitForElement(selector, _this.timeout).then(function (element) {
resolve({
location: _this.calculateElementLocation(element),
size: _this.calculateElementSize(element)
});
}, function (error) {
reject(error);
});
});
};
StoryTooltip.prototype.calculateElementLocation = function (element) {
if (element) {
var rect = element.getBoundingClientRect();
var elementLeft = void 0, elementTop = void 0; //x and y
var scrollTop = document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft ?
document.documentElement.scrollLeft : document.body.scrollLeft;
elementTop = rect.top + scrollTop;
elementLeft = rect.left + scrollLeft;
return {
left: elementLeft,
top: elementTop
};
}
return (null);
};
StoryTooltip.prototype.calculateElementSize = function (element) {
if (element) {
var rect = element.getBoundingClientRect();
return {
height: rect.height,
width: rect.width
};
}
};
StoryTooltip.prototype.getTooltipLocaiton = function (containerData, position) {
var tooltipSize = this.measureSize(this.htmlTemaplte);
if (tooltipSize !== null) {
switch (position) {
case Right:
return {
top: containerData.location.top - ((tooltipSize.height - containerData.size.height) / 2),
left: containerData.location.left + (containerData.size.width + this.marginFromContainer)
};
case Left:
return {
top: containerData.location.top - ((tooltipSize.height - containerData.size.height) / 2),
left: containerData.location.left - (tooltipSize.width + this.marginFromContainer)
};
case Top:
return {
top: containerData.location.top - (tooltipSize.height + this.marginFromContainer),
left: this.getPercentage(containerData.size.width, tooltipSize.width) < 6 ? containerData.location.left - (tooltipSize.width * 0.05) : containerData.location.left
};
case Bottom:
return {
top: containerData.location.top + (containerData.size.height + this.marginFromContainer),
left: this.getPercentage(containerData.size.width, tooltipSize.width) < 6 ? containerData.location.left - (tooltipSize.width * 0.05) : containerData.location.left
};
default:
return null;
}
}
return null;
};
StoryTooltip.prototype.getPercentage = function (small, big) {
return Math.abs(small / big) * 100;
};
StoryTooltip.prototype.measureSize = function (template) {
if (template === null)
return null;
var element = getElementByHtmlTemplate(template);
element.style.position = "absolute";
if (element) {
appandToBody(element);
var rectInfo = document.getElementsByClassName(this.containerClass)[0].getBoundingClientRect();
var size = {
height: rectInfo.height,
width: rectInfo.width > MAX_WIDTH ? MAX_WIDTH : rectInfo.width
};
element.remove();
return size;
}
};
//others
StoryTooltip.prototype.generateTooltipId = function (tooltipLocation) {
return getFullDateFormated() + "|" + tooltipLocation.top + "|" + tooltipLocation.left;
};
StoryTooltip.prototype.setTooltipTemplate = function (tooltipContentTemplate) {
return "<div class=\"" + this.containerClass + "\">" + tooltipContentTemplate + "</div>";
};
//DOM Manipulation
StoryTooltip.prototype.appandTooltip = function (tooltipLocation, position) {
var toolTip = getElementByHtmlTemplate(this.htmlTemaplte);
setStyle(toolTip, {
position: 'absolute',
left: "" + tooltipLocation.left + this.sizePrefix,
top: "" + tooltipLocation.top + this.sizePrefix,
zIndex: 9999,
maxWidth: "" + MAX_WIDTH + this.sizePrefix
});
toolTip.id = this.currentTooltipId;
toolTip.classList.add(position);
appandToBody(toolTip, this.isAutoScrolling ? this.marginFromContainer : null);
};
StoryTooltip.prototype.removeFromDom = function (element) {
element.remove();
};
return StoryTooltip;
}());
var StoryModalCreator = (function () {
function StoryModalCreator(htmlTemplate) {
this.containerMaskClass = "story-modal-container-mask";
this.containerContentClass = "story-modal-container";
this.currentModelId = this.generateId();
this.modelTemplate = this.setTemplate(htmlTemplate);
}
StoryModalCreator.prototype.showModal = function () {
var modal = getElementByHtmlTemplate(this.modelTemplate);
appandToBody(modal);
return new Promise(function (resolve, reject) {
resolve(Modal);
});
};
StoryModalCreator.prototype.removeModal = function () {
document.getElementById(this.currentModelId).remove();
};
StoryModalCreator.prototype.setTemplate = function (modalContentTemplate) {
return "<div id=\"" + this.currentModelId + "\" class=\"" + this.containerMaskClass + "\">\n <div class=\"" + this.containerContentClass + "\">" + modalContentTemplate + "</div>\n </div>";
};
StoryModalCreator.prototype.generateId = function () {
return "story-modal-" + getFullDateFormated();
};
return StoryModalCreator;
}());
var StoryViewer = (function () {
function StoryViewer(renderTimeout, isAutoScrolling) {
this.renderTimeout = renderTimeout;
this.isAutoScrolling = isAutoScrolling;
this.renderTimeout = renderTimeout;
this.isAutoScrolling = isAutoScrolling;
}
StoryViewer.prototype.setPage = function (page) {
//remove old tool tip is has any
if (this.tooltip)
this.distroyTooltipInstance();
if (this.modalCreator)
this.distroyModal();
if (page) {
if (page.pageContainer) {
//tooltip
var fullHtmlTemplate = this.createTemplate(page.data, page.template);
if (fullHtmlTemplate) {
this.tooltip = new StoryTooltip(fullHtmlTemplate, this.renderTimeout);
this.currentPage = page;
return this.tooltip.setTooltip(page.pageContainer.cssSelector, page.pageContainer.position);
}
}
else {
//modal
var fullHtmlTemplate = this.createTemplate(page.data, page.template);
if (fullHtmlTemplate) {
this.modalCreator = new StoryModalCreator(fullHtmlTemplate);
return this.modalCreator.showModal();
}
}
}
};
StoryViewer.prototype.resetPage = function () {
try {
return this.tooltip.resetTooltip(this.currentPage.pageContainer.cssSelector, this.currentPage.pageContainer.position);
}
catch (e) {
return null;
}
};
StoryViewer.prototype.distroyTooltipInstance = function () {
this.tooltip.distroy();
this.tooltip = undefined;
};
StoryViewer.prototype.distroyModal = function () {
this.modalCreator.removeModal();
this.modalCreator = undefined;
};
StoryViewer.prototype.createTemplate = function (data, htmlTemplate) {
try {
return getTemplate(htmlTemplate)(data);
}
catch (error) {
console.error("cant create template the data and the template is not suitable");
return null;
}
};
return StoryViewer;
}());
var StoryContainer = (function () {
function StoryContainer(pages, renderTimeout, isAutoScrolling) {
this.isHasModal = this.setPageDataWithCurrentPageNumber(pages);
this.storage = new StorageContainer(pages, this.isHasModal);
this.viewer = new StoryViewer(renderTimeout, isAutoScrolling);
}
StoryContainer.prototype.moveNext = function () {
var currentPage = this.storage.moveNext();
return this.viewer.setPage(currentPage.data).then(function (viewType) {
return {
viewType: viewType,
isLast: currentPage.isLast,
isDefault: currentPage.data.isDefault
};
});
};
StoryContainer.prototype.resetPage = function () {
return this.viewer.resetPage();
};
StoryContainer.prototype.moveBack = function () {
var currentPage = this.storage.moveBack();
return this.viewer.setPage(currentPage.data).then(function (viewType) {
return {
viewType: viewType,
isLast: currentPage.isLast,
isDefault: currentPage.data.isDefault
};
});
};
StoryContainer.prototype.skipStory = function () {
this.endStory();
};
StoryContainer.prototype.endStory = function () {
this.storage = undefined;
this.viewer.setPage(null);
this.viewer = undefined;
};
StoryContainer.prototype.setPageDataWithCurrentPageNumber = function (pages) {
var isHasModal = false;
for (var i = 0; i < pages.length; i++) {
if (!pages[i].pageContainer) {
isHasModal = true;
break;
}
pages[i].data.currentPageNumber = i + 1;
pages[i].data.totalPages = pages.length;
}
if (isHasModal) {
for (var i = 1; i < pages.length; i++) {
pages[i].data.currentPageNumber = i;
pages[i].data.totalPages = pages.length - 1;
}
}
return isHasModal;
};
return StoryContainer;
}());
var purpleFlowerTemplate = "<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";
var purpleFlowerLastPageTemplate = "<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";
var welcomePageTemplate = "<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";
var WebStory = (function () {
function WebStory(settings) {
var _this = this;
this.startStoryCallCount = 0;
this.moveNextStoryCallCount = 0;
this.startStory = function () {
if (!_this.isNeverTell()) {
_this.startStoryCallCount++;
if (_this.moveNextStoryCallCount === 0 && _this.startStoryCallCount <= 1) {
return _this.storyContainer.moveNext().then(function (pageInfo) {
if (pageInfo.viewType === Modal) {
_this.setClickLisenerByClassName('start-story', _this.startFirstPage);
_this.setClickLisenerByClassName("story-skip", _this.skip);
_this.setClickLisenerByClassName("story-neverTell", _this.setNeverTell);
}
});
}
else
console.error('you calling moveNext before start or you called startStory already');
}
};
this.endStory = function (event) {
if (event)
event.preventDefault();
if (_this.lifeStyleCallbacks && isFunction(_this.lifeStyleCallbacks.afterEnding))
_this.lifeStyleCallbacks.afterEnding();
_this.storyContainer.endStory();
window.removeEventListener('resize', _this.onResize);
_this.removeAllStoryAction();
};
this.startFirstPage = function () {
return _this.storyContainer.moveNext().then(function (pageInfo) {
_this.isLastPage = pageInfo.isLast;
_this.setStoryActions(_this.isLastPage);
if (_this.configuration.isVisableMode && !pageInfo.isDefault)
_this.hideBackStoryBtn();
else
_this.disableByClassName("story-back");
});
};
this.moveNext = function (event) {
event.preventDefault();
if (_this.lifeStyleCallbacks && isFunction(_this.lifeStyleCallbacks.preMoveNext))
_this.lifeStyleCallbacks.preMoveNext();
if (!_this.isLastPage) {
_this.moveNextStoryCallCount++;
_this.removeOldStoryAction();
_this.storyContainer.moveNext().then(function (pageInfo) {
_this.isLastPage = pageInfo.isLast;
_this.isFirstPage = false;
_this.setStoryActions(_this.isLastPage);
});
}
};
this.moveBack = function (event) {
event.preventDefault();
if (_this.lifeStyleCallbacks && isFunction(_this.lifeStyleCallbacks.preMoveBack))
_this.lifeStyleCallbacks.preMoveBack();
if (!_this.isFirstPage) {
_this.storyContainer.moveBack().then(function (pageInfo) {
_this.isFirstPage = pageInfo.isLast;
_this.isLastPage = false;
_this.setStoryActions();
if (_this.isFirstPage) {
if (_this.configuration.isVisableMode && !pageInfo.isDefault) {
_this.hideBackStoryBtn();
}
else {
_this.disableByClassName("story-back");
}
}
});
}
};
this.skip = function (event) {
event.preventDefault();
if (_this.lifeStyleCallbacks && isFunction(_this.lifeStyleCallbacks.preSkip))
_this.lifeStyleCallbacks.preSkip();
_this.storyContainer.skipStory();
};
this.setNeverTell = function (event) {
var isNever = isString(event.target.attributes.isChecked) ? event.target.attributes.isChecked === "true" : isBoolean(event.target.checked) ? event.target.checked : null;
if (!isNull(isNever)) {
if (isNever) {
localStorage.setItem(_this.getNeverTellId(), "never");
}
else {
localStorage.removeItem(_this.getNeverTellId());
}
}
};
this.getNeverTellId = function () {
var pageName = _this.getCurrentPageName();
if (pageName)
return "story-never-tell-" + pageName;
return null;
};
this.onResize = function () {
if (!_this.isNeverTell()) {
if (_this.storyContainer && isFunction(_this.storyContainer.resetPage)) {
_this.storyContainer.resetPage().then(function () {
if (_this.isLastPage) {
_this.setClickLisenerByClassName("story-end", _this.endStory);
_this.setStoryActions(true);
}
else if (_this.isFirstPage) {
_this.setStoryActions();
_this.disableByClassName("story-back");
}
else {
_this.setStoryActions();
}
});
}
}
};
this.getCurrentPageName = settings.getCurrentPageName;
if (!isFunction(this.getCurrentPageName)) {
var message = 'please insert page name by setting the getCurrentPageName function in the settings';
console.error(message);
throw new Error(message);
}
this.lifeStyleCallbacks = settings.lifeStyleCallbacks;
this.configuration = settings.configuration ? settings.configuration : {
isVisableMode: true,
isAutoScrolling: null,
renderTimeout: null
};
window.addEventListener('resize', this.onResize, null);
this.storyContainer = new StoryContainer(this.setPagesWithDefaultTemplate(settings.pages), this.configuration.renderTimeout, this.configuration.isAutoScrolling);
}
WebStory.prototype.neverTell = function () {
localStorage.setItem(this.getNeverTellId(), "never");
};
WebStory.prototype.removeNeverTell = function () {
localStorage.removeItem(this.getNeverTellId());
};
WebStory.prototype.isNeverTell = function () {
var neverTellId = this.getNeverTellId();
if (neverTellId) {
return localStorage.getItem(neverTellId);
}
else
console.error("cant start get page name please fill getCurrentPageName function");
return null;
};
WebStory.prototype.disableByClassName = function (className) {
var elements = document.getElementsByClassName(className);
if (elements[0]) {
elements[0].attributes.setNamedItem(document.createAttribute("disabled"));
}
};
WebStory.prototype.hideBackStoryBtn = function () {
this.hideByClassName("story-back");
var nextBtn = document.getElementsByClassName("story-next");
var pageCounter = document.getElementsByClassName("page-counter");
if (nextBtn && nextBtn.length && nextBtn[0] && pageCounter && pageCounter.length && pageCounter[0]) {
nextBtn[0].classList.add("hide-back");
pageCounter[0].classList.add("no-back");
}
};
WebStory.prototype.hideByClassName = function (className) {
var elements = document.getElementsByClassName(className);
if (elements[0]) {
elements[0].style.display = "none";
}
};
WebStory.prototype.setStoryActions = function (isEnd) {
if (isEnd === void 0) { isEnd = false; }
if (!isEnd)
this.setClickLisenerByClassName("story-next", this.moveNext);
else
this.setClickLisenerByClassName("story-end", this.endStory);
this.setClickLisenerByClassName("story-back", this.moveBack);
this.setClickLisenerByClassName("story-skip", this.skip);
this.setClickLisenerByClassName("story-neverTell", this.setNeverTell);
};
WebStory.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);
};
WebStory.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);
};
WebStory.prototype.removeClickLisenerByClassName = function (className, callback) {
var element = document.getElementsByClassName(className);
if (element[0]) {
element[0].removeEventListener('click', callback);
}
};
WebStory.prototype.setClickLisenerByClassName = function (className, callback) {
var element = document.getElementsByClassName(className);
if (element[0]) {
element[0].addEventListener('click', callback, null);
}
};
WebStory.prototype.setPagesWithDefaultTemplate = function (pages) {
var newPages = [];
var isModalDefiend = false;
for (var i = 0; i < pages.length; i++) {
if (!pages[i].pageContainer) {
isModalDefiend = true;
if (!pages[i].data.header)
pages[i].data.header = "Welcome to " + this.getCurrentPageName() + " Tour!";
if (!pages[i].data.subHeader)
pages[i].data.subHeader = "";
if (!pages[i].template) {
pages[i].template = welcomePageTemplate;
pages[i].isDefault = true;
}
else
pages[i].isDefault = false;
}
newPages.push({
data: pages[i].data,
pageContainer: pages[i].pageContainer,
template: pages[i].template ? pages[i].template : this.getDefaultTemplate(i == (pages.length - 1)),
isDefault: pages[i].template ? false : true
});
}
if (!isModalDefiend) {
newPages.unshift({
data: {
header: "Welcome to " + this.getCurrentPageName() + " Tour!",
subHeader: ""
},
pageContainer: null,
template: welcomePageTemplate
});
}
return newPages;
};
WebStory.prototype.getDefaultTemplate = function (isLastPage) {
if (isLastPage)
return purpleFlowerLastPageTemplate;
return purpleFlowerTemplate;
};
return WebStory;
}());
exports.WebStory = WebStory;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=web-story.umd.js.map