cloudinary 1.1.7 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8c21572d5ca0363eb07c0a226e92498d90d9f2b9
-  data.tar.gz: ab8a7a05057dbf409296897576f69745d9516a8a
+  metadata.gz: 9b2454e65f38986500bbd665f0b795bc828c778e
+  data.tar.gz: ad45733ff5323991533c2c731539b39dfed1156c
 SHA512:
-  metadata.gz: d609e1b2f396d259645df469f7ec94769f31bae9e49571b77530aa73521bbece7dcdff545309db03f8486ff4c566a68179b26f3d3473a7db444554fd1cdddcca
-  data.tar.gz: 3496b66de2e36abdde1e9b28e30c392807f784295ed4de76f4f0e87e5362fb9be2202e625cd6ffe85c6e8b4c8d01a70127c6c29ff5a4c6b278e8c0999be7412c
+  metadata.gz: f0896c0b1aadf9c847c2fd057c9ff8f8d268198b342e6287e9edc595a6459247df5bee21040d581d3f603f24e43cad165dca7be34801d87bf3d1420e1e5584b6
+  data.tar.gz: c7170f8a53f59af81e4a7e7ff757f002ab095d409c5c81c93310f5b1632e72fe5f0dd3a3bafb1f1e0a6986184e8b6c8443b0d94a82f600f82400fa4c0e46bc60

data/CHANGELOG.md

@@ -1,4 +1,19 @@
 
+1.2.0 / 2016-06-22
+==================
+
+New functionality and features
+------------------------------
+
+  * New configuration parameter `:client_hints`
+  * Enhanced auto `width` values
+  * Enhanced `quality` values
+
+Other Changes
+-------------
+
+  * Remove coffee and map files. Fixes #203
+
 1.1.7 / 2016-06-06
 ==================
 

data/Rakefile

@@ -16,8 +16,7 @@ namespace :cloudinary do
   task :fetch_assets do
     index_files      = %w[jquery.ui.widget.js jquery.iframe-transport.js jquery.fileupload.js jquery.cloudinary.js]
     processing_files = %w[canvas-to-blob.min.js load-image.all.min.js jquery.fileupload-process.js jquery.fileupload-image.js jquery.fileupload-validate.js]
-    other_files      = %w[jquery.cloudinary.coffee jquery.cloudinary.js.map]
-    files            = index_files + processing_files + other_files
+    files            = index_files + processing_files
 
     release = JSON(RestClient.get("https://api.github.com/repos/cloudinary/cloudinary_js/releases/latest"))
 

data/lib/cloudinary/helper.rb

@@ -46,9 +46,11 @@ module CloudinaryHelper
     source = cloudinary_url_internal(source, tag_options)
 
     responsive_placeholder = Cloudinary::Utils.config_option_consume(tag_options, :responsive_placeholder)
+    client_hints = Cloudinary::Utils.config_option_consume(tag_options, :client_hints)
+
     hidpi = tag_options.delete(:hidpi)
     responsive = tag_options.delete(:responsive)
-    if hidpi || responsive
+    if !client_hints && (hidpi || responsive)
       tag_options["data-src"] = source
       source = nil
       extra_class = responsive ? "cld-responsive" : "cld-hidpi"
@@ -184,6 +186,9 @@ module CloudinaryHelper
     content_tag("script", "$.cloudinary.config(#{params.to_json});".html_safe, :type=>"text/javascript")
   end
 
+  def cl_client_hints_meta_tag
+    tag "meta", "http-equiv" => "Accept-CH", :content => "DPR, Viewport-Width, Width"
+  end
   def cloudinary_url(source, options = {})
     cloudinary_url_internal(source, options.clone)
   end

data/lib/cloudinary/utils.rb

@@ -51,10 +51,10 @@ class Cloudinary::Utils
     angle = build_array(options.delete(:angle)).join(".")
 
     no_html_sizes = has_layer || angle.present? || crop.to_s == "fit" || crop.to_s == "limit" || crop.to_s == "lfill"
