/* * Real3D FlipBook [https://real3dflipbook.com] * @author creativeinteractivemedia [https://codecanyon.net/user/creativeinteractivemedia/portfolio] * @version 4.10 * @date 2025-05-15 */ 'use strict'; var FLIPBOOK = FLIPBOOK || {}; FLIPBOOK.BookSwipe = function (el, wrapper, main, options) { this.options = options; this.main = main; this.singlePage = options.singlePageMode; if (this.singlePage) { this.view = 1; } this.pageWidth = this.options.pageWidth; this.pageHeight = this.options.pageHeight; this.slides = []; this.pagesArr = []; this.leftPage = 0; this.rightPage = 0; this.rotation = 0; this.prevPageEnabled = false; this.setRightIndex(options.rightToLeft ? options.pages.length : 0); this.currentSlide = 0; this.flipping = false; this.wrapper = wrapper; this.scroller = el; this.scroller.classList.remove('book'); this.scroller.classList.add('flipbook-carousel-scroller'); this.iscroll = new IScroll(this.wrapper, { snap: true, snapSpeed: 200 * this.options.pageFlipDuration, freeScroll: true, scrollX: true, scrollY: false, preventDefault: false, eventPassthrough: 'vertical', }); var self = this; this.zoomDisabled = false; this.iscroll.on('scrollStart', function () { self.zoomDisabled = true; }); this.iscroll.on('scrollEnd', function () { self.zoomDisabled = false; }); for (var i = 0; i < 3; i++) { var slide = document.createElement('div'); slide.className = 'flipbook-carousel-slide'; var slideInner = document.createElement('div'); slideInner.className = 'slide-inner'; slide.appendChild(slideInner); this.scroller.appendChild(slide); this.slides.push(slide); } this.slides[0].iscroll = new IScroll(this.slides[0], { zoom: true, scrollX: true, scrollY: true, freeScroll: true, keepInCenterV: true, keepInCenterH: true, preventDefault: false, }); this.slides[2].iscroll = new IScroll(this.slides[2], { zoom: true, scrollX: true, scrollY: true, freeScroll: true, keepInCenterV: true, keepInCenterH: true, preventDefault: false, }); this.slides[1].iscroll = new IScroll(this.slides[1], { zoom: true, scrollX: true, scrollY: true, freeScroll: true, keepInCenterV: true, keepInCenterH: true, preventDefault: false, }); // eslint-disable-next-line no-redeclare for (var i = 0; i < 3; i++) { this.slides[i].iscroll.on('zoomEnd', function () { var scale = options.main.zoom; this.options.eventPassthrough = scale > 1 ? '' : 'vertical'; this.options.freeScroll = scale > 1; this.refresh(); }); } this.resizeInnerSlides(); var page; options.pages.forEach((page, index) => { if (!page.empty) { const newPage = new FLIPBOOK.PageSwipe(this, index, page.src, page.htmlContent); this.pagesArr.push(newPage); if (options.loadAllPages) { newPage.load(); } } }); if (!options.cover) { page = new FLIPBOOK.PageSwipe(this, options.numPages); this.pagesArr.push(page); } this.iscroll.on('scrollStart', function () { if (this.distX < 0) { self.loadNextSpread(); } else { self.loadPrevSpread(); } }); this.iscroll.on('scrollEnd', function () { var sliderPage = this.currentPage.pageX; if (self.currentSlide == sliderPage) { return; } if (self.singlePage) { if (sliderPage > self.currentSlide) { self.setRightIndex(self.rightIndex + 1); } else if (sliderPage < self.currentSlide) { self.setRightIndex(self.rightIndex - 1); } } else { if (sliderPage > self.currentSlide) { self.setRightIndex(self.rightIndex + 2); } else if (sliderPage < self.currentSlide) { self.setRightIndex(self.rightIndex - 2); } } self.currentSlide = sliderPage; self.updateVisiblePages(); self.flipping = false; }); this.flipEnabled = true; this.nextEnabled = true; this.prevEnabled = true; main.on('enableIScroll', () => { this.enableIscroll(); }); main.on('disableIScroll', () => { this.disableIscroll(); }); main.on('pageLoaded', function (_) {}); }; FLIPBOOK.BookSwipe.prototype = Object.create(FLIPBOOK.Book.prototype); FLIPBOOK.BookSwipe.prototype.constructor = FLIPBOOK.BookSwipe; FLIPBOOK.BookSwipe.prototype.enableIscroll = function () { if (this.iscrollDisabled) { if (this.zoom > 1) { if (this.slides[0].iscroll) { this.slides[0].iscroll.enable(); } if (this.slides[1].iscroll) { this.slides[1].iscroll.enable(); } if (this.slides[2].iscroll) { this.slides[2].iscroll.enable(); } } else { this.iscroll.enable(); } this.iscrollDisabled = false; } }; FLIPBOOK.BookSwipe.prototype.disableIscroll = function () { if (!this.iscrollDisabled) { if (this.zoom > 1) { if (this.slides[0].iscroll) { this.slides[0].iscroll.disable(); this.slides[0].iscroll.initiated = false; } if (this.slides[1].iscroll) { this.slides[1].iscroll.disable(); this.slides[1].iscroll.initiated = false; } if (this.slides[2].iscroll) { this.slides[2].iscroll.disable(); this.slides[2].iscroll.initiated = false; } } else { this.iscroll.disable(); this.iscroll.initiated = false; } this.iscrollDisabled = true; } }; FLIPBOOK.BookSwipe.prototype.goToPage = function (value, instant) { if (!this.enabled) { return; } if (!this.flipEnabled) { return; } if (value > this.options.pages.length) { value = this.options.pages.length; } if (this.singlePage || value % 2 != 0) { value--; } if (isNaN(value) || value < 0) { value = 0; } if (instant) { this.setRightIndex(value); this.updateVisiblePages(); return; } if (this.singlePage) { if (value > this.rightIndex) { this.setSlidePages(this.currentSlide + 1, [value]); this.setRightIndex(value - 1); this.nextPage(instant); } else if (value < this.rightIndex) { this.setSlidePages(this.currentSlide - 1, [value]); this.setRightIndex(value + 1); this.prevPage(instant); } } else { if (this.options.rightToLeft && !this.options.backCover && value < 2) { value = 2; } if (value > this.rightIndex) { if (value >= this.pagesArr.length) { this.setSlidePages(2, [value - 1, value]); this.setRightIndex(value - 2); this.goToSlide(2, instant); } else { this.setSlidePages(this.currentSlide + 1, [value - 1, value]); this.setRightIndex(value - 2); this.nextPage(instant); } } else if (value < this.rightIndex) { if (value == 0) { this.setRightIndex(value + 2); this.setSlidePages(0, [value]); this.goToSlide(0, instant); } else { this.setRightIndex(value + 2); this.setSlidePages(this.currentSlide - 1, [value - 1, value]); this.prevPage(instant); } } } }; FLIPBOOK.BookSwipe.prototype.setRightIndex = function (value) { this.rightIndex = value; }; FLIPBOOK.BookSwipe.prototype.nextPage = function (instant) { if (this.currentSlide == 2) { return; } this.flipping = true; this.goToSlide(this.currentSlide + 1, instant); this.loadNextSpread(); }; FLIPBOOK.BookSwipe.prototype.prevPage = function (instant) { if (this.currentSlide == 0) { return; } this.flipping = true; this.goToSlide(this.currentSlide - 1, instant); this.loadPrevSpread(); }; FLIPBOOK.BookSwipe.prototype.enablePrev = function (val) { this.prevEnabled = val; }; FLIPBOOK.BookSwipe.prototype.enableNext = function (val) { this.nextEnabled = val; }; FLIPBOOK.BookSwipe.prototype.setSlidePages = function (slide, pages) { var self = this; var arr = []; for (var i = 0; i < pages.length; i++) { if (pages[i]) { arr.push(pages[i].index); } } if (this.slides[slide].pages && this.slides[slide].pages.length > 0) { if (arr.join('') === this.slides[slide].pages.join('')) { return; } } this.clearSlidePages(slide); var slideInner = this.slides[slide].firstChild; pages.forEach((page) => { let pageIndex; if (typeof page === 'number') { pageIndex = page; } else { pageIndex = page.index; } if (self.pagesArr[pageIndex]) { slideInner.appendChild(self.pagesArr[pageIndex].wrapper); self.slides[slide].pages.push(pageIndex); } }); this.resizeInnerSlides(); if (this.slides[slide].iscroll) { this.slides[slide].iscroll.refresh(); } }; FLIPBOOK.BookSwipe.prototype.clearSlidePages = function (slide) { this.slides[slide].firstChild.innerHTML = ''; this.slides[slide].pages = []; }; FLIPBOOK.BookSwipe.prototype.loadNextSpread = function () { var index = this.rightIndex; if (this.options.rightToLeft && !this.options.backCover) { index--; } var next = this.pagesArr[index + 1]; if (next) { next.load(); } if (!this.singlePage) { var afterNext = this.pagesArr[index + 2]; if (afterNext) { afterNext.load(); } } }; FLIPBOOK.BookSwipe.prototype.loadPrevSpread = function () { var index = this.rightIndex; var prev; if (this.options.rightToLeft && !this.options.backCover) { index--; } if (this.singlePage) { prev = this.pagesArr[index - 1]; if (prev) { prev.load(); } } else { prev = this.pagesArr[index - 2]; if (prev) { prev.load(); } var beforePrev = this.pagesArr[index - 3]; if (beforePrev) { beforePrev.load(); } } }; FLIPBOOK.BookSwipe.prototype.loadVisiblePages = function () { var main = this.options.main; var index = this.rightIndex; if (this.options.rightToLeft && !this.options.backCover && !this.singlePage) { index--; } var right = this.pagesArr[index]; var left = this.pagesArr[index - 1]; var next = this.pagesArr[index + 1]; var afterNext = this.pagesArr[index + 2]; var prev = this.pagesArr[index - 2]; var beforePrev = this.pagesArr[index - 3]; if (this.singlePage) { if (right) { right.load(function () { main.setLoadingProgress(1); if (left) { left.load(null, true); } if (next) { next.load(null, true); } }); } else if (left) { left.load(); } } else { if (left) { left.load(function () { if (right) { right.load(function () { main.setLoadingProgress(1); if (prev) { prev.load(null, true); } if (beforePrev) { beforePrev.load(null, true); } if (next) { next.load(null, true); } if (afterNext) { afterNext.load(null, true); } }); } else { main.setLoadingProgress(1); if (prev) { prev.load(null, true); } if (beforePrev) { beforePrev.load(null, true); } } }); } else { if (right) { right.load(function () { main.setLoadingProgress(1); if (next) { next.load(null, true); } if (afterNext) { afterNext.load(null, true); } }); } } } }; FLIPBOOK.BookSwipe.prototype.updateVisiblePages = function () { if (this.visiblePagesRightIndex === this.rightIndex) { return; } this.visiblePagesRightIndex = this.rightIndex; var index = this.rightIndex; if (this.options.rightToLeft && !this.options.backCover && !this.singlePage) { index--; } var right = this.pagesArr[index]; var left = this.pagesArr[index - 1]; var next = this.pagesArr[index + 1]; var afterNext = this.pagesArr[index + 2]; var prev = this.pagesArr[index - 2]; var beforePrev = this.pagesArr[index - 3]; if (next) { next.hideHTML(); } if (afterNext) { afterNext.hideHTML(); } if (prev) { prev.hideHTML(); } if (beforePrev) { beforePrev.hideHTML(); } if (this.singlePage) { if (right) { right.startHTML(); } if (!left) { //cover this.setSlidePages(0, [right]); if (next) { this.setSlidePages(1, [next]); } else { this.clearSlidePages(1); } this.goToSlide(0, true); this.clearSlidePages(2); } else { if (next) { this.setSlidePages(1, [right]); if (left) { this.setSlidePages(0, [left]); } this.setSlidePages(2, [next]); this.goToSlide(1, true); } else { if (right) { this.setSlidePages(2, [right]); } if (left) { this.setSlidePages(1, [left]); } this.goToSlide(2, true); this.clearSlidePages(0); } } if (left) { left.hideHTML(); } } else { if (!left) { if (right) { right.startHTML(); } //cover this.setSlidePages(0, [right]); if (afterNext) { this.setSlidePages(1, [next, afterNext]); } else { this.setSlidePages(1, [next]); } this.goToSlide(0, true); this.clearSlidePages(2); } else { left.startHTML(); if (right) { right.startHTML(); //L R if (!next) { this.setSlidePages(2, [left, right]); if (beforePrev) { this.setSlidePages(1, [beforePrev, prev]); } else { this.setSlidePages(1, [prev]); } this.goToSlide(2, true); this.clearSlidePages(0); } else { if (prev && !(this.rightIndex == 2 && !this.options.cover)) { this.setSlidePages(1, [left, right]); if (beforePrev) { this.setSlidePages(0, [beforePrev, prev]); } else { this.setSlidePages(0, [prev]); } if (afterNext) { this.setSlidePages(2, [next, afterNext]); } else { this.setSlidePages(2, [next]); } this.goToSlide(1, true); } else { this.setSlidePages(0, [left, right]); if (afterNext) { this.setSlidePages(1, [next, afterNext]); } else { this.setSlidePages(1, [next]); } this.clearSlidePages(2); } } } else { this.setSlidePages(2, [left]); if (beforePrev) { this.setSlidePages(1, [beforePrev, prev]); } else { this.setSlidePages(1, [prev]); } this.goToSlide(2, true); this.clearSlidePages(0); } } } this.loadVisiblePages(); this.flippedleft = (this.rightIndex + (this.rightIndex % 2)) / 2; this.flippedright = this.options.pages.length / 2 - this.flippedleft; this.options.main.turnPageComplete(); }; FLIPBOOK.BookSwipe.prototype.loadPage = function (index) { if (this.pagesArr[index]) { this.pagesArr[index].load(); } }; FLIPBOOK.BookSwipe.prototype.disable = function () { this.enabled = false; }; FLIPBOOK.BookSwipe.prototype.enable = function () { this.enabled = true; this.onResize(); }; FLIPBOOK.BookSwipe.prototype.resize = function () {}; FLIPBOOK.BookSwipe.prototype.updateSinglePage = function (singlePage) { this.singlePageView = singlePage; this.onResize(true); }; FLIPBOOK.BookSwipe.prototype.onResize = function (force) { var w = this.main.wrapperW; var h = this.main.wrapperH; if (w == 0 || h == 0) { return; } if (!force && this.w === w && this.h === h) { return; } this.w = w; this.h = h; var pw = this.pageWidth; var ph = this.pageHeight; var portrait = (2 * this.options.zoomMin * pw) / ph > w / h; var doublePage = !this.options.singlePageMode && (!this.options.responsiveView || w > this.options.responsiveViewTreshold || !portrait || w / h >= this.options.responsiveViewRatio); if (typeof this.singlePageView != 'undefined') { doublePage = !this.singlePageView; } var bw = doublePage ? 2 * pw : pw; var bh = ph; this.bw = bw; this.bh = bh; var scale; if (h / w > bh / bw) { //fit to width scale = ((bh / bw) * w) / this.options.pageHeight; } else { scale = h / this.options.pageHeight; } var spaceBetweenSlides = 0; for (var i = 0; i < this.slides.length; i++) { this.slides[i].style.width = w + spaceBetweenSlides + 'px'; this.slides[i].style.height = h + 'px'; this.slides[i].style.left = i * w + i * spaceBetweenSlides + 'px'; if (this.slides[i].iscroll) { this.slides[i].iscroll.options.zoomMin = this.options.zoomMin * scale; this.slides[i].iscroll.options.zoomMax = this.options.zoomMax * scale; this.slides[i].iscroll.refresh(); } } this.scroller.style.width = this.slides.length * (w + spaceBetweenSlides) + 'px'; this.iscroll.refresh(); if ((!doublePage || this.options.singlePageMode) && !this.singlePage) { if (this.rightIndex % 2 == 0 && this.rightIndex > 0) { this.setRightIndex(this.rightIndex - 1); } this.singlePage = true; this.view = 1; this.resizeInnerSlides(); } else if (doublePage && !this.options.singlePageMode && this.singlePage) { if (this.rightIndex % 2 != 0) { this.setRightIndex(this.rightIndex + 1); } this.singlePage = false; this.view = 2; this.resizeInnerSlides(); } this.zoomTo(this.zoom); // this.updateVisiblePages(); }; FLIPBOOK.BookSwipe.prototype.isFocusedRight = function () { return this.rightIndex % 2 == 0; }; FLIPBOOK.BookSwipe.prototype.isFocusedLeft = function () { return this.rightIndex % 2 == 1; }; FLIPBOOK.BookSwipe.prototype.resizeInnerSlides = function () { var pw = (this.options.pageHeight * this.pageWidth) / this.pageHeight; if (this.rotation == 90 || this.rotation == 270) { pw = (this.options.pageHeight * this.pageHeight) / this.pageWidth; } var sw = this.singlePage ? pw : 2 * pw; for (var i = 0; i < 3; i++) { sw = this.slides[i].pages && this.slides[i].pages.length == 1 ? pw : 2 * pw; this.slides[i].firstChild.style.width = `${sw}px`; } }; FLIPBOOK.BookSwipe.prototype.goToSlide = function (slideIndex, instant) { if (this.iscroll.currentPage.pageX == slideIndex) { return; } this.onResize(); var time = instant ? 0 : 600 * this.options.pageFlipDuration; var slide = this.slides[slideIndex]; if (slide.pages && slide.pages[0]) { this.pagesArr[slide.pages[0]].updateHtmlContent(); } if (this.iscroll.pages.length > 0) { this.iscroll.goToPage(slideIndex, 0, time); } if (instant) { this.currentSlide = slideIndex; } this.zoomTo(this.options.zoomMin); }; FLIPBOOK.BookSwipe.prototype.zoomIn = function (value, time, e) { if (e && e.type === 'mousewheel') { return; } this.zoomTo(value); }; FLIPBOOK.BookSwipe.prototype.zoomTo = function (zoom, time, x, y) { if (!this.enabled || this.zoomDisabled) { return; } x = x || 0; y = y || 0; if (zoom > 1) { this.disableFlip(); } if (w == 0 || h == 0) { return; } var m = this.main; var w = m.wrapperW; var h = m.wrapperH; var bw = m.bookW; var bh = m.bookH; var pw = m.pageW; var ph = m.pageH; var r1 = w / h; var r2 = pw / ph; var s = Math.min(this.zoom, 1); var zoomMin = Number(this.options.zoomMin); var self = this; function fitToHeight() { self.ratio = h / bh; fit(); } function fitToWidth() { self.ratio = self.view == 1 ? w / pw : w / bw; fit(); } function fit() { for (var i = 0; i < 3; i++) { if (self.slides[i].iscroll) { self.slides[i].iscroll.options.zoomMin = self.ratio * self.options.zoomMin; self.slides[i].iscroll.options.zoomMax = self.ratio * self.options.zoomMax; self.slides[i].iscroll.zoom(self.ratio * zoom, x, y, 0); } } } if ( !this.options.singlePageMode && this.options.responsiveView && w <= this.options.responsiveViewTreshold && r1 < 2 * r2 && r1 < this.options.responsiveViewRatio ) { this.view = 1; if (r2 > r1) { this.sc = (zoomMin * r1) / (r2 * s); } else { this.sc = 1; } if (w / h > pw / ph) { fitToHeight(); } else { fitToWidth(); } } else if (this.singlePage && r1 < 2 * r2) { if (r2 > r1) { this.sc = (zoomMin * r1) / (r2 * s); } else { this.sc = 1; } if (w / h > pw / ph) { fitToHeight(); } else { fitToWidth(); } } else { this.view = 2; if (r1 < 2 * r2) { this.sc = (zoomMin * r1) / (2 * r2 * s); } else { this.sc = 1; } if (w / h >= bw / bh) { fitToHeight(); } else { fitToWidth(); } } this.zoom = zoom; this.onZoom(zoom); }; FLIPBOOK.BookSwipe.prototype.zoomOut = function (value) { this.zoomTo(value); }; FLIPBOOK.BookSwipe.prototype.move = function (direction) { if (this.zoom <= 1) { return; } for (var i = 0; i < 3; i++) { var iscroll = this.slides[i].iscroll; var offset2 = 0; if (iscroll) { var posX = iscroll.x; var posY = iscroll.y; var offset = 20 * this.zoom; switch (direction) { case 'left': posX += offset; break; case 'right': posX -= offset; break; case 'up': posY += offset; break; case 'down': posY -= offset; break; } if (posX > 0) { posX = offset2; } if (posX < iscroll.maxScrollX) { posX = iscroll.maxScrollX - offset2; } if (posY > 0) { posY = offset2; } if (posY < iscroll.maxScrollY) { posY = iscroll.maxScrollY - offset2; } iscroll.scrollTo(posX, posY, 0); } } }; FLIPBOOK.BookSwipe.prototype.onZoom = function (zoom) { if (zoom > 1) { this.disableFlip(); this.enablePan(); } else { this.enableFlip(); this.disablePan(); } this.options.main.onZoom(zoom); }; FLIPBOOK.BookSwipe.prototype.rotateLeft = function () { this.rotation = (this.rotation + 360 - 90) % 360; for (var i = 0; i < this.pagesArr.length; i++) { var page = this.pagesArr[i]; page.setRotation(this.rotation); } this.resizeInnerSlides(); this.onResize(); }; FLIPBOOK.BookSwipe.prototype.rotateRight = function () { this.rotation = (this.rotation + 360 + 90) % 360; for (var i = 0; i < this.pagesArr.length; i++) { var page = this.pagesArr[i]; page.setRotation(this.rotation); } this.resizeInnerSlides(); this.onResize(); }; FLIPBOOK.BookSwipe.prototype.onSwipe = function (event, phase, distanceX, distanceY) { if (phase == 'start') { return; } }; FLIPBOOK.BookSwipe.prototype.onPageUnloaded = function (i) { var index = this.options.rightToLeft ? this.options.numPages - i - 1 : i; this.pagesArr[index].unload(); }; FLIPBOOK.BookSwipe.prototype.disableFlip = function () { this.flipEnabled = false; this.iscroll.disable(); }; FLIPBOOK.BookSwipe.prototype.enableFlip = function () { if (this.options.numPages == 1) { this.disableFlip(); return; } this.flipEnabled = true; this.iscroll.enable(); }; FLIPBOOK.BookSwipe.prototype.enablePan = function () { if (this.slides[0].iscroll) { this.slides[0].iscroll.enable(); } if (this.slides[1].iscroll) { this.slides[1].iscroll.enable(); } if (this.slides[2].iscroll) { this.slides[2].iscroll.enable(); } }; FLIPBOOK.BookSwipe.prototype.disablePan = function () { if (this.slides[0].iscroll) { this.slides[0].iscroll.disable(); } if (this.slides[1].iscroll) { this.slides[1].iscroll.disable(); } if (this.slides[2].iscroll) { this.slides[2].iscroll.disable(); } }; FLIPBOOK.PageSwipe = function (book, index, texture, html) { this.rotation = 0; this.index = index; this.options = book.options; this.texture = texture; this.html = html; this.index = index; this.wrapper = document.createElement('div'); this.wrapper.classList.add('flipbook-carousel-page'); this.wrapper.dataset.page = index + 1; this.main = book.main; this.book = book; this.inner = document.createElement('div'); this.inner.classList.add('flipbook-carousel-page-inner'); this.wrapper.appendChild(this.inner); this.bg = document.createElement('div'); this.bg.classList.add('flipbook-carousel-page-bg'); this.inner.appendChild(this.bg); this.htmlElement = document.createElement('div'); this.htmlElement.classList.add('flipbook-page3-html'); this.htmlElement.style.width = (1000 * this.options.pageWidth) / this.options.pageHeight + 'px'; this.htmlElement.style.transform = 'scale(' + this.options.pageHeight / 1000 + ') translateZ(0)'; this.inner.appendChild(this.htmlElement); if (this.options.doublePage) { if (!this.options.rightToLeft && this.index % 2 === 0 && this.index > 0) { this.htmlElement.style.left = '-100%'; } else if (this.options.rightToLeft && this.index % 2 === 1 && this.index > 0) { this.htmlElement.style.left = '-100%'; } else { this.htmlElement.style.left = '0'; } } if (this.options.pagePreloader) { this.preloader = document.createElement('img'); this.preloader.src = this.options.pagePreloader; this.preloader.classList.add('flipbook-page-preloader-image'); this.inner.appendChild(this.preloader); } else { this.preloader = document.createElement('img'); this.preloader.src = this.options.assets.spinner; this.preloader.classList.add('flipbook-page-preloader'); this.inner.appendChild(this.preloader); } this.setSize(this.pw, this.ph); }; FLIPBOOK.PageSwipe.prototype = { load: function (callback, thumb) { var size = this.options.pageTextureSize; if (this.size >= size) { if (!thumb) { this.loadHTML(); } if (callback) { callback.call(this); } return; } this.size = size; var self = this; var index = this.options.rightToLeft ? this.options.numPages - this.index - 1 : this.index; var o = this.options; var p = o.pages[index]; this.options.main.loadPage(index, size, function (page) { page = page || {}; if (page && page.image) { var img = page.image[size] || page.image; img.classList.add('page-carousel-img'); if (self.index % 2 == 0 && ((p && p.side == 'left') || (p && p.side == 'right'))) { if (!img.clone) { img.clone = new Image(); img.clone.src = img.src; } img = img.clone; } self.bg.appendChild(img); if (self.options.rightToLeft) { if (self.options.doublePage && self.index < self.options.numPages - 1 && self.index % 2 == 1) { img.style.left = '-100%'; } if (self.options.doublePage) { if (self.index == self.options.numPages - 1 || (self.index == 0 && self.options.backCover)) { img.style.width = '100%'; } else { img.style.width = '200%'; } } else { img.style.width = '100%'; } } else { if (self.options.doublePage && self.index > 0 && self.index % 2 == 0) { img.style.left = '-100%'; } if (self.options.doublePage) { if (self.index == 0 || (self.index == self.options.numPages - 1 && self.options.backCover)) { img.style.width = '100%'; } else { img.style.width = '200%'; } } else { img.style.width = '100%'; } } self.preloader.remove(); } self.setRotation(); if (!thumb) { self.loadHTML(); } if (callback) { callback.call(self); } }); }, loadHTML: function () { var self = this; var index = !this.options.rightToLeft ? this.index : this.options.numPages - this.index - 1; if (this.htmlContent) { this.updateHtmlContent(); } else { this.options.main.loadPageHTML(index, function (html) { self.htmlContent = html; self.updateHtmlContent(); }); } }, hideHTML: function () { if (this.htmlContentVisible) { this.htmlElement.innerHTML = ''; this.htmlContentVisible = false; this.main.trigger('hidepagehtml', { page: this }); } }, startHTML: function () { this.book.startPageItems(this.wrapper); }, unload: function () { this.pageSize = 0; this.size = 0; this.inner.appendChild(this.preloader); }, dispose: function () { if (this.pageSize) { this.pageSize = null; this.bg.innerHTML = ''; } }, setSize: function () { var w = this.options.pageWidth; var h = this.options.pageHeight; if (this.rotation === 0 || this.rotation === 180) { this.wrapper.style.width = w + 'px'; this.wrapper.style.height = h + 'px'; this.pw = w; this.ph = h; } else { this.wrapper.style.width = h + 'px'; this.wrapper.style.height = w + 'px'; this.pw = h; this.ph = w; } this.updateHtmlContent(); }, setRotation: function (val) { this.setSize(); if (this.options.doublePage) { return; } if (typeof val != 'undefined') { this.rotation = val; } if (this.img) { this.img.style.transform = 'rotate(' + this.rotation + 'deg) translateZ(0)'; if (this.rotation === 90 || this.rotation === 270) { this.img.style.width = this.wrapper.clientHeight + 'px'; this.img.style.height = this.wrapper.clientWidth + 'px'; } else { this.img.style.width = this.wrapper.clientWidth + 'px'; this.img.style.height = this.wrapper.clientHeight + 'px'; } } }, updateHtmlContent: function () { var c = this.htmlContent; if (c && !this.htmlContentVisible) { this.htmlContentVisible = true; this.htmlElement.innerHTML = ''; this.htmlElement.appendChild(this.htmlContent); this.main.trigger('showpagehtml', { page: this }); } this.startHTML(); }, };