From 759f22f49260018bceed782467fe5663c16e4c50 Mon Sep 17 00:00:00 2001 From: Charles Connell Date: Tue, 24 Dec 2013 16:25:30 -0500 Subject: [PATCH] Better controls for viewing PDF files --- karmaworld/apps/notes/views.py | 6 +-- karmaworld/assets/js/note-detail.js | 46 ++++++++++----------- karmaworld/assets/js/pxem.jQuery.js | 33 +++++++++++++++ karmaworld/templates/notes/note_detail.html | 17 ++++++-- 4 files changed, 72 insertions(+), 30 deletions(-) create mode 100644 karmaworld/assets/js/pxem.jQuery.js diff --git a/karmaworld/apps/notes/views.py b/karmaworld/apps/notes/views.py index 83c83a7..977eb28 100644 --- 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 1aabd4d..8a6cf5d 100644 --- 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 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('
 
').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('
 
').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 569eeb0..f406857 100644 --- a/karmaworld/templates/notes/note_detail.html +++ b/karmaworld/templates/notes/note_detail.html @@ -16,6 +16,7 @@ + {% endblock %} {% block content %} @@ -31,7 +32,7 @@
-
+
{{ note.name }}
@@ -67,8 +68,15 @@
- {% if zoom %} -
+ {% if pdf_controls %} +
+
+ +
+
+ Jump to page: + +
@@ -101,7 +109,8 @@
{% if note.html %}
- +
{% else %} {# note.html #} -- 2.25.1