<div id="flip3dcontainer">
<canvas width="1024" height="1024"></canvas>
</div>
- <div id="fluidbook">
- <div id="edges">
- <div class="edge left">
- <div class="top"></div>
- <div class="middle"></div>
- <div class="bottom"></div>
+ <div id="scroll">
+ <div id="fluidbook">
+ <div id="edges">
+ <div class="edge left">
+ <div class="top"></div>
+ <div class="middle"></div>
+ <div class="bottom"></div>
+ </div>
+ <div class="edge right">
+ <div class="top"></div>
+ <div class="middle"></div>
+ <div class="bottom"></div>
+ </div>
</div>
- <div class="edge right">
- <div class="top"></div>
- <div class="middle"></div>
- <div class="bottom"></div>
+ <div id="pagesnumbers" class="hidden">
+ <div class="left"></div>
+ <div class="right"></div>
+ </div>
+ <div id="pages" class="double">
+ <div id="currentDoublePage" class="doublePage"></div>
+ <div id="searchHighlights"></div>
+ <div id="links"></div>
</div>
- </div>
- <div id="pagesnumbers" class="hidden">
- <div class="left"></div>
- <div class="right"></div>
- </div>
- <div id="pages" class="double">
- <div id="currentDoublePage" class="doublePage"></div>
- <div id="searchHighlights"></div>
- <div id="links"></div>
</div>
</div>
</div>
<path d="M36.5,55.1L21,39.6l15.5-15.5c0.3-0.3,0.3-0.7,0-0.9l-1.4-1.4c-0.3-0.3-0.7-0.3-0.9,0L17,39 c-0.2,0.2-0.2,0.4-0.2,0.6c0,0.2,0,0.4,0.2,0.5l17.2,17.2c0.3,0.3,0.7,0.3,0.9,0l1.4-1.4C36.8,55.7,36.8,55.3,36.5,55.1z M22,86.5 h2v-15h-2V86.5z M29.1,79l5.8-5.8c0.3-0.3,0.3-0.7,0-0.9l-0.5-0.5c-0.3-0.3-0.7-0.3-0.9,0L27.3,78c0,0,0,0-0.1,0l-0.5,0.5 c-0.1,0.1-0.2,0.3-0.2,0.5c0,0.2,0.1,0.4,0.2,0.5l0.5,0.5c0,0,0.1,0,0.1,0.1l6.2,6.2c0.3,0.3,0.7,0.3,0.9,0l0.5-0.5 c0.3-0.3,0.3-0.7,0-0.9L29.1,79z"/>
</symbol>
<symbol id="interface-minus" viewBox="0 0 50 50">
- <rect x="16.5" y="23.5" class="st0" width="17" height="2.9"/>
+ <rect x="16.5" y="23.5" width="17" height="2.9"/>
+ </symbol>
+ <symbol id="interface-next-simple" viewBox="0 0 12 22">
+ <path d="M11.89,10.71L1.49,0.12c-0.15-0.15-0.4-0.15-0.55,0L0.13,0.95c-0.15,0.15-0.15,0.4,0,0.56l9.34,9.52
+ l-9.35,9.54c-0.15,0.15-0.15,0.4,0,0.56l0.82,0.84c0.15,0.15,0.4,0.15,0.55,0l10.39-10.6c0.08-0.09,0.11-0.2,0.1-0.31
+ C12,10.93,11.98,10.81,11.89,10.71z"/>
+ </symbol>
+ <symbol id="interface-previous-simple" viewBox="0 0 12 22">
+ <path d="M2.53,11.05l9.35-9.54c0.15-0.15,0.15-0.4,0-0.56l-0.82-0.84c-0.15-0.15-0.4-0.15-0.55,0L0.13,10.71
+ c-0.08,0.09-0.11,0.2-0.1,0.31C0,11.15,0.02,11.27,0.11,11.37l10.39,10.6c0.15,0.15,0.4,0.15,0.55,0l0.82-0.84
+ c0.15-0.15,0.15-0.4,0-0.56L2.53,11.05z"/>
</symbol>
<symbol id="interface-plus" viewBox="0 0 50 50">
- <polygon class="st0"
- points="33.5,23.5 26.5,23.5 26.5,16.5 23.5,16.5 23.5,23.5 16.5,23.5 16.5,26.5 23.5,26.5 23.5,33.5 26.5,33.5 26.5,26.5 33.5,26.5 "/>
+ <polygon
+ points="33.5,23.5 26.5,23.5 26.5,16.5 23.5,16.5 23.5,23.5 16.5,23.5 16.5,26.5 23.5,26.5 23.5,33.5 26.5,33.5 26.5,26.5 33.5,26.5 "/>
</symbol>
<symbol id="bookmark-corner" viewBox="0 0 50 50">
<path fill="currentColor" stroke="currentColor" d="M20.4,29.512c-0.213,0.21-0.488,0.356-0.799,0.407c-0.629,0.102-1.251-0.213-1.542-0.779l-3.212-6.252
if (!this.displayOnePage) {
var page = this.currentPage;
var change = false;
- if (side == 'left' && page % 2 == 1) {
+ if (side === 'left' && page % 2 === 1) {
page--;
change = true;
- } else if (side == 'right' && page % 2 == 0) {
+ } else if (side === 'right' && page % 2 === 0) {
page++;
change = true;
}
window.location.hash = "/page/" + page;
}
}
- }
- ,
- hideUnnecessaryButtons: function (page) {
- var speed = 500;
- if (page == undefined) {
- page = this.currentPage;
- speed = 0;
- }
-
+ },
+ getButtonsVisibility: function (page) {
var max = this.contentlock.getMaxPage();
- if (this.contentlock.getMaxPage() % 2 === 1 && this.datas.mobileNavigationType !== 'portrait' && this.resize.orientation !== 'portrait') {
+ if (this.contentlock.getMaxPage() % 2 === 1 &&
+ this.datas.mobileNavigationType !== 'portrait' &&
+ this.datas.mobileNavigationType !== 'mobilefirst' &&
+ this.resize.orientation !== 'portrait') {
max--;
}
var next = page < max;
var previous = (page > 1);
+ return {previous: previous, next: next};
+ },
+ hideUnnecessaryButtons: function (page) {
+ var speed = 500;
+ if (page === undefined) {
+ page = this.currentPage;
+ speed = 0;
+ }
+
+ var visibility = this.getButtonsVisibility(page);
if (Modernizr.csstransitions) {
- if (next) {
+ if (visibility.next) {
$("#next").removeClass('hidden');
} else {
$("#next").addClass('hidden');
}
- if (previous) {
+ if (visibility.previous) {
$("#previous").removeClass('hidden');
} else {
$("#previous").addClass('hidden');
} else {
$("#previous,#next").removeClass('hidden');
- if (previous) {
+ if (visibility.previous) {
$("#previous:hidden").fadeIn(speed);
} else {
$("#previous:visible").fadeOut(speed);
}
- if (next) {
+ if (visibility.next) {
$("#next:hidden").fadeIn(speed);
} else {
$("#next:visible").fadeOut(speed);
$("html").addClass('mobilefirst');
this.fluidbook.datas.soundTheme = '';
},
+
+ beforeTransition: function (page) {
+ TweenLite.to("#scroll", this.fluidbook.pagetransitions.getTransitionDuration(page), {scrollTo: 0});
+ },
+
+ afterTransition: function (page) {
+ $('#pages .mf-nav').remove();
+ $("#pages").append(this.getFooterNavigation(page));
+ this.fluidbook.resize.resize();
+ },
+
+ resize: function () {
+ var h = $(".doublePage").outerHeight();
+ $('#pages .mf-nav').css('top', h);
+ h += $("#pages .mf-nav").outerHeight();
+
+ $("#pages,#fluidbook").css({height: h});
+ $("#pages").css('maxHeight', h);
+ },
+
+ getFooterNavigation: function (page) {
+ var visibility = this.fluidbook.getButtonsVisibility(page);
+ var footer = '<div class="mf-nav">';
+ if (visibility.previous) {
+ footer += '<a class="previous" href="#/page/' + (page - 1) + '">' + getSpriteIcon('interface-previous-simple') + __('Previous') + '</a>';
+ }
+ footer += '<span>' + page + '/' + this.fluidbook.datas.pages + '</span>';
+ if (visibility.next) {
+ footer += '<a class="next" href="#/page/' + (page + 1) + '">' + __('Next') + getSpriteIcon('interface-next-simple') + '</a>';
+ }
+ footer += '</div>';
+
+ return footer;
+ },
}
\ No newline at end of file
$(".axis_y").removeClass('axis_y');
$(".axis_x").removeClass('axis_x');
$("#links").hide();
+
+ if (this.fluidbook.mobilefirst.enabled) {
+ this.fluidbook.mobilefirst.beforeTransition(page);
+ }
+
this.fluidbook.hideLoader();
this.fluidbook.hideUnnecessaryButtons(page);
var animationDuration = transition <= 1 ? 0 : parseFloat(this.fluidbook.datas.mobileTransitionDuration);
$this.transitionning = false;
}, 10);
this.fluidbook.links.initLinks();
+ if (this.fluidbook.mobilefirst.enabled) {
+ this.fluidbook.mobilefirst.afterTransition(page);
+ }
$(this.fluidbook).trigger('fluidbook.page.change.end', [this.fluidbook.currentPage]);
},
var cssNavScale = [navScale, navScale];
var cssHeaderScale = [headerScale, headerScale];
- $("#main,#z").css({
+ $("#main,#z,#scroll").css({
width: this.ww,
height: this.hh
});
}
this.bookScale = Math.min(aw / fww, ah / fhh);
+ var origin = ['50%', '50%'];
+ if (this.fluidbook.mobilefirst.enabled) {
+ this.bookScale = Math.min(aw / fww, 1);
+ origin[1] = '0%';
+ }
var fw = this.bookScale * fww;
var fh = this.bookScale * fhh;
$("#fluidbook,#shadow").transform({
scale: [this.bookScale, this.bookScale],
- origin: ['50%', '50%']
+ origin: origin
});
// Hack to fix #2552
if (this.fluidbook.support.iOS && this.fluidbook.pagetransitions.getTransitionType() === 'flip3d') {
$('#fluidbook').css('transform', 'translate3d(0,0,-1px) scale(' + this.bookScale + ',' + this.bookScale + ')');
}
+
var top = marginTop + (ah - fhh) / 2;
+
var left = marginLeft + (aw - fww) / 2;
+ if (this.fluidbook.mobilefirst.enabled) {
+ top = marginTop;
+ }
$("#fluidbook,#shadow").css({
top: top,
left: left,
width: fww,
height: fhh
});
+
+ if (this.fluidbook.mobilefirst.enabled) {
+ this.fluidbook.mobilefirst.resize();
+ }
+
this.centerOffset = fw / 4;
this.fluidbook.pagetransitions.centerBook();
$('#loader').css({top: this.hh / 2, left: this.ww / 2});
this.fluidbook.background.resize(this.ww, this.hh);
if (this.fluidbook.slider) {
- this.fluidbook.slider.resize(this.ww, this.hh, this.orientation == 'portrait');
+ this.fluidbook.slider.resize(this.ww, this.hh, this.orientation === 'portrait');
}
var timeout = 0;
position: absolute;
top: 0px;
left: 0px;
- overflow: hidden;
+ overflow-x: hidden;
+ overflow-y: hidden;
}
/* Search */
}
}
+#scroll {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 11;
+ overflow-x: hidden;
+ overflow-y: auto;
+ .hidescrollbar();
+}
+
/* Fluidbook */
#fluidbook {
position: absolute;
#loadedcontents {
display: none;
}
+
+@import "mobilefirst.less";
\ No newline at end of file
.overlayBackground() {
- background-color: @menu-overlay;
- transition: opacity 400ms;
- opacity: 0;
+ background-color: @menu-overlay;
+ transition: opacity 400ms;
+ opacity: 0;
}
.hideifnot(@display) when not (@display) {
- display: none;
+ display: none;
}
.highlight-area(@color) {
- border-color: @color;
- background-color: fade(@color, 30%);
+ border-color: @color;
+ background-color: fade(@color, 30%);
}
.page-transition(@factor) {
- -moz-transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
- -webkit-transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
- -ms-transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
- -o-transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
- transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
+ -moz-transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
+ -webkit-transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
+ -ms-transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
+ -o-transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
+ transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
}
.menu-color(@base-color) {
- @green: max(45, min(255 - 45, green(@base-color)));
- @red: max(45, min(255 - 45, red(@base-color)));
- @blue: max(45, min(255 - 45, blue(@base-color)));
- @secondary: overlay(rgb(@red, @green, @blue), #c0c0c0);
- .menu-color-a(@base-color, @secondary);
+ @green: max(45, min(255 - 45, green(@base-color)));
+ @red: max(45, min(255 - 45, red(@base-color)));
+ @blue: max(45, min(255 - 45, blue(@base-color)));
+ @secondary: overlay(rgb(@red, @green, @blue), #c0c0c0);
+ .menu-color-a(@base-color, @secondary);
}
.menu-color(@base-color,@secondary) {
- .menu-color-a(@base-color, @secondary);
+ .menu-color-a(@base-color, @secondary);
}
.menu-color-a(@background,@button) {
- background: @background;
+ background: @background;
- input[type="text"] {
- background: @button;
- }
+ input[type="text"] {
+ background: @button;
+ }
- .fonctions {
- a {
- background-color: @button;
- }
- }
+ .fonctions {
+ a {
+ background-color: @button;
+ }
+ }
- .caption {
- div.button, a {
- &.back {
- background-color: @button;
- }
- }
- }
+ .caption {
+ div.button, a {
+ &.back {
+ background-color: @button;
+ }
+ }
+ }
- .chapters {
- a:hover {
+ .chapters {
+ a:hover {
- background-color: @button;
- }
- }
+ background-color: @button;
+ }
+ }
}
.shadowedge-fade-item() {
- transition-property: opacity;
- &.hidden {
- opacity: 0;
- }
- .ios & {
- transition: none !important;
- }
+ transition-property: opacity;
+ &.hidden {
+ opacity: 0;
+ }
+ .ios & {
+ transition: none !important;
+ }
}
+
+.hidescrollbar() {
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+}
\ No newline at end of file
--- /dev/null
+#shadow {
+ .mobilefirst & {
+ display: none;
+ }
+}
+
+.mf-nav {
+ position: absolute;
+ left: 0;
+ width: 100%;
+ height: unit(110*@css-scale, px);
+ padding: unit(30*@css-scale, px) 0;
+ color: @page-number-color;
+ font-size: unit(20*@css-scale, px);
+ font-weight: 600;
+ @media @small {
+ @s: 1.25;
+ font-size: unit(20*@s*@css-scale, px);
+ padding: unit(30*@s*@css-scale, px) 0;
+ height: unit(110*@s*@css-scale, px);
+ }
+
+ span {
+ display: block;
+ text-align: center;
+ margin-top: 0.9em;
+ @media @small {
+ margin-top: 0.7em;
+ }
+ }
+
+ a {
+ display: inline-block;
+ color: @arrows-color;
+ background-color: @arrows-background;
+ font-size: 1.1em;
+ line-height: 1;
+ font-weight: 400;
+ position: absolute;
+ top: 1.5em;
+ height: 2.5em;
+ width: 30%;
+ text-align: center;
+ padding-top: 0.7em;
+ @media @small {
+ width: 40%;
+ }
+
+ &.next {
+ right: 0;
+
+ svg {
+ right: .8em;
+ }
+ }
+
+ &.previous {
+ left: 0;
+
+ svg {
+ left: .8em;
+ }
+ }
+
+ svg {
+ position: absolute;
+ top: 0.8em;
+ height: 1em;
+ width: auto;
+ }
+ }
+}
\ No newline at end of file
@import "book-variables";
-@font: 'Open Sans', Arial, Helvetica, sans-serif;
\ No newline at end of file
+
+@font: 'Open Sans', Arial, Helvetica, sans-serif;
+@small: ~"screen and (max-width: 640px)";
\ No newline at end of file
projects / fluidbook-html5.git / commitdiff
