define pdfviewer.js, and use from static_pdfbook.html

common/static/css/vendor/pdfjs/myviewer.css

@@ -95,26 +95,17 @@ select {
 */
 
 /* outer/inner center provides horizontal center */
-html[dir='ltr'] .outerCenter {
+.outerCenter {
   float: right;
   position: relative;
   right: 50%;
 }
-html[dir='rtl'] .outerCenter {
-  float: left;
-  position: relative;
-  left: 50%;
-}
-html[dir='ltr'] .innerCenter {
+
+.innerCenter {
   float: right;
   position: relative;
   right: -50%;
 }
-html[dir='rtl'] .innerCenter {
-  float: left;
-  position: relative;
-  left: -50%;
-}
 
 #outerContainer {
   width: 100%;
@@ -228,9 +219,9 @@ html[dir='rtl'] #sidebarContent {
 }
 
 .toolbar {
-/*  position: absolute;
+  position: absolute;
   left: 0;
-  right: 0; */
+  right: 0; 
   height: 32px;
   z-index: 9999;
   cursor: default;
@@ -367,11 +358,17 @@ html[dir='rtl'] .doorHanger:before {
   background-color: rgb(255, 137, 153);
 }
 
-html[dir='ltr'] #toolbarViewerLeft {
+#toolbarViewerLeft {
   margin-left: -1px;
+   position: absolute; 
+  top: 0;
+  left: 0;
 }
-html[dir='rtl'] #toolbarViewerRight {
-  margin-left: -1px;
+
+#toolbarViewerRight {
+  position: absolute; 
+  top: 0;
+  right: 0;
 }
 
 /*
@@ -387,35 +384,21 @@ html[dir='rtl'] #toolbarViewerLeft {
   top: 0;
   right: 0;
 }
-*/html[dir='ltr'] #toolbarViewerLeft > *,
-html[dir='ltr'] #toolbarViewerMiddle > *,
-html[dir='ltr'] #toolbarViewerRight > *,
-html[dir='ltr'] .findbar > * {
+*/
+#toolbarViewerLeft > *,
+#toolbarViewerMiddle > *,
+#toolbarViewerRight > * {
   float: left;
 }
-html[dir='rtl'] #toolbarViewerLeft > *,
-html[dir='rtl'] #toolbarViewerMiddle > *,
-html[dir='rtl'] #toolbarViewerRight > *,
-html[dir='rtl'] .findbar > * {
-  float: right;
-}
 
-html[dir='ltr'] .splitToolbarButton {
+.splitToolbarButton {
   margin: 3px 2px 4px 0;
   display: inline-block;
 }
-html[dir='rtl'] .splitToolbarButton {
-  margin: 3px 0 4px 2px;
-  display: inline-block;
-}
-html[dir='ltr'] .splitToolbarButton > .toolbarButton {
+.splitToolbarButton > .toolbarButton {
   border-radius: 0;
   float: left;
 }
-html[dir='rtl'] .splitToolbarButton > .toolbarButton {
-  border-radius: 0;
-  float: right;
-}
 
 .toolbarButton {
   border: 0 none;
@@ -487,8 +470,7 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton {
               0 0 1px hsla(0,0%,0%,.05);
   z-index: 199;
 }
-html[dir='ltr'] .splitToolbarButton > .toolbarButton:first-child,
-html[dir='rtl'] .splitToolbarButton > .toolbarButton:last-child {
+.splitToolbarButton > .toolbarButton:first-child {
   position: relative;
   margin: 0;
   margin-right: -1px;
@@ -496,8 +478,7 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton:last-child {
   border-bottom-left-radius: 2px;
   border-right-color: transparent;
 }
-html[dir='ltr'] .splitToolbarButton > .toolbarButton:last-child,
-html[dir='rtl'] .splitToolbarButton > .toolbarButton:first-child {
+.splitToolbarButton > .toolbarButton:last-child {
   position: relative;
   margin: 0;
   margin-left: -1px;
@@ -513,12 +494,8 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton:first-child {
   box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
   display: inline-block;
   margin: 5px 0;
-}
-html[dir='ltr'] .splitToolbarButtonSeparator {
   float:left;
 }
-html[dir='rtl'] .splitToolbarButtonSeparator {
-  float:right;
 }
 .splitToolbarButton:hover > .splitToolbarButtonSeparator,
 .splitToolbarButton.toggled > .splitToolbarButtonSeparator {
@@ -573,14 +550,9 @@ html[dir='rtl'] .splitToolbarButtonSeparator {
   transition-timing-function: ease;
 }
 
-html[dir='ltr'] .toolbarButton,
-html[dir='ltr'] .dropdownToolbarButton {
+.toolbarButton {
   margin: 3px 2px 4px 0;
 }
-html[dir='rtl'] .toolbarButton,
-html[dir='rtl'] .dropdownToolbarButton {
-  margin: 3px 0 4px 2px;
-}
 
 .toolbarButton:hover,
 .toolbarButton:focus,
@@ -671,13 +643,8 @@ html[dir='rtl'] .dropdownToolbarButton {
   padding: 3px 2px 2px;
   overflow: hidden;
   background: url(images/toolbarButton-menuArrows.png) no-repeat;
-}
-html[dir='ltr'] .dropdownToolbarButton {
   background-position: 95%;
 }
-html[dir='rtl'] .dropdownToolbarButton {
-  background-position: 5%;
-}
 
 .dropdownToolbarButton > select {
   -webkit-appearance: none;
@@ -703,18 +670,12 @@ html[dir='rtl'] .dropdownToolbarButton {
   border-bottom: 1px rgba(255, 255, 255, .5) solid;
 }
 
-html[dir='ltr'] .splitToolbarButton:first-child,
-html[dir='ltr'] .toolbarButton:first-child,
-html[dir='rtl'] .splitToolbarButton:last-child,
-html[dir='rtl'] .toolbarButton:last-child {
+.splitToolbarButton:first-child,
+.toolbarButton:first-child,
+.splitToolbarButton:last-child,
+.toolbarButton:last-child {
   margin-left: 4px;
 }
-html[dir='ltr'] .splitToolbarButton:last-child,
-html[dir='ltr'] .toolbarButton:last-child,
-html[dir='rtl'] .splitToolbarButton:first-child,
-html[dir='rtl'] .toolbarButton:first-child {
-  margin-right: 4px;
-}
 
 .toolbarButtonSpacer {
   width: 30px;
@@ -1047,7 +1008,7 @@ canvas {
   display: block;
 }
 
-.page {
+.pdfpage {
   direction: ltr;
   width: 816px;
   height: 1056px;
@@ -1060,12 +1021,12 @@ canvas {
   background-color: white;
 }
 
-.page > a {
+.pdfpage > a {
   display: block;
 /*  position: absolute; */
 }
 
-.page > a:hover {
+.pdfpage > a:hover {
   opacity: 0.2;
   background: #ff0;
   -webkit-box-shadow: 0px 2px 10px #ff0;

lms/templates/static_pdfbook.html

 <%inherit file="main.html" />
 <%namespace name='static' file='static_content.html'/>
-<%block name="title"><title>${course.number} Textbook</title></%block>
+<%block name="title">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <title>${course.number} Textbook</title>
+</%block>
 
 <%block name="headextra">
 <%static:css group='course'/>
 <%static:js group='courseware'/>
+    <link rel="stylesheet" href="/static/css/vendor/pdfjs/myviewer.css"/>
+    <script type="text/javascript" src="/static/js/vendor/pdfjs/pdf.js"></script>
+    <script type="text/javascript" src="/static/js/pdfviewer.js"></script> 
 </%block>
 
 <%block name="js_extra">
-
-  <script type="text/javascript" src="/static/js/vendor/pdf.js"></script>
-  
   <script type="text/javascript">
-    //
-    // NOTE: 
-    // Modifying the URL below to another server will likely *NOT* work. Because of browser
-    // security restrictions, we have to use a file server with special headers
-    // (CORS) - most servers don't support cross-origin browser requests.
-    //
-    var url = "${textbook['url']}";
-
-    //
-    // Disable workers to avoid yet another cross-origin issue (workers need the URL of
-    // the script to be loaded, and currently do not allow cross-origin scripts)
-    //
-    PDFJS.disableWorker = true;
-
-    var pdfDoc = null,
-        pageNum = ${int(page) if page is not None else 1},
-        scale = 0.8,
-        canvas = document.getElementById('the-canvas'),
-        ctx = canvas.getContext('2d');
-
-    //
-    // Get page info from document, resize canvas accordingly, and render page
-    //
-    function renderPage(num) {
-      // Using promise to fetch the page
-      pdfDoc.getPage(num).then(function(page) {
-        var viewport = page.getViewport(scale);
-        canvas.height = viewport.height;
-        canvas.width = viewport.width;
 
-        // Render PDF page into canvas context
-        var renderContext = {
-          canvasContext: ctx,
-          viewport: viewport
-        };
-        page.render(renderContext);
-      });
-
-      // Update page counters
-      document.getElementById('page_num').textContent = pageNum;
-      document.getElementById('page_count').textContent = pdfDoc.numPages;
-    }
-
-    //
-    // Go to previous page
-    //
-    function goPrevious() {
-      if (pageNum <= 1)
-        return;
-      pageNum--;
-      renderPage(pageNum);
-    }
-
-    //
-    // Go to next page
-    //
-    function goNext() {
-      if (pageNum >= pdfDoc.numPages)
-        return;
-      pageNum++;
-      renderPage(pageNum);
-    }
+    var url = "${textbook['url']}";
 
-    //
-    // Asynchronously download PDF as an ArrayBuffer
-    //
-    PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {
-      pdfDoc = _pdfDoc;
-      renderPage(pageNum);
+    $(document).ready(function() {
+        $('#outerContainer').PDFViewer( { 
+            % if page is not None:
+            'pageNum' : page,
+            % endif
+            'url' : url
+        });
     });
   </script>  
 </%block>
 
 <%include file="/courseware/course_navigation.html" args="active_page='pdftextbook/{0}'.format(book_index)" />
 
-<section class="container">
-  <div class="book-wrapper">
-
-    <section class="book">
-      <section class="page">
-  <div>
-    <button id="prev" onclick="goPrevious()">Previous</button>
-    <button id="next" onclick="goNext()">Next</button>
-    &nbsp; &nbsp;
-    <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
-  </div>
-
-  <div>
-    <canvas id="the-canvas" style="border:1px solid black"></canvas>
-  </div>
 
-      </section>
-    </section>
-  </div>
-</section>
+    <div id="outerContainer">
+      <div id="mainContainer">
+        <div class="toolbar">
+          <div id="toolbarContainer">
+            <div id="toolbarViewer">
+              <div id="toolbarViewerLeft">
+                <div class="splitToolbarButton">
+                  <button class="toolbarButton pageUp" title="Previous Page" id="previous" tabindex="5">
+                    <span>Previous</span>
+                  </button>
+                  <div class="splitToolbarButtonSeparator"></div>
+                  <button class="toolbarButton pageDown" title="Next Page" id="next" tabindex="6">
+                    <span>Next</span>
+                  </button>
+                </div>
+                <label id="pageNumberLabel" class="toolbarLabel" for="pageNumber">Page: </label>
+                <input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" size="4" min="1" tabindex="7">
+                </input>
+                <span id="numPages" class="toolbarLabel"></span>
+              </div>
+
+              <div class="outerCenter">
+                <div class="innerCenter" id="toolbarViewerMiddle">
+                  <div class="splitToolbarButton">
+                    <button class="toolbarButton zoomOut" id="zoom_out" title="Zoom Out" tabindex="8">
+                      <span>Zoom Out</span>
+                    </button>
+                    <div class="splitToolbarButtonSeparator"></div>
+                    <button class="toolbarButton zoomIn" id="zoom_in" title="Zoom In" tabindex="9">
+                      <span>Zoom In</span>
+                     </button>
+                  </div>
+                  <span id="scaleSelectContainer" class="dropdownToolbarButton">
+                     <select id="scaleSelect" title="Zoom" oncontextmenu="return false;" tabindex="10">
+<!--
+                      <option id="pageAutoOption" value="auto" selected="selected">Automatic Zoom</option>
+                      <option id="pageActualOption" value="page-actual">Actual Size</option>
+                      <option id="pageFitOption" value="page-fit">Fit Page</option>
+                      <option id="pageWidthOption" value="page-width">Full Width</option>
+-->
+                      <option id="customScaleOption" value="custom"></option>
+                      <option value="0.5">50%</option>
+                      <option value="0.75">75%</option>
+                      <option value="1">100%</option>
+                      <option value="1.25">125%</option>
+                      <option value="1.5">150%</option>
+                      <option value="2">200%</option>
+                    </select>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div id="viewerContainer">
+          <div id="viewer" contextmenu="viewerContextMenu"></div>
+        </div>
+
+
+      </div> <!-- mainContainer -->
+
+    </div> <!-- outerContainer -->