From adc8663e24f833a8da97bec1505ae91c0cb1250d Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Wed, 1 Dec 2021 12:49:21 +0100 Subject: [PATCH] wip #4916 @2 --- js/libs/fluidbook/fluidbook.articles.js | 90 +++++++++++++++++++------ style/menu-articles.less | 53 +++++++++++++-- 2 files changed, 118 insertions(+), 25 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.articles.js b/js/libs/fluidbook/fluidbook.articles.js index f3908025..8517223e 100644 --- a/js/libs/fluidbook/fluidbook.articles.js +++ b/js/libs/fluidbook/fluidbook.articles.js @@ -14,15 +14,27 @@ FluidbookArticles.prototype = { $this.resize(); }); + $(document).on(this.fluidbook.input.clickEvent, '.pdfarticle-holder', function () { + $(this).addClass('active'); + }); + $(document).on('mouseleave', '.pdfarticle-holder', function () { + $(this).removeClass('active'); + }); + $(document).on(this.fluidbook.input.clickEvent, '.mview[data-menu="article"] .articlesPrint', function () { - var a = $(this).closest('article').attr('data-id'); - var print_window = window.open('', 'print_article', 'height=400,width=600'); - print_window.document.write($this.fluidbook.settings.articlesList[a].print); - setTimeout(function () { - print_window.focus(); - print_window.print(); - print_window.close(); - }, 1000); + var view = $(this).closest('.mview'); + if ($(view).hasClass('pdf')) { + $(view).find('.pdfarticle').contents().find('#print').click(); + } else { + var a = $(this).closest('article').attr('data-id'); + var print_window = window.open('', 'print_article', 'height=400,width=600'); + print_window.document.write($this.fluidbook.settings.articlesList[a].print); + setTimeout(function () { + print_window.focus(); + print_window.print(); + print_window.close(); + }, 1000); + } return false; }); @@ -36,7 +48,7 @@ FluidbookArticles.prototype = { openArticle: function (url, callback) { try { this.fluidbook.accessibility.audiodescription.pauseAllPlayers(); - }catch (e){ + } catch (e) { } var article = this.findArticleByURL(url); @@ -44,9 +56,32 @@ FluidbookArticles.prototype = { callback(); } - var footer = ''; - var view = '
' + article.contents + '
' + footer; - this.fluidbook.menu.viewWrap(this.fluidbook.menu.closeButton() + view, 'article', '', '', true); + + var footerContents = ''; + var view = ''; + var cls = ''; + var attrs = ''; + if (article.type === 'pdf') { + var ratio = article.infos.width / article.infos.height; + var width = Math.min(480, this.fluidbook.resize.ww); + var height = Math.round(width / ratio); + var imargin = 0; + var iwidth = width + imargin; + var iheight = Math.round(iwidth / ratio); + var zoom = Math.ceil(100 * width / (article.infos.width / 0.75)); + footerContents = '
' + getSpriteIcon('nav-share') + ''; + //footerContents += '' + getSpriteIcon('nav-print') + ''; + footerContents += '
'; + attrs += ' data-max-width="' + width + '" '; + cls = 'pdf'; + view = '
'; + } else { + view = '
' + article.contents + '
'; + } + var footer = ''; + view += footer; + + this.fluidbook.menu.viewWrap(this.fluidbook.menu.closeButton() + view, 'article', attrs, cls, true); if ($("#view article").attr('dir') === undefined) { $("#view article").attr('dir', this.fluidbook.l10n.dir); @@ -84,17 +119,30 @@ FluidbookArticles.prototype = { resize: function () { var $this = this; + $('iframe.pdfarticle').each(function () { + var body = $(this).contents().find('body'); + $(body).addClass('article'); + var $this = this; + setTimeout(function () { + $($this).closest('.pdfarticle-holder').addClass('visible'); + }, 500); + + }); $(".mview article").each(function () { - var w = $(this).width(); - var aw = $(this).find('.actions').outerWidth(); - if ($this.fluidbook.resize.ww < 800) { - aw += 20; + if ($(this).hasClass('pdf')) { + + } else { + var w = $(this).width(); + var aw = $(this).find('.actions').outerWidth(); + if ($this.fluidbook.resize.ww < 800) { + aw += 20; + } + $(this).find('h3').eq(0).css('width', w - aw); + var $thisart = this; + setTimeout(function () { + $($thisart).closest('.mview').addClass('visible'); + }, 10); } - $(this).find('h3').eq(0).css('width', w - aw); - var $thisart = this; - setTimeout(function () { - $($thisart).closest('.mview').addClass('visible'); - }, 10); }); }, } \ No newline at end of file diff --git a/style/menu-articles.less b/style/menu-articles.less index 0df16a72..1232087f 100644 --- a/style/menu-articles.less +++ b/style/menu-articles.less @@ -22,6 +22,25 @@ color: @menu-text; font-weight: 300; font-size: 16px; + position: relative; + + .actions { + position: absolute; + left: 50%; + top: 7px; + + a { + width: 30px; + position: relative; + left: -20px; + margin: 0 10px; + + svg { + width: 25px; + height: 25px; + } + } + } a { @@ -34,7 +53,8 @@ .rtl & { text-align: right; - svg{ + + svg { margin-right: 0; margin-left: 12px; } @@ -50,7 +70,8 @@ .rtl & { text-align: left; - svg{ + + svg { margin-left: 0; margin-right: 12px; } @@ -66,10 +87,34 @@ position: relative; top: 2px; - .rtl &{ - transform: scale(-1,1); + .rtl & { + transform: scale(-1, 1); } } } } +} + +.pdfarticle-holder { + overflow: hidden; + opacity: 0; + transition: opacity 250ms; + + &.visible { + transition: opacity 250ms; + opacity: 1; + } + + iframe { + overflow: hidden; + width: 100%; + height: 100%; + pointer-events: none; + } + + &.active { + iframe { + pointer-events: auto; + } + } } \ No newline at end of file -- 2.39.5