From 961a287f506bba69b6dd20530880e1810826b47c Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Wed, 16 Dec 2015 09:57:03 +0000 Subject: [PATCH] #fluidbook_apps : fix zoom problem in ios fix problem with multimedia links to visibles on background --- _index.html | 1 - js/libs/fluidbook/fluidbook.js | 4 +- js/libs/fluidbook/fluidbook.nav.js | 1 + js/libs/fluidbook/fluidbook.touch.js | 438 ++++++++++++------------ js/libs/fluidbook/fluidbook.viewport.js | 50 +-- style/fluidbook.css | 2 + 6 files changed, 250 insertions(+), 246 deletions(-) diff --git a/_index.html b/_index.html index fc88196b..04f6051a 100644 --- a/_index.html +++ b/_index.html @@ -3,7 +3,6 @@ <!-- $titre --> - diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index 27a7c0aa..f3ee6fcd 100644 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@ -31,7 +31,8 @@ Fluidbook.prototype = { this.touch = new FluidbookTouch(this); } this.background = new FluidbookBackground(this); - this.viewport = new FluidbookViewport(this.support) + this.viewport = new FluidbookViewport(); + this.viewport.updateViewport(); this.l10n = new FluidbookL10N(this, $_GET['lang']); this.video = new FluidbookVideo(this); this.bookmarks = new FluidbookBookmarks(this); @@ -62,7 +63,6 @@ Fluidbook.prototype = { else { $("body").addClass('desktop'); } - if (this.pad.enabled) { $("body").addClass('pad'); } diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js index d3236edc..57df132f 100644 --- a/js/libs/fluidbook/fluidbook.nav.js +++ b/js/libs/fluidbook/fluidbook.nav.js @@ -90,6 +90,7 @@ FluidbookNav.prototype = { } try { if (homeURL != '') { + fb('app home : ' + window.localStorage.getItem('apphome')) this.addLink('nav-home', window.localStorage.getItem('apphome'), 'home', 'home'); } } catch (err) { diff --git a/js/libs/fluidbook/fluidbook.touch.js b/js/libs/fluidbook/fluidbook.touch.js index 6c64b34a..9c914479 100644 --- a/js/libs/fluidbook/fluidbook.touch.js +++ b/js/libs/fluidbook/fluidbook.touch.js @@ -1,228 +1,228 @@ function FluidbookTouch(fluidbook) { - this.fluidbook = fluidbook; - this.scale = 1; + this.fluidbook = fluidbook; + this.scale = 1; - this.startX = 0; - this.startY = 0; - this.offsetX = 0; - this.offsetY = 0; + this.startX = 0; + this.startY = 0; + this.offsetX = 0; + this.offsetY = 0; - this.triggerOffset = 0.05; - this.triggered = false; - this.gesturing = false; + this.triggerOffset = 0.05; + this.triggered = false; + this.gesturing = false; - this.init(); + this.init(); } FluidbookTouch.prototype = { - init: function() { - this.reset(); - - $(document).on('touchstart', $.proxy(this.start, this)); - $(document).on('touchend', $.proxy(this.end, this)); - $(document).on('touchmove', $.proxy(this.move, this)); - $(document).on('touchcancel', $.proxy(this.cancel, this)); - $(document).on('gesturestart', $.proxy(this.gesturestart, this)); - $(document).on('gesturechange', $.proxy(this.gesturechange, this)); - $(document).on('gestureend', $.proxy(this.gestureend, this)); - - $(document).on('MSPointerDown', $.proxy(this.msdown, this)); - $(document).on('MSPointerUp', $.proxy(this.msup, this)); - $(document).on('MSPointerMove', $.proxy(this.msmove, this)); - }, - msdown: function(event) { - var e = event.originalEvent; - if (e.pointerType != e.MSPOINTER_TYPE_TOUCH) { - return true; - } - this._start(e.screenX, e.screenY); - return true; - }, - msup: function(event) { - var e = event.originalEvent; - if (e.pointerType != e.MSPOINTER_TYPE_TOUCH) { - return true; - } - this._end(); - }, - msmove: function(event) { - var e = event.originalEvent; - if (e.pointerType != e.MSPOINTER_TYPE_TOUCH) { - return true; - } - return this._move(e.screenX, e.screenY); - }, - allowMove: function() { - return !(this.fluidbook.support.getZoomLevel() <= 1 && !this.fluidbook.viewMode()); - }, - allowSlide: function() { - return !(this.gesturing || this.fluidbook.support.getZoomLevel() > 1 || this.fluidbook.viewMode() || this.fluidbook.help.isVisible()); - }, - reset: function() { - this.startX = 0; - this.startY = 0; - this.offsetX = 0; - this.offsetY = 0; - this.triggered = false; - }, - gesturestart: function(event) { - if (this.fluidbook.pad.enabled) { - return false; - } - var e = event.originalEvent; - this.enableUserScale(); - this.gesturing = true; - return true; - }, - gesturechange: function(event) { - if (this.fluidbook.pad.enabled) { - return false; - } - var e = event.originalEvent; - this.gesturing = true; - return true; - }, - gestureend: function(event) { - if (this.fluidbook.pad.enabled) { - return false; - } - - var e = event.originalEvent; - this.gesturing = false; - - if (DetectZoom.zoom() > 1) { - $('html').addClass('nopan'); - } else { - $('html').removeClass('nopan'); - } - return true; - }, - start: function(event) { - var e = event.originalEvent; - var touches = e.touches; - - if (touches.length > 1) { - this.enableUserScale(); - return true; - } - - this._start(touches[0].pageX, touches[0].pageY); - return true; - }, - end: function(event) { - var e = event.originalEvent; - var touches = e.touches; - - if (touches.length == 0) { - this._end(); - } - return true; - }, - testOffset: function() { - if (this.triggered) { - return false; - } - if (this.allowMove()) { - return false; - } - if (!this.fluidbook.pad.enabled) { - if (Math.abs(this.offsetX) < Math.abs(this.offsetY)) { - return false; - } - if (this.allowSlide()) { - if (this.offsetX < -this.triggerOffset) { - if (this.fluidbook.l10n.dir == 'ltr') { - this.fluidbook.goNextPage(); - } else { - this.fluidbook.goPreviousPage(); - } - - return true; - } else if (this.offsetX > this.triggerOffset) { - if (this.fluidbook.l10n.dir == 'ltr') { - this.fluidbook.goPreviousPage(); - } else { - this.fluidbook.goNextPage(); - } - return true; - } - } - } else { - // Mode mag pad - if (this.allowSlide()) { - var offset = this.offsetX; - var way = 'x'; - if (Math.abs(this.offsetX) < Math.abs(this.offsetY)) { - offset = this.offsetY; - way = 'y'; - } - - if (Math.abs(offset) < this.triggerOffset) { - return false; - } - - if (offset < -this.triggerOffset) { - if (way == 'x') { - this.fluidbook.goNextChapter(); - } else { - this.fluidbook.goNextChapterPage(); - } - } else { - if (way == 'x') { - this.fluidbook.goPreviousChapter(); - } else { - this.fluidbook.goPreviousChapterPage(); - } - } - return true; - } - } - return false; - }, - cancel: function(event) { - this.end(event); - return true; - }, - move: function(event) { - var e = event.originalEvent; - - var touches = e.touches; - - if (touches.length > 1) { - return true; - } - - return this._move(touches[0].pageX, touches[0].pageY); - }, - _start: function(x, y) { - this.startX = x; - this.startY = y; - }, - _move: function(x, y) { - if (!isNaN(this.startX)) { - this.offsetX = (x - this.startX) / $(window).width(); - } - - if (!isNaN(this.startY)) { - this.offsetY = (y - this.startY) / $(window).height(); - } - - this.testOffset(); - return this.allowMove(); - }, - _end: function() { - this.testOffset(); - this.reset(); - }, - enableUserScale: function() { - if (this.fluidbook.pad.enabled) { - this.fluidbook.viewport.maxScale = 1; - this.fluidbook.viewport.userScalable = false; - } else { - this.fluidbook.viewport.maxScale = 3; - this.fluidbook.viewport.userScalable = true; - } - this.fluidbook.viewport.updateViewport(); - } + init: function () { + this.reset(); + + $(document).on('touchstart', $.proxy(this.start, this)); + $(document).on('touchend', $.proxy(this.end, this)); + $(document).on('touchmove', $.proxy(this.move, this)); + $(document).on('touchcancel', $.proxy(this.cancel, this)); + $(document).on('gesturestart', $.proxy(this.gesturestart, this)); + $(document).on('gesturechange', $.proxy(this.gesturechange, this)); + $(document).on('gestureend', $.proxy(this.gestureend, this)); + + $(document).on('MSPointerDown', $.proxy(this.msdown, this)); + $(document).on('MSPointerUp', $.proxy(this.msup, this)); + $(document).on('MSPointerMove', $.proxy(this.msmove, this)); + }, + msdown: function (event) { + var e = event.originalEvent; + if (e.pointerType != e.MSPOINTER_TYPE_TOUCH) { + return true; + } + this._start(e.screenX, e.screenY); + return true; + }, + msup: function (event) { + var e = event.originalEvent; + if (e.pointerType != e.MSPOINTER_TYPE_TOUCH) { + return true; + } + this._end(); + }, + msmove: function (event) { + var e = event.originalEvent; + if (e.pointerType != e.MSPOINTER_TYPE_TOUCH) { + return true; + } + return this._move(e.screenX, e.screenY); + }, + allowMove: function () { + return !(this.fluidbook.support.getZoomLevel() <= 1 && !this.fluidbook.viewMode()); + }, + allowSlide: function () { + return !(this.gesturing || this.fluidbook.support.getZoomLevel() > 1 || this.fluidbook.viewMode() || this.fluidbook.help.isVisible()); + }, + reset: function () { + this.startX = 0; + this.startY = 0; + this.offsetX = 0; + this.offsetY = 0; + this.triggered = false; + }, + gesturestart: function (event) { + if (this.fluidbook.pad.enabled) { + return false; + } + var e = event.originalEvent; + this.enableUserScale(); + this.gesturing = true; + return true; + }, + gesturechange: function (event) { + if (this.fluidbook.pad.enabled) { + return false; + } + var e = event.originalEvent; + this.gesturing = true; + return true; + }, + gestureend: function (event) { + if (this.fluidbook.pad.enabled) { + return false; + } + + var e = event.originalEvent; + this.gesturing = false; + + if (DetectZoom.zoom() > 1) { + $('html').addClass('nopan'); + } else { + $('html').removeClass('nopan'); + } + return true; + }, + start: function (event) { + var e = event.originalEvent; + var touches = e.touches; + + if (touches.length > 1) { + this.enableUserScale(); + return true; + } + + this._start(touches[0].pageX, touches[0].pageY); + return true; + }, + end: function (event) { + var e = event.originalEvent; + var touches = e.touches; + + if (touches.length == 0) { + this._end(); + } + return true; + }, + testOffset: function () { + if (this.triggered) { + return false; + } + if (this.allowMove()) { + return false; + } + if (!this.fluidbook.pad.enabled) { + if (Math.abs(this.offsetX) < Math.abs(this.offsetY)) { + return false; + } + if (this.allowSlide()) { + if (this.offsetX < -this.triggerOffset) { + if (this.fluidbook.l10n.dir == 'ltr') { + this.fluidbook.goNextPage(); + } else { + this.fluidbook.goPreviousPage(); + } + + return true; + } else if (this.offsetX > this.triggerOffset) { + if (this.fluidbook.l10n.dir == 'ltr') { + this.fluidbook.goPreviousPage(); + } else { + this.fluidbook.goNextPage(); + } + return true; + } + } + } else { + // Mode mag pad + if (this.allowSlide()) { + var offset = this.offsetX; + var way = 'x'; + if (Math.abs(this.offsetX) < Math.abs(this.offsetY)) { + offset = this.offsetY; + way = 'y'; + } + + if (Math.abs(offset) < this.triggerOffset) { + return false; + } + + if (offset < -this.triggerOffset) { + if (way == 'x') { + this.fluidbook.goNextChapter(); + } else { + this.fluidbook.goNextChapterPage(); + } + } else { + if (way == 'x') { + this.fluidbook.goPreviousChapter(); + } else { + this.fluidbook.goPreviousChapterPage(); + } + } + return true; + } + } + return false; + }, + cancel: function (event) { + this.end(event); + return true; + }, + move: function (event) { + var e = event.originalEvent; + + var touches = e.touches; + + if (touches.length > 1) { + return true; + } + + return this._move(touches[0].pageX, touches[0].pageY); + }, + _start: function (x, y) { + this.startX = x; + this.startY = y; + }, + _move: function (x, y) { + if (!isNaN(this.startX)) { + this.offsetX = (x - this.startX) / $(window).width(); + } + + if (!isNaN(this.startY)) { + this.offsetY = (y - this.startY) / $(window).height(); + } + + this.testOffset(); + return this.allowMove(); + }, + _end: function () { + this.testOffset(); + this.reset(); + }, + enableUserScale: function () { + if (this.fluidbook.pad.enabled) { + this.fluidbook.viewport.maxScale = 1; + this.fluidbook.viewport.userScalable = false; + } else { + this.fluidbook.viewport.maxScale = 3; + this.fluidbook.viewport.userScalable = true; + } + this.fluidbook.viewport.updateViewport(); + } }; diff --git a/js/libs/fluidbook/fluidbook.viewport.js b/js/libs/fluidbook/fluidbook.viewport.js index b24158cd..4cb839a4 100644 --- a/js/libs/fluidbook/fluidbook.viewport.js +++ b/js/libs/fluidbook/fluidbook.viewport.js @@ -1,27 +1,29 @@ -function FluidbookViewport(support){ - this.support=support; - this.width=null; - this.height=null; - this.minScale=1; - this.maxScale=3; - this.initialScale=1; - this.userScalable=false; - this.meta=$('meta[name="viewport"]'); +function FluidbookViewport() { + this.width = 'device-width'; + this.height = null; + this.minScale = 1; + this.maxScale = 10; + this.initialScale = 0; + this.userScalable = false; + this.meta = $('meta[name="viewport"]'); } -FluidbookViewport.prototype={ - updateViewport:function(){ - var w=''; - if(this.width!=null){ - w='width='+this.width+', '; - } - var h=''; - if(this.height!=null){ - h='height='+this.height+', '; - } - var us=this.userScalable==true?'1':'0'; - - var value=w+h+'initial-scale='+this.initialScale+', minimum-scale='+Math.max(0.25,this.minScale)+', maximum-scale='+Math.min(10,this.maxScale)+', user-scalable='+us; - this.meta.attr('content',value); - } +FluidbookViewport.prototype = { + updateViewport: function () { + var w = ''; + if (this.width != null) { + w = 'width=' + this.width + ', '; + } + var h = ''; + if (this.height != null) { + h = 'height=' + this.height + ', '; + } + var is = ''; + if (this.initialScale > 0) { + var is = 'initial-scale=' + this.initialScale + ', '; + } + var us = this.userScalable == true ? '1' : '0'; + var value = w + h + is + 'minimum-scale=' + Math.max(0.25, this.minScale) + ', maximum-scale=' + Math.min(10, this.maxScale) + ', user-scalable=' + us + ", shrink-to-fit=no"; + this.meta.attr('content', value); + } } \ No newline at end of file diff --git a/style/fluidbook.css b/style/fluidbook.css index 48c74801..c11b2806 100644 --- a/style/fluidbook.css +++ b/style/fluidbook.css @@ -144,6 +144,8 @@ body { #background .links { position: absolute; + width: 100%; + height: 100%; } #background .links .link { -- 2.39.5