-$(function() {\r
- _GET = parseGet({\r
- background: 'transparent',\r
- target: '_blank',\r
- link: '../index.html',\r
- time: 4\r
- });\r
- _GET['time'] = Math.max(1.5, _GET['time']);\r
-\r
- $("body").css('background-color', getColor(_GET['background']));\r
-\r
- $(window).resize(function() {\r
- resize();\r
- });\r
-\r
- var widget = $("#widget").fluidbookWidget(Math.max(0, DATAS.widgetStart), Math.min(DATAS.pages, DATAS.widgetEnd));\r
- $(document).on('click', function() {\r
- window.open(_GET['link'], _GET['target'], 'width=' + screen.width + ',height=' + screen.height + ',status=0,toolbar=0,menubar=0,scrollbars=1');\r
- });\r
+$(function () {\r
+ // Todo : manage other than html extensions\r
+ _GET = parseGet({\r
+ background: 'transparent',\r
+ target: '_blank',\r
+ link: '../index.html',\r
+ time: 4\r
+ });\r
+ _GET['time'] = Math.max(1.5, _GET['time']);\r
+\r
+ $("body").css('background-color', getColor(_GET['background']));\r
+\r
+ $(window).resize(function () {\r
+ resize();\r
+ });\r
+\r
+ var widget = $("#widget").fluidbookWidget(Math.max(0, DATAS.widgetStart), Math.min(DATAS.pages, DATAS.widgetEnd));\r
+ $(document).on('click', function () {\r
+ window.open(_GET['link'], _GET['target'], 'width=' + screen.width + ',height=' + screen.height + ',status=0,toolbar=0,menubar=0,scrollbars=1');\r
+ });\r
});\r
\r
-(function($) {\r
- function FluidbookWidget(e, from, to) {\r
- this.transition = 'none';\r
- if (Modernizr.csstransforms) {\r
- this.transition = '2d';\r
- }\r
- if (Modernizr.csstransforms3d) {\r
- this.transition = '3d';\r
- }\r
-\r
- this.started = false;\r
- this.e = e;\r
- this.from = from;\r
- if (this.from % 2 == 1) {\r
- this.from--;\r
- }\r
- this.to = to;\r
- if (this.from % 2 == 0) {\r
- this.to++;\r
- }\r
- this.to = Math.min(DATAS.pages, this.to);\r
- this.currentPage = 0;\r
- this.dir = 1;\r
-\r
- this.bookWidth;\r
- this.bookHeight;\r
- this.init();\r
-\r
- this.transitionendevents = ['transitionend', 'mozTransitionEnd', 'webkitTransitionEnd', 'oTransitionEnd', 'msTransitionEnd'].join(' ');\r
- }\r
-\r
- FluidbookWidget.prototype = {\r
- init: function() {\r
- this.e.append('<div id="currentDoublePage"></div>');\r
-\r
- // Init pages\r
- for (i = this.from; i <= this.to; i++) {\r
- var p = i;\r
- if (p % 2 == 1) {\r
- p--;\r
- }\r
- var pclass = 'p';\r
- var shade = '';\r
- var side = 'left'\r
- if (i % 2 == 1) {\r
- side = 'right';\r
- }\r
- if (i == 0) {\r
- pclass += ' loaded';\r
- } else {\r
-\r
- shade = '<div class="shade"><img src="images/shade' + side + '.png" /></div>';\r
- }\r
-\r
- pclass += ' ' + side;\r
-\r
-\r
- this.e.append('<div class="' + pclass + '" data-page="' + i + '">' + shade + '</div>');\r
- }\r
-\r
- this.preloadImages();\r
- },\r
- preloadImages: function() {\r
- var $this = this;\r
- var p = this.e.find('.p:not(.loaded)').first();\r
- if (p.length == 0) {\r
- this.endLoading();\r
- return;\r
- }\r
- var page = $(p).attr('data-page');\r
- var image = new Image();\r
- $(image).one('load error', function() {\r
- $(p).append(this);\r
- $(p).addClass('loaded');\r
- $this.preloadImages();\r
- });\r
- image.src = 'data/background/36/t' + page + '.jpg';\r
- if (image.complete) {\r
- $(p).append(image);\r
- $(p).addClass('loaded');\r
- this.preloadImages();\r
- }\r
- },\r
- endLoading: function() {\r
- if (this.started) {\r
- return;\r
- }\r
- this.started = true;\r
- this.e.find('.p').hide();\r
-\r
-\r
- var firstImage = $('.p>img').first().get(0);\r
-\r
- this.bookWidth = firstImage.width * 2;\r
- this.bookHeight = firstImage.height;\r
-\r
-\r
-\r
- $("#widget").css({\r
- width: this.bookWidth,\r
- minWidth: this.bookWidth,\r
- maxWidth: this.bookWidth,\r
- height: this.bookHeight,\r
- minHeight: this.bookHeight,\r
- maxHeight: this.bookHeight\r
- });\r
-\r
- $(".p .shade img").css({\r
- width: this.bookWidth / 6,\r
- height: this.bookHeight\r
- });\r
-\r
- $(".p .shade").css({\r
- width: this.bookWidth / 2,\r
- height: this.bookHeight\r
- })\r
-\r
- $(".p").css({\r
- width: this.bookWidth / 2,\r
- height: this.bookHeight\r
- })\r
-\r
-\r
- this.gotoPage(0, false);\r
- var $this = this;\r
- setInterval(function() {\r
- if ($this.animating) {\r
- return;\r
- }\r
- $this.goNextPage();\r
- }, _GET['time'] * 1000);\r
-\r
- $("#container:hidden").fadeIn();\r
- this.resize();\r
- },\r
- gotoPage: function(page, transition) {\r
- this.resize();\r
- var $this = this;\r
- this.animating = true;\r
- var leftPage = $('.p[data-page=' + page + ']');\r
- var rightPage = $('.p[data-page=' + (page + 1) + ']');\r
-\r
- if (!transition || this.transition == 'none') {\r
- $("#nextDoublePage .p,#currentDoublePage .p").hide().appendTo(this.e);\r
- $("#currentDoublePage").append($(leftPage)).append($(rightPage));\r
- $(leftPage).show();\r
- $(rightPage).show();\r
- $(".p.right").css({\r
- left: this.bookWidth / 2\r
- });\r
- $("#currentDoublePage,#nextDoublePage").css({\r
- x: 0,\r
- left: 0\r
- });\r
-\r
- $("#nextDoublePage").remove();\r
- this.animating = false;\r
- } else {\r
- if (this.transition == '2d') {\r
- $("#widget").css('overflow', 'hidden');\r
- this.e.append('<div id="nextDoublePage"></div>');\r
- $(leftPage).show();\r
- $(rightPage).show();\r
- $("#nextDoublePage").append($(leftPage)).append($(rightPage));\r
- $(".p.right").css({\r
- left: this.bookWidth / 2\r
- });\r
-\r
- if (Modernizr.csstransitions) {\r
- $("#nextDoublePage").css({\r
- x: this.bookWidth * this.dir\r
- });\r
- $("#currentDoublePage").transition({\r
- x: this.bookWidth * this.dir * -1\r
- }, 1000);\r
- $("#nextDoublePage").transition({\r
- x: 0\r
- }, 1000, function() {\r
- $this.gotoPage(page, false)\r
- });\r
- } else {\r
- $("#nextDoublePage").css({\r
- left: this.bookWidth * this.dir\r
- });\r
- $("#currentDoublePage").animate({\r
- left: this.bookWidth * this.dir * -1\r
- }, 1000);\r
- $("#nextDoublePage").animate({\r
- left: 0\r
- }, 1000, function() {\r
- $this.gotoPage(page, false)\r
- });\r
- }\r
- }\r
- else if (this.transition == '3d') {\r
- $("#widget").css('overflow', 'visible');\r
- var nextFromClass;\r
- if (this.dir == 1) {\r
- nextFromClass = 'next';\r
- } else {\r
- nextFromClass = 'prev';\r
- }\r
-\r
-\r
- this.e.append('<div id="nextDoublePage" style="left:' + (this.bookWidth / 2) + 'px" class="' + nextFromClass + 'start _3d"></div>');\r
-\r
- $("#currentDoublePage .p").hide().appendTo(this.e);\r
- var leftTurn, rightTurn;\r
- if (this.dir == 1) {\r
- leftPage = $('.p[data-page=' + this.currentPage + ']');\r
- rightPage = $('.p[data-page=' + (page + 1) + ']');\r
- leftTurn = $('.p[data-page=' + page + ']');\r
- rightTurn = $('.p[data-page=' + (this.currentPage + 1) + ']');\r
- } else {\r
- leftPage = $('.p[data-page=' + page + ']');\r
- rightPage = $('.p[data-page=' + (this.currentPage + 1) + ']');\r
- leftTurn = $('.p[data-page=' + this.currentPage + ']');\r
- rightTurn = $('.p[data-page=' + (page + 1) + ']');\r
- }\r
-\r
- $(leftPage).show();\r
- $(rightPage).show();\r
- $(leftTurn).show();\r
- $(rightTurn).show();\r
-\r
- $("#currentDoublePage").append($(leftPage)).append($(rightPage));\r
- if (this.dir == -1) {\r
- $("#nextDoublePage").append($(leftTurn)).append($(rightTurn));\r
- } else {\r
- $("#nextDoublePage").append($(rightTurn)).append($(leftTurn));\r
- }\r
- $(".p.right").css({\r
- left: this.bookWidth / 2\r
- });\r
-\r
- $("#nextDoublePage").addClass(nextFromClass + 'end');\r
-\r
- $("#nextDoublePage").one(this.transitionendevents, function() {\r
- $this.animating = false;\r
- $this.gotoPage(page, false);\r
- });\r
- }\r
- }\r
-\r
- this.currentPage = page;\r
- },\r
- goNextPage: function() {\r
- var p;\r
- if (this.dir == 1) {\r
- p = this.currentPage + 2;\r
- if (p > this.to) {\r
- p -= 4;\r
- this.dir = -1;\r
- }\r
- } else {\r
- p = this.currentPage - 2;\r
- if (p < this.from) {\r
- p += 4;\r
- this.dir = 1;\r
- }\r
- }\r
-\r
- this.gotoPage(p, true)\r
-\r
- },\r
- resize: function() {\r
- var w = $(window).width();\r
- var h = $(window).height();\r
-\r
- var s = Math.min((w * 0.95) / this.bookWidth, (h * 0.95) / this.bookHeight);\r
-\r
- var iw = this.bookWidth * s;\r
- var ih = this.bookHeight * s;\r
-\r
- var x = (w - iw) / 2;\r
- var y = (h - ih) / 2;\r
-\r
- $("body,#container").css({\r
- width: w,\r
- maxWidth: w,\r
- minWidth: w,\r
- height: h,\r
- maxHeight: h,\r
- minHeight: h\r
- });\r
- $("#nextDoublePage").css({\r
- width: this.bookWidth / 2,\r
- maxWidth: this.bookWidth / 2,\r
- minWidth: this.bookWidth / 2,\r
- height: this.bookHeight,\r
- maxHeight: this.bookHeight,\r
- minHeight: this.bookHeight,\r
- overflow: 'hidden'\r
- })\r
-\r
- this.e.css({\r
- transformOrigin: '0% 0%',\r
- x: x,\r
- y: y,\r
- scale: s\r
- });\r
- }\r
- };\r
-\r
- jQuery.fn.fluidbookWidget = function(from, to) {\r
- return this.each(function() {\r
- var $this = $(this);\r
- widget = new FluidbookWidget($this, from, to);\r
- })\r
- };\r
+(function ($) {\r
+ function FluidbookWidget(e, from, to) {\r
+ this.transition = 'none';\r
+ if (Modernizr.csstransforms) {\r
+ this.transition = '2d';\r
+ }\r
+ if (Modernizr.csstransforms3d) {\r
+ this.transition = '3d';\r
+ }\r
+\r
+ this.started = false;\r
+ this.e = e;\r
+ this.from = from;\r
+ if (this.from % 2 == 1) {\r
+ this.from--;\r
+ }\r
+ this.to = to;\r
+ if (this.from % 2 == 0) {\r
+ this.to++;\r
+ }\r
+ this.to = Math.min(DATAS.pages, this.to);\r
+ this.currentPage = 0;\r
+ this.dir = 1;\r
+\r
+ this.bookWidth;\r
+ this.bookHeight;\r
+ this.init();\r
+\r
+ this.transitionendevents = ['transitionend', 'mozTransitionEnd', 'webkitTransitionEnd', 'oTransitionEnd', 'msTransitionEnd'].join(' ');\r
+ }\r
+\r
+ FluidbookWidget.prototype = {\r
+ init: function () {\r
+ this.e.append('<div id="currentDoublePage"></div>');\r
+\r
+ // Init pages\r
+ for (i = this.from; i <= this.to; i++) {\r
+ var p = i;\r
+ if (p % 2 == 1) {\r
+ p--;\r
+ }\r
+ var pclass = 'p';\r
+ var shade = '';\r
+ var side = 'left'\r
+ if (i % 2 == 1) {\r
+ side = 'right';\r
+ }\r
+ if (i == 0) {\r
+ pclass += ' loaded';\r
+ } else {\r
+\r
+ shade = '<div class="shade"><img src="images/shade' + side + '.png" /></div>';\r
+ }\r
+\r
+ pclass += ' ' + side;\r
+\r
+\r
+ this.e.append('<div class="' + pclass + '" data-page="' + i + '">' + shade + '</div>');\r
+ }\r
+\r
+ this.preloadImages();\r
+ },\r
+ preloadImages: function () {\r
+ var $this = this;\r
+ var p = this.e.find('.p:not(.loaded)').first();\r
+ if (p.length == 0) {\r
+ this.endLoading();\r
+ return;\r
+ }\r
+ var page = $(p).attr('data-page');\r
+ var image = new Image();\r
+ $(image).one('load error', function () {\r
+ $(p).append(this);\r
+ $(p).addClass('loaded');\r
+ $this.preloadImages();\r
+ });\r
+ image.src = 'data/background/36/t' + page + '.jpg';\r
+ if (image.complete) {\r
+ $(p).append(image);\r
+ $(p).addClass('loaded');\r
+ this.preloadImages();\r
+ }\r
+ },\r
+ endLoading: function () {\r
+ if (this.started) {\r
+ return;\r
+ }\r
+ this.started = true;\r
+ this.e.find('.p').hide();\r
+\r
+\r
+ var firstImage = $('.p>img').first().get(0);\r
+\r
+ this.bookWidth = firstImage.width * 2;\r
+ this.bookHeight = firstImage.height;\r
+\r
+\r
+ $("#widget").css({\r
+ width: this.bookWidth,\r
+ minWidth: this.bookWidth,\r
+ maxWidth: this.bookWidth,\r
+ height: this.bookHeight,\r
+ minHeight: this.bookHeight,\r
+ maxHeight: this.bookHeight\r
+ });\r
+\r
+ $(".p .shade img").css({\r
+ width: this.bookWidth / 6,\r
+ height: this.bookHeight\r
+ });\r
+\r
+ $(".p .shade").css({\r
+ width: this.bookWidth / 2,\r
+ height: this.bookHeight\r
+ })\r
+\r
+ $(".p").css({\r
+ width: this.bookWidth / 2,\r
+ height: this.bookHeight\r
+ })\r
+\r
+\r
+ this.gotoPage(0, false);\r
+ var $this = this;\r
+ setInterval(function () {\r
+ if ($this.animating) {\r
+ return;\r
+ }\r
+ $this.goNextPage();\r
+ }, _GET['time'] * 1000);\r
+\r
+ $("#container:hidden").fadeIn();\r
+ this.resize();\r
+ },\r
+ gotoPage: function (page, transition) {\r
+ this.resize();\r
+ var $this = this;\r
+ this.animating = true;\r
+ var leftPage = $('.p[data-page=' + page + ']');\r
+ var rightPage = $('.p[data-page=' + (page + 1) + ']');\r
+\r
+ if (!transition || this.transition == 'none') {\r
+ $("#nextDoublePage .p,#currentDoublePage .p").hide().appendTo(this.e);\r
+ $("#currentDoublePage").append($(leftPage)).append($(rightPage));\r
+ $(leftPage).show();\r
+ $(rightPage).show();\r
+ $(".p.right").css({\r
+ left: this.bookWidth / 2\r
+ });\r
+ $("#currentDoublePage,#nextDoublePage").css({\r
+ x: 0,\r
+ left: 0\r
+ });\r
+\r
+ $("#nextDoublePage").remove();\r
+ this.animating = false;\r
+ } else {\r
+ if (this.transition == '2d') {\r
+ $("#widget").css('overflow', 'hidden');\r
+ this.e.append('<div id="nextDoublePage"></div>');\r
+ $(leftPage).show();\r
+ $(rightPage).show();\r
+ $("#nextDoublePage").append($(leftPage)).append($(rightPage));\r
+ $(".p.right").css({\r
+ left: this.bookWidth / 2\r
+ });\r
+\r
+ if (Modernizr.csstransitions) {\r
+ $("#nextDoublePage").css({\r
+ x: this.bookWidth * this.dir\r
+ });\r
+ $("#currentDoublePage").transition({\r
+ x: this.bookWidth * this.dir * -1\r
+ }, 1000);\r
+ $("#nextDoublePage").transition({\r
+ x: 0\r
+ }, 1000, function () {\r
+ $this.gotoPage(page, false)\r
+ });\r
+ } else {\r
+ $("#nextDoublePage").css({\r
+ left: this.bookWidth * this.dir\r
+ });\r
+ $("#currentDoublePage").animate({\r
+ left: this.bookWidth * this.dir * -1\r
+ }, 1000);\r
+ $("#nextDoublePage").animate({\r
+ left: 0\r
+ }, 1000, function () {\r
+ $this.gotoPage(page, false)\r
+ });\r
+ }\r
+ }\r
+ else if (this.transition == '3d') {\r
+ $("#widget").css('overflow', 'visible');\r
+ var nextFromClass;\r
+ if (this.dir == 1) {\r
+ nextFromClass = 'next';\r
+ } else {\r
+ nextFromClass = 'prev';\r
+ }\r
+\r
+\r
+ this.e.append('<div id="nextDoublePage" style="left:' + (this.bookWidth / 2) + 'px" class="' + nextFromClass + 'start _3d"></div>');\r
+\r
+ $("#currentDoublePage .p").hide().appendTo(this.e);\r
+ var leftTurn, rightTurn;\r
+ if (this.dir == 1) {\r
+ leftPage = $('.p[data-page=' + this.currentPage + ']');\r
+ rightPage = $('.p[data-page=' + (page + 1) + ']');\r
+ leftTurn = $('.p[data-page=' + page + ']');\r
+ rightTurn = $('.p[data-page=' + (this.currentPage + 1) + ']');\r
+ } else {\r
+ leftPage = $('.p[data-page=' + page + ']');\r
+ rightPage = $('.p[data-page=' + (this.currentPage + 1) + ']');\r
+ leftTurn = $('.p[data-page=' + this.currentPage + ']');\r
+ rightTurn = $('.p[data-page=' + (page + 1) + ']');\r
+ }\r
+\r
+ $(leftPage).show();\r
+ $(rightPage).show();\r
+ $(leftTurn).show();\r
+ $(rightTurn).show();\r
+\r
+ $("#currentDoublePage").append($(leftPage)).append($(rightPage));\r
+ if (this.dir == -1) {\r
+ $("#nextDoublePage").append($(leftTurn)).append($(rightTurn));\r
+ } else {\r
+ $("#nextDoublePage").append($(rightTurn)).append($(leftTurn));\r
+ }\r
+ $(".p.right").css({\r
+ left: this.bookWidth / 2\r
+ });\r
+\r
+ $("#nextDoublePage").addClass(nextFromClass + 'end');\r
+\r
+ $("#nextDoublePage").one(this.transitionendevents, function () {\r
+ $this.animating = false;\r
+ $this.gotoPage(page, false);\r
+ });\r
+ }\r
+ }\r
+\r
+ this.currentPage = page;\r
+ },\r
+ goNextPage: function () {\r
+ var p;\r
+ if (this.dir == 1) {\r
+ p = this.currentPage + 2;\r
+ if (p > this.to) {\r
+ p -= 4;\r
+ this.dir = -1;\r
+ }\r
+ } else {\r
+ p = this.currentPage - 2;\r
+ if (p < this.from) {\r
+ p += 4;\r
+ this.dir = 1;\r
+ }\r
+ }\r
+\r
+ this.gotoPage(p, true)\r
+\r
+ },\r
+ resize: function () {\r
+ var w = $(window).width();\r
+ var h = $(window).height();\r
+\r
+ var s = Math.min((w * 0.95) / this.bookWidth, (h * 0.95) / this.bookHeight);\r
+\r
+ var iw = this.bookWidth * s;\r
+ var ih = this.bookHeight * s;\r
+\r
+ var x = (w - iw) / 2;\r
+ var y = (h - ih) / 2;\r
+\r
+ $("body,#container").css({\r
+ width: w,\r
+ maxWidth: w,\r
+ minWidth: w,\r
+ height: h,\r
+ maxHeight: h,\r
+ minHeight: h\r
+ });\r
+ $("#nextDoublePage").css({\r
+ width: this.bookWidth / 2,\r
+ maxWidth: this.bookWidth / 2,\r
+ minWidth: this.bookWidth / 2,\r
+ height: this.bookHeight,\r
+ maxHeight: this.bookHeight,\r
+ minHeight: this.bookHeight,\r
+ overflow: 'hidden'\r
+ })\r
+\r
+ this.e.css({\r
+ transformOrigin: '0% 0%',\r
+ x: x,\r
+ y: y,\r
+ scale: s\r
+ });\r
+ }\r
+ };\r
+\r
+ jQuery.fn.fluidbookWidget = function (from, to) {\r
+ return this.each(function () {\r
+ var $this = $(this);\r
+ widget = new FluidbookWidget($this, from, to);\r
+ })\r
+ };\r
})(jQuery);\r
\r
function parseGet(res) {\r
- if (res == undefined) {\r
- res = {};\r
- }\r
- var couples = window.location.search.substr(1).split('&');\r
- var couple = new Array();\r
- for (var i = 0; i < couples.length; i++) {\r
- couple = couples[i].split('=');\r
- res[couple[0]] = couple[1];\r
- }\r
- return res;\r
+ if (res == undefined) {\r
+ res = {};\r
+ }\r
+ var couples = window.location.search.substr(1).split('&');\r
+ var couple = new Array();\r
+ for (var i = 0; i < couples.length; i++) {\r
+ couple = couples[i].split('=');\r
+ res[couple[0]] = couple[1];\r
+ }\r
+ return res;\r
}\r
\r
function getColor(color) {\r
- if (color == 'transparent' || color.substr(0, 3) == 'rgb') {\r
- return color;\r
- }\r
- if (color.length == 6) {\r
- return '#' + color;\r
- }\r
- return color;\r
+ if (color == 'transparent' || color.substr(0, 3) == 'rgb') {\r
+ return color;\r
+ }\r
+ if (color.length == 6) {\r
+ return '#' + color;\r
+ }\r
+ return color;\r
}\r
\r
function resize() {\r
- widget.resize();\r
+ widget.resize();\r
}
\ No newline at end of file
projects / fluidbook-html5.git / commitdiff