<symbol id="interface-menu" viewBox="0 0 512 512">
<path d="m0 26l512 0 0 51-512 0z m0 204l512 0 0 52-512 0z m0 205l512 0 0 51-512 0z"/>
</symbol>
- <symbol id="interface-next" viewBox="0 0 53 107">
- <path d="M37,39L19.7,21.8c-0.3-0.3-0.7-0.3-0.9,0l-1.4,1.4c-0.3,0.3-0.3,0.7,0,0.9L33,39.6L17.5,55.1 c-0.3,0.3-0.3,0.7,0,0.9l1.4,1.4c0.3,0.3,0.7,0.3,0.9,0L37,40.1c0.1-0.1,0.2-0.3,0.2-0.5C37.2,39.4,37.1,39.2,37,39z M30,86.5h2 v-15h-2V86.5z M26.8,78C26.7,78,26.7,78,26.8,78l-6.3-6.3c-0.3-0.3-0.7-0.3-0.9,0L19,72.2c-0.3,0.3-0.3,0.7,0,0.9l5.8,5.8L19,84.8 c-0.3,0.3-0.3,0.7,0,0.9l0.5,0.5c0.3,0.3,0.7,0.3,0.9,0l6.2-6.2c0,0,0.1,0,0.1-0.1l0.5-0.5c0.1-0.1,0.2-0.3,0.2-0.5 c0-0.2-0.1-0.3-0.2-0.5L26.8,78z"/>
- </symbol>
- <symbol id="interface-previous" viewBox="0 0 53 107">
- <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 id="interface-next" viewBox="0 0 20 36.1">
+ <path d="M19.8,17.4L2.5,0.2c-0.3-0.3-0.7-0.3-0.9,0L0.2,1.6c-0.3,0.3-0.3,0.7,0,0.9L15.8,18L0.3,33.5c-0.3,0.3-0.3,0.7,0,0.9
+ l1.4,1.4c0.3,0.3,0.7,0.3,0.9,0l17.2-17.3c0.1-0.1,0.2-0.3,0.2-0.5C20,17.8,19.9,17.6,19.8,17.4z"/>
+ </symbol>
+ <symbol id="interface-prev" viewBox="0 0 20 36.1">
+ <path d="M0,18c0,0.2,0.1,0.4,0.2,0.5l17.2,17.3c0.2,0.3,0.6,0.3,0.9,0l1.4-1.4c0.3-0.2,0.3-0.6,0-0.9L4.2,18L19.8,2.5
+ c0.3-0.2,0.3-0.6,0-0.9l-1.4-1.4c-0.2-0.3-0.6-0.3-0.9,0L0.2,17.4C0.1,17.6,0,17.8,0,18z"/>
+ </symbol>
+ <symbol id="interface-last" viewBox="0 0 13.2 15">
+ <path d="M11.2,15h2V0h-2V15z M8,6.5C7.9,6.5,7.9,6.5,8,6.5L1.7,0.2C1.4-0.1,1-0.1,0.8,0.2L0.2,0.7c-0.3,0.3-0.3,0.7,0,0.9L6,7.4
+ l-5.8,5.9c-0.3,0.3-0.3,0.7,0,0.9l0.5,0.5C1,15,1.4,15,1.6,14.7l6.2-6.2c0,0,0.1,0,0.1-0.1l0.5-0.5c0.1-0.1,0.2-0.3,0.2-0.5
+ S8.5,7.1,8.4,6.9L8,6.5z"/>
+ </symbol>
+ <symbol id="interface-first" viewBox="0 0 13.2 15">
+ <rect y="0" width="2" height="15"/>
+ <path d="M4.8,6.9C4.7,7.1,4.6,7.2,4.6,7.4s0.1,0.4,0.2,0.5l0.5,0.5c0,0.1,0.1,0.1,0.1,0.1l6.2,6.2c0.2,0.3,0.6,0.3,0.9,0l0.5-0.5
+ c0.3-0.2,0.3-0.6,0-0.9L7.2,7.4L13,1.6c0.3-0.2,0.3-0.6,0-0.9l-0.6-0.5c-0.2-0.3-0.6-0.3-0.9,0L5.2,6.5c0.1,0,0.1,0,0,0L4.8,6.9z"/>
</symbol>
<symbol id="interface-minus" viewBox="0 0 50 50">
<rect x="16.5" y="23.5" width="17" height="2.9"/>
previous = this.fluidbook.l10n.__('previous chapter');
}
if (this.fluidbook.mobilefirst.enabled) {
- var next = this.fluidbook.l10n.__('next page');
- var previous = this.fluidbook.l10n.__('previous page');
+ next = this.fluidbook.l10n.__('next page');
+ previous = this.fluidbook.l10n.__('previous page');
}
}
help += '<div class="interface">';
if (this.fluidbook.interface.arrowsEnabled()) {
+ var labels = this.fluidbook.interface.getLabels();
help += '<div class="help-arrows">';
- help += '<div class="next">' + next + '</div>';
- help += '<div class="last">' + this.fluidbook.l10n.__('last page') + '</div>';
- help += '<div class="previous">' + previous + '</div>';
- help += '<div class="first">' + this.fluidbook.l10n.__('frontpage') + '</div>';
+ help += '<div class="next">' + labels.next + '</div>';
+ help += '<div class="last">' + labels.last + '</div>';
+ help += '<div class="previous">' + labels.previous + '</div>';
+ help += '<div class="first">' + labels.first + '</div>';
help += '</div>';
}
if ($("#slider").length > 0) {
setTimeout(function () {
$this.resize();
- $("body,#previous,#next").addClass('help');
+ $("body,#prev-arrows,#next-arrows").addClass('help');
this.fluidbook.showAllButtons();
$this.view.css('opacity', 1);
}, 50);
if (this.isVisible()) {
this.overlay.hide();
this.view.hide();
- $("body,#previous,#next").removeClass('help');
+ $("body,#prev-arrows,#next-arrows").removeClass('help');
this.fluidbook.hideUnnecessaryButtons();
if (this.fluidbook.support.isMobile) {
$("*").unbind('click', function () {
var firstTop;
if (this.fluidbook.interface.arrowsEnabled()) {
- var arrow = $('#interface #next').get(0).getBoundingClientRect(); // Used for calculating offsets for both #next & #previous
+ var arrow = $('#interface #next-arrows').get(0).getBoundingClientRect(); // Used for calculating offsets for both #next & #previous
// The arrow element contains both arrows in a single image
// so we calculate the top position of the labels by percentage
nextTop = Math.round(arrow.top + arrow.height * 0.35);
}
FluidbookInterface.prototype = {
+
+
+
init: function () {
var $this = this;
if (this.arrowsEnabled()) {
+ var labels=this.getLabels();
var res = '';
if ($('html').hasClass('ltr')) {
- res += this.fluidbook.nav.getLink('interface-previous', '#', 'previous', '', '', '', true);
- res += this.fluidbook.nav.getLink('interface-next', '#', 'next', '', '', '', true);
+ res += '<div id="next-arrows">';
+ res += this.fluidbook.nav.getLink('interface-next', '#', 'next', '', labels.next, 'arrow-top', true);
+ res += this.fluidbook.nav.getLink('interface-last', '#', 'last', '', labels.last, 'arrow-bottom', true);
+ res += '</div>';
+ res += '<div id="prev-arrows">';
+ res += this.fluidbook.nav.getLink('interface-prev', '#', 'previous', '', labels.previous, 'arrow-top', true);
+ res += this.fluidbook.nav.getLink('interface-first', '#', 'first', '', labels.first, 'arrow-bottom', true);
+ res += '</div>';
} else {
- res += this.fluidbook.nav.getLink('interface-previous', '#', 'next', '', '', '', true);
- res += this.fluidbook.nav.getLink('interface-next', '#', 'previous', '', '', '', true);
+ res += '<div id="next-arrows">';
+ res += this.fluidbook.nav.getLink('interface-next', '#', 'previous', '', labels.previous, 'arrow-top', true);
+ res += this.fluidbook.nav.getLink('interface-last', '#', 'first', '', labels.first, 'arrow-bottom', true);
+ res += '</div>';
+ res += '<div id="prev-arrows">';
+ res += this.fluidbook.nav.getLink('interface-prev', '#', 'next', '', labels.next, 'arrow-top', true);
+ res += this.fluidbook.nav.getLink('interface-first', '#', 'last', '', labels.last, 'arrow-bottom', true);
+ res += '</div>';
}
$('#interface').append(res);
- $(document).on('click', '#next', goNextPage);
- $(document).on('click', '#previous', goPreviousPage);
+ $(document).on('click', '#next', function () {
+ if ($this.fluidbook.help.isVisible()) {
+ return false;
+ }
+ $this.fluidbook.interface.resetTimeout();
+ if ($this.fluidbook.pad.enabled) {
+ $this.fluidbook.goNextChapter();
+ } else {
+ $this.fluidbook.goNextPage();
+ }
+ return false;
+ });
+ $(document).on('click', '#previous', function () {
+ if ($this.fluidbook.help.isVisible()) {
+ return;
+ }
+ $this.fluidbook.interface.resetTimeout();
+ if ($this.fluidbook.pad.enabled) {
+ $this.fluidbook.goPreviousChapter();
+ } else {
+ $this.fluidbook.goPreviousPage();
+ }
+ return false;
+ });
+ $(document).on('click', '#first', function () {
+ if ($this.fluidbook.help.isVisible()) {
+ return false;
+ }
+ $this.fluidbook.interface.resetTimeout();
+ $this.fluidbook.goFirstPage();
+ return false;
+ });
+ $(document).on('click', '#last', function () {
+ if ($this.fluidbook.help.isVisible()) {
+ return false;
+ }
+ $this.fluidbook.interface.resetTimeout();
+ $this.fluidbook.goLastPage();
+ return false;
+ });
this.initArrowsVisibilityManagement();
}
});
},
+ getLabels: function () {
+ var next = this.fluidbook.l10n.__('next double page');
+ var previous = this.fluidbook.l10n.__('previous double page');
+ if (this.fluidbook.pad.enabled) {
+ next = this.fluidbook.l10n.__('next chapter');
+ previous = this.fluidbook.l10n.__('previous chapter');
+ }
+ if (this.fluidbook.mobilefirst.enabled) {
+ next = this.fluidbook.l10n.__('next page');
+ previous = this.fluidbook.l10n.__('previous page');
+ }
+ return {
+ next: next,
+ previous: previous,
+ first: this.fluidbook.l10n.__('frontpage'),
+ last: this.fluidbook.l10n.__('last page')
+ }
+ },
+
arrowsEnabled: function () {
switch (this.fluidbook.settings.arrowsEnabled) {
case '0':
getInterfaceSelector: function () {
var selector = '';
if (this.arrowsEnabled()) {
- selector = '#next,#previous'
+ selector = '#next-arrows,#prev-arrows'
}
if (this.fluidbook.pad.enabled) {
selector = 'header,#interface';
var visibility = this.getButtonsVisibility(page);
if (visibility.next) {
- $("#next").removeClass('hidden');
+ $("#next-arrows").removeClass('hidden');
} else {
- $("#next").addClass('hidden');
+ $("#next-arrows").addClass('hidden');
}
if (visibility.previous) {
- $("#previous").removeClass('hidden');
+ $("#prev-arrows").removeClass('hidden');
} else {
- $("#previous").addClass('hidden');
+ $("#prev-arrows").addClass('hidden');
}
},
updateShadows: function (page, animationDuration) {
}
,
showAllButtons: function () {
- $("#next,#previous").addClass('help').show();
+ $("#next-arrows,#prev-arrows").addClass('help').show();
},
setPageNumbers: function () {
}
// Only the horizontal icon menu should have the tooltips
- if (navType === 'horizontalNav') {
- if (help !== undefined && help !== '') {
+ if (help !== undefined && help !== '') {
+ if (navType === 'horizontalNav') {
res += ' data-tooltip="' + this.fluidbook.l10n.__(help) + '"';
- res += ' aria-label="' + this.fluidbook.l10n.__(help) + '"';
}
+ res += ' aria-label="' + this.fluidbook.l10n.__(help) + '"';
}
-
res += '>';
if (showIcon) {
loopIndex = 0,
html = '<ul id="chapterList">';
- var $this=this;
+ var $this = this;
// Loop through all chapters and build new ULs based on level/depth
chapters.forEach(function (chapter) {
});
if (this.fluidbook.interface.arrowsEnabled()) {
- $("#next").transform({
+ $("#next-arrows").transform({
origin: [right, '50%']
});
- $("#previous").transform({
+ $("#prev-arrows").transform({
origin: [left, '50%']
});
}
}
if (this.fluidbook.interface.arrowsEnabled()) {
- $("#next").transform({
+ $("#next-arrows").transform({
scale: cssInterfaceScale,
});
- $("#previous").transform({
+ $("#prev-arrows").transform({
scale: cssInterfaceScale,
});
}
}
if (timeout > 0) {
- //$("#next,#previous").hide();
clearTimeout(this.navresizeTimeout);
this.navresizeTimeout = setTimeout(function () {
$this.resizeNav(interfaceScale)
if (this.fluidbook.interface.arrowsEnabled()) {
try {
- data.arrowLeftRect = $("#previous").get(0).getBoundingClientRect();
- data.arrowRightRect = $("#next").get(0).getBoundingClientRect();
+ data.arrowLeftRect = $("#prev-arrows").get(0).getBoundingClientRect();
+ data.arrowRightRect = $("#next-arrows").get(0).getBoundingClientRect();
} catch (e) {
}
var $this = this;
if (this.fluidbook.interface.arrowsEnabled()) {
var topNext = (this.hh - (100 * interfaceScale)) / 2;
- $("#next,#previous").css({
+ $("#next-arrows,#prev-arrows").css({
top: topNext
}).show();
}
position: static;
}
-#next, #previous {
+#next-arrows, #prev-arrows {
width: 53px;
height: 107px;
background-size: 53px 107px;
z-index: 21;
color: @arrows-color;
background-color: @arrows-background;
+
+ a {
+ position: absolute;
+ left: 0;
+ width: 100%;
+
+ &:hover {
+ svg {
+ transform: translateX(5px);
+ }
+ }
+
+ svg {
+ transition: transform 250ms;
+ position: absolute;
+ }
+
+ &.arrow-top {
+ top: 0;
+ height: 65px;
+
+ svg {
+ width: 20px;
+ height: 36.1px;
+ left: 18px;
+ top: 22px;
+ }
+ }
+
+ &.arrow-bottom {
+ top: 65px;
+ height: 42px;
+
+ svg {
+ width: 13.2px;
+ height: 15px;
+ left: 19px;
+ top: 7px;
+ }
+ }
+ }
+}
+
+#prev-arrows {
+ a {
+ &:hover {
+ svg {
+ transform: translateX(-5px);
+ }
+ }
+
+ &.arrow-top{
+ svg{
+ left: 17px;
+ }
+ }
+
+ &.arrow-bottom{
+ svg{
+ left:22px;
+ }
+ }
+ }
}
-#next, #previous, #down, #splash {
+#next-arrows, #prev-arrows, #down, #splash {
transition: opacity 400ms ease-in-out;
.ios & {
}
}
-#next.hidden.help, #previous.hidden.help {
+#next-arrows.hidden.help, #prev-arrows.hidden.help {
transition: none;
opacity: 1;
}
-#next.hidden, #previous.hidden {
+#next-arrows.hidden, #prev-arrows.hidden {
opacity: 0;
cursor: default;
pointer-events: none;
}
-.rtl #previous, .ltr #next {
+.rtl #prev-arrows, .ltr #next-arrows {
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
right: 0px;
transform-origin: 100% 0;
}
-.rtl #next, .ltr #previous {
+.rtl #next-arrows, .ltr #prev-arrows {
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
left: 0px;
projects / fluidbook-html5.git / commitdiff