-    options.delete(:width) if width && (width.to_f < 1 || no_html_sizes || width == "auto" || responsive_width)
+    options.delete(:width) if width && (width.to_f < 1 || no_html_sizes || width.to_s.start_with?("auto") || responsive_width)
     options.delete(:height) if height && (height.to_f < 1 || no_html_sizes || responsive_width)
 
-    width=height=nil if crop.nil? && !has_layer && width != "auto" && !allow_implicit_crop_mode
+    width=height=nil if crop.nil? && !has_layer && !width.to_s.start_with?("auto") && !allow_implicit_crop_mode
 
     background = options.delete(:background)
     background = background.sub(/^#/, 'rgb:') if background
@@ -156,7 +156,7 @@ class Cloudinary::Utils
       transformations << generate_transformation_string(responsive_width_transformation.clone, allow_implicit_crop_mode)
     end
 
-    if width.to_s == "auto" || responsive_width
+    if width.to_s.start_with?( "auto") || responsive_width
       options[:responsive] = true
     end
     if dpr.to_s == "auto"

data/lib/cloudinary/version.rb

@@ -1,4 +1,4 @@
 # Copyright Cloudinary
 module Cloudinary
-  VERSION = "1.1.7"
+  VERSION = "1.2.0"
 end

data/spec/cloudinary_helper_spec.rb

@@ -11,6 +11,9 @@ end
 RSpec.describe CloudinaryHelper do
   let(:helper) { helper_class.new }
   let(:options) { {} }
+  before :each do
+    Cloudinary.config({})
+  end
   context "#cl_image_upload_tag" do
     let(:options) {{:multiple => true}}
     before do
@@ -70,5 +73,58 @@ RSpec.describe CloudinaryHelper do
         expect(test_tag['data-src']).to eq( "http://res.cloudinary.com/test/image/upload/dpr_auto/sample.jpg")
       end
     end
+
+    context ":client_hints" do
+      shared_examples "client_hints" do
+        it "should not use data-src or set responsive class" do
+          expect(test_tag.name).to match( 'img')
+          expect(test_tag['class']).to be_nil
+          expect(test_tag['data-src']).to be_nil
+          expect(test_tag['src']).to eq( "http://res.cloudinary.com/test/image/upload/dpr_auto,w_auto/sample.jpg")
+        end
+        it "should override :responsive" do
+          Cloudinary.config.responsive = true
+          expect(test_tag.name).to match( 'img')
+          expect(test_tag['class']).to be_nil
+          expect(test_tag['data-src']).to be_nil
+          expect(test_tag['src']).to eq( "http://res.cloudinary.com/test/image/upload/dpr_auto,w_auto/sample.jpg")
+        end
+      end
+      context "as option" do
+        let(:options) { {:dpr => :auto, :cloud_name => "test", :width => "auto", :client_hints => true} }
+        include_examples "client_hints"
+      end
+      context "as global configuration" do
+        before do
+          Cloudinary.config.client_hints = true
+        end
+        let(:options) { {:dpr => :auto, :cloud_name => "test", :width => "auto"} }
+        include_examples "client_hints"
+      end
+
+      context "false" do
+        let(:options) { {:width => :auto, :cloud_name => "test", :client_hints => false} }
+        it "should use normal responsive behaviour" do
+          expect(test_tag.name).to match( 'img')
+          expect(test_tag['class']).to eq( 'cld-responsive')
+          expect(test_tag['data-src']).to eq( "http://res.cloudinary.com/test/image/upload/w_auto/sample.jpg")
+        end
+      end
+      context "width" do
+        let(:options) { {:dpr => :auto, :cloud_name => "test", :width => "auto:breakpoints", :client_hints => true}}
+        it "supports auto width" do
+          expect(test_tag['src']).to eq( "http://res.cloudinary.com/test/image/upload/dpr_auto,w_auto:breakpoints/sample.jpg")
+        end
+      end
+    end
+  end
+
+  context "#cl_client_hints_meta_tag" do
+    it "should create a meta tag" do
+      tag = TestTag.new( helper.cl_client_hints_meta_tag)
+      expect(tag.name).to match('meta')
+      expect(tag['content']).to eq('DPR, Viewport-Width, Width')
+      expect(tag['http-equiv']).to eq('Accept-CH')
+    end
   end
 end

data/spec/utils_spec.rb

@@ -207,6 +207,18 @@ describe Cloudinary::Utils do
         .to produce_url("#{upload_path}/c_crop,h_10,w_10/test")
               .and mutate_options_to({ :width => "10", :height => "10" })
     end
+    it "should support auto width" do
+      expect(["test", { :width => "auto:20", :crop => :fill }])
+          .to produce_url("#{upload_path}/c_fill,w_auto:20/test")
+      expect(["test", { :width => "auto:20:350", :crop => :fill }])
+          .to produce_url("#{upload_path}/c_fill,w_auto:20:350/test")
+      expect(["test", { :width => "auto:breakpoints", :crop => :fill }])
+          .to produce_url("#{upload_path}/c_fill,w_auto:breakpoints/test")
+      expect(["test", { :width => "auto:breakpoints_100_1900_20_15", :crop => :fill }])
+          .to produce_url("#{upload_path}/c_fill,w_auto:breakpoints_100_1900_20_15/test")
+      expect(["test", { :width => "auto:breakpoints:json", :crop => :fill }])
+          .to produce_url("#{upload_path}/c_fill,w_auto:breakpoints:json/test")
+    end
   end
 
   it "should use x, y, radius, prefix, gravity and quality from options" do
@@ -214,7 +226,24 @@ describe Cloudinary::Utils do
       .to produce_url("#{upload_path}/g_center,p_a,q_0.4,r_3,x_1,y_2/test")
             .and empty_options
   end
+  context ":quality" do
+    it "support a percent value" do
+      expect(["test", { :x => 1, :y => 2, :radius => 3, :gravity => :center, :quality => 80, :prefix => "a" }])
+          .to produce_url("#{upload_path}/g_center,p_a,q_80,r_3,x_1,y_2/test")
+
+      expect(["test", { :x => 1, :y => 2, :radius => 3, :gravity => :center, :quality => "80:444", :prefix => "a" }])
+          .to produce_url("#{upload_path}/g_center,p_a,q_80:444,r_3,x_1,y_2/test")
+    end
+    it "should support auto value" do
+
+      expect(["test", { :x => 1, :y => 2, :radius => 3, :gravity => :center, :quality => "auto", :prefix => "a" }])
+          .to produce_url("#{upload_path}/g_center,p_a,q_auto,r_3,x_1,y_2/test")
 
+      expect(["test", { :x => 1, :y => 2, :radius => 3, :gravity => :center, :quality => "auto:good", :prefix => "a" }])
+          .to produce_url("#{upload_path}/g_center,p_a,q_auto:good,r_3,x_1,y_2/test")
+
+    end
+  end
   describe ":transformation" do
     it "should support named tranformation" do
       expect(["test", { :transformation => "blip" }])

data/vendor/assets/javascripts/cloudinary/jquery.cloudinary.js

@@ -1,6 +1,6 @@
 
 /**
- * Cloudinary's JavaScript library - Version 2.0.9
+ * Cloudinary's JavaScript library - Version 2.1.0
  * Copyright Cloudinary
  * see https://github.com/cloudinary/cloudinary_js
  *
@@ -1748,16 +1748,18 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
     };
 
     Transformation.prototype.dpr = function(value) {
-      return this.param(value, "dpr", "dpr", function(dpr) {
-        dpr = dpr.toString();
-        if (dpr === "auto") {
-          return "1.0";
-        } else if (dpr != null ? dpr.match(/^\d+$/) : void 0) {
-          return dpr + ".0";
-        } else {
-          return dpr;
-        }
-      });
+      return this.param(value, "dpr", "dpr", (function(_this) {
+        return function(dpr) {
+          dpr = dpr.toString();
+          if ((dpr === "auto") && _this.getValue("client_hints") !== true) {
+            return "1.0";
+          } else if (dpr != null ? dpr.match(/^\d+$/) : void 0) {
+            return dpr + ".0";
+          } else {
+            return dpr;
+          }
+        };
+      })(this));
     };
 
     Transformation.prototype.effect = function(value) {
@@ -2389,6 +2391,12 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
       return element;
     };
 
+    HtmlTag.isResponsive = function(tag, responsiveClass) {
+      var dataSrc;
+      dataSrc = Util.getData(tag, 'src-cache') || Util.getData(tag, 'src');
+      return Util.hasClass(tag, responsiveClass) && /\bw_auto\b/.exec(dataSrc);
+    };
+
     return HtmlTag;
 
   })();
@@ -2837,9 +2845,9 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
 
   })(TextLayer);
   Cloudinary = (function() {
-    var AKAMAI_SHARED_CDN, CF_SHARED_CDN, DEFAULT_POSTER_OPTIONS, DEFAULT_VIDEO_SOURCE_TYPES, OLD_AKAMAI_SHARED_CDN, SHARED_CDN, VERSION, absolutize, applyBreakpoints, cdnSubdomainNumber, closestAbove, cloudinaryUrlPrefix, defaultBreakpoints, finalizeResourceType, parentWidth;
+    var AKAMAI_SHARED_CDN, CF_SHARED_CDN, DEFAULT_POSTER_OPTIONS, DEFAULT_VIDEO_SOURCE_TYPES, OLD_AKAMAI_SHARED_CDN, SHARED_CDN, VERSION, absolutize, applyBreakpoints, cdnSubdomainNumber, closestAbove, cloudinaryUrlPrefix, defaultBreakpoints, finalizeResourceType, findContainerWidth, maxWidth, updateDpr;
 
-    VERSION = "2.0.9";
+    VERSION = "2.1.0";
 
     CF_SHARED_CDN = "d3jpl91pxevbkh.cloudfront.net";
 
@@ -3137,17 +3145,20 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
      */
 
     Cloudinary.prototype.image = function(publicId, options) {
-      var img;
+      var client_hints, img, ref, ref1;
       if (options == null) {
         options = {};
       }
       img = this.imageTag(publicId, options);
-      if (options.src == null) {
+      client_hints = (ref = (ref1 = options.client_hints) != null ? ref1 : this.config('client_hints')) != null ? ref : false;
+      if (!((options.src != null) || client_hints)) {
         img.setAttr("src", '');
       }
       img = img.toDOM();
-      Util.setData(img, 'src-cache', this.url(publicId, options));
-      this.cloudinary_update(img, options);
+      if (!client_hints) {
+        Util.setData(img, 'src-cache', this.url(publicId, options));
+        this.cloudinary_update(img, options);
+      }
       return img;
     };
 
@@ -3355,11 +3366,11 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
      * @ignore
      */
 
-    Cloudinary.prototype.calc_breakpoint = function(element, width) {
+    Cloudinary.prototype.calc_breakpoint = function(element, width, steps) {
       var breakpoints, point;
       breakpoints = Util.getData(element, 'breakpoints') || Util.getData(element, 'stoppoints') || this.config('breakpoints') || this.config('stoppoints') || defaultBreakpoints;
       if (Util.isFunction(breakpoints)) {
-        return breakpoints(width);
+        return breakpoints(width, steps);
       } else {
         if (Util.isString(breakpoints)) {
           breakpoints = ((function() {
@@ -3414,8 +3425,11 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
       return dprString;
     };
 
-    defaultBreakpoints = function(width) {
-      return 100 * Math.ceil(width / 100);
+    defaultBreakpoints = function(width, steps) {
+      if (steps == null) {
+        steps = 100;
+      }
+      return steps * Math.ceil(width / steps);
     };
 
     closestAbove = function(list, value) {
@@ -3510,17 +3524,17 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
       return this;
     };
 
-    applyBreakpoints = function(tag, width, options) {
+    applyBreakpoints = function(tag, width, steps, options) {
       var ref, ref1, ref2, responsive_use_breakpoints;
       responsive_use_breakpoints = (ref = (ref1 = (ref2 = options['responsive_use_breakpoints']) != null ? ref2 : options['responsive_use_stoppoints']) != null ? ref1 : this.config('responsive_use_breakpoints')) != null ? ref : this.config('responsive_use_stoppoints');
       if ((!responsive_use_breakpoints) || (responsive_use_breakpoints === 'resize' && !options.resizing)) {
         return width;
       } else {
-        return this.calc_breakpoint(tag, width);
+        return this.calc_breakpoint(tag, width, steps);
       }
     };
 
-    parentWidth = function(element) {
+    findContainerWidth = function(element) {
       var containerWidth, style;
       containerWidth = 0;
       while (((element = element != null ? element.parentNode : void 0) instanceof Element) && !containerWidth) {
@@ -3532,6 +3546,20 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
       return containerWidth;
     };
 
+    updateDpr = function(dataSrc, roundDpr) {
+      return dataSrc.replace(/\bdpr_(1\.0|auto)\b/g, 'dpr_' + this.device_pixel_ratio(roundDpr));
+    };
+
+    maxWidth = function(requiredWidth, tag) {
+      var imageWidth;
+      imageWidth = Util.getData(tag, 'width') || 0;
+      if (requiredWidth > imageWidth) {
+        imageWidth = requiredWidth;
+        Util.setData(tag, 'width', requiredWidth);
+      }
+      return requiredWidth;
+    };
+
 
     /**
     * Update hidpi (dpr_auto) and responsive (w_auto) fields according to the current container size and the device pixel ratio.
@@ -3549,10 +3577,16 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
      */
 
     Cloudinary.prototype.cloudinary_update = function(elements, options) {
-      var containerWidth, imageWidth, j, len, ref, ref1, ref2, ref3, requestedWidth, responsiveClass, roundDpr, setUrl, src, tag;
+      var client_hints, containerWidth, dataSrc, j, len, match, ref, ref1, ref2, ref3, ref4, ref5, ref6, ref7, requiredWidth, responsive, responsiveClass, roundDpr, setUrl, tag;
       if (options == null) {
         options = {};
       }
+      client_hints = (ref = (ref1 = options.client_hints) != null ? ref1 : this.config('client_hints')) != null ? ref : false;
+      client_hints = client_hints || (typeof document !== "undefined" && document !== null ? document.querySelector('meta[http-equiv="Accept-CH"]') : void 0);
+      if (client_hints) {
+        return;
+      }
+      responsive = (ref2 = (ref3 = options.responsive) != null ? ref3 : this.config('responsive')) != null ? ref2 : false;
       elements = (function() {
         switch (false) {
           case !Util.isArray(elements):
@@ -3565,30 +3599,33 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
             return [elements];
         }
       })();
-      responsiveClass = (ref = (ref1 = this.responsiveConfig['responsive_class']) != null ? ref1 : options['responsive_class']) != null ? ref : this.config('responsive_class');
-      roundDpr = (ref2 = options['round_dpr']) != null ? ref2 : this.config('round_dpr');
+      responsiveClass = (ref4 = (ref5 = this.responsiveConfig['responsive_class']) != null ? ref5 : options['responsive_class']) != null ? ref4 : this.config('responsive_class');
+      roundDpr = (ref6 = options['round_dpr']) != null ? ref6 : this.config('round_dpr');
       for (j = 0, len = elements.length; j < len; j++) {
         tag = elements[j];
-        if (!((ref3 = tag.tagName) != null ? ref3.match(/img/i) : void 0)) {
+        if (!((ref7 = tag.tagName) != null ? ref7.match(/img/i) : void 0)) {
           continue;
         }
         setUrl = true;
-        if (options.responsive) {
+        if (responsive && !client_hints) {
           Util.addClass(tag, responsiveClass);
         }
-        src = Util.getData(tag, 'src-cache') || Util.getData(tag, 'src');
-        if (!Util.isEmpty(src)) {
-          src = src.replace(/\bdpr_(1\.0|auto)\b/g, 'dpr_' + this.device_pixel_ratio(roundDpr));
-          if (Util.hasClass(tag, responsiveClass) && /\bw_auto\b/.exec(src)) {
-            containerWidth = parentWidth(tag);
+        dataSrc = Util.getData(tag, 'src-cache') || Util.getData(tag, 'src');
+        if (!Util.isEmpty(dataSrc)) {
+          dataSrc = updateDpr.call(this, dataSrc, roundDpr);
+          if (HtmlTag.isResponsive(tag, responsiveClass)) {
+            containerWidth = findContainerWidth(tag);
             if (containerWidth !== 0) {
-              requestedWidth = applyBreakpoints.call(this, tag, containerWidth, options);
-              imageWidth = Util.getData(tag, 'width') || 0;
-              if (requestedWidth > imageWidth) {
-                imageWidth = requestedWidth;
-                Util.setData(tag, 'width', requestedWidth);
+              switch (false) {
+                case !/w_auto:breakpoints/.test(dataSrc):
+                  requiredWidth = maxWidth(containerWidth, tag);
+                  dataSrc = dataSrc.replace(/w_auto:breakpoints([_0-9]*)(:[0-9]+)?/, "w_auto:breakpoints$1:" + requiredWidth);
+                  break;
+                case !(match = /w_auto(:(\d+))?/.exec(dataSrc)):
+                  requiredWidth = applyBreakpoints.call(this, tag, containerWidth, match[2], options);
+                  requiredWidth = maxWidth(requiredWidth, tag);
+                  dataSrc = dataSrc.replace(/w_auto[^,\/]*/g, "w_" + requiredWidth);
               }
-              src = src.replace(/\bw_auto\b/g, 'w_' + imageWidth);
               Util.removeAttribute(tag, 'width');
               if (!options.responsive_preserve_height) {
                 Util.removeAttribute(tag, 'height');
@@ -3598,7 +3635,7 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
             }
           }
           if (setUrl) {
-            Util.setAttribute(tag, 'src', src);
+            Util.setAttribute(tag, 'src', dataSrc);
           }
         }
       }
@@ -3645,16 +3682,20 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
      */
 
     CloudinaryJQuery.prototype.image = function(publicId, options) {
-      var img, tag_options, url;
+      var client_hints, img, ref, ref1;
       if (options == null) {
         options = {};
       }
-      tag_options = Util.merge({
-        src: ''
-      }, options);
-      img = this.imageTag(publicId, tag_options).toHtml();
-      url = this.url(publicId, options);
-      return jQuery(img).data('src-cache', url).cloudinary_update(options);
+      img = this.imageTag(publicId, options);
+      client_hints = (ref = (ref1 = options.client_hints) != null ? ref1 : this.config('client_hints')) != null ? ref : false;
+      if (!((options.src != null) || client_hints)) {
+        img.setAttr("src", '');
+      }
+      img = jQuery(img.toHtml());
+      if (!client_hints) {
+        img.data('src-cache', this.url(publicId, options)).cloudinary_update(options);
+      }
+      return img;
     };
 
 
@@ -4022,10 +4063,10 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
     TextLayer: TextLayer,
     SubtitlesLayer: SubtitlesLayer,
     Cloudinary: Cloudinary,
-    VERSION: "2.0.9",
+    VERSION: "2.1.0",
     CloudinaryJQuery: CloudinaryJQuery
   };
   return cloudinary;
 });
 
-//# sourceMappingURL=jquery.cloudinary.js.map
+