Added grab-scroll to document page view

apps/documents/forms.py

@@ -32,7 +32,7 @@ class DocumentPageImageWidget(forms.widgets.Widget):
     def render(self, name, value, attrs=None):
         if value:
             output = []
-            output.append('<div style="overflow: auto;"><img src="%(img)s?page=%(page)s" /></div>' % {
+            output.append('<div class="full-height scrollable" style="overflow: auto;"><img src="%(img)s?page=%(page)s" /></div>' % {
                 'img': reverse('document_display', args=[value.document.id]),
                 'page': value.page_number,
                 })

apps/main/templates/base.html

@@ -31,6 +31,11 @@
 {% endblock %}
 
 {% block web_theme_javascript %}
+    <script type="text/javascript" src="{{ MEDIA_URL }}packages/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
+    <script type="text/javascript" src="{{ MEDIA_URL }}packages/jquery.fancybox-1.3.4/fancybox/jquery.easing-1.3.pack.js"></script>
+
+    <script type="text/javascript" src="{{ MEDIA_URL }}packages/jquery.scrollview.js"></script>
+
     <script type="text/javascript">
         jQuery(document).ready(function() {
             $("input:text:visible:not(#livesearch):not([readonly]):enabled:first").focus();        
@@ -42,13 +47,7 @@
                     return false;
                 });
             });        
-        });
-    </script>
 
-    <script type="text/javascript" src="{{ MEDIA_URL }}packages/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
-    <script type="text/javascript" src="{{ MEDIA_URL }}packages/jquery.fancybox-1.3.4/fancybox/jquery.easing-1.3.pack.js"></script>
-    <script type="text/javascript">
-        jQuery(document).ready(function() {
             $("a.fancybox").fancybox({
             'titleShow'     : false,
             'transitionIn'  : 'elastic',
@@ -77,8 +76,12 @@
                 'autoScale'     : false,
                 'width'         : '99%',
                 'height'        : '99%',
-            'showNavArrows' : false
+                'showNavArrows' : false,
+                'margin'        : 20
             });    
+            $('.scrollable').scrollview();
+            $('.full-height').height($(window).height() - 175);
+
         });
     </script>
     {% block javascript %}{% endblock %}

site_media/packages/jquery.scrollview.js

@@ -0,0 +1,120 @@
+/**
+ * ScrollView - jQuery plugin 0.1
+ *
+ * This plugin supplies contents view by grab and drag scroll.
+ *
+ * Copyright (c) 2009 Toshimitsu Takahashi
+ *
+ * Released under the MIT license.
+ *
+ * == Usage =======================
+ *   // apply to block element.
+ *   $("#map").scrollview();
+ *   
+ *   // with setting grab and drag icon urls.
+ *   //   grab: the cursor when mouse button is up.
+ *   //   grabbing: the cursor when mouse button is down.
+ *   //
+ *   $("#map".scrollview({
+ *     grab : "images/openhand.cur",
+ *     grabbing : "images/closedhand.cur"
+ *   });
+ * ================================
+ */
+(function() {
+    function ScrollView(){ this.initialize.apply(this, arguments) }
+    ScrollView.prototype = {
+        initialize: function(container, config){
+                // setting cursor.
+                var gecko = navigator.userAgent.indexOf("Gecko/") != -1;
+                var opera = navigator.userAgent.indexOf("Opera/") != -1;
+                var mac = navigator.userAgent.indexOf("Mac OS") != -1;
+                if (opera) {
+                    this.grab = "default";
+                    this.grabbing = "move";
+                } else if (!(mac && gecko) && config) {
+                    if (config.grab) {
+                       this.grab = "url(\"" + config.grab + "\"),default";
+                    }
+                    if (config.grabbing) {
+                       this.grabbing = "url(" + config.grabbing + "),move";
+                    }
+                } else if (gecko) {
+                    this.grab = "-moz-grab";
+                    this.grabbing = "-moz-grabbing";
+                } else {
+                    this.grab = "default";
+                    this.grabbing = "move";
+                }
+                
+                // Get container and image.
+                this.m = $(container);
+                this.i = this.m.children().css("cursor", this.grab);
+                
+                this.isgrabbing = false;
+                
+                // Set mouse events.
+                var self = this;
+                this.i.mousedown(function(e){
+                        self.startgrab();
+                        this.xp = e.pageX;
+                        this.yp = e.pageY;
+                        return false;
+                }).mousemove(function(e){
+                        if (!self.isgrabbing) return true;
+                        self.scrollTo(this.xp - e.pageX, this.yp - e.pageY);
+                        this.xp = e.pageX;
+                        this.yp = e.pageY;
+                        return false;
+                })
+                .mouseout(function(){ self.stopgrab() })
+                .mouseup(function(){ self.stopgrab() })
+                .dblclick(function(){
+                        var _m = self.m;
+                        var off = _m.offset();
+                        var dx = this.xp - off.left - _m.width() / 2;
+                        if (dx < 0) {
+                                dx = "+=" + dx + "px";
+                        } else {
+                                dx = "-=" + -dx + "px";
+                        }
+                        var dy = this.yp - off.top - _m.height() / 2;
+                        if (dy < 0) {
+                                dy = "+=" + dy + "px";
+                        } else {
+                                dy = "-=" + -dy + "px";
+                        }
+                        _m.animate({ scrollLeft:  dx, scrollTop: dy },
+                                "normal", "swing");
+                });
+                
+                this.centering();
+        },
+        centering: function(){
+                var _m = this.m;
+                var w = this.i.width() - _m.width();
+                var h = this.i.height() - _m.height();
+                _m.scrollLeft(w / 2).scrollTop(h / 2);
+        },
+        startgrab: function(){
+                this.isgrabbing = true;
+                this.i.css("cursor", this.grabbing);
+        },
+        stopgrab: function(){
+                this.isgrabbing = false;
+                this.i.css("cursor", this.grab);
+        },
+        scrollTo: function(dx, dy){
+                var _m = this.m;
+                var x = _m.scrollLeft() + dx;
+                var y = _m.scrollTop() + dy;
+                _m.scrollLeft(x).scrollTop(y);
+        }
+    };
+    
+    jQuery.fn.scrollview = function(config){
+        return this.each(function(){
+            new ScrollView(this, config);
+        });
+    };
+})(jQuery);