diff --git a/js/angular.cloudinary.js b/js/angular.cloudinary.js
index 54b0aaf2..5e628d05 100644
--- a/js/angular.cloudinary.js
+++ b/js/angular.cloudinary.js
@@ -105,11 +105,11 @@
controller: Controller,
// The linking function will add behavior to the template
link : function(scope, element, attrs) {
- var attributes = toCloudinaryAttributes(attrs);
+ var options = toCloudinaryAttributes(attrs);
var publicId = null;
if (scope.transformations) {
- attributes.transformation = scope.transformations;
+ options.transformation = scope.transformations;
}
// store public id and load image
@@ -122,7 +122,7 @@
// observe and update version attribute
attrs.$observe('version', function(value){
if (!value) return;
- attributes['version'] = value;
+ options['version'] = value;
loadImage();
});
@@ -138,9 +138,18 @@
}
var loadImage = function() {
- var url = cloudinary.url(publicId, attributes);
- element.attr('src', url);
- }
+ if (options.responsive === "" || options.responsive === "true" || options.responsive === true) {
+ options.responsive = true;
+ }
+ var url = cloudinary.url(publicId, options);
+ if (options.responsive) {
+ cloudinary.Util.setData(element[0], "src", url);
+ cloudinary.cloudinary_update(element[0], options);
+ cloudinary.responsive(options, false);
+ } else {
+ element.attr('src', url);
+ }
+ };
}
};
@@ -155,14 +164,17 @@
this.get = function(name){
return configuration.get(name);
};
- this.$get = [function cloudinaryFactory(){
- if(cloudinary.CloudinaryJQuery && jQuery) {
+ this.$get = [function cloudinaryFactory() {
+ var instance;
+ if (cloudinary.CloudinaryJQuery && jQuery) {
// cloudinary is attached to the global `jQuery` object
jQuery.cloudinary.config(configuration.config());
- return jQuery.cloudinary;
+ instance = jQuery.cloudinary;
} else {
- return new cloudinary.Cloudinary(configuration.config());
+ instance = new cloudinary.Cloudinary(configuration.config());
}
- }]
+ cloudinary.Util.assign(instance, cloudinary); // copy namespace to the service instance
+ return instance;
+ }];
});
});
\ No newline at end of file
diff --git a/karma.conf.js b/karma.conf.js
index d29ea496..9c350ae7 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -3,14 +3,40 @@ module.exports = function (config) {
basePath: '',
frameworks: ['jasmine'],
files: [
+ 'node_modules/phantomjs-polyfill/bind-polyfill.js',
'bower_components/lodash/lodash.js',
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/cloudinary-core/cloudinary-core.js',
'js/angular.cloudinary.js',
- 'spec/cloudinary_spec.js'],
- preprocessors: {
- },
+ 'spec/cloudinary_spec.js',
+ {
+ pattern: "spec/*",
+ served: true,
+ included: false,
+ cached: false
+ },
+ {
+ pattern: "spec/*.js",
+ served: true,
+ included: false
+
+ },
+ {
+ pattern: "bower_components/**/*.css",
+ served: true,
+ included: false
+
+ },
+ {
+ pattern: "bower_components/**/*.js",
+ served: true,
+ included: false,
+ cached: false
+ }
+
+ ],
+ preprocessors: {},
reporters: ['story'],
port: 9876,
colors: true,
diff --git a/spec/cloudinary_spec.js b/spec/cloudinary_spec.js
index 8115ea27..58fc34d7 100644
--- a/spec/cloudinary_spec.js
+++ b/spec/cloudinary_spec.js
@@ -1,10 +1,10 @@
-const CLOUD_NAME = "demo";
+const CLOUD_NAME = "sdk-test";
describe("cloudinary", function () {
var $compile,
$rootScope,
- $provider;
+ $window;
beforeEach(function () {
module('cloudinary');
angular.module('cloudinary').config(['cloudinaryProvider', function (cloudinaryProvider) {
@@ -18,6 +18,8 @@ describe("cloudinary", function () {
// The injector unwraps the underscores (_) from around the parameter names when matching
$compile = _$compile_;
$rootScope = _$rootScope_;
+ $window = window;
+ $rootScope.testPublicId = "sample";
}));
describe("clImage", function () {
it('Adds an inner tag', function () {
@@ -56,7 +58,9 @@ describe("cloudinary", function () {
describe("html-width", function(){
var element;
beforeEach(function(){
+ $rootScope.testPublicId = "sample";
element = $compile("
")($rootScope);
+ $rootScope.$digest();
});
it('adds a width attribute to the tag if it has a value', function () {
var element = $compile("
")($rootScope);
@@ -67,12 +71,8 @@ describe("cloudinary", function () {
expect(element.html()).toMatch("src=\"https?://res\.cloudinary\.com/" + CLOUD_NAME + "/image/upload/foobar\"");
});
it('modify the src attribute when the public ID attribute changes', function () {
- // Compile a piece of HTML containing the directive
$rootScope.testPublicId = 'foobar';
- var element = $compile("
")($rootScope);
- // fire all the watches, so the scope expression {{1 + 1}} will be evaluated
$rootScope.$digest();
- // Check that the compiled element contains the templated content
expect(element.html()).toMatch("src=\"https?://res\.cloudinary\.com/" + CLOUD_NAME + "/image/upload/foobar\"");
$rootScope.testPublicId = 'barfoo';
$rootScope.$digest();
@@ -80,6 +80,43 @@ describe("cloudinary", function () {
});
+ });
+ describe("responsive", function () {
+ var testWindow, tabImage2, image1;
+ beforeAll(function (done) {
+ testWindow = window.open("/base/spec/responsive-core-test.html", "Cloudinary test #{(new Date()).toLocaleString()}", "width=200, height=500");
+
+ testWindow.addEventListener('load', function () {
+ image1 = testWindow.document.getElementById("image1");
+ tabImage2 = testWindow.document.getElementById("tabImage2");
+ expect(tabImage2).toBeDefined();
+ done();
+ });
+
+ });
+ afterAll(function () {
+ testWindow && testWindow.close();
+ });
+ it('should enable responsive functionality', function () {
+ expect(tabImage2.getAttribute("src")).toMatch("https?://res\.cloudinary\.com/" + CLOUD_NAME + "/image/upload/c_scale,w_200/sample.jpg");
+ });
+ it("should react to a change in the parent's width", function (done) {
+
+ var listener = function () {
+ expect(tabImage2.outerHTML).toMatch("src=\"https?://res\.cloudinary\.com/" + CLOUD_NAME + "/image/upload/c_scale,w_400/sample.jpg\"");
+ done();
+ };
+ // testWindow.addEventListener('resize', listener);
+ setTimeout(listener, 2000);
+ testWindow.resizeTo(350, 800);
+ });
+ it('should apply responsive if "width" is not defined', function () {
+ element = $compile("