├── .gitignore
├── .travis.yml
├── test
    ├── angular-1.2
    │   ├── bower.json
    │   ├── gulpfile.js
    │   └── karma.conf.js
    ├── angular-1.3
    │   ├── bower.json
    │   ├── gulpfile.js
    │   └── karma.conf.js
    ├── angular-1.4
    │   ├── bower.json
    │   ├── gulpfile.js
    │   └── karma.conf.js
    ├── angular-1.5
    │   ├── bower.json
    │   ├── gulpfile.js
    │   └── karma.conf.js
    ├── angular-1.6
    │   ├── bower.json
    │   ├── gulpfile.js
    │   └── karma.conf.js
    └── unit
    │   ├── providerSpec.js
    │   ├── directiveLiteSpec.js
    │   └── directiveSpec.js
├── bower.json
├── UPGRADE.md
├── gulpfile.js
├── LICENSE
├── package.json
├── CHANGELOG.md
├── karma.conf.js
├── src
    └── image-engine-angular.js
├── demo
    └── index.html
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | /.settings
 3 | /.project
 4 | node_modules
 5 | .tmp/
 6 | /nbproject
 7 | .idea
 8 | .grunt
 9 | bower_components
10 | yarn.lock
11 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - 0.12
 4 | before_install:
 5 |   - npm install -g bower
 6 | before_script:
 7 |   - export DISPLAY=:99.0
 8 |   - sh -e /etc/init.d/xvfb start
 9 |   - sleep 1
10 | script:
11 |   - ./node_modules/.bin/gulp test-all-versions
12 | sudo: false
13 | 


