diff Applications/StoneWebViewer/WebApplication/index.html @ 1652:fa9e6bf84958

integrating pdf.js into Stone Web viewer
author Sebastien Jodogne <s.jodogne@gmail.com>
date Mon, 16 Nov 2020 20:47:53 +0100
parents c476b0d5e59c
children 39137da83b0b
line wrap: on
line diff
--- a/Applications/StoneWebViewer/WebApplication/index.html	Fri Nov 13 18:29:17 2020 +0100
+++ b/Applications/StoneWebViewer/WebApplication/index.html	Mon Nov 16 20:47:53 2020 +0100
@@ -586,6 +586,10 @@
             <div v-if="status == 'waiting'" class="wvPaneOverlay">
               [ drop a series here ]
             </div>
+
+            <div v-if="status == 'pdf'" >
+              <pdf-viewer v-bind:prefix="canvasId + '-pdf'"></pdf-viewer>
+            </div>
                 
             <!--div v-if="status == 'video'" class="wvPaneOverlay">
               <video class="wvVideo" autoplay="" loop="" controls="" preload="auto" type="video/mp4"
@@ -606,14 +610,45 @@
     </script>
 
 
+    <script type="text/x-template" id="pdf-viewer">
+      <div style="position:absolute; left:0; top:0; width:100%; height:100%;">
+        <!-- "line-height: 0px" to fit height: https://stackoverflow.com/a/12616341/881731 -->
+        <div v-bind:id="prefix + '-container'"
+             style="position: absolute; left: 0; top: 0; width:100%;height:100%;overflow:auto;line-height: 0px;">
+          <canvas v-bind:id="prefix + '-canvas'"
+                  style="position: absolute; top:0px; left:0px;"></canvas>
+        </div>
+
+        <div class="wv-overlay">
+          <div class="wv-overlay-bottomleft wvPrintExclude">
+            <button class="btn btn-primary" @click="FitWidth()"><i class="fas fa-text-width"></i></button>
+            <button class="btn btn-primary" @click="FitHeight()"><i class="fas fa-text-height"></i></button>
+            <button class="btn btn-primary" @click="ZoomIn()"><i class="fas fa-search-plus"></i></button>
+            <button class="btn btn-primary" @click="ZoomOut()"><i class="fas fa-search-minus"></i></button>
+            <button class="btn btn-primary" @click="PreviousPage()">
+              <i class="fa fa-chevron-circle-left"></i>
+            </button>
+            &nbsp;&nbsp;{{currentPage}} / {{countPages}}&nbsp;&nbsp;
+            <button class="btn btn-primary" @click="NextPage()">
+              <i class="fa fa-chevron-circle-right"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </script>
+
+    
+
     <script src="js/jquery-3.4.1.min.js"></script>
     <script src="js/bootstrap.min.js"></script>
     <script src="js/vue.min.js"></script>
     <script src="js/axios.min.js"></script>
+    <script src="js/pdf.js"></script>
     
     <script src="ua-parser.js"></script>
     
     <script src="stone.js"></script>
+    <script src="pdf-viewer.js"></script>   <!-- Must be before inclusion of "app.js" -->
     <script src="app.js"></script>
     <script src="print.js"></script>
   </body>