[image] more handy image resizing using javascript stable
authorSylvain Thénault <sylvain.thenault@logilab.fr>
Wed, 21 Jul 2010 12:46:21 +0200
branchstable
changeset 6004 d17d3b34bc12
parent 6003 5fbc1c4c13ff
child 6005 0300fae1f7cb
[image] more handy image resizing using javascript
web/data/cubicweb.css
web/data/cubicweb.image.js
web/views/idownloadable.py
--- a/web/data/cubicweb.css	Wed Jul 21 12:42:18 2010 +0200
+++ b/web/data/cubicweb.css	Wed Jul 21 12:46:21 2010 +0200
@@ -117,11 +117,6 @@
   border: none;
 }
 
-img.contentimage {
-  width: 100%;
-  height: 100%;
-}
-
 fieldset {
   border: none;
 }
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/data/cubicweb.image.js	Wed Jul 21 12:46:21 2010 +0200
@@ -0,0 +1,28 @@
+
+jQuery.fn.autoResize = function() {
+    // remove enforced with / height (by CSS and/or HTML attributes)
+    this.css("width", "auto").css("height", "auto");
+    this.removeAttr("width").removeAttr("height"); // Remove
+    // compute image size / max allowed size to fit screen
+    var imgHSize = this.width();
+    var maxHSize = $(window).width() - ($(document).width() - imgHSize);
+    var imgVSize = this.height();
+    var maxVSize = $(window).height() - ($(document).height() - imgVSize);
+    if (maxHSize > 0 && maxVSize > 0) {
+	// if image don't fit screen, set width or height so that
+	// browser keep img ratio, ensuring the other dimension will
+	// also fit the screen
+	if (imgHSize > maxHSize && ((maxHSize / maxVSize) * imgVSize) < maxVSize) {
+	    this.css("width", maxHSize);
+	} else if (imgVSize > maxVSize && ((maxVSize / maxHSize) * imgHSize) < maxHSize) {
+	    this.css("height", maxVSize);
+	} // else image already fit in screen, don't scale it up
+    } else {
+	// XXX can't fit image, don't do anything
+    }
+};
+
+
+$(document).ready(function() {
+	$("img.contentimage").load(function() {$(this).autoResize()});
+    });
--- a/web/views/idownloadable.py	Wed Jul 21 12:42:18 2010 +0200
+++ b/web/views/idownloadable.py	Wed Jul 21 12:46:21 2010 +0200
@@ -118,6 +118,7 @@
         adapter = entity.cw_adapt_to('IDownloadable')
         contenttype = adapter.download_content_type()
         if contenttype.startswith('image/'):
+            self._cw.add_js('cubicweb.image.js')
             self.wview('image', entity.cw_rset, row=entity.cw_row, col=entity.cw_col,
                        link=True, klass='contentimage')
         else:
@@ -160,11 +161,11 @@
 
     title = _('image')
 
-    def call(self):
+    def call(self, **kwargs):
         rset = self.cw_rset
         for i in xrange(len(rset)):
             self.w(u'<div class="efile">')
-            self.wview(self.__regid__, rset, row=i, col=0)
+            self.wview(self.__regid__, rset, row=i, col=0, **kwargs)
             self.w(u'</div>')
 
     def cell_call(self, row, col, link=False, **kwargs):