diff --git a/CHANGELOG.md b/CHANGELOG.md index 3df81d2f..eb1298a3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,24 @@ +2.1.0 / 2016-06-22 +================== + +New functionality and features +------------------------------ + + * New configuration parameter `:client_hints` + * Enhanced auto `width` values + * Enhanced `quality` values + +Other Changes +------------- + + * Use duck-typing to set/get attributes. + * Updated dependencies + * Add `client_hints`, `width`, `quality` tests + * Create spec-helper.coffee. Add `sharedExamples`. + * Fix assets compilation issue with Cloudinary GEM cloudinary/cloudinary_gem#203 + * Remove map reference in `js` folder. Fixes cloudinary/cloudinary_gem#199 + 2.0.9 / 2016-06-05 ================== diff --git a/Gruntfile.coffee b/Gruntfile.coffee index 199e0ad6..5c4deb60 100644 --- a/Gruntfile.coffee +++ b/Gruntfile.coffee @@ -61,12 +61,22 @@ module.exports = (grunt)-> reporters: ['dots'] configFile: 'karma.coffee' browserDisconnectTolerance: 3 + files: [ + { pattern: 'test/docRoot/*', watched: false, included: false, served: true, nocache: false} + { pattern: 'test/docRoot/css/*', watched: false, included: false, served: true, nocache: false} + { pattern: 'bower_components/bootstrap/dist/css/*', watched: false, included: false, served: true, nocache: false} + { pattern: 'bower_components/bootstrap/dist/js/*', watched: false, included: false, served: true, nocache: false} + { pattern: 'bower_components/blueimp-file-upload/js/*', watched: false, included: false, served: true, nocache: false} + { pattern: 'bower_components/jquery.ui/ui/*', watched: false, included: false, served: true, nocache: false} + ] + 'cloudinary-core': files: src: [ "bower_components/lodash/lodash.js" "<%= karmaCommon %>" + "test/spec/responsive-core-spec.js" ] @@ -74,6 +84,7 @@ module.exports = (grunt)-> files: src: [ "<%= karmaCommon %>" + "test/spec/responsive-shrinkwrap-spec.js" ] 'cloudinary-jquery': @@ -81,6 +92,7 @@ module.exports = (grunt)-> src: [ "bower_components/jquery/dist/jquery.js" "<%= karmaCommon %>" + "test/spec/responsive-jquery-spec.js" ] 'cloudinary-jquery-file-upload': @@ -152,12 +164,12 @@ module.exports = (grunt)-> files: for repo in repos dest = if /shrinkwrap/.test(repo) then "cloudinary-core" else repo {'cwd': 'build','src': ["#{repo}.js", "#{repo}.min.js", "#{repo}.min.js.map"], 'dest': "../pkg/pkg-#{dest}/", 'expand': true} - doc: - files: for repo in repos when !/shrinkwrap/.test(repo) - expand: true - cwd: "doc/pkg-#{repo}/" - src: ["**"] - dest: "../pkg/pkg-#{repo}/" +# doc: +# files: for repo in repos when !/shrinkwrap/.test(repo) +# expand: true +# cwd: "doc/pkg-#{repo}/" +# src: ["**"] +# dest: "../pkg/pkg-#{repo}/" version: options: @@ -282,7 +294,7 @@ module.exports = (grunt)-> grunt.loadNpmTasks('grunt-version') grunt.registerTask('default', ['concat', 'coffee']) - grunt.registerTask('compile', ['clean:build', 'clean:js', 'concat', 'coffee', 'copy:backward-compatible', 'copy:dist']) + grunt.registerTask('compile', ['clean:build', 'clean:js', 'concat', 'coffee', 'copy:backward-compatible']) grunt.registerTask('build', ['clean', 'concat', 'coffee', 'copy:backward-compatible', 'jsdoc']) grunt.registerTask('lodash', (name, target)-> lodashCalls = grunt.file.read('src/util/lodash.coffee').match(/_\.\w+/g) diff --git a/Gruntfile.js b/Gruntfile.js index 141dd641..91c25c7c 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -60,21 +60,60 @@ options: { reporters: ['dots'], configFile: 'karma.coffee', - browserDisconnectTolerance: 3 + browserDisconnectTolerance: 3, + files: [ + { + pattern: 'test/docRoot/*', + watched: false, + included: false, + served: true, + nocache: false + }, { + pattern: 'test/docRoot/css/*', + watched: false, + included: false, + served: true, + nocache: false + }, { + pattern: 'bower_components/bootstrap/dist/css/*', + watched: false, + included: false, + served: true, + nocache: false + }, { + pattern: 'bower_components/bootstrap/dist/js/*', + watched: false, + included: false, + served: true, + nocache: false + }, { + pattern: 'bower_components/blueimp-file-upload/js/*', + watched: false, + included: false, + served: true, + nocache: false + }, { + pattern: 'bower_components/jquery.ui/ui/*', + watched: false, + included: false, + served: true, + nocache: false + } + ] }, 'cloudinary-core': { files: { - src: ["bower_components/lodash/lodash.js", "<%= karmaCommon %>"] + src: ["bower_components/lodash/lodash.js", "<%= karmaCommon %>", "test/spec/responsive-core-spec.js"] } }, 'cloudinary-core-shrinkwrap': { files: { - src: ["<%= karmaCommon %>"] + src: ["<%= karmaCommon %>", "test/spec/responsive-shrinkwrap-spec.js"] } }, 'cloudinary-jquery': { files: { - src: ["bower_components/jquery/dist/jquery.js", "<%= karmaCommon %>"] + src: ["bower_components/jquery/dist/jquery.js", "<%= karmaCommon %>", "test/spec/responsive-jquery-spec.js"] } }, 'cloudinary-jquery-file-upload': { @@ -151,24 +190,6 @@ } return results; })() - }, - doc: { - files: (function() { - var i, len, results; - results = []; - for (i = 0, len = repos.length; i < len; i++) { - repo = repos[i]; - if (!/shrinkwrap/.test(repo)) { - results.push({ - expand: true, - cwd: "doc/pkg-" + repo + "/", - src: ["**"], - dest: "../pkg/pkg-" + repo + "/" - }); - } - } - return results; - })() } }, version: { @@ -240,7 +261,7 @@ grunt.loadNpmTasks('grunt-karma'); grunt.loadNpmTasks('grunt-version'); grunt.registerTask('default', ['concat', 'coffee']); - grunt.registerTask('compile', ['clean:build', 'clean:js', 'concat', 'coffee', 'copy:backward-compatible', 'copy:dist']); + grunt.registerTask('compile', ['clean:build', 'clean:js', 'concat', 'coffee', 'copy:backward-compatible']); grunt.registerTask('build', ['clean', 'concat', 'coffee', 'copy:backward-compatible', 'jsdoc']); return grunt.registerTask('lodash', function(name, target) { var func, i, include, len, lodashCalls; diff --git a/bower.json b/bower.json index 826542be..fcb298e4 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "cloudinary", - "version": "2.0.9", + "version": "2.1.0", "title": "Cloudinary jQuery Plugin", "authors": [ { diff --git a/js/jquery.cloudinary.js b/js/jquery.cloudinary.js index 4c1fec41..bab6f030 100644 --- a/js/jquery.cloudinary.js +++ b/js/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 * @@ -2391,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; })(); @@ -2839,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"; @@ -3360,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() { @@ -3419,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) { @@ -3515,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) { @@ -3537,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. @@ -3554,10 +3577,16 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal */ Cloudinary.prototype.cloudinary_update = function(elements, options) { - var client_hints, containerWidth, dataSrc, imageWidth, j, len, ref, ref1, ref2, ref3, ref4, ref5, ref6, ref7, requestedWidth, responsive, responsiveClass, roundDpr, setUrl, 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): @@ -3570,32 +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; - client_hints = (ref4 = (ref5 = options.client_hints) != null ? ref5 : this.config('client_hints')) != null ? ref4 : false; - responsive = (ref6 = (ref7 = options.responsive) != null ? ref7 : this.config('responsive')) != null ? ref6 : false; if (responsive && !client_hints) { Util.addClass(tag, responsiveClass); } dataSrc = Util.getData(tag, 'src-cache') || Util.getData(tag, 'src'); if (!Util.isEmpty(dataSrc)) { - dataSrc = dataSrc.replace(/\bdpr_(1\.0|auto)\b/g, 'dpr_' + this.device_pixel_ratio(roundDpr)); - if (Util.hasClass(tag, responsiveClass) && /\bw_auto\b/.exec(dataSrc)) { - containerWidth = parentWidth(tag); + 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); } - dataSrc = dataSrc.replace(/\bw_auto\b/g, 'w_' + imageWidth); Util.removeAttribute(tag, 'width'); if (!options.responsive_preserve_height) { Util.removeAttribute(tag, 'height'); @@ -4033,7 +4063,7 @@ 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; diff --git a/karma.cloudinary-core.coffee b/karma.cloudinary-core.coffee index f0e2a173..05ddbebd 100644 --- a/karma.cloudinary-core.coffee +++ b/karma.cloudinary-core.coffee @@ -5,7 +5,7 @@ module.exports = (config) -> config.set # base path that will be used to resolve all patterns (eg. files, exclude) - basePath: '' +# basePath: '.' # frameworks to use @@ -23,6 +23,9 @@ module.exports = (config) -> 'test/spec/tagspec.js' 'test/spec/videourlspec.js' 'test/spec/chaining-spec.js' + 'test/spec/responsive-core-spec.js' + { pattern: 'test/docRoot/responsive-core-test.html', watched: false, included: false, served: true, nocache: false} + { pattern: 'bower_components/bootstrap/dist/css/*', watched: false, included: false, served: true, nocache: false} ] # preprocess matching files before serving them to the browser diff --git a/karma.cloudinary-jquery-file-upload.coffee b/karma.cloudinary-jquery-file-upload.coffee index aa90e3cc..1a4a7211 100644 --- a/karma.cloudinary-jquery-file-upload.coffee +++ b/karma.cloudinary-jquery-file-upload.coffee @@ -22,6 +22,7 @@ module.exports = (config) -> 'bower_components/blueimp-file-upload/js/jquery.iframe-transport.js' 'bower_components/blueimp-file-upload/js/jquery.fileupload-image.js' 'build/cloudinary-jquery-file-upload.js' + 'test/spec/spec-helper.js' 'test/spec/cloudinary-spec.js' 'test/spec/cloudinary-jquery-spec.js' 'test/spec/cloudinary-jquery-upload-spec.js' @@ -29,6 +30,8 @@ module.exports = (config) -> 'test/spec/tagspec.js' 'test/spec/videourlspec.js' 'test/spec/chaining-spec.js' + 'test/spec/responsive-jquery-spec.js' + {pattern: 'test/docRoot/responsive-jquery-test.html', watched: false, included: false, served: true, nocache: false} ] diff --git a/karma.cloudinary-jquery.coffee b/karma.cloudinary-jquery.coffee index dad161f5..763e935e 100644 --- a/karma.cloudinary-jquery.coffee +++ b/karma.cloudinary-jquery.coffee @@ -17,12 +17,15 @@ module.exports = (config) -> files: [ 'bower_components/jquery/dist/jquery.js' 'build/cloudinary-jquery.js' + 'test/spec/spec-helper.js' 'test/spec/cloudinary-spec.js' 'test/spec/cloudinary-jquery-spec.js' 'test/spec/transformation-spec.js' 'test/spec/tagspec.js' 'test/spec/videourlspec.js' 'test/spec/chaining-spec.js' + 'test/spec/responsive-jquery-spec.js' + {pattern: 'test/docRoot/responsive-jquery-test.html', watched: false, included: false, served: true, nocache: false} ] diff --git a/karma.coffee b/karma.coffee index 894dec12..24d11248 100644 --- a/karma.coffee +++ b/karma.coffee @@ -51,7 +51,7 @@ module.exports = (config) -> # start these browsers # available browser launchers: https://npmjs.org/browse/keyword/karma-launcher - browsers: ['Chrome' , 'Firefox', 'Safari'] + browsers: ['Chrome' , 'Firefox', 'Safari', 'PhantomJS'] # Continuous Integration mode diff --git a/package.json b/package.json index 97d1f7a1..8df58a19 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cloudinary_js", - "version": "2.0.9", + "version": "2.1.0", "description": "Cloudinary streamlines your web application’s image manipulation needs. Cloudinary's cloud-based servers automate image uploading, resizing, cropping, optimizing, sprite generation and more. Cloudinary's jQuery plugin allows direct uploading from the browser to the cloud and dynamic cloud-based image transformations and effects.", "main": "js/jquery.cloudinary.js", "directories": { diff --git a/src/cloudinary.coffee b/src/cloudinary.coffee index b5036421..76418b9f 100644 --- a/src/cloudinary.coffee +++ b/src/cloudinary.coffee @@ -1,5 +1,5 @@ class Cloudinary - VERSION = "2.0.9" + VERSION = "2.1.0" CF_SHARED_CDN = "d3jpl91pxevbkh.cloudfront.net" OLD_AKAMAI_SHARED_CDN = "cloudinary-a.akamaihd.net" AKAMAI_SHARED_CDN = "res.cloudinary.com" @@ -392,10 +392,10 @@ class Cloudinary * @private * @ignore ### - calc_breakpoint: (element, width) -> + calc_breakpoint: (element, width, steps) -> breakpoints = Util.getData(element, 'breakpoints') or Util.getData(element, 'stoppoints') or @config('breakpoints') or @config('stoppoints') or defaultBreakpoints if Util.isFunction breakpoints - breakpoints(width) + breakpoints(width, steps) else if Util.isString breakpoints breakpoints = (parseInt(point) for point in breakpoints.split(',')).sort((a, b) -> a - b) @@ -423,8 +423,8 @@ class Cloudinary dprString += '.0' dprString - defaultBreakpoints = (width) -> - 100 * Math.ceil(width / 100) + defaultBreakpoints = (width, steps = 100) -> + steps * Math.ceil(width / steps) closestAbove = (list, value) -> i = list.length - 2 @@ -505,20 +505,30 @@ class Cloudinary @cloudinary_update( images, options) this - applyBreakpoints = (tag, width, options)-> + applyBreakpoints = (tag, width, steps, options)-> responsive_use_breakpoints = options['responsive_use_breakpoints'] ? options['responsive_use_stoppoints'] ? @config('responsive_use_breakpoints') ? @config('responsive_use_stoppoints') if (!responsive_use_breakpoints) || (responsive_use_breakpoints == 'resize' and !options.resizing) width else - @calc_breakpoint(tag, width) + @calc_breakpoint(tag, width, steps) - parentWidth = (element) -> + findContainerWidth = (element) -> containerWidth = 0 while ((element = element?.parentNode) instanceof Element) and !containerWidth style = window.getComputedStyle(element); containerWidth = Util.width(element) unless /^inline/.test(style.display) containerWidth + updateDpr = (dataSrc, roundDpr) -> + dataSrc.replace(/\bdpr_(1\.0|auto)\b/g, 'dpr_' + @device_pixel_ratio(roundDpr)) + + maxWidth = (requiredWidth, tag) -> + imageWidth = Util.getData(tag, 'width') or 0 + if requiredWidth > imageWidth + imageWidth = requiredWidth + Util.setData(tag, 'width', requiredWidth) + requiredWidth + ###* * Update hidpi (dpr_auto) and responsive (w_auto) fields according to the current container size and the device pixel ratio. * Only images marked with the cld-responsive class have w_auto updated. @@ -534,6 +544,12 @@ class Cloudinary * Should only be used if the transformation supports different aspect ratios. ### cloudinary_update: (elements, options = {}) -> + client_hints = options.client_hints ? @config('client_hints') ? false + client_hints = client_hints || document?.querySelector('meta[http-equiv="Accept-CH"]') + return if client_hints + + responsive = options.responsive ? @config('responsive') ? false + elements = switch when Util.isArray(elements) elements @@ -549,26 +565,24 @@ class Cloudinary for tag in elements when tag.tagName?.match(/img/i) setUrl = true - client_hints = options.client_hints ? @config('client_hints') ? false - responsive = options.responsive ? @config('responsive') ? false + if responsive && !client_hints Util.addClass(tag, responsiveClass) dataSrc = Util.getData(tag, 'src-cache') or Util.getData(tag, 'src') unless Util.isEmpty(dataSrc) # Update dpr according to the device's devicePixelRatio - dataSrc = dataSrc.replace(/\bdpr_(1\.0|auto)\b/g, 'dpr_' + @device_pixel_ratio(roundDpr)) - if Util.hasClass(tag, responsiveClass) and /\bw_auto\b/.exec(dataSrc) - containerWidth = parentWidth(tag) + 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') or 0 - if requestedWidth > imageWidth - imageWidth = requestedWidth - Util.setData(tag, 'width', requestedWidth) - -# tag.style.setProperty("max-width", requestedWidth) - dataSrc = dataSrc.replace(/\bw_auto\b/g, 'w_' + imageWidth) + switch + when /w_auto:breakpoints/.test(dataSrc) + requiredWidth = maxWidth(containerWidth, tag) + dataSrc = dataSrc.replace( /w_auto:breakpoints([_0-9]*)(:[0-9]+)?/, "w_auto:breakpoints$1:#{requiredWidth}") + when 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}") Util.removeAttribute(tag, 'width') Util.removeAttribute(tag, 'height') unless options.responsive_preserve_height diff --git a/src/tags/htmltag.coffee b/src/tags/htmltag.coffee index 9b48154d..e1543823 100644 --- a/src/tags/htmltag.coffee +++ b/src/tags/htmltag.coffee @@ -162,3 +162,7 @@ class HtmlTag element = document.createElement(@name) element[name] = value for name, value of @attributes() element + + @isResponsive: (tag, responsiveClass)-> + dataSrc = Util.getData(tag, 'src-cache') or Util.getData(tag, 'src') + Util.hasClass(tag, responsiveClass) and /\bw_auto\b/.exec(dataSrc) \ No newline at end of file diff --git a/test/docRoot/responsive-core-test.html b/test/docRoot/responsive-core-test.html index 97fba3bf..aa44c357 100644 --- a/test/docRoot/responsive-core-test.html +++ b/test/docRoot/responsive-core-test.html @@ -7,6 +7,7 @@ +