+++ /dev/null
-$(function () {
- // Todo : manage other than html extensions
- _GET = parseGet({
- background: 'transparent',
- target: '_blank',
- link: '../index.' + SETTINGS.htmlExtension,
- 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, SETTINGS.widgetStart), Math.min(SETTINGS.pages, SETTINGS.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(SETTINGS.pages, this.to);
- this.currentPage = 0;
- this.dir = 1;
-
- this.bookWidth;
- this.bookHeight;
- this.init();
-
- this.transitionendevents = 'transitionend';
- }
-
- FluidbookWidget.prototype = {
- init: function () {
- this.e.append('<div id="currentDoublePage"></div>');
-
- // 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 = '<div class="shade"><img src="images/shadows/pages/' + side + '.png" /></div>';
- }
-
- pclass += ' ' + side;
-
-
- this.e.append('<div class="' + pclass + '" data-page="' + i + '">' + shade + '</div>');
- }
-
- 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('<div id="nextDoublePage"></div>');
- $(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('<div id="nextDoublePage" style="left:' + (this.bookWidth / 2) + 'px" class="' + nextFromClass + 'start _3d"></div>');
-
- $("#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;
-}
-
-function getColor(color) {
- if (color == 'transparent' || color.substr(0, 3) == 'rgb') {
- return color;
- }
- if (color.length == 6) {
- return '#' + color;
- }
- return color;
-}
-
-function resize() {
- widget.resize();
-}
-
+++ /dev/null
-*{margin:0;padding:0}\r
-\r
-body{\r
- overflow: hidden;\r
- cursor:pointer;\r
-}\r
-\r
-#container{\r
- overflow:hidden;\r
- display:none;\r
-}\r
-\r
-\r
-#widget{\r
- position:absolute;\r
- top:0px; \r
- left:0px;\r
-\r
-}\r
- \r
-.p{\r
- display:none;\r
- position:absolute;\r
- top:0px;\r
- left:0px;\r
-}\r
-\r
-.p>img{\r
- position:absolute;\r
- top:0px;\r
- left:0px;\r
-}\r
-\r
-.p .shade img{\r
- position: absolute;\r
- top:0px;\r
-}\r
-\r
-.p.left .shade img{\r
- right:0px;\r
-}\r
-\r
-.p.right .shade img{\r
- left:0px;\r
-}\r
-\r
-.shade img{\r
- display:block;\r
- position:relative;\r
- z-index:4;\r
-}\r
-\r
-#currentDoublePage,#nextDoublePage{\r
- position:absolute;\r
- top:0px;\r
- left:0px;\r
-}\r
-\r
-#nextDoublePage{\r
- z-index:3;\r
-}\r
-\r
-#widget{\r
- perspective: 5000px;\r
- -moz-perspective:5000px;\r
- -webkit-perspective:5000px;\r
- -o-perspective:5000px;\r
- -ms-perspective:5000px;\r
-\r
-\r
- perspective-origin: 50% 75%;\r
- -moz-perspective-origin:50% 75%;\r
- -webkit-perspective-origin:50% 75%;\r
- -ms-perspective-origin:50% 75%;\r
- -o-perspective-origin:50% 75%;\r
-}\r
-\r
-#nextDoublePage._3d{\r
- overflow: visible;\r
- z-index:100;\r
-\r
- transition: all 1s ease-out;\r
- -moz-transition: all 1s ease-out;\r
- -webkit-transition: all 1s ease-out;\r
- -o-transition: all 1s ease-out;\r
- -ms-transition: all 1s ease-out;\r
-\r
- transform-style: preserve-3d;\r
- -moz-transform-style:preserve-3d;\r
- -webkit-transform-style:preserve-3d;\r
- -o-transform-style:preserve-3d;\r
- -ms-transform-style:preserve-3d;\r
-}\r
-\r
-#nextDoublePage._3d .p{\r
- backface-visibility: hidden;\r
- -moz-backface-visibility:hidden;\r
- -webkit-backface-visibility:hidden;\r
- -o-backface-visibility:hidden;\r
- -ms-backface-visibility:hidden; \r
-\r
- left:0px !important;\r
-}\r
-\r
-#nextDoublePage._3d .right{\r
- transform: rotate3d(0,1,0,0deg);\r
- -moz-transform: rotateY(0deg) translate3d(0,0,0);\r
- -webkit-transform: rotate3d(0,1,0,0deg);\r
- -o-transform: rotate3d(0,1,0,0deg);\r
- -ms-transform: rotate3d(0,1,0,0deg);\r
-}\r
-\r
-#nextDoublePage._3d .left{\r
- transform: rotate3d(0,1,0,180deg);\r
- -moz-transform: rotateY(180deg) translate3d(0,0,0);\r
- -webkit-transform: rotate3d(0,1,0,180deg);\r
- -o-transform: rotate3d(0,1,0,180deg);\r
- -ms-transform: rotate3d(0,1,0,180deg);\r
-}\r
-\r
-#nextDoublePage._3d.nextstart{\r
- transform: rotate3d(0,1,0,360deg);\r
- -moz-transform: rotateY(360deg) translate3d(0,0,0);\r
- -webkit-transform: rotate3d(0,1,0,360deg);\r
- -o-transform: rotate3d(0,1,0,360deg);\r
- -ms-transform: rotate3d(0,1,0,360deg);\r
-\r
- transform-origin: 0 0;\r
- -moz-transform-origin: 0 0;\r
- -webkit-transform-origin: 0 0;\r
- -o-transform-origin: 0 0;\r
- -ms-transform-origin: 0 0;\r
-}\r
-\r
-#nextDoublePage._3d.nextend{\r
- transform: rotate3d(0,1,0,180deg);\r
- -moz-transform: rotateY(180deg) translate3d(0,0,0);\r
- -webkit-transform: rotate3d(0,1,0,180deg);\r
- -o-transform: rotate3d(0,1,0,180deg);\r
- -ms-transform: rotate3d(0,1,0,180deg);\r
-}\r
-\r
-#nextDoublePage._3d.prevstart{\r
- transform: rotate3d(0,1,0,180deg);\r
- -moz-transform: rotateY(180deg) translate3d(0,0,0);\r
- -webkit-transform: rotate3d(0,1,0,180deg);\r
- -o-transform: rotate3d(0,1,0,180deg);\r
- -ms-transform: rotate3d(0,1,0,180deg);\r
-\r
- transform-origin: 0 0;\r
- -moz-transform-origin: 0 0;\r
- -webkit-transform-origin: 0 0;\r
- -o-transform-origin: 0 0;\r
- -ms-transform-origin: 0 0;\r
-}\r
-\r
-#nextDoublePage._3d.prevend{\r
- transform: rotate3d(0,1,0,360deg);\r
- -moz-transform: rotateY(360deg) translate3d(0,0,0);\r
- -webkit-transform: rotate3d(0,1,0,360deg);\r
- -o-transform: rotate3d(0,1,0,360deg);\r
- -ms-transform: rotate3d(0,1,0,360deg);\r
-}
\ No newline at end of file
projects / fluidbook-html5.git / commitdiff