${textContent}
`;
break;
}
}
}
}
if (youtubes && this.options.backgroundMusic) {
window.addEventListener('message', (e) => {
const validOrigins = ['https://www.youtube.com', 'https://www.youtube-nocookie.com'];
if (!validOrigins.includes(e.origin)) return;
let data = e.data;
if (typeof data === 'string') {
try {
data = JSON.parse(data);
} catch {
return;
}
}
if (data.event === 'infoDelivery' && data.info) {
const { playerState } = data.info;
if (playerState === 1) {
this.pauseGlobalSound();
}
}
});
}
},
addPageCaptions: function () {
const pages = this.options.pages;
for (let key in pages) {
let page = pages[key];
page.htmlContent = page.htmlContent || '';
if (typeof page.caption == 'string' && page.caption != '') {
const icon = this.createSVGIcon('camera');
page.htmlContent += '';
page.htmlContent += icon.outerHTML;
page.htmlContent += '
';
const caption = '' + page.caption + '
';
page.htmlContent += caption;
}
}
},
spotlight: function (url, title, description) {
let overlay = document.querySelector('.flipbook-spotlight-overlay');
function stopMediaPlayback() {
const media = overlay.querySelector('video, audio, iframe');
if (media) {
if (media.tagName.toLowerCase() === 'video') {
media.pause();
} else if (media.tagName.toLowerCase() === 'audio') {
media.pause();
} else {
media.src = media.src;
}
}
}
if (!overlay) {
overlay = document.createElement('div');
overlay.className = 'flipbook-spotlight-overlay';
const closeButton = document.createElement('button');
closeButton.className = 'flipbook-spotlight-close-button';
closeButton.innerHTML = `
`;
closeButton.onclick = () => {
stopMediaPlayback(overlay);
overlay.classList.add('flipbook-hidden');
};
overlay.addEventListener('click', (event) => {
if ([overlay, closeButton].includes(event.target)) {
stopMediaPlayback(overlay);
overlay.classList.add('flipbook-hidden');
}
});
overlay.appendChild(closeButton);
this.wrapper.appendChild(overlay);
} else {
const existingContent = overlay.querySelector('img, video, audio, iframe');
existingContent && overlay.removeChild(existingContent);
}
const getYouTubeEmbedUrl = (url) =>
url.includes('youtu.be/')
? url.replace('youtu.be/', 'youtube.com/embed/')
: url.includes('youtube.com/watch?v=')
? url.split('&')[0].replace('/watch?v=', '/embed/')
: url;
const createElement = (tag, attrs) => {
const el = document.createElement(tag);
for (let key in attrs) {
if (key === 'style') {
el.style.cssText = attrs[key];
} else {
el[key] = attrs[key];
}
}
return el;
};
let content;
if (url.endsWith('.mp4')) {
content = createElement('video', {
src: url,
controls: true,
autoplay: true,
style: 'max-width: 80%; max-height: 80%;',
className: 'flipbook-spotlight-video',
});
} else if (url.endsWith('.mp3')) {
content = createElement('audio', {
src: url,
controls: true,
autoplay: true,
style: 'max-width: 80%; max-height: 80%;',
className: 'flipbook-spotlight-audio',
});
} else if (url.includes('youtube.com') || url.includes('youtu.be')) {
content = createElement('iframe', {
src: getYouTubeEmbedUrl(url) + '?enablejsapi=1&autoplay=1&mute=1',
style: `width: 80vw; height: 45vw; max-width: 960px; max-height: 540px;
min-width: 300px; min-height: 168.75px;`,
frameBorder: '0',
allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',
allowFullscreen: true,
});
} else if (
url.endsWith('.jpg') ||
url.endsWith('.jpeg') ||
url.endsWith('.png') ||
url.endsWith('.gif') ||
url.endsWith('.bmp') ||
url.endsWith('.webp')
) {
content = createElement('img', { src: url, style: 'max-width: 80%; max-height: 80%;' });
} else {
content = createElement('iframe', {
src: url,
style: `width: 80vw; height: 45vw; max-width: 960px; max-height: 540px;
min-width: 300px; min-height: 168.75px;`,
frameBorder: '0',
allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',
allowFullscreen: true,
});
}
overlay.appendChild(content);
overlay.classList.remove('flipbook-hidden');
if (title || description) {
let captionContainer = overlay.querySelector('.flipbook-spotlight-caption-container');
if (!captionContainer) {
captionContainer = createElement('div', { className: 'flipbook-spotlight-caption-container' });
}
overlay.appendChild(captionContainer);
captionContainer.innerHTML = '';
if (title) {
captionContainer.innerHTML += '' + title + '
';
}
if (description) {
captionContainer.innerHTML += '' + description + '
';
}
}
},
resizeContainer: function () {
if (!this.lightbox && !this.options.fullscreen && !this.elemStatic) {
var pageRatio = this.pageW / this.pageH;
var bookRatio = 2 * pageRatio;
let width = this.elem.getBoundingClientRect().width;
let ratio;
if (this.options.isMobile && width < this.options.responsiveViewTreshold) {
ratio = pageRatio;
} else {
ratio = bookRatio;
}
var newHeight = width / (this.options.containerRatio || ratio);
newHeight += this.wrapper.clientHeight - this.bookLayer.clientHeight;
this.elem.style.height = newHeight + 'px';
}
this.resize();
},
addEventListeners: function () {
this.handleResize = () => this.resizeContainer();
this.handleKeydown = (e) => {
if (!this.Book.enabled) {
return;
}
if (!this.options.lightBox && document.body.classList.contains('flipbook-overflow-hidden')) {
return;
}
if (!this.fullscreenActive && document.body.classList.contains('flipbook-fullscreen')) {
return;
}
if (
!(this.options.arrowsAlwaysEnabledForNavigation && (e.keyCode == 37 || e.keyCode == 39)) &&
(this.options.lightBox ||
this.fullscreenActive ||
(!this.options.arrowsDisabledNotFullscreen && !this.bodyHasVerticalScrollbar()))
) {
return;
}
switch (e.keyCode) {
case 37:
this.zoom > 1 ? this.moveBook('left') : this.prevPage();
break;
case 38:
this.zoom > 1 ? this.moveBook('up') : this.nextPage();
break;
case 39:
this.zoom > 1 ? this.moveBook('right') : this.nextPage();
break;
case 33:
this.prevPage();
break;
case 34:
this.nextPage();
break;
case 36:
this.firstPage();
break;
case 35:
this.lastPage();
break;
case 40:
this.zoom > 1 ? this.moveBook('down') : this.prevPage();
break;
}
return false;
};
this.handleFs = () => this.handleFsChange();
window.addEventListener('resize', this.handleResize);
document.addEventListener('keydown', this.handleKeydown);
document.addEventListener('MSFullscreenChange', this.handleFs);
document.addEventListener('mozfullscreenchange', this.handleFs);
document.addEventListener('webkitfullscreenchange', this.handleFs);
document.addEventListener('fullscreenchange', this.handleFs);
},
removeEventListeners: function () {
window.removeEventListener('resize', this.handleResize);
document.removeEventListener('keydown', this.handleKeydown);
document.removeEventListener('MSFullscreenChange', this.handleFs);
document.removeEventListener('mozfullscreenchange', this.handleFs);
document.removeEventListener('webkitfullscreenchange', this.handleFs);
document.removeEventListener('fullscreenchange', this.handleFs);
},
onBookCreated: function () {
var o = this.options;
var self = this;
if (!o.cover && Number(o.startPage) < 2) {
o.startPage = 2;
}
var root = document.documentElement;
root.style.setProperty('--flipbook-link-color', this.options.linkColor);
root.style.setProperty('--flipbook-link-color-hover', this.options.linkColorHover);
root.style.setProperty('--flipbook-link-opacity', this.options.linkOpacity);
this.elemStatic = getComputedStyle(this.elem).position == 'static';
this.resizeContainer();
this.addEventListeners();
this.resizeObserver = new ResizeObserver((entries) => {
self.resizeContainer();
});
this.resizeObserver.observe(this.elem);
this.resizeObserver2 = new ResizeObserver(() => {
self.resize();
});
this.resizeObserver2.observe(this.bookLayer);
if (o.rightToLeft) {
this.goToPage(Number(o.pages.length - Number(o.startPage) + 1), true);
} else {
this.goToPage(Number(o.startPage), true);
}
this.playBgMusic();
if (o.lightboxCloseOnBack) {
window.onpopstate = function () {
if (self.Book.enabled && FLIPBOOK.lightboxOpened) {
if (!window.location.hash) {
self.lightbox.closeLightbox(true);
}
}
};
}
if (this.options.viewMode != 'scroll') {
this.bookLayer.addEventListener(
'wheel',
function (e) {
if (!this.Book.enabled) return;
if (!this.options.lightBox && !this.fullscreenActive) {
if (
this.options.wheelDisabledNotFullscreen ||
this.bodyHasVerticalScrollbar() ||
this.isIframe()
) {
return;
}
}
const deltaX = e.deltaX || -e.wheelDeltaX || -e.detail;
const deltaY = e.deltaY || -e.wheelDeltaY || -e.detail;
if (Math.abs(deltaY) > 0 && Math.abs(deltaY) > Math.abs(deltaX)) {
if (deltaY > 0) {
this.zoomOut(e);
} else {
this.zoomIn(e);
}
return false;
}
}.bind(this)
);
}
if (self.options.contentOnStart) {
this.toggleToc(true);
} else if (self.options.thumbnailsOnStart) {
this.options.thumbsStyle = 'side';
this.toggleThumbs(true);
} else if (self.options.searchOnStart) {
this.toggleSearch(true);
if (typeof self.options.searchOnStart == 'string') {
this.thumbs.$findInput.val(this.options.searchOnStart).trigger('keyup');
}
}
if (o.autoplayOnStart) {
this.toggleAutoplay(true);
}
this.initColors();
this.resize();
this.Book.updateVisiblePages();
this.Book.zoomTo(o.zoomMin);
this.updateCurrentPage();
if (o.onbookcreated) {
o.onbookcreated.call(this);
}
this.bookCreated = true;
},
initSound: function () {
if (this.options.flipSound) {
this.flipSound = document.createElement('audio');
this.flipSound.preload = 'auto';
var flipSource = document.createElement('source');
flipSource.src = this.options.assets.flipMp3;
flipSource.type = 'audio/mpeg';
this.flipSound.appendChild(flipSource);
}
if (this.options.backgroundMusic) {
this.backgroundMusic = document.createElement('audio');
this.backgroundMusic.preload = 'auto';
this.backgroundMusic.autoplay = true;
this.backgroundMusic.loop = true;
var bgMusicSource = document.createElement('source');
bgMusicSource.src = this.options.backgroundMusic;
bgMusicSource.type = 'audio/mpeg';
this.backgroundMusic.appendChild(bgMusicSource);
}
},
touchSwipe: function (element, callback) {
let startX;
let startY;
let startDistance;
let startTime;
let isSwiping = false;
let isPinching = false;
let fingerCount = 0;
let touchStarted = false;
let lastX;
let lastY;
function calculateDistance(touches) {
if (touches.length < 2) {
return 0;
}
let dx = touches[0].clientX - touches[1].clientX;
let dy = touches[0].clientY - touches[1].clientY;
return Math.sqrt(dx * dx + dy * dy);
}
function calculateDirectionAndDistance(currentX, currentY) {
let deltaX = currentX - startX;
let deltaY = currentY - startY;
let distanceX = deltaX;
let distanceY = deltaY;
return { distanceX, distanceY };
}
function getTouchObject(e) {
return e.type.includes('mouse') ? e : e.touches[0];
}
var self = this;
function startHandler(e) {
if (e.type === 'touchstart') {
touchStarted = true;
} else if (e.type === 'mousedown' && touchStarted) {
return;
} else if (e.target.tagName === 'A' || e.target.tagName === 'SPAN' || e.target.tagName === 'MARK') {
self.trigger('disableIScroll');
return;
}
self.trigger('enableIScroll');
let touchObj = getTouchObject(e);
startX = touchObj.clientX;
startY = touchObj.clientY;
startTime = new Date().getTime();
isSwiping = true;
fingerCount = e.touches ? e.touches.length : 1;
callback(e, 'start', null, 0, 0, fingerCount);
element.addEventListener('mousemove', moveHandler);
element.addEventListener('touchmove', moveHandler, { passive: false });
}
function moveHandler(e) {
let touchObj = getTouchObject(e);
let { distanceX, distanceY } = calculateDirectionAndDistance(touchObj.clientX, touchObj.clientY);
lastX = touchObj.clientX;
lastY = touchObj.clientY;
if (isSwiping && e.type === 'mousemove') {
e.preventDefault();
callback(e, 'move', distanceX, distanceY, 0, 1);
} else if (e.touches && e.touches.length === 2) {
e.preventDefault();
let scale;
if (typeof e.scale === 'number') {
scale = e.scale;
} else {
let currentDistance = calculateDistance(e.touches);
if (!isPinching) {
isPinching = true;
startDistance = currentDistance;
scale = 1;
} else {
scale = currentDistance / startDistance;
}
}
if (isPinching) {
callback(e, 'pinch', scale, null, 0, 2);
} else {
isPinching = true;
startDistance = calculateDistance(e.touches);
callback(e, 'pinchstart', scale, null, 0, 2);
}
} else if (e.touches && e.touches.length === 1) {
if (self.zoom > 1) {
e.preventDefault();
}
callback(e, 'move', distanceX, distanceY, 0, 1);
}
}
function endHandler(e) {
self.trigger('enableIScroll');
if (e.type === 'touchend' || e.type === 'mouseup') {
setTimeout(function () {
touchStarted = false;
}, 300);
}
let touchObj = e.changedTouches ? e.changedTouches[0] : e;
let { distanceX, distanceY } = calculateDirectionAndDistance(touchObj.clientX, touchObj.clientY);
let duration = new Date().getTime() - startTime;
if (isSwiping) {
isSwiping = false;
callback(e, 'end', distanceX, distanceY, duration, e.changedTouches ? e.changedTouches.length : 1);
}
if (isPinching) {
isPinching = false;
callback(e, 'pinchend', null, 0, 0, 2);
}
removeEventListeners();
}
function cancelHandler(e) {
setTimeout(function () {
touchStarted = false;
}, 300);
let duration = new Date().getTime() - startTime;
let { distanceX, distanceY } = calculateDirectionAndDistance(lastX, lastY);
if (isSwiping) {
isSwiping = false;
callback(e, 'cancel', distanceX, distanceY, duration, 1);
}
if (isPinching) {
isPinching = false;
callback(e, 'pinchcancel', distanceX, distanceY, duration, 2);
}
removeEventListeners();
}
function removeEventListeners() {
element.removeEventListener('mousemove', moveHandler);
element.removeEventListener('touchmove', moveHandler);
}
element.addEventListener('mousedown', startHandler);
element.addEventListener('touchstart', startHandler);
element.addEventListener('mouseup', endHandler);
element.addEventListener('touchend', endHandler);
element.addEventListener('mouseleave', cancelHandler);
element.addEventListener('touchcancel', cancelHandler);
},
initSwipe: function () {
var self = this;
let zooming = false;
let pinching = false;
let textSelect = false;
this.touchSwipe(this.book, function (e, phase, distanceX, distanceY, duration, fingerCount) {
textSelect = self.tool == 'toolSelect' || self.options.pageDragDisabled;
if (phase == 'start') {
self.zoomStart = self.zoom;
try {
self.currentPageInput.dispatchEvent(new Event('blur', { bubbles: true, cancelable: true }));
} catch (e) {}
}
if (fingerCount > 1 && phase == 'pinch') {
let scale = distanceX;
if (e.scale) {
scale = e.scale;
}
self.zoomTo(self.zoomStart * scale, 0, e);
pinching = true;
}
if (phase == 'end') {
if (!self.options.doubleClickZoomDisabled) {
if (!self.clickTimer) {
self.clickTimer = setTimeout(function () {
delete self.clickTimer;
}, 300);
} else {
clearTimeout(self.clickTimer);
delete self.clickTimer;
const pageHtmlClicked = e.target.closest('.flipbook-page-html') !== null;
if (pageHtmlClicked) {
var t = self.options.zoomTime;
if (self.zoom >= self.options.zoomMax) {
self.zoomTo(self.options.zoomMin, t, e);
} else {
self.zoomTo(self.options.zoomMax, t, e);
}
}
}
}
if (Math.abs(distanceX) < 5 && duration < 200) {
zooming = true;
}
}
if (!zooming && !pinching && !textSelect) {
self.Book.onSwipe(e, phase, distanceX, distanceY, duration, fingerCount);
}
zooming = false;
if (phase == 'pinchend') {
pinching = false;
}
});
this.swipeEnabled = true;
},
createSVGIcon: function (name, reverse) {
var icons = {
plus: '',
minus: '',
close: '',
next: '',
expand: '',
compress:
'',
thumbs: '',
print: '',
sound: '',
mute: '',
share: '',
facebook:
'',
twitter:
'',
list: '',
pdf: '',
tools: '',
pause: '',
play: '',
bookmark:
'',
download:
'',
search: '',
last: '',
double: '',
single: '',
camera: '',
linkedin:
'',
whatsapp:
'',
pinterest:
'',
email: '',
digg: '',
reddit: '',
copyLink:
'',
};
var container = document.createElement('div');
container.innerHTML = icons[name];
var svgElement = container.firstChild;
svgElement.setAttribute('aria-hidden', 'true');
svgElement.classList.add('flipbook-icon');
if (reverse) {
svgElement.classList.add('flipbook-icon-reverse');
}
return svgElement;
},
createButton: function (btn) {
var o = this.options;
var inToolsMenu = btn.toolsMenu && o.btnTools.enabled;
var floating =
!inToolsMenu &&
((btn.vAlign === 'top' && o.menu2Transparent) || (btn.vAlign !== 'top' && o.menuTransparent));
var bgColor = btn.background || (floating ? o.floatingBtnBackground : o.btnBackground);
var bgColorHover = btn.backgroundHover || (floating ? o.floatingBtnBackgroundHover : o.btnBackgroundHover);
var color = btn.color || (floating ? o.floatingBtnColor : o.btnColor);
var colorHover = btn.colorHover || (floating ? o.floatingBtnColorHover : o.btnColorHover);
var textShadow = floating ? o.floatingBtnTextShadow : o.btnTextShadow;
var radius = btn.radius || (floating ? o.floatingBtnRadius : o.btnRadius);
var border = btn.border || (floating ? o.floatingBtnBorder : o.btnBorder);
var margin = floating ? o.floatingBtnMargin : o.btnMargin;
var paddingV = o.btnPaddingV + 2;
var paddingH = o.btnPaddingH + 2;
var $btn = document.createElement('span');
var material = o.icons === 'material';
var btnSize = material ? (btn.size || o.btnSize) + 8 : btn.size || o.btnSize;
if (inToolsMenu) {
bgColor = 'none';
bgColorHover = 'none';
}
function addCSS(btn) {
btn.style.margin = `${margin}px`;
btn.style.padding = `${paddingV}px ${paddingH}px`;
btn.style.borderRadius = `${radius}px`;
btn.style.boxShadow = o.btnShadow;
btn.style.border = border;
btn.style.color = color;
btn.$icon.style.fill = color;
btn.style.background = bgColor;
btn.style.textShadow = textShadow;
btn.style.width = `${btnSize}px`;
btn.style.height = `${btnSize}px`;
if (color) {
btn.classList.remove('skin-color');
}
if (bgColor) {
btn.classList.remove('skin-color-bg');
}
}
const iconName = btn.svg || btn.name.replace('btn', '').toLowerCase();
$btn.$icon = this.createSVGIcon(iconName, btn.iconReverse);
$btn.appendChild($btn.$icon);
if (btn.svgAlt) {
$btn.$iconAlt = this.createSVGIcon(btn.svgAlt, btn.iconReverse);
$btn.appendChild($btn.$iconAlt);
$btn.$iconAlt.classList.add('flipbook-hidden');
}
addCSS($btn);
if (btn.onclick) {
$btn.addEventListener('click', function () {
btn.onclick();
});
}
if (colorHover || bgColorHover) {
$btn.addEventListener('mouseenter', function () {
if (this.classList.contains('disabled')) return;
$btn.$icon.style.fill = colorHover;
$btn.$icon.style.background = bgColorHover;
if ($btn.$iconAlt) {
$btn.$icon.style.fill = colorHover;
$btn.$icon.style.background = bgColorHover;
}
});
$btn.addEventListener('mouseleave', function () {
$btn.$icon.style.fill = color;
$btn.$icon.style.background = bgColor;
if ($btn.$iconAlt) {
$btn.$iconAlt.style.fill = color;
$btn.$iconAlt.style.background = bgColor;
}
});
}
var menu;
if (inToolsMenu) {
menu = this.toolsMenu;
var span = document.createElement('span');
span.textContent = btn.title;
span.classList.add('skin-color');
$btn.appendChild(span);
} else if (btn.vAlign === 'top') {
if (o.menu2Floating) {
menu = this.menuTC;
} else if (btn.hAlign === 'left') {
menu = this.menuTL;
} else if (btn.hAlign === 'right') {
menu = this.menuTR;
} else {
menu = this.menuTC;
}
} else {
if (o.menuFloating) {
menu = this.menuBC;
} else if (btn.hAlign === 'left') {
menu = this.menuBL;
} else if (btn.hAlign === 'right') {
menu = this.menuBR;
} else {
menu = this.menuBC;
}
}
$btn.setAttribute('data-name', btn.name);
$btn.classList.add('flipbook-menu-btn-wrapper', 'flipbook-menu-btn', 'skin-color');
$btn.style.order = btn.order;
menu.appendChild($btn);
if (!inToolsMenu) {
$btn.setAttribute('data-tooltip', btn.title);
$btn.classList.add('flipbook-has-tooltip');
}
return $btn;
},
createMenu: function () {
if (this.menuBottom) {
return;
}
var o = this.options;
var menuBottomClass = o.menuFloating ? 'flipbook-menu-floating' : 'flipbook-menu-fixed';
var menuTopClass = o.menu2Floating ? 'flipbook-menu-floating' : 'flipbook-menu-fixed';
var self = this;
this.menuBottom = document.createElement('div');
this.menuBottom.classList.add('flipbook-menuBottom', menuBottomClass);
this.menuBottom.style.background = o.menuBackground;
this.menuBottom.style.boxShadow = o.menuShadow;
this.menuBottom.style.margin = o.menuMargin + 'px';
this.menuBottom.style.padding = o.menuPadding + 'px';
this.wrapper.appendChild(this.menuBottom);
if (!o.menuTransparent && !o.menuBackground) {
this.menuBottom.classList.add('skin-color-bg');
}
if (o.hideMenu) {
this.menuBottom.classList.add('flipbook-hidden');
}
this.menuTop = document.createElement('div');
this.menuTop.classList.add('flipbook-menuTop', menuTopClass);
this.menuTop.style.background = o.menu2Background;
this.menuTop.style.boxShadow = o.menu2Shadow;
this.menuTop.style.margin = o.menu2Margin + 'px';
this.menuTop.style.padding = o.menu2Padding + 'px';
this.wrapper.appendChild(this.menuTop);
if (!o.menu2Transparent && !o.menu2Background) {
this.menuTop.classList.add('skin-color-bg');
}
if (o.viewMode === 'swipe') {
o.btnSound.enabled = false;
}
function createAndAppendMenu(className, parentElement) {
const div = document.createElement('div');
div.className = className;
parentElement.appendChild(div);
return div;
}
this.menuBL = createAndAppendMenu('flipbook-menu flipbook-menu-left', this.menuBottom);
this.menuBC = createAndAppendMenu('flipbook-menu flipbook-menu-center', this.menuBottom);
this.menuBR = createAndAppendMenu('flipbook-menu flipbook-menu-right', this.menuBottom);
this.menuTL = createAndAppendMenu('flipbook-menu flipbook-menu-left', this.menuTop);
this.menuTC = createAndAppendMenu('flipbook-menu flipbook-menu-center', this.menuTop);
this.menuTR = createAndAppendMenu('flipbook-menu flipbook-menu-right', this.menuTop);
if (this.options.btnTools.enabled) {
this.toolsMenu = document.createElement('div');
this.toolsMenu.className = 'flipbook-tools flipbook-submenu skin-color skin-color-bg flipbook-font';
}
if (this.options.btnShare.enabled) {
this.shareMenu = document.createElement('div');
this.shareMenu.className = 'flipbook-share flipbook-submenu skin-color skin-color-bg flipbook-font';
}
function initButton(button, onclick) {
button.addEventListener('click', function (e) {
if (button.disabled) {
return false;
}
button.disabled = true;
setTimeout(function () {
button.disabled = false;
}, 300);
e.stopPropagation();
e.preventDefault();
onclick();
});
button.style.width = o.arrowSize + 'px';
button.style.borderRadius = o.arrowRadius + 'px';
button.style.padding = o.arrowPadding + 'px';
button.style.filter = 'drop-shadow(' + o.arrowTextShadow + ')';
button.style.border = o.arrowBorder;
button.style.color = o.arrowColor;
button.style.fill = o.arrowColor;
button.style.background = o.arrowBackground;
button.style.boxSizing = 'initial';
if (o.arrowBackgroundHover) {
button.addEventListener('mouseenter', function () {
if (this.classList.contains('disabled')) return;
button.style.background = o.arrowBackgroundHover;
});
button.addEventListener('mouseleave', function () {
button.style.background = o.arrowBackground;
});
}
if (o.arrowColor) {
button.classList.remove('skin-color');
}
if (o.arrowBackground) {
button.classList.remove('skin-color-bg');
}
}
if (o.sideNavigationButtons) {
this.$arrowWrapper = document.createElement('div');
this.$arrowWrapper.className = 'flipbook-nav';
this.bookLayer.appendChild(this.$arrowWrapper);
this.btnNext = this.createSVGIcon('next');
this.$arrowWrapper.appendChild(this.btnNext);
this.btnNext.style.height = o.arrowSize + 'px';
this.btnNext.style.fontSize = o.arrowSize + 'px';
this.btnNext.style.marginTop = String(-o.arrowSize / 2) + 'px';
this.btnNext.style.marginRight = o.arrowMargin + 'px';
this.btnNext.classList.add('flipbook-right-arrow');
initButton(this.btnNext, this.nextPage.bind(this));
this.btnPrev = this.createSVGIcon('next', true);
this.$arrowWrapper.appendChild(this.btnPrev);
this.btnPrev.style.height = o.arrowSize + 'px';
this.btnPrev.style.fontSize = o.arrowSize + 'px';
this.btnPrev.style.marginTop = String(-o.arrowSize / 2) + 'px';
this.btnPrev.style.marginLeft = o.arrowMargin + 'px';
this.btnPrev.classList.add('flipbook-left-arrow');
initButton(this.btnPrev, this.prevPage.bind(this));
if (o.btnFirst.enabled) {
this.btnFirst = this.createSVGIcon('last', true);
this.$arrowWrapper.appendChild(this.btnFirst);
this.btnFirst.style.height = o.arrowSize * 0.5 + 'px';
this.btnFirst.style.fontSize = o.arrowSize * 0.5 + 'px';
this.btnFirst.style.marginTop = String(o.arrowSize / 2 + o.arrowMargin + 2 * o.arrowPadding) + 'px';
this.btnFirst.style.marginLeft = o.arrowMargin + 'px';
this.btnFirst.classList.add('flipbook-first-arrow');
initButton(this.btnFirst, this.firstPage.bind(this));
}
if (o.btnLast.enabled) {
this.btnLast = this.createSVGIcon('last');
this.$arrowWrapper.appendChild(this.btnLast);
this.btnLast.style.height = o.arrowSize * 0.5 + 'px';
this.btnLast.style.fontSize = o.arrowSize * 0.5 + 'px';
this.btnLast.style.marginTop = String(o.arrowSize / 2 + o.arrowMargin + 2 * o.arrowPadding) + 'px';
this.btnLast.style.marginRight = o.arrowMargin + 'px';
this.btnLast.classList.add('flipbook-last-arrow');
initButton(this.btnLast, this.lastPage.bind(this));
}
if (!o.menuNavigationButtons) {
if (o.btnOrder.indexOf('btnFirst') >= 0) {
o.btnOrder.splice(o.btnOrder.indexOf('btnFirst'), 1);
}
if (o.btnOrder.indexOf('btnPrev') >= 0) {
o.btnOrder.splice(o.btnOrder.indexOf('btnPrev'), 1);
}
if (o.btnOrder.indexOf('btnNext') >= 0) {
o.btnOrder.splice(o.btnOrder.indexOf('btnNext'), 1);
}
if (o.btnOrder.indexOf('btnLast') >= 0) {
o.btnOrder.splice(o.btnOrder.indexOf('btnLast'), 1);
}
}
}
if (o.pdfMode && !o.btnDownloadPdf.url) {
o.btnDownloadPdf.url = o.pdfUrl;
}
if (!o.pdfTextLayer && o.btnSearch) {
o.btnSearch.enabled = false;
}
for (var i = 0; i < o.btnOrder.length; i++) {
var btnName = o.btnOrder[i];
var btn = o[btnName];
if (o.isMobile && btn.hideOnMobile) {
btn.enabled = false;
}
if (btn.enabled) {
btn.name = btnName;
if (btn.name === 'currentPage') {
this.createCurrentPage();
} else if (btn.name === 'search') {
this.$search = document.createElement('div');
this.$search.className = 'flipbook-findbar';
this.$search.innerHTML =
'' +
'' +
'
' +
'';
this.menuTL.appendChild(this.$search);
var searchInput = this.$search.querySelector('input');
searchInput.addEventListener('change', function () {
self.toggleSearch(true);
self.thumbs.$findInput.value = this.value;
var event = new Event('keyup');
self.thumbs.$findInput.dispatchEvent(event);
this.value = '';
});
this.menuTL.style.flexDirection = 'column';
this.menuTL.style.alignItems = 'flex-start';
} else {
this[btnName] = this.createButton(btn);
this[btnName].addEventListener('click', function (e) {
e.stopPropagation();
e.preventDefault();
self.onButtonClick(this, e);
});
}
}
}
if (o.buttons) {
o.buttons.forEach((newButton) => {
self.createButton(newButton).index(1);
});
}
if (this.btnSingle) this.toggleIcon(this.btnSingle, this.options.singlePageMode);
},
onButtonClick: function (btn, _) {
var name = btn.dataset.name;
var o = this.options;
switch (name) {
case 'btnFirst':
this.firstPage();
break;
case 'btnPrev':
this.prevPage();
break;
case 'btnNext':
this.nextPage();
break;
case 'btnLast':
this.lastPage();
break;
case 'btnZoomIn':
this.zoomIn();
break;
case 'btnZoomOut':
this.zoomOut();
break;
case 'btnAutoplay':
if (!this.autoplay) {
this.nextPage();
}
this.toggleAutoplay();
break;
case 'btnSearch':
this.toggleSearch();
break;
case 'btnBookmark':
this.toggleBookmark();
break;
case 'btnRotateLeft':
if (this.Book.rotateLeft) {
this.Book.rotateLeft();
}
break;
case 'btnRotateRight':
if (this.Book.rotateRight) {
this.Book.rotateRight();
}
break;
case 'btnToc':
this.toggleToc();
break;
case 'btnThumbs':
this.toggleThumbs();
break;
case 'btnShare':
this.toggleShareMenu();
break;
case 'btnTools':
this.toggleToolsMenu();
break;
case 'btnNotes':
this.toggleNotesMenu();
break;
case 'btnDownloadPages':
if (o.downloadMenu) {
this.toggleDownloadMenu();
} else {
var link = document.createElement('a');
link.href = o.btnDownloadPages.url;
link.download = o.btnDownloadPages.name;
link.dispatchEvent(new MouseEvent('click'));
}
break;
case 'btnPrint':
if (o.printMenu) {
this.togglePrintMenu();
} else {
this.togglePrintWindow();
}
break;
case 'btnDownloadPdf':
if (o.btnDownloadPdf.forceDownload) {
var path = o.btnDownloadPdf.url;
var save = document.createElement('a');
save.href = path;
var filename = save.href.split('/').pop().split('#')[0].split('?')[0];
save.download = filename;
document.body.appendChild(save);
save.click();
document.body.removeChild(save);
} else {
var target =
o.btnDownloadPdf.openInNewWindow || typeof (o.btnDownloadPdf.openInNewWindow == 'undefined')
? '_blank'
: '_self';
window.open(o.btnDownloadPdf.url, target);
}
this.sendGAEvent({
event: 'flipbook_pdf_download',
book_name: this.options.name,
url: o.btnDownloadPdf.url || o.pdfUrl,
nonInteraction: true,
});
break;
case 'btnSound':
this.toggleSound();
break;
case 'btnExpand':
this.toggleExpand();
break;
case 'btnSingle':
this.toggleSinglePage();
break;
case 'btnClose':
this.lightbox.closeLightbox();
break;
}
},
handleFsChange: function () {
if (!this.Book || !this.Book.enabled) {
return;
}
var currentFullscreenElement =
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement;
if (currentFullscreenElement === this.fullscreenElement || this.isFullscreen) {
this.fullscreenActive = true;
if (this.options.onfullscreenenter) {
this.options.onfullscreenenter.call(this);
}
document.body.classList.add('flipbook-fullscreen');
} else {
this.fullscreenActive = false;
if (this.options.onfullscreenexit) {
this.options.onfullscreenexit.call(this);
}
document.body.classList.remove('flipbook-fullscreen');
}
this.toggleIcon(this.btnExpand, !this.fullscreenActive);
},
createLogo: function () {
const { options: o, wrapper } = this;
const { logoImg, logoCSS, logoAlignH, logoAlignV, logoUrl, logoUrlTarget, isMobile, logoHideOnMobile } = o;
if (!logoImg || (isMobile && logoHideOnMobile)) return;
const baseStyle =
`${logoCSS}` +
[
'position:absolute',
logoAlignH === 'right' ? 'right:0' : logoAlignH === 'left' ? 'left:0' : '',
logoAlignV === 'bottom' ? 'bottom:0' : logoAlignV === 'top' ? 'top:0' : '',
]
.filter(Boolean)
.join(';') +
';';
const makeLogo = ({ zIndex = '', opacity = '' } = {}) => {
const img = document.createElement('img');
img.src = logoImg;
img.style.cssText =
baseStyle + (zIndex ? `z-index:${zIndex};` : '') + (opacity ? `opacity:${opacity};` : '');
if (logoUrl) {
img.style.cursor = 'pointer';
img.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
window.open(logoUrl, logoUrlTarget || '_blank');
});
}
return img;
};
const primary = makeLogo();
wrapper.appendChild(primary);
},
setLoadingProgress: function (percent) {
if (this.disposed) {
return;
}
if (this.$fillPreloader) {
this.setFillPreloaderProgress(percent);
} else {
if (percent > 0 && percent < 1) {
this.preloader.classList.remove('flipbook-hidden');
} else {
this.preloader.classList.add('flipbook-hidden');
}
}
},
setFillPreloaderProgress: function (percent) {
if (!this.$fillPreloader) {
return;
}
if (percent > 0 && percent < 1) {
this.fillPreloaderProgress = this.fillPreloaderProgress || 0;
if (percent < this.fillPreloaderProgress) {
return;
} else {
this.fillPreloaderProgress = percent;
}
var img = this.$fillPreloaderImg[0];
img.style.clip = 'rect(0px,' + img.width * percent + 'px,' + img.height + 'px,0px)';
this.$fillPreloader.show();
} else {
this.$fillPreloader.hide();
}
},
playFlipSound: function () {
if (this.options.sound && this.Book.enabled && typeof this.flipSound.play != 'undefined') {
this.flipSound.currentTime = 0;
var self = this;
setTimeout(function () {
self.flipSound.play().then(
function () {},
function () {}
);
}, 70);
}
},
playBgMusic: function () {
if (this.options.sound && this.backgroundMusic && this.backgroundMusic.play) {
var self = this;
this.backgroundMusic.play().then(
function () {},
function (_) {
setTimeout(function () {
self.playBgMusic();
}, 100);
}
);
}
},
onMouseWheel: function (e) {
if ('wheelDeltaX' in e) {
wheelDeltaX = e.wheelDeltaX / 12;
wheelDeltaY = e.wheelDeltaY / 12;
} else if ('wheelDelta' in e) {
wheelDeltaX = wheelDeltaY = e.wheelDelta / 12;
} else if ('detail' in e) {
wheelDeltaX = wheelDeltaY = -e.detail * 3;
} else {
return;
}
if (wheelDeltaX > 0) {
this.zoomIn(e);
} else {
this.zoomOut(e);
}
},
zoomTo: function (val, time, e) {
this.zoom = val;
var x;
var y;
if (typeof e == 'undefined') {
x = this.wrapperW / 2;
y = this.wrapperH / 2;
} else {
if (e.touches && e.touches[0]) {
x = e.touches[0].pageX;
y = e.touches[0].pageY;
} else if (e.changedTouches && e.changedTouches[0]) {
x = e.changedTouches[0].pageX;
y = e.changedTouches[0].pageY;
} else {
x = e.pageX;
y = e.pageY;
}
let wrapperRect = this.wrapper.getBoundingClientRect();
x = x - wrapperRect.left - window.scrollX;
y = y - wrapperRect.top - window.scrollY;
}
const zoomMin = this.getZoomMin();
if (this.zoom < zoomMin) {
this.zoom = zoomMin;
}
if (this.zoom > this.options.zoomMax) {
this.zoom = this.options.zoomMax;
}
if (this.options.zoomMax2 && this.zoom > this.options.zoomMax2) {
this.zoom = this.options.zoomMax2;
}
this.Book.zoomTo(this.zoom, time, x, y);
this.onZoom(this.zoom);
},
zoomOut: function (e) {
var newZoom = this.zoom / this.options.zoomStep;
// if (newZoom < 1 && this.zoom > 1) {
// newZoom = 1;
// }
const zoomMin = this.getZoomMin();
newZoom = newZoom < zoomMin ? zoomMin : newZoom;
if (this.zoom == newZoom) {
return;
}
this.zoom = newZoom;
this.zoomTo(this.zoom, this.options.zoomTime, e);
},
zoomIn: function (e) {
var newZoom = this.zoom * this.options.zoomStep;
// if (newZoom > 1 && this.zoom < 1) {
// newZoom = 1;
// }
if (newZoom > this.options.zoomMax) {
newZoom = this.options.zoomMax;
}
if (this.zoom == newZoom) {
return;
}
this.zoom = newZoom;
this.zoomTo(this.zoom, this.options.zoomTime, e);
},
getZoomMin: function () {
return this.options.viewMode == 'scroll' ? this.options.zoomMin2 : this.options.zoomMin;
},
nextPage: function () {
if (!this.Book) {
return;
}
this.flippingPage = true;
if (this.nextEnabled) {
this.Book.nextPage();
window.getSelection().removeAllRanges();
}
},
prevPage: function () {
if (!this.Book) {
return;
}
this.flippingPage = true;
if (this.prevEnabled) {
this.Book.prevPage();
window.getSelection().removeAllRanges();
}
},
firstPage: function () {
this.goToPage(1);
},
lastPage: function () {
this.goToPage(this.options.pages.length);
},
goToPage: function (pageNumber, instant) {
if (!this.Book) {
return;
}
if (!instant) {
this.flippingPage = true;
}
if (!this.options.cover) {
pageNumber++;
}
if (pageNumber < 1) {
pageNumber = 1;
} else if (pageNumber > this.options.numPages && !this.options.rightToLeft) {
pageNumber = this.options.numPages;
}
this.Book.goToPage(pageNumber, instant);
window.getSelection().removeAllRanges();
},
moveBook: function (direction) {
if (this.Book && this.Book.move) {
this.Book.move(direction);
}
},
onZoom: function (newZoom) {
this.zoom = newZoom;
const zoomMin = this.getZoomMin();
this.enableButton(this.btnZoomIn, newZoom < this.options.zoomMax);
this.enableButton(this.btnZoomOut, newZoom > zoomMin);
this.enableSwipe(newZoom <= 1);
},
enableSwipe: function (val) {
this.swipeEnabled = val;
},
createCurrentPage: function () {
var self = this;
var o = this.options;
var menu;
var cssClass = 'flipbook-currentPageHolder ';
if (o.currentPage.vAlign == 'top') {
if (o.currentPage.hAlign == 'left') {
menu = this.menuTL;
} else if (o.currentPage.hAlign == 'right') {
menu = this.menuTR;
} else {
menu = this.menuTC;
}
} else {
if (o.currentPage.hAlign == 'left') {
menu = this.menuBL;
} else if (o.currentPage.hAlign == 'right') {
menu = this.menuBR;
} else {
menu = this.menuBC;
}
}
var floating =
(o.currentPage.vAlign == 'top' && o.menu2Transparent) ||
(o.currentPage.vAlign != 'top' && o.menuTransparent);
var bgColor = floating ? o.floatingBtnBackground : '';
var color = floating ? o.floatingBtnColor : o.btnColor;
var textShadiw = floating ? o.floatingBtnTextShadow : '';
var radius = floating ? o.floatingBtnRadius : o.btnRadius;
var currentPageHolder = document.createElement('div');
menu.appendChild(currentPageHolder);
currentPageHolder.style.margin = o.currentPage.marginV + 'px ' + o.currentPage.marginH + 'px';
currentPageHolder.style.height = o.btnSize + 'px';
currentPageHolder.style.padding = o.btnPaddingV + 'px';
if (!floating) {
cssClass += ' skin-color';
}
currentPageHolder.className = cssClass;
currentPageHolder.style.color = color;
currentPageHolder.style.background = bgColor;
currentPageHolder.style.textShadow = textShadiw;
currentPageHolder.style.borderRadius = radius + 'px';
if (o.currentPage.order) {
currentPageHolder.style.order = o.currentPage.order;
}
this.currentPageHolder = currentPageHolder;
var form = document.createElement('form');
currentPageHolder.appendChild(form);
form.addEventListener('submit', function (e) {
e.preventDefault();
var value = parseInt(self.currentPageInput.value, 10);
if (self.options.rightToLeft) {
value = o.pages.length - value + 1;
value -= self.options.pageNumberOffset;
} else {
value = Math.min(value, o.pages.length);
value += self.options.pageNumberOffset;
}
self.goToPage(value);
return false;
});
this.currentPageInput = document.createElement('input');
this.currentPageInput.type = 'text';
this.currentPageInput.className = 'flipbook-currentPageInput';
this.currentPageInput.style.margin = o.currentPage.marginV + 'px ' + o.currentPage.marginH + 'px';
this.currentPageInput.style.color = color;
this.currentPageInput.addEventListener('focus', function () {
self.currentPageInput.value = '';
});
this.currentPageInput.addEventListener('blur', function () {
self.currentPageInput.value = self.currentPageString;
});
form.appendChild(this.currentPageInput);
var digits = String(o.numPages).length;
this.currentPageInput.classList.add('digits-' + digits);
this.currentPageInput.setAttribute('maxlength', digits);
this.currentPage = document.createElement('div');
this.currentPage.className = 'flipbook-currentPageNumber';
currentPageHolder.appendChild(this.currentPage);
if (!floating) {
this.currentPageInput.classList.add('skin-color');
}
},
createMenuHeader: function (el, title, _) {
var header = document.createElement('div');
header.className = 'flipbook-menu-header skin-clor flipbook-font';
el.appendChild(header);
var titleSpan = document.createElement('span');
titleSpan.textContent = title;
titleSpan.className = 'flipbook-menu-title skin-color';
header.appendChild(titleSpan);
var btnClose = document.createElement('span');
btnClose.className = 'flipbook-btn-close skin-color skin-color-bg';
header.appendChild(btnClose);
btnClose.addEventListener('click', (e) => {
e.stopPropagation();
e.preventDefault();
this.closeMenus();
});
var closeIcon = this.createSVGIcon('close');
btnClose.appendChild(closeIcon);
},
createToc: function () {
var tocArray = this.options.tableOfContent;
this.tocHolder = document.createElement('div');
this.tocHolder.className = 'flipbook-tocHolder flipbook-side-menu skin-color-bg';
this.wrapper.appendChild(this.tocHolder);
this.tocHolder.style[this.options.sideMenuPosition] = '0';
this.tocHolder.classList.add('flipbook-hidden');
this.createMenuHeader(this.tocHolder, this.strings.tableOfContent, this.toggleToc);
this.toc = document.createElement('div');
this.toc.className = 'flipbook-toc';
this.tocHolder.appendChild(this.toc);
var arr = this.options.pages;
if (!tocArray || !tocArray.length) {
tocArray = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i].title) {
tocArray.push({
title: arr[i].title,
page: String(i + 1),
pageNumberDisplay: arr[i].name,
});
}
}
}
for (var i = 0; i < tocArray.length; i++) {
if (arr[i] && arr[i].name && tocArray[i].page) {
tocArray[i].pageNumberDisplay = arr[tocArray[i].page - 1].name;
}
}
var iconExpand = this.createSVGIcon('next');
this.tocScroller = this.buildTOC(tocArray);
this.tocScroller.className = 'flipbook-toc-scroller';
this.toc.appendChild(this.tocScroller);
this.initColors();
this.tocCreated = true;
this.toggleToc();
},
buildTOC: function (items) {
const self = this;
const ul = document.createElement('ul');
const expandSvg = this.createSVGIcon('next');
items.forEach((item) => {
const li = document.createElement('li');
const itemDiv = document.createElement('div');
itemDiv.classList.add('toc-item', 'skin-color');
const titleContainer = document.createElement('div');
titleContainer.classList.add('title-container');
if (item.items && item.items.length > 0) {
const expandIcon = document.createElement('span');
expandIcon.classList.add('expand-icon');
expandIcon.innerHTML = expandSvg.outerHTML;
expandIcon.addEventListener('click', function (event) {
event.stopPropagation();
const subUl = li.querySelector('ul');
if (subUl.style.display === 'none') {
subUl.style.display = 'block';
expandIcon.classList.add('expanded');
} else {
subUl.style.display = 'none';
expandIcon.classList.remove('expanded');
}
});
titleContainer.appendChild(expandIcon);
} else {
const spacer = document.createElement('span');
spacer.classList.add('spacer');
spacer.innerHTML = ' ';
titleContainer.appendChild(spacer);
}
const titleSpan = document.createElement('span');
titleSpan.textContent = item.title;
titleSpan.classList.add('title');
titleContainer.appendChild(titleSpan);
itemDiv.appendChild(titleContainer);
const pageSpan = document.createElement('span');
pageSpan.textContent = item.pageNumberDisplay || item.page;
pageSpan.classList.add('page-number');
itemDiv.appendChild(pageSpan);
itemDiv.addEventListener('click', function (e) {
e.stopPropagation();
e.preventDefault();
if (self.options.tableOfContentCloseOnClick) {
self.toggleToc(false);
}
if (!item.page && item.dest) {
if (typeof item.dest === 'string') {
self.pdfService.pdfDocument.getDestination(item.dest).then(function (destArray) {
self.goToDest(destArray);
});
} else {
self.goToDest(item.dest);
}
} else {
var targetPage = Number(item.page);
targetPage = self.options.rightToLeft ? self.options.pages.length - targetPage + 1 : targetPage;
setTimeout(function () {
self.goToPage(targetPage);
}, 200);
}
});
li.appendChild(itemDiv);
if (item.items && item.items.length > 0) {
const subUl = this.buildTOC(item.items);
subUl.style.display = 'none';
li.appendChild(subUl);
}
ul.appendChild(li);
});
return ul;
},
goToDest: function (destArray) {
var self = this;
self.pdfService.pdfDocument.getPageIndex(destArray[0]).then(function (index) {
var targetPage = index + 1;
if (self.options.doublePage) {
targetPage = 2 * targetPage - 1;
}
targetPage = self.options.rightToLeft ? self.options.pages.length - targetPage + 1 : targetPage;
setTimeout(function () {
self.goToPage(targetPage);
}, 200);
});
},
enablePrev: function (val) {
if (this.prevEnabled == val || !this.btnPrev) return;
this.enableButton(this.btnPrev, val);
this.enableButton(this.btnFirst, val);
this.prevEnabled = val;
this.Book.enablePrev(val);
},
enableNext: function (val) {
if (this.nextEnabled == val || !this.btnNext) return;
this.enableButton(this.btnNext, val);
this.enableButton(this.btnLast, val);
this.nextEnabled = val;
this.Book.enableNext(val);
},
enableButton: function (button, enabled) {
if (typeof button === 'undefined') {
return;
}
if (enabled) {
button.classList.remove('disabled');
} else {
button.classList.add('disabled');
}
button.enabled = enabled;
},
resize: function (force) {
var o = this.options;
this.updateWrapperDimensions();
if (!this.Book || !this.Book.enabled) {
return;
}
if (this.menuShowing) {
this.bookLayer.style.bottom =
!o.menuOverBook && this.menuBottom ? this.menuBottom.offsetHeight + 'px' : '0px';
this.bookLayer.style.top = !o.menu2OverBook && this.menuTop ? this.menuTop.offsetHeight + 'px' : '0px';
}
if (this.tocShowing || this.thumbsShowing || this.searchShowing || this.bookmarkShowing) {
var sidebarWdith = this.tocShowing
? this.tocHolder.getBoundingClientRect().width
: this.thumbsShowing && this.options.thumbsStyle === 'overlay'
? 0
: this.thumbs.thumbHolder.getBoundingClientRect().width;
this.bookLayer.style[this.options.sideMenuPosition] = `${sidebarWdith}px`;
let sideMenuCss = { bottom: '0px', top: '0px' };
if (!o.sideMenuOverMenu) {
sideMenuCss.bottom = this.menuBottom.offsetHeight + 'px';
}
if (!o.sideMenuOverMenu2) {
sideMenuCss.top = this.menuTop.offsetHeight + 'px';
}
var sideMenus = this.wrapper.querySelectorAll('.flipbook-side-menu');
sideMenus.forEach(function (element) {
for (var property in sideMenuCss) {
if (sideMenuCss.hasOwnProperty(property)) {
element.style[property] = sideMenuCss[property];
}
}
});
} else {
this.bookLayer.style[this.options.sideMenuPosition] = '0px';
}
this.adjustZoomLimits();
this.Book.onResize(force);
if (o.zoomReset) {
this.Book.zoomTo(o.zoomMin);
}
},
updateWrapperDimensions: function () {
let rect = this.bookLayer.getBoundingClientRect();
this.wrapperW = rect.width;
this.wrapperH = rect.height;
},
adjustZoomLimits: function () {
var o = this.options;
var wrapperRatio = this.wrapperW / this.wrapperH;
var pageRatio = this.pageW / this.pageH;
var bookRatio = 2 * pageRatio;
if (o.viewMode == 'scroll') {
o.zoomMax = (2 * ((o.zoomSize * o.pageWidth) / o.pageHeight)) / this.wrapperW;
} else if (
o.responsiveView &&
this.wrapperW <= o.responsiveViewTreshold &&
wrapperRatio < bookRatio &&
wrapperRatio < o.responsiveViewRatio
) {
o.zoomMax = (o.zoomSize / this.wrapperH) * (wrapperRatio > pageRatio ? 1 : pageRatio / wrapperRatio);
} else {
o.zoomMax = (o.zoomSize / this.wrapperH) * (wrapperRatio > bookRatio ? 1 : bookRatio / wrapperRatio);
}
o.zoomMax = Math.max(o.zoomMax, o.zoomMin);
},
pdfResize: function () {
var self = this;
self.Book.onZoom();
},
createThumbs: function () {
this.thumbs = new FLIPBOOK.Thumbnails(this);
},
toggleThumbs: function (value) {
if (!this.thumbs) {
this.createThumbs();
}
if (typeof value != 'undefined') {
this.thumbsShowing = !value;
}
if (!this.thumbsShowing) {
this.closeMenus();
this.thumbs.show();
this.thumbsShowing = true;
} else {
this.thumbs.hide();
this.thumbsShowing = false;
}
this.resize();
},
toggleToc: function (value) {
if (!this.tocCreated) {
this.createToc();
return;
}
if (!this.tocShowing || value) {
this.closeMenus();
this.tocShowing = true;
this.tocHolder.classList.remove('flipbook-hidden');
} else {
this.tocHolder.classList.add('flipbook-hidden');
this.tocShowing = false;
}
this.resize();
},
toggleSearch: function (value) {
if (!this.thumbs) {
this.createThumbs();
}
if (typeof value != 'undefined') {
this.searchShowing = !value;
}
if (!this.searchShowing) {
this.closeMenus();
this.thumbs.show();
this.thumbs.showSearch();
this.searchShowing = true;
} else {
this.thumbs.hide();
this.searchShowing = false;
this.unmark();
}
this.resize();
},
toggleBookmark: function (value) {
if (!this.thumbs) {
this.createThumbs();
}
if (typeof value != 'undefined') {
this.bookmarkShowing = !value;
}
if (!this.bookmarkShowing) {
this.closeMenus();
this.thumbs.show();
this.thumbs.showBookmarks();
this.bookmarkShowing = true;
} else {
this.thumbs.hide();
this.bookmarkShowing = false;
}
this.resize();
},
closeMenus: function () {
if (this.thumbsShowing) {
this.toggleThumbs();
}
if (this.tocShowing) {
this.toggleToc();
}
if (this.searchShowing) {
this.toggleSearch();
}
if (this.bookmarkShowing) {
this.toggleBookmark();
}
if (this.printMenuShowing) {
this.togglePrintMenu();
}
if (this.dlMenuShowing) {
this.toggleDownloadMenu();
}
if (this.shareMenuShowing) {
this.toggleShareMenu();
}
if (this.toolsMenuShowing) {
this.toggleToolsMenu();
}
if (this.notesMenuShowing) {
this.toggleNotesMenu();
}
if (this.passwordMenuShowing) {
this.togglePasswordMenu();
}
},
toggleToolsMenu: function () {
var self = this;
if (!this.toolsMenu.parentNode) {
this.btnTools.appendChild(this.toolsMenu);
this.initColors();
this.closeMenus();
this.toolsMenu.classList.remove('flipbook-hidden');
this.btnTools.classList.add('flipbook-btn-active');
this.btnTools.classList.remove('flipbook-has-tooltip');
this.toolsMenuShowing = true;
this.toolsMenu.addEventListener('click', function (event) {
event.stopPropagation();
});
document.addEventListener('click', function (event) {
if (self.toolsMenuShowing) {
self.toggleToolsMenu();
}
if (self.shareMenuShowing) {
self.toggleShareMenu();
}
});
} else if (!this.toolsMenuShowing) {
this.closeMenus();
this.toolsMenu.classList.remove('flipbook-hidden');
this.toolsMenuShowing = true;
this.btnTools.classList.add('flipbook-btn-active');
this.btnTools.classList.remove('flipbook-has-tooltip');
} else {
this.toolsMenu.classList.add('flipbook-hidden');
this.toolsMenuShowing = false;
this.btnTools.classList.remove('flipbook-btn-active');
this.btnTools.classList.add('flipbook-has-tooltip');
}
},
togglePrintMenu: function () {
var self = this;
if (!this.printMenu) {
this.printMenu = document.createElement('div');
this.printMenu.className = 'flipbook-sub-menu flipbook-font';
this.wrapper.appendChild(this.printMenu);
var center = document.createElement('div');
center.className = 'flipbook-sub-menu-center';
this.printMenu.appendChild(center);
var content = document.createElement('div');
content.className = 'flipbook-sub-menu-content skin-color-bg';
center.appendChild(content);
this.createMenuHeader(content, this.strings.print, this.togglePrintMenu.bind(this));
var currentPageButton = document.createElement('a');
currentPageButton.innerHTML =
'' + this.strings.printCurrentPage + '
';
content.appendChild(currentPageButton);
currentPageButton.addEventListener('click', function () {
self.printPage(self.cPage[0], this);
});
var leftPageButton = document.createElement('a');
leftPageButton.innerHTML =
'' + this.strings.printLeftPage + '
';
content.appendChild(leftPageButton);
leftPageButton.addEventListener('click', function () {
self.printPage(self.cPage[0], this);
});
var rightPageButton = document.createElement('a');
rightPageButton.innerHTML =
'' + this.strings.printRightPage + '
';
content.appendChild(rightPageButton);
rightPageButton.addEventListener('click', function () {
self.printPage(self.cPage[1], this);
});
var allPagesButton = document.createElement('a');
allPagesButton.innerHTML = '' + this.strings.printAllPages + '
';
content.appendChild(allPagesButton);
allPagesButton.addEventListener('click', function () {
self.togglePrintWindow();
});
this.closeMenus();
this.printMenuShowing = true;
this.initColors();
this.updateCurrentPage();
} else if (!this.printMenuShowing) {
this.closeMenus();
this.printMenu.style.display = 'block';
this.printMenuShowing = true;
this.updateCurrentPage();
} else {
this.printMenu.style.display = 'none';
this.printMenuShowing = false;
}
},
toggleDownloadMenu: function () {
var self = this;
if (!this.dlMenu) {
this.dlMenu = document.createElement('div');
this.dlMenu.className = 'flipbook-sub-menu flipbook-font';
this.wrapper.appendChild(this.dlMenu);
var center = document.createElement('div');
center.className = 'flipbook-sub-menu-center';
this.dlMenu.appendChild(center);
var content = document.createElement('div');
content.className = 'flipbook-sub-menu-content skin-color-bg';
center.appendChild(content);
this.createMenuHeader(content, this.strings.download, this.toggleDownloadMenu.bind(this));
var currentPageButton = document.createElement('a');
currentPageButton.innerHTML =
'' + this.strings.downloadCurrentPage + '
';
content.appendChild(currentPageButton);
currentPageButton.addEventListener('click', function () {
self.downloadPage(self.cPage[0], this);
});
var leftPageButton = document.createElement('a');
leftPageButton.innerHTML =
'' + this.strings.downloadLeftPage + '
';
content.appendChild(leftPageButton);
leftPageButton.addEventListener('click', function () {
self.downloadPage(self.cPage[0], this);
});
var rightPageButton = document.createElement('a');
rightPageButton.innerHTML =
'' + this.strings.downloadRightPage + '
';
content.appendChild(rightPageButton);
rightPageButton.addEventListener('click', function () {
self.downloadPage(self.cPage[1], this);
});
var allPagesButton = document.createElement('a');
allPagesButton.innerHTML =
'' + this.strings.downloadAllPages + '
';
content.appendChild(allPagesButton);
allPagesButton.addEventListener('click', function () {
var link = document.createElement('a');
link.href = self.options.btnDownloadPages.url;
var filename = link.href.split('/').pop().split('#')[0].split('?')[0];
link.download = filename;
link.dispatchEvent(new MouseEvent('click'));
});
this.closeMenus();
this.dlMenuShowing = true;
this.initColors();
this.updateCurrentPage();
} else if (!this.dlMenuShowing) {
this.closeMenus();
this.dlMenu.style.display = 'block';
this.dlMenuShowing = true;
this.updateCurrentPage();
} else {
this.dlMenu.style.display = 'none';
this.dlMenuShowing = false;
}
},
toggleShareMenu: function () {
var self = this;
if (!this.shareMenu.parentNode) {
this.btnShare.appendChild(this.shareMenu);
this.initColors();
this.closeMenus();
this.shareMenu.classList.remove('flipbook-hidden');
this.shareMenu.classList.add('flipbook-btn-active');
this.shareMenu.classList.remove('flipbook-has-tooltip');
this.shareMenuShowing = true;
this.shareMenu.addEventListener('click', function (event) {
event.stopPropagation();
});
document.addEventListener('click', function (event) {
if (self.toolsMenuShowing) {
self.toggleToolsMenu();
}
if (self.shareMenuShowing) {
self.toggleShareMenu();
}
});
var o = this.options;
var networks = [
'facebook',
'twitter',
'pinterest',
'linkedin',
'whatsapp',
'digg',
'reddit',
'email',
'copyLink',
];
var left = window.screen.width / 2 - 300;
var top = window.screen.height / 2 - 300;
networks.forEach(function (network) {
if (o[network].enabled) {
var btn = document.createElement('span');
btn.className = 'flipbook-menu-btn-wrapper flipbook-has-tooltip';
btn.setAttribute('data-network', network);
btn.setAttribute('data-tooltip', o[network].title || o.strings[network]);
let svg = self.createSVGIcon(network);
btn.appendChild(svg);
self.shareMenu.appendChild(btn);
btn.addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();
var network = this.dataset.network;
if (network == 'copyLink') {
const currentUrl = window.location.href;
function fallbackCopyTextToClipboard(text) {
const textArea = document.createElement('textarea');
textArea.value = text;
textArea.style.position = 'fixed'; // Avoid scrolling to bottom of page
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand('copy');
btn.setAttribute('data-tooltip', o.strings.copied);
setTimeout(() => {
btn.setAttribute('data-tooltip', o.strings.copyLink);
}, 2000);
} catch (err) {
console.error('Fallback: Unable to copy text', err);
}
document.body.removeChild(textArea);
}
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard
.writeText(currentUrl)
.then(() => {
btn.setAttribute('data-tooltip', o.strings.copied);
setTimeout(() => {
btn.setAttribute('data-tooltip', o.strings.copyLink);
}, 2000);
})
.catch((err) => {
console.error('Failed to copy the link: ', err);
});
} else {
fallbackCopyTextToClipboard(currentUrl);
}
} else {
var text = encodeURIComponent(
o.shareTitle || o[network].description || 'Check out this flipbook'
);
var url = encodeURIComponent(o.shareUrl || window.location.href);
var image = encodeURIComponent(o.shareImage || '');
var shareUrl;
switch (network) {
case 'facebook':
shareUrl = 'https://www.facebook.com/sharer.php?u=' + url + '&t=' + text;
break;
case 'twitter':
shareUrl = 'https://twitter.com/intent/tweet?text=' + text + '&url=' + url;
break;
case 'linkedin':
shareUrl =
'https://www.linkedin.com/shareArticle?mini=true&url=' + url + '&title=' + text;
break;
case 'pinterest':
shareUrl =
'https://www.pinterest.com/pin/create/button/?url=' +
url +
'&media=' +
image +
'&description=' +
text;
break;
case 'email':
shareUrl = 'mailto:?subject=' + text + '&body=' + url;
break;
case 'digg':
shareUrl = 'http://digg.com/submit?url=' + url + '&title=' + text;
break;
case 'reddit':
shareUrl = 'http://reddit.com/submit?url=' + url + '&title=' + text;
break;
case 'whatsapp':
shareUrl = o.isMobile
? 'whatsapp://send?text=' + text + '%20' + url
: 'https://wa.me?text=' + text + '%20' + url;
break;
}
window.open(
shareUrl,
'Share',
'toolbar=no, location=no, directories=no, status=no, ' +
'menubar=no, scrollbars=no, resizable=no, copyhistory=no, ' +
'width=600, height=600, top=' +
top +
', left=' +
left
);
}
});
}
});
} else if (!this.shareMenuShowing) {
this.closeMenus();
this.shareMenu.classList.remove('flipbook-hidden');
this.shareMenuShowing = true;
this.btnShare.classList.add('flipbook-btn-active');
this.btnShare.classList.remove('flipbook-has-tooltip');
} else {
this.shareMenu.classList.add('flipbook-hidden');
this.shareMenuShowing = false;
this.btnShare.classList.remove('flipbook-btn-active');
this.btnShare.classList.add('flipbook-has-tooltip');
}
},
toggleNotesMenu: function () {
if (!this.notesMenu) {
this.notesMenu = jQuery(document.createElement('div'))
.appendTo(this.wrapper)
.addClass('flipbook-sub-menu flipbook-font');
var center = jQuery('').appendTo(this.notesMenu);
var content = jQuery('
').appendTo(center);
this.createMenuHeader(content, this.options.strings.notes, this.toggleNotesMenu);
this.closeMenus();
this.notesMenuShowing = true;
this.initColors();
const self = this;
this.options.noteTypes.forEach(function (type) {
const row = document.createElement('div');
row.innerHTML =
'' +
type.title +
'' +
'';
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.dataset.id = type.id;
checkbox.checked = type.enabled;
checkbox.onchange = function () {
type.enabled = this.checked;
self.updateNoteSettings(type);
};
row.appendChild(checkbox);
content[0].appendChild(row);
});
} else if (!this.notesMenuShowing) {
this.notesMenu.show();
this.closeMenus();
this.notesMenuShowing = true;
} else {
this.notesMenu.hide();
this.notesMenuShowing = false;
}
},
updateNoteSettings: function (noteType) {
this.options.noteTypes.forEach(function (type) {
if (type.id == noteType.id) {
type.enabled = noteType.enabled;
}
});
this.noteService.updateNoteVisibility();
},
bookmarkPage: function (index) {
var arr = this.getBookmarkedPages();
if (arr.indexOf(String(index)) < 0) {
arr.push(index);
}
this.setBookmarkedPages(arr);
this.thumbs.showBookmarkedThumbs();
if (!this.bookmarkShowing) {
this.toggleBookmark();
}
},
removeBookmark: function (index) {
var arr = this.getBookmarkedPages();
if (arr.indexOf(String(index)) > -1) {
arr.splice(arr.indexOf(String(index)), 1);
}
this.setBookmarkedPages(arr);
this.thumbs.showBookmarkedThumbs();
if (!this.bookmarkShowing) {
this.toggleBookmark();
}
},
isBookmarked: function (index) {
var arr = this.getBookmarkedPages();
return arr.indexOf(String(index)) > 0;
},
getBookmarkedPages: function () {
var str = localStorage.getItem(this.options.name + '_flipbook_bookmarks');
if (str) {
return str.split(';');
} else {
return [];
}
},
setBookmarkedPages: function (arr) {
localStorage.setItem(this.options.name + '_flipbook_bookmarks', arr.join(';'));
},
printPage: function (index, _) {
var url;
var page = this.options.pages[index];
var size = this.options.pageTextureSize;
var self = this;
if (page) {
if (page.print) {
url = page.print;
} else if (page.images && page.images[size]) {
const c = document.createElement('canvas');
const ctx = c.getContext('2d');
const image = page.images[size];
c.width = image.width;
c.height = image.height;
ctx.drawImage(image, 0, 0, image.width, image.height);
url = c.toDataURL();
c.width = c.height = 1;
ctx.clearRect(0, 0, 1, 1);
} else if (page.src) {
url = page.src;
}
}
if (url) {
this.togglePrintWindow(url);
} else {
const pageToLoad = this.options.cover ? index : index + 1;
this.loadPage(pageToLoad, size, function () {
self.printPage(index);
});
}
},
downloadPage: function (index) {
var url;
var page = this.options.pages[index];
var size = this.options.pageTextureSize;
if (page && page.download) {
url = page.download;
} else if (page && page.src) {
url = page.src;
} else if (page && page.images && page.images[size]) {
const c = document.createElement('canvas');
const ctx = c.getContext('2d');
const image = page.images[size];
c.width = image.width;
c.height = image.height;
ctx.drawImage(image, 0, 0, image.width, image.height);
url = c.toDataURL();
c.width = c.height = 1;
ctx.clearRect(0, 0, 1, 1);
}
if (url) {
var link = document.createElement('a');
link.href = url;
link.download = 'page' + String(index + 1) + '.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
var self = this;
const pageToLoad = this.options.cover ? index : index + 1;
this.loadPage(pageToLoad, this.options.pageTextureSize, function () {
self.downloadPage(index);
});
}
},
printFile: function (url) {
var printIframe = document.createElement('iframe');
printIframe.classList.add('flipbook-hidden');
printIframe.src = url;
document.body.appendChild(printIframe);
printIframe.contentWindow.onload = function () {
var self = this;
setTimeout(function () {
self.print();
}, 100);
};
},
togglePrintWindow: function (url) {
var self = this;
var printContent = '';
if (url) {
printContent = url;
} else if (self.options.printPdfUrl) {
self.printFile(self.options.printPdfUrl);
return;
} else if (self.options.pdfUrl) {
self.printFile(self.options.pdfUrl);
return;
}
function printme() {
var link = 'about:blank';
var pw = window.open(link, '_new');
pw.document.open();
if (url) {
printContent = '
\n';
} else {
for (var i = 0; i < self.options.pages.length; i++) {
if (self.options.pages[i].src) {
printContent += ' + ')
\n';
}
}
}
var printHtml = printWindowHtml(printContent);
pw.document.write(printHtml);
pw.document.close();
}
function printWindowHtml(printContent) {
return (
'\n' +
'\n' +
'Temporary Printing Window \n' +
'