From b243fafc5766ef709051c386eda28644eb52a70a Mon Sep 17 00:00:00 2001 From: Michael Wnuk Date: Tue, 10 Jun 2014 11:44:43 -0500 Subject: [PATCH] added gif support to image.js --- betty/cropper/templates/image.js | 133 +++++++++++++++++-------------- 1 file changed, 72 insertions(+), 61 deletions(-) diff --git a/betty/cropper/templates/image.js b/betty/cropper/templates/image.js index d2d1303..ebce724 100644 --- 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 );