Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
Upload 6 files
Browse files- flipbook.book3.js +1230 -0
- flipbook.css +2515 -0
- flipbook.js +0 -0
- flipbook.scroll.js +539 -0
- flipbook.swipe.js +1294 -0
- flipbook.webgl.js +0 -0
flipbook.book3.js
ADDED
@@ -0,0 +1,1230 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/*
|
2 |
+
* Real3D FlipBook [https://real3dflipbook.com]
|
3 |
+
* @author creativeinteractivemedia [https://codecanyon.net/user/creativeinteractivemedia/portfolio]
|
4 |
+
* @version 4.10
|
5 |
+
* @date 2025-05-15
|
6 |
+
*/
|
7 |
+
'use strict';
|
8 |
+
var FLIPBOOK = FLIPBOOK || {};
|
9 |
+
|
10 |
+
FLIPBOOK.Book3 = function (el, main, options) {
|
11 |
+
this.options = options;
|
12 |
+
this.main = main;
|
13 |
+
|
14 |
+
this.singlePage = options.singlePageMode;
|
15 |
+
this.pageWidth = options.pageWidth;
|
16 |
+
this.pageHeight = options.pageHeight;
|
17 |
+
|
18 |
+
// Set up the wrapper and parent container
|
19 |
+
this.wrapper = el;
|
20 |
+
this.wrapper.classList.add('flipbook-book3');
|
21 |
+
this.bookLayer = this.wrapper.parentNode;
|
22 |
+
|
23 |
+
this.flipEasing = 'easeOutQuad';
|
24 |
+
this.translateZ = '';
|
25 |
+
|
26 |
+
// Initialize IScroll with options
|
27 |
+
this.iscroll = new FLIPBOOK.IScroll(this.bookLayer, {
|
28 |
+
zoom: true,
|
29 |
+
scrollX: true,
|
30 |
+
scrollY: true,
|
31 |
+
scrollbars: true,
|
32 |
+
keepInCenterV: true,
|
33 |
+
keepInCenterH: true,
|
34 |
+
freeScroll: true,
|
35 |
+
preventDefault: false,
|
36 |
+
});
|
37 |
+
|
38 |
+
// Event listeners for enabling/disabling IScroll
|
39 |
+
main.on('disableIScroll', this.disableIscroll.bind(this));
|
40 |
+
main.on('enableIScroll', this.enableIscroll.bind(this));
|
41 |
+
|
42 |
+
// Handle zoom end event
|
43 |
+
this.iscroll.on('zoomEnd', () => {
|
44 |
+
if (isNaN(this.iscroll.scale)) {
|
45 |
+
return this.zoomTo(options.zoomMin);
|
46 |
+
}
|
47 |
+
|
48 |
+
options.main.onZoom(this.iscroll.scale / this.ratio);
|
49 |
+
this.updateVisiblePages();
|
50 |
+
|
51 |
+
const zoomed = options.main.zoom > 1;
|
52 |
+
|
53 |
+
if (this.zoomed !== zoomed) {
|
54 |
+
const scrollOptions = this.iscroll.options;
|
55 |
+
scrollOptions.eventPassthrough = zoomed ? '' : 'vertical';
|
56 |
+
scrollOptions.freeScroll = zoomed;
|
57 |
+
this.iscroll.refresh();
|
58 |
+
this.zoomed = zoomed;
|
59 |
+
}
|
60 |
+
});
|
61 |
+
|
62 |
+
// Set wrapper and center container dimensions
|
63 |
+
this.wrapper.style.width = `${2 * this.pageWidth}px`;
|
64 |
+
this.wrapper.style.height = `${this.pageHeight}px`;
|
65 |
+
|
66 |
+
this.centerContainer = document.createElement('div');
|
67 |
+
this.centerContainer.className = 'flipbook-center-container3';
|
68 |
+
this.centerContainer.style.width = `${2 * this.pageWidth}px`;
|
69 |
+
this.centerContainer.style.height = `${this.pageHeight}px`;
|
70 |
+
this.wrapper.appendChild(this.centerContainer);
|
71 |
+
|
72 |
+
// Set perspective based on options or view mode
|
73 |
+
const perspective = this.options.perspective || (this.options.viewMode === '3d' ? 3 * this.pageHeight : 200000);
|
74 |
+
this.centerContainer.style.perspective = `${perspective}px`;
|
75 |
+
|
76 |
+
// Initialize pages
|
77 |
+
this.pagesArr = [];
|
78 |
+
this.animating = false;
|
79 |
+
|
80 |
+
let numSheets = this.options.pages.length;
|
81 |
+
if (!this.options.cover) numSheets += 1;
|
82 |
+
|
83 |
+
for (let i = 0; i < numSheets; i++) {
|
84 |
+
const page = new FLIPBOOK.Page3(this, i);
|
85 |
+
this.pagesArr.push(page);
|
86 |
+
this.centerContainer.appendChild(page.wrapper);
|
87 |
+
}
|
88 |
+
};
|
89 |
+
|
90 |
+
FLIPBOOK.Book3.prototype = Object.create(FLIPBOOK.Book.prototype);
|
91 |
+
|
92 |
+
FLIPBOOK.Book3.prototype.constructor = FLIPBOOK.Book3;
|
93 |
+
|
94 |
+
FLIPBOOK.Book3.prototype.enableIscroll = function () {
|
95 |
+
if (this.iscrollDisabled) {
|
96 |
+
this.iscroll.enable();
|
97 |
+
this.iscrollDisabled = false;
|
98 |
+
}
|
99 |
+
};
|
100 |
+
|
101 |
+
FLIPBOOK.Book3.prototype.disableIscroll = function () {
|
102 |
+
if (!this.iscrollDisabled) {
|
103 |
+
this.iscroll.disable();
|
104 |
+
this.iscroll.initiated = false;
|
105 |
+
this.iscrollDisabled = true;
|
106 |
+
}
|
107 |
+
};
|
108 |
+
|
109 |
+
FLIPBOOK.Book3.prototype.enableMouseWheelZoom = function () {
|
110 |
+
this.iscroll.options.eventPassthrough = 'vertical';
|
111 |
+
this.iscroll.refresh();
|
112 |
+
};
|
113 |
+
|
114 |
+
FLIPBOOK.Book3.prototype.disableMouseWheelZoom = function () {
|
115 |
+
this.iscroll.options.eventPassthrough = '';
|
116 |
+
this.iscroll.refresh();
|
117 |
+
};
|
118 |
+
|
119 |
+
FLIPBOOK.Book3.prototype.enablePrev = function (val) {
|
120 |
+
this.prevEnabled = val;
|
121 |
+
};
|
122 |
+
|
123 |
+
FLIPBOOK.Book3.prototype.enablePan = function () {
|
124 |
+
this.iscroll.enable();
|
125 |
+
};
|
126 |
+
|
127 |
+
FLIPBOOK.Book3.prototype.disablePan = function () {
|
128 |
+
this.iscroll.disable();
|
129 |
+
};
|
130 |
+
|
131 |
+
FLIPBOOK.Book3.prototype.setRightIndex = function (val) {
|
132 |
+
this.rightIndex = val;
|
133 |
+
};
|
134 |
+
|
135 |
+
FLIPBOOK.Book3.prototype.enableNext = function (val) {
|
136 |
+
this.nextEnabled = val;
|
137 |
+
};
|
138 |
+
|
139 |
+
FLIPBOOK.Book3.prototype.isZoomed = function () {
|
140 |
+
return this.options.main.zoom > this.options.zoomMin && this.options.main.zoom > 1;
|
141 |
+
};
|
142 |
+
|
143 |
+
FLIPBOOK.Book3.prototype.getNumPages = function () {};
|
144 |
+
|
145 |
+
FLIPBOOK.Book3.prototype.move = function (direction) {
|
146 |
+
if (this.zoom <= 1) {
|
147 |
+
return;
|
148 |
+
}
|
149 |
+
|
150 |
+
var iscroll = this.iscroll;
|
151 |
+
var offset2 = 0;
|
152 |
+
|
153 |
+
if (iscroll) {
|
154 |
+
var posX = iscroll.x;
|
155 |
+
var posY = iscroll.y;
|
156 |
+
var offset = 20 * this.zoom;
|
157 |
+
switch (direction) {
|
158 |
+
case 'left':
|
159 |
+
posX += offset;
|
160 |
+
break;
|
161 |
+
case 'right':
|
162 |
+
posX -= offset;
|
163 |
+
break;
|
164 |
+
case 'up':
|
165 |
+
posY += offset;
|
166 |
+
break;
|
167 |
+
case 'down':
|
168 |
+
posY -= offset;
|
169 |
+
break;
|
170 |
+
}
|
171 |
+
|
172 |
+
if (posX > 0) {
|
173 |
+
posX = offset2;
|
174 |
+
}
|
175 |
+
if (posX < iscroll.maxScrollX) {
|
176 |
+
posX = iscroll.maxScrollX - offset2;
|
177 |
+
}
|
178 |
+
if (posY > 0) {
|
179 |
+
posY = offset2;
|
180 |
+
}
|
181 |
+
if (posY < iscroll.maxScrollY) {
|
182 |
+
posY = iscroll.maxScrollY - offset2;
|
183 |
+
}
|
184 |
+
|
185 |
+
iscroll.scrollTo(posX, posY, 0);
|
186 |
+
}
|
187 |
+
};
|
188 |
+
|
189 |
+
FLIPBOOK.Book3.prototype.zoomTo = function (zoom, time, x, y) {
|
190 |
+
if (!this.enabled) {
|
191 |
+
return;
|
192 |
+
}
|
193 |
+
|
194 |
+
x = x || 0;
|
195 |
+
y = y || 0;
|
196 |
+
time = time || 0;
|
197 |
+
this.zoom = zoom;
|
198 |
+
|
199 |
+
time = 0;
|
200 |
+
|
201 |
+
var iscroll = this.iscroll;
|
202 |
+
if (iscroll) {
|
203 |
+
iscroll.zoom(zoom * this.ratio, x, y, time);
|
204 |
+
}
|
205 |
+
};
|
206 |
+
|
207 |
+
FLIPBOOK.Book3.prototype.setWrapperW = function (w) {
|
208 |
+
if (this.wrapperW != w) {
|
209 |
+
this.wrapper.style.width = w + 'px';
|
210 |
+
this.wrapperW = w;
|
211 |
+
}
|
212 |
+
};
|
213 |
+
|
214 |
+
FLIPBOOK.Book3.prototype.updateBookPosition = function () {
|
215 |
+
if (this.singlePage) {
|
216 |
+
this.setWrapperW(this.pageWidth);
|
217 |
+
if (this.iscroll) {
|
218 |
+
this.iscroll.refresh();
|
219 |
+
}
|
220 |
+
this.view = 1;
|
221 |
+
this.focusRight();
|
222 |
+
return;
|
223 |
+
}
|
224 |
+
|
225 |
+
if (this.view == 1) {
|
226 |
+
this.setWrapperW(this.pageWidth);
|
227 |
+
} else {
|
228 |
+
this.setWrapperW(2 * this.pageWidth);
|
229 |
+
}
|
230 |
+
if (this.iscroll) {
|
231 |
+
this.iscroll.refresh();
|
232 |
+
}
|
233 |
+
|
234 |
+
if (this.view == 2) {
|
235 |
+
if (this.isCover()) {
|
236 |
+
this.focusRight();
|
237 |
+
} else if (this.isBackCover()) {
|
238 |
+
if (!this.options.cover) {
|
239 |
+
this.focusBoth();
|
240 |
+
} else {
|
241 |
+
this.focusLeft();
|
242 |
+
}
|
243 |
+
} else {
|
244 |
+
this.focusBoth();
|
245 |
+
}
|
246 |
+
} else if (this.view == 1) {
|
247 |
+
if (this.isCover()) {
|
248 |
+
this.focusRight();
|
249 |
+
} else if (this.isBackCover()) {
|
250 |
+
this.focusLeft();
|
251 |
+
}
|
252 |
+
}
|
253 |
+
};
|
254 |
+
|
255 |
+
FLIPBOOK.Book3.prototype.focusLeft = function (time, delay) {
|
256 |
+
var pos = this.view == 1 || this.singlePage ? 0 : this.pageWidth / 2;
|
257 |
+
|
258 |
+
this.setBookPosition(pos, time, delay);
|
259 |
+
};
|
260 |
+
|
261 |
+
FLIPBOOK.Book3.prototype.focusRight = function (time, delay, updatePageNumber) {
|
262 |
+
var pos = this.view == 1 || this.singlePage ? -this.pageWidth : -this.pageWidth / 2;
|
263 |
+
|
264 |
+
this.setBookPosition(pos, time, delay, updatePageNumber);
|
265 |
+
};
|
266 |
+
|
267 |
+
FLIPBOOK.Book3.prototype.focusBoth = function (time, delay) {
|
268 |
+
var pos = this.view == 1 ? -this.pageWidth / 2 : 0;
|
269 |
+
|
270 |
+
this.setBookPosition(pos, time, delay);
|
271 |
+
};
|
272 |
+
|
273 |
+
FLIPBOOK.Book3.prototype.setBookPosition = function (pos, time, delay, updatePageNumber) {
|
274 |
+
if (this.centerContainerPosition == pos) {
|
275 |
+
return;
|
276 |
+
}
|
277 |
+
var start = this.centerContainerPosition;
|
278 |
+
|
279 |
+
if (time) {
|
280 |
+
var self = this;
|
281 |
+
delay = delay || 0;
|
282 |
+
|
283 |
+
const animationParams = {
|
284 |
+
from: start,
|
285 |
+
to: pos,
|
286 |
+
delay,
|
287 |
+
duration: time,
|
288 |
+
step(now) {
|
289 |
+
self.centerContainer.style.transform = 'translateX(' + now + 'px) ' + self.translateZ;
|
290 |
+
},
|
291 |
+
complete() {
|
292 |
+
self.centerContainerPosition = pos;
|
293 |
+
if (updatePageNumber) {
|
294 |
+
self.updateFlipped();
|
295 |
+
self.options.main.turnPageComplete();
|
296 |
+
}
|
297 |
+
},
|
298 |
+
};
|
299 |
+
|
300 |
+
this.animate(animationParams);
|
301 |
+
} else if (this.centerContainerPosition != pos) {
|
302 |
+
this.centerContainerPosition = pos;
|
303 |
+
this.centerContainer.style.transform = 'translateX(' + pos + 'px) ' + this.translateZ;
|
304 |
+
|
305 |
+
this.updateFlipped();
|
306 |
+
this.options.main.turnPageComplete();
|
307 |
+
}
|
308 |
+
};
|
309 |
+
|
310 |
+
FLIPBOOK.Book3.prototype.updateSinglePage = function (singlePage) {
|
311 |
+
this.singlePage = singlePage;
|
312 |
+
let ri = this.rightIndex;
|
313 |
+
if (ri > 0) {
|
314 |
+
if (this.singlePage) {
|
315 |
+
ri--;
|
316 |
+
} else if (ri % 2 == 1) {
|
317 |
+
ri++;
|
318 |
+
}
|
319 |
+
this.setRightIndex(ri);
|
320 |
+
}
|
321 |
+
this.resetLoadedPages();
|
322 |
+
this.onResize();
|
323 |
+
this.updateVisiblePages();
|
324 |
+
};
|
325 |
+
|
326 |
+
FLIPBOOK.Book3.prototype.resetLoadedPages = function () {
|
327 |
+
this.pagesArr.forEach(function (page) {
|
328 |
+
if (page.bgFront) page.bgFront.replaceChildren();
|
329 |
+
if (page.bgBack) page.bgBack.replaceChildren();
|
330 |
+
page.sizeFront = 0;
|
331 |
+
page.sizeBack = 0;
|
332 |
+
|
333 |
+
if (page.html.front) page.html.front.replaceChildren();
|
334 |
+
if (page.html.back) page.html.back.replaceChildren();
|
335 |
+
if (page.htmlContent) {
|
336 |
+
page.htmlContent.front = null;
|
337 |
+
page.htmlContent.back = null;
|
338 |
+
}
|
339 |
+
if (page.htmlLoaded) {
|
340 |
+
page.htmlLoaded.front = null;
|
341 |
+
page.htmlLoaded.back = null;
|
342 |
+
}
|
343 |
+
});
|
344 |
+
};
|
345 |
+
|
346 |
+
FLIPBOOK.Book3.prototype.updateVisiblePages = function (loadNextPrev) {
|
347 |
+
if (typeof loadNextPrev == 'undefined') {
|
348 |
+
loadNextPrev = true;
|
349 |
+
}
|
350 |
+
var self = this;
|
351 |
+
|
352 |
+
var index = this.rightIndex;
|
353 |
+
if (!this.singlePage) {
|
354 |
+
index /= 2;
|
355 |
+
}
|
356 |
+
|
357 |
+
// if (!this.options.backCover && this.options.rightToLeft) {
|
358 |
+
// index--;
|
359 |
+
// }
|
360 |
+
|
361 |
+
let numPages = this.options.pages.length;
|
362 |
+
let numSheets = this.singlePage ? numPages : numPages / 2;
|
363 |
+
if (!this.options.cover) numSheets++;
|
364 |
+
this.visibleSheets = [];
|
365 |
+
for (let i = 0; i < numSheets; i++) {
|
366 |
+
this.visibleSheets.push(this.pagesArr[i]);
|
367 |
+
}
|
368 |
+
|
369 |
+
var right = this.visibleSheets[index];
|
370 |
+
var next = this.visibleSheets[index + 1];
|
371 |
+
var left = this.visibleSheets[index - 1];
|
372 |
+
var prev = this.visibleSheets[index - 2];
|
373 |
+
|
374 |
+
if (left) {
|
375 |
+
left._setAngle(180);
|
376 |
+
}
|
377 |
+
if (right) {
|
378 |
+
right._setAngle(0);
|
379 |
+
}
|
380 |
+
|
381 |
+
for (var i = 0; i < this.pagesArr.length; i++) {
|
382 |
+
if (this.pagesArr[i] == right) {
|
383 |
+
this.pagesArr[i].show();
|
384 |
+
this.pagesArr[i].unpauseHtml('front');
|
385 |
+
this.pagesArr[i].pauseHtml('back');
|
386 |
+
} else if (this.pagesArr[i] == left && !this.singlePage) {
|
387 |
+
this.pagesArr[i].show();
|
388 |
+
this.pagesArr[i].unpauseHtml('back');
|
389 |
+
this.pagesArr[i].pauseHtml('front');
|
390 |
+
} else {
|
391 |
+
this.pagesArr[i].hide();
|
392 |
+
this.pagesArr[i].pauseHtml('front');
|
393 |
+
this.pagesArr[i].pauseHtml('back');
|
394 |
+
}
|
395 |
+
|
396 |
+
this.pagesArr[i]._setZIndex(0);
|
397 |
+
}
|
398 |
+
this.updateBookPosition();
|
399 |
+
|
400 |
+
if (left && !this.singlePage) {
|
401 |
+
self.options.main.setLoadingProgress(0.1);
|
402 |
+
left.load('back', function () {
|
403 |
+
self.options.main.setLoadingProgress(1);
|
404 |
+
left.startHTML('back');
|
405 |
+
if (right) {
|
406 |
+
self.options.main.setLoadingProgress(0.1);
|
407 |
+
right.load('front', function () {
|
408 |
+
self.options.main.setLoadingProgress(1);
|
409 |
+
right.load('back', null, true);
|
410 |
+
if (next) {
|
411 |
+
next.load('front', null, true);
|
412 |
+
}
|
413 |
+
if (!self.options.doublePage || self.view != 2) {
|
414 |
+
right.startHTML('front');
|
415 |
+
}
|
416 |
+
});
|
417 |
+
} else {
|
418 |
+
left.load('front', null, true);
|
419 |
+
if (prev) {
|
420 |
+
prev.load('back', null, true);
|
421 |
+
}
|
422 |
+
}
|
423 |
+
});
|
424 |
+
} else {
|
425 |
+
self.options.main.setLoadingProgress(0.1);
|
426 |
+
right.load('front', function () {
|
427 |
+
self.options.main.setLoadingProgress(1);
|
428 |
+
if (!self.singlePage) {
|
429 |
+
right.load('back', null, true);
|
430 |
+
} else {
|
431 |
+
if (left) {
|
432 |
+
left.load('front', null, true);
|
433 |
+
}
|
434 |
+
}
|
435 |
+
if (next) {
|
436 |
+
next.load('front', null, true);
|
437 |
+
}
|
438 |
+
right.startHTML('front');
|
439 |
+
});
|
440 |
+
}
|
441 |
+
};
|
442 |
+
|
443 |
+
FLIPBOOK.Book3.prototype.enable = function () {
|
444 |
+
this.onResize();
|
445 |
+
this.enabled = true;
|
446 |
+
};
|
447 |
+
|
448 |
+
FLIPBOOK.Book3.prototype.disable = function () {
|
449 |
+
this.enabled = false;
|
450 |
+
};
|
451 |
+
|
452 |
+
FLIPBOOK.Book3.prototype.getLeftPage = function () {
|
453 |
+
return this.pagesArr[this.flippedleft - 1];
|
454 |
+
};
|
455 |
+
|
456 |
+
FLIPBOOK.Book3.prototype.getRightPage = function () {
|
457 |
+
return this.pagesArr[this.flippedleft];
|
458 |
+
};
|
459 |
+
|
460 |
+
FLIPBOOK.Book3.prototype.getLeftBackPage = function () {
|
461 |
+
return this.pagesArr[this.flippedleft - 2];
|
462 |
+
};
|
463 |
+
|
464 |
+
FLIPBOOK.Book3.prototype.getRightBackPage = function () {
|
465 |
+
return this.pagesArr[this.flippedleft + 1];
|
466 |
+
};
|
467 |
+
|
468 |
+
FLIPBOOK.Book3.prototype.getNextPage = function () {
|
469 |
+
return this.pagesArr[this.flippedleft + 2];
|
470 |
+
};
|
471 |
+
|
472 |
+
FLIPBOOK.Book3.prototype.getPrevPage = function () {
|
473 |
+
return this.pagesArr[this.flippedleft - 3];
|
474 |
+
};
|
475 |
+
|
476 |
+
FLIPBOOK.Book3.prototype.nextPage = function () {
|
477 |
+
if (!this.nextEnabled) {
|
478 |
+
return;
|
479 |
+
}
|
480 |
+
|
481 |
+
if (this.view == 1 && this.isFocusedLeft() && !this.singlePage) {
|
482 |
+
var duration = 700;
|
483 |
+
var d = (this.options.pageFlipDuration * duration) / 2;
|
484 |
+
this.focusRight(d, 0, true);
|
485 |
+
return;
|
486 |
+
}
|
487 |
+
this.goToPage(this.rightIndex + 2);
|
488 |
+
};
|
489 |
+
|
490 |
+
FLIPBOOK.Book3.prototype.prevPage = function () {
|
491 |
+
if (!this.prevEnabled) {
|
492 |
+
return;
|
493 |
+
}
|
494 |
+
|
495 |
+
if (this.view == 1 && this.isFocusedRight() && !this.singlePage) {
|
496 |
+
var duration = 700;
|
497 |
+
var d = (this.options.pageFlipDuration * duration) / 2;
|
498 |
+
this.focusLeft(d, 0, true);
|
499 |
+
return;
|
500 |
+
}
|
501 |
+
var target = this.singlePage ? this.rightIndex : this.rightIndex - 2;
|
502 |
+
this.goToPage(target);
|
503 |
+
};
|
504 |
+
|
505 |
+
FLIPBOOK.Book3.prototype.goToPage = function (index, instant) {
|
506 |
+
if (!this.enabled || this.flipping || isNaN(index)) {
|
507 |
+
return;
|
508 |
+
}
|
509 |
+
|
510 |
+
if (this.singlePage || index % 2 != 0) {
|
511 |
+
index--;
|
512 |
+
}
|
513 |
+
|
514 |
+
if (index < 0) {
|
515 |
+
index = 0;
|
516 |
+
}
|
517 |
+
|
518 |
+
if (index > this.options.pages.length) {
|
519 |
+
index = this.options.pages.length;
|
520 |
+
}
|
521 |
+
|
522 |
+
if (index == this.rightIndex) {
|
523 |
+
return;
|
524 |
+
}
|
525 |
+
|
526 |
+
if (instant || this.options.instantFlip) {
|
527 |
+
this.setRightIndex(index);
|
528 |
+
this.updateFlipped();
|
529 |
+
this.updateVisiblePages();
|
530 |
+
this.options.main.turnPageComplete();
|
531 |
+
} else {
|
532 |
+
var self = this;
|
533 |
+
var end;
|
534 |
+
var duration = 600;
|
535 |
+
var d = this.options.pageFlipDuration * duration;
|
536 |
+
var easing = this.flipEasing;
|
537 |
+
|
538 |
+
if (index > this.rightIndex) {
|
539 |
+
end = 180;
|
540 |
+
if (self.angle <= 0 || self.angle >= 180 || !self.angle) {
|
541 |
+
self.angle = 1;
|
542 |
+
}
|
543 |
+
} else if (index < this.rightIndex) {
|
544 |
+
end = -180;
|
545 |
+
if (self.angle >= 0 || self.angle <= -180 || !self.angle) {
|
546 |
+
self.angle = -1;
|
547 |
+
}
|
548 |
+
}
|
549 |
+
|
550 |
+
this.flipping = true;
|
551 |
+
|
552 |
+
if (!this.singlePage) {
|
553 |
+
if (this.view == 1) {
|
554 |
+
if (index < this.rightIndex) {
|
555 |
+
this.focusRight(d);
|
556 |
+
} else {
|
557 |
+
this.focusLeft(d);
|
558 |
+
}
|
559 |
+
} else {
|
560 |
+
if (index == 0) {
|
561 |
+
this.focusRight(d);
|
562 |
+
} else if (index == this.visibleSheets.length * 2) {
|
563 |
+
this.focusLeft(d);
|
564 |
+
} else {
|
565 |
+
this.focusBoth(d);
|
566 |
+
}
|
567 |
+
}
|
568 |
+
}
|
569 |
+
|
570 |
+
this.goingToPage = index;
|
571 |
+
|
572 |
+
if (this.singlePage) {
|
573 |
+
d /= 2;
|
574 |
+
}
|
575 |
+
|
576 |
+
const animationParams = {
|
577 |
+
from: self.angle,
|
578 |
+
to: end,
|
579 |
+
duration: d,
|
580 |
+
easing: easing,
|
581 |
+
step(now) {
|
582 |
+
self._setPageAngle(now);
|
583 |
+
},
|
584 |
+
complete() {
|
585 |
+
self.setRightIndex(self.goingToPage);
|
586 |
+
self.angle = 0;
|
587 |
+
self.flipping = false;
|
588 |
+
|
589 |
+
self.updateFlipped();
|
590 |
+
self.updateVisiblePages();
|
591 |
+
self.options.main.turnPageComplete();
|
592 |
+
},
|
593 |
+
};
|
594 |
+
this.animate(animationParams);
|
595 |
+
|
596 |
+
this.options.main.turnPageStart();
|
597 |
+
}
|
598 |
+
};
|
599 |
+
|
600 |
+
FLIPBOOK.Book3.prototype.animate = function (params) {
|
601 |
+
FLIPBOOK.animate(params);
|
602 |
+
// const jq = true;
|
603 |
+
// if (!jq) {
|
604 |
+
// FLIPBOOK.animate(params);
|
605 |
+
// } else {
|
606 |
+
// jQuery({
|
607 |
+
// someValue: params.from,
|
608 |
+
// }).animate(
|
609 |
+
// {
|
610 |
+
// someValue: params.to,
|
611 |
+
// },
|
612 |
+
// params
|
613 |
+
// );
|
614 |
+
// }
|
615 |
+
};
|
616 |
+
|
617 |
+
FLIPBOOK.Book3.prototype.updateFlipped = function () {
|
618 |
+
if (this.singlePage) {
|
619 |
+
this.flippedleft = this.rightIndex;
|
620 |
+
this.flippedright = this.options.pages.length - this.rightIndex;
|
621 |
+
} else {
|
622 |
+
this.flippedleft = (this.rightIndex + (this.rightIndex % 2)) / 2;
|
623 |
+
this.flippedright = this.options.pages.length / 2 - this.flippedleft;
|
624 |
+
}
|
625 |
+
};
|
626 |
+
|
627 |
+
FLIPBOOK.Book3.prototype.onSwipe = function (event, phase, distanceX, distanceY, duration, fingerCount) {
|
628 |
+
if (this.isZoomed() || event.target.className === 'flipbook-page-link' || this.flipping) {
|
629 |
+
return;
|
630 |
+
}
|
631 |
+
|
632 |
+
const angle = (-distanceX * 180) / this.main.wrapperW;
|
633 |
+
const threshold = 5;
|
634 |
+
const distance = Math.abs(distanceX);
|
635 |
+
|
636 |
+
if (phase === 'start') {
|
637 |
+
this.dragging = true;
|
638 |
+
return;
|
639 |
+
}
|
640 |
+
|
641 |
+
if ((phase === 'end' || phase === 'cancel') && fingerCount <= 1 && distance > threshold) {
|
642 |
+
angle > 0 ? this.nextPage() : this.prevPage();
|
643 |
+
this.dragging = false;
|
644 |
+
return;
|
645 |
+
}
|
646 |
+
|
647 |
+
if (phase === 'move' && fingerCount <= 1 && this.dragging && distance > threshold) {
|
648 |
+
let increment = angle > 0 ? (this.singlePage ? 1 : 2) : this.singlePage ? -1 : -2;
|
649 |
+
if ((angle > 0 && !this.nextEnabled) || (angle < 0 && !this.prevEnabled)) {
|
650 |
+
return;
|
651 |
+
}
|
652 |
+
|
653 |
+
this.goingToPage = this.rightIndex + increment;
|
654 |
+
|
655 |
+
if (
|
656 |
+
this.goingToPage !== this.rightIndex &&
|
657 |
+
this.goingToPage >= 0 &&
|
658 |
+
this.goingToPage <= this.pagesArr.length * 2 &&
|
659 |
+
!this.options.instantFlip
|
660 |
+
) {
|
661 |
+
this._setPageAngle(angle);
|
662 |
+
}
|
663 |
+
}
|
664 |
+
};
|
665 |
+
|
666 |
+
FLIPBOOK.Book3.prototype.pauseHtml = function () {
|
667 |
+
for (var i = 0; i < this.pagesArr.length; i++) {
|
668 |
+
this.pagesArr[i].pauseHtml();
|
669 |
+
}
|
670 |
+
};
|
671 |
+
|
672 |
+
FLIPBOOK.Book3.prototype._setPageAngle = function (angle) {
|
673 |
+
if (this.angle == angle) {
|
674 |
+
return;
|
675 |
+
}
|
676 |
+
|
677 |
+
this.angle = angle;
|
678 |
+
|
679 |
+
var prev;
|
680 |
+
var next;
|
681 |
+
var left;
|
682 |
+
var right;
|
683 |
+
this.angle = angle;
|
684 |
+
// this.pauseHtml();
|
685 |
+
|
686 |
+
var ri = this.rightIndex;
|
687 |
+
var ri2 = this.goingToPage;
|
688 |
+
// if (this.options.rightToLeft && !this.options.backCover) {
|
689 |
+
// ri--;
|
690 |
+
// ri2--;
|
691 |
+
// }
|
692 |
+
|
693 |
+
var flippping;
|
694 |
+
|
695 |
+
if (this.singlePage) {
|
696 |
+
right = this.visibleSheets[ri];
|
697 |
+
left = this.visibleSheets[ri - 1];
|
698 |
+
if (angle > 0) {
|
699 |
+
right._setAngle(angle / 2);
|
700 |
+
next = this.visibleSheets[ri2];
|
701 |
+
if (next) {
|
702 |
+
next.show();
|
703 |
+
next.load('front');
|
704 |
+
}
|
705 |
+
} else {
|
706 |
+
left = this.visibleSheets[ri2];
|
707 |
+
left.show();
|
708 |
+
left.load('front');
|
709 |
+
left._setAngle(angle / 2 + 90);
|
710 |
+
}
|
711 |
+
|
712 |
+
if (next) {
|
713 |
+
next._setAngle(0);
|
714 |
+
}
|
715 |
+
if (prev) {
|
716 |
+
prev._setAngle(90);
|
717 |
+
}
|
718 |
+
} else {
|
719 |
+
right = this.visibleSheets[ri / 2];
|
720 |
+
left = this.visibleSheets[ri / 2 - 1];
|
721 |
+
var newRight = this.visibleSheets[ri2 / 2 - 1];
|
722 |
+
var newLeft = this.visibleSheets[ri2 / 2];
|
723 |
+
if (angle > 0) {
|
724 |
+
if (this.view == 1 && this.isFocusedLeft()) {
|
725 |
+
return;
|
726 |
+
}
|
727 |
+
//flipping from right to left
|
728 |
+
//angle 0 -> 180
|
729 |
+
|
730 |
+
if (angle < 90) {
|
731 |
+
flippping = right;
|
732 |
+
if (newRight) newRight.hide();
|
733 |
+
} else {
|
734 |
+
flippping = newRight;
|
735 |
+
right.hide();
|
736 |
+
}
|
737 |
+
flippping.show();
|
738 |
+
flippping._setAngle(angle);
|
739 |
+
next = this.visibleSheets[ri2 / 2];
|
740 |
+
flippping.load(
|
741 |
+
'back',
|
742 |
+
function () {
|
743 |
+
if (next) {
|
744 |
+
next.show();
|
745 |
+
next.load('front', null, true);
|
746 |
+
}
|
747 |
+
},
|
748 |
+
true
|
749 |
+
);
|
750 |
+
} else {
|
751 |
+
if (this.view == 1 && this.isFocusedRight()) {
|
752 |
+
return;
|
753 |
+
}
|
754 |
+
//flipping from left to right
|
755 |
+
//angle 0 -> -180
|
756 |
+
|
757 |
+
if (angle > -90) {
|
758 |
+
flippping = left;
|
759 |
+
if (newLeft) newLeft.hide();
|
760 |
+
} else {
|
761 |
+
flippping = newLeft;
|
762 |
+
left.hide();
|
763 |
+
}
|
764 |
+
flippping.show();
|
765 |
+
flippping._setAngle(180 + angle);
|
766 |
+
prev = this.visibleSheets[ri2 / 2 - 1];
|
767 |
+
flippping.load(
|
768 |
+
'front',
|
769 |
+
function () {
|
770 |
+
if (prev) {
|
771 |
+
prev.show();
|
772 |
+
prev.load('back', null, true);
|
773 |
+
}
|
774 |
+
},
|
775 |
+
true
|
776 |
+
);
|
777 |
+
}
|
778 |
+
|
779 |
+
if (next) {
|
780 |
+
next._setAngle(0);
|
781 |
+
}
|
782 |
+
if (prev) {
|
783 |
+
prev._setAngle(180);
|
784 |
+
}
|
785 |
+
}
|
786 |
+
};
|
787 |
+
|
788 |
+
FLIPBOOK.Book3.prototype.isCover = function () {
|
789 |
+
return this.rightIndex == 0;
|
790 |
+
};
|
791 |
+
|
792 |
+
FLIPBOOK.Book3.prototype.isBackCover = function () {
|
793 |
+
return this.rightIndex == this.options.pages.length;
|
794 |
+
};
|
795 |
+
|
796 |
+
FLIPBOOK.Book3.prototype.onPageUnloaded = function (index) {
|
797 |
+
var pageIndex = index;
|
798 |
+
|
799 |
+
if (this.options.rightToLeft) {
|
800 |
+
pageIndex = this.options.pages.length - index - 1;
|
801 |
+
}
|
802 |
+
|
803 |
+
if (this.pagesArr[pageIndex]) {
|
804 |
+
this.pagesArr[pageIndex].unload();
|
805 |
+
}
|
806 |
+
};
|
807 |
+
|
808 |
+
FLIPBOOK.Book3.prototype.onResize = function () {
|
809 |
+
var self = this;
|
810 |
+
|
811 |
+
var main = this.main;
|
812 |
+
var w = main.wrapperW;
|
813 |
+
var h = main.wrapperH;
|
814 |
+
var bw = main.bookW;
|
815 |
+
var bh = main.bookH;
|
816 |
+
var pw = main.pageW;
|
817 |
+
var ph = main.pageH;
|
818 |
+
var r1 = w / h;
|
819 |
+
var r2 = pw / ph;
|
820 |
+
var options = this.options;
|
821 |
+
|
822 |
+
function fitToHeight() {
|
823 |
+
self.ratio = h / bh;
|
824 |
+
fit();
|
825 |
+
}
|
826 |
+
|
827 |
+
function fitToWidth() {
|
828 |
+
self.ratio = self.view == 1 ? w / pw : w / bw;
|
829 |
+
fit();
|
830 |
+
}
|
831 |
+
|
832 |
+
function fit() {
|
833 |
+
if (self.iscroll) {
|
834 |
+
self.iscroll.options.zoomMin = self.ratio * options.zoomMin;
|
835 |
+
}
|
836 |
+
if (self.iscroll) {
|
837 |
+
self.iscroll.options.zoomMax = self.ratio * options.zoomMax;
|
838 |
+
}
|
839 |
+
|
840 |
+
self.updateBookPosition();
|
841 |
+
if (self.iscroll) {
|
842 |
+
self.iscroll.zoom(self.ratio * options.main.zoom, w / 2, h / 2, 0);
|
843 |
+
}
|
844 |
+
|
845 |
+
self.bookScale = self.iscroll.scale;
|
846 |
+
}
|
847 |
+
|
848 |
+
var s = Math.min(this.zoom, 1);
|
849 |
+
|
850 |
+
var zoomMin = Number(this.options.zoomMin);
|
851 |
+
|
852 |
+
if (
|
853 |
+
this.singlePage ||
|
854 |
+
(this.options.responsiveView &&
|
855 |
+
w <= this.options.responsiveViewTreshold &&
|
856 |
+
r1 < 2 * r2 &&
|
857 |
+
r1 < this.options.responsiveViewRatio)
|
858 |
+
) {
|
859 |
+
this.view = 1;
|
860 |
+
|
861 |
+
if (r2 > r1) {
|
862 |
+
this.sc = (zoomMin * r1) / (r2 * s);
|
863 |
+
} else {
|
864 |
+
this.sc = 1;
|
865 |
+
}
|
866 |
+
|
867 |
+
if (w / h > pw / ph) {
|
868 |
+
fitToHeight();
|
869 |
+
} else {
|
870 |
+
fitToWidth();
|
871 |
+
}
|
872 |
+
} else {
|
873 |
+
this.view = 2;
|
874 |
+
|
875 |
+
if (r1 < 2 * r2) {
|
876 |
+
this.sc = (zoomMin * r1) / (2 * r2 * s);
|
877 |
+
} else {
|
878 |
+
this.sc = 1;
|
879 |
+
}
|
880 |
+
|
881 |
+
if (w / h >= bw / bh) {
|
882 |
+
fitToHeight();
|
883 |
+
} else {
|
884 |
+
fitToWidth();
|
885 |
+
}
|
886 |
+
}
|
887 |
+
|
888 |
+
this.updateBookPosition();
|
889 |
+
this.updateFlipped();
|
890 |
+
this.options.main.turnPageComplete();
|
891 |
+
};
|
892 |
+
|
893 |
+
FLIPBOOK.Book3.prototype.isFocusedRight = function () {
|
894 |
+
var center = this.view == 1 ? -this.pageWidth / 2 : 0;
|
895 |
+
if (this.singlePage) {
|
896 |
+
return this.rightIndex % 2 == 0;
|
897 |
+
} else {
|
898 |
+
return this.centerContainerPosition < center;
|
899 |
+
}
|
900 |
+
};
|
901 |
+
|
902 |
+
FLIPBOOK.Book3.prototype.isFocusedLeft = function () {
|
903 |
+
var center = this.view == 1 ? -this.pageWidth / 2 : 0;
|
904 |
+
|
905 |
+
if (this.singlePage) {
|
906 |
+
return this.rightIndex % 2 == 1;
|
907 |
+
} else {
|
908 |
+
return this.centerContainerPosition > center;
|
909 |
+
}
|
910 |
+
};
|
911 |
+
|
912 |
+
FLIPBOOK.Page3 = function (book, index) {
|
913 |
+
this.book = book;
|
914 |
+
this.main = book.main;
|
915 |
+
this.options = book.options;
|
916 |
+
|
917 |
+
this.index = index;
|
918 |
+
|
919 |
+
this.wrapper = document.createElement('div');
|
920 |
+
this.wrapper.className = 'flipbook-page3';
|
921 |
+
this.wrapper.style.width = book.options.pageWidth + 'px';
|
922 |
+
this.wrapper.style.height = book.options.pageHeight + 'px';
|
923 |
+
this.angle = 0;
|
924 |
+
this.wrapper.dataset.sheet = index;
|
925 |
+
|
926 |
+
var options = book.options;
|
927 |
+
|
928 |
+
let preloaderSrc = options.pagePreloader || options.assets.spinner;
|
929 |
+
let preloaderClass = options.pagePreloader ? 'flipbook-page-preloader-image' : 'flipbook-page-preloader';
|
930 |
+
|
931 |
+
this.front = document.createElement('div');
|
932 |
+
this.wrapper.appendChild(this.front);
|
933 |
+
this.front.className = 'flipbook-page3-inner flipbook-page3-inner-front';
|
934 |
+
|
935 |
+
this.bgFront = document.createElement('div');
|
936 |
+
this.front.appendChild(this.bgFront);
|
937 |
+
this.bgFront.className = 'flipbook-page3-bg';
|
938 |
+
|
939 |
+
this.htmlFront = document.createElement('div');
|
940 |
+
this.front.appendChild(this.htmlFront);
|
941 |
+
this.htmlFront.className = 'flipbook-page3-html page_' + String(2 * index);
|
942 |
+
this.htmlFront.style.width = (1000 * options.pageWidth) / options.pageHeight + 'px';
|
943 |
+
|
944 |
+
var transform = 'scale(' + this.options.pageHeight / 1000 + ')';
|
945 |
+
if (this.options.doublePage && this.index > 0) {
|
946 |
+
this.htmlFront.style.transform = transform + ' translateX(-100%)';
|
947 |
+
} else {
|
948 |
+
this.htmlFront.style.transform = transform;
|
949 |
+
}
|
950 |
+
|
951 |
+
this.html = { front: this.htmlFront };
|
952 |
+
|
953 |
+
this.frontHtmlContentVisible = false;
|
954 |
+
|
955 |
+
this.preloaderFront = new Image();
|
956 |
+
this.preloaderFront.src = preloaderSrc;
|
957 |
+
this.preloaderFront.className = preloaderClass;
|
958 |
+
this.front.appendChild(this.preloaderFront);
|
959 |
+
|
960 |
+
if (!book.singlePage) {
|
961 |
+
this.back = document.createElement('div');
|
962 |
+
this.wrapper.appendChild(this.back);
|
963 |
+
this.back.className = 'flipbook-page3-inner flipbook-page3-inner-back';
|
964 |
+
this._setVisibility(this.back, false);
|
965 |
+
|
966 |
+
this.bgBack = document.createElement('div');
|
967 |
+
this.back.appendChild(this.bgBack);
|
968 |
+
this.bgBack.className = 'flipbook-page3-bg';
|
969 |
+
|
970 |
+
this.htmlBack = document.createElement('div');
|
971 |
+
this.back.appendChild(this.htmlBack);
|
972 |
+
this.htmlBack.className = 'flipbook-page3-html page_' + String(2 * index + 1);
|
973 |
+
this.htmlBack.style.width = (1000 * options.pageWidth) / options.pageHeight + 'px';
|
974 |
+
|
975 |
+
this.htmlBack.style.transform = transform;
|
976 |
+
|
977 |
+
this.html.back = this.htmlBack;
|
978 |
+
|
979 |
+
this.backHtmlContentVisible = false;
|
980 |
+
|
981 |
+
this.preloaderBack = new Image();
|
982 |
+
this.preloaderBack.src = preloaderSrc;
|
983 |
+
this.preloaderBack.className = preloaderClass;
|
984 |
+
this.back.appendChild(this.preloaderBack);
|
985 |
+
}
|
986 |
+
|
987 |
+
this.htmlPaused = { front: false, back: false };
|
988 |
+
|
989 |
+
this.hide();
|
990 |
+
this.zIndex = 0;
|
991 |
+
|
992 |
+
if (this.options.rightToLeft && !this.options.backCover) {
|
993 |
+
index++;
|
994 |
+
}
|
995 |
+
this.wrapper.style.left = String(this.book.options.pageWidth - 1) + 'px';
|
996 |
+
};
|
997 |
+
|
998 |
+
FLIPBOOK.Page3.prototype = {
|
999 |
+
load: function (side, callback, thumb) {
|
1000 |
+
var pageSize = this.book.pageHeight * this.book.iscroll.scale * window.devicePixelRatio;
|
1001 |
+
var o = this.options;
|
1002 |
+
var size = pageSize < o.pageTextureSizeSmall ? o.pageTextureSizeSmall : o.pageTextureSize;
|
1003 |
+
var isFront = side == 'front' || this.book.singlePage;
|
1004 |
+
|
1005 |
+
var pageIndex = this.book.singlePage ? this.index : isFront ? this.index * 2 : this.index * 2 + 1;
|
1006 |
+
var index = o.rightToLeft ? o.pages.length - pageIndex - 1 : pageIndex;
|
1007 |
+
|
1008 |
+
if (
|
1009 |
+
(this.sizeFront == size && isFront && this.indexFront == index) ||
|
1010 |
+
(this.sizeBack == size && !isFront && this.indexBack == index)
|
1011 |
+
) {
|
1012 |
+
if (!thumb) {
|
1013 |
+
this.loadHTML(side);
|
1014 |
+
}
|
1015 |
+
if (callback) {
|
1016 |
+
callback.call(this);
|
1017 |
+
}
|
1018 |
+
} else {
|
1019 |
+
if (isFront) {
|
1020 |
+
this.sizeFront = size;
|
1021 |
+
} else {
|
1022 |
+
this.sizeBack = size;
|
1023 |
+
}
|
1024 |
+
|
1025 |
+
var self = this;
|
1026 |
+
|
1027 |
+
if (isFront) this.indexFront = index;
|
1028 |
+
else this.indexBack = index;
|
1029 |
+
|
1030 |
+
o.main.loadPage(index, size, function (page) {
|
1031 |
+
if (page && page.image) {
|
1032 |
+
var img = page.image[size] || page.image;
|
1033 |
+
var page = o.pages[index];
|
1034 |
+
if (
|
1035 |
+
(isFront && page && page.side == 'right') ||
|
1036 |
+
(o.rightToLeft && isFront && page && page.side == 'left')
|
1037 |
+
) {
|
1038 |
+
if (!img.clone) {
|
1039 |
+
img.clone = new Image();
|
1040 |
+
img.clone.src = img.src;
|
1041 |
+
}
|
1042 |
+
img = img.clone;
|
1043 |
+
img.style.transform = 'translateX(-50%)';
|
1044 |
+
}
|
1045 |
+
|
1046 |
+
if (isFront) {
|
1047 |
+
if (self.bgFront) self.bgFront.replaceChildren(img);
|
1048 |
+
if (self.preloaderFront) self.preloaderFront.style.display = 'none';
|
1049 |
+
} else {
|
1050 |
+
if (self.bgBack) self.bgBack.replaceChildren(img);
|
1051 |
+
if (self.preloaderBack) self.preloaderBack.style.display = 'none';
|
1052 |
+
}
|
1053 |
+
|
1054 |
+
if (!thumb) {
|
1055 |
+
self.loadHTML(side);
|
1056 |
+
}
|
1057 |
+
}
|
1058 |
+
|
1059 |
+
if (callback) {
|
1060 |
+
callback.call(self);
|
1061 |
+
}
|
1062 |
+
});
|
1063 |
+
}
|
1064 |
+
},
|
1065 |
+
|
1066 |
+
loadHTML: function (side) {
|
1067 |
+
var self = this;
|
1068 |
+
|
1069 |
+
var isFront = side == 'front';
|
1070 |
+
|
1071 |
+
var pageIndex = this.book.singlePage ? this.index : isFront ? this.index * 2 : this.index * 2 + 1;
|
1072 |
+
|
1073 |
+
var o = this.options;
|
1074 |
+
var index = o.rightToLeft ? o.pages.length - pageIndex - 1 : pageIndex;
|
1075 |
+
|
1076 |
+
if (index < 0) {
|
1077 |
+
return;
|
1078 |
+
}
|
1079 |
+
|
1080 |
+
if (this.htmlContent && this.htmlContent[side]) {
|
1081 |
+
this.updateHtmlContent(side);
|
1082 |
+
} else {
|
1083 |
+
this.options.main.loadPageHTML(index, function (html) {
|
1084 |
+
self.htmlContent = this.htmlContent || {};
|
1085 |
+
self.htmlContent[side] = html;
|
1086 |
+
self.updateHtmlContent(side);
|
1087 |
+
});
|
1088 |
+
}
|
1089 |
+
},
|
1090 |
+
|
1091 |
+
startHTML: function (side) {
|
1092 |
+
this.book.startPageItems(this.html[side]);
|
1093 |
+
},
|
1094 |
+
|
1095 |
+
unload: function () {
|
1096 |
+
this.size = null;
|
1097 |
+
this.mat = false;
|
1098 |
+
this.pageSize = null;
|
1099 |
+
},
|
1100 |
+
|
1101 |
+
pauseHtml: function (side) {
|
1102 |
+
if (!this.htmlPaused[side]) {
|
1103 |
+
this.htmlPaused[side] = true;
|
1104 |
+
const htmlContainer = this.html[side];
|
1105 |
+
if (!htmlContainer) {
|
1106 |
+
return;
|
1107 |
+
}
|
1108 |
+
this.main.trigger('hidepagehtml', { page: this });
|
1109 |
+
|
1110 |
+
var mediaElements = htmlContainer.querySelectorAll('video, audio');
|
1111 |
+
mediaElements.forEach(function (media) {
|
1112 |
+
media.pause();
|
1113 |
+
});
|
1114 |
+
|
1115 |
+
var iframes = htmlContainer.querySelectorAll('iframe');
|
1116 |
+
for (var i = 0; i < iframes.length; i++) {
|
1117 |
+
var iframe = iframes[i];
|
1118 |
+
var src = iframe.src;
|
1119 |
+
var youtubeRegex = /(?:youtube\.com\/embed\/|youtu\.be\/)/;
|
1120 |
+
// var youtubeRegex =
|
1121 |
+
// /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
|
1122 |
+
|
1123 |
+
// if (youtubeRegex.test(src)) {
|
1124 |
+
// var youtubeVideo = iframe.contentWindow;
|
1125 |
+
// youtubeVideo.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
|
1126 |
+
// } else {
|
1127 |
+
this.removedIframes = this.removedIframes || [];
|
1128 |
+
this.removedIframes.push({
|
1129 |
+
iframe: iframe,
|
1130 |
+
parentNode: iframe.parentNode,
|
1131 |
+
});
|
1132 |
+
iframe.parentNode.removeChild(iframe);
|
1133 |
+
// }
|
1134 |
+
}
|
1135 |
+
}
|
1136 |
+
},
|
1137 |
+
|
1138 |
+
unpauseHtml: function (side) {
|
1139 |
+
this.htmlPaused[side] = false;
|
1140 |
+
if (this.removedIframes && this.removedIframes.length) {
|
1141 |
+
this.removedIframes.forEach(function (obj) {
|
1142 |
+
obj.parentNode.appendChild(obj.iframe);
|
1143 |
+
});
|
1144 |
+
}
|
1145 |
+
this.removedIframes = [];
|
1146 |
+
},
|
1147 |
+
|
1148 |
+
showHtml: function () {
|
1149 |
+
if (!this.htmlContentVisible) {
|
1150 |
+
this.htmlContentVisible = true;
|
1151 |
+
}
|
1152 |
+
},
|
1153 |
+
|
1154 |
+
updateHtmlContent: function (side) {
|
1155 |
+
this.htmlLoaded = this.htmlLoaded || {};
|
1156 |
+
if (!this.htmlLoaded[side]) {
|
1157 |
+
var c = this.htmlContent[side];
|
1158 |
+
if (c.jquery) {
|
1159 |
+
c = c[0];
|
1160 |
+
}
|
1161 |
+
|
1162 |
+
this.htmlLoaded[side] = true;
|
1163 |
+
var container = this.html[side];
|
1164 |
+
if (container) container.appendChild(c);
|
1165 |
+
|
1166 |
+
this.main.trigger('showpagehtml', { page: this });
|
1167 |
+
}
|
1168 |
+
this.startHTML(side);
|
1169 |
+
},
|
1170 |
+
|
1171 |
+
show: function () {
|
1172 |
+
if (this.hidden) {
|
1173 |
+
this.wrapper.style.display = 'block';
|
1174 |
+
this.setShadowOpacity(0);
|
1175 |
+
this.showHtml();
|
1176 |
+
}
|
1177 |
+
this.hidden = false;
|
1178 |
+
},
|
1179 |
+
|
1180 |
+
setShadowOpacity: function (val) {
|
1181 |
+
if (this.shadowOpacity != val && !this.hidden) {
|
1182 |
+
this.wrapper.style.setProperty('--page3-shadow-opacity', val);
|
1183 |
+
this.shadowOpacity = val;
|
1184 |
+
}
|
1185 |
+
},
|
1186 |
+
|
1187 |
+
hide: function () {
|
1188 |
+
if (!this.hidden) {
|
1189 |
+
this.wrapper.style.display = 'none';
|
1190 |
+
this.setShadowOpacity(0);
|
1191 |
+
}
|
1192 |
+
|
1193 |
+
this.hidden = true;
|
1194 |
+
},
|
1195 |
+
|
1196 |
+
_setVisibility: function (div, visible) {
|
1197 |
+
if (div && div.dataset.visible != visible) {
|
1198 |
+
div.dataset.visible = visible;
|
1199 |
+
div.style.opacity = visible ? '1' : '0';
|
1200 |
+
div.style.pointerEvents = visible ? 'auto' : 'none';
|
1201 |
+
}
|
1202 |
+
},
|
1203 |
+
|
1204 |
+
_setAngle: function (angle) {
|
1205 |
+
angle = -angle;
|
1206 |
+
|
1207 |
+
if (angle != this.angle) {
|
1208 |
+
this.setShadowOpacity((1 - Math.abs(angle + 90) / 90) * 0.2);
|
1209 |
+
this.wrapper.style.setProperty('--page3-rotate-y', String(angle + 'deg'));
|
1210 |
+
this._setVisibility(this.front, angle > -90);
|
1211 |
+
this._setVisibility(this.back, angle < -90);
|
1212 |
+
this.angle = angle;
|
1213 |
+
var i;
|
1214 |
+
var max = 0;
|
1215 |
+
for (i = 0; i < this.book.pagesArr.length; i++) {
|
1216 |
+
if (i != this.index && this.book.pagesArr[i].zIndex > max) {
|
1217 |
+
max = this.book.pagesArr[i].zIndex;
|
1218 |
+
}
|
1219 |
+
}
|
1220 |
+
this._setZIndex(max + 1);
|
1221 |
+
}
|
1222 |
+
},
|
1223 |
+
|
1224 |
+
_setZIndex: function (val) {
|
1225 |
+
if (this.zIndex != val) {
|
1226 |
+
this.wrapper.style['z-index'] = val;
|
1227 |
+
}
|
1228 |
+
this.zIndex = val;
|
1229 |
+
},
|
1230 |
+
};
|
flipbook.css
ADDED
@@ -0,0 +1,2515 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
.flipbook-overlay {
|
2 |
+
position: fixed;
|
3 |
+
top: 0;
|
4 |
+
bottom: 0;
|
5 |
+
left: 0;
|
6 |
+
right: 0;
|
7 |
+
background: rgba(0, 0, 0, 0.71);
|
8 |
+
z-index: 2147483646 !important;
|
9 |
+
opacity: 0;
|
10 |
+
transition: opacity 0.3s ease-out;
|
11 |
+
}
|
12 |
+
|
13 |
+
.flipbook-wrapper {
|
14 |
+
position: absolute;
|
15 |
+
width: 100%;
|
16 |
+
height: 100%;
|
17 |
+
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
|
18 |
+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
|
19 |
+
text-shadow: none;
|
20 |
+
-webkit-border-radius: 4px;
|
21 |
+
border-radius: 4px;
|
22 |
+
background: #ffffff;
|
23 |
+
}
|
24 |
+
|
25 |
+
.flipbook-wrapper-transparent {
|
26 |
+
width: 100%;
|
27 |
+
height: 100%;
|
28 |
+
background: none;
|
29 |
+
}
|
30 |
+
|
31 |
+
.flipbook-main-wrapper {
|
32 |
+
position: absolute;
|
33 |
+
top: 0;
|
34 |
+
left: 0;
|
35 |
+
right: 0;
|
36 |
+
bottom: 0;
|
37 |
+
overflow: hidden;
|
38 |
+
direction: ltr !important;
|
39 |
+
scrollbar-color: rgba(130, 130, 130, 0.5) transparent;
|
40 |
+
scrollbar-width: thin;
|
41 |
+
}
|
42 |
+
|
43 |
+
.flipbook-bookLayer {
|
44 |
+
position: absolute;
|
45 |
+
top: 0;
|
46 |
+
left: 0;
|
47 |
+
right: 0;
|
48 |
+
bottom: 0;
|
49 |
+
overflow: hidden;
|
50 |
+
|
51 |
+
cursor: -webkit-grab;
|
52 |
+
cursor: grab;
|
53 |
+
}
|
54 |
+
|
55 |
+
.flipbook-zoomLayer-inside {
|
56 |
+
display: block;
|
57 |
+
position: relative;
|
58 |
+
background-size: contain;
|
59 |
+
text-align: center;
|
60 |
+
}
|
61 |
+
|
62 |
+
.flipbook-zoomLayer-inside .flipbook-carousel-page {
|
63 |
+
float: left;
|
64 |
+
}
|
65 |
+
|
66 |
+
.flipbook-book {
|
67 |
+
display: block;
|
68 |
+
position: relative;
|
69 |
+
}
|
70 |
+
|
71 |
+
.flipbook-page {
|
72 |
+
position: absolute;
|
73 |
+
width: 100%;
|
74 |
+
height: 100%;
|
75 |
+
transform: translateZ(0px);
|
76 |
+
will-change: transform;
|
77 |
+
transform-style: preserve-3d;
|
78 |
+
}
|
79 |
+
|
80 |
+
.flipbook-page3 {
|
81 |
+
position: absolute;
|
82 |
+
background: #eee;
|
83 |
+
will-change: transform;
|
84 |
+
transform: rotateY(var(--page3-rotate-y, 0));
|
85 |
+
transform-origin: 0 50%;
|
86 |
+
-webkit-transform-origin: 0 50%;
|
87 |
+
}
|
88 |
+
|
89 |
+
.flipbook-page3-html {
|
90 |
+
position: absolute;
|
91 |
+
height: 1000px;
|
92 |
+
transform-origin: 0 0;
|
93 |
+
top: 0;
|
94 |
+
left: 0;
|
95 |
+
}
|
96 |
+
|
97 |
+
.flipbook-page3-inner {
|
98 |
+
overflow: hidden;
|
99 |
+
width: 100%;
|
100 |
+
height: 100%;
|
101 |
+
position: absolute;
|
102 |
+
will-change: opacity;
|
103 |
+
}
|
104 |
+
|
105 |
+
.flipbook-page3-inner-back {
|
106 |
+
transform: scaleX(-1);
|
107 |
+
}
|
108 |
+
|
109 |
+
.flipbook-page3-bg {
|
110 |
+
width: 100%;
|
111 |
+
height: 100%;
|
112 |
+
position: absolute;
|
113 |
+
}
|
114 |
+
|
115 |
+
.flipbook-page3-bg img {
|
116 |
+
height: 100% !important;
|
117 |
+
}
|
118 |
+
|
119 |
+
.flipbook-page3 img {
|
120 |
+
top: 0;
|
121 |
+
bottom: 0;
|
122 |
+
right: 0;
|
123 |
+
left: 0;
|
124 |
+
height: 100%;
|
125 |
+
margin: auto;
|
126 |
+
position: absolute;
|
127 |
+
transform-origin: 0 0;
|
128 |
+
-webkit-transform-origin: 0 0;
|
129 |
+
float: left;
|
130 |
+
user-select: none;
|
131 |
+
pointer-events: none;
|
132 |
+
max-width: unset;
|
133 |
+
width: unset;
|
134 |
+
}
|
135 |
+
|
136 |
+
.flipbook-page3 canvas {
|
137 |
+
width: 100%;
|
138 |
+
height: 100%;
|
139 |
+
}
|
140 |
+
|
141 |
+
.flipbook-page3::before {
|
142 |
+
content: '';
|
143 |
+
position: fixed;
|
144 |
+
top: 0;
|
145 |
+
right: 0;
|
146 |
+
bottom: 0;
|
147 |
+
left: 0;
|
148 |
+
background: rgba(0, 0, 0, 1);
|
149 |
+
opacity: var(--page3-shadow-opacity, 0);
|
150 |
+
will-change: opacity;
|
151 |
+
transform: translateZ(0);
|
152 |
+
z-index: 1;
|
153 |
+
pointer-events: none;
|
154 |
+
}
|
155 |
+
|
156 |
+
.flipbook-page3-front {
|
157 |
+
transform-origin: 0 50%;
|
158 |
+
-webkit-transform-origin: 0 50%;
|
159 |
+
}
|
160 |
+
|
161 |
+
.flipbook-page3-back {
|
162 |
+
transform-origin: 0% 50%;
|
163 |
+
-webkit-transform-origin: 0% 50%;
|
164 |
+
}
|
165 |
+
|
166 |
+
.flipbook-page3-back .flipbook-page3-inner {
|
167 |
+
transform: rotateY(180deg);
|
168 |
+
}
|
169 |
+
|
170 |
+
.flipbook-book3 {
|
171 |
+
display: block;
|
172 |
+
position: relative;
|
173 |
+
}
|
174 |
+
|
175 |
+
.flipbook-center-container3 {
|
176 |
+
position: relative;
|
177 |
+
will-change: transform;
|
178 |
+
border: none;
|
179 |
+
}
|
180 |
+
|
181 |
+
.flipbook-page-htmlContent {
|
182 |
+
transform-origin: 0 0;
|
183 |
+
z-index: 50;
|
184 |
+
position: absolute;
|
185 |
+
}
|
186 |
+
|
187 |
+
.flipbook-page-html video,
|
188 |
+
.flipbook-page-html iframe {
|
189 |
+
max-width: initial;
|
190 |
+
}
|
191 |
+
|
192 |
+
.flipbook-book canvas {
|
193 |
+
position: absolute;
|
194 |
+
left: 0;
|
195 |
+
top: 0;
|
196 |
+
z-index: 50;
|
197 |
+
width: 100%;
|
198 |
+
height: 100%;
|
199 |
+
backface-visibility: hidden;
|
200 |
+
-webkit-backface-visibility: hidden;
|
201 |
+
transform-style: preserve-3d;
|
202 |
+
-webkit-transform-style: preserve-3d;
|
203 |
+
}
|
204 |
+
|
205 |
+
.flipbook-page img {
|
206 |
+
width: 100%;
|
207 |
+
height: 100%;
|
208 |
+
backface-visibility: hidden;
|
209 |
+
-webkit-backface-visibility: hidden;
|
210 |
+
transform-style: preserve-3d;
|
211 |
+
-webkit-transform-style: preserve-3d;
|
212 |
+
}
|
213 |
+
|
214 |
+
.flipbook-left-arrow {
|
215 |
+
display: block !important;
|
216 |
+
position: absolute !important;
|
217 |
+
top: 50% !important;
|
218 |
+
left: 0;
|
219 |
+
font-style: normal;
|
220 |
+
font-weight: normal;
|
221 |
+
-webkit-font-smoothing: antialiased;
|
222 |
+
text-align: center;
|
223 |
+
cursor: pointer;
|
224 |
+
}
|
225 |
+
|
226 |
+
.flipbook-right-arrow {
|
227 |
+
display: block !important;
|
228 |
+
position: absolute !important;
|
229 |
+
top: 50% !important;
|
230 |
+
right: 0;
|
231 |
+
font-style: normal;
|
232 |
+
font-weight: normal;
|
233 |
+
-webkit-font-smoothing: antialiased;
|
234 |
+
text-align: center;
|
235 |
+
cursor: pointer;
|
236 |
+
}
|
237 |
+
|
238 |
+
.flipbook-first-arrow {
|
239 |
+
display: block !important;
|
240 |
+
position: absolute !important;
|
241 |
+
top: 50%;
|
242 |
+
left: 0;
|
243 |
+
font-style: normal;
|
244 |
+
font-weight: normal;
|
245 |
+
-webkit-font-smoothing: antialiased;
|
246 |
+
text-align: center;
|
247 |
+
cursor: pointer;
|
248 |
+
}
|
249 |
+
|
250 |
+
.flipbook-last-arrow {
|
251 |
+
display: block !important;
|
252 |
+
position: absolute !important;
|
253 |
+
top: 50%;
|
254 |
+
right: 0;
|
255 |
+
font-style: normal;
|
256 |
+
font-weight: normal;
|
257 |
+
-webkit-font-smoothing: antialiased;
|
258 |
+
text-align: center;
|
259 |
+
cursor: pointer;
|
260 |
+
}
|
261 |
+
|
262 |
+
.flipbook-currentPageHolder {
|
263 |
+
position: relative;
|
264 |
+
z-index: 3;
|
265 |
+
pointer-events: auto;
|
266 |
+
display: inline-block;
|
267 |
+
user-select: none;
|
268 |
+
display: flex;
|
269 |
+
align-items: center;
|
270 |
+
box-sizing: content-box;
|
271 |
+
width: max-content;
|
272 |
+
}
|
273 |
+
|
274 |
+
.flipbook-currentPageHolder form {
|
275 |
+
display: flex;
|
276 |
+
top: 0;
|
277 |
+
margin: 0;
|
278 |
+
}
|
279 |
+
|
280 |
+
.flipbook-currentPageNumber {
|
281 |
+
border-radius: 15px !important;
|
282 |
+
padding: 5px !important;
|
283 |
+
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important;
|
284 |
+
font-size: 14px;
|
285 |
+
line-height: initial;
|
286 |
+
}
|
287 |
+
|
288 |
+
.flipbook-currentPageInput {
|
289 |
+
line-height: 14px !important;
|
290 |
+
background: none !important;
|
291 |
+
border: none !important;
|
292 |
+
font-size: 14px !important;
|
293 |
+
max-width: initial !important;
|
294 |
+
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important;
|
295 |
+
text-align: right !important;
|
296 |
+
height: 100% !important;
|
297 |
+
padding: 0 !important;
|
298 |
+
border: 2px solid rgba(128, 128, 128, 0.5);
|
299 |
+
}
|
300 |
+
|
301 |
+
.flipbook-currentPageInput.digits-3 {
|
302 |
+
min-width: calc(3em) !important;
|
303 |
+
}
|
304 |
+
|
305 |
+
.flipbook-currentPageInput.digits-2 {
|
306 |
+
min-width: calc(2em) !important;
|
307 |
+
}
|
308 |
+
|
309 |
+
.flipbook-currentPageInput.digits-1 {
|
310 |
+
min-width: calc(1em) !important;
|
311 |
+
}
|
312 |
+
|
313 |
+
.flipbook-currentPageInput:focus {
|
314 |
+
outline: 2px solid #88888885;
|
315 |
+
}
|
316 |
+
|
317 |
+
.flipbook-color-transparent {
|
318 |
+
color: transparent !important;
|
319 |
+
}
|
320 |
+
|
321 |
+
.flipbook-browser-fullscreen {
|
322 |
+
position: fixed !important;
|
323 |
+
top: 0 !important;
|
324 |
+
left: 0 !important;
|
325 |
+
width: 100% !important;
|
326 |
+
height: 100% !important;
|
327 |
+
z-index: 999999 !important;
|
328 |
+
margin: 0 !important;
|
329 |
+
padding: 0 !important;
|
330 |
+
}
|
331 |
+
|
332 |
+
.flipbook-menuBottom {
|
333 |
+
position: absolute;
|
334 |
+
bottom: 0;
|
335 |
+
margin: 0;
|
336 |
+
padding: 0;
|
337 |
+
z-index: 2;
|
338 |
+
pointer-events: none;
|
339 |
+
display: flex;
|
340 |
+
overflow: visible;
|
341 |
+
}
|
342 |
+
|
343 |
+
.flipbook-menu-btn-wrapper {
|
344 |
+
display: inline-block;
|
345 |
+
position: relative;
|
346 |
+
overflow: visible;
|
347 |
+
}
|
348 |
+
|
349 |
+
.flipbook-tools .flipbook-menu-btn-wrapper {
|
350 |
+
pointer-events: auto;
|
351 |
+
display: flex;
|
352 |
+
align-items: center;
|
353 |
+
position: relative;
|
354 |
+
overflow: visible;
|
355 |
+
cursor: pointer;
|
356 |
+
padding-right: 15px;
|
357 |
+
min-width: 130px;
|
358 |
+
}
|
359 |
+
|
360 |
+
.flipbook-share .flipbook-menu-btn-wrapper {
|
361 |
+
pointer-events: auto;
|
362 |
+
display: inline-block;
|
363 |
+
align-items: center;
|
364 |
+
position: relative;
|
365 |
+
overflow: visible;
|
366 |
+
cursor: pointer;
|
367 |
+
padding: 15px;
|
368 |
+
}
|
369 |
+
|
370 |
+
.flipbook-menuBottom .flipbook-has-tooltip::before {
|
371 |
+
bottom: calc(100% + 5px);
|
372 |
+
}
|
373 |
+
|
374 |
+
.flipbook-menuTop .flipbook-has-tooltip::before {
|
375 |
+
top: calc(100% + 5px);
|
376 |
+
}
|
377 |
+
|
378 |
+
.flipbook-page-item-has-tooltip:hover {
|
379 |
+
z-index: 1;
|
380 |
+
}
|
381 |
+
|
382 |
+
.flipbook-page-item-has-tooltip:hover::before {
|
383 |
+
visibility: visible;
|
384 |
+
opacity: 1;
|
385 |
+
}
|
386 |
+
|
387 |
+
.flipbook-tooltip-left::before {
|
388 |
+
left: -20px;
|
389 |
+
transform: translateX(-100%) translateY(-50%);
|
390 |
+
top: 50%;
|
391 |
+
}
|
392 |
+
|
393 |
+
.flipbook-tooltip-right::before {
|
394 |
+
left: calc(100% + 20px);
|
395 |
+
transform: translateY(-50%);
|
396 |
+
top: 50%;
|
397 |
+
}
|
398 |
+
|
399 |
+
.flipbook-tooltip-top::before {
|
400 |
+
left: 50%;
|
401 |
+
transform: translateX(-50%);
|
402 |
+
bottom: calc(100% + 20px);
|
403 |
+
}
|
404 |
+
|
405 |
+
.flipbook-tooltip-bottom::before {
|
406 |
+
left: 50%;
|
407 |
+
transform: translateX(-50%);
|
408 |
+
top: calc(100% + 20px);
|
409 |
+
}
|
410 |
+
|
411 |
+
.flipbook-tooltip-topLeft::before {
|
412 |
+
left: -20px;
|
413 |
+
transform: translateX(-100%);
|
414 |
+
bottom: calc(100% + 20px);
|
415 |
+
}
|
416 |
+
|
417 |
+
.flipbook-tooltip-topRight::before {
|
418 |
+
right: -20px;
|
419 |
+
bottom: calc(100% + 20px);
|
420 |
+
}
|
421 |
+
|
422 |
+
.flipbook-tooltip-bottomLeft::before {
|
423 |
+
left: -20px;
|
424 |
+
transform: translateX(-100%);
|
425 |
+
top: calc(100% + 20px);
|
426 |
+
}
|
427 |
+
|
428 |
+
.flipbook-tooltip-bottomRight::before {
|
429 |
+
right: -20px;
|
430 |
+
top: calc(100% + 20px);
|
431 |
+
}
|
432 |
+
|
433 |
+
.flipbook-page-item-has-tooltip::before {
|
434 |
+
content: attr(data-tooltip);
|
435 |
+
position: absolute;
|
436 |
+
visibility: hidden;
|
437 |
+
opacity: 0;
|
438 |
+
background-color: rgba(255, 255, 255, 0.9);
|
439 |
+
color: black;
|
440 |
+
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
|
441 |
+
text-align: center;
|
442 |
+
border-radius: 4px;
|
443 |
+
padding: 10px 20px;
|
444 |
+
font-size: 32px;
|
445 |
+
font-weight: normal;
|
446 |
+
letter-spacing: normal;
|
447 |
+
line-height: 1.4;
|
448 |
+
text-transform: none;
|
449 |
+
width: max-content;
|
450 |
+
max-width: 600px;
|
451 |
+
transition:
|
452 |
+
opacity 0.3s ease,
|
453 |
+
visibility 0.3s ease;
|
454 |
+
}
|
455 |
+
|
456 |
+
.flipbook-has-tooltip::before {
|
457 |
+
content: attr(data-tooltip);
|
458 |
+
position: absolute;
|
459 |
+
left: 50%;
|
460 |
+
transform: translateX(-50%);
|
461 |
+
visibility: hidden;
|
462 |
+
opacity: 0;
|
463 |
+
background-color: rgba(0, 0, 0, 0.8);
|
464 |
+
color: white;
|
465 |
+
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
|
466 |
+
font-size: 14px;
|
467 |
+
text-align: center;
|
468 |
+
border-radius: 4px;
|
469 |
+
padding: 5px 10px;
|
470 |
+
font-size: 14px;
|
471 |
+
font-weight: normal;
|
472 |
+
letter-spacing: normal;
|
473 |
+
line-height: 1.4;
|
474 |
+
text-transform: none;
|
475 |
+
width: max-content;
|
476 |
+
white-space: nowrap;
|
477 |
+
transition:
|
478 |
+
opacity 0.3s ease,
|
479 |
+
visibility 0.3s ease;
|
480 |
+
}
|
481 |
+
|
482 |
+
.flipbook-menu-right .flipbook-has-tooltip:last-child::before {
|
483 |
+
left: 100%;
|
484 |
+
transform: translateX(-100%);
|
485 |
+
}
|
486 |
+
|
487 |
+
.flipbook-menu-left .flipbook-has-tooltip:first-child::before {
|
488 |
+
left: 0%;
|
489 |
+
transform: translateX(0%);
|
490 |
+
}
|
491 |
+
|
492 |
+
.flipbook-has-tooltip:hover::before {
|
493 |
+
visibility: visible;
|
494 |
+
opacity: 1;
|
495 |
+
}
|
496 |
+
|
497 |
+
.flipbook-has-tooltip.disabled:hover::before {
|
498 |
+
visibility: hidden;
|
499 |
+
opacity: 0;
|
500 |
+
}
|
501 |
+
|
502 |
+
.flipbook-menu-fixed {
|
503 |
+
left: 0;
|
504 |
+
right: 0;
|
505 |
+
}
|
506 |
+
|
507 |
+
.flipbook-menu-fixed .flipbook-menu {
|
508 |
+
align-items: center;
|
509 |
+
}
|
510 |
+
|
511 |
+
@media only screen and (max-width: 768px) {
|
512 |
+
.flipbook-menu-fixed .flipbook-menu {
|
513 |
+
justify-content: space-around;
|
514 |
+
width: -webkit-fill-available;
|
515 |
+
}
|
516 |
+
}
|
517 |
+
|
518 |
+
.flipbook-menu-center {
|
519 |
+
justify-content: center;
|
520 |
+
align-items: center;
|
521 |
+
}
|
522 |
+
|
523 |
+
.flipbook-menu-right {
|
524 |
+
justify-content: flex-end;
|
525 |
+
align-self: center;
|
526 |
+
flex: 1;
|
527 |
+
display: flex;
|
528 |
+
/* min-width: -webkit-min-content; */
|
529 |
+
/* Workaround to Chrome bug */
|
530 |
+
}
|
531 |
+
|
532 |
+
.flipbook-menu-left {
|
533 |
+
justify-content: flex-start;
|
534 |
+
align-self: center;
|
535 |
+
flex: 1;
|
536 |
+
display: flex;
|
537 |
+
/* min-width: -webkit-min-content; */
|
538 |
+
/* Workaround to Chrome bug */
|
539 |
+
}
|
540 |
+
|
541 |
+
.flipbook-menu-floating {
|
542 |
+
margin-top: 5px !important;
|
543 |
+
margin-bottom: 5px !important;
|
544 |
+
left: 50%;
|
545 |
+
transform: translate(-50%, 0);
|
546 |
+
min-width: fit-content;
|
547 |
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
548 |
+
border-radius: 2px;
|
549 |
+
}
|
550 |
+
|
551 |
+
.flipbook-menuTop {
|
552 |
+
position: absolute;
|
553 |
+
top: 0;
|
554 |
+
margin: 0;
|
555 |
+
padding: 0;
|
556 |
+
z-index: 2;
|
557 |
+
pointer-events: none;
|
558 |
+
display: flex;
|
559 |
+
justify-content: space-between;
|
560 |
+
overflow: visible;
|
561 |
+
}
|
562 |
+
|
563 |
+
.flipbook-menu {
|
564 |
+
position: relative;
|
565 |
+
text-align: center;
|
566 |
+
display: flex;
|
567 |
+
}
|
568 |
+
|
569 |
+
.flipbook-menu svg,
|
570 |
+
.flipbook-nav svg {
|
571 |
+
box-sizing: content-box;
|
572 |
+
}
|
573 |
+
|
574 |
+
.flipbook-page-caption-btn {
|
575 |
+
padding: 12px;
|
576 |
+
background-color: rgba(255, 255, 255, 0.9);
|
577 |
+
fill: black;
|
578 |
+
display: flex;
|
579 |
+
justify-content: center;
|
580 |
+
border-radius: 6px;
|
581 |
+
bottom: 50px;
|
582 |
+
right: 50px;
|
583 |
+
position: absolute;
|
584 |
+
cursor: pointer;
|
585 |
+
box-sizing: content-box;
|
586 |
+
transform: scale(2);
|
587 |
+
}
|
588 |
+
|
589 |
+
.htmlContent > .flipbook-page-caption-btn:hover + .flipbook-page-caption {
|
590 |
+
opacity: 1;
|
591 |
+
}
|
592 |
+
|
593 |
+
.flipbook-page-caption {
|
594 |
+
opacity: 0;
|
595 |
+
position: absolute;
|
596 |
+
bottom: 120px;
|
597 |
+
max-width: calc(100% - 288px);
|
598 |
+
width: max-content;
|
599 |
+
padding: 24px;
|
600 |
+
border-radius: 12px;
|
601 |
+
right: 120px;
|
602 |
+
background-color: rgba(255, 255, 255, 0.9);
|
603 |
+
color: black;
|
604 |
+
font-size: 24px;
|
605 |
+
transition: opacity 0.3s;
|
606 |
+
}
|
607 |
+
|
608 |
+
.flipbook-menu-btn {
|
609 |
+
user-select: none;
|
610 |
+
display: inline-flex;
|
611 |
+
justify-content: center;
|
612 |
+
cursor: pointer;
|
613 |
+
background: none;
|
614 |
+
transition: all 0.1s ease-out;
|
615 |
+
pointer-events: auto;
|
616 |
+
box-sizing: content-box;
|
617 |
+
}
|
618 |
+
|
619 |
+
.flipbook-submenu .flipbook-menu-btn {
|
620 |
+
justify-content: left;
|
621 |
+
}
|
622 |
+
.flipbook-submenu .flipbook-menu-btn svg {
|
623 |
+
margin-right: 10px;
|
624 |
+
}
|
625 |
+
|
626 |
+
.flipbook-nav .disabled,
|
627 |
+
.flipbook-menu .disabled {
|
628 |
+
opacity: 0.2;
|
629 |
+
cursor: inherit;
|
630 |
+
/* pointer-events: none; */
|
631 |
+
}
|
632 |
+
|
633 |
+
.flipbook-icon-reverse {
|
634 |
+
transform: scaleX(-1);
|
635 |
+
transform-origin: center;
|
636 |
+
}
|
637 |
+
|
638 |
+
.flipbook-menu .flipbook-findbar {
|
639 |
+
pointer-events: auto;
|
640 |
+
margin-top: 10px;
|
641 |
+
}
|
642 |
+
|
643 |
+
.flipbook-menu .flipbook-findbar input {
|
644 |
+
width: 140px;
|
645 |
+
margin-left: 0;
|
646 |
+
}
|
647 |
+
|
648 |
+
.flipbook-thumbHolder {
|
649 |
+
bottom: 0;
|
650 |
+
position: absolute;
|
651 |
+
top: 0;
|
652 |
+
z-index: 9;
|
653 |
+
min-width: 170px;
|
654 |
+
display: flex;
|
655 |
+
flex-direction: column;
|
656 |
+
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important;
|
657 |
+
}
|
658 |
+
|
659 |
+
.flipbook-thumbsWrapper {
|
660 |
+
bottom: 0;
|
661 |
+
left: 0;
|
662 |
+
top: 90px;
|
663 |
+
overflow: auto;
|
664 |
+
width: 100%;
|
665 |
+
height: 100%;
|
666 |
+
}
|
667 |
+
|
668 |
+
.flipbook-thumbsScroller {
|
669 |
+
margin: 0;
|
670 |
+
position: relative;
|
671 |
+
text-align: center;
|
672 |
+
display: grid;
|
673 |
+
justify-content: center;
|
674 |
+
}
|
675 |
+
|
676 |
+
.flipbook-thumbs-grid .flipbook-thumbsWrapper {
|
677 |
+
width: calc(100% - 100px);
|
678 |
+
max-width: 1600px;
|
679 |
+
margin: auto;
|
680 |
+
padding-top: 20px;
|
681 |
+
padding-bottom: 50px;
|
682 |
+
height: max-content;
|
683 |
+
}
|
684 |
+
|
685 |
+
.flipbook-thumbs-grid .flipbook-thumbsScroller {
|
686 |
+
display: block;
|
687 |
+
}
|
688 |
+
.flipbook-thumbs-grid {
|
689 |
+
background-color: rgba(0, 0, 0, 0.5) !important;
|
690 |
+
backdrop-filter: blur(20px);
|
691 |
+
width: 100%;
|
692 |
+
color: white;
|
693 |
+
}
|
694 |
+
|
695 |
+
.flipbook-thumbs-grid .flipbook-menu-title,
|
696 |
+
.flipbook-thumbs-grid .flipbook-btn-close svg {
|
697 |
+
color: white !important;
|
698 |
+
fill: white !important;
|
699 |
+
}
|
700 |
+
|
701 |
+
.flipbook-thumbs-grid .flipbook-menu-header {
|
702 |
+
display: none;
|
703 |
+
}
|
704 |
+
|
705 |
+
.flipbook-thumbs-grid-close {
|
706 |
+
display: none;
|
707 |
+
}
|
708 |
+
|
709 |
+
.flipbook-thumbs-grid .flipbook-thumbs-grid-close {
|
710 |
+
display: flex;
|
711 |
+
justify-content: end;
|
712 |
+
top: 10px;
|
713 |
+
right: 40px;
|
714 |
+
z-index: 1;
|
715 |
+
}
|
716 |
+
|
717 |
+
.flipbook-thumbs-grid .flipbook-thumbs-grid-close svg {
|
718 |
+
font-size: 30px;
|
719 |
+
fill: #fff !important;
|
720 |
+
text-shadow: drop-shadow(rgb(0, 0, 0) 0px 0px 1px);
|
721 |
+
padding: 10px;
|
722 |
+
}
|
723 |
+
|
724 |
+
.flipbook-thumb {
|
725 |
+
margin: 15px 10px 10px;
|
726 |
+
cursor: pointer;
|
727 |
+
position: relative;
|
728 |
+
display: inline-block;
|
729 |
+
background: rgba(255, 255, 255, 0.5);
|
730 |
+
border: 1px solid rgb(0 0 0 / 25%);
|
731 |
+
}
|
732 |
+
|
733 |
+
.flipbook-thumb:hover,
|
734 |
+
.flipbook-thumb-active {
|
735 |
+
border: 1px solid rgb(0 0 0 / 50%);
|
736 |
+
box-shadow: 0 0 0px 2px rgb(0 0 0 / 25%);
|
737 |
+
transition: 0.2s all;
|
738 |
+
opacity: 0.7;
|
739 |
+
}
|
740 |
+
|
741 |
+
.flipbook-thumb:hover .flipbook-thumb-num {
|
742 |
+
background: rgba(0, 0, 0, 0.8);
|
743 |
+
transition: 0.2s all;
|
744 |
+
}
|
745 |
+
|
746 |
+
.flipbook-search {
|
747 |
+
padding: 16px;
|
748 |
+
position: relative;
|
749 |
+
}
|
750 |
+
|
751 |
+
.flipbook-search-clear {
|
752 |
+
position: absolute;
|
753 |
+
top: 7px;
|
754 |
+
right: 7px;
|
755 |
+
}
|
756 |
+
|
757 |
+
.flipbook-search-match {
|
758 |
+
padding: 8px 16px;
|
759 |
+
font-size: 14px;
|
760 |
+
line-height: 20px;
|
761 |
+
cursor: pointer;
|
762 |
+
width: 218px;
|
763 |
+
}
|
764 |
+
|
765 |
+
.flipbook-search-match:hover {
|
766 |
+
text-decoration: underline;
|
767 |
+
}
|
768 |
+
|
769 |
+
.flipbook-search-match-title {
|
770 |
+
height: 20px;
|
771 |
+
}
|
772 |
+
|
773 |
+
.flipbook-search-match-text {
|
774 |
+
text-align: left;
|
775 |
+
}
|
776 |
+
|
777 |
+
.flipbook-thumb-num {
|
778 |
+
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
|
779 |
+
font-size: 14px;
|
780 |
+
line-height: 14px;
|
781 |
+
user-select: none;
|
782 |
+
font-weight: 600;
|
783 |
+
position: relative;
|
784 |
+
position: absolute;
|
785 |
+
bottom: 11px;
|
786 |
+
bottom: 2px;
|
787 |
+
right: 2px;
|
788 |
+
border-radius: 2px;
|
789 |
+
background: rgba(0, 0, 0, 0.6);
|
790 |
+
color: white !important;
|
791 |
+
padding: 4px 6px;
|
792 |
+
display: inline-block;
|
793 |
+
}
|
794 |
+
|
795 |
+
.flipbook-thumb img {
|
796 |
+
display: inline-block;
|
797 |
+
}
|
798 |
+
|
799 |
+
.flipbook-toc {
|
800 |
+
margin: 0;
|
801 |
+
padding: 0;
|
802 |
+
position: absolute;
|
803 |
+
top: 50px;
|
804 |
+
bottom: 0;
|
805 |
+
overflow: auto;
|
806 |
+
width: calc(100% - 20px);
|
807 |
+
padding: 0 10px;
|
808 |
+
box-sizing: content-box;
|
809 |
+
}
|
810 |
+
|
811 |
+
.flipbook-toc ul {
|
812 |
+
list-style: none;
|
813 |
+
padding-left: 0;
|
814 |
+
margin: 0;
|
815 |
+
}
|
816 |
+
.flipbook-toc .title-container {
|
817 |
+
display: flex;
|
818 |
+
align-items: center;
|
819 |
+
flex: 1;
|
820 |
+
}
|
821 |
+
|
822 |
+
.flipbook-toc ul ul {
|
823 |
+
padding-left: 20px; /* Indent only nested lists */
|
824 |
+
}
|
825 |
+
|
826 |
+
.flipbook-toc li {
|
827 |
+
margin: 5px 0;
|
828 |
+
}
|
829 |
+
|
830 |
+
.flipbook-toc .toc-item {
|
831 |
+
display: flex;
|
832 |
+
align-items: center;
|
833 |
+
justify-content: space-between;
|
834 |
+
padding: 5px 0;
|
835 |
+
cursor: pointer;
|
836 |
+
transition: background-color 0.2s;
|
837 |
+
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
|
838 |
+
}
|
839 |
+
|
840 |
+
.flipbook-toc .toc-item:hover {
|
841 |
+
background-color: rgba(128, 128, 128, 0.2);
|
842 |
+
}
|
843 |
+
|
844 |
+
.flipbook-toc .expand-icon,
|
845 |
+
.flipbook-toc .spacer {
|
846 |
+
display: inline-flex;
|
847 |
+
align-items: center;
|
848 |
+
justify-content: center;
|
849 |
+
width: 1em; /* Fixed width */
|
850 |
+
height: 1em; /* Fixed height to match icon size */
|
851 |
+
margin-right: 8px;
|
852 |
+
flex-shrink: 0;
|
853 |
+
}
|
854 |
+
|
855 |
+
.flipbook-toc .expand-icon svg {
|
856 |
+
transition: transform 0.2s ease-in-out;
|
857 |
+
}
|
858 |
+
|
859 |
+
.flipbook-toc .expand-icon.expanded svg {
|
860 |
+
transform: rotate(90deg);
|
861 |
+
}
|
862 |
+
|
863 |
+
.flipbook-toc .spacer {
|
864 |
+
visibility: hidden;
|
865 |
+
}
|
866 |
+
|
867 |
+
.flipbook-toc .title-container span.title {
|
868 |
+
font-size: 14px;
|
869 |
+
/* color: #333; */
|
870 |
+
}
|
871 |
+
|
872 |
+
.flipbook-toc .page-number {
|
873 |
+
font-size: 12px;
|
874 |
+
margin-left: 10px;
|
875 |
+
white-space: nowrap;
|
876 |
+
margin-right: 5px;
|
877 |
+
}
|
878 |
+
|
879 |
+
.flipbook-tocHolder {
|
880 |
+
position: absolute;
|
881 |
+
top: 0;
|
882 |
+
width: 250px;
|
883 |
+
bottom: 0;
|
884 |
+
z-index: 9;
|
885 |
+
}
|
886 |
+
|
887 |
+
.flipbook-tocItem {
|
888 |
+
display: block;
|
889 |
+
}
|
890 |
+
|
891 |
+
.flipbook-tocItem {
|
892 |
+
display: flex;
|
893 |
+
justify-content: space-between;
|
894 |
+
padding: 8px 15px; /* Adjusted padding */
|
895 |
+
margin: 5px 0; /* Optional for spacing between items */
|
896 |
+
align-items: center; /* Ensure vertical alignment of content */
|
897 |
+
|
898 |
+
cursor: pointer;
|
899 |
+
font-size: 14px;
|
900 |
+
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
|
901 |
+
width: 100%;
|
902 |
+
}
|
903 |
+
|
904 |
+
.flipbook-tocItem .flipbook-icon {
|
905 |
+
margin-right: 10px; /* Add space between icon and title */
|
906 |
+
display: inline-block;
|
907 |
+
}
|
908 |
+
|
909 |
+
.flipbook-tocItem .title {
|
910 |
+
flex-grow: 1; /* Allow the title to take up remaining space */
|
911 |
+
text-align: left; /* Ensure title aligns left */
|
912 |
+
margin-left: 10px; /* Add some space between icon and title */
|
913 |
+
}
|
914 |
+
|
915 |
+
.flipbook-tocItem .flipbook-toc-number {
|
916 |
+
text-align: right;
|
917 |
+
width: 25px; /* Ensure the width remains fixed */
|
918 |
+
flex-shrink: 0; /* Prevent the page number from shrinking */
|
919 |
+
}
|
920 |
+
|
921 |
+
.flipbook-tocItem .title:hover {
|
922 |
+
text-decoration: underline;
|
923 |
+
}
|
924 |
+
|
925 |
+
.flipbook-tocItem .right {
|
926 |
+
float: right;
|
927 |
+
}
|
928 |
+
|
929 |
+
.flipbook-tocItem > span {
|
930 |
+
vertical-align: top;
|
931 |
+
}
|
932 |
+
|
933 |
+
.flipbook-tocItem > span > span {
|
934 |
+
vertical-align: middle;
|
935 |
+
}
|
936 |
+
|
937 |
+
.flipbook-findbar {
|
938 |
+
position: relative;
|
939 |
+
}
|
940 |
+
|
941 |
+
.flipbook-findbar input {
|
942 |
+
width: 210px;
|
943 |
+
padding: 5px;
|
944 |
+
font-size: 14px;
|
945 |
+
line-height: initial;
|
946 |
+
border: 1px solid rgba(128, 128, 128, 0.7);
|
947 |
+
}
|
948 |
+
|
949 |
+
.flipbook-findbar input:focus {
|
950 |
+
outline: 1px solid rgba(128, 128, 128, 0.7);
|
951 |
+
}
|
952 |
+
|
953 |
+
.flipbook-find-info {
|
954 |
+
padding-left: 10px;
|
955 |
+
max-width: 200px;
|
956 |
+
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important;
|
957 |
+
font-size: 14px;
|
958 |
+
pointer-events: none;
|
959 |
+
}
|
960 |
+
|
961 |
+
.invisible {
|
962 |
+
opacity: 0;
|
963 |
+
pointer-events: none;
|
964 |
+
display: none;
|
965 |
+
}
|
966 |
+
|
967 |
+
/* .hidden {
|
968 |
+
display: none !important;
|
969 |
+
} */
|
970 |
+
|
971 |
+
.flipbook-hidden {
|
972 |
+
display: none !important;
|
973 |
+
}
|
974 |
+
|
975 |
+
.flipbook-overlay-visible {
|
976 |
+
opacity: 1;
|
977 |
+
}
|
978 |
+
|
979 |
+
.transition {
|
980 |
+
-webkit-transition: all 0.3s ease-out;
|
981 |
+
-moz-transition: all 0.3s ease-out;
|
982 |
+
-o-transition: all 0.3s ease-out;
|
983 |
+
transition: all 0.3s ease-out;
|
984 |
+
}
|
985 |
+
|
986 |
+
.flipbook-share-email {
|
987 |
+
background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='at' class='svg-inline--fa fa-at fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M256 8C118.941 8 8 118.919 8 256c0 137.059 110.919 248 248 248 48.154 0 95.342-14.14 135.408-40.223 12.005-7.815 14.625-24.288 5.552-35.372l-10.177-12.433c-7.671-9.371-21.179-11.667-31.373-5.129C325.92 429.757 291.314 440 256 440c-101.458 0-184-82.542-184-184S154.542 72 256 72c100.139 0 184 57.619 184 160 0 38.786-21.093 79.742-58.17 83.693-17.349-.454-16.91-12.857-13.476-30.024l23.433-121.11C394.653 149.75 383.308 136 368.225 136h-44.981a13.518 13.518 0 0 0-13.432 11.993l-.01.092c-14.697-17.901-40.448-21.775-59.971-21.775-74.58 0-137.831 62.234-137.831 151.46 0 65.303 36.785 105.87 96 105.87 26.984 0 57.369-15.637 74.991-38.333 9.522 34.104 40.613 34.103 70.71 34.103C462.609 379.41 504 307.798 504 232 504 95.653 394.023 8 256 8zm-21.68 304.43c-22.249 0-36.07-15.623-36.07-40.771 0-44.993 30.779-72.729 58.63-72.729 22.292 0 35.601 15.241 35.601 40.77 0 45.061-33.875 72.73-58.161 72.73z'%3E%3C/path%3E%3C/svg%3E");
|
988 |
+
}
|
989 |
+
|
990 |
+
.flipbook-icon {
|
991 |
+
font-style: normal;
|
992 |
+
font-weight: normal;
|
993 |
+
height: 100%;
|
994 |
+
line-height: 1;
|
995 |
+
-webkit-font-smoothing: antialiased;
|
996 |
+
bottom: 0;
|
997 |
+
text-align: center;
|
998 |
+
display: flex;
|
999 |
+
box-sizing: content-box !important;
|
1000 |
+
justify-self: left;
|
1001 |
+
}
|
1002 |
+
|
1003 |
+
.flipbook-icon path {
|
1004 |
+
box-sizing: content-box !important;
|
1005 |
+
}
|
1006 |
+
|
1007 |
+
.flipbook-btn-close {
|
1008 |
+
height: 40px;
|
1009 |
+
width: 40px;
|
1010 |
+
position: absolute;
|
1011 |
+
top: 0;
|
1012 |
+
right: 0;
|
1013 |
+
cursor: pointer;
|
1014 |
+
display: flex;
|
1015 |
+
align-items: center;
|
1016 |
+
justify-content: center;
|
1017 |
+
}
|
1018 |
+
|
1019 |
+
.flipbook-btn-close .flipbook-icon {
|
1020 |
+
width: 16px;
|
1021 |
+
}
|
1022 |
+
|
1023 |
+
.flipbook-font {
|
1024 |
+
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
|
1025 |
+
font-size: 14px;
|
1026 |
+
}
|
1027 |
+
|
1028 |
+
.flipbook-btn {
|
1029 |
+
text-transform: uppercase;
|
1030 |
+
font-weight: bold;
|
1031 |
+
user-select: none;
|
1032 |
+
cursor: pointer;
|
1033 |
+
width: 200px;
|
1034 |
+
line-height: 32px;
|
1035 |
+
text-align: center;
|
1036 |
+
margin: 5px auto;
|
1037 |
+
border: none;
|
1038 |
+
background: #f9f9f9;
|
1039 |
+
background: none;
|
1040 |
+
border-radius: 3px;
|
1041 |
+
-webkit-transition: none;
|
1042 |
+
-o-transition: none;
|
1043 |
+
transition: none;
|
1044 |
+
font-size: 12px;
|
1045 |
+
}
|
1046 |
+
|
1047 |
+
.flipbook-bg-gradient {
|
1048 |
+
background: #313538dd;
|
1049 |
+
}
|
1050 |
+
|
1051 |
+
.flipbook-color-gradient {
|
1052 |
+
color: #eee;
|
1053 |
+
fill: #eee;
|
1054 |
+
}
|
1055 |
+
|
1056 |
+
.flipbook-color-gradient:hover {
|
1057 |
+
color: #eee;
|
1058 |
+
fill: #eee;
|
1059 |
+
}
|
1060 |
+
|
1061 |
+
.flipbook-bg-dark {
|
1062 |
+
background: rgb(49, 53, 56);
|
1063 |
+
}
|
1064 |
+
|
1065 |
+
.flipbook-color-dark {
|
1066 |
+
color: rgba(255, 255, 255, 0.75);
|
1067 |
+
fill: rgba(255, 255, 255, 0.75);
|
1068 |
+
}
|
1069 |
+
|
1070 |
+
.flipbook-color-dark:hover {
|
1071 |
+
color: #fff;
|
1072 |
+
fill: #fff;
|
1073 |
+
}
|
1074 |
+
|
1075 |
+
.flipbook-bg-light {
|
1076 |
+
/* background: rgb(255, 255, 255); */
|
1077 |
+
}
|
1078 |
+
|
1079 |
+
.flipbook-color-light {
|
1080 |
+
color: rgba(50, 50, 50, 0.75);
|
1081 |
+
fill: rgba(50, 50, 50, 0.75);
|
1082 |
+
}
|
1083 |
+
|
1084 |
+
.flipbook-color-light:hover {
|
1085 |
+
color: rgb(50, 50, 50);
|
1086 |
+
fill: rgb(50, 50, 50);
|
1087 |
+
}
|
1088 |
+
|
1089 |
+
.flipbook-bg-twilight {
|
1090 |
+
background: #141414;
|
1091 |
+
}
|
1092 |
+
|
1093 |
+
.flipbook-color-twilight {
|
1094 |
+
color: #feffd3;
|
1095 |
+
fill: #feffd3;
|
1096 |
+
}
|
1097 |
+
|
1098 |
+
.flipbook-color-twilight:hover {
|
1099 |
+
color: #feffd3;
|
1100 |
+
fill: #feffd3;
|
1101 |
+
}
|
1102 |
+
|
1103 |
+
.flipbook-bg-darkgrey {
|
1104 |
+
background: #212121;
|
1105 |
+
}
|
1106 |
+
|
1107 |
+
.flipbook-color-darkgrey {
|
1108 |
+
color: #9e9e9e;
|
1109 |
+
fill: #9e9e9e;
|
1110 |
+
}
|
1111 |
+
|
1112 |
+
.flipbook-color-darkgrey:hover {
|
1113 |
+
color: #bdbdbd;
|
1114 |
+
fill: #bdbdbd;
|
1115 |
+
}
|
1116 |
+
|
1117 |
+
.flipbook-bg-lightgrey {
|
1118 |
+
background: #e0e0e0;
|
1119 |
+
}
|
1120 |
+
|
1121 |
+
.flipbook-color-lightgrey {
|
1122 |
+
color: #757575;
|
1123 |
+
fill: #757575;
|
1124 |
+
}
|
1125 |
+
|
1126 |
+
.flipbook-color-lightgrey:hover {
|
1127 |
+
color: #616161;
|
1128 |
+
fill: #616161;
|
1129 |
+
}
|
1130 |
+
|
1131 |
+
.flipbook-sub-menu {
|
1132 |
+
position: absolute;
|
1133 |
+
top: 0;
|
1134 |
+
left: 0;
|
1135 |
+
width: 100%;
|
1136 |
+
height: 100%;
|
1137 |
+
background: rgba(0, 0, 0, 0.5);
|
1138 |
+
z-index: 999;
|
1139 |
+
}
|
1140 |
+
|
1141 |
+
.flipbook-sub-menu-center {
|
1142 |
+
display: flex;
|
1143 |
+
align-items: center;
|
1144 |
+
justify-content: center;
|
1145 |
+
width: 100%;
|
1146 |
+
height: 100%;
|
1147 |
+
}
|
1148 |
+
|
1149 |
+
.flipbook-menu-header {
|
1150 |
+
position: relative;
|
1151 |
+
padding: 10px;
|
1152 |
+
font-size: 16px;
|
1153 |
+
text-align: center;
|
1154 |
+
}
|
1155 |
+
|
1156 |
+
.flipbook-menu-title {
|
1157 |
+
pointer-events: none;
|
1158 |
+
user-select: none;
|
1159 |
+
}
|
1160 |
+
|
1161 |
+
.flipbook-sub-menu-content {
|
1162 |
+
display: inline-block;
|
1163 |
+
margin-top: -20px;
|
1164 |
+
min-width: 250px;
|
1165 |
+
padding-bottom: 10px;
|
1166 |
+
}
|
1167 |
+
|
1168 |
+
.flipbook-carousel-slide {
|
1169 |
+
-webkit-box-sizing: border-box;
|
1170 |
+
-o-box-sizing: border-box;
|
1171 |
+
box-sizing: border-box;
|
1172 |
+
text-align: center;
|
1173 |
+
position: absolute;
|
1174 |
+
overflow: hidden;
|
1175 |
+
}
|
1176 |
+
|
1177 |
+
.flipbook-carousel-slide .slide-wrapper {
|
1178 |
+
position: absolute;
|
1179 |
+
top: 0;
|
1180 |
+
left: 0;
|
1181 |
+
right: 0;
|
1182 |
+
bottom: 0;
|
1183 |
+
}
|
1184 |
+
|
1185 |
+
.flipbook-carousel-page {
|
1186 |
+
display: inline-block;
|
1187 |
+
background: #f1f1f1;
|
1188 |
+
position: relative;
|
1189 |
+
-o-transform-origin: 0 0;
|
1190 |
+
}
|
1191 |
+
|
1192 |
+
.flipbook-scroll-page {
|
1193 |
+
display: block;
|
1194 |
+
background: #f1f1f1;
|
1195 |
+
position: relative;
|
1196 |
+
}
|
1197 |
+
|
1198 |
+
.flipbook-carousel-page-inner,
|
1199 |
+
.flipbook-scroll-page-inner {
|
1200 |
+
-webkit-transform-origin: 0 0;
|
1201 |
+
-o-transform-origin: 0 0;
|
1202 |
+
transform-origin: 0 0;
|
1203 |
+
margin: 0;
|
1204 |
+
padding: 0;
|
1205 |
+
position: absolute;
|
1206 |
+
height: 100%;
|
1207 |
+
width: 100%;
|
1208 |
+
overflow: hidden;
|
1209 |
+
}
|
1210 |
+
|
1211 |
+
.flipbook-carousel-page-inner canvas,
|
1212 |
+
.flipbook-scroll-page-inner {
|
1213 |
+
width: 100%;
|
1214 |
+
height: 100%;
|
1215 |
+
}
|
1216 |
+
|
1217 |
+
.flipbook-carousel-page img,
|
1218 |
+
.flipbook-scroll-page img {
|
1219 |
+
top: 0;
|
1220 |
+
bottom: 0;
|
1221 |
+
right: 0;
|
1222 |
+
left: 0;
|
1223 |
+
margin: auto;
|
1224 |
+
position: absolute;
|
1225 |
+
pointer-events: none;
|
1226 |
+
user-select: none;
|
1227 |
+
max-width: 200%;
|
1228 |
+
}
|
1229 |
+
|
1230 |
+
.flipbook-carousel-page .page-carousel-img,
|
1231 |
+
.flipbook-scroll-page .page-scroll-img {
|
1232 |
+
height: 100%;
|
1233 |
+
}
|
1234 |
+
|
1235 |
+
/* Hide scrollbar for Chrome, Safari and Opera */
|
1236 |
+
.flipbook-overflow-hidden::-webkit-scrollbar {
|
1237 |
+
display: none;
|
1238 |
+
}
|
1239 |
+
|
1240 |
+
/* Hide scrollbar for IE, Edge and Firefox */
|
1241 |
+
|
1242 |
+
.flipbook-overflow-hidden {
|
1243 |
+
-ms-overflow-style: none;
|
1244 |
+
/* IE and Edge */
|
1245 |
+
scrollbar-width: none;
|
1246 |
+
/* Firefox */
|
1247 |
+
overflow: hidden;
|
1248 |
+
}
|
1249 |
+
|
1250 |
+
/*share*/
|
1251 |
+
|
1252 |
+
.flipbook-share .social.bottom,
|
1253 |
+
.flipbook-share .social.top {
|
1254 |
+
-webkit-transform-origin: 0 0;
|
1255 |
+
-o-transform-origin: 0 0;
|
1256 |
+
}
|
1257 |
+
|
1258 |
+
.flipbook-share {
|
1259 |
+
-webkit-touch-callout: none;
|
1260 |
+
-webkit-user-select: none;
|
1261 |
+
-moz-user-select: none;
|
1262 |
+
-ms-user-select: none;
|
1263 |
+
user-select: none;
|
1264 |
+
}
|
1265 |
+
|
1266 |
+
.flipbook-share [class*='entypo-']:before {
|
1267 |
+
font-family: entypo, sans-serif;
|
1268 |
+
}
|
1269 |
+
|
1270 |
+
.flipbook-share label {
|
1271 |
+
font-size: 16px;
|
1272 |
+
cursor: pointer;
|
1273 |
+
margin: 0;
|
1274 |
+
padding: 5px 10px;
|
1275 |
+
border-radius: 5px;
|
1276 |
+
background: #a29baa;
|
1277 |
+
color: #333;
|
1278 |
+
transition: all 0.3s ease;
|
1279 |
+
}
|
1280 |
+
|
1281 |
+
.flipbook-share label:hover {
|
1282 |
+
opacity: 0.8;
|
1283 |
+
}
|
1284 |
+
|
1285 |
+
.flipbook-share label span {
|
1286 |
+
text-transform: uppercase;
|
1287 |
+
font-size: 0.9em;
|
1288 |
+
font-family: Lato, sans-serif;
|
1289 |
+
font-weight: 700;
|
1290 |
+
-webkit-font-smoothing: antialiased;
|
1291 |
+
padding-left: 6px;
|
1292 |
+
}
|
1293 |
+
|
1294 |
+
.flipbook-share ul {
|
1295 |
+
position: relative;
|
1296 |
+
left: 0;
|
1297 |
+
right: 0;
|
1298 |
+
height: 46px;
|
1299 |
+
color: #fff;
|
1300 |
+
margin: auto;
|
1301 |
+
padding: 0;
|
1302 |
+
list-style: none;
|
1303 |
+
}
|
1304 |
+
|
1305 |
+
.flipbook-share ul li {
|
1306 |
+
font-size: 16px;
|
1307 |
+
cursor: pointer;
|
1308 |
+
width: 40px;
|
1309 |
+
margin: 0;
|
1310 |
+
padding: 9px 0;
|
1311 |
+
text-align: center;
|
1312 |
+
float: left;
|
1313 |
+
height: 22px;
|
1314 |
+
position: relative;
|
1315 |
+
z-index: 2;
|
1316 |
+
-webkit-box-sizing: content-box;
|
1317 |
+
box-sizing: content-box;
|
1318 |
+
transition: all 0.3s ease;
|
1319 |
+
display: flex;
|
1320 |
+
align-items: center;
|
1321 |
+
justify-content: center;
|
1322 |
+
}
|
1323 |
+
|
1324 |
+
.flipbook-page-preloader {
|
1325 |
+
width: auto !important;
|
1326 |
+
height: auto !important;
|
1327 |
+
}
|
1328 |
+
|
1329 |
+
.flipbook-page-preloader-image {
|
1330 |
+
width: 100%;
|
1331 |
+
height: 100%;
|
1332 |
+
position: absolute;
|
1333 |
+
top: 0;
|
1334 |
+
left: 0;
|
1335 |
+
}
|
1336 |
+
|
1337 |
+
/** preloader*/
|
1338 |
+
|
1339 |
+
.cssload-container {
|
1340 |
+
width: 100%;
|
1341 |
+
height: 100%;
|
1342 |
+
top: 0;
|
1343 |
+
left: 0;
|
1344 |
+
text-align: center;
|
1345 |
+
position: absolute;
|
1346 |
+
z-index: 2147483647 !important;
|
1347 |
+
pointer-events: none;
|
1348 |
+
}
|
1349 |
+
|
1350 |
+
.cssload-speeding-wheel {
|
1351 |
+
width: 24px;
|
1352 |
+
height: 24px;
|
1353 |
+
/* margin: 0 auto; */
|
1354 |
+
border: 3px solid rgba(0, 0, 0, 0.4);
|
1355 |
+
border-radius: 50%;
|
1356 |
+
border-left-color: rgba(255, 255, 255, 0.2);
|
1357 |
+
border-right-color: rgba(255, 255, 255, 0.2);
|
1358 |
+
animation: cssload-spin 575ms infinite linear;
|
1359 |
+
-o-animation: cssload-spin 575ms infinite linear;
|
1360 |
+
-ms-animation: cssload-spin 575ms infinite linear;
|
1361 |
+
-webkit-animation: cssload-spin 575ms infinite linear;
|
1362 |
+
-moz-animation: cssload-spin 575ms infinite linear;
|
1363 |
+
top: 45%;
|
1364 |
+
position: absolute;
|
1365 |
+
left: 50%;
|
1366 |
+
margin-left: -15px;
|
1367 |
+
margin-top: -15px;
|
1368 |
+
z-index: 3;
|
1369 |
+
}
|
1370 |
+
|
1371 |
+
@keyframes cssload-spin {
|
1372 |
+
100% {
|
1373 |
+
transform: rotate(360deg);
|
1374 |
+
}
|
1375 |
+
}
|
1376 |
+
|
1377 |
+
@-o-keyframes cssload-spin {
|
1378 |
+
100% {
|
1379 |
+
-o-transform: rotate(360deg);
|
1380 |
+
transform: rotate(360deg);
|
1381 |
+
}
|
1382 |
+
}
|
1383 |
+
|
1384 |
+
@-ms-keyframes cssload-spin {
|
1385 |
+
100% {
|
1386 |
+
-ms-transform: rotate(360deg);
|
1387 |
+
transform: rotate(360deg);
|
1388 |
+
}
|
1389 |
+
}
|
1390 |
+
|
1391 |
+
@-webkit-keyframes cssload-spin {
|
1392 |
+
100% {
|
1393 |
+
-webkit-transform: rotate(360deg);
|
1394 |
+
transform: rotate(360deg);
|
1395 |
+
}
|
1396 |
+
}
|
1397 |
+
|
1398 |
+
@-moz-keyframes cssload-spin {
|
1399 |
+
100% {
|
1400 |
+
-moz-transform: rotate(360deg);
|
1401 |
+
transform: rotate(360deg);
|
1402 |
+
}
|
1403 |
+
}
|
1404 |
+
|
1405 |
+
/**new preloader end*/
|
1406 |
+
|
1407 |
+
.flipbook-loading-text {
|
1408 |
+
position: absolute;
|
1409 |
+
top: 45%;
|
1410 |
+
margin-top: 20px;
|
1411 |
+
width: 100%;
|
1412 |
+
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important;
|
1413 |
+
font-size: 14px;
|
1414 |
+
color: #aaa !important;
|
1415 |
+
}
|
1416 |
+
|
1417 |
+
.flipbook-loading-bg {
|
1418 |
+
width: 40px;
|
1419 |
+
height: 40px;
|
1420 |
+
border-radius: 4px;
|
1421 |
+
top: 45%;
|
1422 |
+
left: 50%;
|
1423 |
+
position: absolute;
|
1424 |
+
pointer-events: none;
|
1425 |
+
background: rgba(0, 0, 0, 0.2);
|
1426 |
+
margin: -20px;
|
1427 |
+
display: none;
|
1428 |
+
}
|
1429 |
+
|
1430 |
+
.flipbook-fillPreloader {
|
1431 |
+
position: fixed;
|
1432 |
+
width: 100%;
|
1433 |
+
height: 100%;
|
1434 |
+
display: table-cell;
|
1435 |
+
text-align: center;
|
1436 |
+
vertical-align: middle;
|
1437 |
+
pointer-events: none;
|
1438 |
+
}
|
1439 |
+
|
1440 |
+
.flipbook-fillPreloader img {
|
1441 |
+
position: absolute;
|
1442 |
+
margin: auto;
|
1443 |
+
top: 0;
|
1444 |
+
left: 0;
|
1445 |
+
right: 0;
|
1446 |
+
bottom: 0;
|
1447 |
+
|
1448 |
+
-webkit-transition: all 0.11s ease-out;
|
1449 |
+
-moz-transition: all 0.1s ease-out;
|
1450 |
+
transition: all 0.1s ease-out;
|
1451 |
+
}
|
1452 |
+
|
1453 |
+
.thumb-btn-close {
|
1454 |
+
right: 0;
|
1455 |
+
margin: 3px;
|
1456 |
+
border-radius: 2px;
|
1457 |
+
position: absolute;
|
1458 |
+
cursor: pointer;
|
1459 |
+
padding: 4px 6px;
|
1460 |
+
background: rgba(0, 0, 0, 0.6);
|
1461 |
+
}
|
1462 |
+
|
1463 |
+
.thumb-btn-close:hover {
|
1464 |
+
background: rgba(0, 0, 0, 0.8);
|
1465 |
+
}
|
1466 |
+
|
1467 |
+
.flipbook-noselect {
|
1468 |
+
-webkit-touch-callout: none;
|
1469 |
+
-webkit-user-select: none;
|
1470 |
+
-khtml-user-select: none;
|
1471 |
+
-moz-user-select: none;
|
1472 |
+
-ms-user-select: none;
|
1473 |
+
user-select: none;
|
1474 |
+
}
|
1475 |
+
|
1476 |
+
.flipbook-btn-active {
|
1477 |
+
background: rgba(128, 128, 128, 0.5);
|
1478 |
+
}
|
1479 |
+
|
1480 |
+
.flipbook-move {
|
1481 |
+
cursor: move;
|
1482 |
+
/* fallback if move cursor is unsupported */
|
1483 |
+
cursor: -webkit-grab;
|
1484 |
+
cursor: grab;
|
1485 |
+
}
|
1486 |
+
|
1487 |
+
.flipbook-page-item {
|
1488 |
+
bottom: auto;
|
1489 |
+
right: auto;
|
1490 |
+
position: absolute;
|
1491 |
+
-webkit-transition: all 0.2s ease-out;
|
1492 |
+
-moz-transition: all 0.2s ease-out;
|
1493 |
+
-o-transition: all 0.2s ease-out;
|
1494 |
+
transition: all 0.2s ease-out;
|
1495 |
+
z-index: 0;
|
1496 |
+
}
|
1497 |
+
|
1498 |
+
.flipbook-page-item iframe {
|
1499 |
+
width: 100%;
|
1500 |
+
height: 100%;
|
1501 |
+
}
|
1502 |
+
|
1503 |
+
.textLayer mark {
|
1504 |
+
background: #ff0;
|
1505 |
+
color: transparent !important;
|
1506 |
+
padding: 0;
|
1507 |
+
}
|
1508 |
+
|
1509 |
+
.textLayer .mark-blue {
|
1510 |
+
background: blue;
|
1511 |
+
}
|
1512 |
+
|
1513 |
+
.textLayer .mark-red {
|
1514 |
+
background: red;
|
1515 |
+
}
|
1516 |
+
|
1517 |
+
.textLayer .mark-green {
|
1518 |
+
background: green;
|
1519 |
+
}
|
1520 |
+
|
1521 |
+
/*
|
1522 |
+
.flipbook-textLayer {
|
1523 |
+
position: absolute;
|
1524 |
+
left: 0;
|
1525 |
+
top: 0;
|
1526 |
+
right: 0;
|
1527 |
+
bottom: 0;
|
1528 |
+
overflow: hidden;
|
1529 |
+
opacity: var(--flipbook-link-opacity);
|
1530 |
+
line-height: 1;
|
1531 |
+
color: #000;
|
1532 |
+
pointer-events: none;
|
1533 |
+
}
|
1534 |
+
|
1535 |
+
.flipbook-textLayer br {
|
1536 |
+
user-select: none;
|
1537 |
+
}
|
1538 |
+
|
1539 |
+
.flipbook-page-htmlContent * {
|
1540 |
+
max-width: initial;
|
1541 |
+
}
|
1542 |
+
|
1543 |
+
.flipbook-page-htmlContent .pageClickArea {
|
1544 |
+
position: absolute;
|
1545 |
+
width: 5%;
|
1546 |
+
height: 100%;
|
1547 |
+
top: 0;
|
1548 |
+
cursor: pointer;
|
1549 |
+
draggable: none;
|
1550 |
+
}
|
1551 |
+
|
1552 |
+
.pageClickAreaLeft {
|
1553 |
+
left: 0;
|
1554 |
+
}
|
1555 |
+
|
1556 |
+
.pageClickAreaRight {
|
1557 |
+
right: 0;
|
1558 |
+
}
|
1559 |
+
|
1560 |
+
.textLayer mark {
|
1561 |
+
background: #ff0;
|
1562 |
+
color: transparent;
|
1563 |
+
}
|
1564 |
+
|
1565 |
+
.textLayer .mark-blue {
|
1566 |
+
background: blue;
|
1567 |
+
}
|
1568 |
+
|
1569 |
+
.textLayer .mark-red {
|
1570 |
+
background: red;
|
1571 |
+
}
|
1572 |
+
|
1573 |
+
.textLayer .mark-green {
|
1574 |
+
background: green;
|
1575 |
+
}
|
1576 |
+
|
1577 |
+
.textLayer > span {
|
1578 |
+
color: transparent !important;
|
1579 |
+
position: absolute;
|
1580 |
+
white-space: pre;
|
1581 |
+
cursor: text;
|
1582 |
+
-webkit-transform-origin: 0 0;
|
1583 |
+
-moz-transform-origin: 0% 0%;
|
1584 |
+
-o-transform-origin: 0% 0%;
|
1585 |
+
-ms-transform-origin: 0% 0%;
|
1586 |
+
transform-origin: 0 0;
|
1587 |
+
}
|
1588 |
+
|
1589 |
+
.textLayer > span::selection {
|
1590 |
+
color: transparent !important;
|
1591 |
+
}
|
1592 |
+
|
1593 |
+
.textLayer > div {
|
1594 |
+
color: transparent !important;
|
1595 |
+
position: absolute;
|
1596 |
+
white-space: pre;
|
1597 |
+
cursor: text;
|
1598 |
+
-webkit-transform-origin: 0 0;
|
1599 |
+
-moz-transform-origin: 0% 0%;
|
1600 |
+
-o-transform-origin: 0% 0%;
|
1601 |
+
-ms-transform-origin: 0% 0%;
|
1602 |
+
transform-origin: 0 0;
|
1603 |
+
}
|
1604 |
+
|
1605 |
+
.textLayer .highlight {
|
1606 |
+
margin: -1px;
|
1607 |
+
padding: 1px;
|
1608 |
+
background-color: rgb(180, 0, 170);
|
1609 |
+
border-radius: 4px;
|
1610 |
+
}
|
1611 |
+
|
1612 |
+
.textLayer .highlight.begin {
|
1613 |
+
border-radius: 4px 0 0 4px;
|
1614 |
+
}
|
1615 |
+
|
1616 |
+
.textLayer .highlight.end {
|
1617 |
+
border-radius: 0 4px 4px 0;
|
1618 |
+
}
|
1619 |
+
|
1620 |
+
.textLayer .highlight.middle {
|
1621 |
+
border-radius: 0;
|
1622 |
+
}
|
1623 |
+
|
1624 |
+
.textLayer .highlight.selected {
|
1625 |
+
background-color: rgb(0, 100, 0);
|
1626 |
+
}
|
1627 |
+
|
1628 |
+
.textLayer ::selection {
|
1629 |
+
background: rgb(0, 0, 255);
|
1630 |
+
}
|
1631 |
+
|
1632 |
+
.textLayer ::-moz-selection {
|
1633 |
+
background: rgb(0, 0, 255);
|
1634 |
+
}
|
1635 |
+
|
1636 |
+
.textLayer .endOfContent {
|
1637 |
+
background: initial;
|
1638 |
+
display: block;
|
1639 |
+
position: absolute;
|
1640 |
+
left: 0;
|
1641 |
+
top: 100%;
|
1642 |
+
right: 0;
|
1643 |
+
bottom: 0;
|
1644 |
+
z-index: -1;
|
1645 |
+
cursor: default;
|
1646 |
+
-webkit-user-select: none;
|
1647 |
+
-ms-user-select: none;
|
1648 |
+
-moz-user-select: none;
|
1649 |
+
}
|
1650 |
+
|
1651 |
+
.textLayer .endOfContent.active {
|
1652 |
+
top: 0;
|
1653 |
+
}
|
1654 |
+
|
1655 |
+
.flipbook-disable-text-selection {
|
1656 |
+
-webkit-touch-callout: none;
|
1657 |
+
-webkit-user-select: none;
|
1658 |
+
-khtml-user-select: none;
|
1659 |
+
-moz-user-select: none;
|
1660 |
+
-ms-user-select: none;
|
1661 |
+
user-select: none;
|
1662 |
+
}
|
1663 |
+
|
1664 |
+
.annotationLayer section {
|
1665 |
+
position: absolute;
|
1666 |
+
padding: 0;
|
1667 |
+
margin: 0;
|
1668 |
+
background: none;
|
1669 |
+
} */
|
1670 |
+
|
1671 |
+
.flipbook-page-html .pageClickArea {
|
1672 |
+
position: absolute;
|
1673 |
+
width: 50px;
|
1674 |
+
height: 50px;
|
1675 |
+
bottom: 0;
|
1676 |
+
cursor: pointer;
|
1677 |
+
z-index: 20;
|
1678 |
+
}
|
1679 |
+
|
1680 |
+
.pageClickAreaLeft {
|
1681 |
+
left: 0;
|
1682 |
+
}
|
1683 |
+
|
1684 |
+
.pageClickAreaRight {
|
1685 |
+
/* right: 0; */
|
1686 |
+
}
|
1687 |
+
|
1688 |
+
.annotationLayer .linkAnnotation > a,
|
1689 |
+
.annotationLayer .buttonWidgetAnnotation.pushButton > a,
|
1690 |
+
.flipbook-page-item-link {
|
1691 |
+
position: absolute;
|
1692 |
+
font-size: 1em;
|
1693 |
+
top: 0;
|
1694 |
+
left: 0;
|
1695 |
+
width: 100%;
|
1696 |
+
height: 100%;
|
1697 |
+
background: var(--flipbook-link-color);
|
1698 |
+
animation-duration: 2000ms;
|
1699 |
+
animation-delay: 500ms;
|
1700 |
+
animation-name: flashLinks;
|
1701 |
+
opacity: var(--flipbook-link-opacity);
|
1702 |
+
}
|
1703 |
+
|
1704 |
+
.flipbook-page-auto-link {
|
1705 |
+
background: var(--flipbook-link-color);
|
1706 |
+
color: transparent !important;
|
1707 |
+
animation-duration: 2000ms;
|
1708 |
+
animation-delay: 500ms;
|
1709 |
+
animation-name: flashLinks;
|
1710 |
+
pointer-events: auto;
|
1711 |
+
}
|
1712 |
+
|
1713 |
+
.flipbook-page-auto-link-hover {
|
1714 |
+
background: var(--flipbook-link-color-hover) !important;
|
1715 |
+
color: transparent !important;
|
1716 |
+
}
|
1717 |
+
|
1718 |
+
@keyframes flashLinks {
|
1719 |
+
0% {
|
1720 |
+
background: var(--flipbook-link-color);
|
1721 |
+
}
|
1722 |
+
|
1723 |
+
20% {
|
1724 |
+
background: var(--flipbook-link-color-hover);
|
1725 |
+
}
|
1726 |
+
|
1727 |
+
100% {
|
1728 |
+
background: var(--flipbook-link-color);
|
1729 |
+
}
|
1730 |
+
}
|
1731 |
+
|
1732 |
+
.flipbook-tooltip {
|
1733 |
+
position: absolute;
|
1734 |
+
background: rgba(0, 0, 0, 0.8);
|
1735 |
+
top: 300px;
|
1736 |
+
left: 300px;
|
1737 |
+
color: white;
|
1738 |
+
padding: 6px 12px;
|
1739 |
+
font-size: 13px;
|
1740 |
+
line-height: 13px;
|
1741 |
+
font-weight: normal;
|
1742 |
+
white-space: nowrap;
|
1743 |
+
text-align: center;
|
1744 |
+
-webkit-transition: opacity 0.2s ease-in;
|
1745 |
+
transition: opacity 0.2s ease-in;
|
1746 |
+
z-index: 10000;
|
1747 |
+
}
|
1748 |
+
|
1749 |
+
.flipbook-submenu {
|
1750 |
+
position: absolute;
|
1751 |
+
right: 0;
|
1752 |
+
width: max-content;
|
1753 |
+
text-wrap: nowrap;
|
1754 |
+
}
|
1755 |
+
|
1756 |
+
.flipbook-menuTop .flipbook-submenu {
|
1757 |
+
top: calc(100% + 5px);
|
1758 |
+
}
|
1759 |
+
|
1760 |
+
.flipbook-menuBottom .flipbook-submenu {
|
1761 |
+
bottom: calc(100% + 5px);
|
1762 |
+
}
|
1763 |
+
|
1764 |
+
.flipbook-menuTop * {
|
1765 |
+
box-sizing: content-box !important;
|
1766 |
+
}
|
1767 |
+
|
1768 |
+
.flipbook-menuBottom * {
|
1769 |
+
box-sizing: content-box !important;
|
1770 |
+
}
|
1771 |
+
|
1772 |
+
.flipbook-add-note-rect {
|
1773 |
+
position: absolute;
|
1774 |
+
pointer-events: none;
|
1775 |
+
}
|
1776 |
+
|
1777 |
+
.add-note-btn {
|
1778 |
+
pointer-events: auto;
|
1779 |
+
}
|
1780 |
+
|
1781 |
+
.flipbook-add-note-rect .add-note-btn {
|
1782 |
+
background: rgba(0, 0, 0, 0.8);
|
1783 |
+
border-radius: 0.25em;
|
1784 |
+
color: white;
|
1785 |
+
padding: 0.3em 1em;
|
1786 |
+
text-shadow: 0 1px 0 #000;
|
1787 |
+
font-weight: normal;
|
1788 |
+
white-space: nowrap;
|
1789 |
+
text-align: center;
|
1790 |
+
z-index: 10000;
|
1791 |
+
left: 50%;
|
1792 |
+
transform: translateX(-50%) translateY(-120%);
|
1793 |
+
pointer-events: auto;
|
1794 |
+
cursor: pointer;
|
1795 |
+
position: absolute;
|
1796 |
+
opacity: 0;
|
1797 |
+
}
|
1798 |
+
|
1799 |
+
.flipbook-add-note-rect.hover .add-note-btn {
|
1800 |
+
opacity: 1;
|
1801 |
+
pointer-events: auto;
|
1802 |
+
}
|
1803 |
+
|
1804 |
+
.flipbook-note-display {
|
1805 |
+
width: 230px;
|
1806 |
+
height: 125px;
|
1807 |
+
position: absolute;
|
1808 |
+
background-color: #fafafa;
|
1809 |
+
-webkit-box-shadow: 0 2px 10px 0 rgb(27 47 73 / 30%);
|
1810 |
+
box-shadow: 0 2px 10px 0 rgb(27 47 73 / 30%);
|
1811 |
+
border-radius: 5px;
|
1812 |
+
pointer-events: auto;
|
1813 |
+
top: 0;
|
1814 |
+
left: 50%;
|
1815 |
+
transform: translateX(-50%);
|
1816 |
+
}
|
1817 |
+
|
1818 |
+
.flipbook-note-display .note-content {
|
1819 |
+
height: 76px;
|
1820 |
+
position: absolute;
|
1821 |
+
width: 210px;
|
1822 |
+
margin: 11px 15px 5px 15px;
|
1823 |
+
overflow: hidden;
|
1824 |
+
}
|
1825 |
+
|
1826 |
+
.flipbook-note-display .note-article {
|
1827 |
+
font-family: inherit;
|
1828 |
+
resize: none;
|
1829 |
+
font-size: 14px;
|
1830 |
+
width: 200px;
|
1831 |
+
height: 76px;
|
1832 |
+
position: absolute;
|
1833 |
+
left: 0;
|
1834 |
+
top: 0;
|
1835 |
+
border-width: 1px;
|
1836 |
+
border-style: solid;
|
1837 |
+
padding: 0;
|
1838 |
+
color: rgb(89, 97, 104);
|
1839 |
+
border-color: transparent;
|
1840 |
+
background-color: transparent;
|
1841 |
+
outline: none !important;
|
1842 |
+
}
|
1843 |
+
|
1844 |
+
.flipbook-note-display .note-article:focus {
|
1845 |
+
box-shadow: none;
|
1846 |
+
}
|
1847 |
+
|
1848 |
+
.flipbook-note-display .note-delete-button .svg-icon {
|
1849 |
+
width: 22px;
|
1850 |
+
height: 22px;
|
1851 |
+
fill: #a6aaad;
|
1852 |
+
}
|
1853 |
+
|
1854 |
+
.flipbook-note-display .note-button {
|
1855 |
+
float: right;
|
1856 |
+
font-size: 22px;
|
1857 |
+
line-height: 22px;
|
1858 |
+
height: 22px;
|
1859 |
+
color: #8d8d8d;
|
1860 |
+
cursor: pointer;
|
1861 |
+
text-align: center;
|
1862 |
+
margin: 5px 11px;
|
1863 |
+
}
|
1864 |
+
|
1865 |
+
.flipbook-note-display .note-footer {
|
1866 |
+
height: 37px;
|
1867 |
+
width: 100%;
|
1868 |
+
margin: 0;
|
1869 |
+
bottom: 0;
|
1870 |
+
position: absolute;
|
1871 |
+
}
|
1872 |
+
|
1873 |
+
.flipbook-page-note {
|
1874 |
+
pointer-events: auto;
|
1875 |
+
cursor: pointer;
|
1876 |
+
}
|
1877 |
+
|
1878 |
+
.annotationLayer .linkAnnotation > a:hover,
|
1879 |
+
.annotationLayer .buttonWidgetAnnotation.pushButton > a:hover,
|
1880 |
+
.flipbook-page-item-link:hover {
|
1881 |
+
background: var(--flipbook-link-color-hover) !important;
|
1882 |
+
color: transparent !important;
|
1883 |
+
}
|
1884 |
+
|
1885 |
+
.flipbook-page-auto-link:hover {
|
1886 |
+
background: var(--flipbook-link-color-hover) !important;
|
1887 |
+
color: transparent !important;
|
1888 |
+
}
|
1889 |
+
|
1890 |
+
.flipbook-note-display {
|
1891 |
+
opacity: 1;
|
1892 |
+
}
|
1893 |
+
|
1894 |
+
.flipbook-spotlight-overlay {
|
1895 |
+
position: absolute;
|
1896 |
+
top: 0;
|
1897 |
+
left: 0;
|
1898 |
+
width: 100%;
|
1899 |
+
height: 100%;
|
1900 |
+
background-color: rgb(0, 0, 0, 0.88);
|
1901 |
+
display: flex;
|
1902 |
+
justify-content: center;
|
1903 |
+
align-items: center;
|
1904 |
+
flex-direction: column;
|
1905 |
+
z-index: 10002;
|
1906 |
+
}
|
1907 |
+
|
1908 |
+
.flipbook-spotlight-overlay img {
|
1909 |
+
max-width: 80%;
|
1910 |
+
max-height: 80%;
|
1911 |
+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
|
1912 |
+
}
|
1913 |
+
|
1914 |
+
.flipbook-spotlight-close-button {
|
1915 |
+
position: absolute;
|
1916 |
+
top: 10px;
|
1917 |
+
right: 10px;
|
1918 |
+
background: rgba(0, 0, 0, 0.8);
|
1919 |
+
border-radius: 2px;
|
1920 |
+
border: none;
|
1921 |
+
cursor: pointer;
|
1922 |
+
padding: 0;
|
1923 |
+
width: 24px;
|
1924 |
+
height: 24px;
|
1925 |
+
z-index: 1;
|
1926 |
+
}
|
1927 |
+
|
1928 |
+
.flipbook-spotlight-close-button:hover {
|
1929 |
+
opacity: 0.7;
|
1930 |
+
}
|
1931 |
+
|
1932 |
+
.flipbook-spotlight-caption-container {
|
1933 |
+
color: white;
|
1934 |
+
text-align: center;
|
1935 |
+
font-size: 16px;
|
1936 |
+
line-height: 1.6;
|
1937 |
+
padding: 15px;
|
1938 |
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
1939 |
+
margin-top: 10px;
|
1940 |
+
}
|
1941 |
+
|
1942 |
+
.flipbook-spotlight-title {
|
1943 |
+
font-weight: bold;
|
1944 |
+
font-size: 18px;
|
1945 |
+
margin-bottom: 5px;
|
1946 |
+
}
|
1947 |
+
|
1948 |
+
.flipbook-spotlight-description {
|
1949 |
+
font-size: 14px;
|
1950 |
+
font-weight: normal;
|
1951 |
+
}
|
1952 |
+
|
1953 |
+
.flipbook-page-html {
|
1954 |
+
position: absolute;
|
1955 |
+
top: 0;
|
1956 |
+
left: 0;
|
1957 |
+
bottom: 0;
|
1958 |
+
width: 100%;
|
1959 |
+
}
|
1960 |
+
|
1961 |
+
.flipbook-page-html .htmlContent {
|
1962 |
+
position: absolute;
|
1963 |
+
height: 100%;
|
1964 |
+
width: 100%;
|
1965 |
+
z-index: 4;
|
1966 |
+
pointer-events: none;
|
1967 |
+
}
|
1968 |
+
|
1969 |
+
.flipbook-page-html .htmlContent * {
|
1970 |
+
pointer-events: auto;
|
1971 |
+
}
|
1972 |
+
|
1973 |
+
.flipbook-page3-inner[data-visible='false'] .htmlContent * {
|
1974 |
+
pointer-events: none !important;
|
1975 |
+
}
|
1976 |
+
|
1977 |
+
.flipbook-page-html .textLayer {
|
1978 |
+
position: absolute;
|
1979 |
+
text-align: initial;
|
1980 |
+
inset: 0;
|
1981 |
+
overflow: hidden;
|
1982 |
+
opacity: 0.25;
|
1983 |
+
line-height: 1;
|
1984 |
+
-webkit-text-size-adjust: none;
|
1985 |
+
-moz-text-size-adjust: none;
|
1986 |
+
text-size-adjust: none;
|
1987 |
+
forced-color-adjust: none;
|
1988 |
+
transform-origin: 0 0;
|
1989 |
+
z-index: 2;
|
1990 |
+
font-weight: initial;
|
1991 |
+
}
|
1992 |
+
|
1993 |
+
.flipbook-page-html .textLayer :is(span, br) {
|
1994 |
+
color: transparent !important;
|
1995 |
+
position: absolute;
|
1996 |
+
white-space: pre;
|
1997 |
+
cursor: text;
|
1998 |
+
transform-origin: 0% 0%;
|
1999 |
+
}
|
2000 |
+
|
2001 |
+
/* Only necessary in Google Chrome, see issue 14205, and most unfortunately
|
2002 |
+
* the problem doesn't show up in "text" reference tests. */
|
2003 |
+
.flipbook-page-html .textLayer span.markedContent {
|
2004 |
+
top: 0;
|
2005 |
+
height: 0;
|
2006 |
+
}
|
2007 |
+
|
2008 |
+
.flipbook-page-html .textLayer .highlight {
|
2009 |
+
margin: -1px;
|
2010 |
+
padding: 1px;
|
2011 |
+
background-color: var(--highlight-bg-color);
|
2012 |
+
border-radius: 4px;
|
2013 |
+
}
|
2014 |
+
|
2015 |
+
.flipbook-page-html .textLayer .highlight.appended {
|
2016 |
+
position: initial;
|
2017 |
+
}
|
2018 |
+
|
2019 |
+
.flipbook-page-html .textLayer .highlight.begin {
|
2020 |
+
border-radius: 4px 0 0 4px;
|
2021 |
+
}
|
2022 |
+
|
2023 |
+
.flipbook-page-html .textLayer .highlight.end {
|
2024 |
+
border-radius: 0 4px 4px 0;
|
2025 |
+
}
|
2026 |
+
|
2027 |
+
.flipbook-page-html .textLayer .highlight.middle {
|
2028 |
+
border-radius: 0;
|
2029 |
+
}
|
2030 |
+
|
2031 |
+
.flipbook-page-html .textLayer .highlight.selected {
|
2032 |
+
background-color: var(--highlight-selected-bg-color);
|
2033 |
+
}
|
2034 |
+
|
2035 |
+
.flipbook-page-html .textLayer ::-moz-selection {
|
2036 |
+
background: blue;
|
2037 |
+
background: AccentColor; /* stylelint-disable-line declaration-block-no-duplicate-properties */
|
2038 |
+
}
|
2039 |
+
|
2040 |
+
.flipbook-page-html .textLayer ::selection {
|
2041 |
+
background: blue;
|
2042 |
+
background: AccentColor; /* stylelint-disable-line declaration-block-no-duplicate-properties */
|
2043 |
+
}
|
2044 |
+
|
2045 |
+
/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
|
2046 |
+
.flipbook-page-html .textLayer br::-moz-selection {
|
2047 |
+
background: transparent;
|
2048 |
+
}
|
2049 |
+
.flipbook-page-html .textLayer br::selection {
|
2050 |
+
background: transparent;
|
2051 |
+
}
|
2052 |
+
|
2053 |
+
.flipbook-page-html .textLayer .endOfContent {
|
2054 |
+
display: block;
|
2055 |
+
position: absolute;
|
2056 |
+
inset: 100% 0 0;
|
2057 |
+
z-index: -1;
|
2058 |
+
cursor: default;
|
2059 |
+
-webkit-user-select: none;
|
2060 |
+
-moz-user-select: none;
|
2061 |
+
user-select: none;
|
2062 |
+
}
|
2063 |
+
|
2064 |
+
.flipbook-page-html .textLayer .endOfContent.active {
|
2065 |
+
top: 0;
|
2066 |
+
}
|
2067 |
+
|
2068 |
+
:root {
|
2069 |
+
--annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
|
2070 |
+
--input-focus-border-color: Highlight;
|
2071 |
+
--input-focus-outline: 1px solid Canvas;
|
2072 |
+
--input-unfocused-border-color: transparent;
|
2073 |
+
--input-disabled-border-color: transparent;
|
2074 |
+
--input-hover-border-color: black;
|
2075 |
+
--link-outline: none;
|
2076 |
+
}
|
2077 |
+
|
2078 |
+
@media screen and (forced-colors: active) {
|
2079 |
+
:root {
|
2080 |
+
--input-focus-border-color: CanvasText;
|
2081 |
+
--input-unfocused-border-color: ActiveText;
|
2082 |
+
--input-disabled-border-color: GrayText;
|
2083 |
+
--input-hover-border-color: Highlight;
|
2084 |
+
--link-outline: 1.5px solid LinkText;
|
2085 |
+
--hcm-highligh-filter: invert(100%);
|
2086 |
+
}
|
2087 |
+
.annotationLayer .textWidgetAnnotation :is(input, textarea):required,
|
2088 |
+
.annotationLayer .choiceWidgetAnnotation select:required,
|
2089 |
+
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
|
2090 |
+
outline: 1.5px solid selectedItem;
|
2091 |
+
}
|
2092 |
+
|
2093 |
+
.annotationLayer .linkAnnotation:hover {
|
2094 |
+
-webkit-backdrop-filter: var(--hcm-highligh-filter);
|
2095 |
+
backdrop-filter: var(--hcm-highligh-filter);
|
2096 |
+
}
|
2097 |
+
|
2098 |
+
.annotationLayer .linkAnnotation > a:hover {
|
2099 |
+
opacity: 0 !important;
|
2100 |
+
background: none !important;
|
2101 |
+
box-shadow: none;
|
2102 |
+
}
|
2103 |
+
|
2104 |
+
.annotationLayer .popupAnnotation .popup {
|
2105 |
+
outline: calc(1.5px * var(--scale-factor)) solid CanvasText !important;
|
2106 |
+
background-color: ButtonFace !important;
|
2107 |
+
color: ButtonText !important;
|
2108 |
+
}
|
2109 |
+
|
2110 |
+
.annotationLayer .highlightArea:hover::after {
|
2111 |
+
position: absolute;
|
2112 |
+
top: 0;
|
2113 |
+
left: 0;
|
2114 |
+
width: 100%;
|
2115 |
+
height: 100%;
|
2116 |
+
-webkit-backdrop-filter: var(--hcm-highligh-filter);
|
2117 |
+
backdrop-filter: var(--hcm-highligh-filter);
|
2118 |
+
content: '';
|
2119 |
+
pointer-events: none;
|
2120 |
+
}
|
2121 |
+
|
2122 |
+
.annotationLayer .popupAnnotation.focused .popup {
|
2123 |
+
outline: calc(3px * var(--scale-factor)) solid Highlight !important;
|
2124 |
+
}
|
2125 |
+
}
|
2126 |
+
|
2127 |
+
.annotationLayer {
|
2128 |
+
position: absolute;
|
2129 |
+
top: 0;
|
2130 |
+
left: 0;
|
2131 |
+
pointer-events: none;
|
2132 |
+
transform-origin: 0 0;
|
2133 |
+
z-index: 3;
|
2134 |
+
}
|
2135 |
+
|
2136 |
+
.annotationLayer[data-main-rotation='90'] .norotate {
|
2137 |
+
transform: rotate(270deg) translateX(-100%);
|
2138 |
+
}
|
2139 |
+
.annotationLayer[data-main-rotation='180'] .norotate {
|
2140 |
+
transform: rotate(180deg) translate(-100%, -100%);
|
2141 |
+
}
|
2142 |
+
.annotationLayer[data-main-rotation='270'] .norotate {
|
2143 |
+
transform: rotate(90deg) translateY(-100%);
|
2144 |
+
}
|
2145 |
+
|
2146 |
+
.annotationLayer canvas {
|
2147 |
+
position: absolute;
|
2148 |
+
width: 100%;
|
2149 |
+
height: 100%;
|
2150 |
+
pointer-events: none;
|
2151 |
+
}
|
2152 |
+
|
2153 |
+
.annotationLayer section {
|
2154 |
+
position: absolute;
|
2155 |
+
text-align: initial;
|
2156 |
+
pointer-events: auto;
|
2157 |
+
box-sizing: border-box;
|
2158 |
+
transform-origin: 0 0;
|
2159 |
+
}
|
2160 |
+
|
2161 |
+
.annotationLayer .linkAnnotation {
|
2162 |
+
outline: var(--link-outline);
|
2163 |
+
}
|
2164 |
+
|
2165 |
+
.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
|
2166 |
+
position: absolute;
|
2167 |
+
font-size: 1em;
|
2168 |
+
top: 0;
|
2169 |
+
left: 0;
|
2170 |
+
width: 100%;
|
2171 |
+
height: 100%;
|
2172 |
+
}
|
2173 |
+
|
2174 |
+
.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder) > a:hover {
|
2175 |
+
/* opacity: 0.2;
|
2176 |
+
background-color: rgba(255, 255, 0, 1);
|
2177 |
+
box-shadow: 0 2px 10px rgba(255, 255, 0, 1); */
|
2178 |
+
}
|
2179 |
+
|
2180 |
+
.annotationLayer .linkAnnotation.hasBorder:hover {
|
2181 |
+
background-color: rgba(255, 255, 0, 0.2);
|
2182 |
+
}
|
2183 |
+
|
2184 |
+
.annotationLayer .hasBorder {
|
2185 |
+
background-size: 100% 100%;
|
2186 |
+
}
|
2187 |
+
|
2188 |
+
.annotationLayer .textAnnotation img {
|
2189 |
+
position: absolute;
|
2190 |
+
cursor: pointer;
|
2191 |
+
width: 100%;
|
2192 |
+
height: 100%;
|
2193 |
+
top: 0;
|
2194 |
+
left: 0;
|
2195 |
+
}
|
2196 |
+
|
2197 |
+
.annotationLayer .textWidgetAnnotation :is(input, textarea),
|
2198 |
+
.annotationLayer .choiceWidgetAnnotation select,
|
2199 |
+
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
|
2200 |
+
background-image: var(--annotation-unfocused-field-background);
|
2201 |
+
border: 2px solid var(--input-unfocused-border-color);
|
2202 |
+
box-sizing: border-box;
|
2203 |
+
font: calc(9px * var(--scale-factor)) sans-serif;
|
2204 |
+
height: 100%;
|
2205 |
+
margin: 0;
|
2206 |
+
vertical-align: top;
|
2207 |
+
width: 100%;
|
2208 |
+
}
|
2209 |
+
|
2210 |
+
.annotationLayer .textWidgetAnnotation :is(input, textarea):required,
|
2211 |
+
.annotationLayer .choiceWidgetAnnotation select:required,
|
2212 |
+
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
|
2213 |
+
outline: 1.5px solid red;
|
2214 |
+
}
|
2215 |
+
|
2216 |
+
.annotationLayer .choiceWidgetAnnotation select option {
|
2217 |
+
padding: 0;
|
2218 |
+
}
|
2219 |
+
|
2220 |
+
.annotationLayer .buttonWidgetAnnotation.radioButton input {
|
2221 |
+
border-radius: 50%;
|
2222 |
+
}
|
2223 |
+
|
2224 |
+
.annotationLayer .textWidgetAnnotation textarea {
|
2225 |
+
resize: none;
|
2226 |
+
}
|
2227 |
+
|
2228 |
+
.annotationLayer .textWidgetAnnotation :is(input, textarea)[disabled],
|
2229 |
+
.annotationLayer .choiceWidgetAnnotation select[disabled],
|
2230 |
+
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled] {
|
2231 |
+
background: none;
|
2232 |
+
border: 2px solid var(--input-disabled-border-color);
|
2233 |
+
cursor: not-allowed;
|
2234 |
+
}
|
2235 |
+
|
2236 |
+
.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
|
2237 |
+
.annotationLayer .choiceWidgetAnnotation select:hover,
|
2238 |
+
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover {
|
2239 |
+
border: 2px solid var(--input-hover-border-color);
|
2240 |
+
}
|
2241 |
+
.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
|
2242 |
+
.annotationLayer .choiceWidgetAnnotation select:hover,
|
2243 |
+
.annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
|
2244 |
+
border-radius: 2px;
|
2245 |
+
}
|
2246 |
+
|
2247 |
+
.annotationLayer .textWidgetAnnotation :is(input, textarea):focus,
|
2248 |
+
.annotationLayer .choiceWidgetAnnotation select:focus {
|
2249 |
+
background: none;
|
2250 |
+
border: 2px solid var(--input-focus-border-color);
|
2251 |
+
border-radius: 2px;
|
2252 |
+
outline: var(--input-focus-outline);
|
2253 |
+
}
|
2254 |
+
|
2255 |
+
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus {
|
2256 |
+
background-image: none;
|
2257 |
+
background-color: transparent;
|
2258 |
+
}
|
2259 |
+
|
2260 |
+
.annotationLayer .buttonWidgetAnnotation.checkBox :focus {
|
2261 |
+
border: 2px solid var(--input-focus-border-color);
|
2262 |
+
border-radius: 2px;
|
2263 |
+
outline: var(--input-focus-outline);
|
2264 |
+
}
|
2265 |
+
|
2266 |
+
.annotationLayer .buttonWidgetAnnotation.radioButton :focus {
|
2267 |
+
border: 2px solid var(--input-focus-border-color);
|
2268 |
+
outline: var(--input-focus-outline);
|
2269 |
+
}
|
2270 |
+
|
2271 |
+
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
|
2272 |
+
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
|
2273 |
+
.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
|
2274 |
+
background-color: CanvasText;
|
2275 |
+
content: '';
|
2276 |
+
display: block;
|
2277 |
+
position: absolute;
|
2278 |
+
}
|
2279 |
+
|
2280 |
+
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
|
2281 |
+
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
|
2282 |
+
height: 80%;
|
2283 |
+
left: 45%;
|
2284 |
+
width: 1px;
|
2285 |
+
}
|
2286 |
+
|
2287 |
+
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before {
|
2288 |
+
transform: rotate(45deg);
|
2289 |
+
}
|
2290 |
+
|
2291 |
+
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
|
2292 |
+
transform: rotate(-45deg);
|
2293 |
+
}
|
2294 |
+
|
2295 |
+
.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
|
2296 |
+
border-radius: 50%;
|
2297 |
+
height: 50%;
|
2298 |
+
left: 30%;
|
2299 |
+
top: 20%;
|
2300 |
+
width: 50%;
|
2301 |
+
}
|
2302 |
+
|
2303 |
+
.annotationLayer .textWidgetAnnotation input.comb {
|
2304 |
+
font-family: monospace;
|
2305 |
+
padding-left: 2px;
|
2306 |
+
padding-right: 0;
|
2307 |
+
}
|
2308 |
+
|
2309 |
+
.annotationLayer .textWidgetAnnotation input.comb:focus {
|
2310 |
+
/*
|
2311 |
+
* Letter spacing is placed on the right side of each character. Hence, the
|
2312 |
+
* letter spacing of the last character may be placed outside the visible
|
2313 |
+
* area, causing horizontal scrolling. We avoid this by extending the width
|
2314 |
+
* when the element has focus and revert this when it loses focus.
|
2315 |
+
*/
|
2316 |
+
width: 103%;
|
2317 |
+
}
|
2318 |
+
|
2319 |
+
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
|
2320 |
+
-webkit-appearance: none;
|
2321 |
+
-moz-appearance: none;
|
2322 |
+
appearance: none;
|
2323 |
+
}
|
2324 |
+
|
2325 |
+
.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
|
2326 |
+
height: 100%;
|
2327 |
+
width: 100%;
|
2328 |
+
}
|
2329 |
+
|
2330 |
+
.annotationLayer .popupAnnotation {
|
2331 |
+
position: absolute;
|
2332 |
+
font-size: calc(9px * var(--scale-factor));
|
2333 |
+
pointer-events: none;
|
2334 |
+
width: -moz-max-content;
|
2335 |
+
width: max-content;
|
2336 |
+
max-width: 45%;
|
2337 |
+
height: auto;
|
2338 |
+
}
|
2339 |
+
|
2340 |
+
.annotationLayer .popup {
|
2341 |
+
background-color: rgba(255, 255, 153, 1);
|
2342 |
+
box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) rgba(136, 136, 136, 1);
|
2343 |
+
border-radius: calc(2px * var(--scale-factor));
|
2344 |
+
outline: 1.5px solid rgb(255, 255, 74);
|
2345 |
+
padding: calc(6px * var(--scale-factor));
|
2346 |
+
cursor: pointer;
|
2347 |
+
font: message-box;
|
2348 |
+
white-space: normal;
|
2349 |
+
word-wrap: break-word;
|
2350 |
+
pointer-events: auto;
|
2351 |
+
}
|
2352 |
+
|
2353 |
+
.annotationLayer .popupAnnotation.focused .popup {
|
2354 |
+
outline-width: 3px;
|
2355 |
+
}
|
2356 |
+
|
2357 |
+
.annotationLayer .popup * {
|
2358 |
+
font-size: calc(9px * var(--scale-factor));
|
2359 |
+
}
|
2360 |
+
|
2361 |
+
.annotationLayer .popup > .header {
|
2362 |
+
display: inline-block;
|
2363 |
+
}
|
2364 |
+
|
2365 |
+
.annotationLayer .popup > .header h1 {
|
2366 |
+
display: inline;
|
2367 |
+
}
|
2368 |
+
|
2369 |
+
.annotationLayer .popup > .header .popupDate {
|
2370 |
+
display: inline-block;
|
2371 |
+
margin-left: calc(5px * var(--scale-factor));
|
2372 |
+
width: -moz-fit-content;
|
2373 |
+
width: fit-content;
|
2374 |
+
}
|
2375 |
+
|
2376 |
+
.annotationLayer .popupContent {
|
2377 |
+
border-top: 1px solid rgba(51, 51, 51, 1);
|
2378 |
+
margin-top: calc(2px * var(--scale-factor));
|
2379 |
+
padding-top: calc(2px * var(--scale-factor));
|
2380 |
+
}
|
2381 |
+
|
2382 |
+
.annotationLayer .richText > * {
|
2383 |
+
white-space: pre-wrap;
|
2384 |
+
font-size: calc(9px * var(--scale-factor));
|
2385 |
+
}
|
2386 |
+
|
2387 |
+
.annotationLayer .popupTriggerArea {
|
2388 |
+
cursor: pointer;
|
2389 |
+
}
|
2390 |
+
|
2391 |
+
.annotationLayer section svg {
|
2392 |
+
position: absolute;
|
2393 |
+
width: 100%;
|
2394 |
+
height: 100%;
|
2395 |
+
top: 0;
|
2396 |
+
left: 0;
|
2397 |
+
}
|
2398 |
+
|
2399 |
+
.annotationLayer .annotationTextContent {
|
2400 |
+
position: absolute;
|
2401 |
+
width: 100%;
|
2402 |
+
height: 100%;
|
2403 |
+
opacity: 0;
|
2404 |
+
color: transparent !important;
|
2405 |
+
-webkit-user-select: none;
|
2406 |
+
-moz-user-select: none;
|
2407 |
+
user-select: none;
|
2408 |
+
pointer-events: none;
|
2409 |
+
}
|
2410 |
+
|
2411 |
+
.annotationLayer .annotationTextContent span {
|
2412 |
+
width: 100%;
|
2413 |
+
display: inline-block;
|
2414 |
+
}
|
2415 |
+
|
2416 |
+
.annotationLayer svg.quadrilateralsContainer {
|
2417 |
+
contain: strict;
|
2418 |
+
width: 0;
|
2419 |
+
height: 0;
|
2420 |
+
position: absolute;
|
2421 |
+
top: 0;
|
2422 |
+
left: 0;
|
2423 |
+
z-index: -1;
|
2424 |
+
}
|
2425 |
+
|
2426 |
+
/* print.js https://github.com/crabbly/Print.js/releases/tag/v1.5.0 */
|
2427 |
+
.printModal {
|
2428 |
+
font-family: sans-serif;
|
2429 |
+
display: flex;
|
2430 |
+
text-align: center;
|
2431 |
+
font-weight: 300;
|
2432 |
+
font-size: 30px;
|
2433 |
+
left: 0;
|
2434 |
+
top: 0;
|
2435 |
+
position: absolute;
|
2436 |
+
color: #045fb4;
|
2437 |
+
width: 100%;
|
2438 |
+
height: 100%;
|
2439 |
+
background-color: hsla(0, 0%, 100%, 0.9);
|
2440 |
+
}
|
2441 |
+
|
2442 |
+
.printClose {
|
2443 |
+
position: absolute;
|
2444 |
+
right: 10px;
|
2445 |
+
top: 10px;
|
2446 |
+
}
|
2447 |
+
|
2448 |
+
.printClose:before {
|
2449 |
+
content: '\00D7';
|
2450 |
+
font-family:
|
2451 |
+
Helvetica Neue,
|
2452 |
+
sans-serif;
|
2453 |
+
font-weight: 100;
|
2454 |
+
line-height: 1px;
|
2455 |
+
padding-top: 0.5em;
|
2456 |
+
display: block;
|
2457 |
+
font-size: 2em;
|
2458 |
+
text-indent: 1px;
|
2459 |
+
overflow: hidden;
|
2460 |
+
height: 1.25em;
|
2461 |
+
width: 1.25em;
|
2462 |
+
text-align: center;
|
2463 |
+
cursor: pointer;
|
2464 |
+
}
|
2465 |
+
|
2466 |
+
.printSpinner {
|
2467 |
+
margin-top: 3px;
|
2468 |
+
margin-left: -40px;
|
2469 |
+
position: absolute;
|
2470 |
+
display: inline-block;
|
2471 |
+
width: 25px;
|
2472 |
+
height: 25px;
|
2473 |
+
border: 2px solid #045fb4;
|
2474 |
+
border-radius: 50%;
|
2475 |
+
animation: spin 0.75s linear infinite;
|
2476 |
+
}
|
2477 |
+
|
2478 |
+
.printSpinner:after,
|
2479 |
+
.printSpinner:before {
|
2480 |
+
left: -2px;
|
2481 |
+
top: -2px;
|
2482 |
+
display: none;
|
2483 |
+
position: absolute;
|
2484 |
+
content: '';
|
2485 |
+
width: inherit;
|
2486 |
+
height: inherit;
|
2487 |
+
border: inherit;
|
2488 |
+
border-radius: inherit;
|
2489 |
+
}
|
2490 |
+
|
2491 |
+
.printSpinner,
|
2492 |
+
.printSpinner:after,
|
2493 |
+
.printSpinner:before {
|
2494 |
+
display: inline-block;
|
2495 |
+
border-color: #045fb4 transparent transparent;
|
2496 |
+
animation-duration: 1.2s;
|
2497 |
+
}
|
2498 |
+
|
2499 |
+
.printSpinner:before {
|
2500 |
+
transform: rotate(120deg);
|
2501 |
+
}
|
2502 |
+
|
2503 |
+
.printSpinner:after {
|
2504 |
+
transform: rotate(240deg);
|
2505 |
+
}
|
2506 |
+
|
2507 |
+
@keyframes spin {
|
2508 |
+
0% {
|
2509 |
+
transform: rotate(0deg);
|
2510 |
+
}
|
2511 |
+
|
2512 |
+
to {
|
2513 |
+
transform: rotate(1turn);
|
2514 |
+
}
|
2515 |
+
}
|
flipbook.js
ADDED
The diff for this file is too large to render.
See raw diff
|
|
flipbook.scroll.js
ADDED
@@ -0,0 +1,539 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/*
|
2 |
+
* Real3D FlipBook [https://real3dflipbook.com]
|
3 |
+
* @author creativeinteractivemedia [https://codecanyon.net/user/creativeinteractivemedia/portfolio]
|
4 |
+
* @version 4.10
|
5 |
+
* @date 2025-05-15
|
6 |
+
*/
|
7 |
+
'use strict';
|
8 |
+
var FLIPBOOK = FLIPBOOK || {};
|
9 |
+
|
10 |
+
FLIPBOOK.BookScroll = function (el, wrapper, main, options) {
|
11 |
+
this.options = options;
|
12 |
+
this.main = main;
|
13 |
+
this.singlePage = options.singlePageMode;
|
14 |
+
if (this.singlePage) {
|
15 |
+
this.view = 1;
|
16 |
+
}
|
17 |
+
this.view = 1;
|
18 |
+
|
19 |
+
this.pageWidth = options.pageWidth;
|
20 |
+
this.pageHeight = options.pageHeight;
|
21 |
+
this.rightIndex = 0;
|
22 |
+
|
23 |
+
this.pageGap = 16;
|
24 |
+
|
25 |
+
this.slides = [];
|
26 |
+
this.pagesArr = [];
|
27 |
+
this.leftPage = 0;
|
28 |
+
this.rightPage = 0;
|
29 |
+
this.rotation = 0;
|
30 |
+
|
31 |
+
this.verticalScroller = el;
|
32 |
+
|
33 |
+
this.verticalScroller.style.width = this.pageWidth + 'px';
|
34 |
+
|
35 |
+
options.pageGap = this.pageGap;
|
36 |
+
|
37 |
+
for (let i = 0; i < options.numPages; i++) {
|
38 |
+
const page = new FLIPBOOK.PageScroll(this, wrapper, main, options, i);
|
39 |
+
this.verticalScroller.appendChild(page.wrapper);
|
40 |
+
page.initObserver();
|
41 |
+
this.pagesArr.push(page);
|
42 |
+
}
|
43 |
+
|
44 |
+
//make new div that has width equal to page width, height equal to page height * number of pages
|
45 |
+
|
46 |
+
this.prevPageEnabled = false;
|
47 |
+
|
48 |
+
this.setRightIndex(0);
|
49 |
+
this.currentSlide = 0;
|
50 |
+
this.flipping = false;
|
51 |
+
|
52 |
+
this.wrapper = wrapper;
|
53 |
+
|
54 |
+
this.verticalScroller.classList.remove('book');
|
55 |
+
this.verticalScroller.style.paddingTop = this.pageGap / 2 + 'px';
|
56 |
+
this.verticalScroller.style.paddingBottom = this.pageGap / 2 + 'px';
|
57 |
+
this.iscroll = new IScroll(this.wrapper, {
|
58 |
+
freeScroll: true,
|
59 |
+
mouseWheel: true,
|
60 |
+
scrollbars: true,
|
61 |
+
interactiveScrollbars: true,
|
62 |
+
zoom: true,
|
63 |
+
scrollX: true,
|
64 |
+
scrollY: true,
|
65 |
+
keepInCenterV: true,
|
66 |
+
keepInCenterH: true,
|
67 |
+
preventDefault: false,
|
68 |
+
zoomMin: 0.01,
|
69 |
+
zoomMax: 10,
|
70 |
+
mouseWheelTimeout: 100,
|
71 |
+
disablePointer: false,
|
72 |
+
disableTouch: false,
|
73 |
+
disableMouse: false,
|
74 |
+
momentum: true,
|
75 |
+
});
|
76 |
+
|
77 |
+
this.main.on('disableIScroll', () => {
|
78 |
+
this.disableIscroll();
|
79 |
+
});
|
80 |
+
this.main.on('enableIScroll', () => {
|
81 |
+
this.enableIscroll();
|
82 |
+
});
|
83 |
+
|
84 |
+
var self = this;
|
85 |
+
|
86 |
+
this.iscroll.on('scrollStart', function () {
|
87 |
+
self.scrolling = true;
|
88 |
+
});
|
89 |
+
|
90 |
+
this.iscroll.on('zoomEnd', function () {
|
91 |
+
self.updateRightIndex();
|
92 |
+
});
|
93 |
+
|
94 |
+
this.iscroll.on('scrollEnd', function () {
|
95 |
+
self.updateRightIndex();
|
96 |
+
self.scrolling = false;
|
97 |
+
self.pagesArr.forEach((page) => {
|
98 |
+
if (page.visibility > 0) {
|
99 |
+
page.load();
|
100 |
+
}
|
101 |
+
});
|
102 |
+
});
|
103 |
+
|
104 |
+
this.zoomDisabled = false;
|
105 |
+
|
106 |
+
main.on('pageLoaded', function (_) {});
|
107 |
+
};
|
108 |
+
|
109 |
+
FLIPBOOK.BookScroll.prototype = Object.create(FLIPBOOK.Book.prototype);
|
110 |
+
|
111 |
+
FLIPBOOK.BookScroll.prototype.constructor = FLIPBOOK.BookScroll;
|
112 |
+
|
113 |
+
FLIPBOOK.BookScroll.prototype.enableIscroll = function () {
|
114 |
+
if (this.iscrollDisabled) {
|
115 |
+
this.iscroll.enable();
|
116 |
+
this.iscrollDisabled = false;
|
117 |
+
}
|
118 |
+
};
|
119 |
+
|
120 |
+
FLIPBOOK.BookScroll.prototype.disableIscroll = function () {
|
121 |
+
if (!this.iscrollDisabled) {
|
122 |
+
this.iscroll.disable();
|
123 |
+
this.iscroll.initiated = false;
|
124 |
+
this.iscrollDisabled = true;
|
125 |
+
}
|
126 |
+
};
|
127 |
+
|
128 |
+
FLIPBOOK.BookScroll.prototype.goToPage = function (value, instant) {
|
129 |
+
if (!this.enabled) {
|
130 |
+
return;
|
131 |
+
}
|
132 |
+
|
133 |
+
if (value > this.options.pages.length) {
|
134 |
+
value = this.options.pages.length;
|
135 |
+
}
|
136 |
+
|
137 |
+
if (this.singlePage || value % 2 != 0) {
|
138 |
+
value--;
|
139 |
+
}
|
140 |
+
|
141 |
+
if (value == this.rightIndex) {
|
142 |
+
return;
|
143 |
+
}
|
144 |
+
|
145 |
+
this.enableIscroll();
|
146 |
+
|
147 |
+
if (isNaN(value) || value < 0) {
|
148 |
+
value = 0;
|
149 |
+
}
|
150 |
+
|
151 |
+
let y = -value * (this.pageHeight + this.pageGap) * this.iscroll.scale;
|
152 |
+
|
153 |
+
let maxY = -(this.iscroll.scrollerHeight - this.main.wrapperH);
|
154 |
+
|
155 |
+
y = Math.max(y, maxY);
|
156 |
+
|
157 |
+
var duration = instant ? 0 : 600;
|
158 |
+
|
159 |
+
this.iscroll.scrollTo(0, y, duration);
|
160 |
+
|
161 |
+
this.setRightIndex(value);
|
162 |
+
this.main.turnPageComplete();
|
163 |
+
};
|
164 |
+
|
165 |
+
FLIPBOOK.BookScroll.prototype.setRightIndex = function (value) {
|
166 |
+
if (value != this.rightIndex) {
|
167 |
+
this.rightIndex = value;
|
168 |
+
this.main.turnPageComplete();
|
169 |
+
}
|
170 |
+
};
|
171 |
+
|
172 |
+
FLIPBOOK.BookScroll.prototype.nextPage = function (instant) {
|
173 |
+
this.goToPage(this.rightIndex + 2, instant);
|
174 |
+
};
|
175 |
+
|
176 |
+
FLIPBOOK.BookScroll.prototype.prevPage = function (instant) {
|
177 |
+
this.goToPage(this.rightIndex, instant);
|
178 |
+
};
|
179 |
+
|
180 |
+
FLIPBOOK.BookScroll.prototype.enablePrev = function (val) {
|
181 |
+
this.prevEnabled = val;
|
182 |
+
};
|
183 |
+
|
184 |
+
FLIPBOOK.BookScroll.prototype.enableNext = function (val) {
|
185 |
+
this.nextEnabled = val;
|
186 |
+
};
|
187 |
+
|
188 |
+
FLIPBOOK.BookScroll.prototype.isFocusedRight = function () {
|
189 |
+
return this.rightIndex % 2 == 0;
|
190 |
+
};
|
191 |
+
|
192 |
+
FLIPBOOK.BookScroll.prototype.isFocusedLeft = function () {
|
193 |
+
return this.rightIndex % 2 == 1;
|
194 |
+
};
|
195 |
+
|
196 |
+
FLIPBOOK.BookScroll.prototype.updateVisiblePages = function () {};
|
197 |
+
|
198 |
+
FLIPBOOK.BookScroll.prototype.disable = function () {
|
199 |
+
this.enabled = false;
|
200 |
+
};
|
201 |
+
|
202 |
+
FLIPBOOK.BookScroll.prototype.enable = function () {
|
203 |
+
this.enabled = true;
|
204 |
+
this.onResize();
|
205 |
+
};
|
206 |
+
|
207 |
+
FLIPBOOK.BookScroll.prototype.resize = function () {};
|
208 |
+
|
209 |
+
FLIPBOOK.BookScroll.prototype.onResize = function () {
|
210 |
+
var w = this.main.wrapperW;
|
211 |
+
var h = this.main.wrapperH;
|
212 |
+
|
213 |
+
if (w == 0 || h == 0 || (this.w === w && this.h === h)) {
|
214 |
+
return;
|
215 |
+
}
|
216 |
+
|
217 |
+
this.w = w;
|
218 |
+
this.h = h;
|
219 |
+
|
220 |
+
if (this.zoom) {
|
221 |
+
this.iscroll.refresh();
|
222 |
+
this.fit();
|
223 |
+
this.iscroll.scrollTo(0, this.iscroll.y, 0);
|
224 |
+
}
|
225 |
+
this.updateRightIndex();
|
226 |
+
};
|
227 |
+
|
228 |
+
FLIPBOOK.BookScroll.prototype.updateRightIndex = function () {
|
229 |
+
let maxVisibility = 0;
|
230 |
+
let currentIndex = 0;
|
231 |
+
this.pagesArr.forEach((page) => {
|
232 |
+
if (page.visibility > maxVisibility) {
|
233 |
+
maxVisibility = page.visibility;
|
234 |
+
currentIndex = page.index;
|
235 |
+
}
|
236 |
+
});
|
237 |
+
this.setRightIndex(currentIndex);
|
238 |
+
};
|
239 |
+
|
240 |
+
FLIPBOOK.BookScroll.prototype.zoomIn = function (value, time, e) {
|
241 |
+
if (e && e.type === 'mousewheel') {
|
242 |
+
return;
|
243 |
+
}
|
244 |
+
this.zoomTo(value);
|
245 |
+
};
|
246 |
+
|
247 |
+
FLIPBOOK.BookScroll.prototype.fitToHeight = function () {
|
248 |
+
this.iscroll.zoom((this.zoom * this.main.wrapperH) / this.pageHeight, 0, 0, 0);
|
249 |
+
};
|
250 |
+
|
251 |
+
FLIPBOOK.BookScroll.prototype.fitToWidth = function () {
|
252 |
+
this.iscroll.zoom((this.zoom * this.main.wrapperW) / this.pageWidth, 0, 0, 0);
|
253 |
+
};
|
254 |
+
|
255 |
+
FLIPBOOK.BookScroll.prototype.fit = function () {
|
256 |
+
if (this.options.fitToWidth) {
|
257 |
+
this.fitToWidth();
|
258 |
+
} else if (this.main.wrapperW / this.main.wrapperH < this.pageWidth / this.pageHeight) {
|
259 |
+
this.fitToWidth();
|
260 |
+
} else {
|
261 |
+
this.fitToHeight();
|
262 |
+
}
|
263 |
+
};
|
264 |
+
|
265 |
+
FLIPBOOK.BookScroll.prototype.zoomTo = function (zoom, time, x, y) {
|
266 |
+
if (!this.enabled || this.zoomDisabled) {
|
267 |
+
return;
|
268 |
+
}
|
269 |
+
var m = this.main;
|
270 |
+
var w = m.wrapperW;
|
271 |
+
var h = m.wrapperH;
|
272 |
+
|
273 |
+
if (w == 0 || h == 0) {
|
274 |
+
return;
|
275 |
+
}
|
276 |
+
|
277 |
+
this.zoom = zoom;
|
278 |
+
this.fit();
|
279 |
+
|
280 |
+
if (zoom > 1) {
|
281 |
+
this.disableFlip();
|
282 |
+
}
|
283 |
+
|
284 |
+
this.onZoom(zoom);
|
285 |
+
};
|
286 |
+
|
287 |
+
FLIPBOOK.BookScroll.prototype.zoomOut = function (value) {
|
288 |
+
this.zoomTo(value);
|
289 |
+
};
|
290 |
+
|
291 |
+
FLIPBOOK.BookScroll.prototype.onZoom = function (zoom) {
|
292 |
+
this.options.main.onZoom(zoom);
|
293 |
+
};
|
294 |
+
|
295 |
+
FLIPBOOK.BookScroll.prototype.enable = function () {
|
296 |
+
this.enabled = true;
|
297 |
+
};
|
298 |
+
|
299 |
+
FLIPBOOK.BookScroll.prototype.disable = function () {
|
300 |
+
this.enabled = false;
|
301 |
+
};
|
302 |
+
|
303 |
+
FLIPBOOK.BookScroll.prototype.onSwipe = function (event, phase, direction) {
|
304 |
+
if (phase == 'start') {
|
305 |
+
return;
|
306 |
+
}
|
307 |
+
if (phase == 'end' || phase == 'cancel') {
|
308 |
+
return;
|
309 |
+
}
|
310 |
+
if (direction == 'up' || direction == 'down') {
|
311 |
+
return;
|
312 |
+
}
|
313 |
+
};
|
314 |
+
|
315 |
+
FLIPBOOK.BookScroll.prototype.disableFlip = function () {};
|
316 |
+
|
317 |
+
FLIPBOOK.BookScroll.prototype.enableFlip = function () {};
|
318 |
+
|
319 |
+
FLIPBOOK.BookScroll.prototype.enablePan = function () {};
|
320 |
+
|
321 |
+
FLIPBOOK.BookScroll.prototype.disablePan = function () {};
|
322 |
+
|
323 |
+
FLIPBOOK.BookScroll.prototype.canFlipNext = function () {
|
324 |
+
return this.rightIndex + 1 < this.options.numPages;
|
325 |
+
};
|
326 |
+
|
327 |
+
FLIPBOOK.PageScroll = function (book, bookWrapper, main, options, index, texture, html) {
|
328 |
+
this.rotation = 0;
|
329 |
+
this.bookWrapper = bookWrapper;
|
330 |
+
this.index = index;
|
331 |
+
this.options = options;
|
332 |
+
this.texture = texture;
|
333 |
+
this.html = html;
|
334 |
+
this.index = index;
|
335 |
+
this.wrapper = document.createElement('div');
|
336 |
+
this.wrapper.className = 'flipbook-scroll-page';
|
337 |
+
this.wrapper.style.marginBottom = this.options.pageGap + 'px';
|
338 |
+
this.main = main;
|
339 |
+
this.book = book;
|
340 |
+
|
341 |
+
this.inner = document.createElement('div');
|
342 |
+
this.inner.className = 'flipbook-scroll-page-inner';
|
343 |
+
this.wrapper.appendChild(this.inner);
|
344 |
+
|
345 |
+
this.bg = document.createElement('div');
|
346 |
+
this.bg.className = 'flipbook-scroll-page-bg';
|
347 |
+
this.inner.appendChild(this.bg);
|
348 |
+
|
349 |
+
this.html = document.createElement('div');
|
350 |
+
this.html.className = 'flipbook-page3-html';
|
351 |
+
this.wrapper.appendChild(this.html);
|
352 |
+
this.html.style.width = (1000 * this.options.pageWidth) / this.options.pageHeight + 'px';
|
353 |
+
this.html.style.transform = 'scale(' + this.options.pageHeight / 1000 + ') translateZ(0)';
|
354 |
+
|
355 |
+
if (this.options.doublePage) {
|
356 |
+
if (this.index % 2 == 0 && this.index > 0) {
|
357 |
+
this.html.style.left = '-100%';
|
358 |
+
} else {
|
359 |
+
this.html.style.left = '0';
|
360 |
+
}
|
361 |
+
}
|
362 |
+
|
363 |
+
this.preloader = document.createElement('img');
|
364 |
+
|
365 |
+
if (options.pagePreloader) {
|
366 |
+
this.preloader.src = options.pagePreloader;
|
367 |
+
this.preloader.className = 'flipbook-page-preloader-image';
|
368 |
+
} else {
|
369 |
+
this.preloader.src = options.assets.spinner;
|
370 |
+
this.preloader.className = 'flipbook-page-preloader';
|
371 |
+
}
|
372 |
+
|
373 |
+
this.inner.appendChild(this.preloader);
|
374 |
+
|
375 |
+
this.setSize(this.pw, this.ph);
|
376 |
+
};
|
377 |
+
|
378 |
+
FLIPBOOK.PageScroll.prototype = {
|
379 |
+
initObserver: function () {
|
380 |
+
const observer = new IntersectionObserver(
|
381 |
+
(entries) => {
|
382 |
+
const entry = entries[0];
|
383 |
+
const visibility = entry.intersectionRatio;
|
384 |
+
|
385 |
+
if (visibility > 0) {
|
386 |
+
this.show(visibility);
|
387 |
+
} else {
|
388 |
+
this.hide();
|
389 |
+
}
|
390 |
+
},
|
391 |
+
{ root: this.bookWrapper, threshold: [0, 0.1, 0.5] }
|
392 |
+
);
|
393 |
+
observer.observe(this.wrapper);
|
394 |
+
},
|
395 |
+
|
396 |
+
show: function (visibility) {
|
397 |
+
this.visibility = visibility;
|
398 |
+
if (!this.book.scrolling) {
|
399 |
+
this.load();
|
400 |
+
}
|
401 |
+
if (!this.isVisible) {
|
402 |
+
this.bg.style.display = 'block';
|
403 |
+
this.html.style.display = 'block';
|
404 |
+
this.isVisible = true;
|
405 |
+
}
|
406 |
+
},
|
407 |
+
|
408 |
+
load: function (callback, thumb) {
|
409 |
+
if (this.loaded) {
|
410 |
+
return;
|
411 |
+
}
|
412 |
+
if (this.visibility == 0) {
|
413 |
+
return;
|
414 |
+
}
|
415 |
+
this.loaded = true;
|
416 |
+
var size = this.options.pageTextureSize;
|
417 |
+
|
418 |
+
if (this.size >= size) {
|
419 |
+
if (!thumb) {
|
420 |
+
this.loadHTML();
|
421 |
+
}
|
422 |
+
if (callback) {
|
423 |
+
callback.call(this);
|
424 |
+
}
|
425 |
+
return;
|
426 |
+
}
|
427 |
+
|
428 |
+
this.size = size;
|
429 |
+
|
430 |
+
var self = this;
|
431 |
+
|
432 |
+
var index = this.options.rightToLeft ? this.options.numPages - this.index - 1 : this.index;
|
433 |
+
|
434 |
+
this.options.main.loadPage(index, size, function (page) {
|
435 |
+
page = page || {};
|
436 |
+
|
437 |
+
if (page && page.image) {
|
438 |
+
var img = page.image[size] || page.image;
|
439 |
+
img.classList.add('page-scroll-img');
|
440 |
+
|
441 |
+
if (
|
442 |
+
self.index % 2 == 0 &&
|
443 |
+
(self.options.pages[index].side == 'left' || self.options.pages[index].side == 'right')
|
444 |
+
) {
|
445 |
+
if (!img.clone) {
|
446 |
+
img.clone = new Image();
|
447 |
+
img.clone.src = img.src;
|
448 |
+
}
|
449 |
+
img = img.clone;
|
450 |
+
}
|
451 |
+
|
452 |
+
self.bg.appendChild(img);
|
453 |
+
|
454 |
+
if (self.options.doublePage && self.index > 0 && self.index % 2 == 0) {
|
455 |
+
img.style.left = '-100%';
|
456 |
+
}
|
457 |
+
|
458 |
+
if (self.options.doublePage) {
|
459 |
+
if (self.index == 0 || (self.index == self.options.pages.length - 1 && self.options.backCover)) {
|
460 |
+
img.style.width = '100%';
|
461 |
+
} else {
|
462 |
+
img.style.width = '200%';
|
463 |
+
}
|
464 |
+
} else {
|
465 |
+
img.style.width = '100%';
|
466 |
+
}
|
467 |
+
|
468 |
+
self.inner.removeChild(self.preloader);
|
469 |
+
}
|
470 |
+
|
471 |
+
if (!thumb) {
|
472 |
+
self.loadHTML();
|
473 |
+
}
|
474 |
+
|
475 |
+
if (callback) {
|
476 |
+
callback.call(self);
|
477 |
+
}
|
478 |
+
});
|
479 |
+
},
|
480 |
+
|
481 |
+
hide: function () {
|
482 |
+
this.visibility = 0;
|
483 |
+
if (this.isVisible) {
|
484 |
+
this.bg.style.display = 'none';
|
485 |
+
this.html.style.display = 'none';
|
486 |
+
this.isVisible = false;
|
487 |
+
this.pauseHTML();
|
488 |
+
}
|
489 |
+
},
|
490 |
+
|
491 |
+
pauseHTML: function () {
|
492 |
+
var mediaElements = this.html.querySelectorAll('video, audio');
|
493 |
+
mediaElements.forEach(function (media) {
|
494 |
+
media.pause();
|
495 |
+
});
|
496 |
+
},
|
497 |
+
|
498 |
+
loadHTML: function () {
|
499 |
+
var self = this;
|
500 |
+
|
501 |
+
var index = this.options.rightToLeft ? this.options.numPages - this.index - 1 : this.index;
|
502 |
+
|
503 |
+
if (this.htmlContent) {
|
504 |
+
this.updateHtmlContent();
|
505 |
+
} else {
|
506 |
+
this.options.main.loadPageHTML(index, function (html) {
|
507 |
+
self.htmlContent = html;
|
508 |
+
self.updateHtmlContent();
|
509 |
+
});
|
510 |
+
}
|
511 |
+
},
|
512 |
+
|
513 |
+
setSize: function () {
|
514 |
+
this.wrapper.style.width = this.options.pageWidth + 'px';
|
515 |
+
this.wrapper.style.height = this.options.pageHeight + 'px';
|
516 |
+
this.updateHtmlContent();
|
517 |
+
},
|
518 |
+
|
519 |
+
updateHtmlContent: function () {
|
520 |
+
var c = this.htmlContent;
|
521 |
+
|
522 |
+
if (c && !this.htmlContentVisible) {
|
523 |
+
if (c.jquery) {
|
524 |
+
c = c[0];
|
525 |
+
}
|
526 |
+
this.htmlContentVisible = true;
|
527 |
+
|
528 |
+
this.html.replaceChildren();
|
529 |
+
this.html.appendChild(c);
|
530 |
+
this.startHTML();
|
531 |
+
this.main.trigger('showpagehtml', { page: this });
|
532 |
+
}
|
533 |
+
this.startHTML();
|
534 |
+
},
|
535 |
+
|
536 |
+
startHTML: function () {
|
537 |
+
this.book.startPageItems(this.wrapper);
|
538 |
+
},
|
539 |
+
};
|
flipbook.swipe.js
ADDED
@@ -0,0 +1,1294 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/*
|
2 |
+
* Real3D FlipBook [https://real3dflipbook.com]
|
3 |
+
* @author creativeinteractivemedia [https://codecanyon.net/user/creativeinteractivemedia/portfolio]
|
4 |
+
* @version 4.10
|
5 |
+
* @date 2025-05-15
|
6 |
+
*/
|
7 |
+
'use strict';
|
8 |
+
var FLIPBOOK = FLIPBOOK || {};
|
9 |
+
|
10 |
+
FLIPBOOK.BookSwipe = function (el, wrapper, main, options) {
|
11 |
+
this.options = options;
|
12 |
+
this.main = main;
|
13 |
+
this.singlePage = options.singlePageMode;
|
14 |
+
if (this.singlePage) {
|
15 |
+
this.view = 1;
|
16 |
+
}
|
17 |
+
this.pageWidth = this.options.pageWidth;
|
18 |
+
this.pageHeight = this.options.pageHeight;
|
19 |
+
this.slides = [];
|
20 |
+
this.pagesArr = [];
|
21 |
+
this.leftPage = 0;
|
22 |
+
this.rightPage = 0;
|
23 |
+
this.rotation = 0;
|
24 |
+
|
25 |
+
this.prevPageEnabled = false;
|
26 |
+
|
27 |
+
this.setRightIndex(options.rightToLeft ? options.pages.length : 0);
|
28 |
+
this.currentSlide = 0;
|
29 |
+
this.flipping = false;
|
30 |
+
|
31 |
+
this.wrapper = wrapper;
|
32 |
+
|
33 |
+
this.scroller = el;
|
34 |
+
this.scroller.classList.remove('book');
|
35 |
+
this.scroller.classList.add('flipbook-carousel-scroller');
|
36 |
+
|
37 |
+
this.iscroll = new IScroll(this.wrapper, {
|
38 |
+
snap: true,
|
39 |
+
snapSpeed: 200 * this.options.pageFlipDuration,
|
40 |
+
freeScroll: true,
|
41 |
+
scrollX: true,
|
42 |
+
scrollY: false,
|
43 |
+
preventDefault: false,
|
44 |
+
eventPassthrough: 'vertical',
|
45 |
+
});
|
46 |
+
|
47 |
+
var self = this;
|
48 |
+
|
49 |
+
this.zoomDisabled = false;
|
50 |
+
|
51 |
+
this.iscroll.on('scrollStart', function () {
|
52 |
+
self.zoomDisabled = true;
|
53 |
+
});
|
54 |
+
|
55 |
+
this.iscroll.on('scrollEnd', function () {
|
56 |
+
self.zoomDisabled = false;
|
57 |
+
});
|
58 |
+
|
59 |
+
for (var i = 0; i < 3; i++) {
|
60 |
+
var slide = document.createElement('div');
|
61 |
+
slide.className = 'flipbook-carousel-slide';
|
62 |
+
|
63 |
+
var slideInner = document.createElement('div');
|
64 |
+
slideInner.className = 'slide-inner';
|
65 |
+
|
66 |
+
slide.appendChild(slideInner);
|
67 |
+
this.scroller.appendChild(slide);
|
68 |
+
|
69 |
+
this.slides.push(slide);
|
70 |
+
}
|
71 |
+
|
72 |
+
this.slides[0].iscroll = new IScroll(this.slides[0], {
|
73 |
+
zoom: true,
|
74 |
+
scrollX: true,
|
75 |
+
scrollY: true,
|
76 |
+
freeScroll: true,
|
77 |
+
keepInCenterV: true,
|
78 |
+
keepInCenterH: true,
|
79 |
+
preventDefault: false,
|
80 |
+
});
|
81 |
+
|
82 |
+
this.slides[2].iscroll = new IScroll(this.slides[2], {
|
83 |
+
zoom: true,
|
84 |
+
scrollX: true,
|
85 |
+
scrollY: true,
|
86 |
+
freeScroll: true,
|
87 |
+
keepInCenterV: true,
|
88 |
+
keepInCenterH: true,
|
89 |
+
preventDefault: false,
|
90 |
+
});
|
91 |
+
|
92 |
+
this.slides[1].iscroll = new IScroll(this.slides[1], {
|
93 |
+
zoom: true,
|
94 |
+
scrollX: true,
|
95 |
+
scrollY: true,
|
96 |
+
freeScroll: true,
|
97 |
+
keepInCenterV: true,
|
98 |
+
keepInCenterH: true,
|
99 |
+
preventDefault: false,
|
100 |
+
});
|
101 |
+
|
102 |
+
// eslint-disable-next-line no-redeclare
|
103 |
+
for (var i = 0; i < 3; i++) {
|
104 |
+
this.slides[i].iscroll.on('zoomEnd', function () {
|
105 |
+
var scale = options.main.zoom;
|
106 |
+
this.options.eventPassthrough = scale > 1 ? '' : 'vertical';
|
107 |
+
this.options.freeScroll = scale > 1;
|
108 |
+
this.refresh();
|
109 |
+
});
|
110 |
+
}
|
111 |
+
|
112 |
+
this.resizeInnerSlides();
|
113 |
+
|
114 |
+
var page;
|
115 |
+
|
116 |
+
options.pages.forEach((page, index) => {
|
117 |
+
if (!page.empty) {
|
118 |
+
const newPage = new FLIPBOOK.PageSwipe(this, index, page.src, page.htmlContent);
|
119 |
+
this.pagesArr.push(newPage);
|
120 |
+
if (options.loadAllPages) {
|
121 |
+
newPage.load();
|
122 |
+
}
|
123 |
+
}
|
124 |
+
});
|
125 |
+
|
126 |
+
if (!options.cover) {
|
127 |
+
page = new FLIPBOOK.PageSwipe(this, options.numPages);
|
128 |
+
this.pagesArr.push(page);
|
129 |
+
}
|
130 |
+
|
131 |
+
this.iscroll.on('scrollStart', function () {
|
132 |
+
if (this.distX < 0) {
|
133 |
+
self.loadNextSpread();
|
134 |
+
} else {
|
135 |
+
self.loadPrevSpread();
|
136 |
+
}
|
137 |
+
});
|
138 |
+
|
139 |
+
this.iscroll.on('scrollEnd', function () {
|
140 |
+
var sliderPage = this.currentPage.pageX;
|
141 |
+
|
142 |
+
if (self.currentSlide == sliderPage) {
|
143 |
+
return;
|
144 |
+
}
|
145 |
+
|
146 |
+
if (self.singlePage) {
|
147 |
+
if (sliderPage > self.currentSlide) {
|
148 |
+
self.setRightIndex(self.rightIndex + 1);
|
149 |
+
} else if (sliderPage < self.currentSlide) {
|
150 |
+
self.setRightIndex(self.rightIndex - 1);
|
151 |
+
}
|
152 |
+
} else {
|
153 |
+
if (sliderPage > self.currentSlide) {
|
154 |
+
self.setRightIndex(self.rightIndex + 2);
|
155 |
+
} else if (sliderPage < self.currentSlide) {
|
156 |
+
self.setRightIndex(self.rightIndex - 2);
|
157 |
+
}
|
158 |
+
}
|
159 |
+
|
160 |
+
self.currentSlide = sliderPage;
|
161 |
+
|
162 |
+
self.updateVisiblePages();
|
163 |
+
|
164 |
+
self.flipping = false;
|
165 |
+
});
|
166 |
+
|
167 |
+
this.flipEnabled = true;
|
168 |
+
this.nextEnabled = true;
|
169 |
+
this.prevEnabled = true;
|
170 |
+
|
171 |
+
main.on('enableIScroll', () => {
|
172 |
+
this.enableIscroll();
|
173 |
+
});
|
174 |
+
|
175 |
+
main.on('disableIScroll', () => {
|
176 |
+
this.disableIscroll();
|
177 |
+
});
|
178 |
+
|
179 |
+
main.on('pageLoaded', function (_) {});
|
180 |
+
};
|
181 |
+
|
182 |
+
FLIPBOOK.BookSwipe.prototype = Object.create(FLIPBOOK.Book.prototype);
|
183 |
+
|
184 |
+
FLIPBOOK.BookSwipe.prototype.constructor = FLIPBOOK.BookSwipe;
|
185 |
+
|
186 |
+
FLIPBOOK.BookSwipe.prototype.enableIscroll = function () {
|
187 |
+
if (this.iscrollDisabled) {
|
188 |
+
if (this.zoom > 1) {
|
189 |
+
if (this.slides[0].iscroll) {
|
190 |
+
this.slides[0].iscroll.enable();
|
191 |
+
}
|
192 |
+
if (this.slides[1].iscroll) {
|
193 |
+
this.slides[1].iscroll.enable();
|
194 |
+
}
|
195 |
+
if (this.slides[2].iscroll) {
|
196 |
+
this.slides[2].iscroll.enable();
|
197 |
+
}
|
198 |
+
} else {
|
199 |
+
this.iscroll.enable();
|
200 |
+
}
|
201 |
+
|
202 |
+
this.iscrollDisabled = false;
|
203 |
+
}
|
204 |
+
};
|
205 |
+
|
206 |
+
FLIPBOOK.BookSwipe.prototype.disableIscroll = function () {
|
207 |
+
if (!this.iscrollDisabled) {
|
208 |
+
if (this.zoom > 1) {
|
209 |
+
if (this.slides[0].iscroll) {
|
210 |
+
this.slides[0].iscroll.disable();
|
211 |
+
this.slides[0].iscroll.initiated = false;
|
212 |
+
}
|
213 |
+
if (this.slides[1].iscroll) {
|
214 |
+
this.slides[1].iscroll.disable();
|
215 |
+
this.slides[1].iscroll.initiated = false;
|
216 |
+
}
|
217 |
+
if (this.slides[2].iscroll) {
|
218 |
+
this.slides[2].iscroll.disable();
|
219 |
+
this.slides[2].iscroll.initiated = false;
|
220 |
+
}
|
221 |
+
} else {
|
222 |
+
this.iscroll.disable();
|
223 |
+
this.iscroll.initiated = false;
|
224 |
+
}
|
225 |
+
|
226 |
+
this.iscrollDisabled = true;
|
227 |
+
}
|
228 |
+
};
|
229 |
+
|
230 |
+
FLIPBOOK.BookSwipe.prototype.goToPage = function (value, instant) {
|
231 |
+
if (!this.enabled) {
|
232 |
+
return;
|
233 |
+
}
|
234 |
+
|
235 |
+
if (!this.flipEnabled) {
|
236 |
+
return;
|
237 |
+
}
|
238 |
+
|
239 |
+
if (value > this.options.pages.length) {
|
240 |
+
value = this.options.pages.length;
|
241 |
+
}
|
242 |
+
|
243 |
+
if (this.singlePage || value % 2 != 0) {
|
244 |
+
value--;
|
245 |
+
}
|
246 |
+
|
247 |
+
if (isNaN(value) || value < 0) {
|
248 |
+
value = 0;
|
249 |
+
}
|
250 |
+
|
251 |
+
if (instant) {
|
252 |
+
this.setRightIndex(value);
|
253 |
+
this.updateVisiblePages();
|
254 |
+
return;
|
255 |
+
}
|
256 |
+
|
257 |
+
if (this.singlePage) {
|
258 |
+
if (value > this.rightIndex) {
|
259 |
+
this.setSlidePages(this.currentSlide + 1, [value]);
|
260 |
+
this.setRightIndex(value - 1);
|
261 |
+
this.nextPage(instant);
|
262 |
+
} else if (value < this.rightIndex) {
|
263 |
+
this.setSlidePages(this.currentSlide - 1, [value]);
|
264 |
+
this.setRightIndex(value + 1);
|
265 |
+
this.prevPage(instant);
|
266 |
+
}
|
267 |
+
} else {
|
268 |
+
if (this.options.rightToLeft && !this.options.backCover && value < 2) {
|
269 |
+
value = 2;
|
270 |
+
}
|
271 |
+
|
272 |
+
if (value > this.rightIndex) {
|
273 |
+
if (value >= this.pagesArr.length) {
|
274 |
+
this.setSlidePages(2, [value - 1, value]);
|
275 |
+
this.setRightIndex(value - 2);
|
276 |
+
this.goToSlide(2, instant);
|
277 |
+
} else {
|
278 |
+
this.setSlidePages(this.currentSlide + 1, [value - 1, value]);
|
279 |
+
this.setRightIndex(value - 2);
|
280 |
+
this.nextPage(instant);
|
281 |
+
}
|
282 |
+
} else if (value < this.rightIndex) {
|
283 |
+
if (value == 0) {
|
284 |
+
this.setRightIndex(value + 2);
|
285 |
+
this.setSlidePages(0, [value]);
|
286 |
+
this.goToSlide(0, instant);
|
287 |
+
} else {
|
288 |
+
this.setRightIndex(value + 2);
|
289 |
+
this.setSlidePages(this.currentSlide - 1, [value - 1, value]);
|
290 |
+
this.prevPage(instant);
|
291 |
+
}
|
292 |
+
}
|
293 |
+
}
|
294 |
+
};
|
295 |
+
|
296 |
+
FLIPBOOK.BookSwipe.prototype.setRightIndex = function (value) {
|
297 |
+
this.rightIndex = value;
|
298 |
+
};
|
299 |
+
|
300 |
+
FLIPBOOK.BookSwipe.prototype.nextPage = function (instant) {
|
301 |
+
if (this.currentSlide == 2) {
|
302 |
+
return;
|
303 |
+
}
|
304 |
+
|
305 |
+
this.flipping = true;
|
306 |
+
|
307 |
+
this.goToSlide(this.currentSlide + 1, instant);
|
308 |
+
|
309 |
+
this.loadNextSpread();
|
310 |
+
};
|
311 |
+
|
312 |
+
FLIPBOOK.BookSwipe.prototype.prevPage = function (instant) {
|
313 |
+
if (this.currentSlide == 0) {
|
314 |
+
return;
|
315 |
+
}
|
316 |
+
|
317 |
+
this.flipping = true;
|
318 |
+
|
319 |
+
this.goToSlide(this.currentSlide - 1, instant);
|
320 |
+
|
321 |
+
this.loadPrevSpread();
|
322 |
+
};
|
323 |
+
|
324 |
+
FLIPBOOK.BookSwipe.prototype.enablePrev = function (val) {
|
325 |
+
this.prevEnabled = val;
|
326 |
+
};
|
327 |
+
|
328 |
+
FLIPBOOK.BookSwipe.prototype.enableNext = function (val) {
|
329 |
+
this.nextEnabled = val;
|
330 |
+
};
|
331 |
+
|
332 |
+
FLIPBOOK.BookSwipe.prototype.setSlidePages = function (slide, pages) {
|
333 |
+
var self = this;
|
334 |
+
var arr = [];
|
335 |
+
for (var i = 0; i < pages.length; i++) {
|
336 |
+
if (pages[i]) {
|
337 |
+
arr.push(pages[i].index);
|
338 |
+
}
|
339 |
+
}
|
340 |
+
|
341 |
+
if (this.slides[slide].pages && this.slides[slide].pages.length > 0) {
|
342 |
+
if (arr.join('') === this.slides[slide].pages.join('')) {
|
343 |
+
return;
|
344 |
+
}
|
345 |
+
}
|
346 |
+
|
347 |
+
this.clearSlidePages(slide);
|
348 |
+
|
349 |
+
var slideInner = this.slides[slide].firstChild;
|
350 |
+
|
351 |
+
pages.forEach((page) => {
|
352 |
+
let pageIndex;
|
353 |
+
|
354 |
+
if (typeof page === 'number') {
|
355 |
+
pageIndex = page;
|
356 |
+
} else {
|
357 |
+
pageIndex = page.index;
|
358 |
+
}
|
359 |
+
|
360 |
+
if (self.pagesArr[pageIndex]) {
|
361 |
+
slideInner.appendChild(self.pagesArr[pageIndex].wrapper);
|
362 |
+
self.slides[slide].pages.push(pageIndex);
|
363 |
+
}
|
364 |
+
});
|
365 |
+
|
366 |
+
this.resizeInnerSlides();
|
367 |
+
|
368 |
+
if (this.slides[slide].iscroll) {
|
369 |
+
this.slides[slide].iscroll.refresh();
|
370 |
+
}
|
371 |
+
};
|
372 |
+
|
373 |
+
FLIPBOOK.BookSwipe.prototype.clearSlidePages = function (slide) {
|
374 |
+
this.slides[slide].firstChild.innerHTML = '';
|
375 |
+
this.slides[slide].pages = [];
|
376 |
+
};
|
377 |
+
|
378 |
+
FLIPBOOK.BookSwipe.prototype.loadNextSpread = function () {
|
379 |
+
var index = this.rightIndex;
|
380 |
+
|
381 |
+
if (this.options.rightToLeft && !this.options.backCover) {
|
382 |
+
index--;
|
383 |
+
}
|
384 |
+
|
385 |
+
var next = this.pagesArr[index + 1];
|
386 |
+
if (next) {
|
387 |
+
next.load();
|
388 |
+
}
|
389 |
+
if (!this.singlePage) {
|
390 |
+
var afterNext = this.pagesArr[index + 2];
|
391 |
+
if (afterNext) {
|
392 |
+
afterNext.load();
|
393 |
+
}
|
394 |
+
}
|
395 |
+
};
|
396 |
+
|
397 |
+
FLIPBOOK.BookSwipe.prototype.loadPrevSpread = function () {
|
398 |
+
var index = this.rightIndex;
|
399 |
+
var prev;
|
400 |
+
|
401 |
+
if (this.options.rightToLeft && !this.options.backCover) {
|
402 |
+
index--;
|
403 |
+
}
|
404 |
+
|
405 |
+
if (this.singlePage) {
|
406 |
+
prev = this.pagesArr[index - 1];
|
407 |
+
if (prev) {
|
408 |
+
prev.load();
|
409 |
+
}
|
410 |
+
} else {
|
411 |
+
prev = this.pagesArr[index - 2];
|
412 |
+
if (prev) {
|
413 |
+
prev.load();
|
414 |
+
}
|
415 |
+
var beforePrev = this.pagesArr[index - 3];
|
416 |
+
if (beforePrev) {
|
417 |
+
beforePrev.load();
|
418 |
+
}
|
419 |
+
}
|
420 |
+
};
|
421 |
+
|
422 |
+
FLIPBOOK.BookSwipe.prototype.loadVisiblePages = function () {
|
423 |
+
var main = this.options.main;
|
424 |
+
var index = this.rightIndex;
|
425 |
+
|
426 |
+
if (this.options.rightToLeft && !this.options.backCover && !this.singlePage) {
|
427 |
+
index--;
|
428 |
+
}
|
429 |
+
|
430 |
+
var right = this.pagesArr[index];
|
431 |
+
var left = this.pagesArr[index - 1];
|
432 |
+
var next = this.pagesArr[index + 1];
|
433 |
+
var afterNext = this.pagesArr[index + 2];
|
434 |
+
var prev = this.pagesArr[index - 2];
|
435 |
+
var beforePrev = this.pagesArr[index - 3];
|
436 |
+
|
437 |
+
if (this.singlePage) {
|
438 |
+
if (right) {
|
439 |
+
right.load(function () {
|
440 |
+
main.setLoadingProgress(1);
|
441 |
+
if (left) {
|
442 |
+
left.load(null, true);
|
443 |
+
}
|
444 |
+
if (next) {
|
445 |
+
next.load(null, true);
|
446 |
+
}
|
447 |
+
});
|
448 |
+
} else if (left) {
|
449 |
+
left.load();
|
450 |
+
}
|
451 |
+
} else {
|
452 |
+
if (left) {
|
453 |
+
left.load(function () {
|
454 |
+
if (right) {
|
455 |
+
right.load(function () {
|
456 |
+
main.setLoadingProgress(1);
|
457 |
+
if (prev) {
|
458 |
+
prev.load(null, true);
|
459 |
+
}
|
460 |
+
if (beforePrev) {
|
461 |
+
beforePrev.load(null, true);
|
462 |
+
}
|
463 |
+
if (next) {
|
464 |
+
next.load(null, true);
|
465 |
+
}
|
466 |
+
if (afterNext) {
|
467 |
+
afterNext.load(null, true);
|
468 |
+
}
|
469 |
+
});
|
470 |
+
} else {
|
471 |
+
main.setLoadingProgress(1);
|
472 |
+
if (prev) {
|
473 |
+
prev.load(null, true);
|
474 |
+
}
|
475 |
+
|
476 |
+
if (beforePrev) {
|
477 |
+
beforePrev.load(null, true);
|
478 |
+
}
|
479 |
+
}
|
480 |
+
});
|
481 |
+
} else {
|
482 |
+
if (right) {
|
483 |
+
right.load(function () {
|
484 |
+
main.setLoadingProgress(1);
|
485 |
+
if (next) {
|
486 |
+
next.load(null, true);
|
487 |
+
}
|
488 |
+
if (afterNext) {
|
489 |
+
afterNext.load(null, true);
|
490 |
+
}
|
491 |
+
});
|
492 |
+
}
|
493 |
+
}
|
494 |
+
}
|
495 |
+
};
|
496 |
+
|
497 |
+
FLIPBOOK.BookSwipe.prototype.updateVisiblePages = function () {
|
498 |
+
if (this.visiblePagesRightIndex === this.rightIndex) {
|
499 |
+
return;
|
500 |
+
}
|
501 |
+
|
502 |
+
this.visiblePagesRightIndex = this.rightIndex;
|
503 |
+
|
504 |
+
var index = this.rightIndex;
|
505 |
+
|
506 |
+
if (this.options.rightToLeft && !this.options.backCover && !this.singlePage) {
|
507 |
+
index--;
|
508 |
+
}
|
509 |
+
|
510 |
+
var right = this.pagesArr[index];
|
511 |
+
var left = this.pagesArr[index - 1];
|
512 |
+
var next = this.pagesArr[index + 1];
|
513 |
+
var afterNext = this.pagesArr[index + 2];
|
514 |
+
var prev = this.pagesArr[index - 2];
|
515 |
+
var beforePrev = this.pagesArr[index - 3];
|
516 |
+
|
517 |
+
if (next) {
|
518 |
+
next.hideHTML();
|
519 |
+
}
|
520 |
+
if (afterNext) {
|
521 |
+
afterNext.hideHTML();
|
522 |
+
}
|
523 |
+
if (prev) {
|
524 |
+
prev.hideHTML();
|
525 |
+
}
|
526 |
+
if (beforePrev) {
|
527 |
+
beforePrev.hideHTML();
|
528 |
+
}
|
529 |
+
|
530 |
+
if (this.singlePage) {
|
531 |
+
if (right) {
|
532 |
+
right.startHTML();
|
533 |
+
}
|
534 |
+
|
535 |
+
if (!left) {
|
536 |
+
//cover
|
537 |
+
this.setSlidePages(0, [right]);
|
538 |
+
|
539 |
+
if (next) {
|
540 |
+
this.setSlidePages(1, [next]);
|
541 |
+
} else {
|
542 |
+
this.clearSlidePages(1);
|
543 |
+
}
|
544 |
+
this.goToSlide(0, true);
|
545 |
+
|
546 |
+
this.clearSlidePages(2);
|
547 |
+
} else {
|
548 |
+
if (next) {
|
549 |
+
this.setSlidePages(1, [right]);
|
550 |
+
if (left) {
|
551 |
+
this.setSlidePages(0, [left]);
|
552 |
+
}
|
553 |
+
this.setSlidePages(2, [next]);
|
554 |
+
this.goToSlide(1, true);
|
555 |
+
} else {
|
556 |
+
if (right) {
|
557 |
+
this.setSlidePages(2, [right]);
|
558 |
+
}
|
559 |
+
if (left) {
|
560 |
+
this.setSlidePages(1, [left]);
|
561 |
+
}
|
562 |
+
this.goToSlide(2, true);
|
563 |
+
|
564 |
+
this.clearSlidePages(0);
|
565 |
+
}
|
566 |
+
}
|
567 |
+
|
568 |
+
if (left) {
|
569 |
+
left.hideHTML();
|
570 |
+
}
|
571 |
+
} else {
|
572 |
+
if (!left) {
|
573 |
+
if (right) {
|
574 |
+
right.startHTML();
|
575 |
+
}
|
576 |
+
//cover
|
577 |
+
this.setSlidePages(0, [right]);
|
578 |
+
|
579 |
+
if (afterNext) {
|
580 |
+
this.setSlidePages(1, [next, afterNext]);
|
581 |
+
} else {
|
582 |
+
this.setSlidePages(1, [next]);
|
583 |
+
}
|
584 |
+
|
585 |
+
this.goToSlide(0, true);
|
586 |
+
|
587 |
+
this.clearSlidePages(2);
|
588 |
+
} else {
|
589 |
+
left.startHTML();
|
590 |
+
|
591 |
+
if (right) {
|
592 |
+
right.startHTML();
|
593 |
+
|
594 |
+
//L R
|
595 |
+
|
596 |
+
if (!next) {
|
597 |
+
this.setSlidePages(2, [left, right]);
|
598 |
+
|
599 |
+
if (beforePrev) {
|
600 |
+
this.setSlidePages(1, [beforePrev, prev]);
|
601 |
+
} else {
|
602 |
+
this.setSlidePages(1, [prev]);
|
603 |
+
}
|
604 |
+
|
605 |
+
this.goToSlide(2, true);
|
606 |
+
|
607 |
+
this.clearSlidePages(0);
|
608 |
+
} else {
|
609 |
+
if (prev && !(this.rightIndex == 2 && !this.options.cover)) {
|
610 |
+
this.setSlidePages(1, [left, right]);
|
611 |
+
|
612 |
+
if (beforePrev) {
|
613 |
+
this.setSlidePages(0, [beforePrev, prev]);
|
614 |
+
} else {
|
615 |
+
this.setSlidePages(0, [prev]);
|
616 |
+
}
|
617 |
+
|
618 |
+
if (afterNext) {
|
619 |
+
this.setSlidePages(2, [next, afterNext]);
|
620 |
+
} else {
|
621 |
+
this.setSlidePages(2, [next]);
|
622 |
+
}
|
623 |
+
|
624 |
+
this.goToSlide(1, true);
|
625 |
+
} else {
|
626 |
+
this.setSlidePages(0, [left, right]);
|
627 |
+
|
628 |
+
if (afterNext) {
|
629 |
+
this.setSlidePages(1, [next, afterNext]);
|
630 |
+
} else {
|
631 |
+
this.setSlidePages(1, [next]);
|
632 |
+
}
|
633 |
+
|
634 |
+
this.clearSlidePages(2);
|
635 |
+
}
|
636 |
+
}
|
637 |
+
} else {
|
638 |
+
this.setSlidePages(2, [left]);
|
639 |
+
|
640 |
+
if (beforePrev) {
|
641 |
+
this.setSlidePages(1, [beforePrev, prev]);
|
642 |
+
} else {
|
643 |
+
this.setSlidePages(1, [prev]);
|
644 |
+
}
|
645 |
+
|
646 |
+
this.goToSlide(2, true);
|
647 |
+
this.clearSlidePages(0);
|
648 |
+
}
|
649 |
+
}
|
650 |
+
}
|
651 |
+
|
652 |
+
this.loadVisiblePages();
|
653 |
+
|
654 |
+
this.flippedleft = (this.rightIndex + (this.rightIndex % 2)) / 2;
|
655 |
+
this.flippedright = this.options.pages.length / 2 - this.flippedleft;
|
656 |
+
|
657 |
+
this.options.main.turnPageComplete();
|
658 |
+
};
|
659 |
+
|
660 |
+
FLIPBOOK.BookSwipe.prototype.loadPage = function (index) {
|
661 |
+
if (this.pagesArr[index]) {
|
662 |
+
this.pagesArr[index].load();
|
663 |
+
}
|
664 |
+
};
|
665 |
+
|
666 |
+
FLIPBOOK.BookSwipe.prototype.disable = function () {
|
667 |
+
this.enabled = false;
|
668 |
+
};
|
669 |
+
|
670 |
+
FLIPBOOK.BookSwipe.prototype.enable = function () {
|
671 |
+
this.enabled = true;
|
672 |
+
this.onResize();
|
673 |
+
};
|
674 |
+
|
675 |
+
FLIPBOOK.BookSwipe.prototype.resize = function () {};
|
676 |
+
|
677 |
+
FLIPBOOK.BookSwipe.prototype.updateSinglePage = function (singlePage) {
|
678 |
+
this.singlePageView = singlePage;
|
679 |
+
this.onResize(true);
|
680 |
+
};
|
681 |
+
|
682 |
+
FLIPBOOK.BookSwipe.prototype.onResize = function (force) {
|
683 |
+
var w = this.main.wrapperW;
|
684 |
+
var h = this.main.wrapperH;
|
685 |
+
|
686 |
+
if (w == 0 || h == 0) {
|
687 |
+
return;
|
688 |
+
}
|
689 |
+
|
690 |
+
if (!force && this.w === w && this.h === h) {
|
691 |
+
return;
|
692 |
+
}
|
693 |
+
|
694 |
+
this.w = w;
|
695 |
+
this.h = h;
|
696 |
+
|
697 |
+
var pw = this.pageWidth;
|
698 |
+
var ph = this.pageHeight;
|
699 |
+
|
700 |
+
var portrait = (2 * this.options.zoomMin * pw) / ph > w / h;
|
701 |
+
var doublePage =
|
702 |
+
!this.options.singlePageMode &&
|
703 |
+
(!this.options.responsiveView ||
|
704 |
+
w > this.options.responsiveViewTreshold ||
|
705 |
+
!portrait ||
|
706 |
+
w / h >= this.options.responsiveViewRatio);
|
707 |
+
|
708 |
+
if (typeof this.singlePageView != 'undefined') {
|
709 |
+
doublePage = !this.singlePageView;
|
710 |
+
}
|
711 |
+
|
712 |
+
var bw = doublePage ? 2 * pw : pw;
|
713 |
+
var bh = ph;
|
714 |
+
this.bw = bw;
|
715 |
+
this.bh = bh;
|
716 |
+
|
717 |
+
var scale;
|
718 |
+
if (h / w > bh / bw) {
|
719 |
+
//fit to width
|
720 |
+
scale = ((bh / bw) * w) / this.options.pageHeight;
|
721 |
+
} else {
|
722 |
+
scale = h / this.options.pageHeight;
|
723 |
+
}
|
724 |
+
|
725 |
+
var spaceBetweenSlides = 0;
|
726 |
+
|
727 |
+
for (var i = 0; i < this.slides.length; i++) {
|
728 |
+
this.slides[i].style.width = w + spaceBetweenSlides + 'px';
|
729 |
+
this.slides[i].style.height = h + 'px';
|
730 |
+
this.slides[i].style.left = i * w + i * spaceBetweenSlides + 'px';
|
731 |
+
|
732 |
+
if (this.slides[i].iscroll) {
|
733 |
+
this.slides[i].iscroll.options.zoomMin = this.options.zoomMin * scale;
|
734 |
+
this.slides[i].iscroll.options.zoomMax = this.options.zoomMax * scale;
|
735 |
+
this.slides[i].iscroll.refresh();
|
736 |
+
}
|
737 |
+
}
|
738 |
+
|
739 |
+
this.scroller.style.width = this.slides.length * (w + spaceBetweenSlides) + 'px';
|
740 |
+
this.iscroll.refresh();
|
741 |
+
|
742 |
+
if ((!doublePage || this.options.singlePageMode) && !this.singlePage) {
|
743 |
+
if (this.rightIndex % 2 == 0 && this.rightIndex > 0) {
|
744 |
+
this.setRightIndex(this.rightIndex - 1);
|
745 |
+
}
|
746 |
+
|
747 |
+
this.singlePage = true;
|
748 |
+
this.view = 1;
|
749 |
+
|
750 |
+
this.resizeInnerSlides();
|
751 |
+
} else if (doublePage && !this.options.singlePageMode && this.singlePage) {
|
752 |
+
if (this.rightIndex % 2 != 0) {
|
753 |
+
this.setRightIndex(this.rightIndex + 1);
|
754 |
+
}
|
755 |
+
|
756 |
+
this.singlePage = false;
|
757 |
+
this.view = 2;
|
758 |
+
|
759 |
+
this.resizeInnerSlides();
|
760 |
+
}
|
761 |
+
|
762 |
+
this.zoomTo(this.zoom);
|
763 |
+
|
764 |
+
// this.updateVisiblePages();
|
765 |
+
};
|
766 |
+
|
767 |
+
FLIPBOOK.BookSwipe.prototype.isFocusedRight = function () {
|
768 |
+
return this.rightIndex % 2 == 0;
|
769 |
+
};
|
770 |
+
|
771 |
+
FLIPBOOK.BookSwipe.prototype.isFocusedLeft = function () {
|
772 |
+
return this.rightIndex % 2 == 1;
|
773 |
+
};
|
774 |
+
|
775 |
+
FLIPBOOK.BookSwipe.prototype.resizeInnerSlides = function () {
|
776 |
+
var pw = (this.options.pageHeight * this.pageWidth) / this.pageHeight;
|
777 |
+
|
778 |
+
if (this.rotation == 90 || this.rotation == 270) {
|
779 |
+
pw = (this.options.pageHeight * this.pageHeight) / this.pageWidth;
|
780 |
+
}
|
781 |
+
|
782 |
+
var sw = this.singlePage ? pw : 2 * pw;
|
783 |
+
|
784 |
+
for (var i = 0; i < 3; i++) {
|
785 |
+
sw = this.slides[i].pages && this.slides[i].pages.length == 1 ? pw : 2 * pw;
|
786 |
+
this.slides[i].firstChild.style.width = `${sw}px`;
|
787 |
+
}
|
788 |
+
};
|
789 |
+
|
790 |
+
FLIPBOOK.BookSwipe.prototype.goToSlide = function (slideIndex, instant) {
|
791 |
+
if (this.iscroll.currentPage.pageX == slideIndex) {
|
792 |
+
return;
|
793 |
+
}
|
794 |
+
|
795 |
+
this.onResize();
|
796 |
+
|
797 |
+
var time = instant ? 0 : 600 * this.options.pageFlipDuration;
|
798 |
+
var slide = this.slides[slideIndex];
|
799 |
+
|
800 |
+
if (slide.pages && slide.pages[0]) {
|
801 |
+
this.pagesArr[slide.pages[0]].updateHtmlContent();
|
802 |
+
}
|
803 |
+
|
804 |
+
if (this.iscroll.pages.length > 0) {
|
805 |
+
this.iscroll.goToPage(slideIndex, 0, time);
|
806 |
+
}
|
807 |
+
|
808 |
+
if (instant) {
|
809 |
+
this.currentSlide = slideIndex;
|
810 |
+
}
|
811 |
+
|
812 |
+
this.zoomTo(this.options.zoomMin);
|
813 |
+
};
|
814 |
+
|
815 |
+
FLIPBOOK.BookSwipe.prototype.zoomIn = function (value, time, e) {
|
816 |
+
if (e && e.type === 'mousewheel') {
|
817 |
+
return;
|
818 |
+
}
|
819 |
+
this.zoomTo(value);
|
820 |
+
};
|
821 |
+
|
822 |
+
FLIPBOOK.BookSwipe.prototype.zoomTo = function (zoom, time, x, y) {
|
823 |
+
if (!this.enabled || this.zoomDisabled) {
|
824 |
+
return;
|
825 |
+
}
|
826 |
+
|
827 |
+
x = x || 0;
|
828 |
+
y = y || 0;
|
829 |
+
|
830 |
+
if (zoom > 1) {
|
831 |
+
this.disableFlip();
|
832 |
+
}
|
833 |
+
|
834 |
+
if (w == 0 || h == 0) {
|
835 |
+
return;
|
836 |
+
}
|
837 |
+
|
838 |
+
var m = this.main;
|
839 |
+
var w = m.wrapperW;
|
840 |
+
var h = m.wrapperH;
|
841 |
+
var bw = m.bookW;
|
842 |
+
var bh = m.bookH;
|
843 |
+
var pw = m.pageW;
|
844 |
+
var ph = m.pageH;
|
845 |
+
var r1 = w / h;
|
846 |
+
var r2 = pw / ph;
|
847 |
+
|
848 |
+
var s = Math.min(this.zoom, 1);
|
849 |
+
|
850 |
+
var zoomMin = Number(this.options.zoomMin);
|
851 |
+
|
852 |
+
var self = this;
|
853 |
+
|
854 |
+
function fitToHeight() {
|
855 |
+
self.ratio = h / bh;
|
856 |
+
fit();
|
857 |
+
}
|
858 |
+
|
859 |
+
function fitToWidth() {
|
860 |
+
self.ratio = self.view == 1 ? w / pw : w / bw;
|
861 |
+
fit();
|
862 |
+
}
|
863 |
+
|
864 |
+
function fit() {
|
865 |
+
for (var i = 0; i < 3; i++) {
|
866 |
+
if (self.slides[i].iscroll) {
|
867 |
+
self.slides[i].iscroll.options.zoomMin = self.ratio * self.options.zoomMin;
|
868 |
+
self.slides[i].iscroll.options.zoomMax = self.ratio * self.options.zoomMax;
|
869 |
+
self.slides[i].iscroll.zoom(self.ratio * zoom, x, y, 0);
|
870 |
+
}
|
871 |
+
}
|
872 |
+
}
|
873 |
+
|
874 |
+
if (
|
875 |
+
!this.options.singlePageMode &&
|
876 |
+
this.options.responsiveView &&
|
877 |
+
w <= this.options.responsiveViewTreshold &&
|
878 |
+
r1 < 2 * r2 &&
|
879 |
+
r1 < this.options.responsiveViewRatio
|
880 |
+
) {
|
881 |
+
this.view = 1;
|
882 |
+
|
883 |
+
if (r2 > r1) {
|
884 |
+
this.sc = (zoomMin * r1) / (r2 * s);
|
885 |
+
} else {
|
886 |
+
this.sc = 1;
|
887 |
+
}
|
888 |
+
|
889 |
+
if (w / h > pw / ph) {
|
890 |
+
fitToHeight();
|
891 |
+
} else {
|
892 |
+
fitToWidth();
|
893 |
+
}
|
894 |
+
} else if (this.singlePage && r1 < 2 * r2) {
|
895 |
+
if (r2 > r1) {
|
896 |
+
this.sc = (zoomMin * r1) / (r2 * s);
|
897 |
+
} else {
|
898 |
+
this.sc = 1;
|
899 |
+
}
|
900 |
+
|
901 |
+
if (w / h > pw / ph) {
|
902 |
+
fitToHeight();
|
903 |
+
} else {
|
904 |
+
fitToWidth();
|
905 |
+
}
|
906 |
+
} else {
|
907 |
+
this.view = 2;
|
908 |
+
|
909 |
+
if (r1 < 2 * r2) {
|
910 |
+
this.sc = (zoomMin * r1) / (2 * r2 * s);
|
911 |
+
} else {
|
912 |
+
this.sc = 1;
|
913 |
+
}
|
914 |
+
|
915 |
+
if (w / h >= bw / bh) {
|
916 |
+
fitToHeight();
|
917 |
+
} else {
|
918 |
+
fitToWidth();
|
919 |
+
}
|
920 |
+
}
|
921 |
+
|
922 |
+
this.zoom = zoom;
|
923 |
+
|
924 |
+
this.onZoom(zoom);
|
925 |
+
};
|
926 |
+
|
927 |
+
FLIPBOOK.BookSwipe.prototype.zoomOut = function (value) {
|
928 |
+
this.zoomTo(value);
|
929 |
+
};
|
930 |
+
|
931 |
+
FLIPBOOK.BookSwipe.prototype.move = function (direction) {
|
932 |
+
if (this.zoom <= 1) {
|
933 |
+
return;
|
934 |
+
}
|
935 |
+
|
936 |
+
for (var i = 0; i < 3; i++) {
|
937 |
+
var iscroll = this.slides[i].iscroll;
|
938 |
+
var offset2 = 0;
|
939 |
+
|
940 |
+
if (iscroll) {
|
941 |
+
var posX = iscroll.x;
|
942 |
+
var posY = iscroll.y;
|
943 |
+
var offset = 20 * this.zoom;
|
944 |
+
switch (direction) {
|
945 |
+
case 'left':
|
946 |
+
posX += offset;
|
947 |
+
break;
|
948 |
+
case 'right':
|
949 |
+
posX -= offset;
|
950 |
+
break;
|
951 |
+
case 'up':
|
952 |
+
posY += offset;
|
953 |
+
break;
|
954 |
+
case 'down':
|
955 |
+
posY -= offset;
|
956 |
+
break;
|
957 |
+
}
|
958 |
+
|
959 |
+
if (posX > 0) {
|
960 |
+
posX = offset2;
|
961 |
+
}
|
962 |
+
if (posX < iscroll.maxScrollX) {
|
963 |
+
posX = iscroll.maxScrollX - offset2;
|
964 |
+
}
|
965 |
+
if (posY > 0) {
|
966 |
+
posY = offset2;
|
967 |
+
}
|
968 |
+
if (posY < iscroll.maxScrollY) {
|
969 |
+
posY = iscroll.maxScrollY - offset2;
|
970 |
+
}
|
971 |
+
|
972 |
+
iscroll.scrollTo(posX, posY, 0);
|
973 |
+
}
|
974 |
+
}
|
975 |
+
};
|
976 |
+
|
977 |
+
FLIPBOOK.BookSwipe.prototype.onZoom = function (zoom) {
|
978 |
+
if (zoom > 1) {
|
979 |
+
this.disableFlip();
|
980 |
+
this.enablePan();
|
981 |
+
} else {
|
982 |
+
this.enableFlip();
|
983 |
+
this.disablePan();
|
984 |
+
}
|
985 |
+
|
986 |
+
this.options.main.onZoom(zoom);
|
987 |
+
};
|
988 |
+
|
989 |
+
FLIPBOOK.BookSwipe.prototype.rotateLeft = function () {
|
990 |
+
this.rotation = (this.rotation + 360 - 90) % 360;
|
991 |
+
|
992 |
+
for (var i = 0; i < this.pagesArr.length; i++) {
|
993 |
+
var page = this.pagesArr[i];
|
994 |
+
page.setRotation(this.rotation);
|
995 |
+
}
|
996 |
+
|
997 |
+
this.resizeInnerSlides();
|
998 |
+
this.onResize();
|
999 |
+
};
|
1000 |
+
|
1001 |
+
FLIPBOOK.BookSwipe.prototype.rotateRight = function () {
|
1002 |
+
this.rotation = (this.rotation + 360 + 90) % 360;
|
1003 |
+
|
1004 |
+
for (var i = 0; i < this.pagesArr.length; i++) {
|
1005 |
+
var page = this.pagesArr[i];
|
1006 |
+
page.setRotation(this.rotation);
|
1007 |
+
}
|
1008 |
+
|
1009 |
+
this.resizeInnerSlides();
|
1010 |
+
this.onResize();
|
1011 |
+
};
|
1012 |
+
|
1013 |
+
FLIPBOOK.BookSwipe.prototype.onSwipe = function (event, phase, distanceX, distanceY) {
|
1014 |
+
if (phase == 'start') {
|
1015 |
+
return;
|
1016 |
+
}
|
1017 |
+
};
|
1018 |
+
|
1019 |
+
FLIPBOOK.BookSwipe.prototype.onPageUnloaded = function (i) {
|
1020 |
+
var index = this.options.rightToLeft ? this.options.numPages - i - 1 : i;
|
1021 |
+
|
1022 |
+
this.pagesArr[index].unload();
|
1023 |
+
};
|
1024 |
+
|
1025 |
+
FLIPBOOK.BookSwipe.prototype.disableFlip = function () {
|
1026 |
+
this.flipEnabled = false;
|
1027 |
+
this.iscroll.disable();
|
1028 |
+
};
|
1029 |
+
|
1030 |
+
FLIPBOOK.BookSwipe.prototype.enableFlip = function () {
|
1031 |
+
if (this.options.numPages == 1) {
|
1032 |
+
this.disableFlip();
|
1033 |
+
return;
|
1034 |
+
}
|
1035 |
+
|
1036 |
+
this.flipEnabled = true;
|
1037 |
+
this.iscroll.enable();
|
1038 |
+
};
|
1039 |
+
|
1040 |
+
FLIPBOOK.BookSwipe.prototype.enablePan = function () {
|
1041 |
+
if (this.slides[0].iscroll) {
|
1042 |
+
this.slides[0].iscroll.enable();
|
1043 |
+
}
|
1044 |
+
if (this.slides[1].iscroll) {
|
1045 |
+
this.slides[1].iscroll.enable();
|
1046 |
+
}
|
1047 |
+
if (this.slides[2].iscroll) {
|
1048 |
+
this.slides[2].iscroll.enable();
|
1049 |
+
}
|
1050 |
+
};
|
1051 |
+
|
1052 |
+
FLIPBOOK.BookSwipe.prototype.disablePan = function () {
|
1053 |
+
if (this.slides[0].iscroll) {
|
1054 |
+
this.slides[0].iscroll.disable();
|
1055 |
+
}
|
1056 |
+
if (this.slides[1].iscroll) {
|
1057 |
+
this.slides[1].iscroll.disable();
|
1058 |
+
}
|
1059 |
+
if (this.slides[2].iscroll) {
|
1060 |
+
this.slides[2].iscroll.disable();
|
1061 |
+
}
|
1062 |
+
};
|
1063 |
+
|
1064 |
+
FLIPBOOK.PageSwipe = function (book, index, texture, html) {
|
1065 |
+
this.rotation = 0;
|
1066 |
+
this.index = index;
|
1067 |
+
this.options = book.options;
|
1068 |
+
this.texture = texture;
|
1069 |
+
this.html = html;
|
1070 |
+
this.index = index;
|
1071 |
+
|
1072 |
+
this.wrapper = document.createElement('div');
|
1073 |
+
this.wrapper.classList.add('flipbook-carousel-page');
|
1074 |
+
this.wrapper.dataset.page = index + 1;
|
1075 |
+
this.main = book.main;
|
1076 |
+
this.book = book;
|
1077 |
+
|
1078 |
+
this.inner = document.createElement('div');
|
1079 |
+
this.inner.classList.add('flipbook-carousel-page-inner');
|
1080 |
+
this.wrapper.appendChild(this.inner);
|
1081 |
+
|
1082 |
+
this.bg = document.createElement('div');
|
1083 |
+
this.bg.classList.add('flipbook-carousel-page-bg');
|
1084 |
+
this.inner.appendChild(this.bg);
|
1085 |
+
|
1086 |
+
this.htmlElement = document.createElement('div');
|
1087 |
+
this.htmlElement.classList.add('flipbook-page3-html');
|
1088 |
+
this.htmlElement.style.width = (1000 * this.options.pageWidth) / this.options.pageHeight + 'px';
|
1089 |
+
this.htmlElement.style.transform = 'scale(' + this.options.pageHeight / 1000 + ') translateZ(0)';
|
1090 |
+
this.inner.appendChild(this.htmlElement);
|
1091 |
+
|
1092 |
+
if (this.options.doublePage) {
|
1093 |
+
if (!this.options.rightToLeft && this.index % 2 === 0 && this.index > 0) {
|
1094 |
+
this.htmlElement.style.left = '-100%';
|
1095 |
+
} else if (this.options.rightToLeft && this.index % 2 === 1 && this.index > 0) {
|
1096 |
+
this.htmlElement.style.left = '-100%';
|
1097 |
+
} else {
|
1098 |
+
this.htmlElement.style.left = '0';
|
1099 |
+
}
|
1100 |
+
}
|
1101 |
+
|
1102 |
+
if (this.options.pagePreloader) {
|
1103 |
+
this.preloader = document.createElement('img');
|
1104 |
+
this.preloader.src = this.options.pagePreloader;
|
1105 |
+
this.preloader.classList.add('flipbook-page-preloader-image');
|
1106 |
+
this.inner.appendChild(this.preloader);
|
1107 |
+
} else {
|
1108 |
+
this.preloader = document.createElement('img');
|
1109 |
+
this.preloader.src = this.options.assets.spinner;
|
1110 |
+
this.preloader.classList.add('flipbook-page-preloader');
|
1111 |
+
this.inner.appendChild(this.preloader);
|
1112 |
+
}
|
1113 |
+
|
1114 |
+
this.setSize(this.pw, this.ph);
|
1115 |
+
};
|
1116 |
+
|
1117 |
+
FLIPBOOK.PageSwipe.prototype = {
|
1118 |
+
load: function (callback, thumb) {
|
1119 |
+
var size = this.options.pageTextureSize;
|
1120 |
+
|
1121 |
+
if (this.size >= size) {
|
1122 |
+
if (!thumb) {
|
1123 |
+
this.loadHTML();
|
1124 |
+
}
|
1125 |
+
if (callback) {
|
1126 |
+
callback.call(this);
|
1127 |
+
}
|
1128 |
+
return;
|
1129 |
+
}
|
1130 |
+
|
1131 |
+
this.size = size;
|
1132 |
+
|
1133 |
+
var self = this;
|
1134 |
+
|
1135 |
+
var index = this.options.rightToLeft ? this.options.numPages - this.index - 1 : this.index;
|
1136 |
+
var o = this.options;
|
1137 |
+
var p = o.pages[index];
|
1138 |
+
|
1139 |
+
this.options.main.loadPage(index, size, function (page) {
|
1140 |
+
page = page || {};
|
1141 |
+
|
1142 |
+
if (page && page.image) {
|
1143 |
+
var img = page.image[size] || page.image;
|
1144 |
+
img.classList.add('page-carousel-img');
|
1145 |
+
|
1146 |
+
if (self.index % 2 == 0 && ((p && p.side == 'left') || (p && p.side == 'right'))) {
|
1147 |
+
if (!img.clone) {
|
1148 |
+
img.clone = new Image();
|
1149 |
+
img.clone.src = img.src;
|
1150 |
+
}
|
1151 |
+
img = img.clone;
|
1152 |
+
}
|
1153 |
+
|
1154 |
+
self.bg.appendChild(img);
|
1155 |
+
|
1156 |
+
if (self.options.rightToLeft) {
|
1157 |
+
if (self.options.doublePage && self.index < self.options.numPages - 1 && self.index % 2 == 1) {
|
1158 |
+
img.style.left = '-100%';
|
1159 |
+
}
|
1160 |
+
|
1161 |
+
if (self.options.doublePage) {
|
1162 |
+
if (self.index == self.options.numPages - 1 || (self.index == 0 && self.options.backCover)) {
|
1163 |
+
img.style.width = '100%';
|
1164 |
+
} else {
|
1165 |
+
img.style.width = '200%';
|
1166 |
+
}
|
1167 |
+
} else {
|
1168 |
+
img.style.width = '100%';
|
1169 |
+
}
|
1170 |
+
} else {
|
1171 |
+
if (self.options.doublePage && self.index > 0 && self.index % 2 == 0) {
|
1172 |
+
img.style.left = '-100%';
|
1173 |
+
}
|
1174 |
+
|
1175 |
+
if (self.options.doublePage) {
|
1176 |
+
if (self.index == 0 || (self.index == self.options.numPages - 1 && self.options.backCover)) {
|
1177 |
+
img.style.width = '100%';
|
1178 |
+
} else {
|
1179 |
+
img.style.width = '200%';
|
1180 |
+
}
|
1181 |
+
} else {
|
1182 |
+
img.style.width = '100%';
|
1183 |
+
}
|
1184 |
+
}
|
1185 |
+
|
1186 |
+
self.preloader.remove();
|
1187 |
+
}
|
1188 |
+
|
1189 |
+
self.setRotation();
|
1190 |
+
|
1191 |
+
if (!thumb) {
|
1192 |
+
self.loadHTML();
|
1193 |
+
}
|
1194 |
+
|
1195 |
+
if (callback) {
|
1196 |
+
callback.call(self);
|
1197 |
+
}
|
1198 |
+
});
|
1199 |
+
},
|
1200 |
+
|
1201 |
+
loadHTML: function () {
|
1202 |
+
var self = this;
|
1203 |
+
|
1204 |
+
var index = !this.options.rightToLeft ? this.index : this.options.numPages - this.index - 1;
|
1205 |
+
|
1206 |
+
if (this.htmlContent) {
|
1207 |
+
this.updateHtmlContent();
|
1208 |
+
} else {
|
1209 |
+
this.options.main.loadPageHTML(index, function (html) {
|
1210 |
+
self.htmlContent = html;
|
1211 |
+
self.updateHtmlContent();
|
1212 |
+
});
|
1213 |
+
}
|
1214 |
+
},
|
1215 |
+
|
1216 |
+
hideHTML: function () {
|
1217 |
+
if (this.htmlContentVisible) {
|
1218 |
+
this.htmlElement.innerHTML = '';
|
1219 |
+
this.htmlContentVisible = false;
|
1220 |
+
this.main.trigger('hidepagehtml', { page: this });
|
1221 |
+
}
|
1222 |
+
},
|
1223 |
+
|
1224 |
+
startHTML: function () {
|
1225 |
+
this.book.startPageItems(this.wrapper);
|
1226 |
+
},
|
1227 |
+
|
1228 |
+
unload: function () {
|
1229 |
+
this.pageSize = 0;
|
1230 |
+
this.size = 0;
|
1231 |
+
this.inner.appendChild(this.preloader);
|
1232 |
+
},
|
1233 |
+
|
1234 |
+
dispose: function () {
|
1235 |
+
if (this.pageSize) {
|
1236 |
+
this.pageSize = null;
|
1237 |
+
this.bg.innerHTML = '';
|
1238 |
+
}
|
1239 |
+
},
|
1240 |
+
|
1241 |
+
setSize: function () {
|
1242 |
+
var w = this.options.pageWidth;
|
1243 |
+
var h = this.options.pageHeight;
|
1244 |
+
|
1245 |
+
if (this.rotation === 0 || this.rotation === 180) {
|
1246 |
+
this.wrapper.style.width = w + 'px';
|
1247 |
+
this.wrapper.style.height = h + 'px';
|
1248 |
+
this.pw = w;
|
1249 |
+
this.ph = h;
|
1250 |
+
} else {
|
1251 |
+
this.wrapper.style.width = h + 'px';
|
1252 |
+
this.wrapper.style.height = w + 'px';
|
1253 |
+
this.pw = h;
|
1254 |
+
this.ph = w;
|
1255 |
+
}
|
1256 |
+
|
1257 |
+
this.updateHtmlContent();
|
1258 |
+
},
|
1259 |
+
|
1260 |
+
setRotation: function (val) {
|
1261 |
+
this.setSize();
|
1262 |
+
|
1263 |
+
if (this.options.doublePage) {
|
1264 |
+
return;
|
1265 |
+
}
|
1266 |
+
|
1267 |
+
if (typeof val != 'undefined') {
|
1268 |
+
this.rotation = val;
|
1269 |
+
}
|
1270 |
+
if (this.img) {
|
1271 |
+
this.img.style.transform = 'rotate(' + this.rotation + 'deg) translateZ(0)';
|
1272 |
+
if (this.rotation === 90 || this.rotation === 270) {
|
1273 |
+
this.img.style.width = this.wrapper.clientHeight + 'px';
|
1274 |
+
this.img.style.height = this.wrapper.clientWidth + 'px';
|
1275 |
+
} else {
|
1276 |
+
this.img.style.width = this.wrapper.clientWidth + 'px';
|
1277 |
+
this.img.style.height = this.wrapper.clientHeight + 'px';
|
1278 |
+
}
|
1279 |
+
}
|
1280 |
+
},
|
1281 |
+
|
1282 |
+
updateHtmlContent: function () {
|
1283 |
+
var c = this.htmlContent;
|
1284 |
+
|
1285 |
+
if (c && !this.htmlContentVisible) {
|
1286 |
+
this.htmlContentVisible = true;
|
1287 |
+
|
1288 |
+
this.htmlElement.innerHTML = '';
|
1289 |
+
this.htmlElement.appendChild(this.htmlContent);
|
1290 |
+
this.main.trigger('showpagehtml', { page: this });
|
1291 |
+
}
|
1292 |
+
this.startHTML();
|
1293 |
+
},
|
1294 |
+
};
|
flipbook.webgl.js
ADDED
The diff for this file is too large to render.
See raw diff
|
|