WURFL Image Tailor (WIT) is now ImageEngine

Other changes since 0.9.x
- Adds token support
- Adds a flag to switch between "ImageEngine" and "ImageEngine Lite"
- Changes the base URLs
- Updates unit tests

Author: lucor

CHANGELOG.md

@@ -1,6 +1,19 @@
 # Changelog
 
-All notable changes to `angular-wurfl-image-tailor` will be documented in this file
+All notable changes to `image-engine-angular` will be documented in this file
+
+## 1.0.0 - 2015-11-16
+
+### Changed
+- WURFL Image Tailor (WIT) is now ImageEngine
+
+### Added
+- Token support
+- Flag to switch between "ImageEngine" and "ImageEngine Lite"
+
+### Updated
+- Base Urls
+- Tests
 
 ## 0.9.4 - 2015-03-23
 

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014 ScientiaMobile, Inc.
+Copyright (c) 2014-2015 ScientiaMobile, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,59 +1,70 @@
-# Angular WURFL Image Tailor [![Build Status](https://travis-ci.org/WURFL/angular-wurfl-image-tailor.png)](https://travis-ci.org/WURFL/angular-wurfl-image-tailor)
+# ImageEngine Angular [![Build Status](https://travis-ci.org/WURFL/ImageEngine-angular.png)](https://travis-ci.org/WURFL/ImageEngine-angular)
 
-> An AngularJS directive for WURFL Image Tailor (WIT)
+> An AngularJS directive for ImageEngine
 
