From: Vincent Vanwaelscappel Date: Tue, 11 Dec 2018 13:55:25 +0000 (+0100) Subject: wip #2309 @4 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=2dbe495431bb039c433e14908fc9bca6a7a77383;p=fluidbook-html5.git wip #2309 @4 --- diff --git a/js/libs/fluidbook/fluidbook.3dflip.js b/js/libs/fluidbook/fluidbook.3dflip.js index 56c61834..ca3793c7 100644 --- a/js/libs/fluidbook/fluidbook.3dflip.js +++ b/js/libs/fluidbook/fluidbook.3dflip.js @@ -71,8 +71,8 @@ Fluidbook3DFlip.prototype = { } if (performanceMode === undefined || performanceMode === 'auto' || performanceMode === 'performancesTest') { - this.veryLowPerf = this.fluidbook.support.IE > 0 || this.fluidbook.support.iOS; - this.lowPerf = !Modernizr.webgl || this.veryLowPerf || this.fluidbook.support.edge || this.fluidbook.support.android || this.fluidbook.support.macOs; + this.veryLowPerf = this.fluidbook.support.IE > 0; + this.lowPerf = !Modernizr.webgl || this.veryLowPerf || this.fluidbook.support.edge || this.fluidbook.support.android || this.fluidbook.support.macOs || this.fluidbook.support.iOS; } else if (performanceMode === 'lowPerf') { this.lowPerf = true; this.veryLowPerf = false; @@ -358,7 +358,7 @@ Fluidbook3DFlip.prototype = { newMode = 'disable'; } else if (res < 10) { newMode = 'veryLowPerf'; - } else if (res < 30) { + } else if (res < 40) { newMode = 'lowPerf'; } else { newMode = 'highPerf'; @@ -366,7 +366,7 @@ Fluidbook3DFlip.prototype = { } else { if (res < 10) { newMode = 'disable'; - } else if (res < 30) { + } else if (res < 40) { newMode = 'veryLowPerf'; } else { newMode = 'lowPerf'; @@ -477,14 +477,14 @@ Fluidbook3DFlip.prototype = { this.performancesFrames++; } render = true; - this.jcontainer.show(); + this.setJContainerVisibility(true); } else { render = false; - this.jcontainer.hide(); + this.setJContainerVisibility(false); } } else { render = false; - this.jcontainer.hide(); + this.setJContainerVisibility(false); } if (render) { @@ -504,6 +504,14 @@ Fluidbook3DFlip.prototype = { } }, + setJContainerVisibility: function (visibility) { + if (visibility) { + this.jcontainer.show(); + } else { + this.jcontainer.hide(); + } + }, + resize: function () { if (!this.ready) { return; diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index 5081df10..ad928932 100644 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@ -194,8 +194,8 @@ Fluidbook.prototype = { this.resize.resize(false, true); this.hideLoader(0, true); - if (this.support.transitions2d) { - $("#splash").css('opacity', 0).one(this.support.getTransitionEndEvent(true), function () { + if (this.support.transitions2d && !this.support.iOS) { + $("#splash").css('opacity', 0).one('transitionend', function () { $(this).remove(); }); } else { diff --git a/js/libs/fluidbook/fluidbook.support.js b/js/libs/fluidbook/fluidbook.support.js index d74287ec..0aa4d584 100644 --- a/js/libs/fluidbook/fluidbook.support.js +++ b/js/libs/fluidbook/fluidbook.support.js @@ -4,8 +4,7 @@ function FluidbookSupport(fluidbook) { this.IE = 0; try { this.IE = navigator.userAgent.match(/(MSIE |Trident.*rv[ :])([0-9]+)/)[2]; - } - catch (e) { + } catch (e) { } this.macOs = navigator.platform.toUpperCase().indexOf('MAC') >= 0; this.android = this.fitScreenAtZero = this.userAgent.search(/android/i) > -1 || this.userAgent.search(/galaxy/i) > -1; @@ -32,13 +31,13 @@ function FluidbookSupport(fluidbook) { this.transitions2d = Modernizr.csstransforms && Modernizr.csstransitions; this.transitions3d = this.transitions2d && Modernizr.csstransforms3d && Modernizr.preserve3d; - this.transitions3dacc = this.transitions2d && !this.iOS; + this.transitions3dacc = this.transitions2d;// && !this.iOS; this.ie9 = $("html").hasClass('ie9'); this.androidbrowser = this.android && this.userAgent.search(/applewebkit/i) > -1; - this.transitionendevent = null; + this.transitionendevent = 'transitionend'; if (window.resolution === 'auto') { if (Modernizr.mq('(min-device-width : 320px) and (max-device-width : 480px)')) { @@ -71,7 +70,7 @@ FluidbookSupport.prototype = { if (!all) { return this.transitionEndEvent; } - return "webkitTransitionEnd transitionend oTransitionEnd msTransitionEnd transitionEnd"; + return "transitionEnd"; }, hasNetwork: function () { if (navigator.onLine != undefined) { @@ -127,30 +126,6 @@ FluidbookSupport.prototype = { }, 100); } } - - // Test transition end event - var div = document.createElement('div'); - div.id = "my-transition-test"; - div.style.position = 'absolute'; - div.style.zIndex = -10; - div.style.bottom = '0px'; - div.style.height = '0px'; - div.style.width = '0px'; - div.style.background = 'yellow'; - //div.style.display = 'none'; - window.document.body.appendChild(div); - - $('#my-transition-test').one("webkitTransitionEnd transitionend oTransitionEnd msTransitionEnd transitionEnd", function (e) { - if ($this.transitionEndEvent !== e.type) { - $this.transitionEndEvent = e.type; - } - window.document.body.removeChild(div); - }); - - setTimeout(function () { - div.style[Modernizr.prefixed('transition')] = '0.1s'; - div.style[Modernizr.prefixed('transform')] = 'translate3d( 100px,0,0)'; - }, 25); }, checkOrientation: function () { var o = this.getOrientation(); diff --git a/js/libs/fluidbook/fluidbook.zoom.js b/js/libs/fluidbook/fluidbook.zoom.js index d3bf3523..ef0260b6 100644 --- a/js/libs/fluidbook/fluidbook.zoom.js +++ b/js/libs/fluidbook/fluidbook.zoom.js @@ -19,7 +19,7 @@ FluidbookZoom.prototype = { }); // Detect when we have finished zooming out and raise an event - $("#z").on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () { + $("#z").on('transitionend', function () { $this.triggerEvent((($this.zoom == 1) ? 'out' : 'in') + '.end'); }); diff --git a/js/widget.js b/js/widget.js index c5fc9cc8..8da9d96c 100644 --- a/js/widget.js +++ b/js/widget.js @@ -1,359 +1,359 @@ -$(function () { - // Todo : manage other than html extensions - _GET = parseGet({ - background: 'transparent', - target: '_blank', - link: '../index.' + DATAS.htmlExtension, - time: 4 - }); - _GET['time'] = Math.max(1.5, _GET['time']); - - $("body").css('background-color', getColor(_GET['background'])); - - $(window).resize(function () { - resize(); - }); - - var widget = $("#widget").fluidbookWidget(Math.max(0, DATAS.widgetStart), Math.min(DATAS.pages, DATAS.widgetEnd)); - $(document).on('click', function () { - window.open(_GET['link'], _GET['target'], 'width=' + screen.width + ',height=' + screen.height + ',status=0,toolbar=0,menubar=0,scrollbars=1'); - }); -}); - -(function ($) { - function FluidbookWidget(e, from, to) { - this.transition = 'none'; - if (Modernizr.csstransforms) { - this.transition = '2d'; - } - if (Modernizr.csstransforms3d) { - this.transition = '3d'; - } - - this.started = false; - this.e = e; - this.from = from; - if (this.from % 2 == 1) { - this.from--; - } - this.to = to; - if (this.from % 2 == 0) { - this.to++; - } - this.to = Math.min(DATAS.pages, this.to); - this.currentPage = 0; - this.dir = 1; - - this.bookWidth; - this.bookHeight; - this.init(); - - this.transitionendevents = ['transitionend', 'mozTransitionEnd', 'webkitTransitionEnd', 'oTransitionEnd', 'msTransitionEnd'].join(' '); - } - - FluidbookWidget.prototype = { - init: function () { - this.e.append('
'); - - // Init pages - for (i = this.from; i <= this.to; i++) { - var p = i; - if (p % 2 == 1) { - p--; - } - var pclass = 'p'; - var shade = ''; - var side = 'left' - if (i % 2 == 1) { - side = 'right'; - } - if (i == 0) { - pclass += ' loaded'; - } else { - shade = '
'; - } - - pclass += ' ' + side; - - - this.e.append('
' + shade + '
'); - } - - this.preloadImages(); - }, - preloadImages: function () { - var $this = this; - var p = this.e.find('.p:not(.loaded)').first(); - if (p.length == 0) { - this.endLoading(); - return; - } - var page = $(p).attr('data-page'); - var image = new Image(); - $(image).one('load error', function () { - $(p).append(this); - $(p).addClass('loaded'); - $this.preloadImages(); - }); - image.src = 'data/background/36/t' + page + '.jpg'; - if (image.complete) { - $(p).append(image); - $(p).addClass('loaded'); - this.preloadImages(); - } - }, - endLoading: function () { - if (this.started) { - return; - } - this.started = true; - this.e.find('.p').hide(); - - - var firstImage = $('.p>img').first().get(0); - - this.bookWidth = firstImage.width * 2; - this.bookHeight = firstImage.height; - - - $("#widget").css({ - width: this.bookWidth, - minWidth: this.bookWidth, - maxWidth: this.bookWidth, - height: this.bookHeight, - minHeight: this.bookHeight, - maxHeight: this.bookHeight - }); - - $(".p .shade img").css({ - width: this.bookWidth / 6, - height: this.bookHeight - }); - - $(".p .shade").css({ - width: this.bookWidth / 2, - height: this.bookHeight - }) - - $(".p").css({ - width: this.bookWidth / 2, - height: this.bookHeight - }) - - - this.gotoPage(0, false); - var $this = this; - setInterval(function () { - if ($this.animating) { - return; - } - $this.goNextPage(); - }, _GET['time'] * 1000); - - $("#container:hidden").fadeIn(); - this.resize(); - }, - gotoPage: function (page, transition) { - this.resize(); - var $this = this; - this.animating = true; - var leftPage = $('.p[data-page=' + page + ']'); - var rightPage = $('.p[data-page=' + (page + 1) + ']'); - - if (!transition || this.transition == 'none') { - $("#nextDoublePage .p,#currentDoublePage .p").hide().appendTo(this.e); - $("#currentDoublePage").append($(leftPage)).append($(rightPage)); - $(leftPage).show(); - $(rightPage).show(); - $(".p.right").css({ - left: this.bookWidth / 2 - }); - $("#currentDoublePage,#nextDoublePage").css({ - x: 0, - left: 0 - }); - - $("#nextDoublePage").remove(); - this.animating = false; - } else { - if (this.transition == '2d') { - $("#widget").css('overflow', 'hidden'); - this.e.append('
'); - $(leftPage).show(); - $(rightPage).show(); - $("#nextDoublePage").append($(leftPage)).append($(rightPage)); - $(".p.right").css({ - left: this.bookWidth / 2 - }); - - if (Modernizr.csstransitions) { - $("#nextDoublePage").css({ - x: this.bookWidth * this.dir - }); - $("#currentDoublePage").transition({ - x: this.bookWidth * this.dir * -1 - }, 1000); - $("#nextDoublePage").transition({ - x: 0 - }, 1000, function () { - $this.gotoPage(page, false) - }); - } else { - $("#nextDoublePage").css({ - left: this.bookWidth * this.dir - }); - $("#currentDoublePage").animate({ - left: this.bookWidth * this.dir * -1 - }, 1000); - $("#nextDoublePage").animate({ - left: 0 - }, 1000, function () { - $this.gotoPage(page, false) - }); - } - } - else if (this.transition == '3d') { - $("#widget").css('overflow', 'visible'); - var nextFromClass; - if (this.dir == 1) { - nextFromClass = 'next'; - } else { - nextFromClass = 'prev'; - } - - - this.e.append('
'); - - $("#currentDoublePage .p").hide().appendTo(this.e); - var leftTurn, rightTurn; - if (this.dir == 1) { - leftPage = $('.p[data-page=' + this.currentPage + ']'); - rightPage = $('.p[data-page=' + (page + 1) + ']'); - leftTurn = $('.p[data-page=' + page + ']'); - rightTurn = $('.p[data-page=' + (this.currentPage + 1) + ']'); - } else { - leftPage = $('.p[data-page=' + page + ']'); - rightPage = $('.p[data-page=' + (this.currentPage + 1) + ']'); - leftTurn = $('.p[data-page=' + this.currentPage + ']'); - rightTurn = $('.p[data-page=' + (page + 1) + ']'); - } - - $(leftPage).show(); - $(rightPage).show(); - $(leftTurn).show(); - $(rightTurn).show(); - - $("#currentDoublePage").append($(leftPage)).append($(rightPage)); - if (this.dir == -1) { - $("#nextDoublePage").append($(leftTurn)).append($(rightTurn)); - } else { - $("#nextDoublePage").append($(rightTurn)).append($(leftTurn)); - } - $(".p.right").css({ - left: this.bookWidth / 2 - }); - - $("#nextDoublePage").addClass(nextFromClass + 'end'); - - $("#nextDoublePage").one(this.transitionendevents, function () { - $this.animating = false; - $this.gotoPage(page, false); - }); - } - } - - this.currentPage = page; - }, - goNextPage: function () { - var p; - if (this.dir == 1) { - p = this.currentPage + 2; - if (p > this.to) { - p -= 4; - this.dir = -1; - } - } else { - p = this.currentPage - 2; - if (p < this.from) { - p += 4; - this.dir = 1; - } - } - - this.gotoPage(p, true) - - }, - resize: function () { - var w = $(window).width(); - var h = $(window).height(); - - var s = Math.min((w * 0.95) / this.bookWidth, (h * 0.95) / this.bookHeight); - - var iw = this.bookWidth * s; - var ih = this.bookHeight * s; - - var x = (w - iw) / 2; - var y = (h - ih) / 2; - - $("body,#container").css({ - width: w, - maxWidth: w, - minWidth: w, - height: h, - maxHeight: h, - minHeight: h - }); - $("#nextDoublePage").css({ - width: this.bookWidth / 2, - maxWidth: this.bookWidth / 2, - minWidth: this.bookWidth / 2, - height: this.bookHeight, - maxHeight: this.bookHeight, - minHeight: this.bookHeight, - overflow: 'hidden' - }) - - this.e.css({ - transformOrigin: '0% 0%', - x: x, - y: y, - scale: s - }); - } - }; - - jQuery.fn.fluidbookWidget = function (from, to) { - return this.each(function () { - var $this = $(this); - widget = new FluidbookWidget($this, from, to); - }) - }; -})(jQuery); - -function parseGet(res) { - if (res == undefined) { - res = {}; - } - var couples = window.location.search.substr(1).split('&'); - var couple = new Array(); - for (var i = 0; i < couples.length; i++) { - couple = couples[i].split('='); - res[couple[0]] = couple[1]; - } - return res; -} - -function getColor(color) { - if (color == 'transparent' || color.substr(0, 3) == 'rgb') { - return color; - } - if (color.length == 6) { - return '#' + color; - } - return color; -} - -function resize() { - widget.resize(); -} - +$(function () { + // Todo : manage other than html extensions + _GET = parseGet({ + background: 'transparent', + target: '_blank', + link: '../index.' + DATAS.htmlExtension, + time: 4 + }); + _GET['time'] = Math.max(1.5, _GET['time']); + + $("body").css('background-color', getColor(_GET['background'])); + + $(window).resize(function () { + resize(); + }); + + var widget = $("#widget").fluidbookWidget(Math.max(0, DATAS.widgetStart), Math.min(DATAS.pages, DATAS.widgetEnd)); + $(document).on('click', function () { + window.open(_GET['link'], _GET['target'], 'width=' + screen.width + ',height=' + screen.height + ',status=0,toolbar=0,menubar=0,scrollbars=1'); + }); +}); + +(function ($) { + function FluidbookWidget(e, from, to) { + this.transition = 'none'; + if (Modernizr.csstransforms) { + this.transition = '2d'; + } + if (Modernizr.csstransforms3d) { + this.transition = '3d'; + } + + this.started = false; + this.e = e; + this.from = from; + if (this.from % 2 == 1) { + this.from--; + } + this.to = to; + if (this.from % 2 == 0) { + this.to++; + } + this.to = Math.min(DATAS.pages, this.to); + this.currentPage = 0; + this.dir = 1; + + this.bookWidth; + this.bookHeight; + this.init(); + + this.transitionendevents = ['transitionend'].join(' '); + } + + FluidbookWidget.prototype = { + init: function () { + this.e.append('
'); + + // Init pages + for (i = this.from; i <= this.to; i++) { + var p = i; + if (p % 2 == 1) { + p--; + } + var pclass = 'p'; + var shade = ''; + var side = 'left' + if (i % 2 == 1) { + side = 'right'; + } + if (i == 0) { + pclass += ' loaded'; + } else { + shade = '
'; + } + + pclass += ' ' + side; + + + this.e.append('
' + shade + '
'); + } + + this.preloadImages(); + }, + preloadImages: function () { + var $this = this; + var p = this.e.find('.p:not(.loaded)').first(); + if (p.length == 0) { + this.endLoading(); + return; + } + var page = $(p).attr('data-page'); + var image = new Image(); + $(image).one('load error', function () { + $(p).append(this); + $(p).addClass('loaded'); + $this.preloadImages(); + }); + image.src = 'data/background/36/t' + page + '.jpg'; + if (image.complete) { + $(p).append(image); + $(p).addClass('loaded'); + this.preloadImages(); + } + }, + endLoading: function () { + if (this.started) { + return; + } + this.started = true; + this.e.find('.p').hide(); + + + var firstImage = $('.p>img').first().get(0); + + this.bookWidth = firstImage.width * 2; + this.bookHeight = firstImage.height; + + + $("#widget").css({ + width: this.bookWidth, + minWidth: this.bookWidth, + maxWidth: this.bookWidth, + height: this.bookHeight, + minHeight: this.bookHeight, + maxHeight: this.bookHeight + }); + + $(".p .shade img").css({ + width: this.bookWidth / 6, + height: this.bookHeight + }); + + $(".p .shade").css({ + width: this.bookWidth / 2, + height: this.bookHeight + }) + + $(".p").css({ + width: this.bookWidth / 2, + height: this.bookHeight + }) + + + this.gotoPage(0, false); + var $this = this; + setInterval(function () { + if ($this.animating) { + return; + } + $this.goNextPage(); + }, _GET['time'] * 1000); + + $("#container:hidden").fadeIn(); + this.resize(); + }, + gotoPage: function (page, transition) { + this.resize(); + var $this = this; + this.animating = true; + var leftPage = $('.p[data-page=' + page + ']'); + var rightPage = $('.p[data-page=' + (page + 1) + ']'); + + if (!transition || this.transition == 'none') { + $("#nextDoublePage .p,#currentDoublePage .p").hide().appendTo(this.e); + $("#currentDoublePage").append($(leftPage)).append($(rightPage)); + $(leftPage).show(); + $(rightPage).show(); + $(".p.right").css({ + left: this.bookWidth / 2 + }); + $("#currentDoublePage,#nextDoublePage").css({ + x: 0, + left: 0 + }); + + $("#nextDoublePage").remove(); + this.animating = false; + } else { + if (this.transition == '2d') { + $("#widget").css('overflow', 'hidden'); + this.e.append('
'); + $(leftPage).show(); + $(rightPage).show(); + $("#nextDoublePage").append($(leftPage)).append($(rightPage)); + $(".p.right").css({ + left: this.bookWidth / 2 + }); + + if (Modernizr.csstransitions) { + $("#nextDoublePage").css({ + x: this.bookWidth * this.dir + }); + $("#currentDoublePage").transition({ + x: this.bookWidth * this.dir * -1 + }, 1000); + $("#nextDoublePage").transition({ + x: 0 + }, 1000, function () { + $this.gotoPage(page, false) + }); + } else { + $("#nextDoublePage").css({ + left: this.bookWidth * this.dir + }); + $("#currentDoublePage").animate({ + left: this.bookWidth * this.dir * -1 + }, 1000); + $("#nextDoublePage").animate({ + left: 0 + }, 1000, function () { + $this.gotoPage(page, false) + }); + } + } + else if (this.transition == '3d') { + $("#widget").css('overflow', 'visible'); + var nextFromClass; + if (this.dir == 1) { + nextFromClass = 'next'; + } else { + nextFromClass = 'prev'; + } + + + this.e.append('
'); + + $("#currentDoublePage .p").hide().appendTo(this.e); + var leftTurn, rightTurn; + if (this.dir == 1) { + leftPage = $('.p[data-page=' + this.currentPage + ']'); + rightPage = $('.p[data-page=' + (page + 1) + ']'); + leftTurn = $('.p[data-page=' + page + ']'); + rightTurn = $('.p[data-page=' + (this.currentPage + 1) + ']'); + } else { + leftPage = $('.p[data-page=' + page + ']'); + rightPage = $('.p[data-page=' + (this.currentPage + 1) + ']'); + leftTurn = $('.p[data-page=' + this.currentPage + ']'); + rightTurn = $('.p[data-page=' + (page + 1) + ']'); + } + + $(leftPage).show(); + $(rightPage).show(); + $(leftTurn).show(); + $(rightTurn).show(); + + $("#currentDoublePage").append($(leftPage)).append($(rightPage)); + if (this.dir == -1) { + $("#nextDoublePage").append($(leftTurn)).append($(rightTurn)); + } else { + $("#nextDoublePage").append($(rightTurn)).append($(leftTurn)); + } + $(".p.right").css({ + left: this.bookWidth / 2 + }); + + $("#nextDoublePage").addClass(nextFromClass + 'end'); + + $("#nextDoublePage").one(this.transitionendevents, function () { + $this.animating = false; + $this.gotoPage(page, false); + }); + } + } + + this.currentPage = page; + }, + goNextPage: function () { + var p; + if (this.dir == 1) { + p = this.currentPage + 2; + if (p > this.to) { + p -= 4; + this.dir = -1; + } + } else { + p = this.currentPage - 2; + if (p < this.from) { + p += 4; + this.dir = 1; + } + } + + this.gotoPage(p, true) + + }, + resize: function () { + var w = $(window).width(); + var h = $(window).height(); + + var s = Math.min((w * 0.95) / this.bookWidth, (h * 0.95) / this.bookHeight); + + var iw = this.bookWidth * s; + var ih = this.bookHeight * s; + + var x = (w - iw) / 2; + var y = (h - ih) / 2; + + $("body,#container").css({ + width: w, + maxWidth: w, + minWidth: w, + height: h, + maxHeight: h, + minHeight: h + }); + $("#nextDoublePage").css({ + width: this.bookWidth / 2, + maxWidth: this.bookWidth / 2, + minWidth: this.bookWidth / 2, + height: this.bookHeight, + maxHeight: this.bookHeight, + minHeight: this.bookHeight, + overflow: 'hidden' + }) + + this.e.css({ + transformOrigin: '0% 0%', + x: x, + y: y, + scale: s + }); + } + }; + + jQuery.fn.fluidbookWidget = function (from, to) { + return this.each(function () { + var $this = $(this); + widget = new FluidbookWidget($this, from, to); + }) + }; +})(jQuery); + +function parseGet(res) { + if (res == undefined) { + res = {}; + } + var couples = window.location.search.substr(1).split('&'); + var couple = new Array(); + for (var i = 0; i < couples.length; i++) { + couple = couples[i].split('='); + res[couple[0]] = couple[1]; + } + return res; +} + +function getColor(color) { + if (color == 'transparent' || color.substr(0, 3) == 'rgb') { + return color; + } + if (color.length == 6) { + return '#' + color; + } + return color; +} + +function resize() { + widget.resize(); +} + diff --git a/style/fluidbook.less b/style/fluidbook.less index 1d7341f4..688fdef5 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -6,11 +6,6 @@ use { } .notransition { - - -moz-transition: none !important; - -webkit-transition: none !important; - -ms-transition: none !important; - -o-transition: none !important; transition: none !important; } @@ -155,11 +150,6 @@ body, html { #main.fadeout, #view.fadeout { transition: opacity 500ms ease-out; - -moz-transition: opacity 500ms ease-out; - -webkit-transition: opacity 500ms ease-out; - -ms-transition: opacity 500ms ease-out; - -o-transition: opacity 500ms ease-out; - opacity: 0; } @@ -439,6 +429,11 @@ body, html { opacity: 0; } + .ios & { + transition-property: none !important; + transition-duration: 0 !important; + } + > .shadow { position: absolute; left: 0; @@ -629,25 +624,13 @@ body, html { top: 0; left: 0; - -moz-transition: -moz-transform @zoomtransition ease-out, transform @zoomtransition ease-out; - -webkit-transition: -webkit-transform @zoomtransition ease-out, transform @zoomtransition ease-out; - -o-transition: -o-transform @zoomtransition ease-out, transform @zoomtransition ease-out; - -ms-transition: -ms-transform @zoomtransition ease-out, transform @zoomtransition ease-out; transition: transform @zoomtransition ease-out; &.notransition { - -moz-transition: none; - -webkit-transition: none; - -o-transition: none; - -ms-transition: none; transition: none; } &.transition-inertia { - -moz-transition: -moz-transform-origin @zoomtransitioninertia ease-out, transform-origin @zoomtransitioninertia ease-out; - -webkit-transition: -webkit-transform-origin @zoomtransitioninertia ease-out, transform-origin @zoomtransitioninertia ease-out; - -o-transition: -o-transform-origin @zoomtransitioninertia ease-out, transform-origin @zoomtransitioninertia ease-out; - -ms-transition: -ms-transform-origin @zoomtransitioninertia ease-out, transform-origin @zoomtransitioninertia ease-out; transition: transform-origin @zoomtransitioninertia ease-out; } @@ -676,10 +659,6 @@ body, html { direction: ltr; &.animate { - -moz-transition: all @zoomtransition ease-out; - -webkit-transition: all @zoomtransition ease-out; - -ms-transition: all @zoomtransition ease-out; - -o-transition: all @zoomtransition ease-out; transition: all @zoomtransition ease-out; } } @@ -701,6 +680,10 @@ body, html { transition: opacity 250ms; opacity: 1; + .ios & { + transition: none; + } + &.hidden { transition: none; opacity: 0; @@ -855,10 +838,6 @@ footer a { /* Fluidbook zooming */ footer, header, #interface { - -moz-transition: opacity 400ms ease-in, visibility 400ms ease-in; - -webkit-transition: opacity 400ms ease-in, visibility 400ms ease-in; - -o-transition: opacity 400ms ease-in, visibility 400ms ease-in; - -ms-transition: opacity 400ms ease-in, visibility 400ms ease-in; transition: opacity 400ms ease-in, visibility 400ms ease-in; &.hidden { @@ -871,20 +850,16 @@ footer, header, #interface { #shadow { @shadow-zoom-transition: 400ms; - -moz-transition: opacity @shadow-zoom-transition ease-in, visibility @shadow-zoom-transition ease-in; - -webkit-transition: opacity @shadow-zoom-transition ease-in, visibility @shadow-zoom-transition ease-in; - -o-transition: opacity @shadow-zoom-transition ease-in, visibility @shadow-zoom-transition ease-in; - -ms-transition: opacity @shadow-zoom-transition ease-in, visibility @shadow-zoom-transition ease-in; transition: opacity @shadow-zoom-transition ease-in, visibility @shadow-zoom-transition ease-in; &.animate { - -moz-transition: all @zoomtransition ease-out; - -webkit-transition: all @zoomtransition ease-out; - -ms-transition: all @zoomtransition ease-out; - -o-transition: all @zoomtransition ease-out; transition: all @zoomtransition ease-out; } + .ios & { + transition: none !important; + } + &.hidden { visibility: hidden; opacity: 0; @@ -1154,10 +1129,6 @@ a.bookmark { // Hack for #1433 html.ios body.portrait #interface { - -moz-transition: none; - -webkit-transition: none; - -o-transition: none; - -ms-transition: none; transition: none; } @@ -1295,10 +1266,6 @@ html.ios body.portrait #interface { &[data-enabled], &:hover { opacity: 1 !important; - -moz-transition: none; - -webkit-transition: none; - -o-transition: none; - -ms-transition: none; transition: none; } } @@ -1358,10 +1325,6 @@ html.ios body.portrait #interface { @menutransition: 400ms; - -webkit-transition: opacity @menutransition, top @menutransition; - -moz-transition: opacity @menutransition, top @menutransition; - -ms-transition: opacity @menutransition, top @menutransition; - -o-transition: opacity @menutransition, top @menutransition; transition: opacity @menutransition, top @menutransition; &[data-menu="multimedia"], &[data-menu="webvideo"], &[data-menu="video"], &[data-menu="externalchapters"], &[data-menu="iframe"], &[data-menu="text"], &[data-menu="zoomhd"] { @@ -1620,10 +1583,6 @@ html.ios body.portrait #interface { } &.animate { - -moz-transition: -moz-transform 600ms ease-out, transform 600ms ease-out; - -webkit-transition: -webkit-transform 600ms ease-out; - -o-transition: -o-transform 600ms ease-out, transform 600ms ease-out; - -ms-transition: -ms-transform 600ms ease-out, transform 600ms ease-out; transition: transform 600ms ease-out; } @@ -2216,30 +2175,12 @@ ul.chapters { opacity: 0; background-color: rgba(0, 0, 0, 0.6); - -moz-transition: all .15s ease-out; - -webkit-transition: all .15s ease-out; - -o-transition: all .15s ease-out; - -ms-transition: all .15s ease-out; transition: all .15s ease-out; - - -moz-transform-origin: 50% 20px; - -webkit-transform-origin: 50% 20px; - -ms-transform-origin: 50% 20px; - -o-transform-origin: 50% 20px; transform-origin: 50% 20px; - - -moz-transform: rotate(0deg); - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -o-transform: rotate(0deg); transform: rotate(0deg); } #down.right { - -moz-transform: rotate(-90deg); - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - -o-transform: rotate(-90deg); transform: rotate(-90deg); } @@ -2253,10 +2194,6 @@ ul.chapters { /* 2D */ .doublePage._2d.sliding { - -moz-transition: none; - -webkit-transition: none; - -o-transition: none; - -ms-transition: none; transition: none; } @@ -2280,16 +2217,7 @@ ul.chapters { /* 3D */ #pages._3dtransition { - -moz-perspective-origin: 50% 75%; - -webkit-perspective-origin: 50% 75%; - -ms-perspective-origin: 50% 75%; - -o-perspective-origin: 50% 75%; perspective-origin: 50% 75%; - - -moz-perspective: 5000px; - -webkit-perspective: 5000px; - -o-perspective: 5000px; - -ms-perspective: 5000px; perspective: 5000px; overflow: visible !important; @@ -2299,18 +2227,10 @@ ul.chapters { overflow: visible; z-index: 100; - -moz-transform-style: preserve-3d; - -webkit-transform-style: preserve-3d; - -o-transform-style: preserve-3d; - -ms-transform-style: preserve-3d; transform-style: preserve-3d; } ._3d .page { - -moz-backface-visibility: hidden; - -webkit-backface-visibility: hidden; - -o-backface-visibility: hidden; - -ms-backface-visibility: hidden; backface-visibility: hidden; left: 0px !important; @@ -2349,10 +2269,6 @@ ul.chapters { transform: rotate3d(0, 1, 0, 360deg); -moz-transform: rotateY(360deg) translate3d(0, 0, 0); - -moz-transform-origin: 0 0; - -webkit-transform-origin: 0 0; - -o-transform-origin: 0 0; - -ms-transform-origin: 0 0; transform-origin: 0 0; } @@ -2916,5 +2832,5 @@ body > input { } #loadedcontents { - display: none; + display: block; } \ No newline at end of file diff --git a/style/interface.less b/style/interface.less index c7387c7c..7a7f8d91 100644 --- a/style/interface.less +++ b/style/interface.less @@ -20,18 +20,14 @@ #next, #previous, #down, #splash { transition: opacity 400ms ease-in-out; - -moz-transition: opacity 400ms ease-in-out; - -webkit-transition: opacity 400ms ease-in-out; - -o-transition: opacity 400ms ease-in-out; - -ms-transition: opacity 400ms ease-in-out; + + .ios & { + transition: none; + } } #next.hidden.help, #previous.hidden.help { transition: none; - -moz-transition: none; - -webkit-transition: none; - -o-transition: none; - -ms-transition: none; opacity: 1; }