Skip to content

P
pic-reader
提交 6265f8f0 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

恢复最初版本

上级 e5f127db
显示空白字符变更
内嵌 并排
正在显示 包含 1197 行增加 和 787 行删除
index.html
浏览文件 @ 6265f8f0
...@@ -6,14 +6,13 @@ ...@@ -6,14 +6,13 @@
<!-- <meta name="viewport" content="width=1050, user-scalable=no" /> --> <!-- <meta name="viewport" content="width=1050, user-scalable=no" /> -->
<meta <meta
name="viewport" name="viewport"
content="width=100vw, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/> />
<title>PDF阅读器</title> <title>PDF阅读器</title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <!-- 引入jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script> <!-- <script src="/js/jquery.min.1.7.js"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/4.1.0/turn.min.js"></script> --> <!-- 引入Turn.js -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/4.1.0/turn.html4.min.js"></script> --> <!-- <script src="/js/turn.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/4.1.0/zoom.min.js"></script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
package-lock.json
浏览文件 @ 6265f8f0
...@@ -9,8 +9,10 @@ ...@@ -9,8 +9,10 @@
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.3.1", "@element-plus/icons-vue": "^2.3.1",
"@rollup/plugin-inject": "^5.0.5",
"axios": "^1.8.4", "axios": "^1.8.4",
"element-plus": "^2.9.8", "element-plus": "^2.9.8",
"lodash": "^4.17.21",
"modernizr": "^3.6.0", "modernizr": "^3.6.0",
"turn.js": "^1.0.5", "turn.js": "^1.0.5",
"vant": "^4.9.19", "vant": "^4.9.19",
...@@ -1017,11 +1019,31 @@ ...@@ -1017,11 +1019,31 @@
"url": "https://opencollective.com/popperjs" "url": "https://opencollective.com/popperjs"
} }
}, },
"node_modules/@rollup/plugin-inject": {
"version": "5.0.5",
"resolved": "https://registry.npmmirror.com/@rollup/plugin-inject/-/plugin-inject-5.0.5.tgz",
"integrity": "sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==",
"dependencies": {
"@rollup/pluginutils": "^5.0.1",
"estree-walker": "^2.0.2",
"magic-string": "^0.30.3"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
},
"peerDependenciesMeta": {
"rollup": {
"optional": true
}
}
},
"node_modules/@rollup/pluginutils": { "node_modules/@rollup/pluginutils": {
"version": "5.1.4", "version": "5.1.4",
"resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.4.tgz", "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.4.tgz",
"integrity": "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==", "integrity": "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==",
"dev": true,
"dependencies": { "dependencies": {
"@types/estree": "^1.0.0", "@types/estree": "^1.0.0",
"estree-walker": "^2.0.2", "estree-walker": "^2.0.2",
...@@ -1329,8 +1351,7 @@ ...@@ -1329,8 +1351,7 @@
"node_modules/@types/estree": { "node_modules/@types/estree": {
"version": "1.0.7", "version": "1.0.7",
"resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.7.tgz", "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.7.tgz",
"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==", "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ=="
"dev": true
}, },
"node_modules/@types/lodash": { "node_modules/@types/lodash": {
"version": "4.17.16", "version": "4.17.16",
...@@ -4606,8 +4627,7 @@ ...@@ -4606,8 +4627,7 @@
"node_modules/lodash": { "node_modules/lodash": {
"version": "4.17.21", "version": "4.17.21",
"resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz", "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
"license": "MIT"
}, },
"node_modules/lodash-es": { "node_modules/lodash-es": {
"version": "4.17.21", "version": "4.17.21",
...@@ -5430,7 +5450,6 @@ ...@@ -5430,7 +5450,6 @@
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.2.tgz", "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.2.tgz",
"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
"dev": true,
"engines": { "engines": {
"node": ">=12" "node": ">=12"
}, },
...@@ -5944,7 +5963,7 @@ ...@@ -5944,7 +5963,7 @@
"version": "4.40.0", "version": "4.40.0",
"resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.40.0.tgz", "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.40.0.tgz",
"integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==", "integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==",
"dev": true, "devOptional": true,
"dependencies": { "dependencies": {
"@types/estree": "1.0.7" "@types/estree": "1.0.7"
}, },
...@@ -8829,11 +8848,20 @@ ...@@ -8829,11 +8848,20 @@
"resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz", "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
"integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==" "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
}, },
"@rollup/plugin-inject": {
"version": "5.0.5",
"resolved": "https://registry.npmmirror.com/@rollup/plugin-inject/-/plugin-inject-5.0.5.tgz",
"integrity": "sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==",
"requires": {
"@rollup/pluginutils": "^5.0.1",
"estree-walker": "^2.0.2",
"magic-string": "^0.30.3"
}
},
"@rollup/pluginutils": { "@rollup/pluginutils": {
"version": "5.1.4", "version": "5.1.4",
"resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.4.tgz", "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.4.tgz",
"integrity": "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==", "integrity": "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==",
"dev": true,
"requires": { "requires": {
"@types/estree": "^1.0.0", "@types/estree": "^1.0.0",
"estree-walker": "^2.0.2", "estree-walker": "^2.0.2",
...@@ -9001,8 +9029,7 @@ ...@@ -9001,8 +9029,7 @@
"@types/estree": { "@types/estree": {
"version": "1.0.7", "version": "1.0.7",
"resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.7.tgz", "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.7.tgz",
"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==", "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ=="
"dev": true
}, },
"@types/lodash": { "@types/lodash": {
"version": "4.17.16", "version": "4.17.16",
...@@ -11955,8 +11982,7 @@ ...@@ -11955,8 +11982,7 @@
"picomatch": { "picomatch": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.2.tgz", "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.2.tgz",
"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg=="
"dev": true
}, },
"pify": { "pify": {
"version": "2.3.0", "version": "2.3.0",
...@@ -12311,7 +12337,7 @@ ...@@ -12311,7 +12337,7 @@
"version": "4.40.0", "version": "4.40.0",
"resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.40.0.tgz", "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.40.0.tgz",
"integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==", "integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==",
"dev": true, "devOptional": true,
"requires": { "requires": {
"@rollup/rollup-android-arm-eabi": "4.40.0", "@rollup/rollup-android-arm-eabi": "4.40.0",
"@rollup/rollup-android-arm64": "4.40.0", "@rollup/rollup-android-arm64": "4.40.0",
......
package.json
浏览文件 @ 6265f8f0
...@@ -10,8 +10,10 @@ ...@@ -10,8 +10,10 @@
}, },
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.3.1", "@element-plus/icons-vue": "^2.3.1",
"@rollup/plugin-inject": "^5.0.5",
"axios": "^1.8.4", "axios": "^1.8.4",
"element-plus": "^2.9.8", "element-plus": "^2.9.8",
"lodash": "^4.17.21",
"modernizr": "^3.6.0", "modernizr": "^3.6.0",
"turn.js": "^1.0.5", "turn.js": "^1.0.5",
"vant": "^4.9.19", "vant": "^4.9.19",
......
src/App.vue
浏览文件 @ 6265f8f0
<template> <template>
<div class="app"> <div class="app">
<!-- <FileUpload @upload-complete="handleUploadComplete" /> -->
<!-- <List /> -->
<!-- <BookReader
v-if="documentPages.length > 0"
:pages="documentPages"
showExitMessage
/> -->
<!-- <div v-else class="empty-state">
请上传PDF文件开始阅读
</div> -->
<router-view /> <router-view />
<!-- <flip-book /> -->
</div> </div>
</template> </template>
<script setup> <script setup>
// import { ref } from "vue"; import FlipBook from "@/components/FlipBook/index.vue";
// import { getDocumentDetail } from "@/api";
// const documentPages = ref([]);
// const fetchDocumentDetail = async (id) => {
// try {
// const res = await getDocumentDetail(id);
// documentPages.value = res.map((item) => {
// return {
// ...item,
// page_url:
// import.meta.env.VITE_API_BASE_URL + "/static/" + item.page_url,
// images: item.images.map((img) => {
// return {
// ...img,
// url: import.meta.env.VITE_API_BASE_URL + "/static/" + img.url,
// };
// }),
// };
// });
// } catch (error) {
// // 错误已经被 request 拦截器处理，这里可以添加额外的错误处理逻辑
// }
// };
// onMounted(() => {
// fetchDocumentDetail("ececa7473dea4d3a4448c754068139fc");
// });
// const handleUploadComplete = (data) => {
// images.value = data.page_images.map(img => img.path)
// }
</script> </script>
<style> <style>
......
src/assets/js/turn.js
浏览文件 @ 6265f8f0
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
* All rights reserved * All rights reserved
**/ **/
(function ($) { (function($) {
'use strict'; 'use strict';
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
PI = Math.PI, PI = Math.PI,
A90 = PI / 2, A90 = PI/2,
isTouch = 'ontouchstart' in window, isTouch = 'ontouchstart' in window,
...@@ -112,7 +112,7 @@ ...@@ -112,7 +112,7 @@
// Singleton constructor // Singleton constructor
// $('#selector').turn([options]); // $('#selector').turn([options]);
init: function (options) { init: function(options) {
// Define constants // Define constants
...@@ -157,7 +157,7 @@ ...@@ -157,7 +157,7 @@
// Set the css // Set the css
this.css({ position: 'relative', width: options.width, height: options.height }); this.css({position: 'relative', width: options.width, height: options.height});
// Set the initial display // Set the initial display
...@@ -165,7 +165,7 @@ ...@@ -165,7 +165,7 @@
// Set the direction // Set the direction
if (options.direction !== '') if (options.direction!=='')
this.turn('direction', options.direction); this.turn('direction', options.direction);
// Prevent blue screen problems of switching to hardware acceleration mode // Prevent blue screen problems of switching to hardware acceleration mode
...@@ -176,8 +176,8 @@ ...@@ -176,8 +176,8 @@
// Add pages from the DOM // Add pages from the DOM
for (i = 0; i < ch.length; i++) { for (i = 0; i<ch.length; i++) {
if ($(ch[i]).attr('ignore') != '1') { if ($(ch[i]).attr('ignore')!='1') {
this.turn('addPage', ch[i], ++pageNum); this.turn('addPage', ch[i], ++pageNum);
} }
} }
...@@ -208,13 +208,13 @@ ...@@ -208,13 +208,13 @@
// Adds a page from external data // Adds a page from external data
addPage: function (element, page) { addPage: function(element, page) {
var currentPage, var currentPage,
className, className,
incPages = false, incPages = false,
data = this.data(), data = this.data(),
lastPage = data.totalPages + 1; lastPage = data.totalPages+1;
if (data.destroying) if (data.destroying)
return false; return false;
...@@ -226,10 +226,10 @@ ...@@ -226,10 +226,10 @@
if (page) { if (page) {
if (page == lastPage) if (page==lastPage)
incPages = true; incPages = true;
else if (page > lastPage) else if (page>lastPage)
throw turnError('Page "' + page + '" cannot be inserted'); throw turnError('Page "'+page+'" cannot be inserted');
} else { } else {
...@@ -238,10 +238,10 @@ ...@@ -238,10 +238,10 @@
} }
if (page >= 1 && page <= lastPage) { if (page>=1 && page<=lastPage) {
if (data.display == 'double') if (data.display=='double')
className = (page % 2) ? ' odd' : ' even'; className = (page%2) ? ' odd' : ' even';
else else
className = ''; className = '';
...@@ -259,7 +259,7 @@ ...@@ -259,7 +259,7 @@
// Add element // Add element
data.pageObjs[page] = $(element). data.pageObjs[page] = $(element).
css({ 'float': 'left' }). css({'float': 'left'}).
addClass('page p' + page + className); addClass('page p' + page + className);
if (!hasHardPage() && data.pageObjs[page].hasClass('hard')) { if (!hasHardPage() && data.pageObjs[page].hasClass('hard')) {
...@@ -278,7 +278,7 @@ ...@@ -278,7 +278,7 @@
// Adds a page // Adds a page
_addPage: function (page) { _addPage: function(page) {
var data = this.data(), var data = this.data(),
element = data.pageObjs[page]; element = data.pageObjs[page];
...@@ -290,14 +290,10 @@ ...@@ -290,14 +290,10 @@
// Wrapper // Wrapper
data.pageWrap[page] = $('<div/>', data.pageWrap[page] = $('<div/>',
{ {'class': 'page-wrapper',
'class': 'page-wrapper',
page: page, page: page,
css: { css: {position: 'absolute',
position: 'absolute', overflow: 'hidden'}});
overflow: 'hidden'
}
});
// Append to this flipbook // Append to this flipbook
this.append(data.pageWrap[page]); this.append(data.pageWrap[page]);
...@@ -312,7 +308,7 @@ ...@@ -312,7 +308,7 @@
// Set the size of the page // Set the size of the page
var prop = turnMethods._pageSize.call(this, page, true); var prop = turnMethods._pageSize.call(this, page, true);
element.css({ width: prop.width, height: prop.height }); element.css({width: prop.width, height: prop.height});
data.pageWrap[page].css(prop); data.pageWrap[page].css(prop);
} }
...@@ -339,7 +335,7 @@ ...@@ -339,7 +335,7 @@
// Checks if a page is in memory // Checks if a page is in memory
hasPage: function (page) { hasPage: function(page) {
return has(page, this.data().pageObjs); return has(page, this.data().pageObjs);
...@@ -347,31 +343,31 @@ ...@@ -347,31 +343,31 @@
// Centers the flipbook // Centers the flipbook
center: function (page) { center: function(page) {
var data = this.data(), var data = this.data(),
size = $(this).turn('size'), size = $(this).turn('size'),
left = 0; left = 0;
if (!data.noCenter) { if (!data.noCenter) {
if (data.display == 'double') { if (data.display=='double') {
var view = this.turn('view', page || data.tpage || data.page); var view = this.turn('view', page || data.tpage || data.page);
if (data.direction == 'ltr') { if (data.direction=='ltr') {
if (!view[0]) if (!view[0])
left -= size.width / 4; left -= size.width/4;
else if (!view[1]) else if (!view[1])
left += size.width / 4; left += size.width/4;
} else { } else {
if (!view[0]) if (!view[0])
left += size.width / 4; left += size.width/4;
else if (!view[1]) else if (!view[1])
left -= size.width / 4; left -= size.width/4;
} }
} }
$(this).css({ marginLeft: left }); $(this).css({marginLeft: left});
} }
return this; return this;
...@@ -390,12 +386,12 @@ ...@@ -390,12 +386,12 @@
'released', 'start', 'turning', 'turned', 'released', 'start', 'turning', 'turned',
'zooming', 'missing']; 'zooming', 'missing'];
if (trigger('destroying', this) == 'prevented') if (trigger('destroying', this)=='prevented')
return; return;
data.destroying = true; data.destroying = true;
$.each(events, function (index, eventName) { $.each(events, function(index, eventName) {
flipbook.unbind(eventName); flipbook.unbind(eventName);
}); });
...@@ -404,7 +400,7 @@ ...@@ -404,7 +400,7 @@
$(document).unbind(mouseEvents.move, data.eventHandlers.touchMove). $(document).unbind(mouseEvents.move, data.eventHandlers.touchMove).
unbind(mouseEvents.up, data.eventHandlers.touchEnd); unbind(mouseEvents.up, data.eventHandlers.touchEnd);
while (data.totalPages !== 0) { while (data.totalPages!==0) {
this.turn('removePage', data.totalPages); this.turn('removePage', data.totalPages);
} }
...@@ -423,29 +419,29 @@ ...@@ -423,29 +419,29 @@
// Checks if this element is a flipbook // Checks if this element is a flipbook
is: function () { is: function() {
return typeof (this.data().pages) == 'object'; return typeof(this.data().pages)=='object';
}, },
// Sets and gets the zoom value // Sets and gets the zoom value
zoom: function (newZoom) { zoom: function(newZoom) {
var data = this.data(); var data = this.data();
if (typeof (newZoom) == 'number') { if (typeof(newZoom)=='number') {
if (newZoom < 0.001 || newZoom > 100) if (newZoom<0.001 || newZoom>100)
throw turnError(newZoom + ' is not a value for zoom'); throw turnError(newZoom+ ' is not a value for zoom');
if (trigger('zooming', this, [newZoom, data.zoom]) == 'prevented') if (trigger('zooming', this, [newZoom, data.zoom])=='prevented')
return this; return this;
var size = this.turn('size'), var size = this.turn('size'),
currentView = this.turn('view'), currentView = this.turn('view'),
iz = 1 / data.zoom, iz = 1/data.zoom,
newWidth = Math.round(size.width * iz * newZoom), newWidth = Math.round(size.width * iz * newZoom),
newHeight = Math.round(size.height * iz * newZoom); newHeight = Math.round(size.height * iz * newZoom);
...@@ -463,10 +459,10 @@ ...@@ -463,10 +459,10 @@
turnMethods._updateShadow.call(this); turnMethods._updateShadow.call(this);
for (var i = 0; i < currentView.length; i++) { for (var i = 0; i<currentView.length; i++) {
if (currentView[i] && data.pageZoom[currentView[i]] != data.zoom) { if (currentView[i] && data.pageZoom[currentView[i]]!=data.zoom) {
this.trigger('zoomed', [ this.trigger('zoomed',[
currentView[i], currentView[i],
currentView, currentView,
data.pageZoom[currentView[i]], data.pageZoom[currentView[i]],
...@@ -485,12 +481,12 @@ ...@@ -485,12 +481,12 @@
// Gets the size of a page // Gets the size of a page
_pageSize: function (page, position) { _pageSize: function(page, position) {
var data = this.data(), var data = this.data(),
prop = {}; prop = {};
if (data.display == 'single') { if (data.display=='single') {
prop.width = this.width(); prop.width = this.width();
prop.height = this.height(); prop.height = this.height();
...@@ -503,7 +499,7 @@ ...@@ -503,7 +499,7 @@
} else { } else {
var pageWidth = this.width() / 2, var pageWidth = this.width()/2,
pageHeight = this.height(); pageHeight = this.height();
if (data.pageObjs[page].hasClass('own-size')) { if (data.pageObjs[page].hasClass('own-size')) {
...@@ -515,17 +511,17 @@ ...@@ -515,17 +511,17 @@
} }
if (position) { if (position) {
var odd = page % 2; var odd = page%2;
prop.top = (pageHeight - prop.height) / 2; prop.top = (pageHeight-prop.height)/2;
if (data.direction == 'ltr') { if (data.direction=='ltr') {
prop[(odd) ? 'right' : 'left'] = pageWidth - prop.width; prop[(odd) ? 'right' : 'left'] = pageWidth-prop.width;
prop[(odd) ? 'left' : 'right'] = 'auto'; prop[(odd) ? 'left' : 'right'] = 'auto';
} else { } else {
prop[(odd) ? 'left' : 'right'] = pageWidth - prop.width; prop[(odd) ? 'left' : 'right'] = pageWidth-prop.width;
prop[(odd) ? 'right' : 'left'] = 'auto'; prop[(odd) ? 'right' : 'left'] = 'auto';
} }
...@@ -539,20 +535,20 @@ ...@@ -539,20 +535,20 @@
// Prepares the flip effect for a page // Prepares the flip effect for a page
_makeFlip: function (page) { _makeFlip: function(page) {
var data = this.data(); var data = this.data();
if (!data.pages[page] && data.pagePlace[page] == page) { if (!data.pages[page] && data.pagePlace[page]==page) {
var single = data.display == 'single', var single = data.display=='single',
odd = page % 2; odd = page%2;
data.pages[page] = data.pageObjs[page]. data.pages[page] = data.pageObjs[page].
css(turnMethods._pageSize.call(this, page)). css(turnMethods._pageSize.call(this, page)).
flip({ flip({
page: page, page: page,
next: (odd || single) ? page + 1 : page - 1, next: (odd || single) ? page+1 : page-1,
turn: this turn: this
}). }).
flip('disable', data.disabled); flip('disable', data.disabled);
...@@ -569,17 +565,17 @@ ...@@ -569,17 +565,17 @@
// Makes pages within a range // Makes pages within a range
_makeRange: function () { _makeRange: function() {
var page, range, var page, range,
data = this.data(); data = this.data();
if (data.totalPages < 1) if (data.totalPages<1)
return; return;
range = this.turn('range'); range = this.turn('range');
for (page = range[0]; page <= range[1]; page++) for (page = range[0]; page<=range[1]; page++)
turnMethods._addPage.call(this, page); turnMethods._addPage.call(this, page);
}, },
...@@ -593,7 +589,7 @@ ...@@ -593,7 +589,7 @@
// 1 2-3 4-5 6-7 8-9 10-11 12-13 // 1 2-3 4-5 6-7 8-9 10-11 12-13
// ** ** -- ** ** // ** ** -- ** **
range: function (page) { range: function(page) {
var remainingPages, left, right, view, var remainingPages, left, right, view,
data = this.data(); data = this.data();
...@@ -601,51 +597,51 @@ ...@@ -601,51 +597,51 @@
page = page || data.tpage || data.page || 1; page = page || data.tpage || data.page || 1;
view = turnMethods._view.call(this, page); view = turnMethods._view.call(this, page);
if (page < 1 || page > data.totalPages) if (page<1 || page>data.totalPages)
throw turnError('"' + page + '" is not a valid page'); throw turnError('"'+page+'" is not a valid page');
view[1] = view[1] || view[0]; view[1] = view[1] || view[0];
if (view[0] >= 1 && view[1] <= data.totalPages) { if (view[0]>=1 && view[1]<=data.totalPages) {
remainingPages = Math.floor((pagesInDOM - 2) / 2); remainingPages = Math.floor((pagesInDOM-2)/2);
if (data.totalPages - view[1] > view[0]) { if (data.totalPages-view[1] > view[0]) {
left = Math.min(view[0] - 1, remainingPages); left = Math.min(view[0]-1, remainingPages);
right = 2 * remainingPages - left; right = 2*remainingPages-left;
} else { } else {
right = Math.min(data.totalPages - view[1], remainingPages); right = Math.min(data.totalPages-view[1], remainingPages);
left = 2 * remainingPages - right; left = 2*remainingPages-right;
} }
} else { } else {
left = pagesInDOM - 1; left = pagesInDOM-1;
right = pagesInDOM - 1; right = pagesInDOM-1;
} }
return [Math.max(1, view[0] - left), return [Math.max(1, view[0]-left),
Math.min(data.totalPages, view[1] + right)]; Math.min(data.totalPages, view[1]+right)];
}, },
// Detects if a page is within the range of `pagesInDOM` from the current view // Detects if a page is within the range of `pagesInDOM` from the current view
_necessPage: function (page) { _necessPage: function(page) {
if (page === 0) if (page===0)
return true; return true;
var range = this.turn('range'); var range = this.turn('range');
return this.data().pageObjs[page].hasClass('fixed') || return this.data().pageObjs[page].hasClass('fixed') ||
(page >= range[0] && page <= range[1]); (page>=range[0] && page<=range[1]);
}, },
// Releases memory by removing pages from the DOM // Releases memory by removing pages from the DOM
_removeFromDOM: function () { _removeFromDOM: function() {
var page, data = this.data(); var page, data = this.data();
...@@ -658,7 +654,7 @@ ...@@ -658,7 +654,7 @@
// Removes a page from DOM and its internal references // Removes a page from DOM and its internal references
_removePageFromDOM: function (page) { _removePageFromDOM: function(page) {
var data = this.data(); var data = this.data();
...@@ -692,21 +688,21 @@ ...@@ -692,21 +688,21 @@
// Removes a page // Removes a page
removePage: function (page) { removePage: function(page) {
var data = this.data(); var data = this.data();
// Delete all the pages // Delete all the pages
if (page == '*') { if (page=='*') {
while (data.totalPages !== 0) { while (data.totalPages!==0) {
this.turn('removePage', data.totalPages); this.turn('removePage', data.totalPages);
} }
} else { } else {
if (page < 1 || page > data.totalPages) if (page<1 || page>data.totalPages)
throw turnError('The page ' + page + ' doesn\'t exist'); throw turnError('The page '+ page + ' doesn\'t exist');
if (data.pageObjs[page]) { if (data.pageObjs[page]) {
...@@ -724,11 +720,11 @@ ...@@ -724,11 +720,11 @@
turnMethods._movePages.call(this, page, -1); turnMethods._movePages.call(this, page, -1);
// Resize the size of this flipbook // Resize the size of this flipbook
data.totalPages = data.totalPages - 1; data.totalPages = data.totalPages-1;
// Check the current view // Check the current view
if (data.page > data.totalPages) { if (data.page>data.totalPages) {
data.page = null; data.page = null;
turnMethods._fitPage.call(this, data.totalPages); turnMethods._fitPage.call(this, data.totalPages);
...@@ -747,16 +743,16 @@ ...@@ -747,16 +743,16 @@
// Moves pages // Moves pages
_movePages: function (from, change) { _movePages: function(from, change) {
var page, var page,
that = this, that = this,
data = this.data(), data = this.data(),
single = data.display == 'single', single = data.display=='single',
move = function (page) { move = function(page) {
var next = page + change, var next = page + change,
odd = next % 2, odd = next%2,
className = (odd) ? ' odd ' : ' even '; className = (odd) ? ' odd ' : ' even ';
if (data.pageObjs[page]) if (data.pageObjs[page])
...@@ -780,7 +776,7 @@ ...@@ -780,7 +776,7 @@
data.pages[next] = data.pages[page]. data.pages[next] = data.pages[page].
flip('options', { flip('options', {
page: next, page: next,
next: (single || odd) ? next + 1 : next - 1 next: (single || odd) ? next+1 : next-1
}); });
if (change) { if (change) {
...@@ -795,43 +791,43 @@ ...@@ -795,43 +791,43 @@
}; };
if (change > 0) if (change>0)
for (page = data.totalPages; page >= from; page--) for (page=data.totalPages; page>=from; page--)
move(page); move(page);
else else
for (page = from; page <= data.totalPages; page++) for (page=from; page<=data.totalPages; page++)
move(page); move(page);
}, },
// Sets or Gets the display mode // Sets or Gets the display mode
display: function (display) { display: function(display) {
var data = this.data(), var data = this.data(),
currentDisplay = data.display; currentDisplay = data.display;
if (display === undefined) { if (display===undefined) {
return currentDisplay; return currentDisplay;
} else { } else {
if ($.inArray(display, displays) == -1) if ($.inArray(display, displays)==-1)
throw turnError('"' + display + '" is not a value for display'); throw turnError('"'+display + '" is not a value for display');
switch (display) { switch(display) {
case 'single': case 'single':
// Create a temporal page to use as folded page // Create a temporal page to use as folded page
if (!data.pageObjs[0]) { if (!data.pageObjs[0]) {
this.turn('stop'). this.turn('stop').
css({ 'overflow': 'hidden' }); css({'overflow': 'hidden'});
data.pageObjs[0] = $('<div />', data.pageObjs[0] = $('<div />',
{ 'class': 'page p-temporal' }). {'class': 'page p-temporal'}).
css({ width: this.width(), height: this.height() }). css({width: this.width(), height: this.height()}).
appendTo(this); appendTo(this);
} }
...@@ -843,7 +839,7 @@ ...@@ -843,7 +839,7 @@
// Remove the temporal page // Remove the temporal page
if (data.pageObjs[0]) { if (data.pageObjs[0]) {
this.turn('stop').css({ 'overflow': '' }); this.turn('stop').css({'overflow': ''});
data.pageObjs[0].remove(); data.pageObjs[0].remove();
delete data.pageObjs[0]; delete data.pageObjs[0];
} }
...@@ -871,11 +867,11 @@ ...@@ -871,11 +867,11 @@
// Gets and sets the direction of the flipbook // Gets and sets the direction of the flipbook
direction: function (dir) { direction: function(dir) {
var data = this.data(); var data = this.data();
if (dir === undefined) { if (dir===undefined) {
return data.direction; return data.direction;
...@@ -883,12 +879,12 @@ ...@@ -883,12 +879,12 @@
dir = dir.toLowerCase(); dir = dir.toLowerCase();
if ($.inArray(dir, directions) == -1) if ($.inArray(dir, directions)==-1)
throw turnError('"' + dir + '" is not a value for direction'); throw turnError('"' + dir + '" is not a value for direction');
if (dir == 'rtl') { if (dir=='rtl') {
$(this).attr('dir', 'ltr'). $(this).attr('dir', 'ltr').
css({ direction: 'ltr' }); css({direction: 'ltr'});
} }
data.direction = dir; data.direction = dir;
...@@ -903,15 +899,15 @@ ...@@ -903,15 +899,15 @@
// Detects animation // Detects animation
animating: function () { animating: function() {
return this.data().pageMv.length > 0; return this.data().pageMv.length>0;
}, },
// Gets the current activated corner // Gets the current activated corner
corner: function () { corner: function() {
var corner, var corner,
page, page,
...@@ -929,7 +925,7 @@ ...@@ -929,7 +925,7 @@
// Gets the data stored in the flipbook // Gets the data stored in the flipbook
data: function () { data: function() {
return this.data(); return this.data();
...@@ -937,18 +933,18 @@ ...@@ -937,18 +933,18 @@
// Disables and enables the effect // Disables and enables the effect
disable: function (disable) { disable: function(disable) {
var page, var page,
data = this.data(), data = this.data(),
view = this.turn('view'); view = this.turn('view');
data.disabled = disable === undefined || disable === true; data.disabled = disable===undefined || disable===true;
for (page in data.pages) { for (page in data.pages) {
if (has(page, data.pages)) if (has(page, data.pages))
data.pages[page].flip('disable', data.pages[page].flip('disable',
(data.disabled) ? true : $.inArray(parseInt(page, 10), view) == -1); (data.disabled) ? true : $.inArray(parseInt(page, 10), view)==-1);
} }
return this; return this;
...@@ -957,10 +953,10 @@ ...@@ -957,10 +953,10 @@
// Disables and enables the effect // Disables and enables the effect
disabled: function (disable) { disabled: function(disable) {
if (disable === undefined) { if (disable===undefined) {
return this.data().disabled === true; return this.data().disabled===true;
} else { } else {
return this.turn('disable', disable); return this.turn('disable', disable);
} }
...@@ -969,11 +965,11 @@ ...@@ -969,11 +965,11 @@
// Gets and sets the size // Gets and sets the size
size: function (width, height) { size: function(width, height) {
if (width === undefined || height === undefined) { if (width===undefined || height===undefined) {
return { width: this.width(), height: this.height() }; return {width: this.width(), height: this.height()};
} else { } else {
...@@ -981,23 +977,23 @@ ...@@ -981,23 +977,23 @@
var page, prop, var page, prop,
data = this.data(), data = this.data(),
pageWidth = (data.display == 'double') ? width / 2 : width; pageWidth = (data.display=='double') ? width/2 : width;
this.css({ width: width, height: height }); this.css({width: width, height: height});
if (data.pageObjs[0]) if (data.pageObjs[0])
data.pageObjs[0].css({ width: pageWidth, height: height }); data.pageObjs[0].css({width: pageWidth, height: height});
for (page in data.pageWrap) { for (page in data.pageWrap) {
if (!has(page, data.pageWrap)) continue; if (!has(page, data.pageWrap)) continue;
prop = turnMethods._pageSize.call(this, page, true); prop = turnMethods._pageSize.call(this, page, true);
data.pageObjs[page].css({ width: prop.width, height: prop.height }); data.pageObjs[page].css({width: prop.width, height: prop.height});
data.pageWrap[page].css(prop); data.pageWrap[page].css(prop);
if (data.pages[page]) if (data.pages[page])
data.pages[page].css({ width: prop.width, height: prop.height }); data.pages[page].css({width: prop.width, height: prop.height});
} }
this.turn('resize'); this.turn('resize');
...@@ -1009,12 +1005,12 @@ ...@@ -1009,12 +1005,12 @@
// Resizes each page // Resizes each page
resize: function () { resize: function() {
var page, data = this.data(); var page, data = this.data();
if (data.pages[0]) { if (data.pages[0]) {
data.pageWrap[0].css({ left: -this.width() }); data.pageWrap[0].css({left: -this.width()});
data.pages[0].flip('resize', true); data.pages[0].flip('resize', true);
} }
...@@ -1031,12 +1027,12 @@ ...@@ -1031,12 +1027,12 @@
// Removes an animation from the cache // Removes an animation from the cache
_removeMv: function (page) { _removeMv: function(page) {
var i, data = this.data(); var i, data = this.data();
for (i = 0; i < data.pageMv.length; i++) for (i=0; i<data.pageMv.length; i++)
if (data.pageMv[i] == page) { if (data.pageMv[i]==page) {
data.pageMv.splice(i, 1); data.pageMv.splice(i, 1);
return true; return true;
} }
...@@ -1047,7 +1043,7 @@ ...@@ -1047,7 +1043,7 @@
// Adds an animation to the cache // Adds an animation to the cache
_addMv: function (page) { _addMv: function(page) {
var data = this.data(); var data = this.data();
...@@ -1058,14 +1054,14 @@ ...@@ -1058,14 +1054,14 @@
// Gets indexes for a view // Gets indexes for a view
_view: function (page) { _view: function(page) {
var data = this.data(); var data = this.data();
page = page || data.page; page = page || data.page;
if (data.display == 'double') if (data.display=='double')
return (page % 2) ? [page - 1, page] : [page, page + 1]; return (page%2) ? [page-1, page] : [page, page+1];
else else
return [page]; return [page];
...@@ -1073,22 +1069,22 @@ ...@@ -1073,22 +1069,22 @@
// Gets a view // Gets a view
view: function (page) { view: function(page) {
var data = this.data(), var data = this.data(),
view = turnMethods._view.call(this, page); view = turnMethods._view.call(this, page);
if (data.display == 'double') if (data.display=='double')
return [(view[0] > 0) ? view[0] : 0, return [(view[0]>0) ? view[0] : 0,
(view[1] <= data.totalPages) ? view[1] : 0]; (view[1]<=data.totalPages) ? view[1] : 0];
else else
return [(view[0] > 0 && view[0] <= data.totalPages) ? view[0] : 0]; return [(view[0]>0 && view[0]<=data.totalPages) ? view[0] : 0];
}, },
// Stops animations // Stops animations
stop: function (ignore, animate) { stop: function(ignore, animate) {
if (this.turn('animating')) { if (this.turn('animating')) {
...@@ -1100,9 +1096,9 @@ ...@@ -1100,9 +1096,9 @@
delete data['tpage']; delete data['tpage'];
} }
for (i = 0; i < data.pageMv.length; i++) { for (i = 0; i<data.pageMv.length; i++) {
if (!data.pageMv[i] || data.pageMv[i] === ignore) if (!data.pageMv[i] || data.pageMv[i]===ignore)
continue; continue;
page = data.pages[data.pageMv[i]]; page = data.pages[data.pageMv[i]];
...@@ -1114,7 +1110,7 @@ ...@@ -1114,7 +1110,7 @@
flipMethods._moveFoldingPage.call(page, false); flipMethods._moveFoldingPage.call(page, false);
if (opts.force) { if (opts.force) {
opts.next = (opts.page % 2 === 0) ? opts.page - 1 : opts.page + 1; opts.next = (opts.page%2===0) ? opts.page-1 : opts.page+1;
delete opts['force']; delete opts['force'];
} }
...@@ -1128,15 +1124,15 @@ ...@@ -1128,15 +1124,15 @@
// Gets and sets the number of pages // Gets and sets the number of pages
pages: function (pages) { pages: function(pages) {
var data = this.data(); var data = this.data();
if (pages) { if (pages) {
if (pages < data.totalPages) { if (pages<data.totalPages) {
for (var page = data.totalPages; page > pages; page--) for (var page = data.totalPages; page>pages; page--)
this.turn('removePage', page); this.turn('removePage', page);
} }
...@@ -1153,30 +1149,30 @@ ...@@ -1153,30 +1149,30 @@
// Checks missing pages // Checks missing pages
_missing: function (page) { _missing : function(page) {
var data = this.data(); var data = this.data();
if (data.totalPages < 1) if (data.totalPages<1)
return; return;
var p, var p,
range = this.turn('range', page), range = this.turn('range', page),
missing = []; missing = [];
for (p = range[0]; p <= range[1]; p++) { for (p = range[0]; p<=range[1]; p++) {
if (!data.pageObjs[p]) if (!data.pageObjs[p])
missing.push(p); missing.push(p);
} }
if (missing.length > 0) if (missing.length>0)
this.trigger('missing', [missing]); this.trigger('missing', [missing]);
}, },
// Sets a page without effect // Sets a page without effect
_fitPage: function (page) { _fitPage: function(page) {
var data = this.data(), var data = this.data(),
newView = this.turn('view', page); newView = this.turn('view', page);
...@@ -1190,11 +1186,11 @@ ...@@ -1190,11 +1186,11 @@
this.turn('stop'); this.turn('stop');
for (var i = 0; i < newView.length; i++) { for (var i = 0; i<newView.length; i++) {
if (newView[i] && data.pageZoom[newView[i]] != data.zoom) { if (newView[i] && data.pageZoom[newView[i]]!=data.zoom) {
this.trigger('zoomed', [ this.trigger('zoomed',[
newView[i], newView[i],
newView, newView,
data.pageZoom[newView[i]], data.pageZoom[newView[i]],
...@@ -1218,7 +1214,7 @@ ...@@ -1218,7 +1214,7 @@
// Turns the page // Turns the page
_turnPage: function (page) { _turnPage: function(page) {
var current, var current,
next, next,
...@@ -1228,33 +1224,33 @@ ...@@ -1228,33 +1224,33 @@
newView = this.turn('view', page); newView = this.turn('view', page);
if (data.page != page) { if (data.page!=page) {
var currentPage = data.page; var currentPage = data.page;
if (trigger('turning', this, [page, newView]) == 'prevented') { if (trigger('turning', this, [page, newView])=='prevented') {
if (currentPage == data.page && $.inArray(place, data.pageMv) != -1) if (currentPage==data.page && $.inArray(place, data.pageMv)!=-1)
data.pages[place].flip('hideFoldedPage', true); data.pages[place].flip('hideFoldedPage', true);
return; return;
} }
if ($.inArray(1, newView) != -1) if ($.inArray(1, newView)!=-1)
this.trigger('first'); this.trigger('first');
if ($.inArray(data.totalPages, newView) != -1) if ($.inArray(data.totalPages, newView)!=-1)
this.trigger('last'); this.trigger('last');
} }
if (data.display == 'single') { if (data.display=='single') {
current = view[0]; current = view[0];
next = newView[0]; next = newView[0];
} else if (view[1] && page > view[1]) { } else if (view[1] && page>view[1]) {
current = view[1]; current = view[1];
next = newView[0]; next = newView[0];
} else if (view[0] && page < view[0]) { } else if (view[0] && page<view[0]) {
current = view[0]; current = view[0];
next = newView[1]; next = newView[1];
} }
...@@ -1277,7 +1273,7 @@ ...@@ -1277,7 +1273,7 @@
data.tpage = next; data.tpage = next;
if (opts.next != next) { if (opts.next!=next) {
opts.next = next; opts.next = next;
opts.force = true; opts.force = true;
} }
...@@ -1286,31 +1282,31 @@ ...@@ -1286,31 +1282,31 @@
flipData.point = actualPoint; flipData.point = actualPoint;
if (flipData.effect == 'hard') if (flipData.effect=='hard')
if (data.direction == 'ltr') if (data.direction=='ltr')
data.pages[current].flip('turnPage', data.pages[current].flip('turnPage',
(page > current) ? 'r' : 'l'); (page>current) ? 'r' : 'l');
else else
data.pages[current].flip('turnPage', data.pages[current].flip('turnPage',
(page > current) ? 'l' : 'r'); (page>current) ? 'l' : 'r');
else { else {
if (data.direction == 'ltr') if (data.direction=='ltr')
data.pages[current].flip('turnPage', data.pages[current].flip('turnPage',
optsCorners[(page > current) ? 1 : 0]); optsCorners[(page>current) ? 1 : 0]);
else else
data.pages[current].flip('turnPage', data.pages[current].flip('turnPage',
optsCorners[(page > current) ? 0 : 1]); optsCorners[(page>current) ? 0 : 1]);
} }
}, },
// Gets and sets a page // Gets and sets a page
page: function (page) { page: function(page) {
var data = this.data(); var data = this.data();
if (page === undefined) { if (page===undefined) {
return data.page; return data.page;
...@@ -1320,10 +1316,10 @@ ...@@ -1320,10 +1316,10 @@
page = parseInt(page, 10); page = parseInt(page, 10);
if (page > 0 && page <= data.totalPages) { if (page>0 && page<=data.totalPages) {
if (page != data.page) { if (page!=data.page) {
if (!data.done || $.inArray(page, this.turn('view')) != -1) if (!data.done || $.inArray(page, this.turn('view'))!=-1)
turnMethods._fitPage.call(this, page); turnMethods._fitPage.call(this, page);
else else
turnMethods._turnPage.call(this, page); turnMethods._turnPage.call(this, page);
...@@ -1345,7 +1341,7 @@ ...@@ -1345,7 +1341,7 @@
// Turns to the next view // Turns to the next view
next: function () { next: function() {
return this.turn('page', Math.min(this.data().totalPages, return this.turn('page', Math.min(this.data().totalPages,
turnMethods._view.call(this, this.data().page).pop() + 1)); turnMethods._view.call(this, this.data().page).pop() + 1));
...@@ -1354,7 +1350,7 @@ ...@@ -1354,7 +1350,7 @@
// Turns to the previous view // Turns to the previous view
previous: function () { previous: function() {
return this.turn('page', Math.max(1, return this.turn('page', Math.max(1,
turnMethods._view.call(this, this.data().page).shift() - 1)); turnMethods._view.call(this, this.data().page).shift() - 1));
...@@ -1363,20 +1359,20 @@ ...@@ -1363,20 +1359,20 @@
// Shows a peeling corner // Shows a peeling corner
peel: function (corner, animate) { peel: function(corner, animate) {
var data = this.data(), var data = this.data(),
view = this.turn('view'); view = this.turn('view');
animate = (animate === undefined) ? true : animate === true; animate = (animate===undefined) ? true : animate===true;
if (corner === false) { if (corner===false) {
this.turn('stop', null, animate); this.turn('stop', null, animate);
} else { } else {
if (data.display == 'single') { if (data.display=='single') {
data.pages[data.page].flip('peel', corner, animate); data.pages[data.page].flip('peel', corner, animate);
...@@ -1384,13 +1380,13 @@ ...@@ -1384,13 +1380,13 @@
var page; var page;
if (data.direction == 'ltr') { if (data.direction=='ltr') {
page = (corner.indexOf('l') != -1) ? view[0] : view[1]; page = (corner.indexOf('l')!=-1) ? view[0] : view[1];
} else { } else {
page = (corner.indexOf('l') != -1) ? view[1] : view[0]; page = (corner.indexOf('l')!=-1) ? view[1] : view[0];
} }
...@@ -1407,7 +1403,7 @@ ...@@ -1407,7 +1403,7 @@
// Adds a motion to the internal list // Adds a motion to the internal list
// This event is called in context of flip // This event is called in context of flip
_addMotionPage: function () { _addMotionPage: function() {
var opts = $(this).data().f.opts, var opts = $(this).data().f.opts,
turn = opts.turn, turn = opts.turn,
...@@ -1419,7 +1415,7 @@ ...@@ -1419,7 +1415,7 @@
// This event is called in context of flip // This event is called in context of flip
_eventStart: function (e, opts, corner) { _eventStart: function(e, opts, corner) {
var data = opts.turn.data(), var data = opts.turn.data(),
actualZoom = data.pageZoom[opts.page]; actualZoom = data.pageZoom[opts.page];
...@@ -1429,9 +1425,9 @@ ...@@ -1429,9 +1425,9 @@
return; return;
} }
if (actualZoom && actualZoom != data.zoom) { if (actualZoom && actualZoom!=data.zoom) {
opts.turn.trigger('zoomed', [ opts.turn.trigger('zoomed',[
opts.page, opts.page,
opts.turn.turn('view', opts.page), opts.turn.turn('view', opts.page),
actualZoom, actualZoom,
...@@ -1441,17 +1437,18 @@ ...@@ -1441,17 +1437,18 @@
} }
if (data.display == 'single' && corner) { if (data.display=='single' && corner) {
if ((corner.charAt(1) == 'l' && data.direction == 'ltr') || if ((corner.charAt(1)=='l' && data.direction=='ltr') ||
(corner.charAt(1) == 'r' && data.direction == 'rtl')) { (corner.charAt(1)=='r' && data.direction=='rtl'))
{
opts.next = (opts.next < opts.page) ? opts.next : opts.page - 1; opts.next = (opts.next<opts.page) ? opts.next : opts.page-1;
opts.force = true; opts.force = true;
} else { } else {
opts.next = (opts.next > opts.page) ? opts.next : opts.page + 1; opts.next = (opts.next>opts.page) ? opts.next : opts.page+1;
} }
...@@ -1463,7 +1460,7 @@ ...@@ -1463,7 +1460,7 @@
// This event is called in context of flip // This event is called in context of flip
_eventEnd: function (e, opts, turned) { _eventEnd: function(e, opts, turned) {
var that = $(e.target), var that = $(e.target),
data = that.data().f, data = that.data().f,
...@@ -1474,7 +1471,7 @@ ...@@ -1474,7 +1471,7 @@
var tpage = dd.tpage || dd.page; var tpage = dd.tpage || dd.page;
if (tpage == opts.next || tpage == opts.page) { if (tpage==opts.next || tpage==opts.page) {
delete dd.tpage; delete dd.tpage;
turnMethods._fitPage.call(turn, tpage || opts.next, true); turnMethods._fitPage.call(turn, tpage || opts.next, true);
...@@ -1492,7 +1489,7 @@ ...@@ -1492,7 +1489,7 @@
// This event is called in context of flip // This event is called in context of flip
_eventPressed: function (e) { _eventPressed: function(e) {
var page, var page,
data = $(e.target).data().f, data = $(e.target).data().f,
...@@ -1510,7 +1507,7 @@ ...@@ -1510,7 +1507,7 @@
// This event is called in context of flip // This event is called in context of flip
_eventReleased: function (e, point) { _eventReleased: function(e, point) {
var outArea, var outArea,
page = $(e.target), page = $(e.target),
...@@ -1518,15 +1515,15 @@ ...@@ -1518,15 +1515,15 @@
turn = data.opts.turn, turn = data.opts.turn,
turnData = turn.data(); turnData = turn.data();
if (turnData.display == 'single') { if (turnData.display=='single') {
outArea = (point.corner == 'br' || point.corner == 'tr') ? outArea = (point.corner=='br' || point.corner=='tr') ?
point.x < page.width() / 2 : point.x<page.width()/2:
point.x > page.width() / 2; point.x>page.width()/2;
} else { } else {
outArea = point.x < 0 || point.x > page.width(); outArea = point.x<0 || point.x>page.width();
} }
if ((new Date()).getTime() - data.time < 200 || outArea) { if ((new Date()).getTime()-data.time<200 || outArea) {
e.preventDefault(); e.preventDefault();
turnMethods._turnPage.call(turn, data.opts.next); turnMethods._turnPage.call(turn, data.opts.next);
...@@ -1539,7 +1536,7 @@ ...@@ -1539,7 +1536,7 @@
// This event is called in context of flip // This event is called in context of flip
_flip: function (e) { _flip: function(e) {
e.stopPropagation(); e.stopPropagation();
...@@ -1554,18 +1551,18 @@ ...@@ -1554,18 +1551,18 @@
}, },
// //
_touchStart: function () { _touchStart: function() {
var data = this.data(); var data = this.data();
for (var page in data.pages) { for (var page in data.pages) {
if (has(page, data.pages) && if (has(page, data.pages) &&
flipMethods._eventStart.apply(data.pages[page], arguments) === false) { flipMethods._eventStart.apply(data.pages[page], arguments)===false) {
return false; return false;
} }
} }
}, },
// //
_touchMove: function () { _touchMove: function() {
var data = this.data(); var data = this.data();
for (var page in data.pages) { for (var page in data.pages) {
if (has(page, data.pages)) { if (has(page, data.pages)) {
...@@ -1575,7 +1572,7 @@ ...@@ -1575,7 +1572,7 @@
}, },
// //
_touchEnd: function () { _touchEnd: function() {
var data = this.data(); var data = this.data();
for (var page in data.pages) { for (var page in data.pages) {
if (has(page, data.pages)) { if (has(page, data.pages)) {
...@@ -1586,31 +1583,31 @@ ...@@ -1586,31 +1583,31 @@
// Calculate the z-index value for pages during the animation // Calculate the z-index value for pages during the animation
calculateZ: function (mv) { calculateZ: function(mv) {
var i, page, nextPage, placePage, dpage, var i, page, nextPage, placePage, dpage,
that = this, that = this,
data = this.data(), data = this.data(),
view = this.turn('view'), view = this.turn('view'),
currentPage = view[0] || view[1], currentPage = view[0] || view[1],
total = mv.length - 1, total = mv.length-1,
r = { pageZ: {}, partZ: {}, pageV: {} }, r = {pageZ: {}, partZ: {}, pageV: {}},
addView = function (page) { addView = function(page) {
var view = that.turn('view', page); var view = that.turn('view', page);
if (view[0]) r.pageV[view[0]] = true; if (view[0]) r.pageV[view[0]] = true;
if (view[1]) r.pageV[view[1]] = true; if (view[1]) r.pageV[view[1]] = true;
}; };
for (i = 0; i <= total; i++) { for (i = 0; i<=total; i++) {
page = mv[i]; page = mv[i];
nextPage = data.pages[page].data().f.opts.next; nextPage = data.pages[page].data().f.opts.next;
placePage = data.pagePlace[page]; placePage = data.pagePlace[page];
addView(page); addView(page);
addView(nextPage); addView(nextPage);
dpage = (data.pagePlace[nextPage] == nextPage) ? nextPage : page; dpage = (data.pagePlace[nextPage]==nextPage) ? nextPage : page;
r.pageZ[dpage] = data.totalPages - Math.abs(currentPage - dpage); r.pageZ[dpage] = data.totalPages - Math.abs(currentPage-dpage);
r.partZ[placePage] = data.totalPages * 2 - total + i; r.partZ[placePage] = data.totalPages*2 - total + i;
} }
return r; return r;
...@@ -1618,12 +1615,12 @@ ...@@ -1618,12 +1615,12 @@
// Updates the z-index and display property of every page // Updates the z-index and display property of every page
update: function () { update: function() {
var page, var page,
data = this.data(); data = this.data();
if (this.turn('animating') && data.pageMv[0] !== 0) { if (this.turn('animating') && data.pageMv[0]!==0) {
// Update motion // Update motion
...@@ -1661,14 +1658,14 @@ ...@@ -1661,14 +1658,14 @@
p.flip('hover', false). p.flip('hover', false).
flip('disable', flip('disable',
$.inArray(parseInt(page, 10), data.pageMv) == -1 && $.inArray(parseInt(page, 10), data.pageMv)==-1 &&
page != newView[0] && page!=newView[0] &&
page != newView[1]); page!=newView[1]);
} else { } else {
p.flip('hover', corner === false). p.flip('hover', corner===false).
flip('disable', page != actualView[0] && page != actualView[1]); flip('disable', page!=actualView[0] && page!=actualView[1]);
} }
...@@ -1689,7 +1686,7 @@ ...@@ -1689,7 +1686,7 @@
if (data.pages[page]) { if (data.pages[page]) {
data.pages[page]. data.pages[page].
flip('disable', data.disabled || pageLocation != 1). flip('disable', data.disabled || pageLocation!=1).
flip('hover', true). flip('hover', true).
flip('z', null); flip('z', null);
} }
...@@ -1701,13 +1698,13 @@ ...@@ -1701,13 +1698,13 @@
// Updates the position and size of the flipbook's shadow // Updates the position and size of the flipbook's shadow
_updateShadow: function () { _updateShadow: function() {
var view, view2, shadow, var view, view2, shadow,
data = this.data(), data = this.data(),
width = this.width(), width = this.width(),
height = this.height(), height = this.height(),
pageWidth = (data.display == 'single') ? width : width / 2; pageWidth = (data.display=='single') ? width : width/2;
view = this.turn('view'); view = this.turn('view');
...@@ -1719,7 +1716,7 @@ ...@@ -1719,7 +1716,7 @@
appendTo(this); appendTo(this);
} }
for (var i = 0; i < data.pageMv.length; i++) { for (var i = 0; i<data.pageMv.length; i++) {
if (!view[0] || !view[1]) if (!view[0] || !view[1])
break; break;
...@@ -1730,8 +1727,8 @@ ...@@ -1730,8 +1727,8 @@
view[1] = view[1] && view2[1]; view[1] = view[1] && view2[1];
} }
if (!view[0]) shadow = (data.direction == 'ltr') ? 1 : 2; if (!view[0]) shadow = (data.direction=='ltr') ? 1 : 2;
else if (!view[1]) shadow = (data.direction == 'ltr') ? 2 : 1; else if (!view[1]) shadow = (data.direction=='ltr') ? 2 : 1;
else shadow = 3; else shadow = 3;
switch (shadow) { switch (shadow) {
...@@ -1766,18 +1763,18 @@ ...@@ -1766,18 +1763,18 @@
// Sets the z-index and display property of a page // Sets the z-index and display property of a page
// It depends on the current view // It depends on the current view
_setPageLoc: function (page) { _setPageLoc: function(page) {
var data = this.data(), var data = this.data(),
view = this.turn('view'), view = this.turn('view'),
loc = 0; loc = 0;
if (page == view[0] || page == view[1]) if (page==view[0] || page==view[1])
loc = 1; loc = 1;
else if ( else if (
(data.display == 'single' && page == view[0] + 1) || (data.display=='single' && page==view[0]+1) ||
(data.display == 'double' && page == view[0] - 2 || page == view[1] + 2) (data.display=='double' && page==view[0]-2 || page==view[1]+2)
) )
loc = 2; loc = 2;
...@@ -1793,7 +1790,7 @@ ...@@ -1793,7 +1790,7 @@
case 2: case 2:
data.pageWrap[page].css( data.pageWrap[page].css(
{ {
zIndex: data.totalPages - 1, zIndex: data.totalPages-1,
display: '' display: ''
}); });
break; break;
...@@ -1801,8 +1798,7 @@ ...@@ -1801,8 +1798,7 @@
data.pageWrap[page].css( data.pageWrap[page].css(
{ {
zIndex: 0, zIndex: 0,
display: (data.pageObjs[page].hasClass('fixed')) ? '' : 'none' display: (data.pageObjs[page].hasClass('fixed')) ? '' : 'none'}
}
); );
break; break;
} }
...@@ -1812,9 +1808,9 @@ ...@@ -1812,9 +1808,9 @@
// Gets and sets the options // Gets and sets the options
options: function (options) { options: function(options) {
if (options === undefined) { if (options===undefined) {
return this.data().opts; return this.data().opts;
...@@ -1867,7 +1863,7 @@ ...@@ -1867,7 +1863,7 @@
// Gets the current version // Gets the current version
version: function () { version: function() {
return version; return version;
...@@ -1880,15 +1876,13 @@ ...@@ -1880,15 +1876,13 @@
// Constructor // Constructor
init: function (opts) { init: function(opts) {
this.data({ this.data({f: {
f: {
disabled: false, disabled: false,
hover: false, hover: false,
effect: (this.hasClass('hard')) ? 'hard' : 'sheet' effect: (this.hasClass('hard')) ? 'hard' : 'sheet'
} }});
});
this.flip('options', opts); this.flip('options', opts);
...@@ -1897,7 +1891,7 @@ ...@@ -1897,7 +1891,7 @@
return this; return this;
}, },
setData: function (d) { setData: function(d) {
var data = this.data(); var data = this.data();
...@@ -1906,20 +1900,20 @@ ...@@ -1906,20 +1900,20 @@
return this; return this;
}, },
options: function (opts) { options: function(opts) {
var data = this.data().f; var data = this.data().f;
if (opts) { if (opts) {
flipMethods.setData.call(this, flipMethods.setData.call(this,
{ opts: $.extend({}, data.opts || flipOptions, opts) }); {opts: $.extend({}, data.opts || flipOptions, opts)});
return this; return this;
} else } else
return data.opts; return data.opts;
}, },
z: function (z) { z: function(z) {
var data = this.data().f; var data = this.data().f;
...@@ -1933,35 +1927,35 @@ ...@@ -1933,35 +1927,35 @@
return this; return this;
}, },
_cAllowed: function () { _cAllowed: function() {
var data = this.data().f, var data = this.data().f,
page = data.opts.page, page = data.opts.page,
turnData = data.opts.turn.data(), turnData = data.opts.turn.data(),
odd = page % 2; odd = page%2;
if (data.effect == 'hard') { if (data.effect=='hard') {
return (turnData.direction == 'ltr') ? return (turnData.direction=='ltr') ?
[(odd) ? 'r' : 'l'] : [(odd) ? 'r' : 'l'] :
[(odd) ? 'l' : 'r']; [(odd) ? 'l' : 'r'];
} else { } else {
if (turnData.display == 'single') { if (turnData.display=='single') {
if (page == 1) if (page==1)
return (turnData.direction == 'ltr') ? return (turnData.direction=='ltr') ?
corners['forward'] : corners['backward']; corners['forward'] : corners['backward'];
else if (page == turnData.totalPages) else if (page==turnData.totalPages)
return (turnData.direction == 'ltr') ? return (turnData.direction=='ltr') ?
corners['backward'] : corners['forward']; corners['backward'] : corners['forward'];
else else
return corners['all']; return corners['all'];
} else { } else {
return (turnData.direction == 'ltr') ? return (turnData.direction=='ltr') ?
corners[(odd) ? 'forward' : 'backward'] corners[(odd) ? 'forward' : 'backward']
: :
corners[(odd) ? 'backward' : 'forward']; corners[(odd) ? 'backward' : 'forward'];
...@@ -1972,15 +1966,15 @@ ...@@ -1972,15 +1966,15 @@
}, },
_cornerActivated: function (p) { _cornerActivated: function(p) {
var data = this.data().f, var data = this.data().f,
width = this.width(), width = this.width(),
height = this.height(), height = this.height(),
point = { x: p.x, y: p.y, corner: '' }, point = {x: p.x, y: p.y, corner: ''},
csz = data.opts.cornerSize; csz = data.opts.cornerSize;
if (point.x <= 0 || point.y <= 0 || point.x >= width || point.y >= height) if (point.x<=0 || point.y<=0 || point.x>=width || point.y>=height)
return false; return false;
var allowedCorners = flipMethods._cAllowed.call(this); var allowedCorners = flipMethods._cAllowed.call(this);
...@@ -1988,9 +1982,9 @@ ...@@ -1988,9 +1982,9 @@
switch (data.effect) { switch (data.effect) {
case 'hard': case 'hard':
if (point.x > width - csz) if (point.x>width-csz)
point.corner = 'r'; point.corner = 'r';
else if (point.x < csz) else if (point.x<csz)
point.corner = 'l'; point.corner = 'l';
else else
return false; return false;
...@@ -1999,29 +1993,29 @@ ...@@ -1999,29 +1993,29 @@
case 'sheet': case 'sheet':
if (point.y < csz) if (point.y<csz)
point.corner += 't'; point.corner+= 't';
else if (point.y >= height - csz) else if (point.y>=height-csz)
point.corner += 'b'; point.corner+= 'b';
else else
return false; return false;
if (point.x <= csz) if (point.x<=csz)
point.corner += 'l'; point.corner+= 'l';
else if (point.x >= width - csz) else if (point.x>=width-csz)
point.corner += 'r'; point.corner+= 'r';
else else
return false; return false;
break; break;
} }
return (!point.corner || $.inArray(point.corner, allowedCorners) == -1) ? return (!point.corner || $.inArray(point.corner, allowedCorners)==-1) ?
false : point; false : point;
}, },
_isIArea: function (e) { _isIArea: function(e) {
var pos = this.data().f.parent.offset(); var pos = this.data().f.parent.offset();
...@@ -2029,13 +2023,13 @@ ...@@ -2029,13 +2023,13 @@
return flipMethods._cornerActivated.call(this, return flipMethods._cornerActivated.call(this,
{ {
x: e.pageX - pos.left, x: e.pageX-pos.left,
y: e.pageY - pos.top y: e.pageY-pos.top
}); });
}, },
_c: function (corner, opts) { _c: function(corner, opts) {
opts = opts || 0; opts = opts || 0;
...@@ -2043,39 +2037,39 @@ ...@@ -2043,39 +2037,39 @@
case 'tl': case 'tl':
return point2D(opts, opts); return point2D(opts, opts);
case 'tr': case 'tr':
return point2D(this.width() - opts, opts); return point2D(this.width()-opts, opts);
case 'bl': case 'bl':
return point2D(opts, this.height() - opts); return point2D(opts, this.height()-opts);
case 'br': case 'br':
return point2D(this.width() - opts, this.height() - opts); return point2D(this.width()-opts, this.height()-opts);
case 'l': case 'l':
return point2D(opts, 0); return point2D(opts, 0);
case 'r': case 'r':
return point2D(this.width() - opts, 0); return point2D(this.width()-opts, 0);
} }
}, },
_c2: function (corner) { _c2: function(corner) {
switch (corner) { switch (corner) {
case 'tl': case 'tl':
return point2D(this.width() * 2, 0); return point2D(this.width()*2, 0);
case 'tr': case 'tr':
return point2D(-this.width(), 0); return point2D(-this.width(), 0);
case 'bl': case 'bl':
return point2D(this.width() * 2, this.height()); return point2D(this.width()*2, this.height());
case 'br': case 'br':
return point2D(-this.width(), this.height()); return point2D(-this.width(), this.height());
case 'l': case 'l':
return point2D(this.width() * 2, 0); return point2D(this.width()*2, 0);
case 'r': case 'r':
return point2D(-this.width(), 0); return point2D(-this.width(), 0);
} }
}, },
_foldingPage: function () { _foldingPage: function() {
var data = this.data().f; var data = this.data().f;
...@@ -2087,23 +2081,23 @@ ...@@ -2087,23 +2081,23 @@
if (opts.turn) { if (opts.turn) {
data = opts.turn.data(); data = opts.turn.data();
if (data.display == 'single') if (data.display == 'single')
return (opts.next > 1 || opts.page > 1) ? data.pageObjs[0] : null; return (opts.next>1 || opts.page>1) ? data.pageObjs[0] : null;
else else
return data.pageObjs[opts.next]; return data.pageObjs[opts.next];
} }
}, },
_backGradient: function () { _backGradient: function() {
var data = this.data().f, var data = this.data().f,
turnData = data.opts.turn.data(), turnData = data.opts.turn.data(),
gradient = turnData.opts.gradients && (turnData.display == 'single' || gradient = turnData.opts.gradients && (turnData.display=='single' ||
(data.opts.page != 2 && data.opts.page != turnData.totalPages - 1)); (data.opts.page!=2 && data.opts.page!=turnData.totalPages-1));
if (gradient && !data.bshadow) if (gradient && !data.bshadow)
data.bshadow = $('<div/>', divAtt(0, 0, 1)). data.bshadow = $('<div/>', divAtt(0, 0, 1)).
css({ 'position': '', width: this.width(), height: this.height() }). css({'position': '', width: this.width(), height: this.height()}).
appendTo(data.parent); appendTo(data.parent);
return gradient; return gradient;
...@@ -2116,7 +2110,7 @@ ...@@ -2116,7 +2110,7 @@
}, },
resize: function (full) { resize: function(full) {
var data = this.data().f, var data = this.data().f,
turnData = data.opts.turn.data(), turnData = data.opts.turn.data(),
...@@ -2127,11 +2121,11 @@ ...@@ -2127,11 +2121,11 @@
case 'hard': case 'hard':
if (full) { if (full) {
data.wrapper.css({ width: width, height: height }); data.wrapper.css({width: width, height: height});
data.fpage.css({ width: width, height: height }); data.fpage.css({width: width, height: height});
if (turnData.opts.gradients) { if (turnData.opts.gradients) {
data.ashadow.css({ width: width, height: height }); data.ashadow.css({width: width, height: height});
data.bshadow.css({ width: width, height: height }); data.bshadow.css({width: width, height: height});
} }
} }
...@@ -2139,33 +2133,31 @@ ...@@ -2139,33 +2133,31 @@
case 'sheet': case 'sheet':
if (full) { if (full) {
var size = Math.round(Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))); var size = Math.round(Math.sqrt(Math.pow(width, 2)+Math.pow(height, 2)));
data.wrapper.css({ width: size, height: size }); data.wrapper.css({width: size, height: size});
data.fwrapper.css({ width: size, height: size }). data.fwrapper.css({width: size, height: size}).
children(':first-child'). children(':first-child').
css({ width: width, height: height }); css({width: width, height: height});
data.fpage.css({ width: width, height: height }); data.fpage.css({width: width, height: height});
if (turnData.opts.gradients) if (turnData.opts.gradients)
data.ashadow.css({ width: width, height: height }); data.ashadow.css({width: width, height: height});
if (flipMethods._backGradient.call(this)) if (flipMethods._backGradient.call(this))
data.bshadow.css({ width: width, height: height }); data.bshadow.css({width: width, height: height});
} }
if (data.parent.is(':visible')) { if (data.parent.is(':visible')) {
var offset = findPos(data.parent[0]); var offset = findPos(data.parent[0]);
data.fwrapper.css({ data.fwrapper.css({top: offset.top,
top: offset.top, left: offset.left});
left: offset.left
});
//if (data.opts.turn) { //if (data.opts.turn) {
offset = findPos(data.opts.turn[0]); offset = findPos(data.opts.turn[0]);
data.fparent.css({ top: -offset.top, left: -offset.left }); data.fparent.css({top: -offset.top, left: -offset.left});
//} //}
} }
...@@ -2178,7 +2170,7 @@ ...@@ -2178,7 +2170,7 @@
// Prepares the page by adding a general wrapper and another objects // Prepares the page by adding a general wrapper and another objects
_addPageWrapper: function () { _addPageWrapper: function() {
var att, var att,
data = this.data().f, data = this.data().f,
...@@ -2217,12 +2209,12 @@ ...@@ -2217,12 +2209,12 @@
var width = this.width(), var width = this.width(),
height = this.height(), height = this.height(),
size = Math.round(Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))); size = Math.round(Math.sqrt(Math.pow(width, 2)+Math.pow(height, 2)));
data.fparent = data.opts.turn.data().fparent; data.fparent = data.opts.turn.data().fparent;
if (!data.fparent) { if (!data.fparent) {
var fparent = $('<div/>', { css: { 'pointer-events': 'none' } }).hide(); var fparent = $('<div/>', {css: {'pointer-events': 'none'}}).hide();
fparent.data().flips = 0; fparent.data().flips = 0;
fparent.css(divAtt(0, 0, 'auto', 'visible').css). fparent.css(divAtt(0, 0, 'auto', 'visible').css).
appendTo(data.opts.turn); appendTo(data.opts.turn);
...@@ -2231,7 +2223,7 @@ ...@@ -2231,7 +2223,7 @@
data.fparent = fparent; data.fparent = fparent;
} }
this.css({ position: 'absolute', top: 0, left: 0, bottom: 'auto', right: 'auto' }); this.css({position: 'absolute', top: 0, left: 0, bottom: 'auto', right: 'auto'});
data.wrapper = $('<div/>', divAtt(0, 0, this.css('z-index'))). data.wrapper = $('<div/>', divAtt(0, 0, this.css('z-index'))).
appendTo(parent). appendTo(parent).
...@@ -2242,7 +2234,7 @@ ...@@ -2242,7 +2234,7 @@
appendTo(data.fparent); appendTo(data.fparent);
data.fpage = $('<div/>', divAtt(0, 0, 0, 'visible')). data.fpage = $('<div/>', divAtt(0, 0, 0, 'visible')).
css({ cursor: 'default' }). css({cursor: 'default'}).
appendTo(data.fwrapper); appendTo(data.fwrapper);
if (turnData.opts.gradients) if (turnData.opts.gradients)
...@@ -2261,7 +2253,7 @@ ...@@ -2261,7 +2253,7 @@
// Takes a 2P point from the screen and applies the transformation // Takes a 2P point from the screen and applies the transformation
_fold: function (point) { _fold: function(point) {
var data = this.data().f, var data = this.data().f,
turnData = data.opts.turn.data(), turnData = data.opts.turn.data(),
...@@ -2273,8 +2265,8 @@ ...@@ -2273,8 +2265,8 @@
case 'hard': case 'hard':
if (point.corner == 'l') if (point.corner=='l')
point.x = Math.min(Math.max(point.x, 0), width * 2); point.x = Math.min(Math.max(point.x, 0), width*2);
else else
point.x = Math.max(Math.min(point.x, width), -width); point.x = Math.max(Math.min(point.x, width), -width);
...@@ -2285,10 +2277,10 @@ ...@@ -2285,10 +2277,10 @@
parentOrigin, parentOrigin,
totalPages = turnData.totalPages, totalPages = turnData.totalPages,
zIndex = data.opts['z-index'] || totalPages, zIndex = data.opts['z-index'] || totalPages,
parentCss = { 'overflow': 'visible' }, parentCss = {'overflow': 'visible'},
relX = (o.x) ? (o.x - point.x) / width : point.x / width, relX = (o.x) ? (o.x - point.x)/width : point.x/width,
angle = relX * 90, angle = relX * 90,
half = angle < 90; half = angle<90;
switch (point.corner) { switch (point.corner) {
case 'l': case 'l':
...@@ -2298,11 +2290,11 @@ ...@@ -2298,11 +2290,11 @@
if (half) { if (half) {
leftPos = 0; leftPos = 0;
shadow = data.opts.next - 1 > 0; shadow = data.opts.next-1>0;
gradientX = 1; gradientX = 1;
} else { } else {
leftPos = '100%'; leftPos = '100%';
shadow = data.opts.page + 1 < totalPages; shadow = data.opts.page+1<totalPages;
gradientX = 0; gradientX = 0;
} }
...@@ -2316,34 +2308,34 @@ ...@@ -2316,34 +2308,34 @@
if (half) { if (half) {
leftPos = 0; leftPos = 0;
shadow = data.opts.next + 1 < totalPages; shadow = data.opts.next+1<totalPages;
gradientX = 0; gradientX = 0;
} else { } else {
leftPos = '-100%'; leftPos = '-100%';
shadow = data.opts.page != 1; shadow = data.opts.page!=1;
gradientX = 1; gradientX = 1;
} }
break; break;
} }
parentCss[vendor + 'perspective-origin'] = parentOrigin; parentCss[vendor+'perspective-origin'] = parentOrigin;
data.wrapper.transform('rotateY(' + angle + 'deg)' + data.wrapper.transform('rotateY('+angle+'deg)' +
'translate3d(0px, 0px, ' + (this.attr('depth') || 0) + 'px)', parentOrigin); 'translate3d(0px, 0px, '+(this.attr('depth')||0)+'px)', parentOrigin);
data.fpage.transform('translateX(' + width + 'px) rotateY(' + (180 + angle) + 'deg)', fpageOrigin); data.fpage.transform('translateX('+width+'px) rotateY('+(180+angle)+'deg)', fpageOrigin);
data.parent.css(parentCss); data.parent.css(parentCss);
if (half) { if (half) {
relX = -relX + 1; relX = -relX+1;
data.wrapper.css({ zIndex: zIndex + 1 }); data.wrapper.css({zIndex: zIndex+1});
data.fpage.css({ zIndex: zIndex }); data.fpage.css({zIndex: zIndex});
} else { } else {
relX = relX - 1; relX = relX-1;
data.wrapper.css({ zIndex: zIndex }); data.wrapper.css({zIndex: zIndex});
data.fpage.css({ zIndex: zIndex + 1 }); data.fpage.css({zIndex: zIndex+1});
} }
if (turnData.opts.gradients) { if (turnData.opts.gradients) {
...@@ -2351,28 +2343,28 @@ ...@@ -2351,28 +2343,28 @@
data.ashadow.css({ data.ashadow.css({
display: '', display: '',
left: leftPos, left: leftPos,
backgroundColor: 'rgba(0,0,0,' + (0.5 * relX) + ')' backgroundColor: 'rgba(0,0,0,'+(0.5*relX)+')'
}). }).
transform('rotateY(0deg)'); transform('rotateY(0deg)');
else else
data.ashadow.hide(); data.ashadow.hide();
data.bshadow.css({ opacity: -relX + 1 }); data.bshadow.css({opacity:-relX + 1});
if (half) { if (half) {
if (data.bshadow.parent()[0] != data.wrapper[0]) { if (data.bshadow.parent()[0]!=data.wrapper[0]) {
data.bshadow.appendTo(data.wrapper); data.bshadow.appendTo(data.wrapper);
} }
} else { } else {
if (data.bshadow.parent()[0] != data.fpage[0]) { if (data.bshadow.parent()[0]!=data.fpage[0]) {
data.bshadow.appendTo(data.fpage); data.bshadow.appendTo(data.fpage);
} }
} }
/*data.bshadow.css({ /*data.bshadow.css({
backgroundColor: 'rgba(0,0,0,'+(0.1)+')' backgroundColor: 'rgba(0,0,0,'+(0.1)+')'
})*/ })*/
gradient(data.bshadow, point2D(gradientX * 100, 0), point2D((-gradientX + 1) * 100, 0), gradient(data.bshadow, point2D(gradientX * 100, 0), point2D((-gradientX + 1)*100, 0),
[[0, 'rgba(0,0,0,0.3)'], [1, 'rgba(0,0,0,0)']], 2); [[0, 'rgba(0,0,0,0.3)'],[1, 'rgba(0,0,0,0)']],2);
} }
...@@ -2400,7 +2392,7 @@ ...@@ -2400,7 +2392,7 @@
top = point.corner.substr(0, 1) == 't', top = point.corner.substr(0, 1) == 't',
left = point.corner.substr(1, 1) == 'l', left = point.corner.substr(1, 1) == 'l',
compute = function () { compute = function() {
var rel = point2D(0, 0); var rel = point2D(0, 0);
var middle = point2D(0, 0); var middle = point2D(0, 0);
...@@ -2413,10 +2405,10 @@ ...@@ -2413,10 +2405,10 @@
rel.y = (o.y) ? o.y - point.y : point.y; rel.y = (o.y) ? o.y - point.y : point.y;
} }
middle.x = (left) ? width - rel.x / 2 : point.x + rel.x / 2; middle.x = (left)? width - rel.x/2 : point.x + rel.x/2;
middle.y = rel.y / 2; middle.y = rel.y/2;
var alpha = A90 - Math.atan2(rel.y, rel.x), var alpha = A90-Math.atan2(rel.y, rel.x),
gamma = alpha - Math.atan2(middle.y, middle.x), gamma = alpha - Math.atan2(middle.y, middle.x),
distance = Math.max(0, Math.sin(gamma) * Math.sqrt(Math.pow(middle.x, 2) + Math.pow(middle.y, 2))); distance = Math.max(0, Math.sin(gamma) * Math.sqrt(Math.pow(middle.x, 2) + Math.pow(middle.y, 2)));
...@@ -2425,59 +2417,59 @@ ...@@ -2425,59 +2417,59 @@
tr = point2D(distance * Math.sin(alpha), distance * Math.cos(alpha)); tr = point2D(distance * Math.sin(alpha), distance * Math.cos(alpha));
if (alpha > A90) { if (alpha > A90) {
tr.x = tr.x + Math.abs(tr.y * rel.y / rel.x); tr.x = tr.x + Math.abs(tr.y * rel.y/rel.x);
tr.y = 0; tr.y = 0;
if (Math.round(tr.x * Math.tan(PI - alpha)) < height) { if (Math.round(tr.x*Math.tan(PI-alpha)) < height) {
point.y = Math.sqrt(Math.pow(height, 2) + 2 * middle.x * rel.x); point.y = Math.sqrt(Math.pow(height, 2)+2 * middle.x * rel.x);
if (top) point.y = height - point.y; if (top) point.y = height - point.y;
return compute(); return compute();
} }
} }
if (alpha > A90) { if (alpha>A90) {
var beta = PI - alpha, dd = h - height / Math.sin(beta); var beta = PI-alpha, dd = h - height/Math.sin(beta);
mv = point2D(Math.round(dd * Math.cos(beta)), Math.round(dd * Math.sin(beta))); mv = point2D(Math.round(dd*Math.cos(beta)), Math.round(dd*Math.sin(beta)));
if (left) mv.x = - mv.x; if (left) mv.x = - mv.x;
if (top) mv.y = - mv.y; if (top) mv.y = - mv.y;
} }
px = Math.round(tr.y / Math.tan(alpha) + tr.x); px = Math.round(tr.y/Math.tan(alpha) + tr.x);
var side = width - px, var side = width - px,
sideX = side * Math.cos(alpha * 2), sideX = side*Math.cos(alpha*2),
sideY = side * Math.sin(alpha * 2); sideY = side*Math.sin(alpha*2);
df = point2D( df = point2D(
Math.round((left ? side - sideX : px + sideX)), Math.round((left ? side -sideX : px+sideX)),
Math.round((top) ? sideY : height - sideY)); Math.round((top) ? sideY : height - sideY));
// Gradients // Gradients
if (turnData.opts.gradients) { if (turnData.opts.gradients) {
gradientSize = side * Math.sin(alpha); gradientSize = side*Math.sin(alpha);
var endingPoint = flipMethods._c2.call(that, point.corner), var endingPoint = flipMethods._c2.call(that, point.corner),
far = Math.sqrt(Math.pow(endingPoint.x - point.x, 2) + Math.pow(endingPoint.y - point.y, 2)) / width; far = Math.sqrt(Math.pow(endingPoint.x-point.x, 2)+Math.pow(endingPoint.y-point.y, 2))/width;
shadowVal = Math.sin(A90 * ((far > 1) ? 2 - far : far)); shadowVal = Math.sin(A90*((far>1) ? 2 - far : far));
gradientOpacity = Math.min(far, 1); gradientOpacity = Math.min(far, 1);
gradientStartVal = gradientSize > 100 ? (gradientSize - 100) / gradientSize : 0; gradientStartVal = gradientSize>100 ? (gradientSize-100)/gradientSize : 0;
gradientEndPointA = point2D( gradientEndPointA = point2D(
gradientSize * Math.sin(alpha) / width * 100, gradientSize*Math.sin(alpha)/width*100,
gradientSize * Math.cos(alpha) / height * 100); gradientSize*Math.cos(alpha)/height*100);
if (flipMethods._backGradient.call(that)) { if (flipMethods._backGradient.call(that)) {
gradientEndPointB = point2D( gradientEndPointB = point2D(
gradientSize * 1.2 * Math.sin(alpha) / width * 100, gradientSize*1.2*Math.sin(alpha)/width*100,
gradientSize * 1.2 * Math.cos(alpha) / height * 100); gradientSize*1.2*Math.cos(alpha)/height*100);
if (!left) gradientEndPointB.x = 100 - gradientEndPointB.x; if (!left) gradientEndPointB.x = 100-gradientEndPointB.x;
if (!top) gradientEndPointB.y = 100 - gradientEndPointB.y; if (!top) gradientEndPointB.y = 100-gradientEndPointB.y;
} }
...@@ -2489,12 +2481,12 @@ ...@@ -2489,12 +2481,12 @@
return true; return true;
}, },
transform = function (tr, c, x, a) { transform = function(tr, c, x, a) {
var f = ['0', 'auto'], mvW = (width - h) * x[0] / 100, mvH = (height - h) * x[1] / 100, var f = ['0', 'auto'], mvW = (width-h)*x[0]/100, mvH = (height-h)*x[1]/100,
cssA = { left: f[c[0]], top: f[c[1]], right: f[c[2]], bottom: f[c[3]] }, cssA = {left: f[c[0]], top: f[c[1]], right: f[c[2]], bottom: f[c[3]]},
cssB = {}, cssB = {},
aliasingFk = (a != 90 && a != -90) ? (left ? -1 : 1) : 0, aliasingFk = (a!=90 && a!=-90) ? (left ? -1 : 1) : 0,
origin = x[0] + '% ' + x[1] + '%'; origin = x[0] + '% ' + x[1] + '%';
that.css(cssA). that.css(cssA).
...@@ -2502,40 +2494,40 @@ ...@@ -2502,40 +2494,40 @@
data.fpage.css(cssA).transform( data.fpage.css(cssA).transform(
rotate(a) + rotate(a) +
translate(tr.x + df.x - mv.x - width * x[0] / 100, tr.y + df.y - mv.y - height * x[1] / 100, ac) + translate(tr.x + df.x - mv.x - width*x[0]/100, tr.y + df.y - mv.y - height*x[1]/100, ac) +
rotate((180 / a - 2) * a), rotate((180/a - 2)*a),
origin); origin);
data.wrapper.transform(translate(-tr.x + mvW - aliasingFk, -tr.y + mvH, ac) + rotate(-a), origin); data.wrapper.transform(translate(-tr.x + mvW-aliasingFk, -tr.y + mvH, ac) + rotate(-a), origin);
data.fwrapper.transform(translate(-tr.x + mv.x + mvW, -tr.y + mv.y + mvH, ac) + rotate(-a), origin); data.fwrapper.transform(translate(-tr.x + mv.x + mvW, -tr.y + mv.y + mvH, ac) + rotate(-a), origin);
if (turnData.opts.gradients) { if (turnData.opts.gradients) {
if (x[0]) if (x[0])
gradientEndPointA.x = 100 - gradientEndPointA.x; gradientEndPointA.x = 100-gradientEndPointA.x;
if (x[1]) if (x[1])
gradientEndPointA.y = (100 - gradientEndPointA.y); gradientEndPointA.y = (100-gradientEndPointA.y);
cssB['box-shadow'] = '0 0 20px rgba(0,0,0,' + (0.5 * shadowVal) + ')'; cssB['box-shadow'] = '0 0 20px rgba(0,0,0,'+(0.5*shadowVal)+')';
folding.css(cssB); folding.css(cssB);
gradient(data.ashadow, gradient(data.ashadow,
point2D(left ? 100 : 0, top ? 0 : 100), point2D(left?100:0, top?0:100),
point2D(gradientEndPointA.x, gradientEndPointA.y), point2D(gradientEndPointA.x, gradientEndPointA.y),
[[gradientStartVal, 'rgba(0,0,0,0)'], [[gradientStartVal, 'rgba(0,0,0,0)'],
[((1 - gradientStartVal) * 0.8) + gradientStartVal, 'rgba(0,0,0,' + (0.2 * gradientOpacity) + ')'], [((1-gradientStartVal)*0.8)+gradientStartVal, 'rgba(0,0,0,'+(0.2*gradientOpacity)+')'],
[1, 'rgba(255,255,255,' + (0.2 * gradientOpacity) + ')']], [1, 'rgba(255,255,255,'+(0.2*gradientOpacity)+')']],
3, 3,
alpha); alpha);
if (flipMethods._backGradient.call(that)) if (flipMethods._backGradient.call(that))
gradient(data.bshadow, gradient(data.bshadow,
point2D(left ? 0 : 100, top ? 0 : 100), point2D(left?0:100, top?0:100),
point2D(gradientEndPointB.x, gradientEndPointB.y), point2D(gradientEndPointB.x, gradientEndPointB.y),
[[0.6, 'rgba(0,0,0,0)'], [[0.6, 'rgba(0,0,0,0)'],
[0.8, 'rgba(0,0,0,' + (0.3 * gradientOpacity) + ')'], [0.8, 'rgba(0,0,0,'+(0.3*gradientOpacity)+')'],
[1, 'rgba(0,0,0,0)'] [1, 'rgba(0,0,0,0)']
], ],
3); 3);
...@@ -2544,33 +2536,33 @@ ...@@ -2544,33 +2536,33 @@
}; };
switch (point.corner) { switch (point.corner) {
case 'l': case 'l' :
break; break;
case 'r': case 'r' :
break; break;
case 'tl': case 'tl' :
point.x = Math.max(point.x, 1); point.x = Math.max(point.x, 1);
compute(); compute();
transform(tr, [1, 0, 0, 1], [100, 0], a); transform(tr, [1,0,0,1], [100, 0], a);
break; break;
case 'tr': case 'tr' :
point.x = Math.min(point.x, width - 1); point.x = Math.min(point.x, width-1);
compute(); compute();
transform(point2D(-tr.x, tr.y), [0, 0, 0, 1], [0, 0], -a); transform(point2D(-tr.x, tr.y), [0,0,0,1], [0, 0], -a);
break; break;
case 'bl': case 'bl' :
point.x = Math.max(point.x, 1); point.x = Math.max(point.x, 1);
compute(); compute();
transform(point2D(tr.x, -tr.y), [1, 1, 0, 0], [100, 100], -a); transform(point2D(tr.x, -tr.y), [1,1,0,0], [100, 100], -a);
break; break;
case 'br': case 'br' :
point.x = Math.min(point.x, width - 1); point.x = Math.min(point.x, width-1);
compute(); compute();
transform(point2D(-tr.x, -tr.y), [0, 1, 1, 0], [0, 100], a); transform(point2D(-tr.x, -tr.y), [0,1,1,0], [0, 100], a);
break; break;
} }
...@@ -2581,7 +2573,7 @@ ...@@ -2581,7 +2573,7 @@
}, },
_moveFoldingPage: function (move) { _moveFoldingPage: function(move) {
var data = this.data().f; var data = this.data().f;
...@@ -2596,7 +2588,7 @@ ...@@ -2596,7 +2588,7 @@
var nextPage = data.opts.next; var nextPage = data.opts.next;
if (place[nextPage] != data.opts.page) { if (place[nextPage]!=data.opts.page) {
if (data.folding) if (data.folding)
flipMethods._moveFoldingPage.call(this, false); flipMethods._moveFoldingPage.call(this, false);
...@@ -2642,7 +2634,7 @@ ...@@ -2642,7 +2634,7 @@
} }
}, },
_showFoldedPage: function (c, animate) { _showFoldedPage: function(c, animate) {
var folding = flipMethods._foldingPage.call(this), var folding = flipMethods._foldingPage.call(this),
dd = this.data(), dd = this.data(),
...@@ -2651,17 +2643,17 @@ ...@@ -2651,17 +2643,17 @@
if (folding) { if (folding) {
if (!visible || !data.point || data.point.corner != c.corner) { if (!visible || !data.point || data.point.corner!=c.corner) {
var corner = ( var corner = (
data.status == 'hover' || data.status=='hover' ||
data.status == 'peel' || data.status=='peel' ||
data.opts.turn.data().mouseAction) ? data.opts.turn.data().mouseAction) ?
c.corner : null; c.corner : null;
visible = false; visible = false;
if (trigger('start', this, [data.opts, corner]) == 'prevented') if (trigger('start', this, [data.opts, corner])=='prevented')
return false; return false;
} }
...@@ -2669,14 +2661,14 @@ ...@@ -2669,14 +2661,14 @@
if (animate) { if (animate) {
var that = this, var that = this,
point = (data.point && data.point.corner == c.corner) ? point = (data.point && data.point.corner==c.corner) ?
data.point : flipMethods._c.call(this, c.corner, 1); data.point : flipMethods._c.call(this, c.corner, 1);
this.animatef({ this.animatef({
from: [point.x, point.y], from: [point.x, point.y],
to: [c.x, c.y], to: [c.x, c.y],
duration: 500, duration: 500,
frame: function (v) { frame: function(v) {
c.x = Math.round(v[0]); c.x = Math.round(v[0]);
c.y = Math.round(v[1]); c.y = Math.round(v[1]);
flipMethods._fold.call(that, c); flipMethods._fold.call(that, c);
...@@ -2694,7 +2686,7 @@ ...@@ -2694,7 +2686,7 @@
if (!visible) { if (!visible) {
switch (data.effect) { switch(data.effect) {
case 'hard': case 'hard':
data.visible = true; data.visible = true;
...@@ -2725,7 +2717,7 @@ ...@@ -2725,7 +2717,7 @@
return false; return false;
}, },
hide: function () { hide: function() {
var data = this.data().f, var data = this.data().f,
turnData = data.opts.turn.data(), turnData = data.opts.turn.data(),
...@@ -2746,10 +2738,10 @@ ...@@ -2746,10 +2738,10 @@
break; break;
case 'sheet': case 'sheet':
if ((--data.fparent.data().flips) === 0) if ((--data.fparent.data().flips)===0)
data.fparent.hide(); data.fparent.hide();
this.css({ left: 0, top: 0, right: 'auto', bottom: 'auto' }). this.css({left: 0, top: 0, right: 'auto', bottom: 'auto'}).
transform(''); transform('');
data.wrapper.transform(''); data.wrapper.transform('');
...@@ -2769,7 +2761,7 @@ ...@@ -2769,7 +2761,7 @@
return this; return this;
}, },
hideFoldedPage: function (animate) { hideFoldedPage: function(animate) {
var data = this.data().f; var data = this.data().f;
...@@ -2777,7 +2769,7 @@ ...@@ -2777,7 +2769,7 @@
var that = this, var that = this,
p1 = data.point, p1 = data.point,
hide = function () { hide = function() {
data.point = null; data.point = null;
data.status = ''; data.status = '';
that.flip('hide'); that.flip('hide');
...@@ -2787,15 +2779,15 @@ ...@@ -2787,15 +2779,15 @@
if (animate) { if (animate) {
var p4 = flipMethods._c.call(this, p1.corner), var p4 = flipMethods._c.call(this, p1.corner),
top = (p1.corner.substr(0, 1) == 't'), top = (p1.corner.substr(0,1)=='t'),
delta = (top) ? Math.min(0, p1.y - p4.y) / 2 : Math.max(0, p1.y - p4.y) / 2, delta = (top) ? Math.min(0, p1.y-p4.y)/2 : Math.max(0, p1.y-p4.y)/2,
p2 = point2D(p1.x, p1.y + delta), p2 = point2D(p1.x, p1.y+delta),
p3 = point2D(p4.x, p4.y - delta); p3 = point2D(p4.x, p4.y-delta);
this.animatef({ this.animatef({
from: 0, from: 0,
to: 1, to: 1,
frame: function (v) { frame: function(v) {
var np = bezier(p1, p2, p3, p4, v); var np = bezier(p1, p2, p3, p4, v);
p1.x = np.x; p1.x = np.x;
p1.y = np.y; p1.y = np.y;
...@@ -2814,17 +2806,15 @@ ...@@ -2814,17 +2806,15 @@
} }
}, },
turnPage: function (corner) { turnPage: function(corner) {
var that = this, var that = this,
data = this.data().f, data = this.data().f,
turnData = data.opts.turn.data(); turnData = data.opts.turn.data();
corner = { corner = {corner: (data.corner) ?
corner: (data.corner) ?
data.corner.corner : data.corner.corner :
corner || flipMethods._cAllowed.call(this)[0] corner || flipMethods._cAllowed.call(this)[0]};
};
var p1 = data.point || var p1 = data.point ||
flipMethods._c.call(this, flipMethods._c.call(this,
...@@ -2836,7 +2826,7 @@ ...@@ -2836,7 +2826,7 @@
animatef({ animatef({
from: 0, from: 0,
to: 1, to: 1,
frame: function (v) { frame: function(v) {
var np = bezier(p1, p1, p4, p4, v); var np = bezier(p1, p1, p4, p4, v);
corner.x = np.x; corner.x = np.x;
...@@ -2844,7 +2834,7 @@ ...@@ -2844,7 +2834,7 @@
flipMethods._showFoldedPage.call(that, corner); flipMethods._showFoldedPage.call(that, corner);
}, },
complete: function () { complete: function() {
that.trigger('end', [data.opts, true]); that.trigger('end', [data.opts, true]);
...@@ -2856,31 +2846,32 @@ ...@@ -2856,31 +2846,32 @@
data.corner = null; data.corner = null;
}, },
moving: function () { moving: function() {
return 'effect' in this.data(); return 'effect' in this.data();
}, },
isTurning: function () { isTurning: function() {
return this.flip('moving') && this.data().effect.turning; return this.flip('moving') && this.data().effect.turning;
}, },
corner: function () { corner: function() {
return this.data().f.corner; return this.data().f.corner;
}, },
_eventStart: function (e) { _eventStart: function(e) {
var data = this.data().f, var data = this.data().f,
turn = data.opts.turn; turn = data.opts.turn;
if (!data.corner && !data.disabled && !this.flip('isTurning') && if (!data.corner && !data.disabled && !this.flip('isTurning') &&
data.opts.page == turn.data().pagePlace[data.opts.page]) { data.opts.page==turn.data().pagePlace[data.opts.page])
{
data.corner = flipMethods._isIArea.call(this, e); data.corner = flipMethods._isIArea.call(this, e);
...@@ -2898,7 +2889,7 @@ ...@@ -2898,7 +2889,7 @@
}, },
_eventMove: function (e) { _eventMove: function(e) {
var data = this.data().f; var data = this.data().f;
...@@ -2909,8 +2900,8 @@ ...@@ -2909,8 +2900,8 @@
if (data.corner) { if (data.corner) {
var pos = data.parent.offset(); var pos = data.parent.offset();
data.corner.x = e[0].pageX - pos.left; data.corner.x = e[0].pageX-pos.left;
data.corner.y = e[0].pageY - pos.top; data.corner.y = e[0].pageY-pos.top;
flipMethods._showFoldedPage.call(this, data.corner); flipMethods._showFoldedPage.call(this, data.corner);
} else if (data.hover && !this.data().effect && this.is(':visible')) { } else if (data.hover && !this.data().effect && this.is(':visible')) {
...@@ -2919,9 +2910,9 @@ ...@@ -2919,9 +2910,9 @@
if (point) { if (point) {
if ((data.effect == 'sheet' && point.corner.length == 2) || data.effect == 'hard') { if ((data.effect=='sheet' && point.corner.length==2) || data.effect=='hard') {
data.status = 'hover'; data.status = 'hover';
var origin = flipMethods._c.call(this, point.corner, data.opts.cornerSize / 2); var origin = flipMethods._c.call(this, point.corner, data.opts.cornerSize/2);
point.x = origin.x; point.x = origin.x;
point.y = origin.y; point.y = origin.y;
flipMethods._showFoldedPage.call(this, point, true); flipMethods._showFoldedPage.call(this, point, true);
...@@ -2929,7 +2920,7 @@ ...@@ -2929,7 +2920,7 @@
} else { } else {
if (data.status == 'hover') { if (data.status=='hover') {
data.status = ''; data.status = '';
flipMethods.hideFoldedPage.call(this, true); flipMethods.hideFoldedPage.call(this, true);
} }
...@@ -2942,13 +2933,13 @@ ...@@ -2942,13 +2933,13 @@
}, },
_eventEnd: function () { _eventEnd: function() {
var data = this.data().f, var data = this.data().f,
corner = data.corner; corner = data.corner;
if (!data.disabled && corner) { if (!data.disabled && corner) {
if (trigger('released', this, [data.point || corner]) != 'prevented') { if (trigger('released', this, [data.point || corner])!='prevented') {
flipMethods.hideFoldedPage.call(this, true); flipMethods.hideFoldedPage.call(this, true);
} }
} }
...@@ -2957,16 +2948,16 @@ ...@@ -2957,16 +2948,16 @@
}, },
disable: function (disable) { disable: function(disable) {
flipMethods.setData.call(this, { 'disabled': disable }); flipMethods.setData.call(this, {'disabled': disable});
return this; return this;
}, },
hover: function (hover) { hover: function(hover) {
flipMethods.setData.call(this, { 'hover': hover }); flipMethods.setData.call(this, {'hover': hover});
return this; return this;
}, },
...@@ -2977,12 +2968,12 @@ ...@@ -2977,12 +2968,12 @@
if (corner) { if (corner) {
if ($.inArray(corner, corners.all) == -1) if ($.inArray(corner, corners.all)==-1)
throw turnError('Corner ' + corner + ' is not permitted'); throw turnError('Corner '+corner+' is not permitted');
if ($.inArray(corner, flipMethods._cAllowed.call(this)) != -1) { if ($.inArray(corner, flipMethods._cAllowed.call(this))!=-1) {
var point = flipMethods._c.call(this, corner, data.opts.cornerSize / 2); var point = flipMethods._c.call(this, corner, data.opts.cornerSize/2);
data.status = 'peel'; data.status = 'peel';
...@@ -3013,7 +3004,7 @@ ...@@ -3013,7 +3004,7 @@
function dec(that, methods, args) { function dec(that, methods, args) {
if (!args[0] || typeof (args[0]) == 'object') if (!args[0] || typeof(args[0])=='object')
return methods.init.apply(that, args); return methods.init.apply(that, args);
else if (methods[args[0]]) else if (methods[args[0]])
...@@ -3029,8 +3020,7 @@ ...@@ -3029,8 +3020,7 @@
function divAtt(top, left, zIndex, overf) { function divAtt(top, left, zIndex, overf) {
return { return {'css': {
'css': {
position: 'absolute', position: 'absolute',
top: top, top: top,
left: left, left: left,
...@@ -3049,8 +3039,8 @@ ...@@ -3049,8 +3039,8 @@
b = a * a * a, b = a * a * a,
c = t * t * t; c = t * t * t;
return point2D(Math.round(b * p1.x + 3 * t * a * a * p2.x + 3 * t * t * a * p3.x + c * p4.x), return point2D(Math.round(b*p1.x + 3*t*a*a*p2.x + 3*t*t*a*p3.x + c*p4.x),
Math.round(b * p1.y + 3 * t * a * a * p2.y + 3 * t * t * a * p3.y + c * p4.y)); Math.round(b*p1.y + 3*t*a*a*p2.y + 3*t*t*a*p3.y + c*p4.y));
} }
...@@ -3058,7 +3048,7 @@ ...@@ -3058,7 +3048,7 @@
function rad(degrees) { function rad(degrees) {
return degrees / 180 * PI; return degrees/180*PI;
} }
...@@ -3066,7 +3056,7 @@ ...@@ -3066,7 +3056,7 @@
function deg(radians) { function deg(radians) {
return radians / PI * 180; return radians/PI*180;
} }
...@@ -3074,7 +3064,7 @@ ...@@ -3074,7 +3064,7 @@
function point2D(x, y) { function point2D(x, y) {
return { x: x, y: y }; return {x: x, y: y};
} }
...@@ -3085,7 +3075,7 @@ ...@@ -3085,7 +3075,7 @@
if ((parts = /AppleWebkit\/([0-9\.]+)/i.exec(navigator.userAgent))) { if ((parts = /AppleWebkit\/([0-9\.]+)/i.exec(navigator.userAgent))) {
var webkitVersion = parseFloat(parts[1]); var webkitVersion = parseFloat(parts[1]);
return (webkitVersion > 534.3); return (webkitVersion>534.3);
} else { } else {
return true; return true;
} }
...@@ -3120,13 +3110,13 @@ ...@@ -3120,13 +3110,13 @@
function getPrefix() { function getPrefix() {
var vendorPrefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'], var vendorPrefixes = ['Moz','Webkit','Khtml','O','ms'],
len = vendorPrefixes.length, len = vendorPrefixes.length,
vendor = ''; vendor = '';
while (len--) while (len--)
if ((vendorPrefixes[len] + 'Transform') in document.body.style) if ((vendorPrefixes[len] + 'Transform') in document.body.style)
vendor = '-' + vendorPrefixes[len].toLowerCase() + '-'; vendor='-'+vendorPrefixes[len].toLowerCase()+'-';
return vendor; return vendor;
...@@ -3139,11 +3129,11 @@ ...@@ -3139,11 +3129,11 @@
var t, var t,
el = document.createElement('fakeelement'), el = document.createElement('fakeelement'),
transitions = { transitions = {
'transition': 'transitionend', 'transition':'transitionend',
'OTransition': 'oTransitionEnd', 'OTransition':'oTransitionEnd',
'MSTransition': 'transitionend', 'MSTransition':'transitionend',
'MozTransition': 'transitionend', 'MozTransition':'transitionend',
'WebkitTransition': 'webkitTransitionEnd' 'WebkitTransition':'webkitTransitionEnd'
}; };
for (t in transitions) { for (t in transitions) {
...@@ -3159,42 +3149,40 @@ ...@@ -3159,42 +3149,40 @@
var j, cols = []; var j, cols = [];
if (vendor == '-webkit-') { if (vendor=='-webkit-') {
for (j = 0; j < numColors; j++) for (j = 0; j<numColors; j++)
cols.push('color-stop(' + colors[j][0] + ', ' + colors[j][1] + ')'); cols.push('color-stop('+colors[j][0]+', '+colors[j][1]+')');
obj.css({ obj.css({'background-image':
'background-image': '-webkit-gradient(linear, '+
'-webkit-gradient(linear, ' + p0.x+'% '+
p0.x + '% ' + p0.y+'%,'+
p0.y + '%,' + p1.x+'% '+
p1.x + '% ' + p1.y+'%, '+
p1.y + '%, ' + cols.join(',') + ' )'});
cols.join(',') + ' )'
});
} else { } else {
p0 = { x: p0.x / 100 * obj.width(), y: p0.y / 100 * obj.height() }; p0 = {x:p0.x/100 * obj.width(), y:p0.y/100 * obj.height()};
p1 = { x: p1.x / 100 * obj.width(), y: p1.y / 100 * obj.height() }; p1 = {x:p1.x/100 * obj.width(), y:p1.y/100 * obj.height()};
var dx = p1.x - p0.x, var dx = p1.x-p0.x,
dy = p1.y - p0.y, dy = p1.y-p0.y,
angle = Math.atan2(dy, dx), angle = Math.atan2(dy, dx),
angle2 = angle - Math.PI / 2, angle2 = angle - Math.PI/2,
diagonal = Math.abs(obj.width() * Math.sin(angle2)) + Math.abs(obj.height() * Math.cos(angle2)), diagonal = Math.abs(obj.width()*Math.sin(angle2))+Math.abs(obj.height()*Math.cos(angle2)),
gradientDiagonal = Math.sqrt(dy * dy + dx * dx), gradientDiagonal = Math.sqrt(dy*dy + dx*dx),
corner = point2D((p1.x < p0.x) ? obj.width() : 0, (p1.y < p0.y) ? obj.height() : 0), corner = point2D((p1.x<p0.x) ? obj.width() : 0, (p1.y<p0.y) ? obj.height() : 0),
slope = Math.tan(angle), slope = Math.tan(angle),
inverse = -1 / slope, inverse = -1/slope,
x = (inverse * corner.x - corner.y - slope * p0.x + p0.y) / (inverse - slope), x = (inverse*corner.x - corner.y - slope*p0.x + p0.y)/(inverse-slope),
c = { x: x, y: inverse * x - inverse * corner.x + corner.y }, c = {x: x, y: inverse*x - inverse*corner.x + corner.y},
segA = (Math.sqrt(Math.pow(c.x - p0.x, 2) + Math.pow(c.y - p0.y, 2))); segA = (Math.sqrt( Math.pow(c.x-p0.x,2) + Math.pow(c.y-p0.y,2)));
for (j = 0; j < numColors; j++) for (j = 0; j<numColors; j++)
cols.push(' ' + colors[j][1] + ' ' + ((segA + gradientDiagonal * colors[j][0]) * 100 / diagonal) + '%'); cols.push(' '+colors[j][1]+' '+((segA + gradientDiagonal*colors[j][0])*100/diagonal)+'%');
obj.css({ 'background-image': vendor + 'linear-gradient(' + (-angle) + 'rad,' + cols.join(',') + ')' }); obj.css({'background-image': vendor+'linear-gradient(' + (-angle) + 'rad,' + cols.join(',') + ')'});
} }
} }
...@@ -3232,9 +3220,9 @@ ...@@ -3232,9 +3220,9 @@
function findPos(obj) { function findPos(obj) {
var offset = { top: 0, left: 0 }; var offset = {top: 0, left: 0};
do { do{
offset.left += obj.offsetLeft; offset.left += obj.offsetLeft;
offset.top += obj.offsetTop; offset.top += obj.offsetTop;
} while ((obj = obj.offsetParent)); } while ((obj = obj.offsetParent));
...@@ -3247,18 +3235,18 @@ ...@@ -3247,18 +3235,18 @@
// IE9 is the only browser that does not support hard pages // IE9 is the only browser that does not support hard pages
function hasHardPage() { function hasHardPage() {
return (navigator.userAgent.indexOf('MSIE 9.0') == -1); return (navigator.userAgent.indexOf('MSIE 9.0')==-1);
} }
// Request an animation // Request an animation
window.requestAnim = (function () { window.requestAnim = (function() {
return window.requestAnimationFrame || return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame || window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame || window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame || window.oRequestAnimationFrame ||
window.msRequestAnimationFrame || window.msRequestAnimationFrame ||
function (callback) { function(callback) {
window.setTimeout(callback, 1000 / 60); window.setTimeout(callback, 1000 / 60);
}; };
...@@ -3268,28 +3256,28 @@ ...@@ -3268,28 +3256,28 @@
$.extend($.fn, { $.extend($.fn, {
flip: function () { flip: function() {
return dec($(this[0]), flipMethods, arguments); return dec($(this[0]), flipMethods, arguments);
}, },
turn: function () { turn: function() {
return dec($(this[0]), turnMethods, arguments); return dec($(this[0]), turnMethods, arguments);
}, },
transform: function (transform, origin) { transform: function(transform, origin) {
var properties = {}; var properties = {};
if (origin) if (origin)
properties[vendor + 'transform-origin'] = origin; properties[vendor+'transform-origin'] = origin;
properties[vendor + 'transform'] = transform; properties[vendor+'transform'] = transform;
return this.css(properties); return this.css(properties);
}, },
animatef: function (point) { animatef: function(point) {
var data = this.data(); var data = this.data();
...@@ -3306,7 +3294,7 @@ ...@@ -3306,7 +3294,7 @@
animating = true, animating = true,
that = this, that = this,
time = (new Date()).getTime(), time = (new Date()).getTime(),
frame = function () { frame = function() {
if (!data.effect || !animating) if (!data.effect || !animating)
return; return;
...@@ -3317,9 +3305,9 @@ ...@@ -3317,9 +3305,9 @@
for (var i = 0; i < len; i++) for (var i = 0; i < len; i++)
v.push(data.effect.easing(1, timeDiff, point.from[i], diff[i], point.duration)); v.push(data.effect.easing(1, timeDiff, point.from[i], diff[i], point.duration));
point.frame((len == 1) ? v[0] : v); point.frame((len==1) ? v[0] : v);
if (timeDiff == point.duration) { if (timeDiff==point.duration) {
delete data['effect']; delete data['effect'];
that.data(data); that.data(data);
if (point.complete) if (point.complete)
...@@ -3333,11 +3321,11 @@ ...@@ -3333,11 +3321,11 @@
diff.push(point.to[i] - point.from[i]); diff.push(point.to[i] - point.from[i]);
data.effect = $.extend({ data.effect = $.extend({
stop: function () { stop: function() {
animating = false; animating = false;
}, },
easing: function (x, t, b, c, data) { easing: function (x, t, b, c, data) {
return c * Math.sqrt(1 - (t = t / data - 1) * t) + b; return c * Math.sqrt(1 - (t=t/data-1)*t) + b;
} }
}, point); }, point);
...@@ -3361,4 +3349,4 @@ ...@@ -3361,4 +3349,4 @@
$.cssTransitionEnd = getTransitionEnd; $.cssTransitionEnd = getTransitionEnd;
$.findPos = findPos; $.findPos = findPos;
})(jQuery); })(jQuery);
\ No newline at end of file \ No newline at end of file
src/components.d.ts
浏览文件 @ 6265f8f0
...@@ -10,15 +10,16 @@ declare module 'vue' { ...@@ -10,15 +10,16 @@ declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
BookMarks: typeof import('./components/GuideMobile/bookMarks.vue')['default'] BookMarks: typeof import('./components/GuideMobile/bookMarks.vue')['default']
BookReader: typeof import('./components/BookReader/index.vue')['default'] BookReader: typeof import('./components/BookReader/index.vue')['default']
copy: typeof import('./components/BookReader/index copy.vue')['default']
ElButton: typeof import('element-plus/es')['ElButton'] ElButton: typeof import('element-plus/es')['ElButton']
ElCol: typeof import('element-plus/es')['ElCol'] ElCol: typeof import('element-plus/es')['ElCol']
ElDrawer: typeof import('element-plus/es')['ElDrawer'] ElDrawer: typeof import('element-plus/es')['ElDrawer']
ElHeader: typeof import('element-plus/es')['ElHeader'] ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage'] ElImage: typeof import('element-plus/es')['ElImage']
ElRow: typeof import('element-plus/es')['ElRow'] ElRow: typeof import('element-plus/es')['ElRow']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
FileUpload: typeof import('./components/FileUpload.vue')['default'] FileUpload: typeof import('./components/FileUpload.vue')['default']
Guide: typeof import('./components/GuideMobile/guide.vue')['default'] FlipBook: typeof import('./components/FlipBook/index.vue')['default']
GuideMobile: typeof import('./components/GuideMobile/index.vue')['default'] GuideMobile: typeof import('./components/GuideMobile/index.vue')['default']
GuidePc: typeof import('./components/GuidePc/index.vue')['default'] GuidePc: typeof import('./components/GuidePc/index.vue')['default']
IconCommunity: typeof import('./components/icons/IconCommunity.vue')['default'] IconCommunity: typeof import('./components/icons/IconCommunity.vue')['default']
...@@ -29,7 +30,9 @@ declare module 'vue' { ...@@ -29,7 +30,9 @@ declare module 'vue' {
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
SvgIcon: typeof import('./components/SvgIcon/index.vue')['default'] SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
Test: typeof import('./components/Test/index.vue')['default']
VanCell: typeof import('vant/es')['Cell'] VanCell: typeof import('vant/es')['Cell']
VanIcon: typeof import('vant/es')['Icon']
VanList: typeof import('vant/es')['List'] VanList: typeof import('vant/es')['List']
VanNavBar: typeof import('vant/es')['NavBar'] VanNavBar: typeof import('vant/es')['NavBar']
VanPopup: typeof import('vant/es')['Popup'] VanPopup: typeof import('vant/es')['Popup']
......
src/components/BookReader/index.vue
浏览文件 @ 6265f8f0
...@@ -53,6 +53,20 @@ ...@@ -53,6 +53,20 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div
class="left-button mobile-page-button"
@click="previous"
v-if="isMobile"
>
<van-icon name="arrow-left" />
</div>
<div
class="right-button mobile-page-button"
@click="next"
v-if="isMobile"
>
<van-icon name="arrow" />
</div> -->
</div> </div>
<!-- <div v-if="showExitMessage" class="exit-message">按 ESC 键退出阅读</div> --> <!-- <div v-if="showExitMessage" class="exit-message">按 ESC 键退出阅读</div> -->
...@@ -82,32 +96,54 @@ ...@@ -82,32 +96,54 @@
<div class="footer"> <div class="footer">
<el-row :gutter="10" class="tab-bar"> <el-row :gutter="10" class="tab-bar">
<el-col :class="['left', { isMobile }]" :span="isMobile ? 24 : 8"> <el-col :class="['left', { isMobile }]" :span="isMobile ? 24 : 8">
<el-tooltip content="目录" placement="top" effect="dark">
<svg-icon name="menu" size="20" @click="showGuide"></svg-icon> <svg-icon name="menu" size="20" @click="showGuide"></svg-icon>
</el-tooltip>
<el-tooltip content="缩小" placement="top" effect="dark">
<svg-icon <svg-icon
name="zoom-in" name="zoom-in"
size="20" size="20"
v-if="!isMobile" v-if="!isMobile"
@click="zoomOut" @click="zoomOut"
></svg-icon> ></svg-icon>
</el-tooltip>
<el-tooltip content="放大" placement="top" effect="dark">
<svg-icon <svg-icon
name="zoom-out" name="zoom-out"
size="20" size="20"
v-if="!isMobile" v-if="!isMobile"
@click="zoomIn" @click="zoomIn"
></svg-icon> ></svg-icon>
</el-tooltip>
<!-- 修改音量图标部分 --> <!-- 修改音量图标部分 -->
<el-tooltip
:content="isMuted ? '开启音效' : '关闭音效'"
placement="top"
effect="dark"
>
<svg-icon <svg-icon
:name="isMuted ? 'volume-mute' : 'volume-high'" :name="isMuted ? 'volume-mute' : 'volume-high'"
size="20" size="20"
@click="toggleMute" @click="toggleMute"
/> />
</el-tooltip>
</el-col> </el-col>
<el-col class="center" :span="8"> <el-col class="center" :span="8">
<el-tooltip content="跳转到第一页" placement="top" effect="dark">
<svg-icon name="to-first" size="30" @click="toFirst"></svg-icon> <svg-icon name="to-first" size="30" @click="toFirst"></svg-icon>
</el-tooltip>
<el-tooltip content="跳转上一页" placement="top" effect="dark">
<svg-icon name="to-left" size="22" @click="previous"></svg-icon> <svg-icon name="to-left" size="22" @click="previous"></svg-icon>
</el-tooltip>
<div class="page-count" v-if="!isMobile">第{{ currentPage }}页</div> <div class="page-count" v-if="!isMobile">第{{ currentPage }}页</div>
<el-tooltip content="跳转下一页" placement="top" effect="dark">
<svg-icon name="to-right" size="22" @click="next"></svg-icon> <svg-icon name="to-right" size="22" @click="next"></svg-icon>
</el-tooltip>
<el-tooltip content="跳转到最后一页" placement="top" effect="dark">
<svg-icon name="to-end" size="30" @click="toEnd"></svg-icon> <svg-icon name="to-end" size="30" @click="toEnd"></svg-icon>
</el-tooltip>
</el-col> </el-col>
<el-col class="right" :span="8"> <el-col class="right" :span="8">
<!-- <svg-icon name="download" size="20"></svg-icon> --> <!-- <svg-icon name="download" size="20"></svg-icon> -->
...@@ -120,10 +156,13 @@ ...@@ -120,10 +156,13 @@
<script setup> <script setup>
import $ from "jquery"; import $ from "jquery";
import "turn.js"; import "turn.js";
// import turn from "@/assets/js/turn.js";
import { ref, onMounted, onUnmounted, watch, nextTick, computed } from "vue"; import { ref, onMounted, onUnmounted, watch, nextTick, computed } from "vue";
import VueEasyLightbox from "vue-easy-lightbox"; import VueEasyLightbox from "vue-easy-lightbox";
import GuideMobile from "../GuideMobile/index.vue"; import GuideMobile from "../GuideMobile/index.vue";
import audioFlip from "@/assets/audio/flip.mp3"; import audioFlip from "@/assets/audio/flip.mp3";
import throttle from "lodash/throttle";
import debounce from "lodash/debounce";
const props = defineProps({ const props = defineProps({
pages: { pages: {
type: Array, type: Array,
...@@ -143,7 +182,7 @@ const zoomLevel = ref(1); ...@@ -143,7 +182,7 @@ const zoomLevel = ref(1);
const isInitialized = ref(false); const isInitialized = ref(false);
const imageObserver = ref(null); const imageObserver = ref(null);
const loadingQueue = ref(new Set()); const loadingQueue = ref(new Set());
const maxConcurrentLoads = 5; const maxConcurrentLoads = 3;
const imageCache = ref(new Map()); const imageCache = ref(new Map());
const loadingTimeouts = ref(new Map()); const loadingTimeouts = ref(new Map());
const isMobile = ref(false); const isMobile = ref(false);
...@@ -183,7 +222,7 @@ const handleTouchStart = (e) => { ...@@ -183,7 +222,7 @@ const handleTouchStart = (e) => {
touchStartY.value = e.touches[0].clientY; touchStartY.value = e.touches[0].clientY;
}; };
const handleTouchEnd = (e) => { const handleTouchEnd = throttle((e) => {
if (!isMobile.value) return; if (!isMobile.value) return;
const touchEndX = e.changedTouches[0].clientX; const touchEndX = e.changedTouches[0].clientX;
const touchEndY = e.changedTouches[0].clientY; const touchEndY = e.changedTouches[0].clientY;
...@@ -198,7 +237,7 @@ const handleTouchEnd = (e) => { ...@@ -198,7 +237,7 @@ const handleTouchEnd = (e) => {
next(); next();
} }
} }
}; });
// 修改处理页面的函数，只处理必要的属性 // 修改处理页面的函数，只处理必要的属性
const processPages = (pages) => { const processPages = (pages) => {
...@@ -281,24 +320,25 @@ const loadVisiblePages = async (currentPage) => { ...@@ -281,24 +320,25 @@ const loadVisiblePages = async (currentPage) => {
const totalPages = $magazine.turn("pages"); const totalPages = $magazine.turn("pages");
// 加载当前页、上一页、下一页和下下页 // 加载当前页、上一页、下一页和下下页
const startPage = Math.max(1, currentPage - 1); const startPage = Math.max(1, currentPage - 2);
const endPage = Math.min(totalPages, currentPage + 2); const endPage = Math.min(totalPages, currentPage + 2);
const highPriority = [currentPage, currentPage + 1]; // 优先加载当前和下一页
const loadTasks = [];
for (let i = startPage; i <= endPage; i++) { // const loadTasks = [];
const pageIndex = i - 1; // for (let i = startPage; i <= endPage; i++) {
if ( // const pageIndex = i - 1;
pageIndex >= 0 && // if (
pageIndex < processedPages.value.length && // pageIndex >= 0 &&
!processedPages.value[pageIndex].isLoaded // pageIndex < processedPages.value.length &&
) { // !processedPages.value[pageIndex].isLoaded
loadTasks.push(loadImage(pageIndex)); // ) {
} // loadTasks.push(loadImage(pageIndex));
} // }
// }
try { try {
loading.value = true; loading.value = true;
await Promise.all(loadTasks); await Promise.all(highPriority.map(loadImage));
} catch (error) { } catch (error) {
console.error("加载页面失败:", error); console.error("加载页面失败:", error);
} finally { } finally {
...@@ -373,16 +413,15 @@ const initBook = async () => { ...@@ -373,16 +413,15 @@ const initBook = async () => {
width: isMobile.value ? pageWidth : pageWidth * 2, width: isMobile.value ? pageWidth : pageWidth * 2,
height: pageHeight, height: pageHeight,
display: isMobile.value ? "single" : "double", display: isMobile.value ? "single" : "double",
acceleration: true, acceleration: false,
gradients: true, gradients: true,
elevation: 100, elevation: 80,
duration: 800, duration: 800,
autoCenter: true, autoCenter: true,
turnCorners: "bl,br", turnCorners: "bl,br",
page: 1, page: 1,
when: { when: {
turning: async (event, page) => { turning: async (event, page) => {
loading.value = true;
await loadVisiblePages(page); await loadVisiblePages(page);
// 确保加载完成后才继续翻页 // 确保加载完成后才继续翻页
setTimeout(() => { setTimeout(() => {
...@@ -478,8 +517,8 @@ const handleImageError = async (index) => { ...@@ -478,8 +517,8 @@ const handleImageError = async (index) => {
} }
}; };
const next = () => { const next = throttle(() => {
if (magazine.value && isInitialized.value) { if (magazine.value && isInitialized.value && !loading.value) {
const $magazine = $(magazine.value); const $magazine = $(magazine.value);
const currentPage = $magazine.turn("page"); const currentPage = $magazine.turn("page");
const nextPage = currentPage + 1; const nextPage = currentPage + 1;
...@@ -492,10 +531,10 @@ const next = () => { ...@@ -492,10 +531,10 @@ const next = () => {
$magazine.turn("next", { duration: 1500 }); $magazine.turn("next", { duration: 1500 });
}, 100); }, 100);
} }
}; });
const previous = () => { const previous = throttle(() => {
if (magazine.value && isInitialized.value) { if (magazine.value && isInitialized.value && !loading.value) {
const $magazine = $(magazine.value); const $magazine = $(magazine.value);
const currentPage = $magazine.turn("page"); const currentPage = $magazine.turn("page");
const prevPage = currentPage - 1; const prevPage = currentPage - 1;
...@@ -508,7 +547,7 @@ const previous = () => { ...@@ -508,7 +547,7 @@ const previous = () => {
$magazine.turn("previous", { duration: 1500 }); $magazine.turn("previous", { duration: 1500 });
}, 100); }, 100);
} }
}; });
const toFirst = () => { const toFirst = () => {
const firstPage = props.pages[0].page_num; const firstPage = props.pages[0].page_num;
...@@ -837,7 +876,7 @@ const showGuide = () => { ...@@ -837,7 +876,7 @@ const showGuide = () => {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background-color: white; // 视口背景 background-color: white; // 视口背景
contain: strict; // 启用CSS Contain隔离布局
.magazine { .magazine {
background-color: white; // 书本背景 background-color: white; // 书本背景
} }
...@@ -852,7 +891,7 @@ const showGuide = () => { ...@@ -852,7 +891,7 @@ const showGuide = () => {
align-items: center; align-items: center;
background-color: #333; background-color: #333;
position: relative; position: relative;
background-image: url("@/assets/images/bg3.jpg"); background-image: url("@/assets/images/bg4.png");
background-size: 100% 100%; background-size: 100% 100%;
touch-action: pan-y pinch-zoom; touch-action: pan-y pinch-zoom;
} }
...@@ -879,23 +918,6 @@ const showGuide = () => { ...@@ -879,23 +918,6 @@ const showGuide = () => {
transform-style: preserve-3d; transform-style: preserve-3d;
} }
// .magazine::after {
// content: "";
// position: absolute;
// top: 0;
// left: 50%;
// width: 1px;
// height: 100%;
// background: linear-gradient(
// to bottom,
// rgba(0, 0, 0, 0.1) 0%,
// rgba(0, 0, 0, 0.2) 50%,
// rgba(0, 0, 0, 0.1) 100%
// );
// z-index: 10;
// pointer-events: none;
// }
.page { .page {
background-color: white; background-color: white;
position: absolute; position: absolute;
...@@ -910,100 +932,6 @@ const showGuide = () => { ...@@ -910,100 +932,6 @@ const showGuide = () => {
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05); box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
} }
// .page:before {
// content: "";
// position: absolute;
// width: 100px;
// height: 100px;
// bottom: 0;
// z-index: 10;
// }
// .page.odd:before {
// right: 0;
// background: linear-gradient(315deg, rgba(0, 0, 0, 0.2) 0%, transparent 50%);
// }
// .page.even:before {
// left: 0;
// background: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, transparent 50%);
// }
// .page-image {
// width: 100%;
// height: 100%;
// object-fit: contain;
// pointer-events: none;
// visibility: visible !important;
// // backface-visibility: hidden;
// transform-style: preserve-3d;
// transform: translate3d(0, 0, 0);
// }
// .exit-message {
// position: fixed;
// top: 20px;
// left: 50%;
// transform: translateX(-50%);
// background: rgba(0, 0, 0, 0.5);
// color: white;
// padding: 10px 20px;
// border-radius: 4px;
// z-index: 1000;
// }
// .page.wide-page {
// width: 200% !important;
// left: 0 !important;
// z-index: 5 !important;
// }
// .page.wide-page.isHidden {
// display: none !important;
// }
// .wide-image {
// width: 100%;
// height: 100%;
// object-fit: contain;
// }
/* 确保宽图页面的阴影效果 */
// .page.wide-page::after {
// content: "";
// position: absolute;
// top: 0;
// left: 0;
// right: 0;
// bottom: 0;
// box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.2);
// pointer-events: none;
// z-index: 1;
// }
/* 角落悬停效果 */
// .page.hover::before {
// content: "";
// position: absolute;
// width: 100px;
// height: 100px;
// pointer-events: none;
// z-index: 10;
// transition: all 0.3s ease;
// }
// .page.hover:nth-child(odd)::before {
// right: 0;
// bottom: 0;
// background: linear-gradient(315deg, rgba(0, 0, 0, 0.2) 0%, transparent 80%);
// }
// .page.hover:nth-child(even)::before {
// left: 0;
// bottom: 0;
// background: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, transparent 80%);
// }
/* 缩放状态样式 */ /* 缩放状态样式 */
.magazine.zoomed { .magazine.zoomed {
cursor: move; cursor: move;
...@@ -1052,6 +980,27 @@ const showGuide = () => { ...@@ -1052,6 +980,27 @@ const showGuide = () => {
/* 防止图片本身接收点击事件 */ /* 防止图片本身接收点击事件 */
} }
.mobile-page-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
background-color: #444;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.left-button {
left: 4px;
}
.right-button {
right: 4px;
}
.footer { .footer {
background-color: #444; background-color: #444;
padding: 0 20px; padding: 0 20px;
......
src/components/FlipBook/index.vue 0 → 100644
浏览文件 @ 6265f8f0
<template>
<div class="back"></div>
<div id="canvas">
<div class="previousPage" @click="previousPage"></div>
<div class="nextPage" @click="nextPage"></div>
<div class="magazine-viewport">
<div class="container">
<div class="magazine"></div>
</div>
</div>
</div>
</template>
<script>
import { onMounted, ref, onBeforeUnmount } from "vue";
// import $ from "jquery";
import { isChrome, addPage, disableControls } from "./magazine";
// import "/js/modernizr.2.5.3.min.js";
// import "/js/hash.js";
// import "/js/turn.js";
// import "/js/turn.html4.min.js";
// import "/js/zoom.min.js";
// import "/js/magazine.js";
const $ = window.$;
export default {
name: "Flipbook",
setup() {
const magazine = ref(null);
// Initialize the flipbook once the component is mounted
onMounted(() => {
setTimeout(() => {
loadApp();
}, 1000);
});
// Clean up on component unmount
onBeforeUnmount(() => {
if (magazine.value) {
$(magazine.value).turn("destroy");
}
});
const nextPage = () => {
$(magazine.value).turn("next");
};
const previousPage = () => {
$(magazine.value).turn("previous");
};
// Function to load the flipbook app
function loadApp() {
debugger;
$("#canvas").fadeIn(1000);
const flipbook = $(".magazine");
if (flipbook.width() === 0 || flipbook.height() === 0) {
setTimeout(loadApp, 10);
return;
}
console.log(window.screen.width);
console.log(window.screen.height);
let w, h;
if (window.screen.width > window.screen.height) {
w = $(".magazine-viewport").parent().width();
h = $(window).height();
if (w === 0) {
w = ((2482 * 2) / 3368) * h;
}
const w1 = ((2482 * 2) / 3368) * h;
const h1 = (3368 / (2482 * 2)) * w;
if (w1 > w) {
h = h1;
} else {
w = w1;
}
$(".magazine-viewport").width(w).height(h);
$(".magazine").width(w).height(h);
$(window).resize(() => {
let w = $(".magazine-viewport").parent().width();
let h = $(window).height();
if (w === 0) {
w = ((2482 * 2) / 3368) * h;
}
const w1 = ((2482 * 2) / 3368) * h;
const h1 = (3368 / (2482 * 2)) * w;
if (w1 > w) {
h = h1;
} else {
w = w1;
}
$(".magazine-viewport").width(w).height(h);
$(".magazine").width(w).height(h);
});
initBook("double");
} else {
w = $(".magazine-viewport").parent().width();
h = $(window).height();
if (w === 0) {
w = (2482 / 3368) * h;
}
const w1 = (2482 / 3368) * h;
const h1 = (3368 / 2482) * w;
if (w1 > w) {
h = h1;
} else {
w = w1;
}
$(".magazine-viewport").width(w).height(h);
$(".magazine").width(w).height(h);
$(window).resize(() => {
const w = $(".magazine-viewport").parent().width();
const h = $(window).height();
if (w === 0) {
w = (2482 / 3368) * h;
}
const w1 = (2482 / 3368) * h;
const h1 = (3368 / 2482) * w;
if (w1 > w) {
h = h1;
} else {
w = w1;
}
$(".magazine-viewport").width(w).height(h);
$(".magazine").width(w).height(h);
});
initBook("single");
}
}
// Function to initialize the flipbook
function initBook(display) {
const flipbook = $(".magazine");
flipbook.turn({
width: $(".magazine-viewport").parent().width(),
height: $(window).height(),
duration: 1000,
display,
acceleration: !isChrome(),
gradients: true,
autoCenter: true,
elevation: 50,
pages: 73,
when: {
turning: function (event, page, view) {
const book = $(this);
const currentPage = book.turn("page");
const pages = book.turn("pages");
Hash.go(`page/${page}`).update();
disableControls(page);
},
turned: function (event, page, view) {
disableControls(page);
$(this).turn("center");
if (page === 1) {
$(this).turn("peel", "br");
}
},
missing: function (event, pages) {
for (let i = 0; i < pages.length; i++) addPage(pages[i], $(this));
},
},
});
}
return {
magazine,
nextPage,
previousPage,
};
},
};
</script>
<style scoped>
/* Add your custom styles for the flipbook here */
@import "./magazine.css";
</style>
src/components/FlipBook/magazine.css 0 → 100644
浏览文件 @ 6265f8f0
body {
overflow: hidden;
/* background: url('../pics/wood.png'); */
margin: 0;
padding: 0;
}
.back {
width: 100vw;
height: 100vh;
position: absolute;
left: 0;
top: 0;
z-index: 55;
/* background: url('../pics/wood.png'); */
background: rgba(2, 0, 34, 0.986);
}
#canvas {
position: absolute;
background: url('@/assets/images/bg4.png') repeat-x bottom center;
}
/*上一页*/
.previousPage {
width: 33%;
height: 60%;
position: absolute;
bottom: 0%;
left: 17%;
z-index: 999999;
/* background-color: aqua; */
background: transparent !important;
}
/*下一页*/
.nextPage {
width: 33%;
height: 60%;
position: absolute;
bottom: 0%;
left: 50%;
z-index: 999999;
/* background-color: aqua; */
background: transparent !important;
}
.magazine-viewport {
position: absolute;
}
.magazine-viewport .container {
z-index: 666;
position: absolute;
top: 54%;
left: 50%;
width: 1400px;
height: 781px;
margin: auto;
}
.magazine-viewport .magazine {
width: 1400px;
height: 781px;
left: -661px;
top: -300px;
}
.magazine-viewport .page {
width: 700px;
height: 781px;
background-color: white;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.magazine-viewport .zoomer .region {
display: none;
}
.magazine .region {
position: absolute;
overflow: hidden;
background: #0066FF;
opacity: 0.2;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}
.magazine .region:hover {
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
}
.magazine .region.zoom {
opacity: 0.01;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=1);
}
.magazine .region.zoom:hover {
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}
.magazine .page {
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.magazine-viewport .page img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 0;
}
.magazine .even .gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0, 0, 0, 0)), color-stop(1, rgba(0, 0, 0, 0.2)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
}
.magazine .odd .gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, right top, left top, color-stop(0.95, rgba(0, 0, 0, 0)), color-stop(1, rgba(0, 0, 0, 0.15)));
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.15) 100%);
background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.15) 100%);
background-image: -ms-linear-gradient(right, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.15) 100%);
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.15) 100%);
background-image: linear-gradient(right, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.15) 100%);
}
.magazine-viewport .zoom-in .even .gradient,
.magazine-viewport .zoom-in .odd .gradient {
display: none;
}
.magazine-viewport .loader {
/* background-image: url(../pics/loader.gif); */
width: 22px;
height: 22px;
position: absolute;
top: 280px;
left: 219px;
}
.magazine-viewport .shadow {
-webkit-transition: -webkit-box-shadow 0.5s;
-moz-transition: -moz-box-shadow 0.5s;
-o-transition: -webkit-box-shadow 0.5s;
-ms-transition: -ms-box-shadow 0.5s;
-webkit-box-shadow: 0 0 20px #000;
-moz-box-shadow: 0 0 20px #000;
-o-box-shadow: 0 0 20px #000;
-ms-box-shadow: 0 0 20px #000;
box-shadow: 0 0 20px #000;
}
.next-button {
width: 59px;
height: 59px;
position: absolute;
top: 50%;
/* background: url('../pics/arrows.png') -59px 0; */
right: 10px;
z-index: 10;
}
.previous-button {
width: 59px;
height: 59px;
position: absolute;
top: 50%;
/* background-image: url('../pics/arrows.png'); */
z-index: 10;
}
.magazine-viewport .previous-button-hover {
background-position: 0 -59px;
cursor: pointer;
}
.magazine-viewport .next-button-hover {
background-position: -59px -59px;
cursor: pointer;
}
.magazine-viewport .previous-button-hover,
.magazine-viewport .previous-button-down {}
.magazine-viewport .previous-button-down,
.magazine-viewport .next-button-down {}
.magazine-viewport .next-button-hover,
.magazine-viewport .next-button-down {}
.magazine-viewport .zoom-in .next-button,
.magazine-viewport .zoom-in .previous-button {
display: none;
}
.animated {
-webkit-transition: margin-left 0.5s;
-moz-transition: margin-left 0.5s;
-ms-transition: margin-left 0.5s;
-o-transition: margin-left 0.5s;
transition: margin-left 0.5s;
}
.exit-message {
position: absolute;
top: 10px;
left: 0;
width: 100%;
height: 40px;
z-index: 10000;
}
.exit-message>div {
width: 140px;
height: 30px;
margin: auto;
background: rgba(0, 0, 0, 0.5);
text-align: center;
font: 12px arial;
line-height: 30px;
color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
.zoom-icon {
position: absolute;
z-index: 1000;
width: 22px;
height: 22px;
top: 10px;
right: 10px;
/* background-image: url(../pics/zoom-icons.png); */
background-size: 88px 22px;
}
.zoom-icon-in {
background-position: 0 0;
cursor: pointer;
}
.zoom-icon-in.zoom-icon-in-hover {
background-position: -22px 0;
cursor: pointer;
}
.zoom-icon-out {
background-position: -44px 0;
}
.zoom-icon-out.zoom-icon-out-hover {
background-position: -66px 0;
cursor: pointer;
}
.bottom {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
\ No newline at end of file
src/assets/js/magazine.js → src/components/FlipBook/magazine.js
浏览文件 @ 6265f8f0
/* /*
* Magazine sample * Magazine sample
*/ */
// import window.$ from 'jquery'
function setArrows() { export function setArrows() {
setTimeout(function() { setTimeout(function () {
var width = $(window).width(); var width = window.$(window).width();
var bookWidth = $(".magazine").width(); var bookWidth = window.$(".magazine").width();
var arrowSize = $(".next-button").width(); var arrowSize = window.$(".next-button").width();
var magaLeft = $(".magazine").offset().left; var magaLeft = window.$(".magazine").offset().left;
var nextLeft = (width - bookWidth - magaLeft - 60) / 2; var nextLeft = (width - bookWidth - magaLeft - 60) / 2;
//alert("width "+width +"\nbookWidth :"+bookWidth +"\nmagaLeft:"+magaLeft+"\nnextLeft:"+nextLeft); //alert("width "+width +"\nbookWidth :"+bookWidth +"\nmagaLeft:"+magaLeft+"\nnextLeft:"+nextLeft);
$('.next-button').animate({ "right": nextLeft }, 300); window.window.$('.next-button').animate({ "right": nextLeft }, 300);
$('.previous-button').animate({ "left": nextLeft }, 300); window.window.$('.previous-button').animate({ "left": nextLeft }, 300);
}, 100); }, 100);
} }
function addPage(page, book) { export function addPage(page, book) {
var id, pages = book.turn('pages'); var id, pages = book.turn('pages');
var element = $('<div />', {}); var element = window.window.$('<div />', {});
if (book.turn('addPage', element, page)) { if (book.turn('addPage', element, page)) {
element.html('<div class="gradient"></div><div class="loader"></div>'); element.html('<div class="gradient"></div><div class="loader"></div>');
loadPage(page, element); loadPage(page, element);
...@@ -28,43 +28,43 @@ function addPage(page, book) { ...@@ -28,43 +28,43 @@ function addPage(page, book) {
} }
function loadPage(page, pageElement) { export function loadPage(page, pageElement) {
pageElement.find('.loader').remove(); pageElement.find('.loader').remove();
const imgPath = new URL(`../../assets/book/img_window.window.${page}.jpg`, import.meta.url).href;
// Create an image element // Create an image element
var img = $('<img />'); var img = window.$('<img />');
img.mousedown(function(e) { img.mousedown(function (e) {
e.preventDefault(); e.preventDefault();
}); });
img.load(function() { img.load(function () {
// Set the size // Set the size
$(this).css({ window.$(this).css({
width: '100%', width: '100%',
height: '100%' height: '100%'
}); });
// Add the image to the page after loaded // Add the image to the page after loaded
$(this).appendTo(pageElement); window.$(this).appendTo(pageElement);
// Remove the loader indicator // Remove the loader indicator
pageElement.find('.loader').remove(); pageElement.find('.loader').remove();
}); });
// Load the page // Load the page
img.attr('src', 'book/img_' + page + '.jpg'); img.attr('src', imgPath);
} }
function zoomTo(event) {} export function zoomTo(event) { }
function addRegion(region, pageElement) { export function addRegion(region, pageElement) {
var reg = $('<div />', { var reg = window.$('<div />', {
'class': 'region ' + region['class'] 'class': 'region ' + region['class']
}), }),
options = $('.magazine').turn('options'), options = window.$('.magazine').turn('options'),
pageWidth = options.width / 2, pageWidth = options.width / 2,
pageHeight = options.height; pageHeight = options.height;
...@@ -73,26 +73,26 @@ function addRegion(region, pageElement) { ...@@ -73,26 +73,26 @@ function addRegion(region, pageElement) {
left: Math.round(region.x / pageWidth * 100) + '%', left: Math.round(region.x / pageWidth * 100) + '%',
width: Math.round(region.width / pageWidth * 100) + '%', width: Math.round(region.width / pageWidth * 100) + '%',
height: Math.round(region.height / pageHeight * 100) + '%' height: Math.round(region.height / pageHeight * 100) + '%'
}).attr('region-data', $.param(region.data || '')); }).attr('region-data', window.$.param(region.data || ''));
reg.appendTo(pageElement); reg.appendTo(pageElement);
} }
// Process click on a region // Process click on a region
function regionClick(event) { export function regionClick(event) {
var region = $(event.target); var region = window.$(event.target);
if (region.hasClass('region')) { if (region.hasClass('region')) {
$('.magazine-viewport').data().regionClicked = true; window.$('.magazine-viewport').data().regionClicked = true;
setTimeout(function() { setTimeout(function () {
$('.magazine-viewport').data().regionClicked = false; window.$('.magazine-viewport').data().regionClicked = false;
}, },
100); 100);
var regionType = $.trim(region.attr('class').replace('region', '')); var regionType = window.$.trim(region.attr('class').replace('region', ''));
return processRegion(region, regionType); return processRegion(region, regionType);
...@@ -103,30 +103,30 @@ function regionClick(event) { ...@@ -103,30 +103,30 @@ function regionClick(event) {
// http://code.google.com/p/chromium/issues/detail?id=128488 // http://code.google.com/p/chromium/issues/detail?id=128488
function isChrome() { export function isChrome() {
return navigator.userAgent.indexOf('Chrome') != -1; return navigator.userAgent.indexOf('Chrome') != -1;
} }
function disableControls(page) { export function disableControls(page) {
if (page == 1) $('.previous-button').hide(); if (page == 1) window.$('.previous-button').hide();
else $('.previous-button').show(); else window.$('.previous-button').show();
if (page == $('.magazine').turn('pages')) $('.next-button').hide(); if (page == window.$('.magazine').turn('pages')) window.$('.next-button').hide();
else $('.next-button').show(); else window.$('.next-button').show();
} }
// Set the width and height for the viewport // Set the width and height for the viewport
function resizeViewport() { export function resizeViewport() {
var width = $(window).width(), var width = window.$(window).width(),
height = $(window).height(), height = window.$(window).height(),
options = $('.magazine').turn('options'); options = window.$('.magazine').turn('options');
$('.magazine').removeClass('animated'); window.$('.magazine').removeClass('animated');
$('.magazine-viewport').css({ window.$('.magazine-viewport').css({
width: width, width: width,
height: height height: height
}).zoom('resize'); }).zoom('resize');
setArrows(); setArrows();
if ($('.magazine').turn('zoom') == 1) { if (window.$('.magazine').turn('zoom') == 1) {
var bound = calculateBound({ var bound = calculateBound({
width: options.width, width: options.width,
height: options.height, height: options.height,
...@@ -135,59 +135,59 @@ function resizeViewport() { ...@@ -135,59 +135,59 @@ function resizeViewport() {
}); });
if (bound.width % 2 !== 0) bound.width -= 1; if (bound.width % 2 !== 0) bound.width -= 1;
if (bound.width != $('.magazine').width() || bound.height != $('.magazine').height()) { if (bound.width != window.$('.magazine').width() || bound.height != window.$('.magazine').height()) {
$('.magazine').turn('size', bound.width, bound.height); window.$('.magazine').turn('size', bound.width, bound.height);
if ($('.magazine').turn('page') == 1) $('.magazine').turn('peel', 'br'); if (window.$('.magazine').turn('page') == 1) window.$('.magazine').turn('peel', 'br');
} }
$('.magazine').css({ window.$('.magazine').css({
top: -bound.height / 2, top: -bound.height / 2,
left: -bound.width / 2 left: -bound.width / 2
}); });
} }
var magazineOffset = $('.magazine').offset(), var magazineOffset = window.$('.magazine').offset(),
boundH = height - magazineOffset.top - $('.magazine').height(), boundH = height - magazineOffset.top - window.$('.magazine').height(),
marginTop = (boundH - $('.thumbnails > div').height()) / 2; marginTop = (boundH - window.$('.thumbnails > div').height()) / 2;
if (marginTop < 0) { if (marginTop < 0) {
$('.thumbnails').css({ window.$('.thumbnails').css({
height: 1 height: 1
}); });
} else { } else {
$('.thumbnails').css({ window.$('.thumbnails').css({
height: boundH height: boundH
}); });
$('.thumbnails > div').css({ window.$('.thumbnails > div').css({
marginTop: marginTop marginTop: marginTop
}); });
} }
if (magazineOffset.top < $('.made').height()) $('.made').hide(); if (magazineOffset.top < window.$('.made').height()) window.$('.made').hide();
else $('.made').show(); else window.$('.made').show();
$('.magazine').addClass('animated'); window.$('.magazine').addClass('animated');
} }
// Number of views in a flipbook // Number of views in a flipbook
function numberOfViews(book) { export function numberOfViews(book) {
return book.turn('pages') / 2 + 1; return book.turn('pages') / 2 + 1;
} }
// Current view in a flipbook // Current view in a flipbook
function getViewNumber(book, page) { export function getViewNumber(book, page) {
return parseInt((page || book.turn('page')) / 2 + 1, 10); return parseInt((page || book.turn('page')) / 2 + 1, 10);
} }
// Width of the flipbook when zoomed in // Width of the flipbook when zoomed in
function largeMagazineWidth() { export function largeMagazineWidth() {
return 2214; return 2214;
} }
// Calculate the width and height of a square within another square // Calculate the width and height of a square within another square
function calculateBound(d) { export function calculateBound(d) {
var bound = { var bound = {
width: d.width, width: d.width,
height: d.height height: d.height
...@@ -204,3 +204,4 @@ function calculateBound(d) { ...@@ -204,3 +204,4 @@ function calculateBound(d) {
} }
return bound; return bound;
} }
src/utils/request.js
浏览文件 @ 6265f8f0
/*
* @Author: 龙菲 1373694886@qq.com
* @Date: 2025-04-23 22:37:01
* @LastEditors: 龙菲 1373694886@qq.com
* @LastEditTime: 2025-04-23 22:41:24
* @FilePath: \pic-reader\src\utils\request.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import axios from 'axios'; import axios from 'axios';
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
......
src/views/index/index.vue
浏览文件 @ 6265f8f0
...@@ -103,7 +103,8 @@ onMounted(() => { ...@@ -103,7 +103,8 @@ onMounted(() => {
@media (max-width: 768px) { @media (max-width: 768px) {
.book-card-list { .book-card-list {
padding: 20px; padding: 20px;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); // grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) ;
grid-template-columns: repeat(3, 1fr) !important;
gap: 15px; gap: 15px;
} }
} }
......
vite.config.js
浏览文件 @ 6265f8f0
...@@ -9,6 +9,7 @@ import Components from 'unplugin-vue-components/vite' ...@@ -9,6 +9,7 @@ import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver, VantResolver } from 'unplugin-vue-components/resolvers' import { ElementPlusResolver, VantResolver } from 'unplugin-vue-components/resolvers'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path' import path from 'path'
import inject from '@rollup/plugin-inject';
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig(({ mode, command }) => { export default defineConfig(({ mode, command }) => {
...@@ -16,19 +17,20 @@ export default defineConfig(({ mode, command }) => { ...@@ -16,19 +17,20 @@ export default defineConfig(({ mode, command }) => {
return { return {
base: env.VITE_API_ROUTE_URL, base: env.VITE_API_ROUTE_URL,
optimizeDeps: { optimizeDeps: {
exclude: [ include: ['jquery']
'modernizr', // exclude: [
'src/assets/js/modernizr.2.5.3.min.js' // 'modernizr',
] // 'src/assets/js/modernizr.2.5.3.min.js'
}, // ]
build: {
rollupOptions: {
external: [
/modernizr/,
/requirejs/
]
}
}, },
// build: {
// rollupOptions: {
// external: [
// /modernizr/,
// /requirejs/
// ]
// }
// },
plugins: [ plugins: [
vue(), vue(),
vueDevTools(), vueDevTools(),
...@@ -49,6 +51,10 @@ export default defineConfig(({ mode, command }) => { ...@@ -49,6 +51,10 @@ export default defineConfig(({ mode, command }) => {
createSvgIconsPlugin({ createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')], // SVG 存放路径 iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')], // SVG 存放路径
symbolId: 'icon-[name]' symbolId: 'icon-[name]'
}),
inject({
$: 'jquery',
jQuery: 'jquery',
}) })
], ],
resolve: { resolve: {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论