static_htmlbook.html

<%inherit file="main.html" />
<%namespace name='static' file='static_content.html'/>
<%block name="title"><title>${course.number} Textbook</title>
</%block>

<%block name="headextra">
<%static:css group='course'/>
<%static:js group='courseware'/>
</%block>

<%block name="js_extra">
  <script type="text/javascript">
(function($) {
    $.fn.myHTMLViewer = function(options) {
        var urlToLoad = null;
        if (options.url) {
            urlToLoad = options.url;
        }
        var chapterUrls = null;
        if (options.chapters) {
            chapterUrls = options.chapters;
        }
        var chapterToLoad = 1;
        if (options.chapterNum) {
            // TODO: this should only be specified if there are 
            // chapters, and it should be in-bounds.
            chapterToLoad = options.chapterNum;
        }
        var anchorToLoad = null;
        if (options.chapters) {
            anchorToLoad = options.anchor_id;
        }

        loadUrl = function htmlViewLoadUrl(url, anchorId) {
            // clear out previous load, if any:
            parentElement = document.getElementById('bookpage');
            while (parentElement.hasChildNodes())
                parentElement.removeChild(parentElement.lastChild);
	    // load new URL in:
            $('#bookpage').load(url);

	    // if there is an anchor set, then go to that location:
            if (anchorId != null) {
		// TODO: add implementation....
            } 

        }; 

        loadChapterUrl = function htmlViewLoadChapterUrl(chapterNum, anchorId) {
            if (chapterNum < 1 || chapterNum > chapterUrls.length) {
                return;
            }
            var chapterUrl = chapterUrls[chapterNum-1];
            loadUrl(chapterUrl, anchorId);
        };

        // define navigation links for chapters:  
        if (chapterUrls != null) {
            var loadChapterUrlHelper = function(i) {
                return function(event) {
                    // when opening a new chapter, always open to the top:
                    loadChapterUrl(i, null);
                };
            };
            for (var index = 1; index <= chapterUrls.length; index += 1) {
                $("#htmlchapter-" + index).click(loadChapterUrlHelper(index));
            }   
        }

        // finally, load the appropriate url/page
        if (urlToLoad != null) {
            loadUrl(urlToLoad, anchorToLoad);
        } else {
            loadChapterUrl(chapterToLoad, anchorToLoad);
        }       

    }
})(jQuery);

    $(document).ready(function() {
        var options = {};
        %if 'url' in textbook:
            options.url = "${textbook['url']}";
        %endif
        %if 'chapters' in textbook:
            var chptrs = [];
            %for chap in textbook['chapters']:
                chptrs.push("${chap['url']}");
            %endfor
            options.chapters = chptrs;
        %endif
        %if chapter is not None:
            options.chapterNum = ${chapter};
        %endif
        %if anchor_id is not None:
            options.anchor_id = ${anchor_id};
        %endif

        $('#outerContainer').myHTMLViewer(options);
    });
  </script>  
</%block>

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

    <div id="outerContainer">
      <div id="mainContainer" class="book-wrapper">

        %if 'chapters' in textbook:
        <section aria-label="Textbook Navigation" class="book-sidebar">
          <ul id="booknav" class="treeview-booknav">
            <%def name="print_entry(entry, index_value)">
              <li id="htmlchapter-${index_value}">
                <a class="chapter">
                  ${entry.get('title')}
                </a>
              </li>
            </%def>

            %for (index, entry) in enumerate(textbook['chapters']):
              ${print_entry(entry, index+1)}
            % endfor
          </ul>
        </section>
        %endif

        <section id="viewerContainer" class="book">
          <section class="page"> 
            <div id="bookpage" />
          </section> 
        </section>

      </div>
    </div>