Merge branch 'Dhaulagiri-ember-cli-1.13'

.npmignore

@@ -10,5 +10,5 @@ dist/
 .npmignore
 **/.gitkeep
 bower.json
-Brocfile.js
+ember-cli-build.js
 testem.json

README.md

@@ -17,11 +17,10 @@ As with any other ember addon, you simply need to run the install command:
 ember install ember-sprite
 ```
 
-In Ember CLI versions < 0.2.3, the install command should be:
-
-```sh
-ember install:addon ember-sprite
-```
+If you are still using Ember CLI < `v1.0`,
+please upgrade to the latest version.
+Check this package's version of `ember-cli` under `devDependencies`
+for the best compatibility.
 
 That is all!
 
@@ -36,7 +35,7 @@ The only thing that you need to do in addition is:
 - Add an array of sprite options for `broccoli-sprite` under `sprite` when instantiating `EmberApp`:
 
 For example, if the images you would like to be sprited are in `public/images/sprites`,
-you can configure your app, in `Brocfile.js`, like so:
+you can configure your app, in `ember-cli-build.js`, like so:
 
 ```javascript
 var app = new EmberApp({
@@ -65,7 +64,9 @@ var app = new EmberApp({
 });
 ```
 
-## Full example
+## Examples
+
+## From scratch
 
 ```bash
 # New ember-cli application
@@ -84,14 +85,31 @@ echo '<div class="icon-iojs"></div>' >> app/templates/application.hbs
 echo '<div class="icon-js"></div>' >> app/templates/application.hbs
 
 # modify `EmberApp` to add the sprite configuration shown above
-$EDITOR Brocfile.js
+$EDITOR ember-cli-build.js
 
 # run the application
 ember server
 $BROWSER http://localhost:4200
 # check that sprited images appear
 ```
 
+### From bundled demo page
+
+Alternatively, you can clone this repository and run `ember server` to see a
+sample application that generates both retina and non-retina sprites.
+
+```bash
+cd tests/dummy
+ember server
+```
+
+## Road map
+
+- [x] Remove need to link additional stylesheet from `index.html`
+  - by concatenating the sprite sheet's CSS with the main app's CSS
+- [ ] Rerun upon file changes which trigger livereload
+
+
 ## Contributors
 
 Maintained by [Brendan Graetz](http://github.com/bguiz)

bower.json

@@ -1,16 +1,15 @@
 {
   "name": "ember-sprite",
   "dependencies": {
-    "ember": "1.12.0",
+    "ember": "1.13.3",
     "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
     "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
-    "ember-data": "1.0.0-beta.18",
-    "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.4",
-    "ember-qunit": "0.3.3",
+    "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5",
+    "ember-qunit": "0.4.1",
     "ember-qunit-notifications": "0.0.7",
-    "ember-resolver": "~0.1.15",
+    "ember-resolver": "~0.1.18",
     "jquery": "^1.11.1",
     "loader.js": "ember-cli/loader.js#3.2.0",
     "qunit": "~1.17.1"
   }
-}
+}

ember-cli-build.js

@@ -0,0 +1,58 @@
+/* global require, module */
+var EmberApp = require('ember-cli/lib/broccoli/ember-addon');
+
+module.exports = function(defaults) {
+  // Temporary location due to https://github.com/ember-cli/ember-cli/issues/4434
+  // Can be moved inside EmberApp() with ember-cli 1.13.2
+  defaults.sprite = [
+    {
+      src: [
+        'images/sprite/1x/**/*.png'
+      ],
+      compositor: 'gm',
+      spritePath: 'assets/sprite.png',
+      stylesheetPath: 'assets/sprite.css',
+      stylesheet: 'tests/dummy/app/styles/sprite.tpl',
+      stylesheetOptions: {
+        prefix: 'icon.icon-',
+        spritePath: '/assets/sprite.png',
+        pixelRatio: 1
+      },
+      layoutOptions: {
+        padding: 0
+      },
+      layout: 'horizontal'
+    },
+    {
+      src: [
+        'images/sprite/2x/**/*.png'
+      ],
+      compositor: 'gm',
+      spritePath: 'assets/sprite-2x.png',
+      stylesheetPath: 'assets/sprite-2x.css',
+      stylesheet: 'tests/dummy/app/styles/sprite-2x.tpl',
+      stylesheetOptions: {
+        prefix: 'icon.icon-',
+        spritePath: '/assets/sprite-2x.png',
+        pixelRatio: 2
+      },
+      layoutOptions: {
+        padding: 0
+      },
+      layout: 'horizontal'
+    }
+  ];
+
+  var app = new EmberApp(defaults, {
+    // Add options here
+  });
+
+  /*
+    This build file specifes the options for the dummy test app of this
+    addon, located in `/tests/dummy`
+    This build file does *not* influence how the addon or the app using it
+    behave. You most likely want to be modifying `./index.js` or app's build file
+  */
+
+  return app.toTree();
+};

package.json

@@ -22,14 +22,16 @@
   },
   "devDependencies": {
     "broccoli-asset-rev": "^2.0.2",
-    "ember-cli": "0.2.7",
-    "ember-cli-app-version": "0.3.3",
+    "ember-cli": "1.13.1",
+    "ember-cli-app-version": "0.4.0",
     "ember-cli-content-security-policy": "0.4.0",
     "ember-cli-dependency-checker": "^1.0.0",
-    "ember-cli-htmlbars": "0.7.6",
-    "ember-cli-ic-ajax": "0.1.1",
+    "ember-cli-htmlbars": "0.7.9",
+    "ember-cli-htmlbars-inline-precompile": "^0.1.1",
+    "ember-cli-ic-ajax": "0.2.1",
     "ember-cli-inject-live-reload": "^1.3.0",
-    "ember-cli-qunit": "0.3.13",
+    "ember-cli-qunit": "0.3.15",
+    "ember-cli-release": "0.2.3",
     "ember-cli-uglify": "^1.0.1",
     "ember-disable-proxy-controllers": "^1.0.0",
     "ember-export-application-global": "^1.0.2",

tests/.jshintrc

@@ -26,7 +26,7 @@
   "node": false,
   "browser": false,
   "boss": true,
-  "curly": false,
+  "curly": true,
   "debug": false,
   "devel": false,
   "eqeqeq": true,
@@ -47,5 +47,6 @@
   "strict": false,
   "white": false,
   "eqnull": true,
-  "esnext": true
+  "esnext": true,
+  "unused": true
 }

tests/dummy/app/styles/sprite-2x.tpl

@@ -0,0 +1,16 @@
+/*
+  This file tells node-sprite-generator that for our retina icons we want to
+  ovveride an icon's background image to use the retina sprite and use the
+  correct background size from that sprite
+*/
+
+@media (min--moz-device-pixel-ratio: 2),
+     (-o-min-device-pixel-ratio: 2/1),
+     (-webkit-min-device-pixel-ratio: 2),
+     (min-device-pixel-ratio: 2)
+{
+  .icon {
+    background: url('/assets/sprite-2x.png') no-repeat;
+    background-size: <%= getCSSValue(layout.width) %> <%= getCSSValue(layout.height) %>;
+  }
+}

tests/dummy/app/styles/sprite.tpl

@@ -0,0 +1,20 @@
+/*
+  This file tells node-sprite-generator that it should add css rules for each
+  icon we are generating for our non-retina sprite.  We can override the
+  background image for retina sprites in the sprite-2x.tpl file.
+*/
+
+.icon {
+  background: url('<%= options.spritePath %>') no-repeat;
+  background-size: <%= getCSSValue(layout.width) %> <%= getCSSValue(layout.height) %>;
+  display: inline-block;
+}
+
+<% layout.images.forEach(function (image) { %>
+  .<%= image.className %>
+  {
+    background-position: <%= getCSSValue(-image.x) %> <%= getCSSValue(-image.y) %>;
+    width: <%= getCSSValue(image.width) %>;
+    height: <%= getCSSValue(image.height) %>;
+  }
+<% }); %>

tests/dummy/app/templates/application.hbs

@@ -1,3 +1,9 @@
-<h2 id="title">Welcome to Ember.js</h2>
+<h2 id="title">Welcome to Ember Sprite</h2>
 
-{{outlet}}
+<p>
+  The icons below will load from either a 1x or 2x sprite depending on your screen resolution (check with your dev tools to verify):
+</p>
+
+<div class="icon icon-star-plus"></div>
+<div class="icon icon-star-1"></div>
+<div class="icon icon-star"></div>

tests/helpers/start-app.js

@@ -1,6 +1,5 @@
 import Ember from 'ember';
 import Application from '../../app';
-import Router from '../../router';
 import config from '../../config/environment';
 
 export default function startApp(attrs) {