added gif support to image.js

theonion · Jun 10, 2014 · b243faf · b243faf
1 parent 9a93d04
commit b243faf
Showing 1 changed file with 72 additions and 61 deletions.
diff --git a/betty/cropper/templates/image.js b/betty/cropper/templates/image.js
@@ -2,16 +2,12 @@
     /* We can request an image at every possible width, but let's limit it to a reasonable number
        We can set these so they correspond to our more common sizes.
     */
-
-    var RATIOS = {{ BETTY_RATIOS|safe }};
-    var ASPECT_RATIO_TOLERANCE = .1; // 10% tolerance. 
-    var breakpoints = [{{ BETTY_WIDTHS|join:","}}];
-    function tmpl(text, dict) {
-        for (var k in dict) {
-            text = text.replace("{" + k + "}", dict[k]);
-        }
-        return text;
-    }
+    var IMAGE_URL = "{{ BETTY_IMAGE_URL }}",
+        RATIOS = {{ BETTY_RATIOS|safe }},
+        ASPECT_RATIO_TOLERANCE = .1, // 10% tolerance. 
+        breakpoints = [{{ BETTY_WIDTHS|join:","}}];
+
+
     w.picturefill = function(elements) {
         //don't need to do them all at once. can decide to do lazy load if needed
         if (elements instanceof Array) {
@@ -24,78 +20,94 @@
             var ps = w.document.getElementsByTagName( "div" );
         }
         var imageData = [];
-        for( var i = 0, il = ps.length; i < il; i++ ){
+        for (var i = 0, il = ps.length; i < il; i++){
             var el = ps[i];
             if(el.getAttribute( "data-type" ) !== "image" ){
                 continue;
             }
             var div = el.getElementsByTagName( "div" )[0];
-            if( el.getAttribute( "data-image-id" ) !== null ){
+            if (el.getAttribute( "data-image-id" ) !== null ) {
                 var id = el.getAttribute( "data-image-id" ),
                     crop = el.getAttribute( "data-crop" );
-                var _w = div.offsetWidth,
-                    _h = div.offsetHeight;
-                
-                if (!crop || crop === "" || crop === "auto") {
-                    crop = computeAspectRatio(_w, _h);
-                }
-                if (el.getAttribute("data-format")) {
-                    format = el.getAttribute("data-format");
-                }
-                else {
-                    format = "jpg";
-                }
 
-                var width = null;
-                for (var j = 0; j < breakpoints.length; j++) {
-                    if (_w <= breakpoints[j]) {
-                        width = breakpoints[j];
-                        break;
+                var id_str = "";
+                for(var ii=0; ii < id.length; ii++) {
+                    if ((ii % 4) === 0) {
+                        id_str += "/";
                     }
-                }
-                if (width === null) {
-                  width = _w;
-                }
-
-                // Scale the image up to the pixel ratio
-                if (w.devicePixelRatio) {
-                  width = Math.round(w.devicePixelRatio * width);
+                    id_str += id.charAt(ii);
                 }
 
                 // Find any existing img element in the picture element
                 var picImg = div.getElementsByTagName( "img" )[ 0 ];
-
                 if(!picImg){
                     // for performance reasons this will be added to the dom later
                     picImg = w.document.createElement( "img" );
                     picImg.alt = el.getAttribute( "data-alt" );
                 }
 
-                //picImg.className = "loading";
-                picImg.onload = function() {
-                    //this.className = "";
-                };
-                // if the existing image is larger (or the same) than the one we're about to load, do not update.
-                //however if the crop changes, we need to reload.
-                if (width > 0) {
+                if (el.getAttribute("data-format")) {
+                    format = el.getAttribute("data-format");
+                }
+                else {
+                    format = "jpg";
+                }
 
-                    //ie8 doesn't support natural width, always load.
-                    if (typeof picImg.naturalWidth === "undefined" || picImg.naturalWidth < width ||
-                        crop !== computeAspectRatio(picImg.naturalWidth, picImg.naturalHeight)) {
-                        var id_str = "";
-                        for(var ii=0; ii < id.length; ii++) {
-                            if ((ii % 4) === 0) {
-                                id_str += "/";
-                            }
-                            id_str += id.charAt(ii);
+                if (format === "gif") {
+                    // for GIFs, we just dump out original
+                    
+                    imageData.push({
+                        'div': div,
+                        'img': picImg,
+                        'url': IMAGE_URL + id_str + "/animated/original.gif"
+                    });
+                }
+                else {
+                    // determine size & crop for PNGs & JPGs.
+                    var _w = div.offsetWidth,
+                        _h = div.offsetHeight;
+
+                    if (!crop || crop === "") {
+                        crop = computeAspectRatio(_w, _h);
+                    }
+
+                    var width = null;
+                    for (var j = 0; j < breakpoints.length; j++) {
+                        if (_w <= breakpoints[j]) {
+                            width = breakpoints[j];
+                            break;
                         }
-                        var url = "{{ BETTY_IMAGE_URL }}" + "/" + id_str + "/" + crop + "/" + width + "." + format;
+                    }
+                    if (width === null) {
+                      width = _w;
+                    }
+
+                    // Scale the image up to the pixel ratio
+                    if (w.devicePixelRatio) {
+                      width = Math.round(w.devicePixelRatio * width);
+                    }
 
-                        imageData.push({
-                            'div': div,
-                            'img': picImg,
-                            'url': url
-                        });
+                    // if the existing image is larger (or the same) than the one we're about to load, do not update.
+                    //however if the crop changes, we need to reload.
+                    if (width > 0) {
+                        //ie8 doesn't support natural width, always load.
+                        if (typeof picImg.naturalWidth === "undefined" || picImg.naturalWidth < width ||
+                            crop !== computeAspectRatio(picImg.naturalWidth, picImg.naturalHeight)) {
+                            var id_str = "";
+                            for(var ii=0; ii < id.length; ii++) {
+                                if ((ii % 4) === 0) {
+                                    id_str += "/";
+                                }
+                                id_str += id.charAt(ii);
+                            }
+                            var url = IMAGE_URL + "/" + id_str + "/" + crop + "/" + width + "." + format;
+
+                            imageData.push({
+                                'div': div,
+                                'img': picImg,
+                                'url': url
+                            });
+                        }
                     }
                 }
             }
@@ -140,7 +152,6 @@
                 w.removeEventListener( "load", w.picturefill, false );
             }, false );
             w.addEventListener( "load", w.picturefill, false );
-
         }
         else if( w.attachEvent ){
             w.attachEvent( "onload", w.picturefill );