wip #4916 @2

diff --git a/js/libs/fluidbook/fluidbook.articles.js b/js/libs/fluidbook/fluidbook.articles.js
index f3908025162539537c0a4405b9b2735127e9b36a..8517223edd102b2e3fc688f6b7f7c54053e2d166 100644 (file)
--- 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 = '<div class="footer fixed"><a href="#/article/' + article.prev + '" class="article-prev">' + getSpriteIcon('interface-previous-simple') + ' ' + this.fluidbook.l10n.__('previous article') + '</a><a href="#/article/' + article.next + '" class="article-next">' + this.fluidbook.l10n.__('next article') + ' ' + getSpriteIcon('interface-next-simple') + '</a></div>';
-        var view = '<div class="content">' + article.contents + '</div>' + 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 = '<div class="actions"><a href="#" class="articlesShare" data-id="' + article.id + '" data-url="' + article.url + '">' + getSpriteIcon('nav-share') + '</a>';
+            //footerContents += '<a href="#" class="articlesPrint">' + getSpriteIcon('nav-print') + '</a>';
+            footerContents += '</div>';
+            attrs += ' data-max-width="' + width + '" ';
+            cls = 'pdf';
+            view = '<div class="content"><div class="pdfarticle-holder" style="max-width: ' + width + 'px;max-height: ' + height + 'px;width: ' + width + 'px;height: ' + height + 'px;"><iframe class="pdfarticle" frameborder="0" scrolling="no" width="' + iwidth + '" height="' + iheight + '" src="pdfjs/web/viewer.html?&file=../../data/links/' + article.content + '#zoom=' + zoom + ',0,0"></iframe></div></div>';
+        } else {
+            view = '<div class="content">' + article.contents + '</div>';
+        }
+        var footer = '<div class="footer fixed"><a href="#/article/' + article.prev + '" class="article-prev">' + getSpriteIcon('interface-previous-simple') + ' ' + this.fluidbook.l10n.__('previous article') + '</a>' + footerContents + '<a href="#/article/' + article.next + '" class="article-next">' + this.fluidbook.l10n.__('next article') + ' ' + getSpriteIcon('interface-next-simple') + '</a></div>';
+        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 0df16a72b3e901bbbb1cd805972be7ceb6cb1d94..1232087fddd3b5112937e302baf7f06ba3417c1d 100644 (file)
--- 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