angular-retina - npm Package Compare versions

Comparing version 0.2.0 to 0.3.1

dist/angular-retina.js

@@ -1,19 +0,27 @@
-/*! angular-retina - v0.1.3 - 2013-06-22
+/*! angular-retina - v0.3.0 - 2014-02-17
 * https://github.com/jrief/angular-retina
-* Copyright (c) 2013 Jacob Rief; Licensed MIT */
+* Copyright (c) 2014 Jacob Rief; Licensed MIT */
 (function (angular, undefined) {
   'use strict';
-  angular.module('ngRetina', []).config([
-    '$provide',
-    function ($provide) {
-      $provide.decorator('ngSrcDirective', [
-        '$delegate',
-        function ($delegate) {
-          $delegate[0].compile = function (element, attrs) {
-          };
-          return $delegate;
-        }
-      ]);
-    }
-  ]).directive('ngSrc', [
+  var infix = '@2x';
+  var ngRetina = angular.module('ngRetina', []).config([
+      '$provide',
+      function ($provide) {
+        $provide.decorator('ngSrcDirective', [
+          '$delegate',
+          function ($delegate) {
+            $delegate[0].compile = function (element, attrs) {
+            };
+            return $delegate;
+          }
+        ]);
+      }
+    ]);
+  ngRetina.provider('ngRetina', function () {
+    this.setInfix = function (value) {
+      infix = value;
+    };
+    this.$get = angular.noop;
+  });
+  ngRetina.directive('ngSrc', [
     '$window',
@@ -33,3 +41,3 @@ '$http',
           return url;
-        parts[parts.length - 2] += '@2x';
+        parts[parts.length - 2] += infix;
         return parts.join('.');
@@ -36,0 +44,0 @@ }

dist/angular-retina.min.js

@@ -1,4 +0,4 @@
-/*! angular-retina - v0.1.3 - 2013-06-22
+/*! angular-retina - v0.3.0 - 2014-02-17
 * https://github.com/jrief/angular-retina
-* Copyright (c) 2013 Jacob Rief; Licensed MIT */
-(function(e){"use strict";e.module("ngRetina",[]).config(["$provide",function(e){e.decorator("ngSrcDirective",["$delegate",function(e){return e[0].compile=function(){},e}])}]).directive("ngSrc",["$window","$http",function(e,t){function n(e){var t=e.split(".");return 2>t.length?e:(t[t.length-2]+="@2x",t.join("."))}var i=parseInt((/msie (\d+)/.exec(e.navigator.userAgent.toLowerCase())||[])[1],10),o=function(){var t="(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";return e.devicePixelRatio>1?!0:e.matchMedia&&e.matchMedia(t).matches}();return function(r,c,s){function a(e){s.$set("src",e),i&&c.prop("src",e)}function u(i){var o=e.sessionStorage.getItem(i);o?a(o):(o=n(i),t.head(o).success(function(){a(o),e.sessionStorage.setItem(i,o)}).error(function(){a(i),e.sessionStorage.setItem(i,i)}))}s.$observe("ngSrc",function(t){t&&(o&&"object"==typeof e.sessionStorage?u(t):a(t))})}}])})(window.angular);
+* Copyright (c) 2014 Jacob Rief; Licensed MIT */
+!function(a){"use strict";var b="@2x",c=a.module("ngRetina",[]).config(["$provide",function(a){a.decorator("ngSrcDirective",["$delegate",function(a){return a[0].compile=function(){},a}])}]);c.provider("ngRetina",function(){this.setInfix=function(a){b=a},this.$get=a.noop}),c.directive("ngSrc",["$window","$http",function(a,c){function d(a){var c=a.split(".");return c.length<2?a:(c[c.length-2]+=b,c.join("."))}var e=parseInt((/msie (\d+)/.exec(a.navigator.userAgent.toLowerCase())||[])[1],10),f=function(){var b="(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";return a.devicePixelRatio>1?!0:a.matchMedia&&a.matchMedia(b).matches}();return function(b,g,h){function i(a){h.$set("src",a),e&&g.prop("src",a)}function j(b){var e=a.sessionStorage.getItem(b);e?i(e):(e=d(b),c.head(e).success(function(){i(e),a.sessionStorage.setItem(b,e)}).error(function(){i(b),a.sessionStorage.setItem(b,b)}))}h.$observe("ngSrc",function(b){b&&(f&&"object"==typeof a.sessionStorage?j(b):i(b))})}}])}(window.angular);

package.json

 {
-  "name": "angular-retina",
-  "description": "Replace AngularJS directive 'ng-src' by a version which supports Retina displays",
-  "version": "0.2.0",
-  "homepage": "https://github.com/jrief/angular-retina",
-  "author": {
-    "name": "Jacob Rief",
-    "email": "[e-mail]"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/jrief/angular-retina.git"
-  },
-  "bugs": {
-    "url": "https://github.com/jrief/angular-retina/issues"
-  },
-  "licenses": [
-    {
-      "type": "MIT",
-      "url": "https://github.com/jrief/angular-retina/blob/master/LICENSE-MIT"
-    }
-  ],
-  "engines": {
-    "node": ">= 0.6.0"
-  },
-  "scripts": {
-    "test": "karma start test/karma.conf.js --single-run --browsers PhantomJS"
-  },
-  "dependencies": {},
-  "devDependencies": {
-    "karma": ">= 0.8.5",
-    "grunt": ">= 0.4.0",
-    "grunt-contrib-concat": "latest",
-    "grunt-contrib-jshint": "latest",
-    "grunt-contrib-uglify": "latest",
-    "grunt-ngmin": "0.0.2"
-  },
-  "keywords": []
+	"name": "angular-retina",
+	"description": "Replace AngularJS directive 'ng-src' by a version which supports Retina displays",
+	"version": "0.3.1",
+	"files": ["dist/angular-retina.js", "dist/angular-retina.min.js"],
+	"homepage": "https://github.com/jrief/angular-retina",
+	"author": {
+		"name": "Jacob Rief",
+		"email": "[e-mail]"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git://github.com/jrief/angular-retina.git"
+	},
+	"bugs": {
+		"url": "https://github.com/jrief/angular-retina/issues"
+	},
+	"licenses": [{
+		"type": "MIT",
+		"url": "https://github.com/jrief/angular-retina/blob/master/LICENSE-MIT"
+	}],
+	"dependencies": {},
+	"devDependencies": {
+		"minimatch": "latest",
+		"lodash": "latest",
+		"karma": "latest",
+		"grunt": "latest",
+		"load-grunt-tasks": "latest",
+		"grunt-contrib-concat": "latest",
+		"grunt-contrib-jshint": "latest",
+		"grunt-contrib-uglify": "latest",
+		"grunt-ngmin": "latest",
+		"grunt-karma": "latest"
+	},
+	"keywords": ["angularjs", "ngSrc", "Retina", "high resolution image"]
 }

README.md

@@ -10,4 +10,4 @@ # angular-retina
 
-## Quick start
-### Download
+## Install
+If you prefer to host Javascript files locally instead of using a CDN, install them with:
 
@@ -19,23 +19,23 @@ ```npm install angular-retina```
 
-### On the client
-+ Into your HTML code include the required libraries:
+## Client usage
+Into the main HTML code, add the required URLs from the CDN or include the files locally:
 
->
 ```html
-<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
-<script src="/path/to/your/javascript-files/angular-retina.min.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/angular-retina/0.3.0/angular-retina.min.js"></script>
 ```
 
-Please note, that *angular-retina* requires ```angularjs-1.1.3``` or later.
+```html
+<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
 
-+ and in your main JavaScript file:
+Please note, that *angular-retina* requires ```angularjs-1.2.1``` or later.
 
->
+In Javascript, initialize the main module for your angular application:
+
 ```javascript
-angular.module('MyAwesomeModule', [...other dependencies..., 'ngRetina']);
+var my_app = angular.module('MyApp', [...other dependencies..., 'ngRetina']);
 ```
 
-+ in the body of your HTML, access static referenced images using:
+In the body of any HTML code, access static referenced images using:
 
->
 ```html
@@ -45,12 +45,31 @@ <img ng-src="/path/to/image.png" width="100" height="100">
 
-+ or reference the image using a markup:
+or reference the image using Angulars markup:
 
->
 ```html
-<img ng-src="{{image_url}}" width="100" height="100">
+<img ng-src="{{ image_url }}" width="100" height="100">
 ```
 
+Note that when using this module, adding the element attributes ```width="..."```
+and/or ```height="..."``` becomes mandatory, as the displayed image
+otherwise gets scaled to its double size.
+
 Just use it in your HTML-code as you would use the common AngularJS directive
 [ngSrc](http://docs.angularjs.org/api/ng.directive:ngSrc):
 
+## Alternative infix
+When this library was written, Apple Inc. recommended to use ```@2x``` as infix, for images
+optimized for Retina displays. Then in 2013, they changed their mind, and now 
+[suggest to use the infix](https://developer.apple.com/library/safari/documentation/NetworkingInternet/Conceptual/SafariImageDeliveryBestPractices/ServingImagestoRetinaDisplays/ServingImagestoRetinaDisplays.html) ```_2x```.
+
+Since Apple's former recommendation, the proposed infix has been hard coded into some server-side
+libraries for image generation. Therefore, in version 0.3.0 of *angular-retina*, a setter function
+has been added, which shall be used to set the infix to the newly proposed ```_2x```, but of course
+only, if the server-side supports it:
+
+```javascript
+my_app.config(function(ngRetinaProvider) {
+    ngRetinaProvider.setInfix('_2x');
+});
+```
+
 ## On the server
@@ -71,13 +90,21 @@ Applications supporting Retina displays should include two separate files for
 
-Note that when using this module, adding the element attributes ```width="..."```
-and/or ```height="..."``` becomes mandatory, as the displayed image
-otherwise gets scaled to its double size.
+## Same Origin Policy
+In order to verify if the image exists in high resolution, *angular-retina* invokes
+a HEAD request with the URL of the high-res image. For security reasons, Javascript
+may not access files on servers starting with a different domain name. This is known
+as the [Same Origin Policy](http://www.w3.org/Security/wiki/Same_Origin_Policy).
+Therefore you must ensure, that all images accessed through ```ng-src``` are loaded
+from the same domain as the main HTML file.
 
 ## Release History
-0.1.0 - initial revision
-0.1.3 - fixed problems with minified JS code
-0.2.0 - using sessionStorage instead of $cacheFactory to boost performance
++ 0.1.0 - initial revision.
++ 0.1.3 - fixed problems with minified JS code.
++ 0.2.0 - using sessionStorage instead of $cacheFactory to boost performance.
++ 0.3.0 - added ```setInfix``` to configure the used infix for Retina images.
 
 ## License
-Copyright (c) 2013 Jacob Rief  
+Copyright (c) 2014 Jacob Rief
 Licensed under the MIT license.
+
+[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/jrief/angular-retina/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
+

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

107

increased by33.75%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

9364

decreased by-98.51%

Dev dependency count

10

increased by66.67%

Number of package files

4

decreased by-73.33%

Lines of code

79

decreased by-99.53%

No dependency changes