From af6fc1185bea59d962d45011ac60ca62a6c00e2d Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Mon, 20 Apr 2015 12:40:51 +0000 Subject: [PATCH] --- js/libs/fluidbook/fluidbook.resize.js | 3 +- js/widget.js | 694 +++++++++++++------------- 2 files changed, 348 insertions(+), 349 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js index c5419433..7bc423f2 100644 --- a/js/libs/fluidbook/fluidbook.resize.js +++ b/js/libs/fluidbook/fluidbook.resize.js @@ -331,5 +331,4 @@ FluidbookResize.prototype = { this.fluidbook.pageTransition(); } } -}; - +}; \ No newline at end of file diff --git a/js/widget.js b/js/widget.js index 206479bd..993353e6 100644 --- a/js/widget.js +++ b/js/widget.js @@ -1,359 +1,359 @@ -$(function() { - _GET = parseGet({ - background: 'transparent', - target: '_blank', - link: '../index.html', - time: 4 - }); - _GET['time'] = Math.max(1.5, _GET['time']); - - $("body").css('background-color', getColor(_GET['background'])); - - $(window).resize(function() { - resize(); - }); - - var widget = $("#widget").fluidbookWidget(Math.max(0, DATAS.widgetStart), Math.min(DATAS.pages, DATAS.widgetEnd)); - $(document).on('click', function() { - window.open(_GET['link'], _GET['target'], 'width=' + screen.width + ',height=' + screen.height + ',status=0,toolbar=0,menubar=0,scrollbars=1'); - }); +$(function () { + // Todo : manage other than html extensions + _GET = parseGet({ + background: 'transparent', + target: '_blank', + link: '../index.html', + time: 4 + }); + _GET['time'] = Math.max(1.5, _GET['time']); + + $("body").css('background-color', getColor(_GET['background'])); + + $(window).resize(function () { + resize(); + }); + + var widget = $("#widget").fluidbookWidget(Math.max(0, DATAS.widgetStart), Math.min(DATAS.pages, DATAS.widgetEnd)); + $(document).on('click', function () { + window.open(_GET['link'], _GET['target'], 'width=' + screen.width + ',height=' + screen.height + ',status=0,toolbar=0,menubar=0,scrollbars=1'); + }); }); -(function($) { - function FluidbookWidget(e, from, to) { - this.transition = 'none'; - if (Modernizr.csstransforms) { - this.transition = '2d'; - } - if (Modernizr.csstransforms3d) { - this.transition = '3d'; - } - - this.started = false; - this.e = e; - this.from = from; - if (this.from % 2 == 1) { - this.from--; - } - this.to = to; - if (this.from % 2 == 0) { - this.to++; - } - this.to = Math.min(DATAS.pages, this.to); - this.currentPage = 0; - this.dir = 1; - - this.bookWidth; - this.bookHeight; - this.init(); - - this.transitionendevents = ['transitionend', 'mozTransitionEnd', 'webkitTransitionEnd', 'oTransitionEnd', 'msTransitionEnd'].join(' '); - } - - FluidbookWidget.prototype = { - init: function() { - this.e.append('
'); - - // Init pages - for (i = this.from; i <= this.to; i++) { - var p = i; - if (p % 2 == 1) { - p--; - } - var pclass = 'p'; - var shade = ''; - var side = 'left' - if (i % 2 == 1) { - side = 'right'; - } - if (i == 0) { - pclass += ' loaded'; - } else { - - shade = '
'; - } - - pclass += ' ' + side; - - - this.e.append('
' + shade + '
'); - } - - this.preloadImages(); - }, - preloadImages: function() { - var $this = this; - var p = this.e.find('.p:not(.loaded)').first(); - if (p.length == 0) { - this.endLoading(); - return; - } - var page = $(p).attr('data-page'); - var image = new Image(); - $(image).one('load error', function() { - $(p).append(this); - $(p).addClass('loaded'); - $this.preloadImages(); - }); - image.src = 'data/background/36/t' + page + '.jpg'; - if (image.complete) { - $(p).append(image); - $(p).addClass('loaded'); - this.preloadImages(); - } - }, - endLoading: function() { - if (this.started) { - return; - } - this.started = true; - this.e.find('.p').hide(); - - - var firstImage = $('.p>img').first().get(0); - - this.bookWidth = firstImage.width * 2; - this.bookHeight = firstImage.height; - - - - $("#widget").css({ - width: this.bookWidth, - minWidth: this.bookWidth, - maxWidth: this.bookWidth, - height: this.bookHeight, - minHeight: this.bookHeight, - maxHeight: this.bookHeight - }); - - $(".p .shade img").css({ - width: this.bookWidth / 6, - height: this.bookHeight - }); - - $(".p .shade").css({ - width: this.bookWidth / 2, - height: this.bookHeight - }) - - $(".p").css({ - width: this.bookWidth / 2, - height: this.bookHeight - }) - - - this.gotoPage(0, false); - var $this = this; - setInterval(function() { - if ($this.animating) { - return; - } - $this.goNextPage(); - }, _GET['time'] * 1000); - - $("#container:hidden").fadeIn(); - this.resize(); - }, - gotoPage: function(page, transition) { - this.resize(); - var $this = this; - this.animating = true; - var leftPage = $('.p[data-page=' + page + ']'); - var rightPage = $('.p[data-page=' + (page + 1) + ']'); - - if (!transition || this.transition == 'none') { - $("#nextDoublePage .p,#currentDoublePage .p").hide().appendTo(this.e); - $("#currentDoublePage").append($(leftPage)).append($(rightPage)); - $(leftPage).show(); - $(rightPage).show(); - $(".p.right").css({ - left: this.bookWidth / 2 - }); - $("#currentDoublePage,#nextDoublePage").css({ - x: 0, - left: 0 - }); - - $("#nextDoublePage").remove(); - this.animating = false; - } else { - if (this.transition == '2d') { - $("#widget").css('overflow', 'hidden'); - this.e.append('
'); - $(leftPage).show(); - $(rightPage).show(); - $("#nextDoublePage").append($(leftPage)).append($(rightPage)); - $(".p.right").css({ - left: this.bookWidth / 2 - }); - - if (Modernizr.csstransitions) { - $("#nextDoublePage").css({ - x: this.bookWidth * this.dir - }); - $("#currentDoublePage").transition({ - x: this.bookWidth * this.dir * -1 - }, 1000); - $("#nextDoublePage").transition({ - x: 0 - }, 1000, function() { - $this.gotoPage(page, false) - }); - } else { - $("#nextDoublePage").css({ - left: this.bookWidth * this.dir - }); - $("#currentDoublePage").animate({ - left: this.bookWidth * this.dir * -1 - }, 1000); - $("#nextDoublePage").animate({ - left: 0 - }, 1000, function() { - $this.gotoPage(page, false) - }); - } - } - else if (this.transition == '3d') { - $("#widget").css('overflow', 'visible'); - var nextFromClass; - if (this.dir == 1) { - nextFromClass = 'next'; - } else { - nextFromClass = 'prev'; - } - - - this.e.append('
'); - - $("#currentDoublePage .p").hide().appendTo(this.e); - var leftTurn, rightTurn; - if (this.dir == 1) { - leftPage = $('.p[data-page=' + this.currentPage + ']'); - rightPage = $('.p[data-page=' + (page + 1) + ']'); - leftTurn = $('.p[data-page=' + page + ']'); - rightTurn = $('.p[data-page=' + (this.currentPage + 1) + ']'); - } else { - leftPage = $('.p[data-page=' + page + ']'); - rightPage = $('.p[data-page=' + (this.currentPage + 1) + ']'); - leftTurn = $('.p[data-page=' + this.currentPage + ']'); - rightTurn = $('.p[data-page=' + (page + 1) + ']'); - } - - $(leftPage).show(); - $(rightPage).show(); - $(leftTurn).show(); - $(rightTurn).show(); - - $("#currentDoublePage").append($(leftPage)).append($(rightPage)); - if (this.dir == -1) { - $("#nextDoublePage").append($(leftTurn)).append($(rightTurn)); - } else { - $("#nextDoublePage").append($(rightTurn)).append($(leftTurn)); - } - $(".p.right").css({ - left: this.bookWidth / 2 - }); - - $("#nextDoublePage").addClass(nextFromClass + 'end'); - - $("#nextDoublePage").one(this.transitionendevents, function() { - $this.animating = false; - $this.gotoPage(page, false); - }); - } - } - - this.currentPage = page; - }, - goNextPage: function() { - var p; - if (this.dir == 1) { - p = this.currentPage + 2; - if (p > this.to) { - p -= 4; - this.dir = -1; - } - } else { - p = this.currentPage - 2; - if (p < this.from) { - p += 4; - this.dir = 1; - } - } - - this.gotoPage(p, true) - - }, - resize: function() { - var w = $(window).width(); - var h = $(window).height(); - - var s = Math.min((w * 0.95) / this.bookWidth, (h * 0.95) / this.bookHeight); - - var iw = this.bookWidth * s; - var ih = this.bookHeight * s; - - var x = (w - iw) / 2; - var y = (h - ih) / 2; - - $("body,#container").css({ - width: w, - maxWidth: w, - minWidth: w, - height: h, - maxHeight: h, - minHeight: h - }); - $("#nextDoublePage").css({ - width: this.bookWidth / 2, - maxWidth: this.bookWidth / 2, - minWidth: this.bookWidth / 2, - height: this.bookHeight, - maxHeight: this.bookHeight, - minHeight: this.bookHeight, - overflow: 'hidden' - }) - - this.e.css({ - transformOrigin: '0% 0%', - x: x, - y: y, - scale: s - }); - } - }; - - jQuery.fn.fluidbookWidget = function(from, to) { - return this.each(function() { - var $this = $(this); - widget = new FluidbookWidget($this, from, to); - }) - }; +(function ($) { + function FluidbookWidget(e, from, to) { + this.transition = 'none'; + if (Modernizr.csstransforms) { + this.transition = '2d'; + } + if (Modernizr.csstransforms3d) { + this.transition = '3d'; + } + + this.started = false; + this.e = e; + this.from = from; + if (this.from % 2 == 1) { + this.from--; + } + this.to = to; + if (this.from % 2 == 0) { + this.to++; + } + this.to = Math.min(DATAS.pages, this.to); + this.currentPage = 0; + this.dir = 1; + + this.bookWidth; + this.bookHeight; + this.init(); + + this.transitionendevents = ['transitionend', 'mozTransitionEnd', 'webkitTransitionEnd', 'oTransitionEnd', 'msTransitionEnd'].join(' '); + } + + FluidbookWidget.prototype = { + init: function () { + this.e.append('
'); + + // Init pages + for (i = this.from; i <= this.to; i++) { + var p = i; + if (p % 2 == 1) { + p--; + } + var pclass = 'p'; + var shade = ''; + var side = 'left' + if (i % 2 == 1) { + side = 'right'; + } + if (i == 0) { + pclass += ' loaded'; + } else { + + shade = '
'; + } + + pclass += ' ' + side; + + + this.e.append('
' + shade + '
'); + } + + this.preloadImages(); + }, + preloadImages: function () { + var $this = this; + var p = this.e.find('.p:not(.loaded)').first(); + if (p.length == 0) { + this.endLoading(); + return; + } + var page = $(p).attr('data-page'); + var image = new Image(); + $(image).one('load error', function () { + $(p).append(this); + $(p).addClass('loaded'); + $this.preloadImages(); + }); + image.src = 'data/background/36/t' + page + '.jpg'; + if (image.complete) { + $(p).append(image); + $(p).addClass('loaded'); + this.preloadImages(); + } + }, + endLoading: function () { + if (this.started) { + return; + } + this.started = true; + this.e.find('.p').hide(); + + + var firstImage = $('.p>img').first().get(0); + + this.bookWidth = firstImage.width * 2; + this.bookHeight = firstImage.height; + + + $("#widget").css({ + width: this.bookWidth, + minWidth: this.bookWidth, + maxWidth: this.bookWidth, + height: this.bookHeight, + minHeight: this.bookHeight, + maxHeight: this.bookHeight + }); + + $(".p .shade img").css({ + width: this.bookWidth / 6, + height: this.bookHeight + }); + + $(".p .shade").css({ + width: this.bookWidth / 2, + height: this.bookHeight + }) + + $(".p").css({ + width: this.bookWidth / 2, + height: this.bookHeight + }) + + + this.gotoPage(0, false); + var $this = this; + setInterval(function () { + if ($this.animating) { + return; + } + $this.goNextPage(); + }, _GET['time'] * 1000); + + $("#container:hidden").fadeIn(); + this.resize(); + }, + gotoPage: function (page, transition) { + this.resize(); + var $this = this; + this.animating = true; + var leftPage = $('.p[data-page=' + page + ']'); + var rightPage = $('.p[data-page=' + (page + 1) + ']'); + + if (!transition || this.transition == 'none') { + $("#nextDoublePage .p,#currentDoublePage .p").hide().appendTo(this.e); + $("#currentDoublePage").append($(leftPage)).append($(rightPage)); + $(leftPage).show(); + $(rightPage).show(); + $(".p.right").css({ + left: this.bookWidth / 2 + }); + $("#currentDoublePage,#nextDoublePage").css({ + x: 0, + left: 0 + }); + + $("#nextDoublePage").remove(); + this.animating = false; + } else { + if (this.transition == '2d') { + $("#widget").css('overflow', 'hidden'); + this.e.append('
'); + $(leftPage).show(); + $(rightPage).show(); + $("#nextDoublePage").append($(leftPage)).append($(rightPage)); + $(".p.right").css({ + left: this.bookWidth / 2 + }); + + if (Modernizr.csstransitions) { + $("#nextDoublePage").css({ + x: this.bookWidth * this.dir + }); + $("#currentDoublePage").transition({ + x: this.bookWidth * this.dir * -1 + }, 1000); + $("#nextDoublePage").transition({ + x: 0 + }, 1000, function () { + $this.gotoPage(page, false) + }); + } else { + $("#nextDoublePage").css({ + left: this.bookWidth * this.dir + }); + $("#currentDoublePage").animate({ + left: this.bookWidth * this.dir * -1 + }, 1000); + $("#nextDoublePage").animate({ + left: 0 + }, 1000, function () { + $this.gotoPage(page, false) + }); + } + } + else if (this.transition == '3d') { + $("#widget").css('overflow', 'visible'); + var nextFromClass; + if (this.dir == 1) { + nextFromClass = 'next'; + } else { + nextFromClass = 'prev'; + } + + + this.e.append('
'); + + $("#currentDoublePage .p").hide().appendTo(this.e); + var leftTurn, rightTurn; + if (this.dir == 1) { + leftPage = $('.p[data-page=' + this.currentPage + ']'); + rightPage = $('.p[data-page=' + (page + 1) + ']'); + leftTurn = $('.p[data-page=' + page + ']'); + rightTurn = $('.p[data-page=' + (this.currentPage + 1) + ']'); + } else { + leftPage = $('.p[data-page=' + page + ']'); + rightPage = $('.p[data-page=' + (this.currentPage + 1) + ']'); + leftTurn = $('.p[data-page=' + this.currentPage + ']'); + rightTurn = $('.p[data-page=' + (page + 1) + ']'); + } + + $(leftPage).show(); + $(rightPage).show(); + $(leftTurn).show(); + $(rightTurn).show(); + + $("#currentDoublePage").append($(leftPage)).append($(rightPage)); + if (this.dir == -1) { + $("#nextDoublePage").append($(leftTurn)).append($(rightTurn)); + } else { + $("#nextDoublePage").append($(rightTurn)).append($(leftTurn)); + } + $(".p.right").css({ + left: this.bookWidth / 2 + }); + + $("#nextDoublePage").addClass(nextFromClass + 'end'); + + $("#nextDoublePage").one(this.transitionendevents, function () { + $this.animating = false; + $this.gotoPage(page, false); + }); + } + } + + this.currentPage = page; + }, + goNextPage: function () { + var p; + if (this.dir == 1) { + p = this.currentPage + 2; + if (p > this.to) { + p -= 4; + this.dir = -1; + } + } else { + p = this.currentPage - 2; + if (p < this.from) { + p += 4; + this.dir = 1; + } + } + + this.gotoPage(p, true) + + }, + resize: function () { + var w = $(window).width(); + var h = $(window).height(); + + var s = Math.min((w * 0.95) / this.bookWidth, (h * 0.95) / this.bookHeight); + + var iw = this.bookWidth * s; + var ih = this.bookHeight * s; + + var x = (w - iw) / 2; + var y = (h - ih) / 2; + + $("body,#container").css({ + width: w, + maxWidth: w, + minWidth: w, + height: h, + maxHeight: h, + minHeight: h + }); + $("#nextDoublePage").css({ + width: this.bookWidth / 2, + maxWidth: this.bookWidth / 2, + minWidth: this.bookWidth / 2, + height: this.bookHeight, + maxHeight: this.bookHeight, + minHeight: this.bookHeight, + overflow: 'hidden' + }) + + this.e.css({ + transformOrigin: '0% 0%', + x: x, + y: y, + scale: s + }); + } + }; + + jQuery.fn.fluidbookWidget = function (from, to) { + return this.each(function () { + var $this = $(this); + widget = new FluidbookWidget($this, from, to); + }) + }; })(jQuery); function parseGet(res) { - if (res == undefined) { - res = {}; - } - var couples = window.location.search.substr(1).split('&'); - var couple = new Array(); - for (var i = 0; i < couples.length; i++) { - couple = couples[i].split('='); - res[couple[0]] = couple[1]; - } - return res; + if (res == undefined) { + res = {}; + } + var couples = window.location.search.substr(1).split('&'); + var couple = new Array(); + for (var i = 0; i < couples.length; i++) { + couple = couples[i].split('='); + res[couple[0]] = couple[1]; + } + return res; } function getColor(color) { - if (color == 'transparent' || color.substr(0, 3) == 'rgb') { - return color; - } - if (color.length == 6) { - return '#' + color; - } - return color; + if (color == 'transparent' || color.substr(0, 3) == 'rgb') { + return color; + } + if (color.length == 6) { + return '#' + color; + } + return color; } function resize() { - widget.resize(); + widget.resize(); } \ No newline at end of file -- 2.39.5