-[WURFL Image Tailor](http://wurfl.io/#wit) (WIT) is an automatic image tailor based on WURFL device detection. WURFL will detect the device, and its screen size, resize and optimize the image accordingly.
+**WURFL Image Tailor (WIT) is now ImageEngine!**
 
-##Features
+[ImageEngine](http://web.wurfl.io/#image-engine) is an automatic image optimizer based on WURFL device detection. WURFL will detect the device capabilities, including screen size and image format support, resize and optimize the image accordingly. That's why we call it the ImageEngine.
 
-* Add the img-wit directive
-* Enable out of the box support for the [WIT URLs](http://wurfl.io/documentation/wit-getting-started.php) to download more images in parallel.
+ImageEngine is not only for mobile. ImageEngine supports the emerging Client Hint standard making it the perfect companion for Responsive Images.
+
+Images weight is by far the most important challenge to address to optimize 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.
+
+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.
 
 ## Usage
 
 ### Install with bower
-* `bower install angular-wurfl-image-tailor --save`
-* Include `angular-wurfl-image-tailor.js`. It should be located at `bower_components/src/angular-wurfl-image-tailor.js`
+* `bower install image-engine-angular --save`
+* Include `image-engine-angular.js`. It should be located at `bower_components/src/image-engine-angular.js`
 
 ### Install from source
-* [Download Latest Version](https://github.com/WURFL/angular-wurfl-image-tailor/releases) and extract the archive.
-* Include `angular-wurfl-image-tailor.js`. It should be located at `archive_path/src/angular-wurfl-image-tailor.js`
+* [Download Latest Version](https://github.com/WURFL/ImageEngine-angular/releases) and extract the archive.
+* Include `image-engine-angular.js`. It should be located at `archive_path/src/image-engine-angular.js`
 
 ### How to use it
 
-* Include the angular-wurfl-image-tailor directive dependency on your angular module:
+* Include the image-engine-angular directive dependency on your angular module:
+
+```
+    var app = angular.module("demoapp", ["image-engine-angular"]);
+    app.config(function (imgEngConfigProvider) {
+       imgEngConfigProvider.setToken('your-token');
+       imgEngConfigProvider.isLite(); // Add this line only for ImageEngine Lite
+    });
+```
 
-`var app = angular.module("demoapp", ["angular-wurfl-image-tailor"]);`
+Note: [sign up here](https://scientiamobile.com/imageengine/signup) to get your token
 
 * Include the markup directive on your HTML page, like this:
 
-`<img-wit src="http://yourserver.com/image.png"></img-wit>`
+`<img-eng src="http://yourserver.com/image.png"></img-eng>`
 
 or if you want to use interpolation:
 
-`<img-wit src="{{myUrl}}"></img-wit>`
+`<img-eng src="{{myUrl}}"></img-eng>`
 
-where {{myUrl}} is the url of the [trusted image](https://docs.angularjs.org/api/ng/service/$sce) to load. 
+where {{myUrl}} is the url of the [trusted image](https://docs.angularjs.org/api/ng/service/$sce) to load.
 
 ## Examples
 
-Check the [WURFL Image Tailor Documentation](http://wurfl.io/documentation/wit-directives.php) for the list of available settings.
+Check the [ImageEngine Documentation](http://web.wurfl.io/#image-engine) for the list of available settings.
 
 ### Fully Automatic
 
-`<img-wit src="http://yourserver.com/image.png"></img-wit>`
+`<img-eng src="http://yourserver.com/image.png"></img-eng>`
 
 ### 20% of screen size
 
-`<img-wit src="http://yourserver.com/image.png" pc="20"></img-wit>`
+`<img-eng src="http://yourserver.com/image.png" pc="20"></img-eng>`
 
 ### Create an image 300px Wide
 
-`<img-wit src="http://yourserver.com/image.png" w="300"></img-wit>`
+`<img-eng src="http://yourserver.com/image.png" w="300"></img-eng>`
 
 ### Create 200x200px Thumbnails with Black Letterboxes/Pillarboxes
 
-`<img-wit src="http://yourserver.com/image.png" w="200" h="200" m="letterbox_000000_100"></img-wit>`
+`<img-eng src="http://yourserver.com/image.png" w="200" h="200" m="letterbox_000000_100"></img-eng>`
 
 ## Demo
 
@@ -68,11 +79,11 @@ $ npm test
 
 ## Authors
 
-- [Luca Corbo](https://github.com/lucor) — [view contributions](https://github.com//WURFL/angular-wurfl-image-tailor/commits?author=lucor)
+- [Luca Corbo](https://github.com/lucor) — [view contributions](https://github.com//WURFL/image-engine-angular/commits?author=lucor)
 - [All Contributors](../../contributors)
 
 ## License
 
 Licensed under the MIT license. (See the LICENSE file)
 
-Copyright &copy; ScientiaMobile, Inc.
+Copyright &copy; ScientiaMobile, Inc.

UPGRADE.md

@@ -0,0 +1,23 @@
+## Upgrade
+
+### From 0.9.x to 1.0
+
+  * Install the image-engine-angular module
+  * Update the directive declaration:
+  ```
+      var app = angular.module("demoapp", ["image-engine-angular"]);
+      app.config(function (imgEngConfigProvider) {
+         imgEngConfigProvider.setToken('your-token');
+         imgEngConfigProvider.isLite(); // Add this line only for ImageEngine Lite
+      });
+  ```
+
+  * Replace all occurrences of the **img-wit** markup with **img-eng**
+
+  Example:
+
+  `<img-wit src="http://yourserver.com/image.png"></img-wit>`
+
+  to:
+
+  `<img-eng src="http://yourserver.com/image.png"></img-eng>`

bower.json

@@ -1,8 +1,9 @@
 {
-  "name": "angular-wurfl-image-tailor",
-  "description": "An AngularJS directive for WURFL Image Tailor (WIT)",
-  "version": "0.9.4",
-  "main": "./src/angular-wurfl-image-tailor.js",
+  "name": "image-engine-angular",
+  "description": "An AngularJS directive for ImageEngine",
+  "homepage": "https://github.com/WURFL/ImageEngine-angular",
+  "version": "1.0.0",
+  "main": "./src/image-engine-angular.js",
   "authors": [
     "Luca Corbo (https://github.com/lucor)"
   ],

demo/index.html

@@ -3,57 +3,61 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
-    <title>Angular WURFL Image Tailor</title>
+    <title>ImageEngine Angular Demo</title>
 
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 
     <script src="../bower_components/angular/angular.js"></script>
-    <script src="../src/angular-wurfl-image-tailor.js"></script>
+    <script src="../src/image-engine-angular.js"></script>
 
     <script>
-        angular.module('demo-WIT', ['angular-wurfl-image-tailor']);
+        var app = angular.module('demo-ImageEngine', ['image-engine-angular']);
+        app.config(function (imgEngConfigProvider) {
+            imgEngConfigProvider.setToken('try');
+            imgEngConfigProvider.isLite();
+        });
     </script>
 </head>
 
-<body ng-app="demo-WIT">
+<body ng-app="demo-ImageEngine">
 <div class="container">
     <div class="row">
         <h1>Fully Automatic</h1>
 
         <p>
             <code>
-                &lt;img-wit src=&quot;http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG&quot;&gt;&lt;/img-wit&gt;
+                &lt;img-eng src=&quot;http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG&quot;&gt;&lt;/img-eng&gt;
             </code>
         </p>
 
         <p>
-            <img-wit src="http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG"></img-wit>
+            <img-eng src="http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG"></img-eng>
         </p>
     </div>
     <div class="row">
         <h1>20% of screen size</h1>
 
         <p>
             <code>
-                &lt;img-wit src=&quot;http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG&quot; pc=&quot;20&quot;&gt;&lt;/img-wit&gt;
+                &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;
             </code>
         </p>
 
         <p>
-            <img-wit src="http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG" pc="20"></img-wit>
+            <img-eng src="http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG" pc="20"></img-eng>
         </p>
     </div>
     <div class="row">
         <h1>Image is 300px Wide</h1>
 
         <p>
             <code>
-                &lt;img-wit src=&quot;http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG&quot; w=&quot;300&quot;&gt;&lt;/img-wit&gt;
+                &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;
             </code>
         </p>
 
         <p>
-            <img-wit src="http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG" w="300"></img-wit>
+            <img-eng src="http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG" w="300"></img-eng>
         </p>
     </div>
 
@@ -62,12 +66,12 @@ <h1>Create 200x200px Thumbnails with Black Letterboxes/Pillarboxes</h1>
 
         <p>
             <code>
-                &lt;img-wit 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-wit&gt;
+                &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;
             </code>
         </p>
 
         <p>
-            <img-wit src="http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG" w="200" h="200" m="letterbox_000000_100"></img-wit>
+            <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>
         </p>
     </div>
 </div>

gulpfile.js

@@ -1,5 +1,5 @@
 var gulp = require('gulp');
-var karma = require('karma').server;
+var karma = require('karma').Server;
 var bower = require('gulp-bower');
 
 require('./test/angular-1.2/gulpfile');

karma.conf.js

@@ -17,7 +17,7 @@ module.exports = function(config) {
 
       'bower_components/angular/angular.js',
       'bower_components/angular-mocks/angular-mocks.js',
-      'src/angular-wurfl-image-tailor.js',
+      'src/image-engine-angular.js',
       'test/**/*Spec.js'
     ],
 

package.json

@@ -1,7 +1,8 @@
 {
-  "name": "angular-wurfl-image-tailor",
-  "version": "0.9.3",
-  "description": "An AngularJS directive for WURFL Image Tailor (WIT)",
+  "name": "image-engine-angular",
+  "version": "1.0.0",
+  "description": "An AngularJS directive for ImageEngine",
+  "homepage": "https://github.com/WURFL/ImageEngine-angular",
   "author": "Luca Corbo (https://github.com/lucor)",
   "maintainers": [
     "Luca Corbo (https://github.com/lucor)"
@@ -11,34 +12,33 @@
   ],
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/WURFL/angular-wurfl-image-tailor/issues"
+    "url": "https://github.com/WURFL/ImageEngine-angular/issues"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/WURFL/angular-wurfl-image-tailor.git"
+    "url": "https://github.com/WURFL/ImageEngine-angular.git"
   },
   "keywords": [
     "angularjs",
     "wurfl",
-    "wit",
-    "wurfl image tailor",
+    "ImageEngine",
     "webcomponent"
   ],
   "devDependencies": {
     "chai": "^1.9.1",
     "gulp": "^3.8.11",
-    "gulp-bower": "0.0.10",
-    "gulp-karma": "0.0.4",
-    "http-server": "^0.6.1",
-    "karma": "^0.12",
-    "karma-chai": "^0.1.0",
-    "karma-mocha": "^0.1.4",
-    "karma-phantomjs-launcher": "^0.1.4"
+    "gulp-bower": "^0.0.10",
+    "http-server": "^0.6",
+    "karma": "^0.13",
+    "karma-chai": "^0.1",
+    "karma-mocha": "^0.1",
+    "karma-phantomjs-launcher": "^0.1",
+    "mocha": "^2.3.4"
   },
   "scripts": {
     "postinstall": "bower install",
     "prestart": "npm install",
-    "start": "http-server -p 8000",
+    "start": "http-server -p 9999",
     "pretest": "npm install",
     "test": "./node_modules/.bin/gulp",
     "test-single-run": "./node_modules/.bin/gulp test"