--------------------------------------------------------------------------------
/test/angular-1.2/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "image-engine-angular",
 3 |   "description": "An AngularJS directive for ImageEngine",
 4 |   "authors": [
 5 |     "Luca Corbo (https://github.com/lucor)"
 6 |   ],
 7 |   "license": "MIT",
 8 |   "ignore": [
 9 |     "**/.*",
10 |     "node_modules",
11 |     "bower_components",
12 |     "test",
13 |     "tests"
14 |   ],
15 |   "dependencies": {
16 |       "angular": "~1.2.0"
17 |   },
18 |   "devDependencies": {
19 |     "angular-mocks": "~1.2.0"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/test/angular-1.3/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "image-engine-angular",
 3 |   "description": "An AngularJS directive for ImageEngine",
 4 |   "authors": [
 5 |     "Luca Corbo (https://github.com/lucor)"
 6 |   ],
 7 |   "license": "MIT",
 8 |   "ignore": [
 9 |     "**/.*",
10 |     "node_modules",
11 |     "bower_components",
12 |     "test",
13 |     "tests"
14 |   ],
15 |   "dependencies": {
16 |       "angular": "~1.3.0"
17 |   },
18 |   "devDependencies": {
19 |     "angular-mocks": "~1.3.0"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/test/angular-1.4/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "image-engine-angular",
 3 |   "description": "An AngularJS directive for ImageEngine",
 4 |   "authors": [
 5 |     "Luca Corbo (https://github.com/lucor)"
 6 |   ],
 7 |   "license": "MIT",
 8 |   "ignore": [
 9 |     "**/.*",
10 |     "node_modules",
11 |     "bower_components",
12 |     "test",
13 |     "tests"
14 |   ],
15 |   "dependencies": {
16 |       "angular": "~1.4.0"
17 |   },
18 |   "devDependencies": {
19 |     "angular-mocks": "~1.4.0"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/test/angular-1.5/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "image-engine-angular",
 3 |   "description": "An AngularJS directive for ImageEngine",
 4 |   "authors": [
 5 |     "Luca Corbo (https://github.com/lucor)"
 6 |   ],
 7 |   "license": "MIT",
 8 |   "ignore": [
 9 |     "**/.*",
10 |     "node_modules",
11 |     "bower_components",
12 |     "test",
13 |     "tests"
14 |   ],
15 |   "dependencies": {
16 |       "angular": "~1.5.0"
17 |   },
18 |   "devDependencies": {
19 |     "angular-mocks": "~1.5.0"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/test/angular-1.6/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "image-engine-angular",
 3 |   "description": "An AngularJS directive for ImageEngine",
 4 |   "authors": [
 5 |     "Luca Corbo (https://github.com/lucor)"
 6 |   ],
 7 |   "license": "MIT",
 8 |   "ignore": [
 9 |     "**/.*",
10 |     "node_modules",
11 |     "bower_components",
12 |     "test",
13 |     "tests"
14 |   ],
15 |   "dependencies": {
16 |       "angular": "~1.6.0"
17 |   },
18 |   "devDependencies": {
19 |     "angular-mocks": "~1.6.0"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "image-engine-angular",
 3 |   "description": "An AngularJS directive for ImageEngine",
 4 |   "homepage": "https://github.com/WURFL/ImageEngine-angular",
 5 |   "version": "1.0.3",
 6 |   "main": "./src/image-engine-angular.js",
 7 |   "authors": [
 8 |     "Luca Corbo (https://github.com/lucor)"
 9 |   ],
10 |   "license": "MIT",
11 |   "ignore": [
12 |     "**/.*",
13 |     "node_modules",
14 |     "bower_components",
15 |     "test",
16 |     "tests"
17 |   ],
18 |   "dependencies": {
19 |       "angular": "^1.2.0"
20 |   },
21 |   "devDependencies": {
22 |     "angular-mocks": "^1.2.0"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/test/unit/providerSpec.js:
--------------------------------------------------------------------------------
 1 | describe("Unit: Testing angular provider for ImageEngine", function() {
 2 | 
 3 |     var provider;
 4 | 
 5 |     beforeEach(module('image-engine-angular', function(imgEngConfigProvider) {
 6 |         provider = imgEngConfigProvider;
 7 |     }));
 8 | 
 9 |     it('tests the providers internal function', inject(function() {
10 |         provider.setToken('a-token');
11 |         expect(provider.$get().token).to.be.equal('a-token');
12 |         expect(provider.$get().is_lite).to.be.false;
13 |         provider.isLite();
14 |         expect(provider.$get().is_lite).to.be.true;
15 |     }));
16 | 
17 | });
18 | 


--------------------------------------------------------------------------------
/test/angular-1.2/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var karma = require('karma').server;
 3 | var bower = require('gulp-bower');
 4 | 
 5 | /**
 6 |  * Install dependencies for angular-1.2.x
 7 |  */
 8 | gulp.task('bower-1.2', function() {
 9 |     return bower({ directory: './bower_components', cwd: './test/angular-1.2' })
10 | });
11 | 
12 | /**
13 |  * Run tests for angular-1.2.x
14 |  */
15 | gulp.task('test-1.2', ['bower-1.2'], function (done) {
16 |     karma.start({
17 |         configFile: __dirname + '/karma.conf.js',
18 |         singleRun: true,
19 |         noAutoWatch: true,
20 |         reporters: 'dots',
21 |         browsers: ['PhantomJS']
22 |     }, done);
23 | });


--------------------------------------------------------------------------------
/test/angular-1.3/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var karma = require('karma').server;
 3 | var bower = require('gulp-bower');
 4 | 
 5 | /**
 6 |  * Install dependencies for angular-1.2.x
 7 |  */
 8 | gulp.task('bower-1.3', function() {
 9 |     return bower({ directory: './bower_components', cwd: './test/angular-1.3' })
10 | });
11 | 
12 | /**
13 |  * Run tests for angular-1.2.x
14 |  */
15 | gulp.task('test-1.3', ['bower-1.3'], function (done) {
16 |     karma.start({
17 |         configFile: __dirname + '/karma.conf.js',
18 |         singleRun: true,
19 |         noAutoWatch: true,
20 |         reporters: 'dots',
21 |         browsers: ['PhantomJS']
22 |     }, done);
23 | });


--------------------------------------------------------------------------------
/test/angular-1.4/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var karma = require('karma').server;
 3 | var bower = require('gulp-bower');
 4 | 
 5 | /**
 6 |  * Install dependencies for angular-1.4.x
 7 |  */
 8 | gulp.task('bower-1.4', function() {
 9 |     return bower({ directory: './bower_components', cwd: './test/angular-1.4' })
10 | });
11 | 
12 | /**
13 |  * Run tests for angular-1.4.x
14 |  */
15 | gulp.task('test-1.4', ['bower-1.4'], function (done) {
16 |     karma.start({
17 |         configFile: __dirname + '/karma.conf.js',
18 |         singleRun: true,
19 |         noAutoWatch: true,
20 |         reporters: 'dots',
21 |         browsers: ['PhantomJS']
22 |     }, done);
23 | });


--------------------------------------------------------------------------------
/test/angular-1.5/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var karma = require('karma').server;
 3 | var bower = require('gulp-bower');
 4 | 
 5 | /**
 6 |  * Install dependencies for angular-1.5.x
 7 |  */
 8 | gulp.task('bower-1.5', function() {
 9 |     return bower({ directory: './bower_components', cwd: './test/angular-1.5' })
10 | });
11 | 
12 | /**
13 |  * Run tests for angular-1.5.x
14 |  */
15 | gulp.task('test-1.5', ['bower-1.5'], function (done) {
16 |     karma.start({
17 |         configFile: __dirname + '/karma.conf.js',
18 |         singleRun: true,
19 |         noAutoWatch: true,
20 |         reporters: 'dots',
21 |         browsers: ['PhantomJS']
22 |     }, done);
23 | });


--------------------------------------------------------------------------------
/test/angular-1.6/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var karma = require('karma').server;
 3 | var bower = require('gulp-bower');
 4 | 
 5 | /**
 6 |  * Install dependencies for angular-1.6.x
 7 |  */
 8 | gulp.task('bower-1.6', function() {
 9 |     return bower({ directory: './bower_components', cwd: './test/angular-1.6' })
10 | });
11 | 
12 | /**
13 |  * Run tests for angular-1.6.x
14 |  */
15 | gulp.task('test-1.6', ['bower-1.6'], function (done) {
16 |     karma.start({
17 |         configFile: __dirname + '/karma.conf.js',
18 |         singleRun: true,
19 |         noAutoWatch: true,
20 |         reporters: 'dots',
21 |         browsers: ['PhantomJS']
22 |     }, done);
23 | });


--------------------------------------------------------------------------------
/UPGRADE.md:
--------------------------------------------------------------------------------
 1 | ## Upgrade
 2 | 
 3 | ### From 0.9.x to 1.0
 4 | 
 5 |   * Install the image-engine-angular module
 6 |   * Update the directive declaration:
 7 |   ```
 8 |       var app = angular.module("demoapp", ["image-engine-angular"]);
 9 |       app.config(function (imgEngConfigProvider) {
10 |          imgEngConfigProvider.setToken('your-token');
11 |          imgEngConfigProvider.isLite(); // Add this line only for ImageEngine Lite
12 |       });
13 |   ```
14 | 
15 |   * Replace all occurrences of the **img-wit** markup with **img-eng**
16 | 
17 |   Example:
18 | 
19 |   `<img-wit src="http://yourserver.com/image.png"></img-wit>`
20 | 
21 |   to:
22 | 
23 |   `<img-eng src="http://yourserver.com/image.png"></img-eng>`
24 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var karma = require('karma').Server;
 3 | 
 4 | require('./test/angular-1.2/gulpfile');
 5 | require('./test/angular-1.3/gulpfile');
 6 | require('./test/angular-1.4/gulpfile');
 7 | require('./test/angular-1.5/gulpfile');
 8 | require('./test/angular-1.6/gulpfile');
 9 | 
10 | /**
11 |  * Run tests for all angular versions
12 |  */
13 | gulp.task('test-all-versions', ['test-1.2', 'test-1.3', 'test-1.4', 'test-1.5', 'test-1.6'], function (done) {
14 | });
15 | 
16 | /**
17 |  * Run test once and exit
18 |  */
19 | gulp.task('test', function (done) {
20 |     karma.start({
21 |         configFile: __dirname + '/karma.conf.js',
22 |         singleRun: true
23 |     }, done);
24 | });
25 | 
26 | /**
27 |  * Watch for file changes and re-run tests on each change
28 |  */
29 | gulp.task('tdd', function (done) {
30 |     karma.start({
31 |         configFile: __dirname + '/karma.conf.js'
32 |     }, done);
33 | });
34 | 
35 | gulp.task('default', ['tdd']);
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014-2015 ScientiaMobile, Inc.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "image-engine-angular",
 3 |   "version": "1.0.3",
 4 |   "description": "An AngularJS directive for ImageEngine",
 5 |   "homepage": "https://github.com/WURFL/ImageEngine-angular",
 6 |   "author": "Luca Corbo (https://github.com/lucor)",
 7 |   "maintainers": [
 8 |     "Luca Corbo (https://github.com/lucor)"
 9 |   ],
10 |   "license": "MIT",
11 |   "bugs": {
12 |     "url": "https://github.com/WURFL/ImageEngine-angular/issues"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "https://github.com/WURFL/ImageEngine-angular.git"
17 |   },
18 |   "keywords": [
19 |     "angularjs",
20 |     "wurfl",
21 |     "ImageEngine",
22 |     "webcomponent"
23 |   ],
24 |   "peerDependencies": {
25 |     "angular": "^1.2.0"
26 |   },
27 |   "devDependencies": {
28 |     "chai": "^4.1.0",
29 |     "gulp": "^3.9.1",
30 |     "gulp-bower": "^0.0.13",
31 |     "http-server": "^0.10",
32 |     "karma": "^1.7.0",
33 |     "karma-chai": "^0.1",
34 |     "karma-mocha": "^1.3.0",
35 |     "karma-phantomjs-launcher": "^1.0",
36 |     "mocha": "^3.4.2",
37 |     "phantomjs-prebuilt": "^2.1.3"
38 |   },
39 |   "scripts": {
40 |     "prestart": "npm install",
41 |     "start": "http-server -p 9999",
42 |     "pretest": "npm install",
43 |     "test": "./node_modules/.bin/gulp",
44 |     "test-single-run": "./node_modules/.bin/gulp test",
45 |     "test-all-versions": "./node_modules/.bin/gulp test-all-versions"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | All notable changes to `image-engine-angular` will be documented in this file
 4 | 
 5 | ## 1.0.3 - 2017-08-01
 6 | 
 7 | ### Updated
 8 | - Defines AngularJS as peer dependency
 9 | 
10 | ## 1.0.2 - 2017-07-20
11 | 
12 | ### Added
13 | - Crop (`cr`) parameter support
14 | - Compression (`cmpr`) parameter support
15 | - Inline (`in`) parameter support
16 | - Tests for AngularJS versions 1.6.x
17 | 
18 | ### Deprecated
19 | - isLite() method
20 | 
21 | ## 1.0.1 - 2016-03-09
22 | 
23 | ### Added
24 | - Tests for AngularJS versions 1.5.x
25 | 
26 | ### Updated
27 | - Dev dependencies
28 | 
29 | ### Fixed
30 | - strict mode error: function(imgEngConfig) is not using explicit annotation and cannot be invoked in strict mode (#4)
31 | 
32 | ## 1.0.0 - 2015-11-16
33 | 
34 | ### Changed
35 | - WURFL Image Tailor (WIT) is now ImageEngine
36 | 
37 | ### Added
38 | - Token support
39 | - Flag to switch between "ImageEngine" and "ImageEngine Lite"
40 | 
41 | ### Updated
42 | - Base Urls
43 | - Tests
44 | 
45 | ## 0.9.4 - 2015-03-23
46 | 
47 | ### Added
48 | - $observe expression on all allowed attributes
49 | 
50 | ## 0.9.3 - 2015-02-27
51 | 
52 | ### Fixed
53 | - When ngSrc was undefined at the beginning, image wasn't refreshed
54 | 
55 | ## 0.9.2 - 2015-02-26
56 | 
57 | ### Added
58 | - $observe expression on 'ngSrc'
59 | - CHANGELOG file
60 | - Gulp.js support
61 | - Tests for AngularJS versions 1.2.x, 1.3.x, 1.4.x
62 | 
63 | ## 0.9.1 - 2015-01-19
64 | 
65 | ### Added
66 | - ngSrc directive support
67 | 
68 | ### Changed
69 | - copyright info
70 | 
71 | ## 0.9.0 - 2014-06-20
72 | 
73 | ### Added
74 | - Initial release
75 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration
 2 | 
 3 | module.exports = function(config) {
 4 |   config.set({
 5 | 
 6 |     // base path that will be used to resolve all patterns (eg. files, exclude)
 7 |     basePath: '',
 8 | 
 9 | 
10 |     // frameworks to use
11 |     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
12 |     frameworks: ['mocha','chai'],
13 | 
14 | 
15 |     // list of files / patterns to load in the browser
16 |     files: [
17 | 
18 |       'bower_components/angular/angular.js',
19 |       'bower_components/angular-mocks/angular-mocks.js',
20 |       'src/image-engine-angular.js',
21 |       'test/**/*Spec.js'
22 |     ],
23 | 
24 | 
25 |     // list of files to exclude
26 |     exclude: [
27 |       
28 |     ],
29 | 
30 | 
31 |     // preprocess matching files before serving them to the browser
32 |     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
33 |     preprocessors: {
34 |     
35 |     },
36 | 
37 | 
38 |     // test results reporter to use
39 |     // possible values: 'dots', 'progress'
40 |     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
41 |     reporters: ['progress'],
42 | 
43 | 
44 |     // web server port
45 |     port: 9876,
46 | 
47 | 
48 |     // enable / disable colors in the output (reporters and logs)
49 |     colors: true,
50 | 
51 | 
52 |     // level of logging
53 |     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
54 |     logLevel: config.LOG_INFO,
55 | 
56 | 
57 |     // enable / disable watching file and executing tests whenever any file changes
58 |     autoWatch: true,
59 | 
60 | 
61 |     // start these browsers
62 |     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
63 |     browsers: ['PhantomJS'],
64 | 
65 | 
66 |     // Continuous Integration mode
67 |     // if true, Karma captures browsers, runs the tests and exits
68 |     singleRun: false
69 |   });
70 | };
71 | 


--------------------------------------------------------------------------------
/test/angular-1.3/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration
 2 | 
 3 | module.exports = function(config) {
 4 |   config.set({
 5 | 
 6 |     // base path that will be used to resolve all patterns (eg. files, exclude)
 7 |     basePath: '',
 8 | 
 9 | 
10 |     // frameworks to use
11 |     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
12 |     frameworks: ['mocha','chai'],
13 | 
14 | 
15 |     // list of files / patterns to load in the browser
16 |     files: [
17 | 
18 |       'bower_components/angular/angular.js',
19 |       'bower_components/angular-mocks/angular-mocks.js',
20 |       '../../src/image-engine-angular.js',
21 |       '../../test/**/*Spec.js'
22 |     ],
23 | 
24 | 
25 |     // list of files to exclude
26 |     exclude: [
27 |       
28 |     ],
29 | 
30 | 
31 |     // preprocess matching files before serving them to the browser
32 |     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
33 |     preprocessors: {
34 |     
35 |     },
36 | 
37 | 
38 |     // test results reporter to use
39 |     // possible values: 'dots', 'progress'
40 |     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
41 |     reporters: ['dots'],
42 | 
43 | 
44 |     // web server port
45 |     port: 9813,
46 | 
47 | 
48 |     // enable / disable colors in the output (reporters and logs)
49 |     colors: true,
50 | 
51 | 
52 |     // level of logging
53 |     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
54 |     logLevel: config.LOG_INFO,
55 | 
56 | 
57 |     // enable / disable watching file and executing tests whenever any file changes
58 |     autoWatch: false,
59 | 
60 | 
61 |     // start these browsers
62 |     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
63 |     browsers: ['PhantomJS'],
64 | 
65 | 
66 |     // Continuous Integration mode
67 |     // if true, Karma captures browsers, runs the tests and exits
68 |     singleRun: true
69 |   });
70 | };
71 | 


--------------------------------------------------------------------------------
/test/angular-1.2/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration
 2 | 
 3 | module.exports = function(config) {
 4 |     config.set({
 5 | 
 6 |         // base path that will be used to resolve all patterns (eg. files, exclude)
 7 |         basePath: '',
 8 | 
 9 | 
10 |         // frameworks to use
11 |         // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
12 |         frameworks: ['mocha','chai'],
13 | 
14 | 
15 |         // list of files / patterns to load in the browser
16 |         files: [
17 | 
18 |             'bower_components/angular/angular.js',
19 |             'bower_components/angular-mocks/angular-mocks.js',
20 |             '../../src/image-engine-angular.js',
21 |             '../../test/**/*Spec.js'
22 |         ],
23 | 
24 | 
25 |         // list of files to exclude
26 |         exclude: [
27 | 
28 |         ],
29 | 
30 | 
31 |         // preprocess matching files before serving them to the browser
32 |         // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
33 |         preprocessors: {
34 | 
35 |         },
36 | 
37 | 
38 |         // test results reporter to use
39 |         // possible values: 'dots', 'progress'
40 |         // available reporters: https://npmjs.org/browse/keyword/karma-reporter
41 |         reporters: ['dots'],
42 | 
43 | 
44 |         // web server port
45 |         port: 9812,
46 | 
47 | 
48 |         // enable / disable colors in the output (reporters and logs)
49 |         colors: true,
50 | 
51 | 
52 |         // level of logging
53 |         // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
54 |         logLevel: config.LOG_INFO,
55 | 
56 | 
57 |         // enable / disable watching file and executing tests whenever any file changes
58 |         autoWatch: false,
59 | 
60 | 
61 |         // start these browsers
62 |         // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
63 |         browsers: ['PhantomJS'],
64 | 
65 | 
66 |         // Continuous Integration mode
67 |         // if true, Karma captures browsers, runs the tests and exits
68 |         singleRun: true
69 |     });
70 | };
71 | 


--------------------------------------------------------------------------------
/test/angular-1.4/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration
 2 | 
 3 | module.exports = function(config) {
 4 |     config.set({
 5 | 
 6 |         // base path that will be used to resolve all patterns (eg. files, exclude)
 7 |         basePath: '',
 8 | 
 9 | 
10 |         // frameworks to use
11 |         // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
12 |         frameworks: ['mocha','chai'],
13 | 
14 | 
15 |         // list of files / patterns to load in the browser
16 |         files: [
17 | 
18 |             'bower_components/angular/angular.js',
19 |             'bower_components/angular-mocks/angular-mocks.js',
20 |             '../../src/image-engine-angular.js',
21 |             '../../test/**/*Spec.js'
22 |         ],
23 | 
24 | 
25 |         // list of files to exclude
26 |         exclude: [
27 | 
28 |         ],
29 | 
30 | 
31 |         // preprocess matching files before serving them to the browser
32 |         // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
33 |         preprocessors: {
34 | 
35 |         },
36 | 
37 | 
38 |         // test results reporter to use
39 |         // possible values: 'dots', 'progress'
40 |         // available reporters: https://npmjs.org/browse/keyword/karma-reporter
41 |         reporters: ['dots'],
42 | 
43 | 
44 |         // web server port
45 |         port: 9814,
46 | 
47 | 
48 |         // enable / disable colors in the output (reporters and logs)
49 |         colors: true,
50 | 
51 | 
52 |         // level of logging
53 |         // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
54 |         logLevel: config.LOG_INFO,
55 | 
56 | 
57 |         // enable / disable watching file and executing tests whenever any file changes
58 |         autoWatch: false,
59 | 
60 | 
61 |         // start these browsers
62 |         // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
63 |         browsers: ['PhantomJS'],
64 | 
65 | 
66 |         // Continuous Integration mode
67 |         // if true, Karma captures browsers, runs the tests and exits
68 |         singleRun: true
69 |     });
70 | };
71 | 


--------------------------------------------------------------------------------
/test/angular-1.5/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration
 2 | 
 3 | module.exports = function(config) {
 4 |     config.set({
 5 | 
 6 |         // base path that will be used to resolve all patterns (eg. files, exclude)
 7 |         basePath: '',
 8 | 
 9 | 
10 |         // frameworks to use
11 |         // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
12 |         frameworks: ['mocha','chai'],
13 | 
14 | 
15 |         // list of files / patterns to load in the browser
16 |         files: [
17 | 
18 |             'bower_components/angular/angular.js',
19 |             'bower_components/angular-mocks/angular-mocks.js',
20 |             '../../src/image-engine-angular.js',
21 |             '../../test/**/*Spec.js'
22 |         ],
23 | 
24 | 
25 |         // list of files to exclude
26 |         exclude: [
27 | 
28 |         ],
29 | 
30 | 
31 |         // preprocess matching files before serving them to the browser
32 |         // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
33 |         preprocessors: {
34 | 
35 |         },
36 | 
37 | 
38 |         // test results reporter to use
39 |         // possible values: 'dots', 'progress'
40 |         // available reporters: https://npmjs.org/browse/keyword/karma-reporter
41 |         reporters: ['dots'],
42 | 
43 | 
44 |         // web server port
45 |         port: 9815,
46 | 
47 | 
48 |         // enable / disable colors in the output (reporters and logs)
49 |         colors: true,
50 | 
51 | 
52 |         // level of logging
53 |         // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
54 |         logLevel: config.LOG_INFO,
55 | 
56 | 
57 |         // enable / disable watching file and executing tests whenever any file changes
58 |         autoWatch: false,
59 | 
60 | 
61 |         // start these browsers
62 |         // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
63 |         browsers: ['PhantomJS'],
64 | 
65 | 
66 |         // Continuous Integration mode
67 |         // if true, Karma captures browsers, runs the tests and exits
68 |         singleRun: true
69 |     });
70 | };
71 | 


--------------------------------------------------------------------------------
/test/angular-1.6/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration
 2 | 
 3 | module.exports = function(config) {
 4 |     config.set({
 5 | 
 6 |         // base path that will be used to resolve all patterns (eg. files, exclude)
 7 |         basePath: '',
 8 | 
 9 | 
10 |         // frameworks to use
11 |         // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
12 |         frameworks: ['mocha','chai'],
13 | 
14 | 
15 |         // list of files / patterns to load in the browser
16 |         files: [
17 | 
18 |             'bower_components/angular/angular.js',
19 |             'bower_components/angular-mocks/angular-mocks.js',
20 |             '../../src/image-engine-angular.js',
21 |             '../../test/**/*Spec.js'
22 |         ],
23 | 
24 | 
25 |         // list of files to exclude
26 |         exclude: [
27 | 
28 |         ],
29 | 
30 | 
31 |         // preprocess matching files before serving them to the browser
32 |         // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
33 |         preprocessors: {
34 | 
35 |         },
36 | 
37 | 
38 |         // test results reporter to use
39 |         // possible values: 'dots', 'progress'
40 |         // available reporters: https://npmjs.org/browse/keyword/karma-reporter
41 |         reporters: ['dots'],
42 | 
43 | 
44 |         // web server port
45 |         port: 9816,
46 | 
47 | 
48 |         // enable / disable colors in the output (reporters and logs)
49 |         colors: true,
50 | 
51 | 
52 |         // level of logging
53 |         // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
54 |         logLevel: config.LOG_INFO,
55 | 
56 | 
57 |         // enable / disable watching file and executing tests whenever any file changes
58 |         autoWatch: false,
59 | 
60 | 
61 |         // start these browsers
62 |         // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
63 |         browsers: ['PhantomJS'],
64 | 
65 | 
66 |         // Continuous Integration mode
67 |         // if true, Karma captures browsers, runs the tests and exits
68 |         singleRun: true
69 |     });
70 | };
71 | 


--------------------------------------------------------------------------------
/src/image-engine-angular.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | /*
 3 |  * image-engine-angular
 4 |  * An AngularJS directive for ImageEngine
 5 |  * Homepage: https://github.com/WURFL/ImageEngine-angular
 6 |  * Authors: Luca Corbo (https://github.com/lucor)
 7 |  * (c) 2014 - 2017 ScientiaMobile, Inc.
 8 |  * License: MIT
 9 |  */
10 | 
11 | angular.module('image-engine-angular', [])
12 |     .provider('imgEngConfig', function () {
13 |         this.is_lite = false;
14 |         this.token = null;
15 |         this.setToken = function (token) {
16 |             this.token = token;
17 |         };
18 |         this.isLite = function () {
19 |             // Deprecated method since 1.0.2
20 |             this.is_lite = true;
21 |         };
22 |         this.$get = function () {
23 |             return this;
24 |         };
25 |     })
26 |     .factory('imgEngUrls', ['imgEngConfig', function (imgEngConfig) {
27 |         var base_url = ['//' + imgEngConfig.token];
28 | 
29 |         if (imgEngConfig.is_lite === true) {
30 |             base_url.push('lite');
31 |         }
32 | 
33 |         base_url.push('imgeng.in');
34 | 
35 |         return {
36 |             get: function () {
37 |                 return base_url.join('.');
38 |             }
39 |         };
40 |     }])
41 |     .directive('imgEng', ['imgEngUrls', function (imgEngUrls) {
42 |         return {
43 |             restrict: 'E',
44 |             replace: false,
45 |             scope: {
46 |                 src: '@',
47 |                 w: '@',
48 |                 h: '@',
49 |                 pc: '@',
50 |                 m: '@',
51 |                 f: '@',
52 |                 r: '@',
53 |                 cr: '@',
54 |                 cmpr: '@',
55 |                 in: '@'
56 |             },
57 |             template: function (element, attributes) {
58 |                 return '<div class="img-eng"><img ng-src="{{imgeng_link}}"/></div>';
59 |             },
60 |             link: function (scope, element, attributes) {
61 |                 scope.imgeng_link = '';
62 | 
63 |                 var allowedAttributes = ['w', 'h', 'pc', 'm', 'f', 'r', 'cr', 'cmpr', 'in'];
64 | 
65 |                 scope.$watchCollection('[src, w, h, pc, m, f, r, cr, cmpr, in]', function (values, oldValues) {
66 | 
67 |                     var src = values.shift();
68 |                     if (!src) {
69 |                         return;
70 |                     }
71 | 
72 |                     var imgeng_link_pieces = [imgEngUrls.get()];
73 |                     angular.forEach(allowedAttributes, function (attribute, index) {
74 |                         if (values[index]) {
75 |                             imgeng_link_pieces.push(attribute + '_' + values[index]);
76 |                         }
77 |                     });
78 | 
79 |                     imgeng_link_pieces.push(src);
80 |                     scope.imgeng_link = imgeng_link_pieces.join('/');
81 |                 });
82 |             }
83 |         };
84 |     }]);
85 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
 6 |     <title>ImageEngine Angular Demo</title>
 7 | 
 8 |     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 9 | 
10 |     <script src="../bower_components/angular/angular.js"></script>
11 |     <script src="../src/image-engine-angular.js"></script>
12 | 
13 |     <script>
14 |         var app = angular.module('demo-ImageEngine', ['image-engine-angular']);
15 |         app.config(function (imgEngConfigProvider) {
16 |             imgEngConfigProvider.setToken('try');
17 |         });
18 |     </script>
19 | </head>
20 | 
21 | <body ng-app="demo-ImageEngine">
22 | <div class="container">
23 |     <div class="row">
24 |         <h1>Fully Automatic</h1>
25 | 
26 |         <p>
27 |             <code>
28 |                 &lt;img-eng src=&quot;http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG&quot;&gt;&lt;/img-eng&gt;
29 |             </code>
30 |         </p>
31 | 
32 |         <p>
33 |             <img-eng src="http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG"></img-eng>
34 |         </p>
35 |     </div>
36 |     <div class="row">
37 |         <h1>20% of screen size</h1>
38 | 
39 |         <p>
40 |             <code>
41 |                 &lt;img-eng src=&quot;http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG&quot; pc=&quot;20&quot;&gt;&lt;/img-eng&gt;
42 |             </code>
43 |         </p>
44 | 
45 |         <p>
46 |             <img-eng src="http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG" pc="20"></img-eng>
47 |         </p>
48 |     </div>
49 |     <div class="row">
50 |         <h1>Image is 300px Wide</h1>
51 | 
52 |         <p>
53 |             <code>
54 |                 &lt;img-eng src=&quot;http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG&quot; w=&quot;300&quot;&gt;&lt;/img-eng&gt;
55 |             </code>
56 |         </p>
57 | 
58 |         <p>
59 |             <img-eng src="http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG" w="300"></img-eng>
60 |         </p>
61 |     </div>
62 | 
63 |     <div class="row">
64 |         <h1>Create 200x200px Thumbnails with Black Letterboxes/Pillarboxes</h1>
65 | 
66 |         <p>
67 |             <code>
68 |                 &lt;img-eng src=&quot;http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG&quot; w=&quot;200&quot; h=&quot;200&quot; m=&quot;letterbox_000000_100&quot;&gt;&lt;/img-eng&gt;
69 |             </code>
70 |         </p>
71 | 
72 |         <p>
73 |             <img-eng src="http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG" w="200" h="200" m="letterbox_000000_100"></img-eng>
74 |         </p>
75 |     </div>
76 | </div>
77 | 
78 | 
79 | </body>
80 | </html>


--------------------------------------------------------------------------------
/test/unit/directiveLiteSpec.js:
--------------------------------------------------------------------------------
 1 | describe("Unit: Testing angular directive for ImageEngine", function() {
 2 | 
 3 |     var scope, compile;
 4 | 
 5 |     beforeEach(module('image-engine-angular', function(imgEngConfigProvider) {
 6 |         provider = imgEngConfigProvider;
 7 |         provider.setToken('token');
 8 |         provider.isLite();
 9 |     }));
10 | 
11 |     beforeEach(inject(
12 |         ['$compile','$rootScope', '$sce', function($c, $r, $sce) {
13 |             compile = $c;
14 |             scope = $r;
15 |             sce = $sce;
16 |         }]
17 |     ));
18 | 
19 |     it('should work as an element', function () {
20 |         var elt = angular.element('<img-eng></img-eng>');
21 |         compile(elt)(scope);
22 |         scope.$digest();
23 | 
24 |         expect(elt.html()).to.be.a('string');
25 |         expect(elt.html()).to.be.equal('<div class="img-eng"><img ng-src=""></div>');
26 |     });
27 | 
28 |     it('should work as an element with image source', function () {
29 |         var elt = angular.element('<img-eng src="http://test.com/image.jpg"></img-eng>');
30 |         compile(elt)(scope);
31 |         scope.$digest();
32 | 
33 |         expect(elt.html()).to.be.a('string');
34 |         expect(elt.html()).to.be.equal('<div class="img-eng"><img ng-src="//token.lite.imgeng.in/http://test.com/image.jpg" src="//token.lite.imgeng.in/http://test.com/image.jpg"></div>');
35 |     });
36 | 
37 |     it('should work as an element with image source and param attribute', function () {
38 |         var elt = angular.element('<img-eng src="http://test.com/image.jpg" w="200"></img-eng>');
39 |         compile(elt)(scope);
40 |         scope.$digest();
41 | 
42 |         expect(elt.html()).to.be.a('string');
43 |         expect(elt.html()).to.be.equal('<div class="img-eng"><img ng-src="//token.lite.imgeng.in/w_200/http://test.com/image.jpg" src="//token.lite.imgeng.in/w_200/http://test.com/image.jpg"></div>');
44 |     });
45 | 
46 |     it('should work as an element with ngSrc directive', function () {
47 |         var elt = angular.element('<img-eng ng-src="http://test.com/image.jpg"></img-eng>');
48 |         compile(elt)(scope);
49 |         scope.$digest();
50 | 
51 |         expect(elt.html()).to.be.a('string');
52 |         expect(elt.html()).to.be.equal('<div class="img-eng"><img ng-src="//token.lite.imgeng.in/http://test.com/image.jpg" src="//token.lite.imgeng.in/http://test.com/image.jpg"></div>');
53 |     });
54 | 
55 |     it('should work as an element with ngSrc directive and a trusted resource', function () {
56 |         scope.myUrl = sce.trustAsResourceUrl('http://test.com/image.jpg');
57 |         var elt = angular.element('<img-eng ng-src="{{myUrl}}" w="200"></img-eng>');
58 |         compile(elt)(scope);
59 |         scope.$digest();
60 | 
61 |         expect(elt.html()).to.be.a('string');
62 |         expect(elt.html()).to.be.equal('<div class="img-eng"><img ng-src="//token.lite.imgeng.in/w_200/http://test.com/image.jpg" src="//token.lite.imgeng.in/w_200/http://test.com/image.jpg"></div>');
63 |     });
64 | 
65 |     it('should change when ngSrc directive variable change', function () {
66 |         scope.myUrl = sce.trustAsResourceUrl('http://test.com/image.jpg');
67 |         var elt = angular.element('<img-eng ng-src="{{myUrl}}"></img-eng>');
68 |         compile(elt)(scope);
69 |         scope.$digest();
70 |         scope.myUrl = sce.trustAsResourceUrl('http://test.com/image2.jpg');
71 |         scope.$digest();
72 | 
73 |         expect(elt.html()).to.be.a('string');
74 |         expect(elt.html()).to.be.equal('<div class="img-eng"><img ng-src="//token.lite.imgeng.in/http://test.com/image2.jpg" src="//token.lite.imgeng.in/http://test.com/image2.jpg"></div>');
75 |     });
76 | 
77 |     it('should change when ngSrc directive variable change from undefined', function () {
78 |         scope.myUrl = undefined;
79 |         var elt = angular.element('<img-eng ng-src="{{myUrl}}"></img-eng>');
80 |         compile(elt)(scope);
81 |         scope.$digest();
82 |         scope.myUrl = sce.trustAsResourceUrl('http://test.com/image2.jpg');
83 |         scope.$digest();
84 | 
85 |         expect(elt.html()).to.be.a('string');
86 |         expect(elt.html()).to.be.equal('<div class="img-eng"><img ng-src="//token.lite.imgeng.in/http://test.com/image2.jpg" src="//token.lite.imgeng.in/http://test.com/image2.jpg"></div>');
87 |     });
88 | 
89 | });
90 | 


--------------------------------------------------------------------------------
/test/unit/directiveSpec.js:
--------------------------------------------------------------------------------
 1 | describe("Unit: Testing angular directive for ImageEngine", function() {
 2 | 
 3 |     var scope, compile, provider;
 4 | 
 5 |     beforeEach(module('image-engine-angular', function(imgEngConfigProvider) {
 6 |         provider = imgEngConfigProvider;
 7 |         provider.setToken('token');
 8 |     }));
 9 | 
10 |     beforeEach(inject(
11 |         ['$compile','$rootScope', '$sce', function($c, $r, $sce) {
12 |             compile = $c;
13 |             scope = $r;
14 |             sce = $sce;
15 |         }]
16 |     ));
17 | 
18 |     it('should work as an element', function () {
19 |         var elt = angular.element('<img-eng></img-eng>');
20 |         compile(elt)(scope);
21 |         scope.$digest();
22 | 
23 |         expect(elt.html()).to.be.a('string');
24 |         expect(elt.html()).to.be.equal('<div class="img-eng"><img ng-src=""></div>');
25 |     });
26 | 
27 |     it('should work as an element with image source', function () {
28 |         var elt = angular.element('<img-eng src="http://test.com/image.jpg"></img-eng>');
29 |         compile(elt)(scope);
30 |         scope.$digest();
31 | 
32 |         expect(elt.html()).to.be.a('string');
33 |         expect(elt.html()).to.be.equal('<div class="img-eng"><img ng-src="//token.imgeng.in/http://test.com/image.jpg" src="//token.imgeng.in/http://test.com/image.jpg"></div>');
34 |     });
35 | 
36 |     it('should work as an element with image source and param attribute', function () {
37 |         var elt = angular.element('<img-eng src="http://test.com/image.jpg" w="200"></img-eng>');
38 |         compile(elt)(scope);
39 |         scope.$digest();
40 | 
41 |         expect(elt.html()).to.be.a('string');
42 |         expect(elt.html()).to.be.equal('<div class="img-eng"><img ng-src="//token.imgeng.in/w_200/http://test.com/image.jpg" src="//token.imgeng.in/w_200/http://test.com/image.jpg"></div>');
43 |     });
44 | 
45 |     it('should work as an element with ngSrc directive', function () {
46 |         var elt = angular.element('<img-eng ng-src="http://test.com/image.jpg"></img-eng>');
47 |         compile(elt)(scope);
48 |         scope.$digest();
49 | 
50 |         expect(elt.html()).to.be.a('string');
51 |         expect(elt.html()).to.be.equal('<div class="img-eng"><img ng-src="//token.imgeng.in/http://test.com/image.jpg" src="//token.imgeng.in/http://test.com/image.jpg"></div>');
52 |     });
53 | 
54 |     it('should work as an element with ngSrc directive and a trusted resource', function () {
55 |         scope.myUrl = sce.trustAsResourceUrl('http://test.com/image.jpg');
56 |         var elt = angular.element('<img-eng ng-src="{{myUrl}}" w="200"></img-eng>');
57 |         compile(elt)(scope);
58 |         scope.$digest();
59 | 
60 |         expect(elt.html()).to.be.a('string');
61 |         expect(elt.html()).to.be.equal('<div class="img-eng"><img ng-src="//token.imgeng.in/w_200/http://test.com/image.jpg" src="//token.imgeng.in/w_200/http://test.com/image.jpg"></div>');
62 |     });
63 | 
64 |     it('should change when ngSrc directive variable change', function () {
65 |         scope.myUrl = sce.trustAsResourceUrl('http://test.com/image.jpg');
66 |         var elt = angular.element('<img-eng ng-src="{{myUrl}}"></img-eng>');
67 |         compile(elt)(scope);
68 |         scope.$digest();
69 |         scope.myUrl = sce.trustAsResourceUrl('http://test.com/image2.jpg');
70 |         scope.$digest();
71 | 
72 |         expect(elt.html()).to.be.a('string');
73 |         expect(elt.html()).to.be.equal('<div class="img-eng"><img ng-src="//token.imgeng.in/http://test.com/image2.jpg" src="//token.imgeng.in/http://test.com/image2.jpg"></div>');
74 |     });
75 | 
76 |     it('should change when ngSrc directive variable change from undefined', function () {
77 |         scope.myUrl = undefined;
78 |         var elt = angular.element('<img-eng ng-src="{{myUrl}}"></img-eng>');
79 |         compile(elt)(scope);
80 |         scope.$digest();
81 |         scope.myUrl = sce.trustAsResourceUrl('http://test.com/image2.jpg');
82 |         scope.$digest();
83 | 
84 |         expect(elt.html()).to.be.a('string');
85 |         expect(elt.html()).to.be.equal('<div class="img-eng"><img ng-src="//token.imgeng.in/http://test.com/image2.jpg" src="//token.imgeng.in/http://test.com/image2.jpg"></div>');
86 |     });
87 | 
88 |     it('should ignore invalid attribute', function () {
89 |         var elt = angular.element('<img-eng src="http://test.com/image.jpg" w="200" in="true" a="invalid"></img-eng>');
90 |         compile(elt)(scope);
91 |         scope.$digest();
92 | 
93 |         expect(elt.html()).to.be.a('string');
94 |         expect(elt.html()).to.be.equal('<div class="img-eng"><img ng-src="//token.imgeng.in/w_200/in_true/http://test.com/image.jpg" src="//token.imgeng.in/w_200/in_true/http://test.com/image.jpg"></div>');
95 |     });
96 | 
97 | });
98 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # ImageEngine Angular [![Build Status](https://travis-ci.org/WURFL/ImageEngine-angular.png)](https://travis-ci.org/WURFL/ImageEngine-angular)
  2 | 
  3 | > An AngularJS directive for ImageEngine
  4 | 
  5 | # ImageEngine
  6 | 
  7 | [ImageEngine](http://www.scientiamobile.com/page/imageengine?utm_source=npmjs.com&utm_medium=page&utm_term=angular-component&utm_campaign=angular-component) is an intelligent image CDN for optimizing, compressing and resizing images. ImageEngine will enhance your responsive images by enabling support for HTTP2, automatic webp conversion, Client Hints and more.
  8 | 
  9 | It is likely that ImageEngine will shave off 50-60% of data traffic generated by images on your site. To better support mobile devices, ImageEngine relies on WURFL for server side device detection in cases where responsive images and Client Hints fall short.
 10 | 
 11 | [Registration](https://scientiamobile.com/imageengine/signup?utm_source=npmjs.com&utm_medium=page&utm_term=angular-component&utm_campaign=angular-component#imageengine-lite) is required to get the most out of ImageEngine. 
 12 | 
 13 | Images weight is by far the most important challenge to address when optimizing a web page for the plethora of devices on the web today. This is why ImageEngine will instantly give your users a better experience by reducing load time of your page. Not to mention the reduced data cost.
 14 | 
 15 | ImageEngine works as a CDN proxy. By referencing the ImageEngine servers and providing the full URL to the original image as a parameter, ImageEngine will identify the device, and its capabilities, and resize and optimize the image accordingly.
 16 | 
 17 | ## Client Hints
 18 | 
 19 | The plugin will enable Client Hint support for your site. Client Hints, with information about the viewport size, device pixel ratio and actual image size, are added to the image request (HTTP header) enabling ImageEngine to resize the image with surgical precision.
 20 | 
 21 | ## HTTP2 support
 22 | 
 23 | HTTP will give additional performance improvement on the network level. ImageEngine supports HTTP2 over SSL, which means that if you serve your sites and images by `https://`, ImageEngine will automatically serve all images over HTTP2.
 24 | 
 25 | ## WebP
 26 | 
 27 | WebP is a lightweight image format with great quality. WebP is well supported by browsers. ImageEngine will detect if the end user's browser supports WebP and automatically convert any format to WebP to increase performance.
 28 | 
 29 | ## Usage
 30 | 
 31 | ### Install with yarn
 32 | * `yarn add image-engine-angular`
 33 | * Include `image-engine-angular.js`. It should be located at `node_modules/src/image-engine-angular.js`
 34 | 
 35 | ### Install with npm
 36 | * `npm i image-engine-angular --save`
 37 | * Include `image-engine-angular.js`. It should be located at `node_modules/src/image-engine-angular.js`
 38 | 
 39 | ### Install with bower
 40 | * `bower install image-engine-angular --save`
 41 | * Include `image-engine-angular.js`. It should be located at `bower_components/src/image-engine-angular.js`
 42 | 
 43 | ### Install from source
 44 | * [Download Latest Version](https://github.com/WURFL/ImageEngine-angular/releases) and extract the archive.
 45 | * Include `image-engine-angular.js`. It should be located at `archive_path/src/image-engine-angular.js`
 46 | 
 47 | ### How to use it
 48 | 
 49 | * Include the image-engine-angular directive dependency on your angular module:
 50 | 
 51 | ```
 52 |     var app = angular.module("demoapp", ["image-engine-angular"]);
 53 |     app.config(function (imgEngConfigProvider) {
 54 |        imgEngConfigProvider.setToken('your-token');
 55 |     });
 56 | ```
 57 | 
 58 | Note: [sign up here](https://scientiamobile.com/imageengine/signup?utm_source=npmjs.com&utm_medium=page&utm_term=angular-component&utm_campaign=angular-component#imageengine-lite) to get your token
 59 | 
 60 | * Include the markup directive on your HTML page, like this:
 61 | 
 62 | `<img-eng src="http://yourserver.com/image.png"></img-eng>`
 63 | 
 64 | or if you want to use interpolation:
 65 | 
 66 | `<img-eng src="{{myUrl}}"></img-eng>`
 67 | 
 68 | where {{myUrl}} is the url of the [trusted image](https://docs.angularjs.org/api/ng/service/$sce) to load.
 69 | 
 70 | ## Examples
 71 | 
 72 | Check the [ImageEngine Documentation](https://docs.scientiamobile.com/documentation/image-engine/image-engine-getting-started) for the list of available settings.
 73 | 
 74 | ### Fully Automatic
 75 | 
 76 | `<img-eng src="http://yourserver.com/image.png"></img-eng>`
 77 | 
 78 | ### 20% of screen size
 79 | 
 80 | `<img-eng src="http://yourserver.com/image.png" pc="20"></img-eng>`
 81 | 
 82 | ### Create an image 300px Wide
 83 | 
 84 | `<img-eng src="http://yourserver.com/image.png" w="300"></img-eng>`
 85 | 
 86 | ### Create 200x200px Thumbnails with Black Letterboxes/Pillarboxes
 87 | 
 88 | `<img-eng src="http://yourserver.com/image.png" w="200" h="200" m="letterbox_000000_100"></img-eng>`
 89 | 
 90 | ## Demo
 91 | 
 92 | * Run: `npm start`
 93 | * Browse: `http://localhost:8000/demo/index.html`
 94 | 
 95 | ## Testing
 96 | 
 97 | ``` bash
 98 | $ npm test
 99 | ```
100 | 
101 | ## Authors
102 | 
103 | - [Luca Corbo](https://github.com/lucor) — [view contributions](https://github.com//WURFL/image-engine-angular/commits?author=lucor)
104 | - [All Contributors](../../contributors)
105 | 
106 | ## License
107 | 
108 | Licensed under the MIT license. (See the LICENSE file)
109 | 
110 | Copyright &copy; ScientiaMobile, Inc.
111 | 


--------------------------------------------------------------------------------