From 75c4312497cbd63d2aea12b41a66455cb9ad37e4 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Tue, 10 Sep 2013 16:44:41 +0000 Subject: [PATCH] --- _index.html | 7 +- js/libs/fluidbook/fluidbook.bookmarks.js | 3 + js/libs/fluidbook/fluidbook.help.js | 21 +- js/libs/fluidbook/fluidbook.js | 187 +++++++++--------- js/libs/fluidbook/fluidbook.l10n.js | 10 +- js/libs/fluidbook/fluidbook.loader.js | 14 +- js/libs/fluidbook/fluidbook.nav.js | 17 +- js/libs/fluidbook/fluidbook.resize.js | 4 - js/libs/fluidbook/views/fluidbook.chapters.js | 4 - js/libs/fluidbook/views/fluidbook.index.js | 42 ++-- js/main.js | 3 - style/fluidbook.css | 142 +++++++++++-- 12 files changed, 299 insertions(+), 155 deletions(-) diff --git a/_index.html b/_index.html index 01ec7eb8..8579ab54 100644 --- a/_index.html +++ b/_index.html @@ -24,7 +24,7 @@
-
+
@@ -40,11 +40,6 @@
-
-
-
-
-
diff --git a/js/libs/fluidbook/fluidbook.bookmarks.js b/js/libs/fluidbook/fluidbook.bookmarks.js index dbc5d56b..4926326a 100644 --- a/js/libs/fluidbook/fluidbook.bookmarks.js +++ b/js/libs/fluidbook/fluidbook.bookmarks.js @@ -351,6 +351,9 @@ FluidbookBookmarks.prototype = { side = 'right'; } else { side = (i % 2 == 0) ? 'left' : 'right'; + if (this.fluidbook.l10n.dir == 'rtl') { + side = side == 'left' ? 'right' : 'left'; + } } bookmarks += " 0) { c = 'afterSearch'; @@ -80,10 +89,10 @@ FluidbookHelp.prototype = { } help += '
'; - help += ''; - help += '
' + this.fluidbook.l10n.__('last page') + '
'; - help += ''; - help += '
' + this.fluidbook.l10n.__('frontpage') + '
'; + help += ''; + help += '
' + this.fluidbook.l10n.__('last page') + '
'; + help += ''; + help += '
' + this.fluidbook.l10n.__('frontpage') + '
'; help += '
'; if (this.fluidbook.pad.enabled) { @@ -240,6 +249,8 @@ FluidbookHelp.prototype = { if (this.fluidbook.pad.enabled) { this.fluidbook.pad.displayInterface(); } + } else { + this.fluidbook.hideUnnecessaryButtons(); } } }; diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index 3b3f245b..e5ec71f6 100644 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@ -181,7 +181,6 @@ Fluidbook.prototype = { $("#links").removeClass('left').removeClass('right').addClass(lClass).html(this.datas.links[pageNr]).show(); if (this.datas.bookmark) { - $("#links").append(this.bookmarks.getBookmarkForPage(pageNr)); } $("#links").prepend(''); @@ -399,53 +398,22 @@ Fluidbook.prototype = { return; } this.transitionning = true; - var nextFromClass; var $this = this; - if (pageNr > this.currentPage) { - nextFromClass = 'next'; - } else { - nextFromClass = 'prev'; - } - $("#pages").prepend('
'); + var turning = this.getTurningPages(pageNr); + + $("#pages").prepend('
'); var doublePage = $("#nextDoublePage"); var currentDoublePage = $("#currentDoublePage"); - var currentLeft = this.currentPage - this.currentPage % 2; - var currentRight = currentLeft + 1; - - var dir = 1; - if (pageNr < this.currentPage) { - dir = -1; - } - - - var preload = [pageNr, pageNr + 1]; - this.displayLoader(); - this.loader.preloadPagesBeforeTransition(preload, function() { - var pages; + this.loader.preloadPagesBeforeTransition([turning.currentLeft, turning.currentRight], function() { $("#pages").addClass('_3dtransition'); - // Set contents of flat part - if (dir == 1) { - pages = [currentLeft, pageNr + 1]; - } else { - pages = [pageNr, currentRight]; - } - $this.loader.setContentsInDoublePage(currentDoublePage, pages, true, function() { - // Set the contents of fliping part - if (dir == 1) { - pages = [pageNr, currentRight]; - } else { - pages = [currentLeft, pageNr + 1]; - } - - $this.loader.setContentsInDoublePage(doublePage, pages, true, function() { + $this.loader.setContentsInDoublePage(currentDoublePage, turning.flat, true, function() { + $this.loader.setContentsInDoublePage(doublePage, turning.flip, true, function() { $this.beforeTransition(pageNr); - // Do the transition - - $(doublePage).addClass(nextFromClass + 'end').one($this.support.getTransitionEndEvent(), function() { + $(doublePage).addClass(turning.nextFromClass + 'end').one($this.support.getTransitionEndEvent(), function() { if ($this.transitionning == false) { return; } @@ -456,8 +424,8 @@ Fluidbook.prototype = { } // Set the flat contents with the new page - $this.loader.setContentsInDoublePage(doublePage, [pageNr, pageNr + 1], false, function() { - $(doublePage).removeClass('_3d').removeClass(nextFromClass + 'start').removeClass(nextFromClass + 'end'); + $this.loader.setContentsInDoublePage(doublePage, turning.end, false, function() { + $(doublePage).removeClass('_3d').removeClass(turning.nextFromClass + 'start').removeClass(turning.nextFromClass + 'end'); // Remove former part $("#currentDoublePage").remove(); $(doublePage).attr('id', 'currentDoublePage'); @@ -472,6 +440,49 @@ Fluidbook.prototype = { }); }); }, + getTurningPages: function(newPage) { + var res = {}; + + res.dir = 1; + if (newPage < this.currentPage) { + res.dir = -1; + } + + if (this.l10n.dir == 'ltr') { + res.currentLeft = this.currentPage - this.currentPage % 2; + res.currentRight = res.currentLeft + 1; + if (res.dir == 1) { + res.currentToClass = 'prev'; + res.nextFromClass = 'next'; + res.flat = [res.currentLeft, newPage + 1]; + res.flip = [newPage, res.currentRight]; + } else { + res.currentToClass = 'next'; + res.nextFromClass = 'prev'; + res.flat = [newPage, res.currentRight]; + res.flip = [res.currentLeft, newPage + 1]; + } + res['end'] = [newPage, newPage + 1]; + } else { + res.currentRight = this.currentPage - this.currentPage % 2; + res.currentLeft = res.currentRight + 1; + + if (res.dir == 1) { + res.currentToClass = 'next'; + res.nextFromClass = 'prev'; + res.flat = [newPage + 1, res.currentRight]; + res.flip = [res.currentLeft, newPage]; + } else { + res.currentToClass = 'prev'; + res.nextFromClass = 'next'; + res.flat = [res.currentLeft, newPage]; + res.flip = [newPage + 1, res.currentRight]; + } + res.end = [newPage + 1, newPage]; + } + res.loading = [res.currentLeft, res.currentRight]; + return JSON.parse(JSON.stringify(res)); + }, reloadCurrentPage: function() { this.pageTransition(this.currentPage); }, @@ -510,7 +521,6 @@ Fluidbook.prototype = { } else { $("#next").removeClass('hidden'); } - } else { $("#previous,#next").removeClass('hidden'); @@ -527,48 +537,33 @@ Fluidbook.prototype = { } } - if (page <= 1) { - $("#shadow").removeClass('double'); - $("#shadow").removeClass('left'); - $("#shadow").addClass('right'); - $("#shadow").addClass('single'); - } else if (page >= this.datas.pages) { - $("#shadow").removeClass('double'); - $("#shadow").removeClass('right'); - $("#shadow").addClass('left'); - $("#shadow").addClass('single'); + if ((page <= 1 && this.l10n.dir == 'ltr') || (page >= this.datas.pages && this.l10n.dir == 'rtl')) { + $("#shadow").removeClass('double').removeClass('left').addClass('right').addClass('single'); + } else if ((page <= 1 && this.l10n.dir == 'rtl') || (page >= this.datas.pages && this.l10n.dir == 'ltr')) { + $("#shadow").removeClass('double').removeClass('right').addClass('left').addClass('single'); } else { - $("#shadow").removeClass('single'); - $("#shadow").addClass('double'); + $("#shadow").removeClass('single').addClass('double'); } - }, showAllButtons: function() { $("#next,#previous").addClass('help').show(); }, pageTransition2D: function(pageNr) { this.transitionning = true; - var currentFromClass, currentToClass; var $this = this; - if (pageNr > this.currentPage) { - currentToClass = 'prev'; - nextFromClass = 'next'; - } - else { - currentToClass = 'next'; - nextFromClass = 'prev'; - } + var turning = this.getTurningPages(pageNr); + fb(turning); - $("#pages").append('
'); + $("#pages").append('
'); var doublePage = $("#nextDoublePage"); this.displayLoader(); - this.loader.preloadPagesBeforeTransition([pageNr, pageNr + 1], function() { - $this.loader.setContentsInDoublePage(doublePage, [pageNr, pageNr + 1], true, function() { + this.loader.preloadPagesBeforeTransition(turning.end, function() { + $this.loader.setContentsInDoublePage(doublePage, turning.end, true, function() { $this.beforeTransition(pageNr); - $("#currentDoublePage").addClass('_2d').addClass('axis_' + $this.transitionAxis).addClass(currentToClass); - $(doublePage).removeClass(nextFromClass).one($this.support.getTransitionEndEvent(), function(event) { + $("#currentDoublePage").addClass('_2d').addClass('axis_' + $this.transitionAxis).addClass(turning.currentToClass); + $(doublePage).removeClass(turning.nextFromClass).one($this.support.getTransitionEndEvent(), function(event) { if ($this.transitionning == false) { return; } @@ -581,19 +576,11 @@ Fluidbook.prototype = { }, pageTransition2DPortrait: function(pageNr) { this.transitionning = true; - var currentFromClass, currentToClass; var $this = this; - if (pageNr > this.currentPage) { - currentToClass = 'prev'; - nextFromClass = 'next'; - } - else { - currentToClass = 'next'; - nextFromClass = 'prev'; - } + var turning = this.getTurningPages(pageNr); - $("#pages").append('
'); + $("#pages").append('
'); var doublePage = $("#nextDoublePage"); if (this.displayOnePage) { @@ -601,11 +588,11 @@ Fluidbook.prototype = { } this.displayLoader(); - this.loader.preloadPagesBeforeTransition([pageNr, pageNr + 1], function() { - $this.loader.setContentsInDoublePage(doublePage, [pageNr, pageNr + 1], true, function() { + this.loader.preloadPagesBeforeTransition(turning.end, function() { + $this.loader.setContentsInDoublePage(doublePage, turning.end, true, function() { $this.beforeTransition(pageNr); - $("#currentDoublePage").addClass('axis_' + $this.transitionAxis).addClass('_2d').addClass(currentToClass); - $(doublePage).removeClass(nextFromClass).one($this.support.getTransitionEndEvent(), function() { + $("#currentDoublePage").addClass('axis_' + $this.transitionAxis).addClass('_2d').addClass(turning.currentToClass); + $(doublePage).removeClass(turning.nextFromClass).one($this.support.getTransitionEndEvent(), function() { if ($this.transitionning == false) { return; } @@ -624,8 +611,9 @@ Fluidbook.prototype = { if (this.displayOnePage) { this.hidePage('right'); } + var turning = this.getTurningPages(pageNr); this.beforeTransition(pageNr); - this.loader.setContentsInDoublePage(doublePage, [page, page + 1], true, function() { + this.loader.setContentsInDoublePage(doublePage, turning.end, true, function() { $this.afterTransition(page); }); @@ -680,21 +668,30 @@ Fluidbook.prototype = { }, setPageNumbers: function() { var page = this.currentPage; + + var min, max; + + if (page > 0) { - $("#pagesnumbers .left").html(this.physicalToVirtual(page)); + min = this.physicalToVirtual(page); } else { - $("#pagesnumbers .left").html(''); + min; } - if (!this.displayOnePage) { - page++; - if (page <= this.datas.pages) { - $("#pagesnumbers .right").html(this.physicalToVirtual(page)); - $("#pagesnumbers .right").show(); - } else { - $("#pagesnumbers .right").html(''); - $("#pagesnumbers .right").hide(); - } + page++; + if (page <= this.datas.pages) { + max = this.physicalToVirtual(page); + } else { + max = ''; + } + + + if (this.displayOnePage || this.l10n.dir == 'ltr') { + $("#pagesnumbers .left").html(min); + $("#pagesnumbers .right").html(max); + } else { + $("#pagesnumbers .right").html(min); + $("#pagesnumbers .left").html(max); } }, clickLogo: function() { diff --git a/js/libs/fluidbook/fluidbook.l10n.js b/js/libs/fluidbook/fluidbook.l10n.js index 599666e1..baf50069 100644 --- a/js/libs/fluidbook/fluidbook.l10n.js +++ b/js/libs/fluidbook/fluidbook.l10n.js @@ -15,6 +15,14 @@ FluidbookL10N.prototype = { } this.lang = lang; + this.dir = (this.getActiveLang() == 'ar' || this.getActiveLang() == 'he') ? 'rtl' : 'ltr'; + $('html').attr('dir', this.dir); + if (this.dir == 'rtl') { + $('html').removeClass('ltr').addClass('rtl'); + } else { + $("html").removeClass('rtl').addClass('ltr'); + } + this.translations = this.fluidbook.datas.l10n[lang]; this.updateTranslations(); }, @@ -91,7 +99,7 @@ FluidbookL10N.prototype = { if (this.translations[str] == undefined || this.translations[str] == null || this.translations[str] == '') { if (markupIfNonAvailable == undefined || markupIfNonAvailable) { - return '~ ' + str + ' ~'; + return '~ ' + str + ' ~'; } else { return str; } diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js index 9105a741..e1278f43 100644 --- a/js/libs/fluidbook/fluidbook.loader.js +++ b/js/libs/fluidbook/fluidbook.loader.js @@ -14,13 +14,14 @@ function FluidbookLoader(fluidbook) { FluidbookLoader.prototype = { preloadPagesBeforeTransition: function(pages, callback) { var $this = this; - if (pages.length == 0) { + var $pages= pages.slice(0); + if ($pages.length == 0) { callback(); return; } - var $pages = pages; + var $callback = callback; - var $page = pages.shift(); + var $page = $pages.shift(); if ($page > this.fluidbook.datas.pages || $page < 1) { $this.preloadPagesBeforeTransition($pages, $callback); return; @@ -91,8 +92,7 @@ FluidbookLoader.prototype = { if (!immediate) { this.loadLeftPage(leftPage, $(doublePage), function() { $this.loadRightPage(rightPage, $(doublePage), callback); - }) - + }); } else { this.loadLeftPage(leftPage, $(doublePage), function() { }) @@ -160,7 +160,7 @@ FluidbookLoader.prototype = { $(page).children(".shade").html(this.loadImage('images/' + shade, this.fluidbook.datas.width / 4, this.fluidbook.datas.height)); }, loadLeftPage: function(page, doublePage, callback) { - if (page > 0) { + if (page > 0 && page <= this.fluidbook.datas.pages) { this.loadPage(page, doublePage, 'left', callback); } else { $(doublePage).find('.left').remove(); @@ -168,7 +168,7 @@ FluidbookLoader.prototype = { } }, loadRightPage: function(page, doublePage, callback) { - if (!this.fluidbook.displayOnePage && page <= this.fluidbook.datas.pages) { + if (!this.fluidbook.displayOnePage && page <= this.fluidbook.datas.pages && page > 0) { this.loadPage(page, doublePage, 'right', callback); } else { $(doublePage).find('.right').remove(); diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js index 4ddeb8e5..5e900b0c 100644 --- a/js/libs/fluidbook/fluidbook.nav.js +++ b/js/libs/fluidbook/fluidbook.nav.js @@ -3,7 +3,7 @@ function FluidbookNav(fluidbook) { this._dimensions = this.fluidbook.datas.iconsDimensions; this._inited = false; this.setNav(); - + } FluidbookNav.prototype = { @@ -30,7 +30,10 @@ FluidbookNav.prototype = { $("#nav #" + before).before(l); } }, - getLink: function(name, href, id, help, className) { + getLink: function(name, href, id, help, className, icon) { + if (icon == undefined) { + icon = true; + } var res = ' 0) { - ix += '
' + this.fluidbook.loader.getImage('data/thumbnails/p' + i + '.jpg') + '' + this.fluidbook.physicalToVirtual(i) + ''; + ix1 += '
' + this.fluidbook.loader.getImage('data/thumbnails/p' + i + '.jpg') + '' + this.fluidbook.physicalToVirtual(i) + ''; if (this.fluidbook.bookmarks.enabled) { - ix += this.fluidbook.bookmarks.getBookmarkForPage(i, true); + ix1 += this.fluidbook.bookmarks.getBookmarkForPage(i, true); } pages.push(i); - ix += '
'; + ix1 += '
'; } else { - c = ' simple right'; + c = ' simple ' + s2; } + + if (this.fluidbook.l10n.dir == 'rtl') { + s1 = 'left'; + s2 = 'right' + } else { + s1 = 'right'; + s2 = 'left' + } + if (j < this.fluidbook.datas.pages) { - ix += '
' + this.fluidbook.loader.getImage('data/thumbnails/p' + j + '.jpg') + '' + this.fluidbook.physicalToVirtual(j) + ''; + ix2 += '
' + this.fluidbook.loader.getImage('data/thumbnails/p' + j + '.jpg') + '' + this.fluidbook.physicalToVirtual(j) + ''; if (this.fluidbook.bookmarks.enabled) { - ix += this.fluidbook.bookmarks.getBookmarkForPage(j, true); + ix2 += this.fluidbook.bookmarks.getBookmarkForPage(j, true); } - ix += '
'; + ix2 += '
'; pages.push(j); } else { - c = ' simple left'; + c = ' simple ' + s2; } - + ix = ix1 + ix2; this.normalHTML += '
' + ix; this.normalHTML += '
'; } diff --git a/js/main.js b/js/main.js index 1e58a8b9..f5d96e84 100644 --- a/js/main.js +++ b/js/main.js @@ -53,9 +53,6 @@ function loadPhonegap() { } } - console.log('Load phonegap'); - console.log(cordova); - loadJSLibrary( cordova , function() { diff --git a/style/fluidbook.css b/style/fluidbook.css index f69cec75..a1587719 100644 --- a/style/fluidbook.css +++ b/style/fluidbook.css @@ -237,6 +237,7 @@ body{ #fluidbook{ position:absolute; z-index: 11; + direction: ltr; } #cache{ @@ -274,6 +275,7 @@ body{ display:block; opacity:1; z-index:21; + background-size: 40px 100px; } #next,#previous,#down,#splash{ @@ -299,31 +301,73 @@ body{ cursor:default; } -#next{ +.ltr #next{ + background-image: url("../data/images/interface-next.svg"); right:0px; border-top-left-radius:7px; border-bottom-left-radius:7px; } -#previous{ +.ltr #previous{ + background-image: url("../data/images/interface-previous.svg"); left:0px; border-top-right-radius:7px; border-bottom-right-radius:7px; } +.rtl #previous{ + background-image: url("../data/images/interface-next.svg"); + right:0px; + border-top-left-radius:7px; + border-bottom-left-radius:7px; +} + +.rtl #next{ + background-image: url("../data/images/interface-previous.svg"); + left:0px; + border-top-right-radius:7px; + border-bottom-right-radius:7px; +} + +.rtl.no-svg #next{ + background-image: url("../data/images/interface-next.png"); +} + +.rtl.no-svg #previous{ + background-image: url("../data/images/interface-previous.png"); +} + +.rtl.no-svg #previous{ + background-image: url("../data/images/interface-next.png"); +} + +.rtl.no-svg #next{ + background-image: url("../data/images/interface-previous.png"); +} + /* Header */ header{position:relative;z-index: 1;} + + #nav>a{ - margin:0 0 0 20px; vertical-align: top; } + +.ltr #nav a{ + margin:0 0 0 20px; +} + +.rtl #nav>a{ + margin:0 20px 0 0; +} + + #nav>a>img{ padding: 10px 2px 0px 2px; vertical-align: top; } #nav{ - float:left; position:relative; z-index:12; white-space: nowrap; @@ -354,10 +398,19 @@ header{position:relative;z-index: 1;} #search{ position:relative; display:inline-block; - margin:8px 0 0 30px; z-index: 2; vertical-align: top; } + +.ltr #search{ + margin:8px 0 0 30px; +} + +.rtl #search{ + margin:8px 30px 0 0; +} + + #search img{ vertical-align: middle; } @@ -396,10 +449,19 @@ header{position:relative;z-index: 1;} #logo{ position:absolute; top:0px; - right:0px; background-repeat: no-repeat; z-index: 10; } + +.ltr #logo{ + right:0px; +} + +.rtl #logo{ + left:0px; +} + + .portrait #logo{ display:none; } @@ -410,8 +472,7 @@ footer{ font-size:8px; text-transform: uppercase; position: absolute; - bottom:0px; - right:0px; + bottom:2px; z-index: 20; } footer a{ @@ -419,6 +480,14 @@ footer a{ margin:0 4px 4px 0; } +.ltr footer{ + right:2px; +} + +.rtl footer{ + left:2px; +} + /* Fluidbook zooming */ footer,header,#interface{ @@ -807,6 +876,10 @@ ul.chapters.shareList a.level0 img{ top:3px; } +.rtl ul.chapters.shareList a.level0 img{ + margin:2px 0 0 10px; +} + /* Help */ #helpView{ background-color: rgba(0,0,0,0.7); @@ -844,6 +917,13 @@ ul.chapters.shareList a.level0 img{ white-space: nowrap; } +.rtl #helpView .icon span{ + position:absolute; + right:1em; + display: block; + margin-top:-1em; +} + #helpView .interface hr{ width:30px; height:0px; @@ -870,19 +950,50 @@ ul.chapters.shareList a.level0 img{ vertical-align: middle; } -#helpView .interface .next, -#helpView .interface .last{ +.ltr #helpView .interface .next, +.ltr #helpView .interface .last, +.rtl #helpView .interface .first, +.rtl #helpView .interface .previous{ text-align: right; right:40px; top:340px; } -#helpView .interface .first, -#helpView .interface .previous{ +.ltr #helpView .interface .next:after, +.ltr #helpView .interface .last:after, +.rtl #helpView .interface .first:after, +.rtl #helpView .interface .previous:after{ + content:'------------'; + width:100px; + border-bottom: 1px solid #fff; + margin:0 10px; + position:relative; + top:-0.5em; + color:transparent; +} + +.rtl #helpView .interface .next, +.rtl #helpView .interface .last, +.ltr #helpView .interface .first, +.ltr #helpView .interface .previous{ left:40px; top:340px; } +.rtl #helpView .interface .next:before, +.rtl #helpView .interface .last:before, +.ltr #helpView .interface .first:before, +.ltr #helpView .interface .previous:before{ + content:'------------'; + width:100px; + border-bottom: 1px solid #fff; + margin:0 10px; + position:relative; + top:-0.5em; + color:transparent; +} + + #helpView .interface .first, #helpView .interface .last{ margin-top:43px; @@ -896,6 +1007,7 @@ ul.chapters.shareList a.level0 img{ #helpView .interface div{ position:absolute; + direction: ltr; } .portrait #helpView .interface{ @@ -1034,7 +1146,11 @@ ul.chapters>li{ ul.chapters a{ display:block; text-align: left; - padding:10px 20px 10px 20px; + padding:10px 20px; +} + +.rtl ul.chapters a{ + text-align: right; } ul.chapters a.level-1{ -- 2.39.5