matthias/mayan-edms
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added grab-scroll to document page view

Browse Source
This commit is contained in:
Roberto Rosario
2011-04-20 23:38:47 -04:00
parent f4fa7e327d
commit 6c6cf81792
3 changed files with 141 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/documents/forms.py
View File

@@ -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,
})

35
apps/main/templates/base.html
View File

@@ -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',
@@ -68,17 +67,21 @@
'autoScale' : false
});
$("a.fancybox-iframe").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack',
'type' : 'iframe',
'autoScale' : false,
'width' : '99%',
'height' : '99%',
'showNavArrows' : false
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack',
'type' : 'iframe',
'autoScale' : false,
'width' : '99%',
'height' : '99%',
'showNavArrows' : false,
'margin' : 20
});
$('.scrollable').scrollview();
$('.full-height').height($(window).height() - 175);
});
</script>
{% block javascript %}{% endblock %}

120
site_media/packages/jquery.scrollview.js Normal file
View File

@@ -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);