Skip to content

Commit eaab34a

Browse files
lucorlucor
committed
First commit
0 parents  commit eaab34a

File tree

10 files changed

+407
-0
lines changed

10 files changed

+407
-0
lines changed

‎.gitignore‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.DS_Store
2+
/.settings
3+
/.project
4+
node_modules
5+
old/
6+
tmp/
7+
.tmp/
8+
*~
9+
/nbproject
10+
.idea
11+
.grunt
12+
/bower_components

‎.travis.yml‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
language: node_js
2+
node_js:
3+
- 0.10
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/karma/bin/karma start karma.conf.js --no-auto-watch --single-run --reporters=dots --browsers=PhantomJS

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2014 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.

‎README.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# Angular WURFL Image Tailor [![Build Status](https://travis-ci.org/WURLF/angular-wurfl-image-tailor.png)](https://travis-ci.org/WURLF/angular-wurfl-image-tailor)
2+
3+
> An AngularJS directive for WURFL Image Tailor (WIT)
4+
5+
[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.
6+
7+
##Features
8+
9+
* Add the img-wit directive
10+
* Enable out of the box support for the [WIT URLs](http://wurfl.io/documentation/wit-getting-started.php) to download more images in parallel.
11+
12+
## Usage
13+
14+
### Install with bower
15+
* `bower install angular-wurfl-image-tailor --save`
16+
* Include `angular-wurfl-image-tailor.js`. It should be located at `bower_components/src/angular-wurfl-image-tailor.js`
17+
18+
### Install from source
19+
* [Download Latest Version](https://github.com/WURLF/angular-wurfl-image-tailor/releases) and extract the archive.
20+
* Include `angular-wurfl-image-tailor.js`. It should be located at `archive_path/src/angular-wurfl-image-tailor.js`
21+
22+
### How to use it
23+
24+
* Include the angular-wurfl-image-tailor directive dependency on your angular module:
25+
26+
`var app = angular.module("demoapp", ["angular-wurfl-image-tailor"]);`
27+
28+
* Include the markup directive on your HTML page, like this:
29+
30+
`<img-wit src="http://yourserver.com/image.png"></img-wit>`
31+
32+
## Examples
33+
34+
Check the [WURFL Image Tailor Documentation](http://wurfl.io/documentation/wit-directives.php) for the list of available settings.
35+
36+
### Fully Automatic
37+
38+
`<img-wit src="http://yourserver.com/image.png"></img-wit>`
39+
40+
### 20% of screen size
41+
42+
`<img-wit src="http://yourserver.com/image.png" pc="20"></img-wit>`
43+
44+
### Create an image 300px Wide
45+
46+
`<img-wit src="http://yourserver.com/image.png" w="300"></img-wit>`
47+
48+
### Create 200x200px Thumbnails with Black Letterboxes/Pillarboxes
49+
50+
`<img-wit src="http://yourserver.com/image.png" w="200" h="200" m="letterbox_000000_100"></img-wit>`
51+
52+
## Demo
53+
54+
* Run: `npm start`
55+
* Browse: `http://localhost:8000/demo/index.html`
56+
57+
## Authors
58+
59+
- [Luca Corbo](https://github.com/lucor) — [view contributions](https://github.com//WURLF/angular-wurfl-image-tailor/commits?author=lucor)
60+
61+
## License
62+
63+
Licensed under the MIT license. (See the LICENSE file)
64+
65+
Copyright &copy; ScientiaMobile, Inc.

‎bower.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "angular-wurfl-image-tailor",
3+
"description": "An AngularJS directive for WURFL Image Tailor (WIT)",
4+
"version": "0.9.0",
5+
"main": "./src/angular-wurfl-image-tailor.js",
6+
"authors": [
7+
"Luca Corbo (https://github.com/lucor)"
8+
],
9+
"license": "MIT",
10+
"ignore": [
11+
"**/.*",
12+
"node_modules",
13+
"bower_components",
14+
"test",
15+
"tests"
16+
],
17+
"dependencies": {
18+
"angular": "~1.2.0"
19+
},
20+
"devDependencies": {
21+
"angular-mocks": "~1.2.0"
22+
}
23+
}

‎demo/index.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
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>Angular WURLF Image Tailor</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/angular-wurfl-image-tailor.js"></script>
12+
13+
<script>
14+
angular.module('demo-WIT', ['angular-wurfl-image-tailor']);
15+
</script>
16+
</head>
17+
18+
<body ng-app="demo-WIT">
19+
<div class="container">
20+
<div class="row">
21+
<h1>Fully Automatic</h1>
22+
23+
<p>
24+
<code>
25+
&lt;img-wit src=&quot;http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG&quot;&gt;&lt;/img-wit&gt;
26+
</code>
27+
</p>
28+
29+
<p>
30+
<img-wit src="http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG"></img-wit>
31+
</p>
32+
</div>
33+
<div class="row">
34+
<h1>20% of screen size</h1>
35+
36+
<p>
37+
<code>
38+
&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;
39+
</code>
40+
</p>
41+
42+
<p>
43+
<img-wit src="http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG" pc="20"></img-wit>
44+
</p>
45+
</div>
46+
<div class="row">
47+
<h1>Image is 300px Wide</h1>
48+
49+
<p>
50+
<code>
51+
&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;
52+
</code>
53+
</p>
54+
55+
<p>
56+
<img-wit src="http://upload.wikimedia.org/wikipedia/commons/8/82/2011_Trampeltier_1528.JPG" w="300"></img-wit>
57+
</p>
58+
</div>
59+
60+
<div class="row">
61+
<h1>Create 200x200px Thumbnails with Black Letterboxes/Pillarboxes</h1>
62+
63+
<p>
64+
<code>
65+
&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;
66+
</code>
67+
</p>
68+
69+
<p>
70+
<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>
71+
</p>
72+
</div>
73+
</div>
74+
75+
76+
</body>
77+
</html>

‎karma.conf.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
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/angular-wurfl-image-tailor.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+
};

‎package.json‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "angular-wurfl-image-tailor",
3+
"version": "0.9.0",
4+
"description": "An AngularJS directive for WURFL Image Tailor (WIT)",
5+
"author": "Luca Corbo (https://github.com/lucor)",
6+
"maintainers": [
7+
"Luca Corbo (https://github.com/lucor)"
8+
],
9+
"contributors": [
10+
"Luca Corbo (https://github.com/lucor)"
11+
],
12+
"license": "MIT",
13+
"bugs": {
14+
"url": "https://github.com/WURFL/angular-wurfl-image-tailor/issues"
15+
},
16+
"repository": {
17+
"type": "git",
18+
"url": "https://github.com/WURFL/angular-wurfl-image-tailor.git"
19+
},
20+
"keywords": [
21+
"angularjs",
22+
"wurfl",
23+
"wit",
24+
"wurfl image tailor",
25+
"webcomponent"
26+
],
27+
"devDependencies": {
28+
"chai": "^1.9.1",
29+
"http-server": "^0.6.1",
30+
"karma": "~0.12",
31+
"karma-chai": "^0.1.0",
32+
"karma-mocha": "^0.1.4",
33+
"karma-phantomjs-launcher": "^0.1.4"
34+
},
35+
"scripts": {
36+
"postinstall": "bower install",
37+
38+
"prestart": "npm install",
39+
"start": "http-server -p 8000",
40+
41+
"pretest": "npm install",
42+
"test": "./node_modules/karma/bin/karma start karma.conf.js",
43+
"test-single-run": "./node_modules/karma/bin/karma start karma.conf.js --single-run"
44+
}
45+
}

‎src/angular-wurfl-image-tailor.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/*
2+
* angular-wurfl-image-tailor v0.9.0
3+
* Authors: Luca Corbo (https://github.com/lucor)
4+
* (c) 2014 ScientiaMobile, Inc.
5+
* License: MIT
6+
*/
7+
8+
angular.module('angular-wurfl-image-tailor', [])
9+
.factory('witUrls', function () {
10+
var wit_index = 0;
11+
var wit_urls = ['//wit.wurfl.io', '//wit1.wurfl.io', '//wit2.wurfl.io', '//wit3.wurfl.io', '//wit4.wurfl.io'];
12+
return {
13+
get: function () {
14+
var url = wit_urls[wit_index];
15+
wit_index++;
16+
if (wit_index >= wit_urls.length) {
17+
wit_index = 0;
18+
}
19+
return url;
20+
}
21+
};
22+
})
23+
.directive('imgWit', function (witUrls) {
24+
return {
25+
restrict: 'E',
26+
replace: false,
27+
scope:{},
28+
template: '<div class="wit"><img src="{{wit_link}}"/></div>',
29+
link: function (scope, element, attributes) {
30+
var wit_link_pieces = [witUrls.get()];
31+
var src = attributes['src'];
32+
if (!src) return;
33+
angular.forEach(attributes['$attr'], function(attr) {
34+
if (attr != 'src') {
35+
wit_link_pieces.push(attr + '_' + attributes[attr]);
36+
}
37+
});
38+
wit_link_pieces.push(src);
39+
scope.wit_link = wit_link_pieces.join('/');
40+
}
41+
}
42+
});

0 commit comments

Comments
 (0)