/** * @preserve * Plugin Name: dflip * Description: dflip - 3D & 2D FlipBook * * Author: Deepak Ghimire * Author URI: http://codecanyon.net/user/deip?ref=deip */ 'use strict'; var DFLIP = DFLIP || {}; // old fallback // use DFLIP instead of PRESENTATION as of v 1.1 var PRESENTATION = DFLIP; (function dFlip(DFLIP, $) { DFLIP.version = "1.2.7"; DFLIP.PAGE_MODE = {SINGLE: 1, DOUBLE: 2, AUTO: void 0}; DFLIP.SINGLE_PAGE_MODE = {ZOOM: 1, BOOKLET: 2, AUTO: void 0}; DFLIP.DIRECTION = {LTR: 1, RTL: 2}; DFLIP.CORNERS = {TL: "tl", TR: "tr", BL: "bl", BR: "br", L: "l", R: "r", NONE: void 0}; DFLIP.SOURCE_TYPE = {IMAGE: "image", PDF: "pdf", HTML: "html"}; DFLIP.DISPLAY_TYPE = {WEBGL: "3D", HTML: "2D"}; DFLIP.PAGE_SIZE = {AUTO: 0, SINGLE: 1, DOUBLEINTERNAL: 2} //defaults settings var defaults = DFLIP.defaults = { //sets if to use 3d or not (true|false) webgl: true, //if you want to turn of shadow in 3d set it to false webglShadow: true, // if enable sound at start (true|false) soundEnable: true, // height of the container // value(eg: 320) or percentage (eg: '50%') // calculaton limit: minimum 320, max window height height: '100%', // set to true to show outline on open (true|false) autoEnableOutline: false, // set to true to show thumbnail on open (true|false) autoEnableThumbnail: false, // set to true if PDF inbuilt outline is to be removed (true|false) overwritePDFOutline: false, // enableDownload of PDF files (true|false) enableDownload: true, // duration of page turn in milliseconds duration: 800, //direction of flipbook //DFLIP.DIRECTION.LTR or 1 for left to right(default), //DFLIP.DIRECTION.RTL or 2 for right to left, direction: DFLIP.DIRECTION.LTR, //set as //DFLIP.PAGE_MODE.AUTO for auto-detect(default), //DFLIP.PAGE_MODE.SINGLE or 1 for singleview, //DFLIP.PAGE_MODE.DOUBLE or 2 for doubleview, pageMode: DFLIP.PAGE_MODE.AUTO, //set as //DFLIP.SINGLE_PAGE_MODE.AUTO for auto-detect(default), //DFLIP.SINGLE_PAGE_MODE.ZOOM or 1 for normal zoom single view, //DFLIP.SINGLE_PAGE_MODE.BOOKLET or 2 for Booklet mode, singlePageMode: DFLIP.SINGLE_PAGE_MODE.AUTO, //color value in hexadecimal backgroundColor: "#fff", forceFit: true, //very rare usage leave it as true unless page are not fitting wrong... transparent: false, //true or false hard: "none", //possible values are "hard", "none", "cover" annotationClass: "", // texture settings maxTextureSize: 1600, //max page size to be rendered. for pdf files only minTextureSize: 256, //min page size to be rendered. for pdf files only // icons for the buttons icons: { 'altnext': 'ti-angle-right', 'altprev': 'ti-angle-left', 'next': 'ti-angle-right', 'prev': 'ti-angle-left', 'end': 'ti-angle-double-right', 'start': 'ti-angle-double-left', 'share': 'ti-sharethis', 'help': 'ti-help-alt', 'more': 'ti-more-alt', 'download': 'ti-download', 'zoomin': 'ti-zoom-in', 'zoomout': 'ti-zoom-out', 'fullscreen': 'ti-fullscreen', 'fitscreen': 'ti-arrows-corner', 'thumbnail': 'ti-layout-grid2', 'outline': 'ti-menu-alt', 'close': 'ti-close', 'doublepage': 'ti-book', 'singlepage': 'ti-file', 'sound': 'ti-volume', 'facebook': 'ti-facebook', 'google': 'ti-google', 'twitter': 'ti-twitter-alt', 'mail': 'ti-email' }, // TRANSLATION text to be displayed text: { toggleSound: "Turn on/off Sound", toggleThumbnails: "Toggle Thumbnails", toggleOutline: "Toggle Outline/Bookmark", previousPage: "Previous Page", nextPage: "Next Page", toggleFullscreen: "Toggle Fullscreen", zoomIn: "Zoom In", zoomOut: "Zoom Out", toggleHelp: "Toggle Help", singlePageMode: "Single Page Mode", doublePageMode: "Double Page Mode", downloadPDFFile: "Download PDF File", gotoFirstPage: "Goto First Page", gotoLastPage: "Goto Last Page", share: "Share" }, //valid controlnames: //altPrev,pageNumber,altNext,outline,thumbnail,zoomIn,zoomOut,fullScreen,share //more,download,pageMode,startPage,endPage,sound allControls: "altPrev,pageNumber,altNext,outline,thumbnail,zoomIn,zoomOut,fullScreen,share,more,download,pageMode,startPage,endPage,sound", mainControls: "altPrev,pageNumber,altNext,outline,thumbnail,zoomIn,zoomOut,fullScreen,share,more", hideControls: "", //set if the zoom changes on mouse scroll (true|false) scrollWheel: true, // callbacks onCreate: function () { // after flip book is created is fired }, onCreateUI: function () { // after ui created event is fired }, onFlip: function () { // after flip event is fired }, beforeFlip: function () { // before flip event is fired }, onReady: function () { // after flip book is completely loaded }, zoomRatio: 1.5, pageSize: DFLIP.PAGE_SIZE.AUTO, /** * NON-OPTIONS AREA * These options are not supposed to be sent from options variable */ /** * dependency URLS (NON-OPTION): * Do not set them as options, * Refer to advance-examples */ //(NON-OPTION) source link for PDF.JS file pdfjsSrc: "js/libs/pdf.min.js", //(NON-OPTION) source link for PDFcompatibility.JS file pdfjsCompatibilitySrc: "js/libs/compatibility.js", //(NON-OPTION) source link for PDF.WORKER.JS file pdfjsWorkerSrc: "js/libs/pdf.worker.min.js", //(NON-OPTION) source link for THREE.JS file threejsSrc: "js/libs/three.min.js", //(NON-OPTION) source link for MOCKUP.JS file mockupjsSrc: "js/libs/mockup.min.js", //(NON-OPTION) File path to the trun sound soundFile: "sound/turn2.mp3", //(NON-OPTION) developer parameters enableDebugLog: false, canvasToBlob: true, enableAnnotation: true, /** * Let them be, change at your risk */ // if texture fallback override is required // note: if set to anything other than "blank" the first page is changed // recommended : "blank" textureLoadFallback: "blank", //"images/textures/white.jpg", // controls the flexibility of the paper more value for more flexiblilty stiffness: 3, minTopOffset: 30, // link to the images file that you want as background. // supported files are jpgs,png. smaller files are preffered for performance backgroundImage: "",//"images/textures/el.jpg", // or any number like 5, 500. recommended: "auto" pageRatio: void 0, //equals to width/height defaultPageRatio: 210 / 297, //internal usage pixelRatio: window.devicePixelRatio || 1 }; var has3d = 'WebKitCSSMatrix' in window || (document.body && 'MozPerspective' in document.body.style), hasMouse = 'onmousedown' in window, hasTouch = 'ontouchstart' in window; var utils = DFLIP.utils = { drag: { left: 0, right: 1, none: -1 }, mouseEvents: (hasMouse) ? {type: "mouse", start: "mousedown", move: "mousemove", end: "mouseup"} : {type: "touch", start: "touchstart", move: "touchmove", end: "touchend"}, html: { div: "
", img: "", a: "", input: "" }, //functions or so toRad: function (deg) { return deg * Math.PI / 180; }, toDeg: function (rad) { return rad * 180 / Math.PI; }, transition: function (hasTransition, duration) { return hasTransition ? duration / 1000 + "s ease-out" : "0s none"; }, display: function (hasDisplay) { return hasDisplay ? "block" : "none"; }, resetTranslate: function () { return translateStr(0, 0); }, translateStr: function (x, y) { return has3d ? ' translate3d(' + x + 'px,' + y + 'px, 0px) ' : ' translate(' + x + 'px, ' + y + 'px) '; }, resetBoxShadow: function () { return "rgba(0, 0, 0, 0) 0px 0px 20px"; }, rotateStr: function (deg) { return ' rotateZ(' + deg + 'deg) '; }, bg: function (src) { return '#fff' + bgImage(src); }, bgImage: function (src) { return (src == void 0 || src == "blank" ? '' : ' url(' + src + ')'); }, src: function (src) { return (src !== void 0 ? '' + src + '' : ''); }, limitAt: function (x, min, max) { return x < min ? min : x > max ? max : x; }, distOrigin: function (x, y) { return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); }, distPoints: function (x1, y1, x2, y2) { return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); }, /** * Calculates the average of multiple vectors (x, y values) */ getVectorAvg: function (vectors) { return { x: vectors.map(function (v) { return v.x; }).reduce(utils.sum) / vectors.length, y: vectors.map(function (v) { return v.y; }).reduce(utils.sum) / vectors.length }; }, sum: function (a, b) { return a + b; }, /** * Returns the touches of an event relative to the container offset * @param event * @return array touches */ getTouches: function (event, position) { position = position || {left: 0, top: 0}; return Array.prototype.slice.call(event.touches).map(function (touch) { return { x: touch.pageX - position.left, y: touch.pageY - position.top }; }); }, angleByDistance: function (distance, fullWidth) { var h = fullWidth / 2; var d = limitAt(distance, 0, fullWidth); return d < h ? toDeg(Math.asin(d / h)) : 90 + toDeg(Math.asin((d - h) / h)); }, log: function (args) { if (defaults.enableDebugLog == true && window.console) console.log(args); }, lowerPowerOfTwo: function (value) { return Math.pow(2, Math.floor(Math.log(value) / Math.LN2)); }, nearestPowerOfTwo: function (value, max) { return Math.min(max || 2048, Math.pow(2, Math.ceil(Math.log(value) / Math.LN2))); }, zoomStops: function (value, zoomRatio, ceil, min, max) { if (min == void 0) min = 256; if (max == void 0) max = 2048; //Math.pow(2, Math.ceil(Math.log(value) / Math.LN2)); var factor = Math.log(value / min) / Math.log(zoomRatio); return min * Math.pow(zoomRatio, ceil == void 0 ? Math.round(factor) : (ceil == true ? Math.ceil(factor) : Math.floor(factor))); }, extendOptions: function (defaults, options) { return $.extend(true, {}, defaults, options); }, getBasePage: function (pageNumber) { return Math.floor(pageNumber / 2) * 2; }, loadResources: function loadResources(resourceTag, src, callback) { var doc = document, element = doc.createElement(resourceTag), refElement = doc.getElementsByTagName(resourceTag)[0]; element.async = true; if (callback) { element.addEventListener('load', function (e) { callback(null, e); }, false); } element.src = src; refElement.parentNode.insertBefore(element, refElement); }, getScript: function (source, callback, errorCallback) { var script = document.createElement('script'); var prior = document.body.getElementsByTagName('script')[0]; script.async = 1; script.setAttribute("data-cfasync", false); if (prior != void 0) { prior.parentNode.insertBefore(script, prior); prior = null; } else { //sometimes if script are loaded in head and no scripts are present in body document.body.appendChild(script); } function load(_, isAbort) { if (script != void 0) { //IE 10 doesn't regard if (isAbort || !script.readyState || /loaded|complete/.test(script.readyState)) { //console.log("aborted loading :" + source); script.onload = script.onreadystatechange = null; script = void 0; script = null; if (!isAbort) { if (callback) callback(); callback = null; } } } } script.addEventListener("load", load, false); script.addEventListener("readystatechange", load, false); script.addEventListener("complete", load, false); if (errorCallback) { script.addEventListener("error", errorCallback, false); } //script.onload = script.onreadystatechange = load; script.src = source + (prefix.dom == "MS" ? ("?" + Math.random(1)) : ""); }, isHardPage: function (config, pageNumber, pageCount, isBooklet) { if (config !== void 0) { // var config = this.hardConfig; if (config == "cover") { return pageNumber == 0 || (isBooklet && pageNumber == 1) //front cover is 0 || pageNumber == (Math.floor(pageCount / (isBooklet ? 1 : 2)) - (isBooklet ? 0 : 1)); //start with 0 so 1 minus } else if (config == "all") { return true; } else { var baseTest = ("," + config + ",").indexOf("," + (pageNumber * 2 + 1) + ",") > -1; var nextTest = ("," + config + ",").indexOf("," + (pageNumber * 2 + 2) + ",") > -1; return baseTest || nextTest; } } return false; }, fixMouseEvent: function (event) { if (event) { var originalEvent = event.originalEvent || event; //noinspection JSUnresolvedVariable if (originalEvent.changedTouches && originalEvent.changedTouches.length > 0) { var _event = $.event.fix(event); //noinspection JSUnresolvedVariable var touch = originalEvent.changedTouches[0]; _event.clientX = touch.clientX; _event.clientY = touch.clientY; _event.pageX = touch.pageX; _event.pageY = touch.pageY; _event.movementX = touch.movementX; _event.movementY = touch.movementY; return _event; } else { return event; } } else { return event; } }, //self Execution hasWebgl: (function () { try { var canvas = document.createElement('canvas'); //noinspection JSUnresolvedVariable return !!( window.WebGLRenderingContext && ( canvas.getContext('webgl') || canvas.getContext('experimental-webgl') ) ); } catch (e) { return false; } })(), isBookletMode: function (book) { return book.pageMode == DFLIP.PAGE_MODE.SINGLE && book.singlePageMode == DFLIP.SINGLE_PAGE_MODE.BOOKLET }, isMobile: (function () { var check = false; (function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true })(navigator.userAgent || navigator.vendor || window.opera); return check; })(), prefix: (function () { var styles = window.getComputedStyle(document.documentElement, ''), pre = (Array.prototype.slice .call(styles) .join('') .match(/-(moz|webkit|ms)-/))[1], dom = ('WebKit|Moz|MS').match(new RegExp('(' + pre + ')', 'i'))[1]; return { dom: dom, lowercase: pre, css: '-' + pre + '-', js: pre[0].toUpperCase() + pre.substr(1) }; })(), __extends: (window && window.__extends) || function (child, parent) { for (var key in parent) if (parent.hasOwnProperty(key)) child[key] = parent[key]; function Ctor() { this.constructor = child; } Ctor.prototype = parent.prototype; child.prototype = new Ctor(); child.__super = parent.prototype; return child; } }; //caching the utils var SOURCE_TYPE = DFLIP.SOURCE_TYPE, DISPLAY_TYPE = DFLIP.DISPLAY_TYPE, drag = utils.drag, mouseEvents = utils.mouseEvents, html = utils.html, toRad = utils.toRad, toDeg = utils.toDeg, transition = utils.transition, translateStr = utils.translateStr, resetBoxShadow = utils.resetBoxShadow, rotateStr = utils.rotateStr, bg = utils.bg, bgImage = utils.bgImage, src = utils.src, limitAt = utils.limitAt, distOrigin = utils.distOrigin, distPoints = utils.distPoints, angleByDistance = utils.angleByDistance, log = utils.log, nearestPowerOfTwo = utils.nearestPowerOfTwo, extendOptions = utils.extendOptions, getBasePage = utils.getBasePage, getScript = utils.getScript, fixMouseEvent = utils.fixMouseEvent, prefix = utils.prefix, isBookletMode = utils.isBookletMode, isMobile = utils.isMobile, hasWebgl = utils.hasWebgl, __extends = utils.__extends; var extendDFlipOptions = function (options) { return $.extend(true, {}, defaults, options); }; //Creates ui for the flipbook var createUI = function (container, object) { var uiClass = "df-ui"; var wrapperClass = "df-ui-wrapper"; var buttonClass = uiClass + "-" + "btn"; var ui = object.ui = $(html.div, {'class': uiClass}); var options = object.options; ui.dispose = function () { container.find("." + buttonClass).each(function () { $(this).off(); }); help.off(); next.off(); prev.off(); zoom.off(); zoomIn.off(); zoomOut.off(); page.off(); sound.off(); more.off(); fullScreen.off(); fit.off(); share.off(); start.off(); end.off(); pageModeButton.off(); altPrev.off(); altNext.off(); thumbnail.off(); outline.off(); controls.remove(); sizeControls.remove(); prev.remove(); next.remove(); zoom.remove(); if (ui.shareBox) { if (ui.shareBox.dispose) ui.shareBox.dispose(); ui.shareBox = null; } document.removeEventListener('keyup', onKeyUp, false); window.removeEventListener('click', closeMoreOptions, false); ui.update = null; object = null; }; var validPage = function (pageNumber) { if (isNaN(pageNumber)) pageNumber = object.target._activePage; else if (pageNumber < 1) pageNumber = 1; else if (pageNumber > object.target.pageCount) pageNumber = object.target.pageCount; return pageNumber; }; var next = ui.next = $(html.div, { class: buttonClass + " " + uiClass + "-next " + options.icons['next'], title: options.text.nextPage, html: "" + options.text.nextPage + "" }).on("click", function () { object.next(); }); var prev = ui.prev = $(html.div, { class: buttonClass + " " + uiClass + "-prev " + options.icons['prev'], title: options.text.previousPage, html: "" + options.text.previousPage + "" }).on("click", function () { object.prev(); }); var zoom = $(html.div, { class: wrapperClass + " " + uiClass + "-zoom" }); var zoomIn = ui.zoomIn = $(html.div, { class: buttonClass + " " + uiClass + "-zoomin " + options.icons['zoomin'], title: options.text.zoomIn, html: "" + options.text.zoomIn + "" }).on("click", function () { object.zoom(1); ui.update(); if (object.target.startPoint && object.target.pan) object.target.pan(object.target.startPoint); }); var zoomOut = ui.zoomOut = $(html.div, { class: buttonClass + " " + uiClass + "-zoomout " + options.icons['zoomout'], title: options.text.zoomOut, html: "" + options.text.zoomOut + "" }).on("click", function () { object.zoom(-1); ui.update(); if (object.target.startPoint && object.target.pan) object.target.pan(object.target.startPoint); }); zoom.append(zoomIn).append(zoomOut); var page = ui.pageNumber = $(html.div, { class: buttonClass + " " + uiClass + "-page", }).on("change", function () { var pageNumber = parseInt((ui.pageInput.val()), 10); pageNumber = validPage(pageNumber); object.gotoPage(pageNumber); }).on("keyup", function (event) { if (event.keyCode == 13) { var pageNumber = parseInt((ui.pageInput.val()), 10); pageNumber = validPage(pageNumber); if (pageNumber !== validPage(object.target._activePage || object._activePage)) object.gotoPage(pageNumber); } }); ui.pageInput = $('').appendTo(page); ui.pageLabel = $('').appendTo(page); var sizeControls = $(html.div, { class: wrapperClass + " " + uiClass + "-size" }); var help = $(html.div, { class: buttonClass + " " + uiClass + "-help " + options.icons['help'], title: options.text.toggleHelp, html: "" + options.text.toggleHelp + "" }).on("click", function () { }); //Sound Button var sound = ui.sound = $(html.div, { class: buttonClass + " " + uiClass + "-sound " + options.icons['sound'], title: options.text.toggleSound, html: "" + options.text.toggleSound + "" }).on("click", function () { options.soundEnable = !options.soundEnable; ui.updateSound(); }); //Updates sound on click of sound button ui.updateSound = function () { if (options.soundEnable == false || options.soundEnable == 'false') sound.addClass("disabled"); else sound.removeClass("disabled"); }; //immediate check ui.updateSound(); //More button var more = ui.more = $(html.div, { class: buttonClass + " " + uiClass + "-more " + options.icons['more'] }).on("click", function (event) { if (!more.hasClass("df-active")) { $(this).addClass("df-active"); event.stopPropagation(); } }); //closes moreoptions container function closeMoreOptions(event) { more.removeClass("df-active"); } //register a click event on window to close the moreoptions window.addEventListener('click', closeMoreOptions, false); //more container that holds the moreoptions var moreContainer = $(html.div, { class: "more-container" }); more.append(moreContainer); if (typeof options.source == 'string' && options.enableDownload == true) { var downloadClass = buttonClass + " " + uiClass + "-download " + options.icons['download']; var download = ui.download = $('' + options.text.downloadPDFFile + ''); download.attr("href", options.source).attr("title", options.text.downloadPDFFile); //moreContainer.append(download); } var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled; if (!fullscreenEnabled) { container.addClass("df-custom-fullscreen"); } var fullScreen = ui.fullScreen = $(html.div, { class: buttonClass + " " + uiClass + "-fullscreen " + options.icons['fullscreen'], title: options.text.toggleFullscreen, html: "" + options.text.toggleFullscreen + "" }).on("click", function () { var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement; var container = object.container[0]; if (ui.isFullscreen != true) { object.container.addClass("df-fullscreen"); if (container.requestFullscreen) { container.requestFullscreen(); } else if (container.msRequestFullscreen) { container.msRequestFullscreen(); } else if (container.mozRequestFullScreen) { container.mozRequestFullScreen(); } else if (container.webkitRequestFullscreen) { container.webkitRequestFullscreen(); } ui.isFullscreen = true } else { object.container.removeClass("df-fullscreen"); ui.isFullscreen = false; if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } setTimeout(function () { object.resize(); }, 50); }); var fit = ui.fit = $(html.div, { class: buttonClass + " " + uiClass + "-fit " + options.icons['fitscreen'] }).on("click", function () { $(this).toggleClass("df-button-fit-active"); }); sizeControls.append(fullScreen); var controls = $(html.div, { class: wrapperClass + " " + uiClass + "-controls" // todo : df-abs-h-center" }); var shareBox = ui.shareBox = new DFLIP.Share(container, options); var share = ui.share = $(html.div, { class: buttonClass + " " + uiClass + "-share " + options.icons['share'], title: options.text.share, html: "" + options.text.share + "" }).on("click", function (event) { if (ui.shareBox.isOpen == true) ui.shareBox.close(); else { ui.shareBox.update(object.getURLHash()); ui.shareBox.show(); } }); var start = ui.startPage = $(html.div, { class: buttonClass + " " + uiClass + "-start " + options.icons['start'], title: options.text.gotoFirstPage, html: "" + options.text.gotoFirstPage + "" }).on("click", function () { object.start(); }); var end = ui.endPage = $(html.div, { class: buttonClass + " " + uiClass + "-end " + options.icons['end'], title: options.text.gotoLastPage, html: "" + options.text.gotoLastPage + "" }).on("click", function () { object.end(); }); var pageModeButton = ui.pageMode = $(html.div, { class: buttonClass + " " + uiClass + "-pagemode " + options.icons['singlepage'], html: "" + options.text.singlePageMode + "" }).on("click", function () { var el = $(this); object.setPageMode(!el.hasClass(options.icons['doublepage'])); }); object.setPageMode(object.target.pageMode == DFLIP.PAGE_MODE.SINGLE) //moreContainer.append(pageModeButton).append(start).append(end).append(sound); var altPrev = ui.altPrev = $(html.div, { class: buttonClass + " " + uiClass + "-prev" + " " + uiClass + "-alt " + options.icons['prev'], title: options.text.previousPage, html: "" + options.text.previousPage + "" }).on("click", function () { object.prev(); }); var altNext = ui.altNext = $(html.div, { class: buttonClass + " " + uiClass + "-next" + " " + uiClass + "-alt " + options.icons['next'], title: options.text.nextPage, html: "" + options.text.nextPage + "" }).on("click", function () { object.next(); }); var thumbnail = ui.thumbnail = $(html.div, { class: buttonClass + " " + uiClass + "-thumbnail " + options.icons['thumbnail'], title: options.text.toggleThumbnails, html: "" + options.text.toggleThumbnails + "" }).on("click", function () { var $this = $(this); if (object.target.thumbContainer) { var thumbContainer = object.target.thumbContainer; thumbContainer.toggleClass("df-thumb-visible"); $this.toggleClass("df-active"); } else { object.contentProvider.initThumbs(); $this.toggleClass("df-active"); } if ($this.hasClass("df-active")) { $this.siblings(".df-active").trigger("click"); } ui.update(true); }); var outline = ui.outline = $(html.div, { class: buttonClass + " " + uiClass + "-outline " + options.icons['outline'], title: options.text.toggleOutline, html: "" + options.text.toggleOutline + "" }).on("click", function () { var $this = $(this); if (object.target.outlineContainer) { var outlineContainer = object.target.outlineContainer; $this.toggleClass("df-active"); outlineContainer.toggleClass("df-outline-visible"); if ($this.hasClass("df-active")) { $this.siblings(".df-active").trigger("click"); } ui.update(true); } }); /** * Controls position and pplace ment is determined by options.maincrontrols and options.hidecontrols */ var allControls = options.allControls.replace(/ /g, '').split(','), mainControls = "," + options.mainControls.replace(/ /g, '') + ",", hideControls = "," + options.hideControls.replace(/ /g, '') + ","; //if controls name is available in morecontrols it will be added into maincontrols else it will be added to morecontrols. if added in hide it will not be added in any for (var controlCount = 0; controlCount < allControls.length; controlCount++) { //if hidden skip var controlName = allControls[controlCount]; if (hideControls.indexOf("," + controlName + ",") < 0) { var control = ui[controlName]; if (control !== void 0) { if (mainControls.indexOf("," + controlName + ",") > -1) controls.append(control); else if (controlName !== 'more' && controlName !== 'pageNumber') moreContainer.append(control); } } } container.append(controls).append(prev).append(next).append(zoom); //container.append(ui); var ctrlDown = false, shiftDown = false, altDown = false; var shiftKey = 16, ctrlKey = 17, altKey = 18, sKey = 83, vKey = 86, cKey = 67, eKey = 69, gKey = 71, nKey = 78, oKey = 79, deleteKey = 46, rightKey = 39, leftKey = 37, escKey = 27; document.addEventListener('keyup', onKeyUp, false); function onKeyUp(event) { switch (event.keyCode) { case escKey: if (ui.isFullscreen == true) ui.fullScreen.trigger("click"); break; case shiftKey: shiftDown = false; break; case ctrlKey: ctrlDown = false; break; case altKey: altDown = false; break; case leftKey: object.prev(); break; case rightKey: object.next(); break; default: break; } //log(event.keyCode); } ui.update = function (resize) { log("ui update"); var target = object.target; var pageNumber = validPage(target._activePage || object._activePage); var pageCount = target.pageCount || object.pageCount; var isRTL = target.direction == DFLIP.DIRECTION.RTL, isStart = (pageNumber == 1 || pageNumber == 0), isEnd = pageNumber == pageCount; ui.next.show(); ui.prev.show(); ui.altNext.removeClass("disabled"); ui.altPrev.removeClass("disabled"); if ((isStart && !isRTL) || (isEnd && isRTL)) { ui.prev.hide(); ui.altPrev.addClass("disabled"); } if ((isEnd && !isRTL) || (isStart && isRTL)) { ui.next.hide(); ui.altNext.addClass("disabled"); } ui.pageInput.val(pageNumber); ui.pageLabel.html((pageNumber) + "/" + pageCount); if (container.find(".df-thumb-visible, .df-outline-visible").length > 0) { container.addClass("df-sidemenu-open"); } else { container.removeClass("df-sidemenu-open"); } if (resize == true) object.resize(); if (target.contentProvider.zoomScale == target.contentProvider.maxZoom) { ui.zoomIn.addClass("disabled"); } else { ui.zoomIn.removeClass("disabled"); } if (target.contentProvider.zoomScale == 1) { ui.zoomOut.addClass("disabled"); } else { ui.zoomOut.removeClass("disabled"); } }; if (object.target !== void 0) { object.target.ui = ui; } if (options.onCreateUI !== void 0) options.onCreateUI(); }; var PreviewStage = void 0; //later updated via RegisterMockupObjects in case 3d is requested //Registers necessary mockup object when required function RegisterMockupObjects() { PreviewStage = (function (_super) { __extends(PreviewStage, _super); function PreviewStage(parameters) { parameters = parameters || {}; var _this = this; _super.call(this, parameters); _this.options = parameters; _this.canvas = $(_this.renderer.domElement).addClass("df-3dcanvas"); _this.container = parameters.container; _this.container.append(_this.canvas); //_this.container.height(parameters.height); _this.type = "PreviewStage"; _this.mouse = new THREE.Vector2(); _this.raycaster = new THREE.Raycaster(); _this.camera.position.set(0, 20, 600); _this.camera.lookAt(new THREE.Vector3(0, 0, 0)); //shadows are zigzap due to shadow camera position _this.spotLight.position.set(-220, 330, 550); _this.spotLight.castShadow = isMobile ? false : parameters.webglShadow; //_this.spotLight.shadowDarkness = 0.6; if (_this.spotLight.shadow) { _this.spotLight.shadow.bias = -0.0008; } _this.spotLight.intensity = 0.22; _this.ambientLight.color = new THREE.Color("#888"); _this.ambientLight.intensity = 1.45; var material = new THREE.ShadowMaterial(); material.opacity = 0.15; _this.ground.material = material; _this.ground.position.z = -2; _this.orbitControl.maxAzimuthAngle = 0.4; _this.orbitControl.minAzimuthAngle = -0.4; _this.orbitControl.minPolarAngle = 1.4; _this.orbitControl.maxPolarAngle = 2.2; //_this.orbitControl.maxPolarAngle = 10; _this.orbitControl.mouseButtons.ORBIT = THREE.MOUSE.RIGHT; _this.orbitControl.mouseButtons.PAN = -1; _this.orbitControl.maxDistance = 5000; _this.orbitControl.minDistance = 50; _this.orbitControl.noZoom = true; _this.selectiveRendering = true; _this.orbitControl.zoomSpeed = 5; _this.orbitControl.keyPanSpeed = 0; _this.orbitControl.center.set(0, 0, 0); _this.orbitControl.update(); _this.swipe_threshold = isMobile ? 15 : 20; var cssRenderer = _this.cssRenderer = new THREE.CSS3DRenderer(); $(cssRenderer.domElement).css({ position: "absolute", top: 0, pointerEvents: "none" }).addClass("df-3dcanvas df-csscanvas"); _this.container[0].appendChild(cssRenderer.domElement); var cssScene = _this.cssScene = new THREE.Scene(); var divLeftDOM = document.createElement("div"); divLeftDOM.className = "df-page-content df-page-content-left"; var divRightDOM = document.createElement("div"); divRightDOM.className = "df-page-content df-page-content-right"; var divLeft = cssScene.divLeft = new THREE.CSS3DObject(divLeftDOM); var divRight = cssScene.divRight = new THREE.CSS3DObject(divRightDOM); cssScene.add(divLeft); cssScene.add(divRight); _this.resizeCallback = function () { cssRenderer.setSize(_this.canvas.width(), _this.canvas.height()); }; function requestRender() { _this.renderRequestPending = true; } window.addEventListener(mouseEvents.move, requestRender, false); window.addEventListener('keyup', requestRender, false); _this.dispose = function () { _this.clearChild(); _this.render(); window.removeEventListener(mouseEvents.move, requestRender, false); if (_this.options.scrollWheel == true) { _this.renderer.domElement.removeEventListener('mousewheel', onMouseWheel, false); _this.renderer.domElement.removeEventListener('DOMMouseScroll', onMouseWheel, false); // firefox } window.removeEventListener('keyup', requestRender, false); _this.renderer.domElement.removeEventListener("mousemove", editor_mouseMove, false); _this.renderer.domElement.removeEventListener("touchmove", editor_mouseMove, false); _this.renderer.domElement.removeEventListener("mousedown", editor_mouseDown, false); _this.renderer.domElement.removeEventListener("touchstart", editor_mouseDown, false); _this.renderer.domElement.removeEventListener("mouseup", editor_mouseUp, false); _this.renderer.domElement.removeEventListener("touchend", editor_mouseUp, false); _this.canvas.remove(); cssRenderer.domElement.remove(); cssRenderer = null; _this.renderCallback = null; _this.orbitControl.dispose(); _this.orbitControl = null; _this.renderer.dispose(); _this.cancelRAF(); }; _this.renderCallback = function () { if (TWEEN.getAll().length > 0) _this.renderRequestPending = true; TWEEN.update(); cssRenderer.render(cssScene, _this.camera) }; var onMouseWheel = function (event) { var delta = 0; if (event.wheelDelta !== void 0) { // WebKit / Opera / Explorer 9 delta = event.wheelDelta; } else if (event.detail !== void 0) { // Firefox delta = -event.detail; } if (delta) { var currentZoom = _this.previewObject.contentProvider.zoomScale; if ((delta > 0 && currentZoom == 1) || (delta < 0 && currentZoom > 1)) { event.preventDefault(); } _this.previewObject.zoom(delta > 0 ? 1 : -1); } requestRender(); }; var editor_mouseMove = function (event) { _this.renderRequestPending = true; event = fixMouseEvent(event); if (_this.isMouseDown && event.movementX != 0 && event.movementY != 0) { _this.isMouseMoving = true; } if (_this.isMouseDown == true && _this.previewObject.contentProvider.zoomScale == 1) { //check if swipe has happened var swipe_dist = event.pageX - _this.lastPos, swipe_time = performance.now() - _this.lastTime; //$("body > p").html(swipe_dist); if (Math.abs(swipe_dist) > _this.swipe_threshold) { //swipe has triggered //_this.dragPage.pendingPoint = point; if (swipe_dist < 0) { _this.target.next(); } else { _this.target.prev(); } event.preventDefault(); _this.isMouseDown = false; } _this.lastPos = event.pageX; _this.lastTime = performance.now(); } }; var editor_mouseDown = function (event) { event = fixMouseEvent(event); document.activeElement.blur(); _this.mouseValue = event.pageX + "," + event.pageY; _this.isMouseMoving = false; _this.isMouseDown = true; _this.lastPos = event.pageX; _this.lastTime = performance.now(); }; var editor_click = function (event) { _this.isMouseDown = false; //bail out if it's not left click if (event.button !== 0) return this; var mouseValue = event.pageX + "," + event.pageY; if (_this.isMouseMoving) { } else if (mouseValue == _this.mouseValue) { event = event || window.event; event = $.event.fix(event); var mouse = _this.mouse, raycaster = _this.raycaster; mouse.x = ( (event.offsetX) / _this.canvas.innerWidth() ) * 2 - 1; mouse.y = 1 - ( (event.offsetY ) / _this.canvas.innerHeight() ) * 2; raycaster.setFromCamera(mouse, _this.camera); var intersects = raycaster.intersectObjects(_this.target instanceof MOCKUP.Bundle ? _this.target.children : [_this.target], true); if (intersects.length > 0) { var object, objectCount = 0; do { object = intersects[objectCount] !== void 0 ? intersects[objectCount].object : void 0; //bookStage.clickFace = intersects[objectCount].face; objectCount++; } while ((object instanceof THREE.BoxHelper || !(object instanceof MOCKUP.Paper) || object.isFlipping == true) && objectCount < intersects.length); //if (object.parent instanceof MOCKUP.Bundle) { // object = object.parent; //} if (object.userData.object !== void 0) { // helper //bookStage.selectObject(object.userData.object); } else { if (object.angles[1] > 90) { if (object.isEdge != true) _this.target.next(); } else { if (object.isEdge != true) _this.target.prev(); } } } else { //bookStage.selectObject(null); } } //bookStage.stage.render(); }; var editor_mouseUp = function (event) { event = fixMouseEvent(event); editor_click(event); }; //if (MOCKUP.mode !== MOCKUP.MODE.PLUGIN) { //_this.renderer.domElement.addEventListener('click', editor_click, false); //bookStage.renderer.domElement.addEventListener('dblclick', editor_dblclick, false); _this.renderer.domElement.addEventListener("mousemove", editor_mouseMove, false); _this.renderer.domElement.addEventListener("touchmove", editor_mouseMove, false); _this.renderer.domElement.addEventListener("mousedown", editor_mouseDown, false); _this.renderer.domElement.addEventListener("touchstart", editor_mouseDown, false); _this.renderer.domElement.addEventListener("mouseup", editor_mouseUp, false); _this.renderer.domElement.addEventListener("touchend", editor_mouseUp, false); if (_this.options.scrollWheel == true) { _this.renderer.domElement.addEventListener('mousewheel', onMouseWheel, false); _this.renderer.domElement.addEventListener('DOMMouseScroll', onMouseWheel, false); // firefox } //} $(_this.renderer.domElement).css({display: "block"}); $(window).trigger("resize"); return this; } PreviewStage.prototype.width = function () { return this.container.width(); }; PreviewStage.prototype.height = function () { return this.container.height(); }; return PreviewStage; })(MOCKUP.Stage); MOCKUP.PreviewStage = PreviewStage; var BookPaper = (function (_super) { __extends(BookPaper, _super); function BookPaper(parameters, stage) { parameters = parameters || {}; parameters.folds = 1; _super.call(this, parameters, stage); this.angle = 0; this.isFlipping = false; this.material.materials[5].transparent = true; this.material.materials[4].transparent = true; this.type = "BookPaper"; } BookPaper.prototype.tween = function (oldAngle, newAngle) { var page = this; var epsilon = 0.00001; page.originalStiff = page.stiffness; var oldTarget = page.newStiffness; var isBooklet = isBookletMode(page.parent); //console.log(page.stiffness); var diff = newAngle - oldAngle;//170 -5 == 165 : 5-170 = -165 var isRight = oldAngle > 90; page.init = { angle: oldAngle, angle2: (oldAngle < 90 ? 0 : 180), stiff: page.originalStiff, index: isRight ? 1 : 0 }; page.first = { angle: oldAngle + diff / 4, angle2: (oldAngle < 90 ? 90 : 90), stiff: page.originalStiff, index: isRight ? 1 : 0.25 }; page.mid = { angle: oldAngle + diff * 2 / 4, angle2: (oldAngle < 90 ? 135 : 45), stiff: page.newStiffness, index: isRight ? 0.5 : 0.5 }; page.mid2 = { angle: oldAngle + diff * 3 / 4, angle2: (oldAngle < 90 ? 180 : 0), stiff: page.newStiffness, index: isRight ? 0.25 : 1 }; page.end = { angle: newAngle, angle2: (oldAngle < 90 ? 180 : 0), stiff: page.newStiffness, index: isRight ? 0 : 1 }; //console.log(page.init, page.first, page.mid, page.end); page.isFlipping = true; var update = function (tween, event) { page.angles[1] = tween.angle; page.angles[4] = page.isHard ? tween.angle : tween.angle2; if (page.isHard == true) { page.stiffness = 0; } else { page.stiffness = tween.stiff / (oldTarget + epsilon) * (page.newStiffness + epsilon); page.stiffness = isNaN(page.stiffness) ? 0 : tween.stiff; } if (isBooklet) { page.material.materials[5].opacity = page.material.materials[4].opacity = tween.index; page.castShadow = isRight ? tween.index > 0.5 : tween.index > 0.5; } //check if any sibling is flipping and their stiff is more that this page.updateAngle(true); }; if (!isRight && isBooklet) { page.material.materials[5].opacity = page.material.materials[4].opacity = 0; page.castShadow = false; } new TWEEN.Tween(page.init) .to({ angle: [page.first.angle, page.mid.angle, page.mid2.angle, page.end.angle], angle2: [page.first.angle2, page.mid.angle2, page.mid2.angle2, page.end.angle2], stiff: [page.first.stiff, page.mid.stiff, page.mid2.stiff, page.end.stiff], index: [page.first.index, page.mid.index, page.mid2.index, page.end.index] }, page.parent.duration) .onUpdate(function (event) { update(this, event); }).easing(TWEEN.Easing.Sinusoidal.Out) .onComplete(function (event) { page.stiffness = page.newStiffness; page.updateAngle(); page.material.materials[5].opacity = page.material.materials[4].opacity = 1; page.castShadow = true; page.isFlipping = false; if (page.parent && page.parent.refresh) page.parent.refresh(); //console.log(page.stiffness); }).start(); }; return BookPaper; })(MOCKUP.FlexBoxPaper); MOCKUP.BookPaper = BookPaper; var Book = (function (_super) { __extends(Book, _super); function Book(parameters, stage) { parameters = parameters || {}; parameters.segments = parameters.segments || 50; this.pageCount = parameters.pageCount; this.height = parameters.height; this.width = parameters.width; //correcting page count as multiple of 2 this.pageCount = (this.pageCount == 1 ? this.pageCount : Math.ceil(this.pageCount / 2) * 2); this.direction = parameters.direction || DFLIP.DIRECTION.LTR; this.startPage = 1; this.endPage = this.pageCount; this.stackCount = parameters.stackCount || 6;// = 15; this.materials = []; _super.call(this, parameters, stage); this.angles = [0, 0, 0, 0, 0, 0]; this.stiffness = parameters.stiffness || 1.5; this.hardConfig = "none";//parameters.hard; hard is not that good in 3d this._activePage = parameters.openPage || this.startPage; this.createStack(parameters); this.pageMode = parameters.pageMode || ((isMobile || this.pageCount <= 2) ? DFLIP.PAGE_MODE.SINGLE : DFLIP.PAGE_MODE.DOUBLE); this.singlePageMode = parameters.singlePageMode || (isMobile ? DFLIP.SINGLE_PAGE_MODE.BOOKLET : DFLIP.SINGLE_PAGE_MODE.ZOOM); this.type = "Book"; } Book.prototype.getPageByNumber = function (pageNumber) { var relativePageNumber = isBookletMode(this) ? pageNumber : Math.floor((pageNumber - 1) / 2); return this.getObjectByName(relativePageNumber.toString()); }; Book.prototype.isPageHard = function (pageNumber) { return utils.isHardPage(this.hardConfig, pageNumber, this.pageCount); }; Book.prototype.activePage = function (pageNumber) { if (pageNumber == void 0) return this._activePage; this.gotoPage(pageNumber); }; Book.prototype.gotoPage = function (pageNumber) { pageNumber = parseInt(pageNumber, 10); this._activePage = pageNumber; this.updatePage(pageNumber); }; Book.prototype.moveBy = function (step) { var nextPage = this._activePage + step; nextPage = limitAt(nextPage, this.startPage, this.endPage); this.gotoPage(nextPage); }; Book.prototype.next = function (step) { if (step == void 0) step = (this.direction == DFLIP.DIRECTION.RTL) ? -this.pageMode : this.pageMode; this.moveBy(step); }; Book.prototype.prev = function (step) { if (step == void 0) step = (this.direction == DFLIP.DIRECTION.RTL) ? this.pageMode : -this.pageMode; this.moveBy(step); }; Book.prototype.updateAngle = function () { var startAngle = this.angles[1]; var endAngle = this.angles[4]; var spreadAngle = endAngle - startAngle; var stacks = this.stackCount; for (var _stackCount = 0; _stackCount < stacks; _stackCount++) { var clone = this.children[_stackCount]; //start from angle[1] and end at angles[4] clone.angles[1] = startAngle + _stackCount * spreadAngle / (stacks * 100); clone.stiffness = this.stiffness;//_stackCount/stacks; clone.updateAngle(); } }; Book.prototype.refresh = function () { this.updatePage(this._activePage); if (this.flipCallback !== void 0) this.flipCallback(); }; Book.prototype.updatePage = function (pageNumber) { // this.contentProvider.setLoading(pageNumber, true); var isRTL = (this.direction == DFLIP.DIRECTION.RTL), isBooklet = isBookletMode(this), newBaseNumber = getBasePage(pageNumber); var pageDivisor = isBooklet ? 1 : 2; pageNumber = Math.floor((pageNumber / pageDivisor)); if (isRTL) pageNumber = this.pageCount / pageDivisor - pageNumber; var oldBaseNumber = this.oldBaseNumber || 0; var pageCount = this.pageCount / pageDivisor; var stackCount = this.stackCount; var angleShift = 0.02; var depth = 0.4; var stiffFactor = isBooklet ? 0 : (0.5 - Math.abs(pageCount / 2 - pageNumber) / pageCount) / this.stiffness; var positionFactor = 1;//(stiffFactor +width); // var centre = Math.floor(stackCount / 2); var midPoint = Math.floor(stackCount / 2);//pageNumber < centre ? pageNumber //starting center pages // : ((pageCount - pageNumber > centre) ? centre //other pages //: (pageNumber + centre - pageCount)) ;//remainig center page //console.log(midPoint); //var targetIndex = midPoint; //if(midPoint == centre) { /*This sitaution is good when there is icrement or decrement by 1*/ var isLeft = false; if (oldBaseNumber > pageNumber) { isLeft = true; this.children[stackCount - 1].skipFlip = true; this.children.unshift(this.children.pop()); // this.contentProvider.setLoading(pageNumber, true); } else if (oldBaseNumber < pageNumber) { this.children[0].skipFlip = true; this.children.push(this.children.shift()); // this.contentProvider.setLoading(pageNumber, true); } else { //midPoint = centre; } if (Math.abs(oldBaseNumber - pageNumber) > 1) { } //} var remainingPages = (pageCount - pageNumber); var stackDepth = (5) / pageCount; var leftDepth = stackDepth * pageNumber / 2; var rightDepth = stackDepth * remainingPages / 2; var maxDepth = (leftDepth < rightDepth ? rightDepth : leftDepth); //maxDepth = maxDepth > 5 ? 5: maxDepth; for (var _pageCount = 0; _pageCount < stackCount; _pageCount++) { var page = this.children[_pageCount];//this.getObjectByName("page"+_pageCount);//this.children[_pageCount]; var color = page.color; var oldAngle = page.angles[1]; var newAngle; var relativePageNumber = pageNumber - midPoint + _pageCount; var isHard = page.isHard = this.isPageHard(relativePageNumber); var oldName = page.name; page.visible = (relativePageNumber >= 0 && relativePageNumber < pageCount) || (isBooklet && relativePageNumber == pageCount); if (this.requestPage !== void 0) { if (isRTL) relativePageNumber = Math.floor(this.pageCount / 2) - relativePageNumber - 1; page.name = relativePageNumber.toString(); if (page.name != oldName && page.visible == true) { page.textureLoaded = false; page.frontImage(defaults.textureLoadFallback); page.frontPageStamp = "-1"; page.frontTextureLoaded = false; page.thumbLoaded = false; // if (!isBooklet) { page.backImage(defaults.textureLoadFallback); page.backPageStamp = "-1"; page.backTextureLoaded = false; // } this.requestPage(); } } //Sizing page.isEdge = false; //true; if (_pageCount == 0) { page.depth = leftDepth < depth ? depth : leftDepth; } else if (_pageCount == stackCount - 1) { page.depth = rightDepth < depth ? depth : rightDepth; } else { page.depth = depth; page.isEdge = false; } if (page.isFlipping == true) { page.depth = depth; } page.position.x = 0; var leftAngle = angleShift * _pageCount, rightAngle = 180 - angleShift * (_pageCount - midPoint) + angleShift * _pageCount; if (_pageCount < midPoint) { page.newStiffness = isHard ? 0 : stiffFactor / (pageNumber / pageCount) / 4; newAngle = leftAngle; page.position.z = maxDepth - ( -_pageCount + midPoint) * depth;//(pageNumber < pageCount / 2) if (isLeft == true) page.position.z -= depth; } else { newAngle = rightAngle; page.newStiffness = isHard ? 0 : stiffFactor / (Math.abs(pageCount - pageNumber) / pageCount) / 4; page.position.z = (maxDepth - (-stackCount + _pageCount + midPoint + 1) * depth) - page.depth;//(pageNumber < pageCount / 2) } if (page.isFlipping == false) { if (Math.abs(oldAngle - newAngle) > 20 && page.skipFlip == false) { page.depth = depth; //we need predicted stiffness so that there is no overlap issues var predicted = page.stiffness; if (oldAngle > newAngle) {//left predicted = stiffFactor / (Math.abs(pageCount - pageNumber) / pageCount) / 4; } else {//right predicted = stiffFactor / (pageNumber / pageCount) / 4; } page.position.z += depth;//((_pageCount < midPoint) ? 0 : depth) * 2;/// 2; page.stiffness = isNaN(predicted) ? page.stiffness : predicted; page.updateAngle(true); page.targetStiffness = (_pageCount < pageNumber) ? stiffFactor / (Math.abs(pageCount - pageNumber) / pageCount) / 4 : stiffFactor / (pageNumber / pageCount) / 4; page.targetStiffness = isNaN(page.targetStiffness) ? page.stiffness : page.targetStiffness; page.isFlipping = true; page.tween(oldAngle, newAngle); if (this.preFlipCallback !== void 0) this.preFlipCallback(); } else { page.skipFlip = false; page.newStiffness = isNaN(page.newStiffness) ? 0 : page.newStiffness; if (page.angles[1] != newAngle || page.stiffness != page.newStiffness || page.depth != page.oldDepth) { page.angles[1] = page.angles[4] = newAngle; page.stiffness = page.newStiffness; page.updateAngle(true); } else { //console.log("skipped"); } } } if (isBooklet && _pageCount < midPoint && page.isFlipping == false) page.visible = false; page.oldDepth = page.depth; var xPos = Math.abs(page.geometry.boundingBox.max.x) < Math.abs(page.geometry.boundingBox.min.x) ? page.geometry.boundingBox.max.x : page.geometry.boundingBox.min.x; page.position.x = (page.isEdge == true && page.isFlipping == false ) ? ((_pageCount < midPoint) ? xPos : -xPos) : 0; } //$(".quick-hint").html(pageNumber); //console.log("leftDepth:" + leftDepth, "rightDepth:" + rightDepth, "midPoint:" + midPoint, "oldBaseNumber:" + oldBaseNumber, "pageNumber:" + pageNumber); this.oldBaseNumber = pageNumber; if (this.updatePageCallback !== void 0) this.updatePageCallback(); }; //if (window.flipBook != void 0)flipBook.book.refresh(); //book.activePage(book.activePage()); Book.prototype.createCover = function (parameters) { parameters.width = parameters.width * 2; this.cover = new MOCKUP.BiFold(parameters); this.add(this.cover); }; Book.prototype.createStack = function (parameters) { var colors = "red,green,blue,yellow,orange,black".split(","); for (var _stackCount = 0; _stackCount < this.stackCount; _stackCount++) { parameters.angles = [, this.stackCount - _stackCount];//[1] = (this.stackCount - _stackCount); parameters.stiffness = (this.stackCount - _stackCount) / 100; var clone = new MOCKUP.BookPaper(parameters); clone.angles[1] = 180; //clone.name = "page" + _stackCount; clone.index = _stackCount; clone.updateAngle(); clone.textureReady = false; clone.textureRequested = false; this.add(clone); clone.color = colors[_stackCount]; //for (var _count = 0; _count < 4; _count++) { // clone.material.materials[_count].color = new THREE.Color(THREE.ColorKeywords[colors[_stackCount]]); //} clone.position.z = -1 * _stackCount;// * (this.mainObject.depth * 1.05); } }; Book.prototype.shininess = function (shininess) { if (shininess == void 0) { return this.mainObject.shininess(); } else { this.mainObject.shininess(shininess); } }; Book.prototype.bumpScale = function (bumpScale) { if (bumpScale == void 0) { return this.mainObject.bumpScale(); } else { this.mainObject.bumpScale(bumpScale); } }; Book.prototype.frontImage = function (frontImage) { if (frontImage == void 0) { return this.mainObject.frontImage(); } else { this.mainObject.frontImage(frontImage); } }; Book.prototype.backImage = function (backImage) { if (backImage == void 0) { return this.mainObject.backImage(); } else { this.mainObject.backImage(backImage); } }; return Book; })(MOCKUP.Bundle); MOCKUP.Book = Book; } //base object of flipbook or other trifold objects var PreviewObject = (function (_super) { function PreviewObject(parameters) { parameters = parameters || {}; //_super.call(this, parameters); this.type = "PreviewObject"; var _this = this; function resizeDelay() { setTimeout(function () { _this.resize() }, 50); } window.addEventListener("resize", resizeDelay, false); this.sound = document.createElement("audio"); this.sound.setAttribute("src", parameters.soundFile + "?ver=" + DFLIP.version); this.sound.setAttribute("type", "audio/mpeg"); //this.pageMode = DFLIP.PAGE_MODE.DOUBLE; this.dispose = function () { if (this.container && this.container.info && this.container.info.remove) this.container.info.remove(); if (this.target && this.target.dispose) this.target.dispose(); this.target = null; if (this.stage && this.stage.dispose) this.stage.dispose(); this.stage = null; //if (this.target && this.target.outlineContainer) this.target.outlineContainer.remove(); if (this.ui && this.ui.dispose) this.ui.dispose(); this.ui = null; if (this.contentProvider && this.contentProvider.dispose) this.contentProvider.dispose(); this.contentProvider = null; window.removeEventListener("resize", resizeDelay); }; } PreviewObject.prototype = { start: function () { this.target.gotoPage(this.target.startPage); }, end: function () { this.target.gotoPage(this.target.endPage); }, next: function () { }, prev: function () { }, zoom: function (delta) { this.pendingZoom = true; this.zoomDelta = delta; /* var contentProvider = this.contentProvider; contentProvider.zoomScale += delta; contentProvider.zoomScale = limitAt(contentProvider.zoomScale,1,contentProvider.maxZoom);//(delta == true) ? 2 : 1; //contentProvider.checkViewportSize(); //contentProvider.zoomScale = (zoom == true) ? contentProvider.normalViewport.height * contentProvider.viewport.scale / contentProvider.viewport.height : 1; if (this.stage !== void 0) { //this.stage.pendingZoom = true;//not used anymore //this.stage.resize(); //var cameraZ = this.stage.camera.position.z; //this.stage.camera.position.set(0, 0, zoom == true ? 300 : 600); } else { //this.target.wrapper.css({ // transform: "scale(" + 1*/ /*contentProvider.zoomScale*/ /* + ")" //}); this.target.left = 0; this.target.top = 0; }*/ /* if (contentProvider.zoomScale != 1) { this.target.container.addClass("df-zoom-enabled"); } else { this.target.container.removeClass("df-zoom-enabled"); }*/ this.resize(); this.ui.update(); }, resize: function () { var _this = this; if (_this.target == void 0 || _this.target.ui == void 0 || _this.target.contentProvider == void 0 || _this.target.contentProvider.viewport == void 0 || _this.target.stage == void 0) return; var isSingle = this.target.pageMode == DFLIP.PAGE_MODE.SINGLE, isFloating = _this.container.hasClass("df-floating"); var target = _this.target, stage = target.stage, contentProvider = target.contentProvider, pageRatio = contentProvider.pageRatio, zoomViewport = contentProvider.zoomViewport, is3d = target.mode !== "css"; var parentWidth, parentHeight, windowHeight = $(window).height(); //checking if the container height is more than the window height var containerHeight = target.ui.isFullscreen == true ? windowHeight : this.options.height; _this.container.height(containerHeight); if (Math.min(_this.container.height(), windowHeight) == windowHeight) containerHeight = windowHeight; _this.container.height(containerHeight); containerHeight = _this.container.height(); //fixing if the options are set on percentage if (!is3d) { stage.css({ top: 0, bottom: 0, right: 0, left: 0, transform: "translate3d(" + _this.target.left + "px," + _this.target.top + "px,0)" }); target.stageHeight = stage.height(); } parentWidth = stage.width(); parentHeight = stage.height(); var availableWidth = parentWidth - (is3d ? 100 : 0), availableHeight = Math.min(parentHeight - (is3d ? 100 : 0), windowHeight), possibleWidth = Math.floor(isSingle ? availableWidth : availableWidth / 2); var requiredHeight = Math.floor(possibleWidth / pageRatio); var height, width, cameraZ, fov, zoom; height = Math.min(requiredHeight, availableHeight); width = Math.floor(height * pageRatio); contentProvider.maxZoom = contentProvider.zoomViewport.height / height; /* if (_this.pendingZoom == true && _this.zoomDelta !== void 0) { _this.pendingZoom = false; var delta = _this.zoomDelta, predictedIndex, currentMaxDimension = Math.max(height, width); var improperZoom = contentProvider.zoomScale == 1; var currentZoomScale = limitAt(improperZoom ? contentProvider.zoomScale : contentProvider.zoomScale + delta, 1, contentProvider.maxZoom); */ /* if (delta > 0) { predictedIndex = nearestPowerOfTwo(currentMaxDimension * currentZoomScale); } else { predictedIndex = utils.lowerPowerOfTwo(currentMaxDimension * currentZoomScale); }*/ /* predictedIndex = utils.zoomStops(currentMaxDimension * currentZoomScale,1.5,delta>0); contentProvider.zoomScale += delta; contentProvider.zoomScale = limitAt(predictedIndex / currentMaxDimension, 1, contentProvider.maxZoom); //contentProvider.zoomScale = limitAt(delta > 0 ? _this.options.zoomRatio * contentProvider.zoomScale // : contentProvider.zoomScale / _this.options.zoomRatio, 1, contentProvider.maxZoom); _this.zoomDelta = void 0; } */ if (_this.zoomValue == void 0) _this.zoomValue = 1; if (_this.pendingZoom == true && _this.zoomDelta !== void 0) { var delta = _this.zoomDelta, predictedIndex, currentMaxDimension = Math.max(height, width); _this.zoomValue = _this.zoomDelta > 0 ? _this.zoomValue * _this.options.zoomRatio : _this.zoomValue / _this.options.zoomRatio; _this.zoomValue = limitAt(_this.zoomValue, 1, contentProvider.maxZoom); if (_this.zoomValue == 1) { contentProvider.zoomScale = 1; } else { predictedIndex = height * _this.zoomValue; predictedIndex = utils.zoomStops(predictedIndex, _this.options.zoomRatio); contentProvider.zoomScale = limitAt(predictedIndex / currentMaxDimension, 1, contentProvider.maxZoom); } } zoom = (contentProvider.zoomScale == 1 || contentProvider.zoomScale == void 0) ? 1 : contentProvider.zoomScale;//zoomViewport.height / parentHeight,//target.contentProvider.zoomScale, //findout which cacheIndex to use contentProvider.checkViewportSize(width, height, zoom); if (_this.contentSourceType == SOURCE_TYPE.PDF) { //recalculation is required for pixel shift issue only if the source is PDF width = contentProvider.viewport.width / zoom; height = contentProvider.viewport.height / zoom; } if (contentProvider.zoomScale != 1) { this.target.container.addClass("df-zoom-enabled"); } //if(contentProvider.zoomScale != 1) //zoom = contentProvider.cacheIndex / height; //rather than responsive lets use var containerWidth = _this.container.width(); if (containerWidth < 400) { _this.container.addClass("df-xs"); } else { _this.container.removeClass("df-xs"); } var maxZoom = contentProvider.maxZoom; if (is3d) { //stage.resize(); //_this.container.height(height); //height = containerHeight; var controlsHeight = _this.container.find(".df-ui-controls").height(); if (controlsHeight == null || isFloating) controlsHeight = 0; stage.canvas.height(containerHeight - controlsHeight); if (_this.container.hasClass("df-sidemenu-open")) { parentWidth = parentWidth - 220; } stage.resizeCanvas(parentWidth, containerHeight - controlsHeight); //if (target !== void 0) // target.height = height; //target.contentProvider.checkViewportSize(); //height = 300;//flipBook.target.height; //var contentHeight = target.contentProvider.viewport.height * target.contentProvider.viewport.scale; //zoom = zoom ==1 ? zoom: zoom * zoom; //if (zoom == 1) { // cameraZ = (height) * Math.tan(stage.camera.fov * 2 * Math.PI / 180); //} //else { //var height = flipBook.options.height, visible = height ,zoom = (1600+ 1)/height var imageHeight = height * zoom, imageWidth = width * zoom, pageHeight = target.height, expectedWidth = parentWidth * pageHeight / containerHeight, ppi = imageHeight / pageHeight, //realpixels per canvas pixel aspect = parentWidth / containerHeight; var pageModeWidth = target.width * (isSingle ? 1 : 2); var refWidth = expectedWidth < pageModeWidth ? pageModeWidth / aspect : target.height; var padding = _this.options.minTopOffset + (isFloating ? (60) : 30); var adjustment = containerHeight / (containerHeight - padding); /* cameraZ = 1000, fov = 2 * Math.atan((refLength) / (zoom / adjustment) / ( 2 * cameraZ )) * ( 180 / Math.PI ); */ //cameraZ = 1000, cameraZ = 1 / ( 2 * Math.tan(Math.PI * stage.camera.fov * 0.5 / 180) / ((refWidth) / (zoom / adjustment))); //0.5* (zoom / adjustment) / (refLength) / Math.tan((fov /2) * Math.PI /180) ; //cameraZ = 1000/(zoom / adjustment); //stage.camera.fov = fov; stage.camera.updateProjectionMatrix(); //cameraZ = ((height + 60)*2 / zoom )* Math.tan(stage.camera.fov * Math.PI / 180);//(height /zoom) * Math.tan(stage.camera.fov * 2 * Math.PI / 180)/zoom; //} stage.renderRequestPending = true; //if (stage.pendingZoom == true || zoom !== 1) { //stage.camera.position.z = cameraZ; //pixel value to stage position value var shift = padding / 2 - _this.options.minTopOffset; //put a check if the existing gap is enough _this.target.position.y = shift * pageHeight / (_this.container.height() - padding); stage.cssScene.position.y = _this.target.position.y; //stage.oldPositionZ = stage.camera.position.z; /* if (contentProvider.zoomScale == 1) { stage.camera.position.set(0, 0, cameraZ); stage.orbitControl.target = new THREE.Vector3(0, 0, 0); //stage.orbitControl.panUp(shift); }*/ var _reset = contentProvider.zoomScale == 1; if (stage.camera.position.z !== cameraZ && _this.pendingZoom == true) { //avoid recreating the tween if the target is same as before if (_this.zoomTween !== void 0) _this.zoomTween.stop(); _this.zoomTween = new TWEEN.Tween({ campos: stage.camera.position.z, otx: stage.orbitControl.target.x, oty: stage.orbitControl.target.y, otz: stage.orbitControl.target.z }).delay(0) .to({ campos: cameraZ, otx: 0, oty: 0, otz: 0 }, 100) .onUpdate(function () { stage.camera.position.z = this.campos; if (_reset) { //console.log(this); stage.orbitControl.target = new THREE.Vector3(this.otx, this.oty, this.otz); } //if(contentProvider.zoomScale == 1){ //stage.camera.position.x = this.x; //stage.camera.position.y = this.y; //} stage.orbitControl.update(); }).easing(TWEEN.Easing.Linear.None) .onComplete(function () { stage.camera.position.z = cameraZ; if (contentProvider.zoomScale == 1) { stage.camera.position.set(0, 0, cameraZ); stage.orbitControl.target = new THREE.Vector3(0, 0, 0); //stage.orbitControl.panUp(shift); } stage.orbitControl.update(); }) .start(); //stage.oldPositionZ = cameraZ; } else { if (contentProvider.zoomScale == 1) { stage.camera.position.set(0, 0, cameraZ); stage.orbitControl.target = new THREE.Vector3(0, 0, 0); //stage.orbitControl.panUp(shift); } else { stage.camera.position.z = cameraZ; } stage.orbitControl.update(); } stage.orbitControl.update(); stage.orbitControl.mouseButtons.ORBIT = zoom != 1 ? -1 : THREE.MOUSE.RIGHT; stage.orbitControl.mouseButtons.PAN = zoom != 1 ? THREE.MOUSE.LEFT : -1; //} //if(isMobile) stage.orbitControl.mouseButtons.PAN = -1; } else { if (target !== void 0) { //if (zoom > 1) { // height = target.contentProvider.zoomViewport.height / zoom;//Math.min(requiredHeight, availableHeight); // width = target.contentProvider.zoomViewport.width / zoom; //} target.pageWidth = Math.round(width); target.fullWidth = target.pageWidth * 2; target.height = Math.round(height); var zoomWidth = target.zoomWidth = Math.floor(width * zoom), zoomHeight = target.zoomHeight = Math.floor(height * zoom); //target.wrapper.width(target.fullWidth).height(height); var stagePaddingW = target.stage.innerWidth() - target.stage.width(), stagePaddingH = target.stage.innerHeight() - target.stage.height(); var shiftHeight = target.shiftHeight = limitAt((zoomHeight - (containerHeight - stagePaddingH)) / 2, 0, zoomHeight), shiftWidth = target.shiftWidth = limitAt(zoom == 1 ? 1 : ((zoomWidth * 2) - target.container.width() + stagePaddingW ) / 2, 0, target.fullWidth * zoom); if (zoom == 1) { target.left = 0; target.top = 0; } target.stage.css({ top: -shiftHeight, bottom: -shiftHeight, right: -shiftWidth, left: -shiftWidth, transform: "translate3d(" + target.left + "px," + target.top + "px,0)" }); //target.foldSense = this.pageWidth / 5; var stageInnerHeight = target.stage.innerHeight(); target.wrapper.css({ width: zoomWidth * 2, height: zoomHeight, marginTop: (containerHeight - zoomHeight - stagePaddingH ) > 0 ? (containerHeight - stagePaddingH - zoomHeight) / 2 : 0 }); var wrapperSize = Math.floor(distOrigin(width, height)) * zoom; target.stage.find(".df-page-wrapper").width(wrapperSize).height(wrapperSize); target.stage.find(".df-book-page, .df-page-front , .df-page-back, .df-page-fold-inner-shadow").height(zoomHeight).width(zoomWidth); //target.contentProvider.checkViewportSize(); //log("resized"); //target.resize(); } } _this.checkCenter({type: "resize"}); if (contentProvider.zoomScale == 1) { this.target.container.removeClass("df-zoom-enabled"); } if (target.thumblist) { target.thumblist.reset($(target.thumblist.container).height()); } /* $(".quick-hint").html(JSON.stringify({ size: contentProvider.cacheIndex, zoom: Math.round(contentProvider.zoomScale * 10) / 10, height: height * zoom }));*/ _this.pendingZoom = false; }, playSound: function () { try { if (this.options && this.options.soundEnable == true) { this.sound.currentTime = 0; this.sound.play(); } } catch (error) { } }, setPageMode: function (isSingle) { if (isSingle == true) { this.ui.pageMode.addClass(this.options.icons['doublepage']); this.ui.pageMode.html("" + this.options.text.doublePageMode + ""); this.ui.pageMode.attr("title", this.options.text.doublePageMode); this.target.pageMode = DFLIP.PAGE_MODE.SINGLE; } else { this.ui.pageMode.removeClass(this.options.icons['doublepage']); this.ui.pageMode.html("" + this.options.text.singlePageMode + ""); this.ui.pageMode.attr("title", this.options.text.singlePageMode); this.target.pageMode = DFLIP.PAGE_MODE.DOUBLE; } if (this.target && this.target.singlePageMode == DFLIP.SINGLE_PAGE_MODE.BOOKLET) { this.target.reset(); } this.resize(); }, height: function (height) { if (height == void 0) { return this.container.height(); } else { this.options.height = height; this.container.height(height); this.resize(); } }, /** *checks whether the book is closed and needs to be centered */ checkCenter: function (options) { options = options == void 0 ? {} : options; this.centerType = this.centerType || "start"; var target = this.target; var singleShift = 0, left = 0, right = 0; var basePage = utils.getBasePage(target._activePage); var isEven = target._activePage % 2 == 0; var isRTL = target.direction == DFLIP.DIRECTION.RTL; var isSingle = target.pageMode == DFLIP.PAGE_MODE.SINGLE, isBooklet = isSingle && target.singlePageMode == DFLIP.SINGLE_PAGE_MODE.BOOKLET; var stageWidth = target.stage.width(), width; if (target.mode == 'css') { width = target.wrapper.width(); //calculate the excess shift required for correction in case width is too small singleShift = Math.max((width - stageWidth) / 2, 0); left = -width / 4; right = width / 4; if (basePage == 0 || isBooklet) { target.wrapper.css({ left: isSingle ? isRTL ? right - singleShift : left - singleShift : isRTL ? right : left }); target.shadow.css({width: '50%', left: isRTL ? 0 : '50%', transitionDelay: ''}); } else if (basePage == target.pageCount) { target.wrapper.css({ left: isSingle ? isRTL ? left - singleShift : right - singleShift : isRTL ? left : right }); target.shadow.css({width: '50%', left: isRTL ? '50%' : 0, transitionDelay: ''}); } else { target.wrapper.css({ left: isSingle ? isRTL ? (isEven ? left - singleShift : right - singleShift ) : (isEven ? right - singleShift : left - singleShift ) : 0 }); target.shadow.css({ width: '100%', left: 0, transitionDelay: (parseInt(target.duration, 10) + 50) + 'ms' }); } target.wrapper.css({transition: options.type == "resize" ? "none" : ""}); } else if (target.stage !== void 0) { var init = target.position.x, end; singleShift = target.width / 4; width = target.width; left = -width / 2; right = width / 2; if (basePage == 0 || isBooklet) { end = isRTL ? right : left; } else if (basePage == target.pageCount) { end = isRTL ? left : right; } else { end = isSingle ? isRTL ? (isEven ? left : right ) : (isEven ? right : left ) : 0; } //create a centertween if (end !== this.centerEnd) { //avoid recreating the tween if the target is same as before this.centerTween = new TWEEN.Tween({x: init}).delay(0) .to({x: end}, target.duration) .onUpdate(function () { target.position.x = this.x; target.stage.cssScene.position.x = this.x; }).easing(target.ease) .start(); this.centerEnd = end; } } // log("checkcenter at : " + left); }, width: function (width) { if (width == void 0) { return this.container.width(); } else { this.options.width = width; this.container.width(width); this.resize(); } } }; return PreviewObject; })({}); DFLIP.PreviewObject = PreviewObject; //contentprovider that handles the source of book var ContentProvider = (function (_super) { __extends(ContentProvider, _super); var textureLoadTimeOut = void 0; function ContentProvider(contentSource, callback, parameters, flipbook) { parameters = parameters || {}; var _this = this; _this.contentRawSource = contentSource || [defaults.textureLoadFallback]; _this.contentSource = _this.contentRawSource; _this.contentSourceType = void 0; _this.minDimension = parameters.minTextureSize || 256; _this.maxDimension = parameters.maxTextureSize || 2048; _this.flipbook = flipbook; _this.waitPeriod = 50; _this.enableDebug = false; _this.zoomScale = 1; _this.maxZoom = 2; _this.options = parameters; _this.outline = parameters.outline; _this.links = parameters.links; _this.html = parameters.html; _this.isCrossOrigin = parameters.isCrossOrigin; _this.normalViewport = { height: 297, width: 210, scale: 1 }; _this.viewport = { height: 297, width: 210, scale: 1 }; _this.zoomViewport = { height: 297, width: 210 }; _this.thumbsize = 128; _this.cacheIndex = 256; //index of bigger dimension height or width _this.cache = []; _this.pageRatio = parameters.pageRatio || _this.viewport.width / _this.viewport.height; //texture load control so that it wont delay the transition _this.textureLoadTimeOut = void 0; _this.type = "TextureLibrary"; if (Array === _this.contentSource.constructor || Array.isArray(_this.contentSource) || _this.contentSource instanceof Array) { //case of images and html content _this.contentSourceType = SOURCE_TYPE.IMAGE; _this.pageCount = _this.contentSource.length; //_this.setLoading(1, true); // Make in memory copy of image to avoid css issues $("") .attr("src", _this.contentSource[0]) .on('load', (function () { _this.viewport.height = this.height; _this.viewport.width = this.width; _this.pageRatio = _this.viewport.width / _this.viewport.height; _this.zoomViewport = { width: (_this.pageRatio > 1 ? 1 : _this.pageRatio) * _this.maxDimension, height: _this.maxDimension / (_this.pageRatio < 1 ? 1 : _this.pageRatio) }; _this.linkService = new PDFLinkService(); $(this).off(); if (callback != void 0) callback(_this); //_this.setLoading(1); //console.log(_this.zoomViewport); log(this.height + ":" + this.width); //pic_real_width = this.width; // Note: $(this).width() will not //pic_real_height = this.height; // work for in memory images. //moved to set target function //_this. // (); })); } else if (typeof _this.contentSource == 'string' || _this.contentSource instanceof String) { //case of link to pdf file var processSource = function () { //configurePDFJS(PDFJS); PDFJS.workerSrc = defaults.pdfjsWorkerSrc; _this.contentSourceType = SOURCE_TYPE.PDF; //PDFJS.disableWorker = true; PDFJS.disableAutoFetch = true; PDFJS.disableStream = true; PDFJS.externalLinkTarget = PDFJS.LinkTarget.BLANK; var loading = PDFJS.getDocument(_this.options.docParameters ? _this.options.docParameters : contentSource); loading.then(function sourceLoaded(pdf) { _this.pdfDocument = pdf; pdf.getPage(1).then(function (page) { _this.normalViewport = page.getViewport(1); _this.viewport = page.getViewport(1); _this.viewport.height = _this.viewport.height / 10; _this.viewport.width = _this.viewport.width / 10; _this.pageRatio = _this.viewport.width / _this.viewport.height; _this.zoomViewport = { width: (_this.pageRatio > 1 ? 1 : _this.pageRatio) * _this.maxDimension, height: _this.maxDimension / (_this.pageRatio < 1 ? 1 : _this.pageRatio) }; _this.refPage = page; //console.log(_this.zoomViewport); //check if intenal pages are of double sizes. if (pdf.numPages > 1) { pdf.getPage(2).then(function (page) { if (_this.options.pageSize == DFLIP.PAGE_SIZE.AUTO) { var _viewport = page.getViewport(1); //Update: doing width check gives false alarm if the internal pages are of different sizes yet follow same aspect ratio //if (_viewport.width > _this.normalViewport.width * 1.5) { var _pageRatio = _viewport.width / _viewport.height; if (_pageRatio > _this.pageRatio * 1.5) { _this.options.pageSize = DFLIP.PAGE_SIZE.DOUBLEINTERNAL; _this.pageCount = pdf.numPages * 2 - 2; } else { _this.options.pageSize = DFLIP.PAGE_SIZE.SINGLE; } } if (callback != void 0) callback(_this); }); } else { if (callback != void 0) callback(_this); } }); _this.linkService = new PDFLinkService(); _this.linkService.setDocument(pdf, null); //moved to set target function //_this.initThumbs(); _this.pageCount = pdf.numPages; _this.contentSource = pdf; }, function loadingError(error) { var cors = "", tmp = document.createElement('a'); tmp.href = _this.contentSource; if (tmp.hostname !== window.location.hostname) cors = "CROSS ORIGIN!! "; _this.updateInfo(cors + "Cannot access file! " + _this.contentSource); }); loading.onProgress = function getDocumentProgress(progressData) { var percentage = 100 * progressData.loaded / progressData.total; if (isNaN(percentage)) { if (progressData && progressData.loaded) { _this.updateInfo("Loading PDF " + (Math.ceil(progressData.loaded / 10000) / 100).toString() + "MB ..."); } else { _this.updateInfo("Loading PDF ..."); } } else { _this.updateInfo("Loading PDF " + percentage.toString().split(".")[0] + "% ..."); } }; }; var checkCORS = function () { defaults.pdfjsWorkerSrc += "?ver=" + DFLIP.version; _this.updateInfo("Loading PDF Worker ..."); var tmp = document.createElement('a'); tmp.href = defaults.pdfjsWorkerSrc; if (tmp.hostname !== window.location.hostname) { _this.updateInfo("Loading PDF Worker CORS ..."); $.ajax({ url: defaults.pdfjsWorkerSrc, cache: true, success: function (data) { defaults.pdfjsWorkerSrc = DFLIP.createObjectURL(data, "text/javascript"); processSource(); } }); } else { processSource(); } }; if (window.PDFJS == void 0) { _this.updateInfo("Loading PDF Service ..."); //getScript(defaults.pdfjsCompatibilitySrc + "?ver=" + DFLIP.version, function () { getScript(defaults.pdfjsSrc + "?ver=" + DFLIP.version, function () { if (typeof define === 'function' && define.amd) { _this.updateInfo("Loading PDF Service (require) ..."); require(['pdfjs-dist/build/pdf'], function (pdf) { checkCORS(); }); } else { checkCORS(); } }, function () { _this.updateInfo("Unable to load PDF service.."); }); //}); } else { processSource(); } } else { console.error("Unknown source type. Please check documentation for help"); } this.dispose = function () { if (this.targetObject) { if (this.targetObject.dispose) this.targetObject.dispose(); this.targetObject.processPage = null; this.targetObject.requestPage = null; } if (this.pdfDocument && this.pdfDocument.destroy) this.pdfDocument.destroy(); if (this.linkService && this.linkService.dispose) this.linkService.dispose(); if (this.outlineViewer && this.outlineViewer.dispose) this.outlineViewer.dispose(); if (this.thumblist && this.thumblist.dispose) this.thumblist.dispose(); this.targetObject = null; this.pdfDocument = null; this.linkService = null; this.outlineViewer = null; this.thumblist = null; }; return this; } ContentProvider.prototype.updateInfo = function (info) { if (this.flipbook && this.flipbook.updateInfo) { this.flipbook.updateInfo(info); } }; ContentProvider.prototype.initThumbs = function () { var _this = this; if (_this.cache[_this.thumbsize] == void 0) _this.cache[_this.thumbsize] = []; var thumbLoadTimeOut; var review = function () { clearTimeout(thumbLoadTimeOut); thumbLoadTimeOut = setTimeout(function () { thumbLoadTimeOut = setTimeout(reviewThumbs, _this.waitPeriod / 2); }, _this.waitPeriod); }; var reviewThumbs = function () { var requestCount = 0; if (Date.now() - _this.thumblist.lastScrolled < 100) { requestCount = 1; } else { _this.targetObject.container.find(".df-thumb-container .df-vrow").each(function () { var thumb = $(this); if (!thumb.hasClass("df-thumb-loaded")) { requestCount++; var id = $(this).attr("id").replace("df-thumb", ""); _this.getPage(id, review, true); thumb.addClass("df-thumb-loaded"); return false; } }); if (requestCount == 0) { clearTimeout(thumbLoadTimeOut); } } if (requestCount > 0) { review(); } }; _this.thumblist = _this.targetObject.thumblist = new ThumbList({ //w: 128 * _this.viewport.width/_this.viewport.height, h: 500, addFn: function (row) { }, scrollFn: review, itemHeight: 128, totalRows: _this.pageCount, generatorFn: function (row) { var el = document.createElement("div"); var pageNumber = row + 1; el.id = "df-thumb" + pageNumber; var elText = document.createElement("div"); elText.innerHTML = pageNumber; el.appendChild(elText); //el.style.position = "absolute"; //el.callback = function_this.getPage(pageNumber,void 0,true); return el; } }); _this.thumblist.lastScrolled = Date.now(); review(); //_this.thumblist.container.classList.add('thumb-container'); _this.targetObject.thumbContainer = $(_this.thumblist.container).addClass("df-thumb-container df-thumb-visible"); _this.targetObject.container.append(_this.targetObject.thumbContainer); _this.thumblist.reset($(_this.thumblist.container).height()); _this.targetObject.container.on('click', '.df-thumb-container .df-vrow', function (e) { e.stopPropagation(); var id = $(this).attr("id").replace("df-thumb", ""); _this.targetObject.gotoPage(parseInt(id, 10)); }); }; ContentProvider.prototype.initOutline = function () { var _this = this; var outlineContainer = $('