/** * turn.js 3rd release * www.turnjs.com * * copyright (c) 2012, emmanuel garcia. * all rights reserved. * * redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions * are met: * * 1. redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer. * * 2. any redistribution, use, or modification is done solely for personal * benefit and not for any commercial purpose or for monetary gain. * **/ (function($) { 'use strict'; var has3d, vendor ='', pi = math.pi, a90 = pi/2, istouch = 'ontouchstart' in window, events = (istouch) ? {start: 'touchstart', move: 'touchmove', end: 'touchend'} : {start: 'mousedown', move: 'mousemove', end: 'mouseup'}, // contansts used for each corner // tl * tr // * * // bl * br corners = { backward: ['bl', 'tl'], forward: ['br', 'tr'], all: ['tl', 'bl', 'tr', 'br'] }, displays = ['single', 'double'], // default options turnoptions = { // first page page: 1, // enables gradients gradients: true, // duration of transition in milliseconds duration: 600, // enables hardware acceleration acceleration: true, // display display: 'double', // events when: null }, flipoptions = { // back page folding: null, // corners // backward: activates both tl and bl corners // forward: activates both tr and br corners // all: activates all the corners corners: 'forward', // size of the active zone of each corner cornersize: 100, // enables gradients gradients: true, // duration of transition in milliseconds duration: 600, // enables hardware acceleration acceleration: true }, // number of pages in the dom, minimum value: 6 pagesindom = 6, pageposition = {0: {top: 0, left: 0, right: 'auto', bottom: 'auto'}, 1: {top: 0, right: 0, left: 'auto', bottom: 'auto'}}, // gets basic attributes for a layer divatt = function(top, left, zindex, overf) { return {'css': { position: 'absolute', top: top, left: left, 'overflow': overf || 'hidden', 'z-index': zindex || 'auto' } }; }, // gets a 2d point from a bezier curve of four points bezier = function(p1, p2, p3, p4, t) { var mum1 = 1 - t, mum13 = mum1 * mum1 * mum1, 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), 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 rad = function(degrees) { return degrees/180*pi; }, // converts an angle from radians to degrees deg = function(radians) { return radians/pi*180; }, // gets a 2d point point2d = function(x, y) { return {x: x, y: y}; }, // returns the traslate value translate = function(x, y, use3d) { return (has3d && use3d) ? ' translate3d(' + x + 'px,' + y + 'px, 0px) ' : ' translate(' + x + 'px, ' + y + 'px) '; }, // returns the rotation value rotate = function(degrees) { return ' rotate(' + degrees + 'deg) '; }, // checks if a property belongs to an object has = function(property, object) { return object.prototype.hasownproperty.call(object, property); }, // gets the css3 vendor prefix getprefix = function() { var vendorprefixes = ['moz','webkit','khtml','o','ms'], len = vendorprefixes.length, vendor = ''; while (len--) if ((vendorprefixes[len] + 'transform') in document.body.style) vendor='-'+vendorprefixes[len].tolowercase()+'-'; return vendor; }, // adds gradients gradient = function(obj, p0, p1, colors, numcolors) { var j, cols = []; if (vendor=='-webkit-') { for (j = 0; jlastpage) throw new error ('it is impossible to add the page "'+page+'", the maximum value is: "'+lastpage+'"'); } else { page = lastpage; incpages = true; } if (page>=1 && page<=lastpage) { // stop animations if (data.done) this.turn('stop'); // move pages if it's necessary if (page in data.pageobjs) turnmethods._movepages.call(this, page, 1); // update number of pages if (incpages) data.totalpages = lastpage; // add element data.pageobjs[page] = $(element).addclass('turn-page p' + page); // add page turnmethods._addpage.call(this, page); // update view if (data.done) this.turn('update'); turnmethods._removefromdom.call(this); } return this; }, // adds a page from internal data _addpage: function(page) { var data = this.data(), element = data.pageobjs[page]; if (element) if (turnmethods._necesspage.call(this, page)) { if (!data.pagewrap[page]) { var pagewidth = (data.display=='double') ? this.width()/2 : this.width(), pageheight = this.height(); element.css({width:pagewidth, height:pageheight}); // place data.pageplace[page] = page; // wrapper data.pagewrap[page] = $('
', {'class': 'turn-page-wrapper', page: page, css: {position: 'absolute', overflow: 'hidden', width: pagewidth, height: pageheight}}). 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 if (!page || turnmethods._setpageloc.call(this, page)==1) turnmethods._makeflip.call(this, page); } else { // 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; }, // prepares the flip effect for a page _makeflip: function(page) { var data = this.data(); if (!data.pages[page] && data.pageplace[page]==page) { var single = data.display=='single', 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 _makerange: function() { var page, data = this.data(), range = this.turn('range'); for (page = range[0]; page<=range[1]; page++) turnmethods._addpage.call(this, page); }, // returns a range of `pagesindom` pages that should be in the dom // example: // - page of the current view, return true // * page is in the range, return true // 0 page is not in the range, return false // // 1 2-3 4-5 6-7 8-9 10-11 12-13 // ** ** -- ** ** range: function(page) { var remainingpages, left, right, data = this.data(); page = page || data.tpage || data.page; var view = turnmethods._view.call(this, page); if (page<1 || page>data.totalpages) throw new error ('"'+page+'" is not a page for range'); view[1] = view[1] || view[0]; if (view[0]>=1 && view[1]<=data.totalpages) { remainingpages = math.floor((pagesindom-2)/2); if (data.totalpages-view[1] > view[0]) { left = math.min(view[0]-1, remainingpages); right = 2*remainingpages-left; } else { right = math.min(data.totalpages-view[1], remainingpages); left = 2*remainingpages-right; } } else { left = pagesindom-1; right = pagesindom-1; } 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 _necesspage: function(page) { if (page===0) return true; var range = this.turn('range'); return page>=range[0] && page<=range[1]; }, // releases memory by removing pages from the dom _removefromdom: function() { var page, data = this.data(); for (page in data.pagewrap) if (has(page, data.pagewrap) && !turnmethods._necesspage.call(this, page)) turnmethods._removepagefromdom.call(this, page); }, // removes a page from dom and its internal references _removepagefromdom: function(page) { var data = this.data(); if (data.pages[page]) { var dd = data.pages[page].data(); if (dd.f && dd.f.fwrapper) dd.f.fwrapper.remove(); data.pages[page].remove(); delete data.pages[page]; } if (data.pageobjs[page]) data.pageobjs[page].remove(); if (data.pagewrap[page]) { data.pagewrap[page].remove(); delete data.pagewrap[page]; } delete data.pageplace[page]; }, // removes a page removepage: function(page) { var data = this.data(); if (data.pageobjs[page]) { // stop animations this.turn('stop'); // remove `page` turnmethods._removepagefromdom.call(this, page); delete data.pageobjs[page]; // move the pages behind `page` turnmethods._movepages.call(this, page, -1); // resize the size of this magazine data.totalpages = data.totalpages-1; turnmethods._makerange.call(this); // check the current view if (data.page>data.totalpages) this.turn('page', data.totalpages); } return this; }, // moves pages _movepages: function(from, change) { var page, data = this.data(), single = data.display=='single', move = function(page) { var next = page + change, odd = next%2; if (data.pageobjs[page]) data.pageobjs[next] = data.pageobjs[page].removeclass('page' + page).addclass('page' + next); if (data.pageplace[page] && data.pagewrap[page]) { data.pageplace[next] = next; data.pagewrap[next] = data.pagewrap[page].css(pageposition[(single) ? 0 : odd]).attr('page', next); if (data.pages[page]) data.pages[next] = data.pages[page].flip('options', { page: next, next: (single || odd) ? next+1 : next-1, corners: (single) ? 'all' : ((odd) ? 'forward' : 'backward') }); if (change) { delete data.pages[page]; delete data.pageplace[page]; delete data.pageobjs[page]; delete data.pagewrap[page]; delete data.pageobjs[page]; } } }; if (change>0) for (page=data.totalpages; page>=from; page--) move(page); else for (page=from; page<=data.totalpages; page++) move(page); }, // sets or gets the display mode display: function(display) { var data = this.data(), currentdisplay = data.display; if (display) { if ($.inarray(display, displays)==-1) throw new error ('"'+display + '" is not a value for display'); if (display=='single') { if (!data.pageobjs[0]) { this.turn('stop'). css({'overflow': 'hidden'}); data.pageobjs[0] = $('
', {'class': 'turn-page p-temporal'}). css({width: this.width(), height: this.height()}). appendto(this); } } else { if (data.pageobjs[0]) { this.turn('stop'). css({'overflow': ''}); data.pageobjs[0].remove(); delete data.pageobjs[0]; } } data.display = display; if (currentdisplay) { var size = this.turn('size'); turnmethods._movepages.call(this, 1, 0); this.turn('size', size.width, size.height). turn('update'); } return this; } else return currentdisplay; }, // detects if the pages are being animated animating: function() { return this.data().pagemv.length>0; }, // disables and enables the effect disable: function(bool) { var page, data = this.data(), view = this.turn('view'); data.disabled = bool===undefined || bool===true; for (page in data.pages) if (has(page, data.pages)) data.pages[page].flip('disable', bool ? $.inarray(page, view) : false ); return this; }, // gets and sets the size size: function(width, height) { if (width && height) { var data = this.data(), pagewidth = (data.display=='double') ? width/2 : width, page; this.css({width: width, height: height}); if (data.pageobjs[0]) data.pageobjs[0].css({width: pagewidth, height: height}); for (page in data.pagewrap) { if (!has(page, data.pagewrap)) continue; data.pageobjs[page].css({width: pagewidth, height: height}); data.pagewrap[page].css({width: pagewidth, height: height}); if (data.pages[page]) data.pages[page].css({width: pagewidth, height: height}); } this.turn('resize'); return this; } else { return {width: this.width(), height: this.height()}; } }, // resizes each page resize: function() { var page, data = this.data(); if (data.pages[0]) { data.pagewrap[0].css({left: -this.width()}); data.pages[0].flip('resize', true); } for (page = 1; page <= data.totalpages; page++) if (data.pages[page]) data.pages[page].flip('resize', true); }, // removes an animation from the cache _removemv: function(page) { var i, data = this.data(); for (i=0; i0) ? view[0] : 0, (view[1]<=data.totalpages) ? view[1] : 0] : [(view[0]>0 && view[0]<=data.totalpages) ? view[0] : 0]; }, // stops animations stop: function(ok) { var i, opts, data = this.data(), pages = data.pagemv; data.pagemv = []; if (data.tpage) { data.page = data.tpage; delete data['tpage']; } for (i in pages) { if (!has(i, pages)) continue; opts = data.pages[pages[i]].data().f.opts; flipmethods._movefoldingpage.call(data.pages[pages[i]], null); data.pages[pages[i]].flip('hidefoldedpage'); data.pageplace[opts.next] = opts.next; if (opts.force) { opts.next = (opts.page%2===0) ? opts.page-1 : opts.page+1; delete opts['force']; } } this.turn('update'); return this; }, // gets and sets the number of pages pages: function(pages) { var data = this.data(); if (pages) { if (pagespages) this.turn('page', pages); } data.totalpages = pages; return this; } else return data.totalpages; }, // sets a page without effect _fitpage: function(page, ok) { 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.pageobjs[page]) return; data.tpage = page; this.turn('stop', ok); turnmethods._removefromdom.call(this); turnmethods._makerange.call(this); this.trigger('turned', [page, newview]); }, // turns to a page _turnpage: function(page) { var current, next, data = this.data(), view = this.turn('view'), 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.pageobjs[page]) return; data.tpage = page; this.turn('stop'); 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]) ? 'br' : 'bl'); else data.pages[current].flip('turnpage'); } }, // gets and sets a page page: function(page) { page = parseint(page, 10); var data = this.data(); if (page>0 && page<=data.totalpages) { if (!data.done || $.inarray(page, this.turn('view'))!=-1) turnmethods._fitpage.call(this, page); else turnmethods._turnpage.call(this, page); return this; } else return data.page; }, // turns to the next view next: function() { var data = this.data(); return this.turn('page', turnmethods._view.call(this, data.page).pop() + 1); }, // turns to the previous view previous: function() { var data = this.data(); return this.turn('page', turnmethods._view.call(this, data.page).shift() - 1); }, // adds a motion to the internal list _addmotionpage: function() { var opts = $(this).data().f.opts, turn = opts.turn, dd = turn.data(); opts.pagemv = opts.page; turnmethods._addmv.call(turn, opts.pagemv); dd.pageplace[opts.next] = opts.page; turn.turn('update'); }, // this event is called in context of flip _start: function(e, opts, corner) { var data = opts.turn.data(), event = $.event('start'); e.stoppropagation(); opts.turn.trigger(event, [opts, corner]); if (event.isdefaultprevented()) { e.preventdefault(); return; } 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.nextopts.page) ? opts.next : opts.page+1; } } turnmethods._addmotionpage.call(this); }, // this event is called in context of flip _end: function(e, turned) { var that = $(this), data = that.data().f, opts = data.opts, turn = opts.turn, dd = turn.data(); e.stoppropagation(); 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); } } else { turnmethods._removemv.call(turn, opts.pagemv); turn.turn('update'); } }, // this event is called in context of flip _pressed: function() { var page, that = $(this), data = that.data().f, turn = data.opts.turn, pages = turn.data().pages; for (page in pages) if (page!=data.opts.page) pages[page].flip('disable', true); return data.time = new date().gettime(); }, // this event is called in context of flip _released: function(e, point) { var that = $(this), data = that.data().f; e.stoppropagation(); if ((new date().gettime())-data.time<200 || point.x<0 || point.x>$(this).width()) { e.preventdefault(); data.opts.turn.data().tpage = data.opts.next; data.opts.turn.turn('update'); $(that).flip('turnpage'); } }, // this event is called in context of flip _flip: function() { 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) { var i, page, nextpage, placepage, dpage, that = this, data = this.data(), view = this.turn('view'), currentpage = view[0] || view[1], r = {pagez: {}, partz: {}, pagev: {}}, 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=width || c.y>=height) return false; if (c.y=height-csz) c.corner = 'b'; else return false; if (c.x<=csz) c.corner+= 'l'; else if (c.x>=width-csz) c.corner+= 'r'; else return false; return ($.inarray(c.corner, allowedcorners)==-1) ? false : c; }, _c: function(corner, opts) { opts = opts || 0; return ({tl: point2d(opts, opts), tr: point2d(this.width()-opts, opts), bl: point2d(opts, this.height()-opts), br: point2d(this.width()-opts, this.height()-opts)})[corner]; }, _c2: function(corner) { return {tl: point2d(this.width()*2, 0), tr: point2d(-this.width(), 0), bl: point2d(this.width()*2, this.height()), br: point2d(-this.width(), this.height())}[corner]; }, _foldingpage: function(corner) { var opts = this.data().f.opts; if (opts.folding) return opts.folding; else if(opts.turn) { var data = opts.turn.data(); if (data.display == 'single') return (data.pageobjs[opts.next]) ? data.pageobjs[0] : null; else return data.pageobjs[opts.next]; } }, _backgradient: function() { var data = this.data().f, turn = data.opts.turn, gradient = data.opts.backgradient && (!turn || turn.data().display=='single' || (data.opts.page!=2 && data.opts.page!=turn.data().totalpages-1) ); if (gradient && !data.bshadow) data.bshadow = $('
', divatt(0, 0, 1)). css({'position': '', width: this.width(), height: this.height()}). appendto(data.parent); return gradient; }, resize: function(full) { var data = this.data().f, width = this.width(), height = this.height(), size = math.round(math.sqrt(math.pow(width, 2)+math.pow(height, 2))); if (full) { data.wrapper.css({width: size, height: size}); data.fwrapper.css({width: size, height: size}). children(':first-child'). css({width: width, height: height}); data.fpage.css({width: height, height: width}); if (data.opts.frontgradient) data.ashadow.css({width: height, height: width}); if (flipmethods._backgradient.call(this)) data.bshadow.css({width: width, height: height}); } if (data.parent.is(':visible')) { data.fwrapper.css({top: data.parent.offset().top, left: data.parent.offset().left}); if (data.opts.turn) data.fparent.css({top: -data.opts.turn.offset().top, left: -data.opts.turn.offset().left}); } this.flip('z', data.opts['z-index']); }, // prepares the page by adding a general wrapper and another objects _addpagewrapper: function() { var att, data = this.data().f, parent = this.parent(); if (!data.wrapper) { var left = this.css('left'), top = this.css('top'), width = this.width(), height = this.height(), size = math.round(math.sqrt(math.pow(width, 2)+math.pow(height, 2))); data.parent = parent; data.fparent = (data.opts.turn) ? data.opts.turn.data().fparent : $('#turn-fwrappers'); if (!data.fparent) { var fparent = $('
', {css: {'pointer-events': 'none'}}).hide(); fparent.data().flips = 0; if (data.opts.turn) { fparent.css(divatt(-data.opts.turn.offset().top, -data.opts.turn.offset().left, 'auto', 'visible').css). appendto(data.opts.turn); data.opts.turn.data().fparent = fparent; } else { fparent.css(divatt(0, 0, 'auto', 'visible').css). attr('id', 'turn-fwrappers'). appendto($('body')); } data.fparent = fparent; } this.css({position: 'absolute', top: 0, left: 0, bottom: 'auto', right: 'auto'}); data.wrapper = $('
', divatt(0, 0, this.css('z-index'))). appendto(parent). prepend(this); data.fwrapper = $('
', divatt(parent.offset().top, parent.offset().left)). hide(). appendto(data.fparent); data.fpage = $('
', {css: {cursor: 'default'}}). appendto($('
', divatt(0, 0, 0, 'visible')). appendto(data.fwrapper)); if (data.opts.frontgradient) data.ashadow = $('
', divatt(0, 0, 1)). appendto(data.fpage); // save data flipmethods.setdata.call(this, data); // set size flipmethods.resize.call(this, true); } }, // takes a 2p point from the screen and applies the transformation _fold: function(point) { var that = this, a = 0, alpha = 0, beta, px, gradientendpointa, gradientendpointb, gradientstartv, gradientsize, gradientopacity, mv = point2d(0, 0), df = point2d(0, 0), tr = point2d(0, 0), width = this.width(), height = this.height(), folding = flipmethods._foldingpage.call(this), tan = math.tan(alpha), data = this.data().f, ac = data.opts.acceleration, h = data.wrapper.height(), o = flipmethods._c.call(this, point.corner), top = point.corner.substr(0, 1) == 't', left = point.corner.substr(1, 1) == 'l', compute = function() { 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)), middle; alpha = a90 - tan; a = deg(alpha); middle = point2d((left) ? width - rel.x/2 : point.x + rel.x/2, rel.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)); if (alpha > a90) { tr.x = tr.x + math.abs(tr.y * math.tan(tan)); tr.y = 0; if (math.round(tr.x*math.tan(pi-alpha)) < height) { point.y = math.sqrt(math.pow(height, 2)+2 * middle.x * rel.x); if (top) point.y = height - point.y; return compute(); } } if (alpha>a90) { var beta = pi-alpha, dd = h - height/math.sin(beta); mv = point2d(math.round(dd*math.cos(beta)), math.round(dd*math.sin(beta))); if (left) mv.x = - mv.x; if (top) mv.y = - mv.y; } px = math.round(tr.y/math.tan(alpha) + tr.x); var side = width - px, sidex = side*math.cos(alpha*2), sidey = side*math.sin(alpha*2); df = point2d(math.round( (left ? side -sidex : px+sidex)), math.round((top) ? sidey : height - sidey)); // gradients gradientsize = side*math.sin(alpha); 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)); gradientopacity = (far100 ? (gradientsize-100)/gradientsize : 0; gradientendpointa = point2d(gradientsize*math.sin(a90-alpha)/height*100, gradientsize*math.cos(a90-alpha)/width*100); if (top) gradientendpointa.y = 100-gradientendpointa.y; if (left) gradientendpointa.x = 100-gradientendpointa.x; } if (flipmethods._backgradient.call(that)) { gradientendpointb = point2d(gradientsize*math.sin(alpha)/width*100, gradientsize*math.cos(alpha)/height*100); if (!left) gradientendpointb.x = 100-gradientendpointb.x; if (!top) gradientendpointb.y = 100-gradientendpointb.y; } // tr.x = math.round(tr.x); tr.y = math.round(tr.y); return true; }, transform = function(tr, c, x, a) { 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]]}, aliasingfk = (a!=90 && a!=-90) ? (left ? -1 : 1) : 0; x = x[0] + '% ' + x[1] + '%'; that.css(v).transform(rotate(a) + translate(tr.x + aliasingfk, tr.y, ac), x); data.fpage.parent().css(v); 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.fpage.parent().transform(rotate(a) + translate(tr.x + df.x - mv.x, tr.y + df.y - mv.y, ac), x); if (data.opts.frontgradient) gradient(data.ashadow, point2d(left?100:0, top?100:0), point2d(gradientendpointa.x, gradientendpointa.y), [[gradientstartv, 'rgba(0,0,0,0)'], [((1-gradientstartv)*0.8)+gradientstartv, 'rgba(0,0,0,'+(0.2*gradientopacity)+')'], [1, 'rgba(255,255,255,'+(0.2*gradientopacity)+')']], 3, alpha); if (flipmethods._backgradient.call(that)) gradient(data.bshadow, point2d(left?0:100, top?0:100), point2d(gradientendpointb.x, gradientendpointb.y), [[0.8, 'rgba(0,0,0,0)'], [1, 'rgba(0,0,0,'+(0.3*gradientopacity)+')'], [1, 'rgba(0,0,0,0)']], 3); }; switch (point.corner) { case 'tl' : point.x = math.max(point.x, 1); compute(); transform(tr, [1,0,0,1], [100, 0], a); data.fpage.transform(translate(-height, -width, ac) + rotate(90-a*2) , '100% 100%'); folding.transform(rotate(90) + translate(0, -height, ac), '0% 0%'); break; case 'tr' : point.x = math.min(point.x, width-1); compute(); 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%'); folding.transform(rotate(270) + translate(-width, 0, ac), '0% 0%'); break; case 'bl' : point.x = math.max(point.x, 1); compute(); 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%'); folding.transform(rotate(270) + translate(-width, 0, ac), '0% 0%'); break; case 'br' : point.x = math.min(point.x, width-1); compute(); transform(point2d(-tr.x, -tr.y), [0,1,1,0], [0, 100], a); data.fpage.transform(rotate(90-a*2), '0% 0%'); folding.transform(rotate(90) + translate(0, -height, ac), '0% 0%'); break; } data.point = point; }, _movefoldingpage: function(bool) { var data = this.data().f, folding = flipmethods._foldingpage.call(this); if (folding) { if (bool) { if (!data.fpage.children()[data.ashadow? '1' : '0']) { flipmethods.setdata.call(this, {backparent: folding.parent()}); data.fpage.prepend(folding); } } else { if (data.backparent) data.backparent.prepend(folding); } } }, _showfoldedpage: function(c, animate) { var folding = flipmethods._foldingpage.call(this), dd = this.data(), data = dd.f; if (!data.point || data.point.corner!=c.corner) { var event = $.event('start'); this.trigger(event, [data.opts, c.corner]); if (event.isdefaultprevented()) return false; } if (folding) { if (animate) { 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); }}); } else { 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.bshadow) data.bshadow.show(); } return true; } return false; }, hide: function() { var data = this.data().f, folding = flipmethods._foldingpage.call(this); if ((--data.fparent.data().flips)===0) data.fparent.hide(); this.css({left: 0, top: 0, right: 'auto', bottom: 'auto'}).transform('', '0% 100%'); data.wrapper.transform('', '0% 100%'); data.fwrapper.hide(); if (data.bshadow) data.bshadow.hide(); folding.transform('', '0% 0%'); return this; }, hidefoldedpage: function(animate) { var data = this.data().f; if (!data.point) return; var that = this, p1 = data.point, hide = function() { data.point = null; that.flip('hide'); that.trigger('end', [false]); }; if (animate) { var p4 = flipmethods._c.call(this, p1.corner), 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, p2 = point2d(p1.x, p1.y+delta), p3 = point2d(p4.x, p4.y-delta); this.animatef({ from: 0, to: 1, frame: function(v) { var np = bezier(p1, p2, p3, p4, v); p1.x = np.x; p1.y = np.y; flipmethods._fold.call(that, p1); }, complete: hide, duration: 800, hiding: true }); } else { this.animatef(false); hide(); } }, turnpage: function(corner) { var that = this, data = this.data().f; 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), p4 = flipmethods._c2.call(this, corner.corner); this.trigger('flip'). animatef({ from: 0, to: 1, frame: function(v) { var np = bezier(p1, p1, p4, p4, v); corner.x = np.x; corner.y = np.y; flipmethods._showfoldedpage.call(that, corner); }, complete: function() { that.trigger('end', [true]); }, duration: data.opts.duration, turning: true }); data.corner = null; }, moving: function() { return 'effect' in this.data(); }, isturning: function() { return this.flip('moving') && this.data().effect.turning; }, _eventstart: function(e) { var data = this.data().f; if (!data.disabled && !this.flip('isturning')) { data.corner = flipmethods._corneractivated.call(this, e); if (data.corner && flipmethods._foldingpage.call(this, data.corner)) { flipmethods._movefoldingpage.call(this, true); this.trigger('pressed', [data.point]); return false; } else data.corner = null; } }, _eventmove: function(e) { var data = this.data().f; if (!data.disabled) { e = (istouch) ? e.originalevent.touches : [e]; if (data.corner) { var pos = data.parent.offset(); data.corner.x = e[0].pagex-pos.left; data.corner.y = e[0].pagey-pos.top; flipmethods._showfoldedpage.call(this, data.corner); } else if (!this.data().effect && this.is(':visible')) { // roll over var corner = flipmethods._corneractivated.call(this, e[0]); if (corner) { var origin = flipmethods._c.call(this, corner.corner, data.opts.cornersize/2); corner.x = origin.x; corner.y = origin.y; flipmethods._showfoldedpage.call(this, corner, true); } else flipmethods.hidefoldedpage.call(this, true); } } }, _eventend: function() { var data = this.data().f; if (!data.disabled && data.point) { var event = $.event('released'); this.trigger(event, [data.point]); if (!event.isdefaultprevented()) flipmethods.hidefoldedpage.call(this, true); } data.corner = null; }, disable: function(disable) { flipmethods.setdata.call(this, {'disabled': disable}); return this; } }, cla = function(that, methods, args) { if (!args[0] || typeof(args[0])=='object') return methods.init.apply(that, args); else if(methods[args[0]] && args[0].tostring().substr(0, 1)!='_') return methods[args[0]].apply(that, array.prototype.slice.call(args, 1)); else throw args[0] + ' is an invalid value'; }; $.extend($.fn, { flip: function(req, opts) { return cla(this, flipmethods, arguments); }, turn: function(req) { return cla(this, turnmethods, arguments); }, transform: function(transform, origin) { var properties = {}; if (origin) properties[vendor+'transform-origin'] = origin; properties[vendor+'transform'] = transform; return this.css(properties); }, animatef: function(point) { var data = this.data(); if (data.effect) clearinterval(data.effect.handle); if (point) { if (!point.to.length) point.to = [point.to]; 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; }; var j, diff = [], len = point.to.length, that = this, fps = point.fps || 30, time = - fps, f = function() { var j, v = []; time = math.min(point.duration, time + fps); for (j = 0; j < len; j++) v.push(point.easing(1, time, point.from[j], diff[j], point.duration)); point.frame((len==1) ? v[0] : v); if (time==point.duration) { clearinterval(data.effect.handle); delete data['effect']; that.data(data); if (point.complete) point.complete(); } }; for (j = 0; j < len; j++) diff.push(point.to[j] - point.from[j]); data.effect = point; data.effect.handle = setinterval(f, fps); this.data(data); f(); } else { delete data['effect']; } } }); $.istouch = istouch; })(jquery);