angular-retina - npm Package Compare versions

Comparing version 0.3.1 to 0.3.4

package.json

 {
-	"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"]
+  "name": "angular-retina",
+  "description": "Replace AngularJS directive 'ng-src' by a version which supports Retina displays",
+  "version": "0.3.4",
+  "files": [
+    "dist/angular-retina.js",
+    "dist/angular-retina.min.js"
+  ],
+  "main": "dist/angular-retina",
+  "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"
+    }
+  ],
+  "scripts": {
+    "example": "node node_modules/.bin/http-server",
+    "jshint": "node_modules/.bin/grunt jshint",
+    "test": "npm run jshint && node_modules/.bin/karma start --single-run --browsers PhantomJS",
+    "test-watch": "node_modules/.bin/karma start karma.conf.js --auto-watch",
+    "test-min": "node_modules/.bin/karma start --single-run --browsers PhantomJS --reporters 'coverage,dots' --min",
+    "test-all": "npm run jshint && node_modules/.bin/karma start --single-run --browsers 'PhantomJS,Firefox,Chrome'",
+    "test-travis": "npm run jshint && npm run test-min && node_modules/.bin/karma start --single-run --browsers 'PhantomJS,Firefox' --reporters 'coverage,dots' && npm run coverage-average",
+    "coverage-average": "node_modules/.bin/coverage-average coverage/text-summary.txt --limit 90",
+    "precommit": "npm run test-min && npm test && npm run coverage-average",
+    "build": "grunt build"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "coverage-average": "^1.0.3",
+    "grunt": "latest",
+    "grunt-cli": "^0.1.13",
+    "grunt-contrib-concat": "latest",
+    "grunt-contrib-jshint": "latest",
+    "grunt-contrib-uglify": "latest",
+    "grunt-ngmin": "latest",
+    "http-server": "^0.8.0",
+    "husky": "^0.9.3",
+    "jscs": "^2.1.0",
+    "karma": "^0.13.9",
+    "karma-chrome-launcher": "^0.2.0",
+    "karma-coverage": "^0.5.0",
+    "karma-firefox-launcher": "^0.1.6",
+    "karma-jasmine": "^0.3.6",
+    "karma-phantomjs-launcher": "^0.2.1"
+  },
+  "keywords": [
+    "angularjs",
+    "ngSrc",
+    "Retina",
+    "high resolution image"
+  ]
 }

README.md

@@ -9,2 +9,3 @@ # angular-retina
 [![Build Status](https://travis-ci.org/jrief/angular-retina.png)](https://travis-ci.org/jrief/angular-retina)
+[![Code Climate](https://codeclimate.com/github/jrief/angular-retina/badges/gpa.svg)](https://codeclimate.com/github/jrief/angular-retina)
 
@@ -24,11 +25,7 @@ ## Install
 <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>
+<script src="//cdnjs.cloudflare.com/ajax/libs/angular-retina/0.3.1/angular-retina.min.js"></script>
 ```
-
-```html
-<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
-
 Please note, that *angular-retina* requires ```angularjs-1.2.1``` or later.
 
-In Javascript, initialize the main module for your angular application:
+In Javascript, initialize the main module for your AngularJS application:
 
@@ -45,3 +42,3 @@ ```javascript
 
-or reference the image using Angulars markup:
+or reference the image using AngularJS's markup:
 
@@ -61,9 +58,9 @@ ```html
 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 
+optimized for Retina displays. In late 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:
+libraries for image generation. Therefore, in version 0.3.0 of *angular-retina*, a configuration 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 also supports it!
 
@@ -76,2 +73,25 @@ ```javascript
 
+## Hide images until loaded, avoiding "broken image" display
+To hide (`opacity: 0`) images until the library has determined what resolution to use, set the `src` and the image has finished downloading, use the following config:
+
+```javascript
+my_app.config(function(ngRetinaProvider) {
+    ngRetinaProvider.setFadeInWhenLoaded(true);
+});
+```
+
+## Images with embedded hash
+
+When using a framework that embeds a digest/hash to the asset URL, the problem
+is that a high-resolution verison would have a different hash and would not follow the
+usual pattern that ends with @2x. Instead the hash is added at the end, i.e.
+`/images/image@2x-{hash2}.jpg`, so the automatic detection of image URL would fail.
+
+The solution is to supply the the high-resolution URL image from the outside of the library
+using the `data-at2x` attribute:
+
+```html
+<img src="/images/image.jpg" data-at2x="/images/[e-mail]" />
+```
+
 ## On the server
@@ -94,6 +114,8 @@ Applications supporting Retina displays should include two separate files for
 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
+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 please ensure, that all images accessed through ```ng-src``` can be loaded
 from the same domain as the main HTML file.
@@ -106,8 +128,7 @@
 + 0.3.0 - added ```setInfix``` to configure the used infix for Retina images.
++ 0.3.1 - added a noretina attribute support to conditionally disable the "retinification" for an element.
 
 ## License
-Copyright (c) 2014 Jacob Rief
-Licensed under the MIT license.
+&copy; 2015 Jacob Rief
 
-[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/jrief/angular-retina/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
-
+MIT licensed.

New alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed 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

Improved metrics

Number of lines in readme file

128

increased by19.63%

Worsened metrics

Total package byte prevSize

8797

decreased by-6.06%

Dev dependency count

16

increased by60%

Number of package files

3

decreased by-25%

Lines of code

0

decreased by-100%

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes