<path d="M29,39.8L29,39.8c-2.3,0-4.1-1.8-4.1-4.1V18c0-2.3,1.8-4.1,4.1-4.1h0c2.3,0,4.1,1.8,4.1,4.1v17.7
C33.1,38,31.3,39.8,29,39.8z"/>
</symbol>
+ <symbol id="help-swipe" viewBox="0 0 292 388">
+ <path d="M129.7,80.2c-1.3,0-2.5-.5-3.5-1.5l-18.8-18.8-18.8,18.8c-1.9,1.9-5.1,1.9-7,0-1.9-1.9-1.9-5.1,0-7l22.3-22.3c.9-.9,2.2-1.5,3.5-1.5s2.6.5,3.5,1.5l22.3,22.3c1.9,1.9,1.9,5.1,0,7-1,1-2.2,1.5-3.5,1.5Z"/>
+ <path d="M107.4,102.5c-2.7,0-5-2.2-5-5v-41.3c0-2.7,2.2-5,5-5s5,2.2,5,5v41.3c0,2.7-2.2,5-5,5Z"/>
+ <path d="M107.4,318.3c-1.3,0-2.5-.5-3.5-1.5l-22.3-22.3c-1.9-1.9-1.9-5.1,0-7,1.9-1.9,5.1-1.9,7,0l18.8,18.8,18.8-18.8c1.9-1.9,5.1-1.9,7,0,1.9,1.9,1.9,5.1,0,7l-22.3,22.3c-1,1-2.2,1.5-3.5,1.5Z"/>
+ <path d="M107.4,315c-2.7,0-5-2.2-5-5v-41.3c0-2.7,2.2-5,5-5s5,2.2,5,5v41.3c0,2.7-2.2,5-5,5Z"/>
+ <path d="M285.4,387h0c-2.7,0-5-2.2-5-5v-155.2c-2.4-23.3-12-44.9-27.6-62.3l-48.3-53.4c-1.8-2-1.7-5.2.4-7,2-1.8,5.2-1.7,7,.4l48.3,53.4c17.2,19.1,27.6,42.7,30.3,68.2,0,.2,0,.3,0,.5v155.4c-.1,2.7-2.3,5-5.1,5Z"/>
+ <path d="M207,387c-1.2,0-2.4-.4-3.3-1.3-47.4-43-62.9-112-64.3-118.7-4.6-11.7-11.4-22.1-20.3-31l-32.5-32.5c-11.1-11.1-11.5-28.9-.9-40.5,10.7-11.8,28.6-12.9,40.7-2.5l30.7,26.3c9.2,7.9,19.7,13.7,31.2,17.4l38.6,9.9c2.7.7,4.3,3.4,3.6,6-.7,2.7-3.4,4.2-6,3.6l-38.7-9.9c0,0-.2,0-.3,0-12.8-4.1-24.5-10.6-34.8-19.4l-30.7-26.3c-8-6.9-19.9-6.1-27,1.6-7,7.7-6.7,19.5.6,26.8l32.5,32.5c10,10,17.6,21.7,22.7,34.8.1.3.2.5.2.8.1.7,14.9,71.7,61.3,113.8,2,1.8,2.2,5,.3,7-1,1.1-2.3,1.6-3.7,1.6Z"/>
+ <path d="M93.4,232c-.5,0-1.1,0-1.6-.3-15.5-5.3-28.2-18.8-33.2-35.2-4.6-15.1-2-30.7,7.2-42.8,10.1-15.4,27.7-23.2,47.1-20.8,19.8,2.4,36.6,15.3,42.6,32.7.9,2.6-.5,5.4-3.1,6.3-2.6.9-5.4-.5-6.3-3.1-4.8-13.9-18.3-24.1-34.4-26.1-15.6-1.9-29.7,4.3-37.7,16.5,0,0-.1.2-.2.3-7.4,9.7-9.4,21.8-5.7,34,4.1,13.4,14.4,24.4,26.9,28.7,2.6.9,4,3.7,3.1,6.3-.7,2.1-2.6,3.4-4.7,3.4Z"/>
+ <path d="M188.4,370.1H26.4c-13.8,0-25-11.2-25-25V26C1.5,12.2,12.7,1,26.4,1h161.9c13.8,0,25,11.2,25,25v190.2h-9.9V26c0-8.3-6.7-15-15-15H26.4c-8.3,0-15,6.7-15,15v319.2c0,8.3,6.7,15,15,15h161.9v9.9Z"/>
+ </symbol>
<symbol id="help-touch-zoom" viewBox="0 0 174 72">
<path d="M34.6,66c-0.1,0-0.2,0-0.2,0l-15.8-4c-2.4-0.6-4.3-2.6-4.8-5c-0.3-1.7,0-3.4,1-4.8s2.4-2.4,4.1-2.7
c0.5-0.1,0.9-0.1,1.4-0.1l2.8,0.1l-8.8-18.9c-0.7-1.5-0.7-3.1-0.2-4.6s1.7-2.7,3.1-3.4c1.5-0.7,3.1-0.7,4.6-0.2
this.scrollHolder = null;
this.ignoreScroll = false;
this.scrollingPage = null;
+ this.currentlyActive = false;
+ this.helpNeeded = true;
this.init();
}
$(this.fluidbook).on('fluidbook.orientationchange', function () {
$this.checkActive();
});
- this.checkActive();
$(this.fluidbook).on('fluidbook.resize', function (e, data) {
$this.resize(data);
});
+ $(this.fluidbook).on('fluidbook.splash.hide', function () {
+ $this.checkActive();
+ });
+
}
},
+ ready: function () {
+
+ },
+
resetPage: function (page) {
let p = $(this.fluidbook.createPage(page, 'epage_'));
- p.find('.background').append('<img src="data/thumbnails/p' + page + '.jpg" alt=""/>');
+ p.css('background-image', 'url(data/thumbnails/p' + page + '.jpg)');
+ p.find('.background').append('<img src="" alt=""/>');
if ($(p).find('.links').length === 0) {
p.append('<div class="links" />');
}
let $this = this;
let h = $('<div class="scrollholder"></div>');
for (let i = 1; i <= this.fluidbook.settings.pages; i++) {
- h.append(this.resetPage(i));
+ let ph = $('<div class="epage_holder"><div class="padding"> <br> <br> <br> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" /></div></div>');
+ ph.append(this.resetPage(i));
+ h.append(ph);
}
+ 0
$("#elasticpages").append(h);
this.scrollHolder = $("#elasticpages .scrollholder");
this.scrollHolder.get(0).addEventListener('scroll', function (e) {
+ $this.discardHelp();
$this.scrolling();
});
},
return;
}
let scrollPos = $this.scrollHolder.scrollTop();
- let p = Math.round(100 * scrollPos / $this.pageHeight) / 100;
+ let p = Math.round(100 * scrollPos / $this.fluidbook.resize.hh) / 100;
if (p % 1 !== 0) {
return;
}
$this.skipChangePage = false;
}, 50)
$this.afterTransition($this.scrollingPage);
+ clearTimeout(this.helpTimeout);
}
}
},
checkActive: function () {
if (this.isActive()) {
- this.switchToElastic();
+ if (!this.currentlyActive) {
+ this.switchToElastic();
+ }
} else {
- this.switchToNormal();
+ if (this.currentlyActive) {
+ this.switchToNormal();
+ }
}
},
switchToElastic: function () {
+ this.currentlyActive = true;
+ if (this.helpNeeded) {
+ this.startHelpTimeout();
+ }
$("body").addClass('elastic');
+ $("#currentDoublePage .page").remove();
+ this.setCurrentPage(this.fluidbook.currentPage, 0);
},
switchToNormal: function () {
+ this.currentlyActive = false;
$("body").removeClass('elastic');
+ this.fluidbook.reloadCurrentPage();
},
isEnabled: function () {
return (this.isEnabled() && this.fluidbook.displayOnePage);
},
- setCurrentPage: function (page) {
- if (!this.isActive() || this.skipChangePage ) {
+ setCurrentPage: function (page, duration) {
+ if (!this.isActive() || this.skipChangePage) {
return;
}
+ if (duration === undefined) {
+ duration = 0.5;
+ }
let $this = this;
this.ignoreScroll = true;
gsap.to(this.scrollHolder, {
- duration: 0.5, scrollTo: this.pageHeight * (page - 1), onComplete: function () {
+ duration: duration, scrollTo: this.fluidbook.resize.hh * (page - 1), onComplete: function () {
$this.afterTransition(page);
$this.ignoreScroll = false;
}
this.fluidbook.links.initLinks(page);
},
- resize: function (data) {
- let w = parseFloat($("#fluidbook").css('width'));
- this.pageHeight = w / this.fluidbook.pageRatio;
- $("#elasticpages .page,#elasticpages .scrollholder").css({height: this.pageHeight});
+ startHelpTimeout: function () {
+ console.log('start help timeout');
+ let $this = this;
+ this.helpTimeout = setTimeout(function () {
+ if ($this.isActive()) {
+ $this.showHelp();
+ }
+ }, 6000);
+ },
+
+ showHelp: function () {
+ let $this = this;
+ this.helpNeeded = false;
+ clearTimeout(this.helpTimeout);
+ $("body").append('<div id="helpSwipe">' + getSpriteIcon('interface-close') + '<div>' + getSpriteIcon('help-swipe') + '<span>' + this.fluidbook.l10n.__('Swipe to change page') + '</span></div></div>');
+ setTimeout(function () {
+ $("#helpSwipe").addClass('show');
+ });
+ $("#helpSwipe").on(this.fluidbook.input.clickEvent, function () {
+ $this.discardHelp();
+ });
+ $(document).on('mousewheel', function (e) {
+ $this.discardHelp();
+ });
+ },
+
+ discardHelp: function () {
+ if ($("#helpSwipe").length === 0) {
+ return;
+ }
+ $("#helpSwipe").removeClass('show');
+ setTimeout(function () {
+ $("#helpSwipe").remove()
+ }, 1000);
+ },
+ resize: function (data) {
+ let pw = this.fluidbook.settings.width;
+ let ph = this.fluidbook.settings.height;
+ let s = Math.min(data.ww / pw, data.hh / ph);
+ this.pageHeight = ph * s;
+ this.pageWidth = pw * s;
+ $("#elasticpages .page").css({height: this.pageHeight});
+ let paddingV = (data.hh - this.pageHeight) / 2;
+ let paddingH = (data.ww - this.pageWidth) / 2;
+ $("#elasticpages .epage_holder").css({height: data.hh, padding: paddingV + "px " + paddingH + "px"});
+ $("#elasticpages .epage_holder .bg").css('height', paddingV);
},
};
\ No newline at end of file
setTimeout(function () {
$this.help.displayAtStartup();
}, 1500);
+ this.elasticslide.ready();
},
loadPlugins: function () {
},
reloadCurrentPage: function () {
- this.pageTransition(this.currentPage);
+ this.pagetransitions.pageTransition(this.currentPage);
},
readingPage: function (side) {
return '';
}
return this.physicalToVirtual(physical);
- }, clickLogo: function () {
+ },
+
+ clickLogo: function () {
if (this.settings.url_link.indexOf('#') === 0) {
window.location.hash = this.settings.url_link;
} else {
}
side = (side ? side : 'elasticSlide');
- links.html('<div class="' + side + 'Container container"><div class="linksHolder"></div></div>');
+ let chtml = '<div class="' + side + 'Container container"><div class="linksHolder"></div></div>';
+ if (side === 'elasticSlide') {
+ links.html(chtml);
+ } else {
+ links.append(chtml);
+ }
+
var container = links.find('.' + side + 'Container');
var llinks = this.fluidbook.loader.handleExtension(this.fluidbook.settings.links[page]);
if (llinks !== '') {
if ($(container).length === 0) {
container = false;
}
+ if ((container !== false && this.fluidbook.elasticslide.isActive()) ||
+ (container === false && !this.fluidbook.elasticslide.isActive())) {
+ return;
+ }
if (position !== 'left' && position !== 'right') {
position = false;
}
var marginTop, marginBottom, marginLeft, marginRight;
- if (this.fluidbook.pad.enabled) {
+ if (this.fluidbook.pad.enabled || this.fluidbook.elasticslide.isActive()) {
extraX = 0;
this.marginTop = 0;
this.marginBottom = 0;
if ($("#splash").length == 0) {
return;
}
- console.log('Hide', (Date.now() - this.initDate) / 1000);
+ //console.log('Hide', (Date.now() - this.initDate) / 1000);
this.waitForReady = false;
try {
navigator.splashscreen.hide();
hideIfPossible: function () {
if (!this.waitForReady && !this.waitForTimer) {
- console.log('Hide if possible', (Date.now() - this.initDate) / 1000);
+ //console.log('Hide if possible', (Date.now() - this.initDate) / 1000);
this._hide();
}
},
}, 1500);
this.fluidbook.allowChangePage();
+ this.fluidbook.elasticslide.checkActive();
$(this.fluidbook).trigger('fluidbook.splash.hide');
this.isHidding = false;
- console.log('Hide splash', (Date.now() - this.initDate) / 1000);
+ //console.log('Hide splash', (Date.now() - this.initDate) / 1000);
},
}
\ No newline at end of file
}
FluidbookLinksZoom.prototype = {
-
init: function () {
var $this = this;
// ToDo: consider re-using existing popinOverlay div?
zoomLink: function (link) {
- var $this = this,
- $link = $(link),
- links = [],
- zoomMargin = 50,
- zoomZonesGap = 30, // Space between grouped zoom links
- gapsTotal,
- availableWidth = this.fluidbook.resize.ww - (2 * zoomMargin),
- availableHeight = this.fluidbook.resize.hh - (2 * zoomMargin),
- maxZoom = parseFloat($(link).data('maxzoom')) || 2;
+ var $this = this;
+ var $link = $(link);
+ var links = [];
+ var zoomMargin = this.fluidbook.elasticslide.isActive() ? 0 : 50;
+ var zoomZonesGap = 30; // Space between grouped zoom links
+ var gapsTotal;
+ var availableWidth = this.fluidbook.resize.ww - (2 * zoomMargin);
+ var availableHeight = this.fluidbook.resize.hh - (2 * zoomMargin);
+ var maxZoom = parseFloat($(link).data('maxzoom')) || 2;
// If the interface is zoomed in, we must zoom out first
if (this.fluidbook.zoom.zoom > 1) {
links.forEach(function (zoomLink, index) {
// console.log(index, 'Found link with ID: ' + zoomLink.attr('id'));
- var zoomID = zoomLink.attr('id'),
- $groupWrapper = $('#zoomPopupGroupWrapper');
+ var zoomID = zoomLink.attr('id'), $groupWrapper = $('#zoomPopupGroupWrapper');
// Add holder for each zoom zone
$groupWrapper.append('<div class="zoomPopupWrapper" id="zoomPopup_' + zoomID + '"></div>');
$groupWrapper.append('<a href="#" role="button" class="zoomPopupClose" aria-label="' + $this.fluidbook.l10n.__('close') + '" aria-keyshortcuts="Escape">' + getSpriteIcon('interface-close') + '</a>');
}
- var z = $('#zoomPopup_' + zoomID),
- box = zoomLink[0].getBoundingClientRect(), // Should return full values without rounding
- parent = zoomLink.closest('.link'),
- baseWidth = parseInt(zoomLink.data('width')), // Width of the original link from the editor
+ var z = $('#zoomPopup_' + zoomID), box = zoomLink[0].getBoundingClientRect(), // Should return full values without rounding
+ parent = zoomLink.closest('.link'), baseWidth = parseInt(zoomLink.data('width')), // Width of the original link from the editor
baseHeight = parseInt(zoomLink.data('height')), // Height of the original link from the editor
maxZoom = parseFloat(zoomLink.data('maxzoom')) || 2, // The default value for this should match that of the compiler in zoomLink::generateImage()
- zoomX,
- zoomY,
- zoomWidth,
- zoomHeight,
- zoomScale;
+ zoomX, zoomY, zoomWidth, zoomHeight, zoomScale;
if ($(parent).length === 0) {
return;
$this.fluidbook.hideLoader();
z.show();
$this.showOverlay();
+ z.parent().find('.zoomPopupClose').css('opacity', 1);
// Trigger zoom up animation just after showing zoom element
setTimeout(function () {
});
});
-
this.fluidbook.stats.track(2, this.fluidbook.currentPage);
},
},
zoomLinkReset: function (immediate) {
-
var $this = this;
if ($('.zoomPopupWrapper:visible').length === 0) {
// Close each popup that is open
$wrapper.find('.zoomPopupWrapper').each(function () {
var z = $(this);
- z.find('.zoomPopupClose').css('opacity', '0');
+ z.parent().find('.zoomPopupClose').css('opacity', '0');
+
if (immediate) {
$('.zoomPopupWrapper').hide();
}
z.css({
- transform: 'translate(0,0) scale(' + z.data('starting-scale') + ')',
- boxShadow: '0 0 0 rgba(0,0,0,0.3)',
+ transform: 'translate(0,0) scale(' + z.data('starting-scale') + ')', boxShadow: '0 0 0 rgba(0,0,0,0.3)',
});
});
$("#zoomPopupOverlay").hide();
}, delay);
},
+
showOverlay: function () {
$("#zoomPopupOverlay").css('opacity', 0).show();
setTimeout(function () {
-.elastic #pages {
- display: none;
+.elastic {
+ #pages {
+ display: none;
+ }
+
+ #center-shadow {
+ display: none;
+ }
+
+ #fluidbook {
+ left: 0 !important;
+ top: 0 !important;
+ width: 100vw !important;
+ height: 100vh !important;
+ }
+
+ #menuOpener {
+ background-color: @arrows-background;
+ border-radius: 2px 2px;
+ width: 40px;
+ height: 40px;
+ top: 10px;
+ left: 10px;
+ box-shadow: 0 3px 3px rgba(0, 0, 0, .1);
+ transform: none !important;
+
+ span {
+ display: none;
+ }
+
+ .svg-icon {
+ color: @arrows-color;
+ width: 25px;
+ margin: 0 12px;
+
+ }
+ }
+
+ #zoomPopupBackground .bg {
+ background-color: transparent;
+ }
+
+ .zoomPopupClose {
+ top: 10px;
+ right: 10px;
+ border-radius: 2px 2px;
+ width: 40px;
+ height: 40px;
+ box-shadow: 0 3px 3px rgba(0, 0, 0, .1);
+ padding: 12px;
+ }
}
#elasticpages {
display: none;
}
+ .epage_holder {
+ scroll-snap-align: start;
+ scroll-snap-stop: always;
+ position: relative;
+
+ .page {
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ background-position: 0 0;
+
+ .background {
+ background-color: transparent;
+
+ img[src=""] {
+ opacity: 0;
+ }
+
+ &.loaded {
+ background-color: @pages-background;
+ }
+ }
+ }
+
+ &:last-child {
+ padding-bottom: 300px;
+ }
+
+ .padding {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 100%;
+
+ img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+
.page {
display: block;
position: relative;
- scroll-snap-align: center;
- scroll-snap-stop: always;
}
}
+}
+
+#helpSwipe {
+ background-color: rgba(0, 0, 0, 0.8);
+ color: #fff;
+ opacity: 0;
+ transition: opacity 400ms;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 30;
+ text-align: center;
+ padding: 0 25%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+
+ .interface-close {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ width: 30px;
+ height: 30px;
+ }
+
+ span {
+ display: block;
+ margin-top: 50px;
+ font-size: 25px;
+ line-height: 30px;
+ }
+
+ &.show {
+ opacity: 1;
+ }
}
\ No newline at end of file
z-index: 33;
.button-hover();
color: @menu-text;
- opacity: 1;
+ opacity: 0;
transition: opacity 500ms;
.svg-icon {
projects / fluidbook-html5.git / commitdiff
