Skip to content

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

删除touch事件

上级 72882efa
隐藏空白字符变更
内嵌 并排
正在显示 包含 1172 行增加 和 1184 行删除
src/assets/js/turn.js
浏览文件 @ 52dccd32
...@@ -2,16 +2,16 @@ import $ from 'jquery'; ...@@ -2,16 +2,16 @@ import $ from 'jquery';
var has3d, var has3d,
vendor ='', vendor = '',
PI = Math.PI, PI = Math.PI,
A90 = PI/2, A90 = PI / 2,
isTouch = 'ontouchstart' in window, isTouch = 'ontouchstart' in window,
events = (isTouch) ? {start: 'touchstart', move: 'touchmove', end: 'touchend'} events = (isTouch) ? { start: 'touchstart', move: 'touchmove', end: 'touchend' }
: {start: 'mousedown', move: 'mousemove', end: 'mouseup'}, : { start: 'mousedown', move: 'mousemove', end: 'mouseup' },
// Contansts used for each corner // Contansts used for each corner
// tl * tr // tl * tr
...@@ -70,7 +70,7 @@ var has3d, ...@@ -70,7 +70,7 @@ var has3d,
// Size of the active zone of each corner // Size of the active zone of each corner
cornerSize: 150, cornerSize: 200,
// Enables gradients // Enables gradients
...@@ -89,878 +89,886 @@ var has3d, ...@@ -89,878 +89,886 @@ var has3d,
pagesInDOM = 6, pagesInDOM = 6,
pagePosition = {0: {top: 0, left: 0, right: 'auto', bottom: 'auto'}, pagePosition = {
1: {top: 0, right: 0, left: 'auto', bottom: 'auto'}}, 0: { top: 0, left: 0, right: 'auto', bottom: 'auto' },
1: { top: 0, right: 0, left: 'auto', bottom: 'auto' }
},
// Gets basic attributes for a layer // Gets basic attributes for a layer
divAtt = function(top, left, zIndex, overf) { divAtt = function (top, left, zIndex, overf) {
return {'css': { return {
position: 'absolute', 'css': {
top: top, position: 'absolute',
left: left, top: top,
'overflow': overf || 'hidden', left: left,
'z-index': zIndex || 'auto' 'overflow': overf || 'hidden',
} 'z-index': zIndex || 'auto'
}; }
};
}, },
// Gets a 2D point from a bezier curve of four points // Gets a 2D point from a bezier curve of four points
bezier = function(p1, p2, p3, p4, t) { bezier = function (p1, p2, p3, p4, t) {
var mum1 = 1 - t, var mum1 = 1 - t,
mum13 = mum1 * mum1 * mum1, mum13 = mum1 * mum1 * mum1,
mu3 = t * t * t; mu3 = t * t * t;
return point2D(Math.round(mum13*p1.x + 3*t*mum1*mum1*p2.x + 3*t*t*mum1*p3.x + mu3*p4.x), return point2D(Math.round(mum13 * p1.x + 3 * t * mum1 * mum1 * p2.x + 3 * t * t * mum1 * p3.x + mu3 * p4.x),
Math.round(mum13*p1.y + 3*t*mum1*mum1*p2.y + 3*t*t*mum1*p3.y + mu3*p4.y)); Math.round(mum13 * p1.y + 3 * t * mum1 * mum1 * p2.y + 3 * t * t * mum1 * p3.y + mu3 * p4.y));
}, },
// Converts an angle from degrees to radians // Converts an angle from degrees to radians
rad = function(degrees) { rad = function (degrees) {
return degrees/180*PI; return degrees / 180 * PI;
}, },
// Converts an angle from radians to degrees // Converts an angle from radians to degrees
deg = function(radians) { deg = function (radians) {
return radians/PI*180; return radians / PI * 180;
}, },
// Gets a 2D point // Gets a 2D point
point2D = function(x, y) { point2D = function (x, y) {
return {x: x, y: y}; return { x: x, y: y };
}, },
// Returns the traslate value // Returns the traslate value
translate = function(x, y, use3d) { translate = function (x, y, use3d) {
return (has3d && use3d) ? ' translate3d(' + x + 'px,' + y + 'px, 0px) ' : ' translate(' + x + 'px, ' + y + 'px) '; return (has3d && use3d) ? ' translate3d(' + x + 'px,' + y + 'px, 0px) ' : ' translate(' + x + 'px, ' + y + 'px) ';
}, },
// Returns the rotation value // Returns the rotation value
rotate = function(degrees) { rotate = function (degrees) {
return ' rotate(' + degrees + 'deg) '; return ' rotate(' + degrees + 'deg) ';
}, },
// Checks if a property belongs to an object // Checks if a property belongs to an object
has = function(property, object) { has = function (property, object) {
return Object.prototype.hasOwnProperty.call(object, property); return Object.prototype.hasOwnProperty.call(object, property);
}, },
// Gets the CSS3 vendor prefix // Gets the CSS3 vendor prefix
getPrefix = function() { getPrefix = function () {
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;
}, },
// Adds gradients // Adds gradients
gradient = function(obj, p0, p1, colors, numColors) { gradient = function (obj, p0, p1, colors, numColors) {
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({'background-image': '-webkit-gradient(linear, '+p0.x+'% '+p0.y+'%, '+p1.x+'% '+p1.y+'%, '+ cols.join(',') +' )'}); obj.css({ 'background-image': '-webkit-gradient(linear, ' + p0.x + '% ' + p0.y + '%, ' + p1.x + '% ' + p1.y + '%, ' + cols.join(',') + ' )' });
} else { } else {
// This procedure makes the gradients for non-webkit browsers // This procedure makes the gradients for non-webkit browsers
// It will be reduced to one unique way for gradients in next versions // It will be reduced to one unique way for gradients in next versions
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(',') + ')' });
} }
}, },
turnMethods = { turnMethods = {
// Singleton constructor // Singleton constructor
// $('#selector').turn([options]); // $('#selector').turn([options]);
init: function(opts) { init: function (opts) {
// Define constants // Define constants
if (has3d===undefined) { if (has3d === undefined) {
has3d = 'WebKitCSSMatrix' in window || 'MozPerspective' in document.body.style; has3d = 'WebKitCSSMatrix' in window || 'MozPerspective' in document.body.style;
vendor = getPrefix(); vendor = getPrefix();
} }
var i, data = this.data(), ch = this.children(); var i, data = this.data(), ch = this.children();
opts = $.extend({width: this.width(), height: this.height()}, turnOptions, opts); opts = $.extend({ width: this.width(), height: this.height() }, turnOptions, opts);
data.opts = opts; data.opts = opts;
data.pageObjs = {}; data.pageObjs = {};
data.pages = {}; data.pages = {};
data.pageWrap = {}; data.pageWrap = {};
data.pagePlace = {}; data.pagePlace = {};
data.pageMv = []; data.pageMv = [];
data.totalPages = opts.pages || 0; data.totalPages = opts.pages || 0;
if (opts.when) if (opts.when)
for (i in opts.when) for (i in opts.when)
if (has(i, opts.when)) if (has(i, opts.when))
this.bind(i, opts.when[i]); this.bind(i, opts.when[i]);
this.css({position: 'relative', width: opts.width, height: opts.height}); this.css({ position: 'relative', width: opts.width, height: opts.height });
this.turn('display', opts.display); this.turn('display', opts.display);
if (has3d && !isTouch && opts.acceleration) if (has3d && !isTouch && opts.acceleration)
this.transform(translate(0, 0, true)); this.transform(translate(0, 0, true));
for (i = 0; i<ch.length; i++) for (i = 0; i < ch.length; i++)
this.turn('addPage', ch[i], i+1); this.turn('addPage', ch[i], i + 1);
this.turn('page', opts.page); this.turn('page', opts.page);
// allow setting active corners as an option // allow setting active corners as an option
corners = $.extend({}, corners, opts.corners); corners = $.extend({}, corners, opts.corners);
// Event listeners // Event listeners
$(this).bind(events.start, function(e) { $(this).bind(events.start, function (e) {
for (var page in data.pages) for (var page in data.pages)
if (has(page, data.pages) && flipMethods._eventStart.call(data.pages[page], e)===false) if (has(page, data.pages) && flipMethods._eventStart.call(data.pages[page], e) === false)
return false; return false;
}); });
$(document).bind(events.move, function(e) { $(document).bind(events.move, function (e) {
for (var page in data.pages) for (var page in data.pages)
if (has(page, data.pages)) if (has(page, data.pages))
flipMethods._eventMove.call(data.pages[page], e); flipMethods._eventMove.call(data.pages[page], e);
}). }).
bind(events.end, function(e) { bind(events.end, function (e) {
for (var page in data.pages) for (var page in data.pages)
if (has(page, data.pages)) if (has(page, data.pages))
flipMethods._eventEnd.call(data.pages[page], e); flipMethods._eventEnd.call(data.pages[page], e);
}); });
data.done = true; data.done = true;
return this; return this;
}, },
// Adds a page from external data
// Adds a page from external data addPage: function (element, page) {
addPage: function(element, page) { var incPages = false,
data = this.data(),
lastPage = data.totalPages + 1;
var incPages = false, if (page) {
data = this.data(), if (page == lastPage) {
lastPage = data.totalPages+1; page = lastPage;
incPages = true;
} else if (page > lastPage)
throw new Error('It is impossible to add the page "' + page + '", the maximum value is: "' + lastPage + '"');
if (page) { } else {
if (page==lastPage) {
page = lastPage; page = lastPage;
incPages = true; incPages = true;
} else if (page>lastPage) }
throw new Error ('It is impossible to add the page "'+page+'", the maximum value is: "'+lastPage+'"');
} else { if (page >= 1 && page <= lastPage) {
page = lastPage;
incPages = true;
}
if (page>=1 && page<=lastPage) { // Stop animations
if (data.done) this.turn('stop');
// Stop animations // Move pages if it's necessary
if (data.done) this.turn('stop'); if (page in data.pageObjs)
turnMethods._movePages.call(this, page, 1);
// Move pages if it's necessary // Update number of pages
if (page in data.pageObjs) if (incPages)
turnMethods._movePages.call(this, page, 1); data.totalPages = lastPage;
// Update number of pages // Add element
if (incPages) data.pageObjs[page] = $(element).addClass('turn-page p' + page);
data.totalPages = lastPage;
// Add element // Add page
data.pageObjs[page] = $(element).addClass('turn-page p' + page); turnMethods._addPage.call(this, page);
// Add page // Update view
turnMethods._addPage.call(this, page); if (data.done)
this.turn('update');
// Update view turnMethods._removeFromDOM.call(this);
if (data.done) }
this.turn('update');
turnMethods._removeFromDOM.call(this); return this;
} },
return this; // Adds a page from internal data
},
// Adds a page from internal data _addPage: function (page) {
_addPage: function(page) { var data = this.data(),
element = data.pageObjs[page];
var data = this.data(), if (element)
element = data.pageObjs[page]; if (turnMethods._necessPage.call(this, page)) {
if (element) if (!data.pageWrap[page]) {
if (turnMethods._necessPage.call(this, page)) {
if (!data.pageWrap[page]) { var pageWidth = (data.display == 'double') ? this.width() / 2 : this.width(),
pageHeight = this.height();
var pageWidth = (data.display=='double') ? this.width()/2 : this.width(), element.css({ width: pageWidth, height: pageHeight });
pageHeight = this.height();
element.css({width:pageWidth, height:pageHeight}); // Place
data.pagePlace[page] = page;
// Place // Wrapper
data.pagePlace[page] = page; data.pageWrap[page] = $('<div/>', {
'class': 'turn-page-wrapper',
// Wrapper page: page,
data.pageWrap[page] = $('<div/>', {'class': 'turn-page-wrapper', css: {
page: page, position: 'absolute',
css: {position: 'absolute', overflow: 'hidden',
overflow: 'hidden', width: pageWidth,
width: pageWidth, height: pageHeight
height: pageHeight}}). }
css(pagePosition[(data.display=='double') ? page%2 : 0]); }).
css(pagePosition[(data.display == 'double') ? page % 2 : 0]);
// Append to this
this.append(data.pageWrap[page]);
// Move data.pageObjs[page] (element) to wrapper
data.pageWrap[page].prepend(data.pageObjs[page]);
}
// If the page is in the current view, create the flip effect // Append to this
if (!page || turnMethods._setPageLoc.call(this, page)==1) this.append(data.pageWrap[page]);
turnMethods._makeFlip.call(this, page);
} else { // Move data.pageObjs[page] (element) to wrapper
data.pageWrap[page].prepend(data.pageObjs[page]);
}
// Place // If the page is in the current view, create the flip effect
data.pagePlace[page] = 0; if (!page || turnMethods._setPageLoc.call(this, page) == 1)
turnMethods._makeFlip.call(this, page);
// Remove element from the DOM } else {
if (data.pageObjs[page])
data.pageObjs[page].remove();
} // Place
data.pagePlace[page] = 0;
}, // Remove element from the DOM
if (data.pageObjs[page])
data.pageObjs[page].remove();
// Checks if a page is in memory }
hasPage: function(page) { },
return page in this.data().pageObjs; // Checks if a page is in memory
}, hasPage: function (page) {
// Prepares the flip effect for a page return page in this.data().pageObjs;
_makeFlip: function(page) { },
var data = this.data(); // Prepares the flip effect for a page
if (!data.pages[page] && data.pagePlace[page]==page) { _makeFlip: function (page) {
var single = data.display=='single', var data = this.data();
even = page%2;
data.pages[page] = data.pageObjs[page].
css({width: (single) ? this.width() : this.width()/2, height: this.height()}).
flip({page: page,
next: (single && page === data.totalPages) ? page -1 : ((even || single) ? page+1 : page-1),
turn: this,
duration: data.opts.duration,
acceleration : data.opts.acceleration,
corners: (single) ? 'all' : ((even) ? 'forward' : 'backward'),
backGradient: data.opts.gradients,
frontGradient: data.opts.gradients
}).
flip('disable', data.disabled).
bind('pressed', turnMethods._pressed).
bind('released', turnMethods._released).
bind('start', turnMethods._start).
bind('end', turnMethods._end).
bind('flip', turnMethods._flip);
}
return data.pages[page];
},
// Makes pages within a range if (!data.pages[page] && data.pagePlace[page] == page) {
_makeRange: function() { var single = data.display == 'single',
even = page % 2;
var page, data.pages[page] = data.pageObjs[page].
data = this.data(), css({ width: (single) ? this.width() : this.width() / 2, height: this.height() }).
range = this.turn('range'); flip({
page: page,
next: (single && page === data.totalPages) ? page - 1 : ((even || single) ? page + 1 : page - 1),
turn: this,
duration: data.opts.duration,
acceleration: data.opts.acceleration,
corners: (single) ? 'all' : ((even) ? 'forward' : 'backward'),
backGradient: data.opts.gradients,
frontGradient: data.opts.gradients
}).
flip('disable', data.disabled).
bind('pressed', turnMethods._pressed).
bind('released', turnMethods._released).
bind('start', turnMethods._start).
bind('end', turnMethods._end).
bind('flip', turnMethods._flip);
}
return data.pages[page];
},
// Makes pages within a range
_makeRange: function () {
for (page = range[0]; page<=range[1]; page++) var page,
data = this.data(),
range = this.turn('range');
for (page = range[0]; page <= range[1]; page++)
turnMethods._addPage.call(this, page); turnMethods._addPage.call(this, page);
}, },
// Returns a range of `pagesInDOM` pages that should be in the DOM // Returns a range of `pagesInDOM` pages that should be in the DOM
// Example: // Example:
// - page of the current view, return true // - page of the current view, return true
// * page is in the range, return true // * page is in the range, return true
// 0 page is not in the range, return false // 0 page is not in the range, return false
// //
// 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, var remainingPages, left, right,
data = this.data(); data = this.data();
page = page || data.tpage || data.page; page = page || data.tpage || data.page;
var view = turnMethods._view.call(this, page); var view = turnMethods._view.call(this, page);
if (page<1 || page>data.totalPages) if (page < 1 || page > data.totalPages)
throw new Error ('"'+page+'" is not a page for range'); throw new Error('"' + page + '" is not a page for range');
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), Math.min(data.totalPages, view[1]+right)]; return [Math.max(1, view[0] - left), 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 page>=range[0] && page<=range[1]; return 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();
for (page in data.pageWrap) for (page in data.pageWrap)
if (has(page, data.pageWrap) && !turnMethods._necessPage.call(this, page)) if (has(page, data.pageWrap) && !turnMethods._necessPage.call(this, page))
turnMethods._removePageFromDOM.call(this, page); turnMethods._removePageFromDOM.call(this, page);
}, },
// 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();
if (data.pages[page]) { if (data.pages[page]) {
var dd = data.pages[page].data(); var dd = data.pages[page].data();
if (dd.f && dd.f.fwrapper) if (dd.f && dd.f.fwrapper)
dd.f.fwrapper.remove(); dd.f.fwrapper.remove();
data.pages[page].remove(); data.pages[page].remove();
delete data.pages[page]; delete data.pages[page];
} }
if (data.pageObjs[page]) if (data.pageObjs[page])
data.pageObjs[page].remove(); data.pageObjs[page].remove();
if (data.pageWrap[page]) { if (data.pageWrap[page]) {
data.pageWrap[page].remove(); data.pageWrap[page].remove();
delete data.pageWrap[page]; delete data.pageWrap[page];
} }
delete data.pagePlace[page]; delete data.pagePlace[page];
}, },
// Removes a page // Removes a page
removePage: function(page) { removePage: function (page) {
var data = this.data(); var data = this.data();
if (data.pageObjs[page]) { if (data.pageObjs[page]) {
// Stop animations // Stop animations
this.turn('stop'); this.turn('stop');
// Remove `page` // Remove `page`
turnMethods._removePageFromDOM.call(this, page); turnMethods._removePageFromDOM.call(this, page);
delete data.pageObjs[page]; delete data.pageObjs[page];
// Move the pages behind `page` // Move the pages behind `page`
turnMethods._movePages.call(this, page, -1); turnMethods._movePages.call(this, page, -1);
// Resize the size of this magazine // Resize the size of this magazine
data.totalPages = data.totalPages-1; data.totalPages = data.totalPages - 1;
turnMethods._makeRange.call(this); turnMethods._makeRange.call(this);
// Check the current view // Check the current view
if (data.page>data.totalPages) if (data.page > data.totalPages)
this.turn('page', data.totalPages); this.turn('page', data.totalPages);
} }
return this; return this;
}, },
// Moves pages // Moves pages
_movePages: function(from, change) { _movePages: function (from, change) {
var page, var page,
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;
if (data.pageObjs[page]) if (data.pageObjs[page])
data.pageObjs[next] = data.pageObjs[page].removeClass('page' + page).addClass('page' + next); data.pageObjs[next] = data.pageObjs[page].removeClass('page' + page).addClass('page' + next);
if (data.pagePlace[page] && data.pageWrap[page]) { if (data.pagePlace[page] && data.pageWrap[page]) {
data.pagePlace[next] = next; data.pagePlace[next] = next;
data.pageWrap[next] = data.pageWrap[page].css(pagePosition[(single) ? 0 : odd]).attr('page', next); data.pageWrap[next] = data.pageWrap[page].css(pagePosition[(single) ? 0 : odd]).attr('page', next);
if (data.pages[page]) if (data.pages[page])
data.pages[next] = data.pages[page].flip('options', { data.pages[next] = data.pages[page].flip('options', {
page: next, page: next,
next: (single || odd) ? next+1 : next-1, next: (single || odd) ? next + 1 : next - 1,
corners: (single) ? 'all' : ((odd) ? 'forward' : 'backward') corners: (single) ? 'all' : ((odd) ? 'forward' : 'backward')
}); });
if (change) { if (change) {
delete data.pages[page]; delete data.pages[page];
delete data.pagePlace[page]; delete data.pagePlace[page];
delete data.pageObjs[page]; delete data.pageObjs[page];
delete data.pageWrap[page]; delete data.pageWrap[page];
delete data.pageObjs[page]; delete data.pageObjs[page];
}
} }
} };
};
if (change>0) if (change > 0)
for (page=data.totalPages; page>=from; page--) move(page); for (page = data.totalPages; page >= from; page--) move(page);
else else
for (page=from; page<=data.totalPages; page++) move(page); for (page = from; page <= data.totalPages; 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) { if (display) {
if ($.inArray(display, displays)==-1) if ($.inArray(display, displays) == -1)
throw new Error ('"'+display + '" is not a value for display'); throw new Error('"' + display + '" is not a value for display');
if (display=='single') { if (display == 'single') {
if (!data.pageObjs[0]) { if (!data.pageObjs[0]) {
this.turn('stop'). this.turn('stop').
css({'overflow': 'hidden'}); css({ 'overflow': 'hidden' });
data.pageObjs[0] = $('<div />', {'class': 'turn-page p-temporal'}). data.pageObjs[0] = $('<div />', { 'class': 'turn-page p-temporal' }).
css({width: this.width(), height: this.height()}). css({ width: this.width(), height: this.height() }).
appendTo(this); appendTo(this);
} }
} else { } else {
if (data.pageObjs[0]) { if (data.pageObjs[0]) {
this.turn('stop'). this.turn('stop').
css({'overflow': ''}); css({ 'overflow': '' });
data.pageObjs[0].remove(); data.pageObjs[0].remove();
delete data.pageObjs[0]; delete data.pageObjs[0];
}
} }
}
data.display = display; data.display = display;
if (currentDisplay) { if (currentDisplay) {
var size = this.turn('size'); var size = this.turn('size');
turnMethods._movePages.call(this, 1, 0); turnMethods._movePages.call(this, 1, 0);
this.turn('size', size.width, size.height). this.turn('size', size.width, size.height).
turn('update'); turn('update');
} }
return this; return this;
} else } else
return currentDisplay; return currentDisplay;
}, },
// Detects if the pages are being animated // Detects if the pages are being animated
animating: function() { animating: function () {
return this.data().pageMv.length>0; return this.data().pageMv.length > 0;
}, },
// Disables and enables the effect // Disables and enables the effect
disable: function(bool) { disable: function (bool) {
var page, var page,
data = this.data(), data = this.data(),
view = this.turn('view'); view = this.turn('view');
data.disabled = bool===undefined || bool===true; data.disabled = bool === undefined || bool === 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', bool ? $.inArray(page, view) : false ); data.pages[page].flip('disable', bool ? $.inArray(page, view) : false);
return this; return this;
}, },
// Gets and sets the size // Gets and sets the size
size: function(width, height) { size: function (width, height) {
if (width && height) { if (width && height) {
var data = this.data(), pageWidth = (data.display=='double') ? width/2 : width, page; var data = this.data(), pageWidth = (data.display == 'double') ? width / 2 : width, page;
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;
data.pageObjs[page].css({width: pageWidth, height: height}); data.pageObjs[page].css({ width: pageWidth, height: height });
data.pageWrap[page].css({width: pageWidth, height: height}); data.pageWrap[page].css({ width: pageWidth, height: height });
if (data.pages[page]) if (data.pages[page])
data.pages[page].css({width: pageWidth, height: height}); data.pages[page].css({ width: pageWidth, height: height });
} }
this.turn('resize'); this.turn('resize');
return this; return this;
} else { } else {
return {width: this.width(), height: this.height()}; return { width: this.width(), height: this.height() };
} }
}, },
// 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);
} }
for (page = 1; page <= data.totalPages; page++) for (page = 1; page <= data.totalPages; page++)
if (data.pages[page]) if (data.pages[page])
data.pages[page].flip('resize', true); data.pages[page].flip('resize', true);
}, },
// 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;
} }
return false; return false;
}, },
// 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();
turnMethods._removeMv.call(this, page); turnMethods._removeMv.call(this, page);
data.pageMv.push(page); data.pageMv.push(page);
}, },
// 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];
}, },
// Gets a view // Gets a view
view: function(page) { view: function (page) {
var data = this.data(), view = turnMethods._view.call(this, page); var data = this.data(), view = turnMethods._view.call(this, page);
return (data.display=='double') ? [(view[0]>0) ? view[0] : 0, (view[1]<=data.totalPages) ? view[1] : 0] return (data.display == 'double') ? [(view[0] > 0) ? view[0] : 0, (view[1] <= data.totalPages) ? view[1] : 0]
: [(view[0]>0 && view[0]<=data.totalPages) ? view[0] : 0]; : [(view[0] > 0 && view[0] <= data.totalPages) ? view[0] : 0];
}, },
// Stops animations // Stops animations
stop: function(ok) { stop: function (ok) {
var i, opts, data = this.data(), pages = data.pageMv; var i, opts, data = this.data(), pages = data.pageMv;
data.pageMv = []; data.pageMv = [];
if (data.tpage) { if (data.tpage) {
data.page = data.tpage; data.page = data.tpage;
delete data['tpage']; delete data['tpage'];
} }
for (i in pages) { for (i in pages) {
if (!has(i, pages)) continue; if (!has(i, pages)) continue;
opts = data.pages[pages[i]].data().f.opts; opts = data.pages[pages[i]].data().f.opts;
flipMethods._moveFoldingPage.call(data.pages[pages[i]], null); flipMethods._moveFoldingPage.call(data.pages[pages[i]], null);
data.pages[pages[i]].flip('hideFoldedPage'); data.pages[pages[i]].flip('hideFoldedPage');
data.pagePlace[opts.next] = opts.next; data.pagePlace[opts.next] = opts.next;
if (opts.force) {
opts.next = (opts.page % 2 === 0) ? opts.page - 1 : opts.page + 1;
delete opts['force'];
}
if (opts.force) {
opts.next = (opts.page%2===0) ? opts.page-1 : opts.page+1;
delete opts['force'];
} }
} this.turn('update');
this.turn('update'); return this;
},
return this; // 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 < data.totalPages) {
if (pages) { for (var page = pages + 1; page <= data.totalPages; page++)
if (pages<data.totalPages) { this.turn('removePage', page);
for (var page = pages+1; page<=data.totalPages; page++) if (this.turn('page') > pages)
this.turn('removePage', page); this.turn('page', pages);
}
if (this.turn('page')>pages) data.totalPages = pages;
this.turn('page', pages);
}
data.totalPages = pages; return this;
} else
return data.totalPages;
return this; },
} else
return data.totalPages;
}, // Sets a page without effect
// Sets a page without effect _fitPage: function (page, ok) {
_fitPage: function(page, ok) { var data = this.data(), newView = this.turn('view', page);
var data = this.data(), newView = this.turn('view', page); if (data.page != page) {
this.trigger('turning', [page, newView]);
if ($.inArray(1, newView) != -1) this.trigger('first');
if ($.inArray(data.totalPages, newView) != -1) this.trigger('last');
}
if (data.page!=page) { if (!data.pageObjs[page])
this.trigger('turning', [page, newView]); return;
if ($.inArray(1, newView)!=-1) this.trigger('first');
if ($.inArray(data.totalPages, newView)!=-1) this.trigger('last');
}
if (!data.pageObjs[page]) data.tpage = page;
return;
data.tpage = page; this.turn('stop', ok);
turnMethods._removeFromDOM.call(this);
turnMethods._makeRange.call(this);
this.trigger('turned', [page, newView]);
this.turn('stop', ok); },
turnMethods._removeFromDOM.call(this);
turnMethods._makeRange.call(this);
this.trigger('turned', [page, newView]);
}, // Turns to a page
// Turns to a page _turnPage: function (page) {
_turnPage: function(page) { var current, next,
data = this.data(),
view = this.turn('view'),
newView = this.turn('view', page);
var current, next, if (data.page != page) {
data = this.data(), this.trigger('turning', [page, newView]);
view = this.turn('view'), if ($.inArray(1, newView) != -1) this.trigger('first');
newView = this.turn('view', page); if ($.inArray(data.totalPages, newView) != -1) this.trigger('last');
}
if (data.page!=page) { if (!data.pageObjs[page])
this.trigger('turning', [page, newView]); return;
if ($.inArray(1, newView)!=-1) this.trigger('first');
if ($.inArray(data.totalPages, newView)!=-1) this.trigger('last');
}
if (!data.pageObjs[page]) data.tpage = page;
return;
data.tpage = page; this.turn('stop');
this.turn('stop'); turnMethods._makeRange.call(this);
turnMethods._makeRange.call(this); if (data.display == 'single') {
current = view[0];
next = newView[0];
} else if (view[1] && page > view[1]) {
current = view[1];
next = newView[0];
} else if (view[0] && page < view[0]) {
current = view[0];
next = newView[1];
}
if (data.display=='single') { if (data.pages[current]) {
current = view[0];
next = newView[0];
} else if (view[1] && page>view[1]) {
current = view[1];
next = newView[0];
} else if (view[0] && page<view[0]) {
current = view[0];
next = newView[1];
}
if (data.pages[current]) { var opts = data.pages[current].data().f.opts;
data.tpage = next;
var opts = data.pages[current].data().f.opts; if (opts.next != next) {
data.tpage = next; opts.next = next;
data.pagePlace[next] = opts.page;
opts.force = true;
}
if (opts.next!=next) { if (data.display == 'single')
opts.next = next; data.pages[current].flip('turnPage', (newView[0] > view[0]) ? 'br' : 'bl');
data.pagePlace[next] = opts.page; else
opts.force = true; data.pages[current].flip('turnPage');
} }
if (data.display=='single') },
data.pages[current].flip('turnPage', (newView[0] > view[0]) ? 'br' : 'bl');
else
data.pages[current].flip('turnPage');
}
},
// Gets and sets a page // Gets and sets a page
page: function(page) { page: function (page) {
page = parseInt(page, 10); page = parseInt(page, 10);
var data = this.data(); var data = this.data();
if (page>0 && page<=data.totalPages) { if (page > 0 && page <= data.totalPages) {
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);
return this; return this;
} else } else
return data.page; return data.page;
}, },
// Turns to the next view // Turns to the next view
next: function() { next: function () {
var data = this.data(); var data = this.data();
return this.turn('page', turnMethods._view.call(this, data.page).pop() + 1); return this.turn('page', turnMethods._view.call(this, data.page).pop() + 1);
}, },
// Turns to the previous view // Turns to the previous view
previous: function() { previous: function () {
var data = this.data(); var data = this.data();
return this.turn('page', turnMethods._view.call(this, data.page).shift() - 1); return this.turn('page', turnMethods._view.call(this, data.page).shift() - 1);
}, },
// Adds a motion to the internal list // Adds a motion to the internal list
_addMotionPage: function() { _addMotionPage: function () {
var opts = $(this).data().f.opts, var opts = $(this).data().f.opts,
turn = opts.turn, turn = opts.turn,
dd = turn.data(); dd = turn.data();
opts.pageMv = opts.page; opts.pageMv = opts.page;
turnMethods._addMv.call(turn, opts.pageMv); turnMethods._addMv.call(turn, opts.pageMv);
dd.pagePlace[opts.next] = opts.page; dd.pagePlace[opts.next] = opts.page;
turn.turn('update'); turn.turn('update');
}, },
// This event is called in context of flip // This event is called in context of flip
_start: function(e, opts, corner) { _start: function (e, opts, corner) {
var data = opts.turn.data(), var data = opts.turn.data(),
event = $.Event('start'); event = $.Event('start');
...@@ -974,480 +982,486 @@ turnMethods = { ...@@ -974,480 +982,486 @@ turnMethods = {
return; return;
} }
if (data.display=='single') { if (data.display == 'single') {
var left = corner.charAt(1) == 'l';
if ((opts.page == 1 && left) || (opts.page == data.totalPages && !left))
e.preventDefault();
else {
if (left) {
opts.next = (opts.next < opts.page) ? opts.next : opts.page - 1;
opts.force = true;
} else
opts.next = (opts.next > opts.page) ? opts.next : opts.page + 1;
}
var left = corner.charAt(1)=='l';
if ((opts.page==1 && left) || (opts.page==data.totalPages && !left))
e.preventDefault();
else {
if (left) {
opts.next = (opts.next<opts.page) ? opts.next : opts.page-1;
opts.force = true;
} else
opts.next = (opts.next>opts.page) ? opts.next : opts.page+1;
} }
} turnMethods._addMotionPage.call(this);
},
turnMethods._addMotionPage.call(this); // This event is called in context of flip
},
// This event is called in context of flip _end: function (e, turned) {
_end: function(e, turned) { var that = $(this),
data = that.data().f,
opts = data.opts,
turn = opts.turn,
dd = turn.data();
var that = $(this), e.stopPropagation();
data = that.data().f,
opts = data.opts,
turn = opts.turn,
dd = turn.data();
e.stopPropagation(); if (turned || dd.tpage) {
if (turned || dd.tpage) { if (dd.tpage == opts.next || dd.tpage == opts.page) {
delete dd['tpage'];
turnMethods._fitPage.call(turn, dd.tpage || opts.next, true);
}
if (dd.tpage==opts.next || dd.tpage==opts.page) { } else {
delete dd['tpage']; turnMethods._removeMv.call(turn, opts.pageMv);
turnMethods._fitPage.call(turn, dd.tpage || opts.next, true); turn.turn('update');
} }
} else { },
turnMethods._removeMv.call(turn, opts.pageMv);
turn.turn('update');
}
},
// This event is called in context of flip // This event is called in context of flip
_pressed: function() { _pressed: function () {
var page, var page,
that = $(this), that = $(this),
data = that.data().f, data = that.data().f,
turn = data.opts.turn, turn = data.opts.turn,
pages = turn.data().pages; pages = turn.data().pages;
for (page in pages) for (page in pages)
if (page!=data.opts.page) if (page != data.opts.page)
pages[page].flip('disable', true); pages[page].flip('disable', true);
return data.time = new Date().getTime(); return data.time = new Date().getTime();
}, },
// This event is called in context of flip // This event is called in context of flip
_released: function(e, point) { _released: function (e, point) {
var that = $(this), var that = $(this),
data = that.data().f; data = that.data().f;
e.stopPropagation(); e.stopPropagation();
if ((new Date().getTime())-data.time<300 || point.x<0 || point.x>$(this).width()) { if ((new Date().getTime()) - data.time < 400 || point.x < 0 || point.x > $(this).width()) {
e.preventDefault(); e.preventDefault();
data.opts.turn.data().tpage = data.opts.next; data.opts.turn.data().tpage = data.opts.next;
data.opts.turn.turn('update'); data.opts.turn.turn('update');
$(that).flip('turnPage'); $(that).flip('turnPage');
} }
},
// This event is called in context of flip },
_flip: function() { // This event is called in context of flip
var opts = $(this).data().f.opts; _flip: function () {
opts.turn.trigger('turn', [opts.next]); var opts = $(this).data().f.opts;
}, opts.turn.trigger('turn', [opts.next]);
// Calculate the z-index value for pages during the animation },
calculateZ: function(mv) { // Calculate the z-index value for pages during the animation
var i, page, nextPage, placePage, dpage, calculateZ: function (mv) {
that = this,
data = this.data(),
view = this.turn('view'),
currentPage = view[0] || view[1],
r = {pageZ: {}, partZ: {}, pageV: {}},
addView = function(page) { var i, page, nextPage, placePage, dpage,
var view = that.turn('view', page); that = this,
if (view[0]) r.pageV[view[0]] = true; data = this.data(),
if (view[1]) r.pageV[view[1]] = true; view = this.turn('view'),
}; currentPage = view[0] || view[1],
r = { pageZ: {}, partZ: {}, pageV: {} },
for (i = 0; i<mv.length; i++) {
addView = function (page) {
var view = that.turn('view', page);
if (view[0]) r.pageV[view[0]] = true;
if (view[1]) r.pageV[view[1]] = true;
};
for (i = 0; i < mv.length; 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 + Math.abs(currentPage-dpage); r.partZ[placePage] = data.totalPages * 2 + Math.abs(currentPage - dpage);
} }
return r; return r;
}, },
// 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 (data.pageMv.length && data.pageMv[0]!==0) { if (data.pageMv.length && data.pageMv[0] !== 0) {
// Update motion // Update motion
var apage, var apage,
pos = this.turn('calculateZ', data.pageMv), pos = this.turn('calculateZ', data.pageMv),
view = this.turn('view', data.tpage); view = this.turn('view', data.tpage);
if (data.pagePlace[view[0]]==view[0]) apage = view[0]; if (data.pagePlace[view[0]] == view[0]) apage = view[0];
else if (data.pagePlace[view[1]]==view[1]) apage = view[1]; else if (data.pagePlace[view[1]] == view[1]) apage = view[1];
for (page in data.pageWrap) { for (page in data.pageWrap) {
if (!has(page, data.pageWrap)) continue; if (!has(page, data.pageWrap)) continue;
data.pageWrap[page].css({display: (pos.pageV[page]) ? '' : 'none', 'z-index': pos.pageZ[page] || 0}); data.pageWrap[page].css({ display: (pos.pageV[page]) ? '' : 'none', 'z-index': pos.pageZ[page] || 0 });
if (data.pages[page]) { if (data.pages[page]) {
data.pages[page].flip('z', pos.partZ[page] || null); data.pages[page].flip('z', pos.partZ[page] || null);
if (pos.pageV[page]) if (pos.pageV[page])
data.pages[page].flip('resize'); data.pages[page].flip('resize');
if (data.tpage) if (data.tpage)
data.pages[page].flip('disable', true); // data.disabled || page!=apage data.pages[page].flip('disable', true); // data.disabled || page!=apage
}
} }
}
} else { } else {
// Update static pages // Update static pages
for (page in data.pageWrap) { for (page in data.pageWrap) {
if (!has(page, data.pageWrap)) continue; if (!has(page, data.pageWrap)) continue;
var pageLocation = turnMethods._setPageLoc.call(this, page); var pageLocation = turnMethods._setPageLoc.call(this, page);
if (data.pages[page]) if (data.pages[page])
data.pages[page].flip('disable', data.disabled || pageLocation!=1).flip('z', null); data.pages[page].flip('disable', data.disabled || pageLocation != 1).flip('z', null);
}
} }
} },
},
// 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');
if (page==view[0] || page==view[1]) { if (page == view[0] || page == view[1]) {
data.pageWrap[page].css({'z-index': data.totalPages, display: ''}); data.pageWrap[page].css({ 'z-index': data.totalPages, display: '' });
return 1; return 1;
} else if ((data.display=='single' && page==view[0]+1) || (data.display=='double' && page==view[0]-2 || page==view[1]+2)) { } else if ((data.display == 'single' && page == view[0] + 1) || (data.display == 'double' && page == view[0] - 2 || page == view[1] + 2)) {
data.pageWrap[page].css({'z-index': data.totalPages-1, display: ''}); data.pageWrap[page].css({ 'z-index': data.totalPages - 1, display: '' });
return 2; return 2;
} else { } else {
data.pageWrap[page].css({'z-index': 0, display: 'none'}); data.pageWrap[page].css({ 'z-index': 0, display: 'none' });
return 0; return 0;
}
} }
} },
},
// Methods and properties for the flip page effect // Methods and properties for the flip page effect
flipMethods = { flipMethods = {
// Constructor // Constructor
init: function(opts) { init: function (opts) {
if (opts.gradients) { if (opts.gradients) {
opts.frontGradient = true; opts.frontGradient = true;
opts.backGradient = true; opts.backGradient = true;
} }
this.data({f: {}}); this.data({ f: {} });
this.flip('options', opts); this.flip('options', opts);
flipMethods._addPageWrapper.call(this); flipMethods._addPageWrapper.call(this);
return this; return this;
}, },
setData: function(d) { setData: function (d) {
var data = this.data(); var data = this.data();
data.f = $.extend(data.f, d); data.f = $.extend(data.f, d);
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, {opts: $.extend({}, data.opts || flipOptions, opts) }); flipMethods.setData.call(this, { 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;
data.opts['z-index'] = z; data.opts['z-index'] = z;
data.fwrapper.css({'z-index': z || parseInt(data.parent.css('z-index'), 10) || 0}); data.fwrapper.css({ 'z-index': z || parseInt(data.parent.css('z-index'), 10) || 0 });
return this; return this;
}, },
_cAllowed: function() { _cAllowed: function () {
return corners[this.data().f.opts.corners] || this.data().f.opts.corners; return corners[this.data().f.opts.corners] || this.data().f.opts.corners;
}, },
_cornerActivated: function(e) { _cornerActivated: function (e) {
if (e.originalEvent === undefined) { if (e.originalEvent === undefined) {
return false; return false;
} }
e = (isTouch) ? e.originalEvent.touches : [e]; e = (isTouch) ? e.originalEvent.touches : [e];
var data = this.data().f, var data = this.data().f,
pos = data.parent.offset(), pos = data.parent.offset(),
width = this.width(), width = this.width(),
height = this.height(), height = this.height(),
c = {x: Math.max(0, e[0].pageX-pos.left), y: Math.max(0, e[0].pageY-pos.top)}, c = { x: Math.max(0, e[0].pageX - pos.left), y: Math.max(0, e[0].pageY - pos.top) },
csz = data.opts.cornerSize, csz = data.opts.cornerSize,
allowedCorners = flipMethods._cAllowed.call(this); allowedCorners = flipMethods._cAllowed.call(this);
if (c.x<=0 || c.y<=0 || c.x>=width || c.y>=height) return false; if (c.x <= 0 || c.y <= 0 || c.x >= width || c.y >= height) return false;
if (c.y<csz) c.corner = 't'; if (c.y < csz) c.corner = 't';
else if (c.y>=height-csz) c.corner = 'b'; else if (c.y >= height - csz) c.corner = 'b';
else return false; else return false;
if (c.x<=csz) c.corner+= 'l'; if (c.x <= csz) c.corner += 'l';
else if (c.x>=width-csz) c.corner+= 'r'; else if (c.x >= width - csz) c.corner += 'r';
else return false; else return false;
return ($.inArray(c.corner, allowedCorners)==-1) ? false : c; return ($.inArray(c.corner, allowedCorners) == -1) ? false : c;
}, },
_c: function(corner, opts) { _c: function (corner, opts) {
opts = opts || 0; opts = opts || 0;
return ({tl: point2D(opts, opts), return ({
tr: point2D(this.width()-opts, opts), tl: point2D(opts, opts),
bl: point2D(opts, this.height()-opts), tr: point2D(this.width() - opts, opts),
br: point2D(this.width()-opts, this.height()-opts)})[corner]; bl: point2D(opts, this.height() - opts),
br: point2D(this.width() - opts, this.height() - opts)
})[corner];
}, },
_c2: function(corner) { _c2: function (corner) {
return {tl: point2D(this.width()*2, 0), return {
tl: point2D(this.width() * 2, 0),
tr: point2D(-this.width(), 0), tr: point2D(-this.width(), 0),
bl: point2D(this.width()*2, this.height()), bl: point2D(this.width() * 2, this.height()),
br: point2D(-this.width(), this.height())}[corner]; br: point2D(-this.width(), this.height())
}[corner];
}, },
_foldingPage: function(corner) { _foldingPage: function (corner) {
var opts = this.data().f.opts; var opts = this.data().f.opts;
if (opts.folding) return opts.folding; if (opts.folding) return opts.folding;
else if(opts.turn) { else if (opts.turn) {
var data = opts.turn.data(); var data = opts.turn.data();
if (data.display == 'single') { if (data.display == 'single') {
var backPage = (data.pageObjs[opts.next]) ? data.pageObjs[0] : null; var backPage = (data.pageObjs[opts.next]) ? data.pageObjs[0] : null;
if (backPage && !backPage.hasClass('turn-page-back-fixed')) { if (backPage && !backPage.hasClass('turn-page-back-fixed')) {
backPage.addClass('turn-page-back-fixed').css({ backPage.addClass('turn-page-back-fixed').css({
'background-color': '#ffffff', 'background-color': '#ffffff',
'background': '#ffffff' 'background': '#ffffff'
}); });
}
return backPage;
} else {
return data.pageObjs[opts.next];
} }
return backPage; }
} else {
return data.pageObjs[opts.next];
}
}
}, },
_backGradient: function() { _backGradient: function () {
var data = this.data().f, var data = this.data().f,
turn = data.opts.turn, turn = data.opts.turn,
gradient = data.opts.backGradient && gradient = data.opts.backGradient &&
(!turn || turn.data().display=='single' || (data.opts.page!=2 && data.opts.page!=turn.data().totalPages-1) ); (!turn || turn.data().display == 'single' || (data.opts.page != 2 && data.opts.page != turn.data().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;
}, },
resize: function(full) { resize: function (full) {
var data = this.data().f, var data = this.data().f,
width = this.width(), 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)));
if (full) { if (full) {
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: height, height: width}); data.fpage.css({ width: height, height: width });
if (data.opts.frontGradient) if (data.opts.frontGradient)
data.ashadow.css({width: height, height: width}); data.ashadow.css({ width: height, height: width });
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')) {
data.fwrapper.css({top: data.parent.offset().top, data.fwrapper.css({
left: data.parent.offset().left}); top: data.parent.offset().top,
left: data.parent.offset().left
});
if (data.opts.turn) if (data.opts.turn)
data.fparent.css({top: -data.opts.turn.offset().top, left: -data.opts.turn.offset().left}); data.fparent.css({ top: -data.opts.turn.offset().top, left: -data.opts.turn.offset().left });
} }
this.flip('z', data.opts['z-index']); this.flip('z', data.opts['z-index']);
}, },
// 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,
parent = this.parent(); parent = this.parent();
if (!data.wrapper) { if (!data.wrapper) {
var left = this.css('left'), var left = this.css('left'),
top = this.css('top'), top = this.css('top'),
width = this.width(), 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.parent = parent; data.parent = parent;
data.fparent = (data.opts.turn) ? data.opts.turn.data().fparent : $('#turn-fwrappers'); data.fparent = (data.opts.turn) ? data.opts.turn.data().fparent : $('#turn-fwrappers');
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;
if (data.opts.turn) { if (data.opts.turn) {
fparent.css(divAtt(-data.opts.turn.offset().top, -data.opts.turn.offset().left, 'auto', 'visible').css). fparent.css(divAtt(-data.opts.turn.offset().top, -data.opts.turn.offset().left, 'auto', 'visible').css).
appendTo(data.opts.turn); appendTo(data.opts.turn);
data.opts.turn.data().fparent = fparent; data.opts.turn.data().fparent = fparent;
} else { } else {
fparent.css(divAtt(0, 0, 'auto', 'visible').css). fparent.css(divAtt(0, 0, 'auto', 'visible').css).
attr('id', 'turn-fwrappers'). attr('id', 'turn-fwrappers').
appendTo($('body')); appendTo($('body'));
} }
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).
prepend(this); prepend(this);
data.fwrapper = $('<div/>', divAtt(parent.offset().top, parent.offset().left)). data.fwrapper = $('<div/>', divAtt(parent.offset().top, parent.offset().left)).
hide(). hide().
appendTo(data.fparent); appendTo(data.fparent);
data.fpage = $('<div/>', {css: {cursor: 'default'}}). data.fpage = $('<div/>', { css: { cursor: 'default' } }).
appendTo($('<div/>', divAtt(0, 0, 0, 'visible')). appendTo($('<div/>', divAtt(0, 0, 0, 'visible')).
appendTo(data.fwrapper)); appendTo(data.fwrapper));
if (data.opts.frontGradient)
data.ashadow = $('<div/>', divAtt(0, 0, 1)).
appendTo(data.fpage);
// Save data if (data.opts.frontGradient)
data.ashadow = $('<div/>', divAtt(0, 0, 1)).
appendTo(data.fpage);
flipMethods.setData.call(this, data); // Save data
// Set size flipMethods.setData.call(this, data);
flipMethods.resize.call(this, true);
}
}, // Set size
flipMethods.resize.call(this, true);
}
// Takes a 2P point from the screen and applies the transformation },
_fold: function(point) { // Takes a 2P point from the screen and applies the transformation
var that = this, _fold: function (point) {
a = 0,
alpha = 0, var that = this,
beta, a = 0,
px, alpha = 0,
gradientEndPointA, beta,
gradientEndPointB, px,
gradientStartV, gradientEndPointA,
gradientSize, gradientEndPointB,
gradientOpacity, gradientStartV,
mv = point2D(0, 0), gradientSize,
df = point2D(0, 0), gradientOpacity,
tr = point2D(0, 0), mv = point2D(0, 0),
width = this.width(), df = point2D(0, 0),
height = this.height(), tr = point2D(0, 0),
folding = flipMethods._foldingPage.call(this), width = this.width(),
tan = Math.tan(alpha), height = this.height(),
data = this.data().f, folding = flipMethods._foldingPage.call(this),
ac = data.opts.acceleration, tan = Math.tan(alpha),
h = data.wrapper.height(), data = this.data().f,
o = flipMethods._c.call(this, point.corner), ac = data.opts.acceleration,
top = point.corner.substr(0, 1) == 't', h = data.wrapper.height(),
left = point.corner.substr(1, 1) == 'l', o = flipMethods._c.call(this, point.corner),
top = point.corner.substr(0, 1) == 't',
compute = function() { left = point.corner.substr(1, 1) == 'l',
var rel = point2D((o.x) ? o.x - point.x : point.x, (o.y) ? o.y - point.y : point.y),
tan = (Math.atan2(rel.y, rel.x)), compute = function () {
middle; var rel = point2D((o.x) ? o.x - point.x : point.x, (o.y) ? o.y - point.y : point.y),
tan = (Math.atan2(rel.y, rel.x)),
alpha = A90 - tan; middle;
a = deg(alpha);
middle = point2D((left) ? width - rel.x/2 : point.x + rel.x/2, rel.y/2); alpha = A90 - tan;
a = deg(alpha);
var gamma = alpha - Math.atan2(middle.y, middle.x), middle = point2D((left) ? width - rel.x / 2 : point.x + rel.x / 2, rel.y / 2);
distance = Math.max(0, Math.sin(gamma) * Math.sqrt(Math.pow(middle.x, 2) + Math.pow(middle.y, 2)));
var 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)));
tr = point2D(distance * Math.sin(alpha), distance * Math.cos(alpha)); tr = point2D(distance * Math.sin(alpha), distance * Math.cos(alpha));
...@@ -1456,291 +1470,293 @@ flipMethods = { ...@@ -1456,291 +1470,293 @@ flipMethods = {
tr.x = tr.x + Math.abs(tr.y * Math.tan(tan)); tr.x = tr.x + Math.abs(tr.y * Math.tan(tan));
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(Math.round( (left ? side -sideX : px+sideX)), Math.round((top) ? sideY : height - sideY)); df = point2D(Math.round((left ? side - sideX : px + sideX)), Math.round((top) ? sideY : height - sideY));
// GRADIENTS // 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)); far = Math.sqrt(Math.pow(endingPoint.x - point.x, 2) + Math.pow(endingPoint.y - point.y, 2));
gradientOpacity = (far<width) ? far/width : 1; gradientOpacity = (far < width) ? far / width : 1;
if (data.opts.frontGradient) { if (data.opts.frontGradient) {
gradientStartV = gradientSize>100 ? (gradientSize-100)/gradientSize : 0; gradientStartV = gradientSize > 100 ? (gradientSize - 100) / gradientSize : 0;
gradientEndPointA = point2D(gradientSize*Math.sin(A90-alpha)/height*100, gradientSize*Math.cos(A90-alpha)/width*100); gradientEndPointA = point2D(gradientSize * Math.sin(A90 - alpha) / height * 100, gradientSize * Math.cos(A90 - alpha) / width * 100);
if (top) gradientEndPointA.y = 100-gradientEndPointA.y; if (top) gradientEndPointA.y = 100 - gradientEndPointA.y;
if (left) gradientEndPointA.x = 100-gradientEndPointA.x; if (left) gradientEndPointA.x = 100 - gradientEndPointA.x;
} }
if (flipMethods._backGradient.call(that)) { if (flipMethods._backGradient.call(that)) {
gradientEndPointB = point2D(gradientSize*Math.sin(alpha)/width*100, gradientSize*Math.cos(alpha)/height*100); gradientEndPointB = point2D(gradientSize * Math.sin(alpha) / width * 100, gradientSize * 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;
} }
// //
tr.x = Math.round(tr.x); tr.x = Math.round(tr.x);
tr.y = Math.round(tr.y); tr.y = Math.round(tr.y);
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,
v = {left: f[c[0]], top: f[c[1]], right: f[c[2]], bottom: f[c[3]]}, v = { left: f[c[0]], top: f[c[1]], right: f[c[2]], bottom: f[c[3]] },
aliasingFk = (a!=90 && a!=-90) ? (left ? -1 : 1) : 0; aliasingFk = (a != 90 && a != -90) ? (left ? -1 : 1) : 0;
x = x[0] + '% ' + x[1] + '%'; x = x[0] + '% ' + x[1] + '%';
that.css(v).transform(rotate(a) + translate(tr.x + aliasingFk, tr.y, ac), x); that.css(v).transform(rotate(a) + translate(tr.x + aliasingFk, tr.y, ac), x);
data.fpage.parent().css(v); data.fpage.parent().css(v);
data.wrapper.transform(translate(-tr.x + mvW-aliasingFk, -tr.y + mvH, ac) + rotate(-a), x); data.wrapper.transform(translate(-tr.x + mvW - aliasingFk, -tr.y + mvH, ac) + rotate(-a), x);
data.fwrapper.transform(translate(-tr.x + mv.x + mvW, -tr.y + mv.y + mvH, ac) + rotate(-a), x); data.fwrapper.transform(translate(-tr.x + mv.x + mvW, -tr.y + mv.y + mvH, ac) + rotate(-a), x);
data.fpage.parent().transform(rotate(a) + translate(tr.x + df.x - mv.x, tr.y + df.y - mv.y, ac), x); data.fpage.parent().transform(rotate(a) + translate(tr.x + df.x - mv.x, tr.y + df.y - mv.y, ac), x);
if (data.opts.frontGradient) if (data.opts.frontGradient)
gradient(data.ashadow, gradient(data.ashadow,
point2D(left?100:0, top?100:0), point2D(left ? 100 : 0, top ? 100 : 0),
point2D(gradientEndPointA.x, gradientEndPointA.y), point2D(gradientEndPointA.x, gradientEndPointA.y),
[[gradientStartV, 'rgba(0,0,0,0)'], [[gradientStartV, 'rgba(0,0,0,0)'],
[((1-gradientStartV)*0.8)+gradientStartV, 'rgba(0,0,0,'+(0.2*gradientOpacity)+')'], [((1 - gradientStartV) * 0.8) + gradientStartV, '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.8, 'rgba(0,0,0,0)'], [[0.8, 'rgba(0,0,0,0)'],
[1, 'rgba(0,0,0,'+(0.3*gradientOpacity)+')'], [1, 'rgba(0,0,0,' + (0.3 * gradientOpacity) + ')'],
[1, 'rgba(0,0,0,0)']], [1, 'rgba(0,0,0,0)']],
3); 3);
}; };
switch (point.corner) { switch (point.corner) {
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);
data.fpage.transform(translate(-height, -width, ac) + rotate(90-a*2) , '100% 100%'); data.fpage.transform(translate(-height, -width, ac) + rotate(90 - a * 2), '100% 100%');
folding.transform(rotate(90) + translate(0, -height, ac), '0% 0%'); folding.transform(rotate(90) + translate(0, -height, ac), '0% 0%');
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);
data.fpage.transform(translate(0, -width, ac) + rotate(-90+a*2) , '0% 100%'); data.fpage.transform(translate(0, -width, ac) + rotate(-90 + a * 2), '0% 100%');
folding.transform(rotate(270) + translate(-width, 0, ac), '0% 0%'); folding.transform(rotate(270) + translate(-width, 0, ac), '0% 0%');
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);
data.fpage.transform(translate(-height, 0, ac) + rotate(-90+a*2), '100% 0%'); data.fpage.transform(translate(-height, 0, ac) + rotate(-90 + a * 2), '100% 0%');
folding.transform(rotate(270) + translate(-width, 0, ac), '0% 0%'); folding.transform(rotate(270) + translate(-width, 0, ac), '0% 0%');
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);
data.fpage.transform(rotate(90-a*2), '0% 0%'); data.fpage.transform(rotate(90 - a * 2), '0% 0%');
folding.transform(rotate(90) + translate(0, -height, ac), '0% 0%'); folding.transform(rotate(90) + translate(0, -height, ac), '0% 0%');
break; break;
} }
data.point = point; data.point = point;
}, },
_moveFoldingPage: function(bool) { _moveFoldingPage: function (bool) {
var data = this.data().f, var data = this.data().f,
folding = flipMethods._foldingPage.call(this); folding = flipMethods._foldingPage.call(this);
if (folding) { if (folding) {
if (bool) { if (bool) {
if (!data.fpage.children()[data.ashadow? '1' : '0']) { if (!data.fpage.children()[data.ashadow ? '1' : '0']) {
flipMethods.setData.call(this, {backParent: folding.parent()}); flipMethods.setData.call(this, { backParent: folding.parent() });
data.fpage.prepend(folding); data.fpage.prepend(folding);
} }
} else { } else {
if (data.backParent) if (data.backParent)
data.backParent.prepend(folding); data.backParent.prepend(folding);
}
} }
}
}, },
_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(),
data = dd.f; data = dd.f;
if (!data.point || data.point.corner!=c.corner) { if (!data.point || data.point.corner != c.corner) {
var event = $.Event('start'); var event = $.Event('start');
this.trigger(event, [data.opts, c.corner]); this.trigger(event, [data.opts, c.corner]);
if (event.isDefaultPrevented()) if (event.isDefaultPrevented())
return false; return false;
} }
if (folding) { if (folding) {
if (animate) { if (animate) {
var that = this, point = (data.point && data.point.corner==c.corner) ? data.point : flipMethods._c.call(this, c.corner, 1); var that = this, point = (data.point && data.point.corner == c.corner) ? data.point : flipMethods._c.call(this, c.corner, 1);
this.animatef({
from: [point.x, point.y], to: [c.x, c.y], duration: 500, frame: function (v) {
c.x = Math.round(v[0]);
c.y = Math.round(v[1]);
flipMethods._fold.call(that, c);
}
});
this.animatef({from: [point.x, point.y], to:[c.x, c.y], duration: 500, frame: function(v) { } else {
c.x = Math.round(v[0]);
c.y = Math.round(v[1]);
flipMethods._fold.call(that, c);
}});
} else { flipMethods._fold.call(this, c);
if (dd.effect && !dd.effect.turning)
this.animatef(false);
flipMethods._fold.call(this, c); }
if (dd.effect && !dd.effect.turning)
this.animatef(false);
} if (!data.fwrapper.is(':visible')) {
data.fparent.show().data().flips++;
flipMethods._moveFoldingPage.call(this, true);
data.fwrapper.show();
if (!data.fwrapper.is(':visible')) { if (data.bshadow)
data.fparent.show().data().flips++; data.bshadow.show();
flipMethods._moveFoldingPage.call(this, true); }
data.fwrapper.show();
if (data.bshadow) return true;
data.bshadow.show();
} }
return true; return false;
} },
return false; hide: function () {
},
hide: function() { var data = this.data().f,
folding = flipMethods._foldingPage.call(this);
var data = this.data().f, if ((--data.fparent.data().flips) === 0)
folding = flipMethods._foldingPage.call(this); data.fparent.hide();
if ((--data.fparent.data().flips)===0) this.css({ left: 0, top: 0, right: 'auto', bottom: 'auto' }).transform('', '0% 100%');
data.fparent.hide();
this.css({left: 0, top: 0, right: 'auto', bottom: 'auto'}).transform('', '0% 100%'); data.wrapper.transform('', '0% 100%');
data.wrapper.transform('', '0% 100%'); data.fwrapper.hide();
data.fwrapper.hide(); if (data.bshadow)
data.bshadow.hide();
if (data.bshadow) folding.transform('', '0% 0%');
data.bshadow.hide();
folding.transform('', '0% 0%'); return this;
},
return this; hideFoldedPage: function (animate) {
},
hideFoldedPage: function(animate) { var data = this.data().f;
var data = this.data().f;
var data = this.data().f;
var data = this.data().f; if (!data.point) return;
if (!data.point) return; var that = this,
p1 = data.point,
var that = this, hide = function () {
p1 = data.point, data.point = null;
hide = function() { that.flip('hide');
data.point = null; that.trigger('end', [false]);
that.flip('hide'); };
that.trigger('end', [false]);
}; if (animate) {
var p4 = flipMethods._c.call(this, p1.corner),
if (animate) { top = (p1.corner.substr(0, 1) == 't'),
var p4 = flipMethods._c.call(this, p1.corner), delta = (top) ? Math.min(0, p1.y - p4.y) / 2 : Math.max(0, p1.y - p4.y) / 2,
top = (p1.corner.substr(0,1)=='t'), p2 = point2D(p1.x, p1.y + delta),
delta = (top) ? Math.min(0, p1.y-p4.y)/2 : Math.max(0, p1.y-p4.y)/2, p3 = point2D(p4.x, p4.y - delta);
p2 = point2D(p1.x, p1.y+delta),
p3 = point2D(p4.x, p4.y-delta); this.animatef({
from: 0,
this.animatef({ to: 1,
from: 0, frame: function (v) {
to: 1, var np = bezier(p1, p2, p3, p4, v);
frame: function(v) { p1.x = np.x;
var np = bezier(p1, p2, p3, p4, v); p1.y = np.y;
p1.x = np.x; flipMethods._fold.call(that, p1);
p1.y = np.y; },
flipMethods._fold.call(that, p1); complete: hide,
}, duration: 800,
complete: hide, hiding: true
duration: 800,
hiding: true
}); });
} else { } else {
this.animatef(false); this.animatef(false);
hide(); hide();
} }
}, },
turnPage: function(corner) { turnPage: function (corner) {
var that = this, var that = this,
data = this.data().f; data = this.data().f;
corner = {corner: (data.corner) ? data.corner.corner : corner || flipMethods._cAllowed.call(this)[0]}; corner = { corner: (data.corner) ? data.corner.corner : corner || flipMethods._cAllowed.call(this)[0] };
var p1 = data.point || flipMethods._c.call(this, corner.corner, (data.opts.turn) ? data.opts.turn.data().opts.elevation : 0), var p1 = data.point || flipMethods._c.call(this, corner.corner, (data.opts.turn) ? data.opts.turn.data().opts.elevation : 0),
p4 = flipMethods._c2.call(this, corner.corner); p4 = flipMethods._c2.call(this, corner.corner);
this.trigger('flip'). this.trigger('flip').
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;
corner.y = np.y; corner.y = np.y;
flipMethods._showFoldedPage.call(that, corner); flipMethods._showFoldedPage.call(that, corner);
}, },
complete: function() { complete: function () {
that.trigger('end', [true]); that.trigger('end', [true]);
}, },
duration: data.opts.duration, duration: data.opts.duration,
...@@ -1748,121 +1764,121 @@ flipMethods = { ...@@ -1748,121 +1764,121 @@ flipMethods = {
}); });
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;
}, },
_eventStart: function(e) { _eventStart: function (e) {
var data = this.data().f; var data = this.data().f;
if (!data.disabled && !this.flip('isTurning')) { if (!data.disabled && !this.flip('isTurning')) {
data.corner = flipMethods._cornerActivated.call(this, e); data.corner = flipMethods._cornerActivated.call(this, e);
if (data.corner && flipMethods._foldingPage.call(this, data.corner)) { if (data.corner && flipMethods._foldingPage.call(this, data.corner)) {
flipMethods._moveFoldingPage.call(this, true); flipMethods._moveFoldingPage.call(this, true);
this.trigger('pressed', [data.point]); this.trigger('pressed', [data.point]);
return false; return false;
} else } else
data.corner = null; data.corner = null;
} }
}, },
_eventMove: function(e) { _eventMove: function (e) {
var data = this.data().f; var data = this.data().f;
if (!data.disabled) { if (!data.disabled) {
e = (isTouch) ? e.originalEvent.touches : [e]; e = (isTouch) ? e.originalEvent.touches : [e];
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 (!this.data().effect && this.is(':visible')) { // roll over } else if (!this.data().effect && this.is(':visible')) { // roll over
var corner = flipMethods._cornerActivated.call(this, e[0]); var corner = flipMethods._cornerActivated.call(this, e[0]);
if (corner) { if (corner) {
var origin = flipMethods._c.call(this, corner.corner, data.opts.cornerSize/2); var origin = flipMethods._c.call(this, corner.corner, data.opts.cornerSize / 2);
corner.x = origin.x; corner.x = origin.x;
corner.y = origin.y; corner.y = origin.y;
flipMethods._showFoldedPage.call(this, corner, true); flipMethods._showFoldedPage.call(this, corner, true);
} }
else else
flipMethods.hideFoldedPage.call(this, true); flipMethods.hideFoldedPage.call(this, true);
}
} }
} },
},
_eventEnd: function() { _eventEnd: function () {
var data = this.data().f; var data = this.data().f;
if (!data.disabled && data.point) { if (!data.disabled && data.point) {
var event = $.Event('released'); var event = $.Event('released');
this.trigger(event, [data.point]); this.trigger(event, [data.point]);
if (!event.isDefaultPrevented()) if (!event.isDefaultPrevented())
flipMethods.hideFoldedPage.call(this, true); flipMethods.hideFoldedPage.call(this, true);
} }
data.corner = null; data.corner = null;
}, },
disable: function(disable) { disable: function (disable) {
flipMethods.setData.call(this, {'disabled': disable}); flipMethods.setData.call(this, { 'disabled': disable });
return this; return this;
} }
}, },
cla = function(that, methods, args) { cla = function (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]] && args[0].toString().substr(0, 1)!='_') else if (methods[args[0]] && args[0].toString().substr(0, 1) != '_')
return methods[args[0]].apply(that, Array.prototype.slice.call(args, 1)); return methods[args[0]].apply(that, Array.prototype.slice.call(args, 1));
else else
throw args[0] + ' is an invalid value'; throw args[0] + ' is an invalid value';
}; };
$.extend($.fn, { $.extend($.fn, {
flip: function(req, opts) { flip: function (req, opts) {
return cla(this, flipMethods, arguments); return cla(this, flipMethods, arguments);
}, },
turn: function(req) { turn: function (req) {
return cla(this, turnMethods, arguments); return cla(this, 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();
...@@ -1873,30 +1889,30 @@ $.extend($.fn, { ...@@ -1873,30 +1889,30 @@ $.extend($.fn, {
if (!point.to.length) point.to = [point.to]; if (!point.to.length) point.to = [point.to];
if (!point.from.length) point.from = [point.from]; if (!point.from.length) point.from = [point.from];
if (!point.easing) point.easing = function (x, t, b, c, data) { return c * Math.sqrt(1 - (t=t/data-1)*t) + b; }; if (!point.easing) point.easing = function (x, t, b, c, data) { return c * Math.sqrt(1 - (t = t / data - 1) * t) + b; };
var j, diff = [], var j, diff = [],
len = point.to.length, len = point.to.length,
that = this, that = this,
fps = point.fps || 30, fps = point.fps || 30,
time = - fps, time = - fps,
f = function() { f = function () {
var j, v = []; var j, v = [];
time = Math.min(point.duration, time + fps); time = Math.min(point.duration, time + fps);
for (j = 0; j < len; j++) for (j = 0; j < len; j++)
v.push(point.easing(1, time, point.from[j], diff[j], point.duration)); v.push(point.easing(1, time, point.from[j], diff[j], point.duration));
point.frame((len==1) ? v[0] : v); point.frame((len == 1) ? v[0] : v);
if (time==point.duration) { if (time == point.duration) {
clearInterval(data.effect.handle); clearInterval(data.effect.handle);
delete data['effect']; delete data['effect'];
that.data(data); that.data(data);
if (point.complete) if (point.complete)
point.complete(); point.complete();
} }
}; };
for (j = 0; j < len; j++) for (j = 0; j < len; j++)
diff.push(point.to[j] - point.from[j]); diff.push(point.to[j] - point.from[j]);
......
src/components.d.ts
浏览文件 @ 52dccd32
...@@ -17,7 +17,6 @@ declare module 'vue' { ...@@ -17,7 +17,6 @@ declare module 'vue' {
ElRow: typeof import('element-plus/es')['ElRow'] ElRow: typeof import('element-plus/es')['ElRow']
ElTooltip: typeof import('element-plus/es')['ElTooltip'] ElTooltip: typeof import('element-plus/es')['ElTooltip']
FileUpload: typeof import('./components/FileUpload.vue')['default'] FileUpload: typeof import('./components/FileUpload.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']
......
src/components/BookReader/index.vue
浏览文件 @ 52dccd32
<template> <template>
<div <div
class="book-reader" class="book-reader"
@touchstart="handleTouchStart"
@touchend="handleTouchEnd"
v-loading="loading && initialLoading" v-loading="loading && initialLoading"
element-loading-text="正在加载图书..." element-loading-text="正在加载图书..."
> >
...@@ -218,31 +216,6 @@ const checkMobile = () => { ...@@ -218,31 +216,6 @@ const checkMobile = () => {
); );
}; };
// 处理触摸事件
const handleTouchStart = (e) => {
if (!isMobile.value) return;
touchStartX.value = e.touches[0].clientX;
touchStartY.value = e.touches[0].clientY;
};
const handleTouchEnd = throttle((e) => {
if (!isMobile.value) return;
const touchEndX = e.changedTouches[0].clientX;
const touchEndY = e.changedTouches[0].clientY;
const deltaX = touchEndX - touchStartX.value;
const deltaY = touchEndY - touchStartY.value;
// 这里与卷边的移动冲突，需要处理得更优雅
// 如果水平滑动距离大于垂直滑动距离，且大于50px，则触发翻页
// if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
// if (deltaX > 0) {
// previousPage();
// } else {
// nextPage();
// }
// }
});
// 修改处理页面的函数，只处理必要的属性 // 修改处理页面的函数，只处理必要的属性
const processPages = (pages) => { const processPages = (pages) => {
return pages.map((item, index) => ({ return pages.map((item, index) => ({
...@@ -424,7 +397,7 @@ const initBook = async () => { ...@@ -424,7 +397,7 @@ const initBook = async () => {
acceleration: true, acceleration: true,
gradients: true, gradients: true,
elevation: 80, elevation: 80,
duration: 800, duration: 200,
autoCenter: true, autoCenter: true,
turnCorners: "bl,br", turnCorners: "bl,br",
page: 1, page: 1,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论