[add WIP] Display PDF preview in a pop-up

Add the possibility to display the pdf preview in a popup. This feature is useful for multi-screens configuration.
gnieh · Jun 4, 2016 · 26acdcd · 26acdcd
1 parent 80320b1
commit 26acdcd
Show file tree

Hide file tree

Showing 15 changed files with 688 additions and 89 deletions.
diff --git a/blue-web/src/main/assets/less/icon.less b/blue-web/src/main/assets/less/icon.less
@@ -1,10 +1,12 @@
+@charset "UTF-8";
+
 @font-face {
   font-family: "bluelatexicon";
-  src:url("@{url_fonts}/bluelatexicon.eot");
-  src:url("@{url_fonts}/bluelatexicon.eot?#iefix") format("embedded-opentype"),
-    url("@{url_fonts}/bluelatexicon.woff") format("woff"),
-    url("@{url_fonts}/bluelatexicon.ttf") format("truetype"),
-    url("@{url_fonts}/bluelatexicon.svg#bluelatexicon") format("svg");
+  src:url("fonts/bluelatexicon.eot");
+  src:url("fonts/bluelatexicon.eot?#iefix") format("embedded-opentype"),
+    url("fonts/bluelatexicon.woff") format("woff"),
+    url("fonts/bluelatexicon.ttf") format("truetype"),
+    url("fonts/bluelatexicon.svg#bluelatexicon") format("svg");
   font-weight: normal;
   font-style: normal;
 
@@ -36,69 +38,81 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-list:before {
-  content: "a";
+.icon-close:before {
+  content: "\61";
 }
-.icon-vignette:before {
-  content: "b";
+.icon-folder:before {
+  content: "\63";
 }
 .icon-file:before {
-  content: "d";
-}
-.icon-search:before {
-  content: "e";
-}
-.icon-down-empty:before {
-  content: "f";
-}
-.icon-down:before {
-  content: "g";
-}
-.icon-add:before {
-  content: "c";
-}
-.icon-delete:before {
-  content: "h";
+  content: "\62";
 }
-.icon-menu:before {
-  content: "i";
+.icon-settings:before {
+  content: "\64";
 }
-.icon-left-empty:before {
-  content: "j";
-}
-.icon-right-empty:before {
-  content: "k";
+.icon-option:before {
+  content: "\65";
 }
 .icon-view:before {
-  content: "l";
+  content: "\67";
 }
-.icon-download:before {
-  content: "m";
+.icon-prev-page:before {
+  content: "\69";
 }
-.icon-close:before {
-  content: "n";
+.icon-list:before {
+  content: "\6a";
 }
-.icon-prev-page:before {
-  content: "o";
+.icon-file-1:before {
+  content: "\6b";
 }
 .icon-next-page:before {
-  content: "p";
+  content: "\6c";
 }
 .icon-folder-close:before {
-  content: "q";
+  content: "\6d";
+}
+.icon-search:before {
+  content: "\6e";
+}
+.icon-down-empty:before {
+  content: "\6f";
 }
 .icon-folder-open:before {
-  content: "r";
+  content: "\70";
 }
-.icon-fork:before {
-  content: "t";
+.icon-clone:before {
+  content: "\71";
+}
+.icon-down:before {
+  content: "\72";
+}
+.icon-add:before {
+  content: "\73";
 }
 .icon-exclamation:before {
-  content: "s";
+  content: "\74";
 }
 .icon-bug:before {
-  content: "u";
+  content: "\75";
+}
+.icon-delete:before {
+  content: "\76";
+}
+.icon-menu:before {
+  content: "\77";
 }
 .icon-up:before {
-  content: "v";
-}
+  content: "\78";
+}
+.icon-left-empty:before {
+  content: "\79";
+}
+.icon-right-empty:before {
+  content: "\7a";
+}
+.icon-vignette:before {
+  content: "\41";
+}
+.icon-download:before {
+  content: "\42";
+}
diff --git a/blue-web/src/main/assets/less/main.less b/blue-web/src/main/assets/less/main.less
@@ -595,4 +595,18 @@ a, a:visited,a:focus,a:active {
 }
 .debug_block.vertical{
 	border: 1px solid orange;
+}
+
+button, .button {
+    &.process::after {
+        position: absolute;
+        display: block;
+        content: "";
+        background-image: url("@{url_images}/spin.gif");
+        background-repeat: no-repeat;
+        width: 16px;
+        height: 16px;
+        top: 11px;
+        right: 8px;
+    }
 }
diff --git a/blue-web/src/main/assets/less/paper.less b/blue-web/src/main/assets/less/paper.less
@@ -94,6 +94,12 @@
             height: auto;
         }
     }
+    .settings {
+        button {
+            display: block;
+            width: 98%;
+        }
+    }
     .toc {
         padding-left: 5px;
         a {
@@ -155,6 +161,9 @@
             color: #fff;
             padding-top: 115px;
         }
+        &.full {
+            width: 100%;
+        }
     }
     .rightCol {
         position: relative;

diff --git a/blue-web/src/main/assets/less/papers.less b/blue-web/src/main/assets/less/papers.less
@@ -134,7 +134,7 @@
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    content: "g";
+    content: "r";
     position: absolute;
     width: 17px;
     height: 16px;
@@ -143,7 +143,7 @@
     padding-left: 4px;
 }
 .predicate.reverse:after {
-    content: "v";
+    content: "x";
 }
 #paper_list {
     margin: 10px;

diff --git a/blue-web/src/main/resources/webapp/css/fonts/bluelatexicon.eot b/blue-web/src/main/resources/webapp/css/fonts/bluelatexicon.eot
diff --git a/blue-web/src/main/resources/webapp/css/fonts/bluelatexicon.svg b/blue-web/src/main/resources/webapp/css/fonts/bluelatexicon.svg
diff --git a/blue-web/src/main/resources/webapp/css/fonts/bluelatexicon.ttf b/blue-web/src/main/resources/webapp/css/fonts/bluelatexicon.ttf
diff --git a/blue-web/src/main/resources/webapp/css/fonts/bluelatexicon.woff b/blue-web/src/main/resources/webapp/css/fonts/bluelatexicon.woff
diff --git a/blue-web/src/main/resources/webapp/i18n/resources-locale_default.js b/blue-web/src/main/resources/webapp/i18n/resources-locale_default.js
@@ -648,6 +648,16 @@
         "value":"Filename",
         "description":"Filename"
     },
+    {
+        "key":"_Open_PDF_popup_",
+        "value":"External viewer",
+        "description":"Button Open PDF in a popup"
+    },
+    {
+        "key":"_open_PDF_popup_tooltip_",
+        "value":"Open PDF in a new window",
+        "description":"Tooltip button Open PDF in a popup"
+    },
 
 
     {

diff --git a/blue-web/src/main/resources/webapp/i18n/resources-locale_fr.js b/blue-web/src/main/resources/webapp/i18n/resources-locale_fr.js
@@ -648,6 +648,16 @@
         "value":"Nom du fichier",
         "description":"Filename"
     },
+    {
+        "key":"_Open_PDF_popup_",
+        "value":"Aperçu détaché",
+        "description":"Button Open PDF in a popup"
+    },
+    {
+        "key":"_open_PDF_popup_tooltip_",
+        "value":"Ouvrir la PDF dans une fenêtre externe.",
+        "description":"Tooltip button Open PDF in a popup"
+    },
 
 
     {

diff --git a/blue-web/src/main/resources/webapp/js/paper/controllers/LatexPaperController.js b/blue-web/src/main/resources/webapp/js/paper/controllers/LatexPaperController.js
@@ -41,6 +41,7 @@ angular.module('bluelatex.Paper.Controllers.LatexPaper', [
     'MessagesService',
     'SyncTexParserService',
     '$document',
+    '$window',
     'WindowActiveService',
     'LatexService',
     'MobWriteService',
@@ -59,6 +60,7 @@ angular.module('bluelatex.Paper.Controllers.LatexPaper', [
               MessagesService,
               SyncTexParserService,
               $document,
+              $window,
               WindowActiveService,
               LatexService,
               MobWriteService,
@@ -129,19 +131,22 @@ angular.module('bluelatex.Paper.Controllers.LatexPaper', [
       /* Exit Paper */
       /**************/
       var exitPaper = function () {
+        if($scope.isPDFPopupOpen) {
+          pdfPopup.close();
+        }
         pageActive = false;
         WindowActiveService.removeObserverCallback(windowStatusCallback);
         AceMobWriteClient.message({ type: 'leave', 'user': $rootScope.loggedUser.name });
         stopMobWrite();
         PaperService.leavePaper($scope.paperId, peerId);
       };
 
-      window.onbeforeunload = function () {
+      $window.onbeforeunload = function () {
         AceMobWriteClient.message({ type: 'leave', 'user': $rootScope.loggedUser.name });
         return localize.getLocalizedString('_Exit_paper_confirm_');
       };
 
-      window.onunload = function () {
+      $window.onunload = function () {
         exitPaper();
       };
 
@@ -189,6 +194,10 @@ angular.module('bluelatex.Paper.Controllers.LatexPaper', [
         PaperService.getSynctex($scope.paperId).then(function (data) {
           $scope.synctex = SyncTexParserService.parse(data);
           $rootScope.$$phase || $rootScope.$apply();
+
+          if($scope.isPDFPopupOpen && pdfPopup) {
+            pdfPopup.updateSynctex($scope.synctex);
+          }
         });
       };
 
@@ -259,6 +268,9 @@ angular.module('bluelatex.Paper.Controllers.LatexPaper', [
           for (var i = 0; i < $scope.synchronizedFiles.length; i++) {
             if($scope.synchronizedFiles[i].title == "main.tex") {
               $scope.currentFile = $scope.synchronizedFiles[i];
+              if (pdfPopup) {
+                pdfPopup.updateCurrentFile($scope.currentFile);
+              }
               break;
             }
           }
@@ -503,6 +515,9 @@ angular.module('bluelatex.Paper.Controllers.LatexPaper', [
         if($scope.currentFile == file) return;
         MobWriteService.unshare({paper_id: $scope.paperId,file:$scope.currentFile.title}).then(function(data) {
           $scope.currentFile = file;
+          if (pdfPopup) {
+            pdfPopup.updateCurrentFile($scope.currentFile);
+          }
           $scope.content = '';
           AceService.setContent($scope.content);
           AceService.getEditor().focus();
@@ -582,7 +597,6 @@ angular.module('bluelatex.Paper.Controllers.LatexPaper', [
             // give the focus to the editor when the window is active
             AceService.getEditor().focus();
             pageActive = true;
-            $scope.compile();
           }
         } else {
           pageActive = false;
@@ -631,7 +645,11 @@ angular.module('bluelatex.Paper.Controllers.LatexPaper', [
           getLog();
           if(data.response == true) {
             $scope.revision++;
-            parsePDF();
+            if($scope.isPDFPopupOpen) {
+              pdfPopup.updatePDF();
+            } else {
+              parsePDF();  
+            }
             getSyncTex();
             getPages();
           }
@@ -780,6 +798,9 @@ angular.module('bluelatex.Paper.Controllers.LatexPaper', [
           AceService.getEditor().selection.on("changeCursor", function(){
             AceMobWriteClient.message({ type: 'cursor', 'user': $rootScope.loggedUser.name });
             $scope.currentLine = parseInt(_editor.selection.getCursor().row)+1;
+            if (pdfPopup) {
+              pdfPopup.updateCurrentLine($scope.currentLine);
+            }
             $rootScope.$$phase || $rootScope.$apply();
             if(!$scope.synctex) return;
             if(!$scope.synctex.blockNumberLine[$scope.currentFile.title]) return;
@@ -851,6 +872,9 @@ angular.module('bluelatex.Paper.Controllers.LatexPaper', [
         }
       });
 
+      /********************/
+      /* MobWrite Message */ 
+      /********************/
       $scope.connectedUsers = {};
       var userStyle = document.createElement('style');
       userStyle.type = 'text/css';
@@ -938,5 +962,41 @@ angular.module('bluelatex.Paper.Controllers.LatexPaper', [
       $scope.range = function(n) {
         return new Array(parseInt(n));
       };
+
+      /*************/
+      /* PDF Popup */ 
+      /*************/
+      var pdfPopup;
+      $scope.isPDFPopupOpen = false;
+
+      $scope.openPDFPopup = function() {
+        if($scope.isPDFPopupOpen) {
+          return;
+        }
+        pdfPopup = $window.open('/pdfPopup.html','PDF','menubar=no,toolbar=no,width=' + Math.round($window.screen.width/2) + ',height=' +  Math.round($window.screen.height) + ',left=' + Math.round($window.screen.width/2) + ',top=0,resizable=yes,scrollbars=yes');
+        pdfPopup.currentFile = $scope.currentFile;
+        pdfPopup.currentLine = $scope.currentLine;
+        pdfPopup.synctex = $scope.synctex;
+        pdfPopup.pdfURL = $scope.pdfURL;
+        pdfPopup.goToLine = $scope.goToLine;
+        pdfPopup.changeFileFromName = $scope.changeFileFromName;
+
+
+        pdfPopup.onunload = function () {
+          if(!$scope.isPDFPopupOpen) {
+            return;
+          }
+          $scope.isPDFPopupOpen = false;
+          pdfPopup = null;
+          $scope.$apply();
+        };
+
+        pdfPopup.onload = function () {
+          $scope.isPDFPopupOpen = true;
+          $scope.currentPage = 1;
+          $scope.linePage = 1;
+          $scope.page = 1;
+        };
+      }
     }
   ]);