edx-platform/lms/templates/static_pdfbook.html

<%inherit file="main.html" />
<%namespace name='static' file='static_content.html'/>
<%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/pdfviewer.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">

%if 'url' in textbook:
    var url = "${textbook['url']}";

    $(document).ready(function() {
        $('#outerContainer').PDFViewer( { 
            % if page is not None:
            'pageNum' : ${page},
            % endif
            'url' : url
        });
    });
%else:

    var my_pdfviewer = null;

    function load_url(url_to_load, page_to_load) {
//        $('#outerContainer').PDFViewer( { 
//            'pageNum' : page_to_load,
//            'url' : url_to_load
//        });
       my_pdfviewer.loadUrl(url_to_load, page_to_load);
    }
    // since we have no url, we must rely on chapter display, 
    // so make sure we have a value.
    var url = "${ textbook['chapters'][chapter-1 if chapter is not None else 0]['url'] }";

    $(document).ready(function() {
        // load_url(url, ${page if page is not None else 1});
        var my_pdfviewer = $('#outerContainer').PDFViewer( { 
            'pageNum' : ${page if page is not None else 1},
            'url' : url
        });
        if (my_pdfviewer) {
           
        }
 
    } );
%endif

  </script>  
</%block>

<%include file="/courseware/course_navigation.html" args="active_page='pdftextbook/{0}'.format(book_index)" />


    <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>

%if 'chapters' in textbook:
    <section aria-label="Textbook Navigation" class="book-sidebar">

      <ul id="pdfbooknav" class="treeview-booknav">
          <%def name="print_entry(entry)">
              <li>
                  <a href="javascript:load_url(${entry.get('url')}, 1)">
                      <span class="chapter">
                          ${entry.get('title')}
                      </span>
                  </a>
              </li>
          </%def>

          % for entry in textbook['chapters']:
            ${print_entry(entry)}
          % endfor
        
        ## Don't delete this empty list item. Without it, Jquery.TreeView won't
        ## render the last list item as expandable.
        <li></li> 
      </ul>
    </section>
%endif

        <div id="viewerContainer">
          <div id="viewer" contextmenu="viewerContextMenu"></div>
        </div>


      </div> <!-- mainContainer -->

    </div> <!-- outerContainer -->