1458 lines
48 KiB
JavaScript
1458 lines
48 KiB
JavaScript
/*!
|
|
* @license
|
|
* flipbook-vue v0.8.1
|
|
* Copyright © 2020 Takeshi Sone.
|
|
* Released under the MIT License.
|
|
*/
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
/*! @license Rematrix v0.4.1
|
|
|
|
Copyright 2019 Julian Lloyd.
|
|
|
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
of this software and associated documentation files (the "Software"), to deal
|
|
in the Software without restriction, including without limitation the rights
|
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
copies of the Software, and to permit persons to whom the Software is
|
|
furnished to do so, subject to the following conditions:
|
|
|
|
The above copyright notice and this permission notice shall be included in
|
|
all copies or substantial portions of the Software.
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
THE SOFTWARE.
|
|
*/
|
|
|
|
/**
|
|
* Transformation matrices in the browser come in two flavors:
|
|
*
|
|
* - `matrix` using 6 values (short)
|
|
* - `matrix3d` using 16 values (long)
|
|
*
|
|
* This utility follows this [conversion guide](https://goo.gl/EJlUQ1)
|
|
* to expand short form matrices to their equivalent long form.
|
|
*
|
|
* @param {array} source - Accepts both short and long form matrices.
|
|
* @return {array}
|
|
*/
|
|
function format(source) {
|
|
if (source.constructor !== Array) {
|
|
throw new TypeError('Expected array.')
|
|
}
|
|
if (source.length === 16) {
|
|
return source
|
|
}
|
|
if (source.length === 6) {
|
|
var matrix = identity();
|
|
matrix[0] = source[0];
|
|
matrix[1] = source[1];
|
|
matrix[4] = source[2];
|
|
matrix[5] = source[3];
|
|
matrix[12] = source[4];
|
|
matrix[13] = source[5];
|
|
return matrix
|
|
}
|
|
throw new RangeError('Expected array with either 6 or 16 values.')
|
|
}
|
|
|
|
/**
|
|
* Returns a matrix representing no transformation. The product of any matrix
|
|
* multiplied by the identity matrix will be the original matrix.
|
|
*
|
|
* > **Tip:** Similar to how `5 * 1 === 5`, where `1` is the identity.
|
|
*
|
|
* @return {array}
|
|
*/
|
|
function identity() {
|
|
var matrix = [];
|
|
for (var i = 0; i < 16; i++) {
|
|
i % 5 == 0 ? matrix.push(1) : matrix.push(0);
|
|
}
|
|
return matrix
|
|
}
|
|
|
|
/**
|
|
* Returns a 4x4 matrix describing the combined transformations
|
|
* of both arguments.
|
|
*
|
|
* > **Note:** Order is very important. For example, rotating 45°
|
|
* along the Z-axis, followed by translating 500 pixels along the
|
|
* Y-axis... is not the same as translating 500 pixels along the
|
|
* Y-axis, followed by rotating 45° along on the Z-axis.
|
|
*
|
|
* @param {array} m - Accepts both short and long form matrices.
|
|
* @param {array} x - Accepts both short and long form matrices.
|
|
* @return {array}
|
|
*/
|
|
function multiply(m, x) {
|
|
var fm = format(m);
|
|
var fx = format(x);
|
|
var product = [];
|
|
|
|
for (var i = 0; i < 4; i++) {
|
|
var row = [fm[i], fm[i + 4], fm[i + 8], fm[i + 12]];
|
|
for (var j = 0; j < 4; j++) {
|
|
var k = j * 4;
|
|
var col = [fx[k], fx[k + 1], fx[k + 2], fx[k + 3]];
|
|
var result = row[0] * col[0] + row[1] * col[1] + row[2] * col[2] + row[3] * col[3];
|
|
|
|
product[i + k] = result;
|
|
}
|
|
}
|
|
|
|
return product
|
|
}
|
|
|
|
/**
|
|
* Returns a 4x4 matrix describing perspective.
|
|
*
|
|
* @param {number} distance - Measured in pixels.
|
|
* @return {array}
|
|
*/
|
|
function perspective(distance) {
|
|
var matrix = identity();
|
|
matrix[11] = -1 / distance;
|
|
return matrix
|
|
}
|
|
|
|
/**
|
|
* Returns a 4x4 matrix describing Y-axis rotation.
|
|
*
|
|
* @param {number} angle - Measured in degrees.
|
|
* @return {array}
|
|
*/
|
|
function rotateY(angle) {
|
|
var theta = (Math.PI / 180) * angle;
|
|
var matrix = identity();
|
|
|
|
matrix[0] = matrix[10] = Math.cos(theta);
|
|
matrix[2] = matrix[8] = Math.sin(theta);
|
|
matrix[2] *= -1;
|
|
|
|
return matrix
|
|
}
|
|
|
|
/**
|
|
* Returns a CSS Transform property value equivalent to the source matrix.
|
|
*
|
|
* @param {array} source - Accepts both short and long form matrices.
|
|
* @return {string}
|
|
*/
|
|
function toString(source) {
|
|
return ("matrix3d(" + (format(source).join(', ')) + ")")
|
|
}
|
|
|
|
/**
|
|
* Returns a 4x4 matrix describing 2D translation. The first
|
|
* argument defines X-axis translation, and an optional second
|
|
* argument defines Y-axis translation.
|
|
*
|
|
* @param {number} distanceX - Measured in pixels.
|
|
* @param {number} [distanceY] - Measured in pixels.
|
|
* @return {array}
|
|
*/
|
|
function translate(distanceX, distanceY) {
|
|
var matrix = identity();
|
|
matrix[12] = distanceX;
|
|
|
|
if (distanceY) {
|
|
matrix[13] = distanceY;
|
|
}
|
|
|
|
return matrix
|
|
}
|
|
|
|
/**
|
|
* Returns a 4x4 matrix describing 3D translation. The first
|
|
* argument defines X-axis translation, the second argument defines Y-axis
|
|
* translation, and the third argument defines Z-axis translation.
|
|
*
|
|
* @param {number} distanceX - Measured in pixels.
|
|
* @param {number} distanceY - Measured in pixels.
|
|
* @param {number} distanceZ - Measured in pixels.
|
|
* @return {array}
|
|
*/
|
|
function translate3d(distanceX, distanceY, distanceZ) {
|
|
var matrix = identity();
|
|
if (distanceX !== undefined && distanceY !== undefined && distanceZ !== undefined) {
|
|
matrix[12] = distanceX;
|
|
matrix[13] = distanceY;
|
|
matrix[14] = distanceZ;
|
|
}
|
|
return matrix
|
|
}
|
|
|
|
var Matrix;
|
|
|
|
var Matrix$1 = Matrix = /*@__PURE__*/(function () {
|
|
function Matrix(arg) {
|
|
if (arg) {
|
|
if (arg.m) {
|
|
this.m = [].concat( arg.m );
|
|
} else {
|
|
this.m = [].concat( arg );
|
|
}
|
|
} else {
|
|
this.m = identity();
|
|
}
|
|
}
|
|
|
|
Matrix.prototype.clone = function clone () {
|
|
return new Matrix(this);
|
|
};
|
|
|
|
Matrix.prototype.multiply = function multiply$1 (m) {
|
|
return this.m = multiply(this.m, m);
|
|
};
|
|
|
|
Matrix.prototype.perspective = function perspective$1 (d) {
|
|
return this.multiply(perspective(d));
|
|
};
|
|
|
|
Matrix.prototype.transformX = function transformX (x) {
|
|
return (x * this.m[0] + this.m[12]) / (x * this.m[3] + this.m[15]);
|
|
};
|
|
|
|
Matrix.prototype.translate = function translate$1 (x, y) {
|
|
return this.multiply(translate(x, y));
|
|
};
|
|
|
|
Matrix.prototype.translate3d = function translate3d$1 (x, y, z) {
|
|
return this.multiply(translate3d(x, y, z));
|
|
};
|
|
|
|
Matrix.prototype.rotateY = function rotateY$1 (deg) {
|
|
return this.multiply(rotateY(deg));
|
|
};
|
|
|
|
Matrix.prototype.toString = function toString$1 () {
|
|
return toString(this.m);
|
|
};
|
|
|
|
return Matrix;
|
|
}());
|
|
|
|
var IE, easeIn, easeInOut, easeOut;
|
|
|
|
easeIn = function(x) {
|
|
return Math.pow(x, 2);
|
|
};
|
|
|
|
easeOut = function(x) {
|
|
return 1 - easeIn(1 - x);
|
|
};
|
|
|
|
easeInOut = function(x) {
|
|
if (x < 0.5) {
|
|
return easeIn(x * 2) / 2;
|
|
} else {
|
|
return 0.5 + easeOut((x - 0.5) * 2) / 2;
|
|
}
|
|
};
|
|
|
|
IE = /Trident/.test(navigator.userAgent);
|
|
|
|
var script = {
|
|
props: {
|
|
enabled: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
pages: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
pagesHiRes: {
|
|
type: Array,
|
|
default: function() {
|
|
return [];
|
|
}
|
|
},
|
|
flipDuration: {
|
|
type: Number,
|
|
default: 1000
|
|
},
|
|
zoomDuration: {
|
|
type: Number,
|
|
default: 500
|
|
},
|
|
zooms: {
|
|
type: Array,
|
|
default: function() {
|
|
return [1, 2, 4];
|
|
}
|
|
},
|
|
perspective: {
|
|
type: Number,
|
|
default: 2400
|
|
},
|
|
nPolygons: {
|
|
type: Number,
|
|
default: 10
|
|
},
|
|
ambient: {
|
|
type: Number,
|
|
default: 0.4
|
|
},
|
|
gloss: {
|
|
type: Number,
|
|
default: 0.6
|
|
},
|
|
swipeMin: {
|
|
type: Number,
|
|
default: 3
|
|
},
|
|
singlePage: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
forwardDirection: {
|
|
validator: function(val) {
|
|
return val === 'right' || val === 'left';
|
|
},
|
|
default: 'right'
|
|
},
|
|
centering: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
startPage: {
|
|
type: Number,
|
|
default: null
|
|
}
|
|
},
|
|
data: function() {
|
|
return {
|
|
viewWidth: 0,
|
|
viewHeight: 0,
|
|
imageWidth: null,
|
|
imageHeight: null,
|
|
displayedPages: 1,
|
|
nImageLoad: 0,
|
|
nImageLoadTrigger: 0,
|
|
imageLoadCallback: null,
|
|
currentPage: 0,
|
|
firstPage: 0,
|
|
secondPage: 1,
|
|
zoomIndex: 0,
|
|
zoom: 1,
|
|
zooming: false,
|
|
touchStartX: null,
|
|
touchStartY: null,
|
|
maxMove: 0,
|
|
activeCursor: null,
|
|
hasTouchEvents: false,
|
|
hasPointerEvents: false,
|
|
minX: 2e308,
|
|
maxX: -2e308,
|
|
preloadedImages: {},
|
|
flip: {
|
|
progress: 0,
|
|
direction: null,
|
|
frontImage: null,
|
|
backImage: null,
|
|
auto: false,
|
|
opacity: 1
|
|
},
|
|
currentCenterOffset: null,
|
|
animatingCenter: false,
|
|
startScrollLeft: 0,
|
|
startScrollTop: 0,
|
|
scrollLeft: 0,
|
|
scrollTop: 0
|
|
};
|
|
},
|
|
computed: {
|
|
canFlipLeft: function() {
|
|
if (this.forwardDirection === 'left') {
|
|
return this.canGoForward;
|
|
} else {
|
|
return this.canGoBack;
|
|
}
|
|
},
|
|
canFlipRight: function() {
|
|
if (this.forwardDirection === 'right') {
|
|
return this.canGoForward;
|
|
} else {
|
|
return this.canGoBack;
|
|
}
|
|
},
|
|
canZoomIn: function() {
|
|
return !this.zooming && this.zoomIndex < this.zooms_.length - 1;
|
|
},
|
|
canZoomOut: function() {
|
|
return !this.zooming && this.zoomIndex > 0;
|
|
},
|
|
numPages: function() {
|
|
if (this.pages[0] === null) {
|
|
return this.pages.length - 1;
|
|
} else {
|
|
return this.pages.length;
|
|
}
|
|
},
|
|
page: function() {
|
|
if (this.pages[0] !== null) {
|
|
return this.currentPage + 1;
|
|
} else {
|
|
return Math.max(1, this.currentPage);
|
|
}
|
|
},
|
|
zooms_: function() {
|
|
return this.zooms || [1];
|
|
},
|
|
canGoForward: function() {
|
|
return !this.flip.direction && this.currentPage < this.pages.length - this.displayedPages;
|
|
},
|
|
canGoBack: function() {
|
|
return !this.flip.direction && this.currentPage >= this.displayedPages && !(this.displayedPages === 1 && !this.pageUrl(this.firstPage - 1));
|
|
},
|
|
leftPage: function() {
|
|
if (this.forwardDirection === 'right' || this.displayedPages === 1) {
|
|
return this.firstPage;
|
|
} else {
|
|
return this.secondPage;
|
|
}
|
|
},
|
|
rightPage: function() {
|
|
if (this.forwardDirection === 'left') {
|
|
return this.firstPage;
|
|
} else {
|
|
return this.secondPage;
|
|
}
|
|
},
|
|
showLeftPage: function() {
|
|
return this.pageUrl(this.leftPage);
|
|
},
|
|
showRightPage: function() {
|
|
return this.pageUrl(this.rightPage) && this.displayedPages === 2;
|
|
},
|
|
cursor: function() {
|
|
if (this.activeCursor) {
|
|
return this.activeCursor;
|
|
} else if (IE) {
|
|
return 'auto';
|
|
} else if (this.canZoomIn) {
|
|
return 'zoom-in';
|
|
} else if (this.canZoomOut) {
|
|
return 'zoom-out';
|
|
} else {
|
|
return 'grab';
|
|
}
|
|
},
|
|
pageScale: function() {
|
|
var scale, vw, xScale, yScale;
|
|
vw = this.viewWidth / this.displayedPages;
|
|
xScale = vw / this.imageWidth;
|
|
yScale = this.viewHeight / this.imageHeight;
|
|
scale = xScale < yScale ? xScale : yScale;
|
|
if (scale < 1) {
|
|
return scale;
|
|
} else {
|
|
return 1;
|
|
}
|
|
},
|
|
pageWidth: function() {
|
|
return Math.round(this.imageWidth * this.pageScale);
|
|
},
|
|
pageHeight: function() {
|
|
return Math.round(this.imageHeight * this.pageScale);
|
|
},
|
|
xMargin: function() {
|
|
return (this.viewWidth - this.pageWidth * this.displayedPages) / 2;
|
|
},
|
|
yMargin: function() {
|
|
return (this.viewHeight - this.pageHeight) / 2;
|
|
},
|
|
polygonWidth: function() {
|
|
var w;
|
|
w = this.pageWidth / this.nPolygons;
|
|
w = Math.ceil(w + 1 / this.zoom);
|
|
return w + 'px';
|
|
},
|
|
polygonHeight: function() {
|
|
return this.pageHeight + 'px';
|
|
},
|
|
polygonBgSize: function() {
|
|
return ((this.pageWidth) + "px " + (this.pageHeight) + "px");
|
|
},
|
|
polygonArray: function() {
|
|
return this.makePolygonArray('front').concat(this.makePolygonArray('back'));
|
|
},
|
|
boundingLeft: function() {
|
|
var x;
|
|
if (this.displayedPages === 1) {
|
|
return this.xMargin;
|
|
} else {
|
|
x = this.pageUrl(this.leftPage) ? this.xMargin : this.viewWidth / 2;
|
|
if (x < this.minX) {
|
|
return x;
|
|
} else {
|
|
return this.minX;
|
|
}
|
|
}
|
|
},
|
|
boundingRight: function() {
|
|
var x;
|
|
if (this.displayedPages === 1) {
|
|
return this.viewWidth - this.xMargin;
|
|
} else {
|
|
x = this.pageUrl(this.rightPage) ? this.viewWidth - this.xMargin : this.viewWidth / 2;
|
|
if (x > this.maxX) {
|
|
return x;
|
|
} else {
|
|
return this.maxX;
|
|
}
|
|
}
|
|
},
|
|
centerOffset: function() {
|
|
var retval;
|
|
retval = this.centering ? Math.round(this.viewWidth / 2 - (this.boundingLeft + this.boundingRight) / 2) : 0;
|
|
if (this.currentCenterOffset === null && this.imageWidth !== null) {
|
|
this.currentCenterOffset = retval;
|
|
}
|
|
return retval;
|
|
},
|
|
centerOffsetSmoothed: function() {
|
|
return Math.round(this.currentCenterOffset);
|
|
},
|
|
dragToScroll: function() {
|
|
return !this.hasTouchEvents;
|
|
},
|
|
scrollLeftMin: function() {
|
|
var w;
|
|
w = (this.boundingRight - this.boundingLeft) * this.zoom;
|
|
if (w < this.viewWidth) {
|
|
return (this.boundingLeft + this.centerOffsetSmoothed) * this.zoom - (this.viewWidth - w) / 2;
|
|
} else {
|
|
return (this.boundingLeft + this.centerOffsetSmoothed) * this.zoom;
|
|
}
|
|
},
|
|
scrollLeftMax: function() {
|
|
var w;
|
|
w = (this.boundingRight - this.boundingLeft) * this.zoom;
|
|
if (w < this.viewWidth) {
|
|
return (this.boundingLeft + this.centerOffsetSmoothed) * this.zoom - (this.viewWidth - w) / 2;
|
|
} else {
|
|
return (this.boundingRight + this.centerOffsetSmoothed) * this.zoom - this.viewWidth;
|
|
}
|
|
},
|
|
scrollTopMin: function() {
|
|
var h;
|
|
h = this.pageHeight * this.zoom;
|
|
if (h < this.viewHeight) {
|
|
return this.yMargin * this.zoom - (this.viewHeight - h) / 2;
|
|
} else {
|
|
return this.yMargin * this.zoom;
|
|
}
|
|
},
|
|
scrollTopMax: function() {
|
|
var h;
|
|
h = this.pageHeight * this.zoom;
|
|
if (h < this.viewHeight) {
|
|
return this.yMargin * this.zoom - (this.viewHeight - h) / 2;
|
|
} else {
|
|
return (this.yMargin + this.pageHeight) * this.zoom - this.viewHeight;
|
|
}
|
|
},
|
|
scrollLeftLimited: function() {
|
|
return Math.min(this.scrollLeftMax, Math.max(this.scrollLeftMin, this.scrollLeft));
|
|
},
|
|
scrollTopLimited: function() {
|
|
return Math.min(this.scrollTopMax, Math.max(this.scrollTopMin, this.scrollTop));
|
|
}
|
|
},
|
|
mounted: function() {
|
|
window.addEventListener('resize', this.onResize, {
|
|
passive: true
|
|
});
|
|
this.onResize();
|
|
this.preloadImages();
|
|
this.zoom = this.zooms_[0];
|
|
return this.goToPage(this.startPage);
|
|
},
|
|
beforeDestroy: function() {
|
|
return window.removeEventListener('resize', this.onResize, {
|
|
passive: true
|
|
});
|
|
},
|
|
methods: {
|
|
onResize: function() {
|
|
var viewport;
|
|
viewport = this.$refs.viewport;
|
|
if (!viewport) {
|
|
return;
|
|
}
|
|
this.viewWidth = viewport.clientWidth;
|
|
this.viewHeight = viewport.clientHeight;
|
|
this.displayedPages = this.viewWidth > this.viewHeight && !this.singlePage ? 2 : 1;
|
|
if (this.displayedPages === 2) {
|
|
this.currentPage &= ~1;
|
|
}
|
|
this.fixFirstPage();
|
|
this.minX = 2e308;
|
|
return this.maxX = -2e308;
|
|
},
|
|
fixFirstPage: function() {
|
|
if (this.displayedPages === 1 && this.currentPage === 0 && this.pages.length && !this.pageUrl(0)) {
|
|
return this.currentPage++;
|
|
}
|
|
},
|
|
pageUrl: function(page, hiRes) {
|
|
if ( hiRes === void 0 ) hiRes = false;
|
|
|
|
var url;
|
|
if (hiRes && this.zoom > 1 && !this.zooming) {
|
|
url = this.pagesHiRes[page];
|
|
if (url) {
|
|
return url;
|
|
}
|
|
}
|
|
return this.pages[page] || null;
|
|
},
|
|
flipLeft: function() {
|
|
if (!this.canFlipLeft) {
|
|
return;
|
|
}
|
|
return this.flipStart('left', true);
|
|
},
|
|
flipRight: function() {
|
|
if (!this.canFlipRight) {
|
|
return;
|
|
}
|
|
return this.flipStart('right', true);
|
|
},
|
|
makePolygonArray: function(face) {
|
|
var bgImg, bgPos, dRadian, dRotate, direction, i, image, j, lighting, m, originRight, pageMatrix, pageRotation, pageX, polygonWidth, progress, rad, radian, radius, ref, results, rotate, theta, x, x0, x1, z;
|
|
if (!this.flip.direction) {
|
|
return [];
|
|
}
|
|
progress = this.flip.progress;
|
|
direction = this.flip.direction;
|
|
if (this.displayedPages === 1 && direction !== this.forwardDirection) {
|
|
progress = 1 - progress;
|
|
direction = this.forwardDirection;
|
|
}
|
|
this.flip.opacity = this.displayedPages === 1 && progress > .7 ? 1 - (progress - .7) / .3 : 1;
|
|
image = face === 'front' ? this.flip.frontImage : this.flip.backImage;
|
|
bgImg = image && ("url('" + image + "')");
|
|
polygonWidth = this.pageWidth / this.nPolygons;
|
|
pageX = this.xMargin;
|
|
originRight = false;
|
|
if (this.displayedPages === 1) {
|
|
if (this.forwardDirection === 'right') {
|
|
if (face === 'back') {
|
|
originRight = true;
|
|
pageX = this.xMargin - this.pageWidth;
|
|
}
|
|
} else {
|
|
if (direction === 'left') {
|
|
if (face === 'back') {
|
|
pageX = this.pageWidth - this.xMargin;
|
|
} else {
|
|
originRight = true;
|
|
}
|
|
} else {
|
|
if (face === 'front') {
|
|
pageX = this.pageWidth - this.xMargin;
|
|
} else {
|
|
originRight = true;
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
if (direction === 'left') {
|
|
if (face === 'back') {
|
|
pageX = this.viewWidth / 2;
|
|
} else {
|
|
originRight = true;
|
|
}
|
|
} else {
|
|
if (face === 'front') {
|
|
pageX = this.viewWidth / 2;
|
|
} else {
|
|
originRight = true;
|
|
}
|
|
}
|
|
}
|
|
pageMatrix = new Matrix$1();
|
|
pageMatrix.translate(this.viewWidth / 2);
|
|
pageMatrix.perspective(this.perspective);
|
|
pageMatrix.translate(-this.viewWidth / 2);
|
|
pageMatrix.translate(pageX, this.yMargin);
|
|
pageRotation = 0;
|
|
if (progress > 0.5) {
|
|
pageRotation = -(progress - 0.5) * 2 * 180;
|
|
}
|
|
if (direction === 'left') {
|
|
pageRotation = -pageRotation;
|
|
}
|
|
if (face === 'back') {
|
|
pageRotation += 180;
|
|
}
|
|
if (pageRotation) {
|
|
if (originRight) {
|
|
pageMatrix.translate(this.pageWidth);
|
|
}
|
|
pageMatrix.rotateY(pageRotation);
|
|
if (originRight) {
|
|
pageMatrix.translate(-this.pageWidth);
|
|
}
|
|
}
|
|
if (progress < 0.5) {
|
|
theta = progress * 2 * Math.PI;
|
|
} else {
|
|
theta = (1 - (progress - 0.5) * 2) * Math.PI;
|
|
}
|
|
if (theta === 0) {
|
|
theta = 1e-9;
|
|
}
|
|
radius = this.pageWidth / theta;
|
|
radian = 0;
|
|
dRadian = theta / this.nPolygons;
|
|
rotate = dRadian / 2 / Math.PI * 180;
|
|
dRotate = dRadian / Math.PI * 180;
|
|
if (originRight) {
|
|
rotate = -theta / Math.PI * 180 + dRotate / 2;
|
|
}
|
|
if (face === 'back') {
|
|
rotate = -rotate;
|
|
dRotate = -dRotate;
|
|
}
|
|
this.minX = 2e308;
|
|
this.maxX = -2e308;
|
|
results = [];
|
|
for (i = j = 0, ref = this.nPolygons; (0 <= ref ? j < ref : j > ref); i = 0 <= ref ? ++j : --j) {
|
|
bgPos = (i / (this.nPolygons - 1) * 100) + "% 0px";
|
|
m = pageMatrix.clone();
|
|
rad = originRight ? theta - radian : radian;
|
|
x = Math.sin(rad) * radius;
|
|
if (originRight) {
|
|
x = this.pageWidth - x;
|
|
}
|
|
z = (1 - Math.cos(rad)) * radius;
|
|
if (face === 'back') {
|
|
z = -z;
|
|
}
|
|
m.translate3d(x, 0, z);
|
|
m.rotateY(-rotate);
|
|
x0 = m.transformX(0);
|
|
x1 = m.transformX(polygonWidth);
|
|
this.maxX = Math.max(Math.max(x0, x1), this.maxX);
|
|
this.minX = Math.min(Math.min(x0, x1), this.minX);
|
|
lighting = this.computeLighting(pageRotation - rotate, dRotate);
|
|
radian += dRadian;
|
|
rotate += dRotate;
|
|
results.push([face + i, bgImg, lighting, bgPos, m.toString(), Math.abs(Math.round(z))]);
|
|
}
|
|
return results;
|
|
},
|
|
computeLighting: function(rot, dRotate) {
|
|
var DEG, POW, blackness, diffuse, gradients, lightingPoints, specular;
|
|
gradients = [];
|
|
lightingPoints = [-0.5, -0.25, 0, 0.25, 0.5];
|
|
if (this.ambient < 1) {
|
|
blackness = 1 - this.ambient;
|
|
diffuse = lightingPoints.map(function (d) {
|
|
return (1 - Math.cos((rot - dRotate * d) / 180 * Math.PI)) * blackness;
|
|
});
|
|
gradients.push(("linear-gradient(to right,\n rgba(0, 0, 0, " + (diffuse[0]) + "),\n rgba(0, 0, 0, " + (diffuse[1]) + ") 25%,\n rgba(0, 0, 0, " + (diffuse[2]) + ") 50%,\n rgba(0, 0, 0, " + (diffuse[3]) + ") 75%,\n rgba(0, 0, 0, " + (diffuse[4]) + "))"));
|
|
}
|
|
if (this.gloss > 0 && !IE) {
|
|
DEG = 30;
|
|
POW = 200;
|
|
specular = lightingPoints.map(function (d) {
|
|
return Math.max(Math.pow( Math.cos((rot + DEG - dRotate * d) / 180 * Math.PI), POW ), Math.pow( Math.cos((rot - DEG - dRotate * d) / 180 * Math.PI), POW ));
|
|
});
|
|
gradients.push(("linear-gradient(to right,\n rgba(255, 255, 255, " + (specular[0] * this.gloss) + "),\n rgba(255, 255, 255, " + (specular[1] * this.gloss) + ") 25%,\n rgba(255, 255, 255, " + (specular[2] * this.gloss) + ") 50%,\n rgba(255, 255, 255, " + (specular[3] * this.gloss) + ") 75%,\n rgba(255, 255, 255, " + (specular[4] * this.gloss) + "))"));
|
|
}
|
|
return gradients.join(',');
|
|
},
|
|
flipStart: function(direction, auto) {
|
|
var this$1 = this;
|
|
|
|
if (direction !== this.forwardDirection) {
|
|
if (this.displayedPages === 1) {
|
|
this.flip.frontImage = this.pageUrl(this.currentPage - 1);
|
|
this.flip.backImage = null;
|
|
} else {
|
|
this.flip.frontImage = this.pageUrl(this.firstPage);
|
|
this.flip.backImage = this.pageUrl(this.currentPage - this.displayedPages + 1);
|
|
}
|
|
} else {
|
|
if (this.displayedPages === 1) {
|
|
this.flip.frontImage = this.pageUrl(this.currentPage);
|
|
this.flip.backImage = null;
|
|
} else {
|
|
this.flip.frontImage = this.pageUrl(this.secondPage);
|
|
this.flip.backImage = this.pageUrl(this.currentPage + this.displayedPages);
|
|
}
|
|
}
|
|
this.flip.direction = direction;
|
|
this.flip.progress = 0;
|
|
return requestAnimationFrame(function () {
|
|
return requestAnimationFrame(function () {
|
|
if (this$1.flip.direction !== this$1.forwardDirection) {
|
|
if (this$1.displayedPages === 2) {
|
|
this$1.firstPage = this$1.currentPage - this$1.displayedPages;
|
|
}
|
|
} else {
|
|
if (this$1.displayedPages === 1) {
|
|
this$1.firstPage = this$1.currentPage + this$1.displayedPages;
|
|
} else {
|
|
this$1.secondPage = this$1.currentPage + 1 + this$1.displayedPages;
|
|
}
|
|
}
|
|
if (auto) {
|
|
return this$1.flipAuto(true);
|
|
}
|
|
});
|
|
});
|
|
},
|
|
flipAuto: function(ease) {
|
|
var this$1 = this;
|
|
|
|
var animate, duration, startRatio, t0;
|
|
t0 = Date.now();
|
|
duration = this.flipDuration * (1 - this.flip.progress);
|
|
startRatio = this.flip.progress;
|
|
this.flip.auto = true;
|
|
this.$emit(("flip-" + (this.flip.direction) + "-start"), this.page);
|
|
animate = function () {
|
|
return requestAnimationFrame(function () {
|
|
var ratio, t;
|
|
t = Date.now() - t0;
|
|
ratio = startRatio + t / duration;
|
|
if (ratio > 1) {
|
|
ratio = 1;
|
|
}
|
|
this$1.flip.progress = ease ? easeInOut(ratio) : ratio;
|
|
if (ratio < 1) {
|
|
return animate();
|
|
} else {
|
|
if (this$1.flip.direction !== this$1.forwardDirection) {
|
|
this$1.currentPage -= this$1.displayedPages;
|
|
} else {
|
|
this$1.currentPage += this$1.displayedPages;
|
|
}
|
|
this$1.$emit(("flip-" + (this$1.flip.direction) + "-end"), this$1.page);
|
|
if (this$1.displayedPages === 1 && this$1.flip.direction === this$1.forwardDirection) {
|
|
this$1.flip.direction = null;
|
|
} else {
|
|
this$1.onImageLoad(1, function () {
|
|
return this$1.flip.direction = null;
|
|
});
|
|
}
|
|
return this$1.flip.auto = false;
|
|
}
|
|
});
|
|
};
|
|
return animate();
|
|
},
|
|
flipRevert: function() {
|
|
var this$1 = this;
|
|
|
|
var animate, duration, startRatio, t0;
|
|
t0 = Date.now();
|
|
duration = this.flipDuration * this.flip.progress;
|
|
startRatio = this.flip.progress;
|
|
this.flip.auto = true;
|
|
animate = function () {
|
|
return requestAnimationFrame(function () {
|
|
var ratio, t;
|
|
t = Date.now() - t0;
|
|
ratio = startRatio - startRatio * t / duration;
|
|
if (ratio < 0) {
|
|
ratio = 0;
|
|
}
|
|
this$1.flip.progress = ratio;
|
|
if (ratio > 0) {
|
|
return animate();
|
|
} else {
|
|
this$1.firstPage = this$1.currentPage;
|
|
this$1.secondPage = this$1.currentPage + 1;
|
|
if (this$1.displayedPages === 1 && this$1.flip.direction !== this$1.forwardDirection) {
|
|
this$1.flip.direction = null;
|
|
} else {
|
|
this$1.onImageLoad(1, function () {
|
|
return this$1.flip.direction = null;
|
|
});
|
|
}
|
|
return this$1.flip.auto = false;
|
|
}
|
|
});
|
|
};
|
|
return animate();
|
|
},
|
|
onImageLoad: function(trigger, cb) {
|
|
this.nImageLoad = 0;
|
|
this.nImageLoadTrigger = trigger;
|
|
return this.imageLoadCallback = cb;
|
|
},
|
|
didLoadImage: function(ev) {
|
|
if (this.imageWidth === null) {
|
|
this.imageWidth = (ev.target || ev.path[0]).naturalWidth;
|
|
this.imageHeight = (ev.target || ev.path[0]).naturalHeight;
|
|
}
|
|
if (!this.imageLoadCallback) {
|
|
return;
|
|
}
|
|
if (++this.nImageLoad >= this.nImageLoadTrigger) {
|
|
this.imageLoadCallback();
|
|
return this.imageLoadCallback = null;
|
|
}
|
|
},
|
|
zoomIn: function() {
|
|
if (!this.canZoomIn) {
|
|
return;
|
|
}
|
|
this.zoomIndex += 1;
|
|
return this.zoomTo(this.zooms_[this.zoomIndex]);
|
|
},
|
|
zoomOut: function() {
|
|
if (!this.canZoomOut) {
|
|
return;
|
|
}
|
|
this.zoomIndex -= 1;
|
|
return this.zoomTo(this.zooms_[this.zoomIndex]);
|
|
},
|
|
zoomTo: function(zoom, fixedX, fixedY) {
|
|
var this$1 = this;
|
|
|
|
var animate, containerFixedX, containerFixedY, end, endX, endY, start, startX, startY, t0, viewport;
|
|
start = this.zoom;
|
|
end = zoom;
|
|
viewport = this.$refs.viewport;
|
|
startX = viewport.scrollLeft;
|
|
startY = viewport.scrollTop;
|
|
fixedX || (fixedX = viewport.clientWidth / 2);
|
|
fixedY || (fixedY = viewport.clientHeight / 2);
|
|
containerFixedX = fixedX + startX;
|
|
containerFixedY = fixedY + startY;
|
|
endX = containerFixedX / start * end - fixedX;
|
|
endY = containerFixedY / start * end - fixedY;
|
|
t0 = Date.now();
|
|
this.zooming = true;
|
|
this.$emit('zoom-start', zoom);
|
|
animate = function () {
|
|
return requestAnimationFrame(function () {
|
|
var ratio, t;
|
|
t = Date.now() - t0;
|
|
ratio = t / this$1.zoomDuration;
|
|
if (ratio > 1 || IE) {
|
|
ratio = 1;
|
|
}
|
|
ratio = easeInOut(ratio);
|
|
this$1.zoom = start + (end - start) * ratio;
|
|
this$1.scrollLeft = startX + (endX - startX) * ratio;
|
|
this$1.scrollTop = startY + (endY - startY) * ratio;
|
|
if (t < this$1.zoomDuration) {
|
|
return animate();
|
|
} else {
|
|
this$1.$emit('zoom-end', zoom);
|
|
this$1.zooming = false;
|
|
this$1.zoom = zoom;
|
|
this$1.scrollLeft = endX;
|
|
return this$1.scrollTop = endY;
|
|
}
|
|
});
|
|
};
|
|
animate();
|
|
if (end > 1) {
|
|
return this.preloadImages(true);
|
|
}
|
|
},
|
|
zoomAt: function(touch) {
|
|
var rect, x, y;
|
|
rect = this.$refs.viewport.getBoundingClientRect();
|
|
x = touch.pageX - rect.left;
|
|
y = touch.pageY - rect.top;
|
|
this.zoomIndex = (this.zoomIndex + 1) % this.zooms_.length;
|
|
return this.zoomTo(this.zooms_[this.zoomIndex], x, y);
|
|
},
|
|
swipeStart: function(touch) {
|
|
if (!this.enabled) {
|
|
return;
|
|
}
|
|
this.touchStartX = touch.pageX;
|
|
this.touchStartY = touch.pageY;
|
|
this.maxMove = 0;
|
|
if (this.zoom <= 1) {
|
|
return this.activeCursor = 'grab';
|
|
} else {
|
|
this.startScrollLeft = this.$refs.viewport.scrollLeft;
|
|
this.startScrollTop = this.$refs.viewport.scrollTop;
|
|
return this.activeCursor = 'all-scroll';
|
|
}
|
|
},
|
|
swipeMove: function(touch) {
|
|
var x, y;
|
|
if (this.touchStartX == null) {
|
|
return;
|
|
}
|
|
x = touch.pageX - this.touchStartX;
|
|
y = touch.pageY - this.touchStartY;
|
|
this.maxMove = Math.max(this.maxMove, Math.abs(x));
|
|
this.maxMove = Math.max(this.maxMove, Math.abs(y));
|
|
if (this.zoom > 1) {
|
|
if (this.dragToScroll) {
|
|
this.dragScroll(x, y);
|
|
}
|
|
return;
|
|
}
|
|
if (Math.abs(y) > Math.abs(x)) {
|
|
return;
|
|
}
|
|
this.activeCursor = 'grabbing';
|
|
if (x > 0) {
|
|
if (this.flip.direction === null && this.canFlipLeft && x >= this.swipeMin) {
|
|
this.flipStart('left', false);
|
|
}
|
|
if (this.flip.direction === 'left') {
|
|
this.flip.progress = x / this.pageWidth;
|
|
if (this.flip.progress > 1) {
|
|
this.flip.progress = 1;
|
|
}
|
|
}
|
|
} else {
|
|
if (this.flip.direction === null && this.canFlipRight && x <= -this.swipeMin) {
|
|
this.flipStart('right', false);
|
|
}
|
|
if (this.flip.direction === 'right') {
|
|
this.flip.progress = -x / this.pageWidth;
|
|
if (this.flip.progress > 1) {
|
|
this.flip.progress = 1;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
},
|
|
swipeEnd: function(touch) {
|
|
if (this.touchStartX == null) {
|
|
return;
|
|
}
|
|
if (this.maxMove < this.swipeMin) {
|
|
this.zoomAt(touch);
|
|
}
|
|
if (this.flip.direction !== null && !this.flip.auto) {
|
|
if (this.flip.progress > 1 / 4) {
|
|
this.flipAuto(false);
|
|
} else {
|
|
this.flipRevert();
|
|
}
|
|
}
|
|
this.touchStartX = null;
|
|
return this.activeCursor = null;
|
|
},
|
|
onTouchStart: function(ev) {
|
|
this.hasTouchEvents = true;
|
|
return this.swipeStart(ev.changedTouches[0]);
|
|
},
|
|
onTouchMove: function(ev) {
|
|
if (this.swipeMove(ev.changedTouches[0])) {
|
|
if (ev.cancelable) {
|
|
return ev.preventDefault();
|
|
}
|
|
}
|
|
},
|
|
onTouchEnd: function(ev) {
|
|
return this.swipeEnd(ev.changedTouches[0]);
|
|
},
|
|
onPointerDown: function(ev) {
|
|
this.hasPointerEvents = true;
|
|
if (this.hasTouchEvents) {
|
|
return;
|
|
}
|
|
if (ev.which && ev.which !== 1) { // Ignore right-click
|
|
return;
|
|
}
|
|
this.swipeStart(ev);
|
|
try {
|
|
return ev.target.setPointerCapture(ev.pointerId);
|
|
} catch (error) {
|
|
|
|
}
|
|
},
|
|
onPointerMove: function(ev) {
|
|
if (!this.hasTouchEvents) {
|
|
return this.swipeMove(ev);
|
|
}
|
|
},
|
|
onPointerUp: function(ev) {
|
|
if (this.hasTouchEvents) {
|
|
return;
|
|
}
|
|
this.swipeEnd(ev);
|
|
try {
|
|
return ev.target.releasePointerCapture(ev.pointerId);
|
|
} catch (error) {
|
|
|
|
}
|
|
},
|
|
onMouseDown: function(ev) {
|
|
if (this.hasTouchEvents || this.hasPointerEvents) {
|
|
return;
|
|
}
|
|
if (ev.which && ev.which !== 1) { // Ignore right-click
|
|
return;
|
|
}
|
|
return this.swipeStart(ev);
|
|
},
|
|
onMouseMove: function(ev) {
|
|
if (!(this.hasTouchEvents || this.hasPointerEvents)) {
|
|
return this.swipeMove(ev);
|
|
}
|
|
},
|
|
onMouseUp: function(ev) {
|
|
if (!(this.hasTouchEvents || this.hasPointerEvents)) {
|
|
return this.swipeEnd(ev);
|
|
}
|
|
},
|
|
dragScroll: function(x, y) {
|
|
this.scrollLeft = this.startScrollLeft - x;
|
|
return this.scrollTop = this.startScrollTop - y;
|
|
},
|
|
onWheel: function(ev) {
|
|
if (this.zoom > 1 && this.dragToScroll) {
|
|
this.scrollLeft = this.$refs.viewport.scrollLeft + ev.deltaX;
|
|
this.scrollTop = this.$refs.viewport.scrollTop + ev.deltaY;
|
|
if (ev.cancelable) {
|
|
return ev.preventDefault();
|
|
}
|
|
}
|
|
},
|
|
preloadImages: function(hiRes) {
|
|
if ( hiRes === void 0 ) hiRes = false;
|
|
|
|
var i, img, j, k, ref, ref1, ref2, ref3, url;
|
|
if (Object.keys(this.preloadedImages).length >= 10) {
|
|
this.preloadedImages = {};
|
|
}
|
|
for (i = j = ref = this.currentPage - 3, ref1 = this.currentPage + 3; (ref <= ref1 ? j <= ref1 : j >= ref1); i = ref <= ref1 ? ++j : --j) {
|
|
url = this.pageUrl(i);
|
|
if (url) {
|
|
if (!this.preloadedImages[url]) {
|
|
img = new Image();
|
|
img.src = url;
|
|
this.preloadedImages[url] = img;
|
|
}
|
|
}
|
|
}
|
|
if (hiRes) {
|
|
for (i = k = ref2 = this.currentPage, ref3 = this.currentPage + this.displayedPages; (ref2 <= ref3 ? k < ref3 : k > ref3); i = ref2 <= ref3 ? ++k : --k) {
|
|
url = this.pagesHiRes[i];
|
|
if (url) {
|
|
if (!this.preloadedImages[url]) {
|
|
img = new Image();
|
|
img.src = url;
|
|
this.preloadedImages[url] = img;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
goToPage: function(p) {
|
|
if (p === null || p === this.page) {
|
|
return;
|
|
}
|
|
if (this.pages[0] === null) {
|
|
if (this.displayedPages === 2 && p === 1) {
|
|
this.currentPage = 0;
|
|
} else {
|
|
this.currentPage = p;
|
|
}
|
|
} else {
|
|
this.currentPage = p - 1;
|
|
}
|
|
this.minX = 2e308;
|
|
this.maxX = -2e308;
|
|
return this.currentCenterOffset = this.centerOffset;
|
|
}
|
|
},
|
|
watch: {
|
|
currentPage: function() {
|
|
this.firstPage = this.currentPage;
|
|
this.secondPage = this.currentPage + 1;
|
|
return this.preloadImages();
|
|
},
|
|
centerOffset: function() {
|
|
var this$1 = this;
|
|
|
|
var animate;
|
|
if (this.animatingCenter) {
|
|
return;
|
|
}
|
|
animate = function () {
|
|
return requestAnimationFrame(function () {
|
|
var diff, rate;
|
|
rate = 0.1;
|
|
diff = this$1.centerOffset - this$1.currentCenterOffset;
|
|
if (Math.abs(diff) < 0.5) {
|
|
this$1.currentCenterOffset = this$1.centerOffset;
|
|
return this$1.animatingCenter = false;
|
|
} else {
|
|
this$1.currentCenterOffset += diff * rate;
|
|
return animate();
|
|
}
|
|
});
|
|
};
|
|
this.animatingCenter = true;
|
|
return animate();
|
|
},
|
|
scrollLeftLimited: function(val) {
|
|
var this$1 = this;
|
|
|
|
if (IE) {
|
|
return requestAnimationFrame(function () {
|
|
return this$1.$refs.viewport.scrollLeft = val;
|
|
});
|
|
} else {
|
|
return this.$refs.viewport.scrollLeft = val;
|
|
}
|
|
},
|
|
scrollTopLimited: function(val) {
|
|
var this$1 = this;
|
|
|
|
if (IE) {
|
|
return requestAnimationFrame(function () {
|
|
return this$1.$refs.viewport.scrollTop = val;
|
|
});
|
|
} else {
|
|
return this.$refs.viewport.scrollTop = val;
|
|
}
|
|
},
|
|
pages: function(after, before) {
|
|
this.fixFirstPage();
|
|
if (!(before != null ? before.length : void 0) && (after != null ? after.length : void 0)) {
|
|
if (this.startPage > 1 && after[0] === null) {
|
|
return this.currentPage++;
|
|
}
|
|
}
|
|
},
|
|
startPage: function(p) {
|
|
return this.goToPage(p);
|
|
}
|
|
}
|
|
};
|
|
|
|
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
|
|
if (typeof shadowMode !== 'boolean') {
|
|
createInjectorSSR = createInjector;
|
|
createInjector = shadowMode;
|
|
shadowMode = false;
|
|
}
|
|
// Vue.extend constructor export interop.
|
|
var options = typeof script === 'function' ? script.options : script;
|
|
// render functions
|
|
if (template && template.render) {
|
|
options.render = template.render;
|
|
options.staticRenderFns = template.staticRenderFns;
|
|
options._compiled = true;
|
|
// functional template
|
|
if (isFunctionalTemplate) {
|
|
options.functional = true;
|
|
}
|
|
}
|
|
// scopedId
|
|
if (scopeId) {
|
|
options._scopeId = scopeId;
|
|
}
|
|
var hook;
|
|
if (moduleIdentifier) {
|
|
// server build
|
|
hook = function (context) {
|
|
// 2.3 injection
|
|
context =
|
|
context || // cached call
|
|
(this.$vnode && this.$vnode.ssrContext) || // stateful
|
|
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
|
|
// 2.2 with runInNewContext: true
|
|
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
|
|
context = __VUE_SSR_CONTEXT__;
|
|
}
|
|
// inject component styles
|
|
if (style) {
|
|
style.call(this, createInjectorSSR(context));
|
|
}
|
|
// register component module identifier for async chunk inference
|
|
if (context && context._registeredComponents) {
|
|
context._registeredComponents.add(moduleIdentifier);
|
|
}
|
|
};
|
|
// used by ssr in case component is cached and beforeCreate
|
|
// never gets called
|
|
options._ssrRegister = hook;
|
|
}
|
|
else if (style) {
|
|
hook = shadowMode
|
|
? function (context) {
|
|
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
|
|
}
|
|
: function (context) {
|
|
style.call(this, createInjector(context));
|
|
};
|
|
}
|
|
if (hook) {
|
|
if (options.functional) {
|
|
// register for functional component in vue file
|
|
var originalRender = options.render;
|
|
options.render = function renderWithStyleInjection(h, context) {
|
|
hook.call(context);
|
|
return originalRender(h, context);
|
|
};
|
|
}
|
|
else {
|
|
// inject component registration as beforeCreate hook
|
|
var existing = options.beforeCreate;
|
|
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
|
}
|
|
}
|
|
return script;
|
|
}
|
|
|
|
var isOldIE = typeof navigator !== 'undefined' &&
|
|
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
|
|
function createInjector(context) {
|
|
return function (id, style) { return addStyle(id, style); };
|
|
}
|
|
var HEAD;
|
|
var styles = {};
|
|
function addStyle(id, css) {
|
|
var group = isOldIE ? css.media || 'default' : id;
|
|
var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
|
|
if (!style.ids.has(id)) {
|
|
style.ids.add(id);
|
|
var code = css.source;
|
|
if (css.map) {
|
|
// https://developer.chrome.com/devtools/docs/javascript-debugging
|
|
// this makes source maps inside style tags work properly in Chrome
|
|
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
|
|
// http://stackoverflow.com/a/26603875
|
|
code +=
|
|
'\n/*# sourceMappingURL=data:application/json;base64,' +
|
|
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
|
|
' */';
|
|
}
|
|
if (!style.element) {
|
|
style.element = document.createElement('style');
|
|
style.element.type = 'text/css';
|
|
if (css.media)
|
|
{ style.element.setAttribute('media', css.media); }
|
|
if (HEAD === undefined) {
|
|
HEAD = document.head || document.getElementsByTagName('head')[0];
|
|
}
|
|
HEAD.appendChild(style.element);
|
|
}
|
|
if ('styleSheet' in style.element) {
|
|
style.styles.push(code);
|
|
style.element.styleSheet.cssText = style.styles
|
|
.filter(Boolean)
|
|
.join('\n');
|
|
}
|
|
else {
|
|
var index = style.ids.size - 1;
|
|
var textNode = document.createTextNode(code);
|
|
var nodes = style.element.childNodes;
|
|
if (nodes[index])
|
|
{ style.element.removeChild(nodes[index]); }
|
|
if (nodes.length)
|
|
{ style.element.insertBefore(textNode, nodes[index]); }
|
|
else
|
|
{ style.element.appendChild(textNode); }
|
|
}
|
|
}
|
|
}
|
|
|
|
/* script */
|
|
var __vue_script__ = script;
|
|
|
|
/* template */
|
|
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._t("default",null,null,{
|
|
canFlipLeft: _vm.canFlipLeft,
|
|
canFlipRight: _vm.canFlipRight,
|
|
canZoomIn: _vm.canZoomIn,
|
|
canZoomOut: _vm.canZoomOut,
|
|
page: _vm.page,
|
|
numPages: _vm.numPages,
|
|
flipLeft: _vm.flipLeft,
|
|
flipRight: _vm.flipRight,
|
|
zoomIn: _vm.zoomIn,
|
|
zoomOut: _vm.zoomOut
|
|
}),_vm._v(" "),_c('div',{ref:"viewport",staticClass:"viewport",class:{
|
|
zoom: _vm.zooming || _vm.zoom > 1,
|
|
'drag-to-scroll': _vm.dragToScroll
|
|
},style:({ cursor: _vm.cursor == 'grabbing' ? 'grabbing' : 'auto' }),on:{"touchmove":_vm.onTouchMove,"pointermove":_vm.onPointerMove,"mousemove":_vm.onMouseMove,"touchend":_vm.onTouchEnd,"touchcancel":_vm.onTouchEnd,"pointerup":_vm.onPointerUp,"pointercancel":_vm.onPointerUp,"mouseup":_vm.onMouseUp,"wheel":_vm.onWheel}},[_c('div',{staticClass:"container",style:({ transform: ("scale(" + _vm.zoom + ")"), })},[_c('div',{style:({ transform: ("translateX(" + _vm.centerOffsetSmoothed + "px)") })},[(_vm.showLeftPage)?_c('img',{staticClass:"page fixed",style:({
|
|
width: _vm.pageWidth + 'px',
|
|
height: _vm.pageHeight + 'px',
|
|
left: _vm.xMargin + 'px',
|
|
top: _vm.yMargin + 'px'
|
|
}),attrs:{"src":_vm.pageUrl(_vm.leftPage, true)},on:{"load":function($event){return _vm.didLoadImage($event)}}}):_vm._e(),_vm._v(" "),(_vm.showRightPage)?_c('img',{staticClass:"page fixed",style:({
|
|
width: _vm.pageWidth + 'px',
|
|
height: _vm.pageHeight + 'px',
|
|
left: _vm.viewWidth / 2 + 'px',
|
|
top: _vm.yMargin + 'px'
|
|
}),attrs:{"src":_vm.pageUrl(_vm.rightPage, true)},on:{"load":function($event){return _vm.didLoadImage($event)}}}):_vm._e(),_vm._v(" "),_c('div',{style:({ opacity: _vm.flip.opacity })},_vm._l((_vm.polygonArray),function(ref){
|
|
var key = ref[0];
|
|
var bgImage = ref[1];
|
|
var lighting = ref[2];
|
|
var bgPos = ref[3];
|
|
var transform = ref[4];
|
|
var z = ref[5];
|
|
return _c('div',{key:key,staticClass:"polygon",class:{ blank: !bgImage },style:({
|
|
backgroundImage: bgImage,
|
|
backgroundSize: _vm.polygonBgSize,
|
|
backgroundPosition: bgPos,
|
|
width: _vm.polygonWidth,
|
|
height: _vm.polygonHeight,
|
|
transform: transform,
|
|
zIndex: z,
|
|
})},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(lighting.length),expression:"lighting.length"}],staticClass:"lighting",style:({ backgroundImage: lighting })})])}),0),_vm._v(" "),_c('div',{staticClass:"bounding-box",style:({
|
|
left: _vm.boundingLeft + 'px',
|
|
top: _vm.yMargin + 'px',
|
|
width: _vm.boundingRight - _vm.boundingLeft + 'px',
|
|
height: _vm.pageHeight + 'px',
|
|
cursor: _vm.cursor
|
|
}),on:{"touchstart":_vm.onTouchStart,"pointerdown":_vm.onPointerDown,"mousedown":_vm.onMouseDown}})])])])],2)};
|
|
var __vue_staticRenderFns__ = [];
|
|
|
|
/* style */
|
|
var __vue_inject_styles__ = function (inject) {
|
|
if (!inject) { return }
|
|
inject("data-v-0519f6d1_0", { source: ".viewport[data-v-0519f6d1]{-webkit-overflow-scrolling:touch;width:100%;height:100%}.viewport.zoom[data-v-0519f6d1]{overflow:scroll}.viewport.zoom.drag-to-scroll[data-v-0519f6d1]{overflow:hidden}.container[data-v-0519f6d1]{position:relative;width:100%;height:100%;transform-origin:top left;-webkit-user-select:none;-ms-user-select:none;user-select:none}.click-to-flip[data-v-0519f6d1]{position:absolute;width:50%;height:100%;top:0;-webkit-user-select:none;-ms-user-select:none;user-select:none}.click-to-flip.left[data-v-0519f6d1]{left:0}.click-to-flip.right[data-v-0519f6d1]{right:0}.bounding-box[data-v-0519f6d1]{position:absolute;-webkit-user-select:none;-ms-user-select:none;user-select:none}.page[data-v-0519f6d1]{position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden}.polygon[data-v-0519f6d1]{position:absolute;top:0;left:0;background-repeat:no-repeat;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:center left}.polygon.blank[data-v-0519f6d1]{background-color:#ddd}.polygon .lighting[data-v-0519f6d1]{width:100%;height:100%}", map: undefined, media: undefined });
|
|
|
|
};
|
|
/* scoped */
|
|
var __vue_scope_id__ = "data-v-0519f6d1";
|
|
/* module identifier */
|
|
var __vue_module_identifier__ = undefined;
|
|
/* functional template */
|
|
var __vue_is_functional_template__ = false;
|
|
/* style inject SSR */
|
|
|
|
/* style inject shadow dom */
|
|
|
|
|
|
|
|
var __vue_component__ = normalizeComponent(
|
|
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
|
__vue_inject_styles__,
|
|
__vue_script__,
|
|
__vue_scope_id__,
|
|
__vue_is_functional_template__,
|
|
__vue_module_identifier__,
|
|
false,
|
|
createInjector,
|
|
undefined,
|
|
undefined
|
|
);
|
|
|
|
Vue.component('flipbook', __vue_component__);
|
|
|
|
}());
|