Better controls for viewing PDF files

diff --git a/karmaworld/apps/notes/views.py b/karmaworld/apps/notes/views.py
index 83c83a76150faf2985cf52fa59aa19aeb846f365..977eb28118f96eb35961a1b57a0c025766975fbe 100644 (file)
--- a/karmaworld/apps/notes/views.py
+++ b/karmaworld/apps/notes/views.py
@@ -53,9 +53,9 @@ class NoteDetailView(DetailView):
         kwargs['pdf'] = is_pdf(self)
         kwargs['ppt'] = is_ppt(self)
 
-        if self.object.mimetype and \
-            self.object.mimetype in ZOOM_MIMETYPES:
-            kwargs['zoom'] = True
+
+        if self.object.mimetype == 'application/pdf':
+            kwargs['pdf_controls'] = True
 
         return super(NoteDetailView, self).get_context_data(**kwargs)
 

diff --git a/karmaworld/assets/js/note-detail.js b/karmaworld/assets/js/note-detail.js
index 1aabd4dc03fba710ed9aa14253ee793871f95d1d..8a6cf5d032ec03ae2df71f8a0b790863bb45f2b5 100644 (file)
--- a/karmaworld/assets/js/note-detail.js
+++ b/karmaworld/assets/js/note-detail.js
@@ -8,36 +8,36 @@ function autoResize(id){
     newwidth = document.getElementById(id).contentWindow.document .body.scrollWidth;
   }
 
-  document.getElementById(id).height = (newheight+ 10) + "px";
+  document.getElementById(id).height = (newheight + 10) + "px";
   document.getElementById(id).width= (newwidth + 5) + "px";
+}
 
+function setupPdfViewer() {
+  var pdfViewer = document.getElementById("noteframe").contentWindow.pdf2htmlEX.defaultViewer;
 
-  var currFFZoom = 1;
-  var currIEZoom = 100;
-  var frameBody = $('#noteframe').contents().find('body');
+  $('#plus-btn').click(function (){
+    pdfViewer.rescale(1.20, true, [0,0]);
+  });
 
-  $('#plus-btn').on('click',function(){
-    if ($.browser.mozilla){
-      var step = 0.25;
-      currFFZoom += step;
-      frameBody.css('MozTransform','scale(' + currFFZoom + ')');
-    } else {
-      var step = 25;
-      currIEZoom += step;
-      frameBody.css('zoom', ' ' + currIEZoom + '%');
-    }
+  $('#minus-btn').click(function (){
+    pdfViewer.rescale(0.80, true, [0,0]);
   });
 
-  $('#minus-btn').on('click',function(){
-    if ($.browser.mozilla){
-      var step = 0.25;
-      currFFZoom -= step;
-      frameBody.css('MozTransform','scale(' + currFFZoom + ')');
-    } else {
-      var step = 25;
-      currIEZoom -= step;
-      frameBody.css('zoom', ' ' + currIEZoom + '%');
+  if ($(pdfViewer.sidebar).hasClass('opened')) {
+    // only show outline on large screens
+    var body = $('body');
+    if (parseInt($(body.width()).toEm({scope: body})) < 64) {
+      $(pdfViewer.sidebar).removeClass('opened');
     }
+  }
+
+  $('#outline-btn').click(function() {
+    $(pdfViewer.sidebar).toggleClass('opened');
+  });
+
+  $('#scroll-to').change(function() {
+    page = parseInt($(this).val());
+    pdfViewer.scroll_to(page, [0,0]);
   });
 }
 

diff --git a/karmaworld/assets/js/pxem.jQuery.js b/karmaworld/assets/js/pxem.jQuery.js
new file mode 100644 (file)
index 0000000..abc1737
--- /dev/null
+++ b/karmaworld/assets/js/pxem.jQuery.js
@@ -0,0 +1,33 @@
+/*-------------------------------------------------------------------- 
+ * jQuery pixel/em conversion plugins: toEm() and toPx()
+ * by Scott Jehl (scott@filamentgroup.com), http://www.filamentgroup.com
+ * Copyright (c) Filament Group
+ * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) or GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
+ * Article: http://www.filamentgroup.com/lab/update_jquery_plugin_for_retaining_scalable_interfaces_with_pixel_to_em_con/
+ * Options:                                                                    
+               scope: string or jQuery selector for font-size scoping            
+ * Usage Example: $(myPixelValue).toEm(); or $(myEmValue).toPx();
+--------------------------------------------------------------------*/
+
+$.fn.toEm = function(settings){
+       settings = jQuery.extend({
+               scope: 'body'
+       }, settings);
+       var that = parseInt(this[0],10),
+               scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(settings.scope),
+               scopeVal = scopeTest.height();
+       scopeTest.remove();
+       return (that / scopeVal).toFixed(8) + 'em';
+};
+
+
+$.fn.toPx = function(settings){
+       settings = jQuery.extend({
+               scope: 'body'
+       }, settings);
+       var that = parseFloat(this[0]),
+               scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(settings.scope),
+               scopeVal = scopeTest.height();
+       scopeTest.remove();
+       return Math.round(that * scopeVal) + 'px';
+};

diff --git a/karmaworld/templates/notes/note_detail.html b/karmaworld/templates/notes/note_detail.html
index 569eeb002805d823e2aefe4c0124ff2430da1883..f40685745ce33368dcc113252ddd6715ba59d412 100644 (file)
--- a/karmaworld/templates/notes/note_detail.html
+++ b/karmaworld/templates/notes/note_detail.html
@@ -16,6 +16,7 @@
   </script>
   <script src="{{ STATIC_URL }}js/setup-ajax.js"></script>
   <script src="{{ STATIC_URL }}js/note-detail.js" ></script>
+  <script src="{{ STATIC_URL }}js/pxem.jQuery.js"></script>
 {% endblock %}
 
 {% block content %}
@@ -31,7 +32,7 @@
       </div>
 
       <div class="row">
-        <div id="note_name" class="twelve columns">
+        <div id="note_name" class="small-12 columns">
           {{ note.name }}
         </div><!-- /note_name -->
       </div>
@@ -67,8 +68,15 @@
 
       </div><!-- /course_header -->
 
-      {% if zoom %}
-      <div id="zoom-buttons" class="row">
+      {% if pdf_controls %}
+      <div id="zoom-buttons" class="row show-for-large-up">
+        <div id="outline-btn-wrapper" class="small-1 columns hide show-for-large-up">
+          <i id="outline-btn" class="zoom-button fa fa-bars fa-2x"></i>
+        </div>
+        <div class="small-4 columns">
+          <span>Jump to page:
+          <input id="scroll-to" type="text" style="width: 3em; display: inline" /></span>
+        </div>
         <div class="small-2 small-centered columns center">
           <i id="minus-btn" class="zoom-button fa fa-search-minus fa-2x"></i>
           <i id="plus-btn" class="zoom-button fa fa-search-plus fa-2x"></i>
@@ -101,7 +109,8 @@
         <div class="small-12 small-centered columns medium-12 large-12 body_copy">
           {% if note.html %}
             <div class="note-text">
-              <iframe style="border:none; width:100%; min-height: 1000px;" id="noteframe" src="/raw/{{ note.id }}" onload="autoResize('noteframe')"> </iframe>
+              <iframe style="border:none; width:100%; min-height: 1000px;" id="noteframe" src="/raw/{{ note.id }}"
+                      onload="autoResize('noteframe'); {% if pdf_controls %} setupPdfViewer(); {% endif %}"> </iframe>
             </div> <!-- .note-text -->
 
           {% else %} {# note.html #}