├── app └── .gitkeep ├── addon └── .gitkeep ├── vendor └── .gitkeep ├── tests ├── unit │ └── .gitkeep ├── dummy │ ├── public │ │ ├── .gitkeep │ │ ├── robots.txt │ │ ├── images │ │ │ └── sprite │ │ │ │ ├── 1x │ │ │ │ ├── star.png │ │ │ │ ├── star-1.png │ │ │ │ └── star-plus.png │ │ │ │ └── 2x │ │ │ │ ├── star.png │ │ │ │ ├── star-1.png │ │ │ │ └── star-plus.png │ │ └── crossdomain.xml │ ├── app │ │ ├── helpers │ │ │ └── .gitkeep │ │ ├── models │ │ │ └── .gitkeep │ │ ├── routes │ │ │ └── .gitkeep │ │ ├── styles │ │ │ ├── .gitkeep │ │ │ ├── app.css │ │ │ ├── sprite-2x.tpl │ │ │ └── sprite.tpl │ │ ├── views │ │ │ └── .gitkeep │ │ ├── components │ │ │ └── .gitkeep │ │ ├── controllers │ │ │ └── .gitkeep │ │ ├── templates │ │ │ ├── .gitkeep │ │ │ ├── components │ │ │ │ └── .gitkeep │ │ │ └── application.hbs │ │ ├── resolver.js │ │ ├── router.js │ │ ├── app.js │ │ └── index.html │ ├── config │ │ ├── targets.js │ │ └── environment.js │ └── .jshintrc ├── .eslintrc.js ├── helpers │ ├── destroy-app.js │ ├── resolver.js │ ├── start-app.js │ └── module-for-acceptance.js ├── test-helper.js └── index.html ├── .watchmanconfig ├── config ├── environment.js └── ember-try.js ├── .eslintrc.js ├── .ember-cli ├── .npmignore ├── .gitignore ├── .editorconfig ├── testem.js ├── .travis.yml ├── ember-cli-build.js ├── package.json ├── index.js └── README.md /app/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /addon/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vendor/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/unit/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/public/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/helpers/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/models/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/routes/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/styles/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/views/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/components/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/controllers/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/components/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | { 2 | "ignore_dirs": ["tmp", "dist"] 3 | } 4 | -------------------------------------------------------------------------------- /tests/dummy/app/styles/app.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 20px; 3 | } 4 | -------------------------------------------------------------------------------- /tests/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | embertest: true 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /tests/dummy/public/robots.txt: -------------------------------------------------------------------------------- 1 | # http://www.robotstxt.org 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /tests/dummy/app/resolver.js: -------------------------------------------------------------------------------- 1 | import Resolver from 'ember-resolver'; 2 | 3 | export default Resolver; 4 | -------------------------------------------------------------------------------- /tests/dummy/public/images/sprite/1x/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bguiz/ember-sprite/HEAD/tests/dummy/public/images/sprite/1x/star.png -------------------------------------------------------------------------------- /tests/dummy/public/images/sprite/2x/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bguiz/ember-sprite/HEAD/tests/dummy/public/images/sprite/2x/star.png -------------------------------------------------------------------------------- /tests/dummy/public/images/sprite/1x/star-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bguiz/ember-sprite/HEAD/tests/dummy/public/images/sprite/1x/star-1.png -------------------------------------------------------------------------------- /tests/dummy/public/images/sprite/2x/star-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bguiz/ember-sprite/HEAD/tests/dummy/public/images/sprite/2x/star-1.png -------------------------------------------------------------------------------- /tests/dummy/public/images/sprite/1x/star-plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bguiz/ember-sprite/HEAD/tests/dummy/public/images/sprite/1x/star-plus.png -------------------------------------------------------------------------------- /tests/dummy/public/images/sprite/2x/star-plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bguiz/ember-sprite/HEAD/tests/dummy/public/images/sprite/2x/star-plus.png -------------------------------------------------------------------------------- /config/environment.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | 'use strict'; 3 | 4 | module.exports = function(/* environment, appConfig */) { 5 | return { }; 6 | }; 7 | -------------------------------------------------------------------------------- /tests/helpers/destroy-app.js: -------------------------------------------------------------------------------- 1 | import { run } from '@ember/runloop'; 2 | 3 | export default function destroyApp(application) { 4 | run(application, 'destroy'); 5 | } 6 | -------------------------------------------------------------------------------- /tests/test-helper.js: -------------------------------------------------------------------------------- 1 | import resolver from './helpers/resolver'; 2 | import { 3 | setResolver 4 | } from 'ember-qunit'; 5 | import { start } from 'ember-cli-qunit'; 6 | 7 | setResolver(resolver); 8 | start(); 9 | -------------------------------------------------------------------------------- /tests/dummy/config/targets.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | module.exports = { 3 | browsers: [ 4 | 'ie 9', 5 | 'last 1 Chrome versions', 6 | 'last 1 Firefox versions', 7 | 'last 1 Safari versions' 8 | ] 9 | }; 10 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | ecmaVersion: 2017, 5 | sourceType: 'module' 6 | }, 7 | extends: 'eslint:recommended', 8 | env: { 9 | browser: true 10 | }, 11 | rules: { 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /tests/dummy/app/router.js: -------------------------------------------------------------------------------- 1 | import EmberRouter from '@ember/routing/router'; 2 | import config from './config/environment'; 3 | 4 | const Router = EmberRouter.extend({ 5 | location: config.locationType, 6 | rootURL: config.rootURL 7 | }); 8 | 9 | Router.map(function() { 10 | }); 11 | 12 | export default Router; 13 | -------------------------------------------------------------------------------- /.ember-cli: -------------------------------------------------------------------------------- 1 | { 2 | /** 3 | Ember CLI sends analytics information by default. The data is completely 4 | anonymous, but there are times when you might want to disable this behavior. 5 | 6 | Setting `disableAnalytics` to true will prevent any data from being sent. 7 | */ 8 | "disableAnalytics": false 9 | } 10 | -------------------------------------------------------------------------------- /tests/helpers/resolver.js: -------------------------------------------------------------------------------- 1 | import Resolver from '../../resolver'; 2 | import config from '../../config/environment'; 3 | 4 | const resolver = Resolver.create(); 5 | 6 | resolver.namespace = { 7 | modulePrefix: config.modulePrefix, 8 | podModulePrefix: config.podModulePrefix 9 | }; 10 | 11 | export default resolver; 12 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /bower_components 2 | /config/ember-try.js 3 | /dist 4 | /tests 5 | /tmp 6 | **/.gitkeep 7 | .bowerrc 8 | .editorconfig 9 | .ember-cli 10 | .gitignore 11 | .eslintrc.js 12 | .watchmanconfig 13 | .travis.yml 14 | bower.json 15 | ember-cli-build.js 16 | <<<<<<< HEAD 17 | testem.json 18 | ======= 19 | testem.js 20 | >>>>>>> cc8a839... message 21 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/application.hbs: -------------------------------------------------------------------------------- 1 |

Welcome to Ember Sprite

2 | 3 |

4 | The icons below will load from either a 1x or 2x sprite depending on your screen resolution (check with your dev tools to verify): 5 |

6 | 7 |
8 |
9 |
10 | -------------------------------------------------------------------------------- /tests/dummy/app/app.js: -------------------------------------------------------------------------------- 1 | import Application from '@ember/application'; 2 | import Resolver from './resolver'; 3 | import loadInitializers from 'ember-load-initializers'; 4 | import config from './config/environment'; 5 | 6 | const App = Application.extend({ 7 | modulePrefix: config.modulePrefix, 8 | podModulePrefix: config.podModulePrefix, 9 | Resolver 10 | }); 11 | 12 | loadInitializers(App, config.modulePrefix); 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | 7 | # dependencies 8 | /node_modules 9 | /bower_components 10 | 11 | # misc 12 | /.sass-cache 13 | /connect.lock 14 | /coverage/* 15 | /libpeerconnection.log 16 | npm-debug.log* 17 | yarn-error.log 18 | testem.log 19 | 20 | # ember-try 21 | .node_modules.ember-try/ 22 | bower.json.ember-try 23 | package.json.ember-try 24 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | end_of_line = lf 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | insert_final_newline = true 13 | indent_style = space 14 | indent_size = 2 15 | 16 | [*.hbs] 17 | insert_final_newline = false 18 | 19 | [*.{diff,md}] 20 | trim_trailing_whitespace = false 21 | -------------------------------------------------------------------------------- /testem.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | module.exports = { 3 | test_page: 'tests/index.html?hidepassed', 4 | disable_watching: true, 5 | launch_in_ci: [ 6 | 'Chrome' 7 | ], 8 | launch_in_dev: [ 9 | 'Chrome' 10 | ], 11 | browser_args: { 12 | Chrome: { 13 | mode: 'ci', 14 | args: [ 15 | '--disable-gpu', 16 | '--headless', 17 | '--remote-debugging-port=9222', 18 | '--window-size=1440,900' 19 | ] 20 | }, 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /tests/helpers/start-app.js: -------------------------------------------------------------------------------- 1 | import Application from '../../app'; 2 | import config from '../../config/environment'; 3 | import { merge } from '@ember/polyfills'; 4 | import { run } from '@ember/runloop'; 5 | 6 | export default function startApp(attrs) { 7 | let attributes = merge({}, config.APP); 8 | attributes = merge(attributes, attrs); // use defaults, but you can override; 9 | 10 | return run(() => { 11 | let application = Application.create(attributes); 12 | application.setupForTesting(); 13 | application.injectTestHelpers(); 14 | return application; 15 | }); 16 | } 17 | -------------------------------------------------------------------------------- /tests/dummy/app/styles/sprite-2x.tpl: -------------------------------------------------------------------------------- 1 | /* 2 | This file tells node-sprite-generator that for our retina icons we want to 3 | ovveride an icon's background image to use the retina sprite and use the 4 | correct background size from that sprite 5 | */ 6 | 7 | @media (min--moz-device-pixel-ratio: 2), 8 | (-o-min-device-pixel-ratio: 2/1), 9 | (-webkit-min-device-pixel-ratio: 2), 10 | (min-device-pixel-ratio: 2) 11 | { 12 | .icon { 13 | background: url('/assets/sprite-2x.png') no-repeat; 14 | background-size: <%= getCSSValue(layout.width) %> <%= getCSSValue(layout.height) %>; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /tests/dummy/public/crossdomain.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | 16 | -------------------------------------------------------------------------------- /tests/dummy/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "predef": { 3 | "document": true, 4 | "window": true, 5 | "-Promise": true 6 | }, 7 | "browser" : true, 8 | "boss" : true, 9 | "curly": true, 10 | "debug": false, 11 | "devel": true, 12 | "eqeqeq": true, 13 | "evil": true, 14 | "forin": false, 15 | "immed": false, 16 | "laxbreak": false, 17 | "newcap": true, 18 | "noarg": true, 19 | "noempty": false, 20 | "nonew": false, 21 | "nomen": false, 22 | "onevar": false, 23 | "plusplus": false, 24 | "regexp": false, 25 | "undef": true, 26 | "sub": true, 27 | "strict": false, 28 | "white": false, 29 | "eqnull": true, 30 | "esnext": true, 31 | "unused": true 32 | } 33 | -------------------------------------------------------------------------------- /tests/helpers/module-for-acceptance.js: -------------------------------------------------------------------------------- 1 | import { module } from 'qunit'; 2 | import { resolve } from 'rsvp'; 3 | import startApp from '../helpers/start-app'; 4 | import destroyApp from '../helpers/destroy-app'; 5 | 6 | export default function(name, options = {}) { 7 | module(name, { 8 | beforeEach() { 9 | this.application = startApp(); 10 | 11 | if (options.beforeEach) { 12 | return options.beforeEach.apply(this, arguments); 13 | } 14 | }, 15 | 16 | afterEach() { 17 | let afterEach = options.afterEach && options.afterEach.apply(this, arguments); 18 | return resolve(afterEach).then(() => destroyApp(this.application)); 19 | } 20 | }); 21 | } 22 | -------------------------------------------------------------------------------- /tests/dummy/app/styles/sprite.tpl: -------------------------------------------------------------------------------- 1 | /* 2 | This file tells node-sprite-generator that it should add css rules for each 3 | icon we are generating for our non-retina sprite. We can override the 4 | background image for retina sprites in the sprite-2x.tpl file. 5 | */ 6 | 7 | .icon { 8 | background: url('<%= options.spritePath %>') no-repeat; 9 | background-size: <%= getCSSValue(layout.width) %> <%= getCSSValue(layout.height) %>; 10 | display: inline-block; 11 | } 12 | 13 | <% layout.images.forEach(function (image) { %> 14 | .<%= image.className %> 15 | { 16 | background-position: <%= getCSSValue(-image.x) %> <%= getCSSValue(-image.y) %>; 17 | width: <%= getCSSValue(image.width) %>; 18 | height: <%= getCSSValue(image.height) %>; 19 | } 20 | <% }); %> 21 | -------------------------------------------------------------------------------- /tests/dummy/app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dummy 7 | 8 | 9 | 10 | {{content-for "head"}} 11 | 12 | 13 | 14 | 15 | {{content-for "head-footer"}} 16 | 17 | 18 | {{content-for "body"}} 19 | 20 | 21 | 22 | 23 | {{content-for "body-footer"}} 24 | 25 | 26 | -------------------------------------------------------------------------------- /tests/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dummy Tests 7 | 8 | 9 | 10 | {{content-for "head"}} 11 | {{content-for "test-head"}} 12 | 13 | 14 | 15 | 16 | 17 | {{content-for "head-footer"}} 18 | {{content-for "test-head-footer"}} 19 | 20 | 21 | {{content-for "body"}} 22 | {{content-for "test-body"}} 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | {{content-for "body-footer"}} 31 | {{content-for "test-body-footer"}} 32 | 33 | 34 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | --- 2 | language: node_js 3 | node_js: 4 | # we recommend testing addons with the same minimum supported node version as Ember CLI 5 | # so that your addon works for all apps 6 | - "4" 7 | 8 | sudo: false 9 | dist: trusty 10 | 11 | addons: 12 | chrome: stable 13 | 14 | cache: 15 | directories: 16 | - $HOME/.npm 17 | 18 | env: 19 | global: 20 | # See https://git.io/vdao3 for details. 21 | - JOBS=1 22 | matrix: 23 | # we recommend new addons test the current and previous LTS 24 | # as well as latest stable release (bonus points to beta/canary) 25 | - EMBER_TRY_SCENARIO=ember-lts-2.8 26 | - EMBER_TRY_SCENARIO=ember-lts-2.12 27 | - EMBER_TRY_SCENARIO=ember-release 28 | - EMBER_TRY_SCENARIO=ember-beta 29 | - EMBER_TRY_SCENARIO=ember-canary 30 | - EMBER_TRY_SCENARIO=ember-default 31 | 32 | matrix: 33 | fast_finish: true 34 | allow_failures: 35 | - env: EMBER_TRY_SCENARIO=ember-canary 36 | 37 | before_install: 38 | - npm config set spin false 39 | - npm install -g npm@4 40 | - npm --version 41 | 42 | script: 43 | # Usually, it's ok to finish the test scenario without reverting 44 | # to the addon's original dependency state, skipping "cleanup". 45 | - node_modules/.bin/ember try:one $EMBER_TRY_SCENARIO --skip-cleanup 46 | -------------------------------------------------------------------------------- /tests/dummy/config/environment.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | 'use strict'; 3 | 4 | module.exports = function(environment) { 5 | let ENV = { 6 | modulePrefix: 'dummy', 7 | environment, 8 | rootURL: '/', 9 | locationType: 'auto', 10 | EmberENV: { 11 | FEATURES: { 12 | // Here you can enable experimental features on an ember canary build 13 | // e.g. 'with-controller': true 14 | }, 15 | EXTEND_PROTOTYPES: { 16 | // Prevent Ember Data from overriding Date.parse. 17 | Date: false 18 | } 19 | }, 20 | 21 | APP: { 22 | // Here you can pass flags/options to your application instance 23 | // when it is created 24 | } 25 | }; 26 | 27 | if (environment === 'development') { 28 | // ENV.APP.LOG_RESOLVER = true; 29 | // ENV.APP.LOG_ACTIVE_GENERATION = true; 30 | // ENV.APP.LOG_TRANSITIONS = true; 31 | // ENV.APP.LOG_TRANSITIONS_INTERNAL = true; 32 | // ENV.APP.LOG_VIEW_LOOKUPS = true; 33 | } 34 | 35 | if (environment === 'test') { 36 | // Testem prefers this... 37 | ENV.locationType = 'none'; 38 | 39 | // keep test console output quieter 40 | ENV.APP.LOG_ACTIVE_GENERATION = false; 41 | ENV.APP.LOG_VIEW_LOOKUPS = false; 42 | 43 | ENV.APP.rootElement = '#ember-testing'; 44 | } 45 | 46 | if (environment === 'production') { 47 | // here you can enable a production-specific feature 48 | } 49 | 50 | return ENV; 51 | }; 52 | -------------------------------------------------------------------------------- /ember-cli-build.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | 'use strict'; 3 | const EmberAddon = require('ember-cli/lib/broccoli/ember-addon'); 4 | 5 | module.exports = function(defaults) { 6 | let app = new EmberAddon(defaults, { 7 | sprite: [ 8 | { 9 | src: [ 10 | 'images/sprite/1x/**/*.png' 11 | ], 12 | compositor: 'gm', 13 | spritePath: 'assets/sprite.png', 14 | stylesheetPath: 'assets/sprite.css', 15 | stylesheet: 'tests/dummy/app/styles/sprite.tpl', 16 | stylesheetOptions: { 17 | prefix: 'icon.icon-', 18 | spritePath: '/assets/sprite.png', 19 | pixelRatio: 1 20 | }, 21 | layoutOptions: { 22 | padding: 0 23 | }, 24 | layout: 'horizontal' 25 | }, 26 | { 27 | src: [ 28 | 'images/sprite/2x/**/*.png' 29 | ], 30 | compositor: 'gm', 31 | spritePath: 'assets/sprite-2x.png', 32 | stylesheetPath: 'assets/sprite-2x.css', 33 | stylesheet: 'tests/dummy/app/styles/sprite-2x.tpl', 34 | stylesheetOptions: { 35 | prefix: 'icon.icon-', 36 | spritePath: '/assets/sprite-2x.png', 37 | pixelRatio: 2 38 | }, 39 | layoutOptions: { 40 | padding: 0 41 | }, 42 | layout: 'horizontal' 43 | } 44 | ] 45 | }); 46 | 47 | /* 48 | This build file specifies the options for the dummy test app of this 49 | addon, located in `/tests/dummy` 50 | This build file does *not* influence how the addon or the app using it 51 | behave. You most likely want to be modifying `./index.js` or app's build file 52 | */ 53 | 54 | return app.toTree(); 55 | }; 56 | -------------------------------------------------------------------------------- /config/ember-try.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | module.exports = { 3 | scenarios: [ 4 | { 5 | name: 'ember-lts-2.8', 6 | bower: { 7 | dependencies: { 8 | 'ember': 'components/ember#lts-2-8' 9 | }, 10 | resolutions: { 11 | 'ember': 'lts-2-8' 12 | } 13 | }, 14 | npm: { 15 | devDependencies: { 16 | 'ember-source': null 17 | } 18 | } 19 | }, 20 | { 21 | name: 'ember-lts-2.12', 22 | npm: { 23 | devDependencies: { 24 | 'ember-source': '~2.12.0' 25 | } 26 | } 27 | }, 28 | { 29 | name: 'ember-release', 30 | bower: { 31 | dependencies: { 32 | 'ember': 'components/ember#release' 33 | }, 34 | resolutions: { 35 | 'ember': 'release' 36 | } 37 | }, 38 | npm: { 39 | devDependencies: { 40 | 'ember-source': null 41 | } 42 | } 43 | }, 44 | { 45 | name: 'ember-beta', 46 | bower: { 47 | dependencies: { 48 | 'ember': 'components/ember#beta' 49 | }, 50 | resolutions: { 51 | 'ember': 'beta' 52 | } 53 | }, 54 | npm: { 55 | devDependencies: { 56 | 'ember-source': null 57 | } 58 | } 59 | }, 60 | { 61 | name: 'ember-canary', 62 | bower: { 63 | dependencies: { 64 | 'ember': 'components/ember#canary' 65 | }, 66 | resolutions: { 67 | 'ember': 'canary' 68 | } 69 | }, 70 | npm: { 71 | devDependencies: { 72 | 'ember-source': null 73 | } 74 | } 75 | }, 76 | { 77 | name: 'ember-default', 78 | npm: { 79 | devDependencies: {} 80 | } 81 | } 82 | ] 83 | }; 84 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ember-sprite", 3 | "version": "0.9.0", 4 | "description": "An ember addon which generates sprite sheets", 5 | "keywords": [ 6 | "ember-addon", 7 | "ember-cli", 8 | "ember", 9 | "image", 10 | "css", 11 | "sprite", 12 | "spritesheet", 13 | "optimise" 14 | ], 15 | "license": { 16 | "type": "GPL-3.0", 17 | "url": "http://opensource.org/licenses/GPL-3.0" 18 | }, 19 | "author": "bguiz", 20 | "directories": { 21 | "doc": "doc", 22 | "test": "tests" 23 | }, 24 | "repository": "https://github.com/bguiz/ember-sprite", 25 | "scripts": { 26 | "start": "ember server", 27 | "build": "ember build", 28 | "test": "ember try:each" 29 | }, 30 | "dependencies": { 31 | "broccoli-concat": "^2.0.4", 32 | "broccoli-merge-trees": "^1.1.1", 33 | "broccoli-sprite": "^0.3.0", 34 | "ember-cli-babel": "^6.6.0", 35 | "broccoli-funnel": "^1.2.0" 36 | }, 37 | "devDependencies": { 38 | "broccoli-asset-rev": "^2.4.5", 39 | "ember-cli": "~2.16.2", 40 | "ember-cli-dependency-checker": "^2.0.0", 41 | "ember-cli-eslint": "^4.0.0", 42 | "ember-cli-htmlbars": "^2.0.1", 43 | "ember-cli-htmlbars-inline-precompile": "^1.0.0", 44 | "ember-cli-inject-live-reload": "^1.4.1", 45 | "ember-cli-qunit": "^4.0.0", 46 | "ember-cli-shims": "^1.1.0", 47 | "ember-cli-uglify": "^2.0.0", 48 | "ember-disable-prototype-extensions": "^1.1.2", 49 | "ember-export-application-global": "^2.0.0", 50 | "ember-load-initializers": "^1.0.0", 51 | "ember-resolver": "^4.0.0", 52 | "ember-source": "~2.16.0", 53 | "loader.js": "^4.2.3" 54 | }, 55 | "engines": { 56 | "node": "^4.5 || 6.* || >= 7.*" 57 | }, 58 | "ember-addon": { 59 | "configPath": "tests/dummy/config", 60 | "before": "broccoli-asset-rev" 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | 'use strict'; 3 | 4 | const Funnel = require('broccoli-funnel'); 5 | const brocMergeTrees = require('broccoli-merge-trees'); 6 | const concat = require('broccoli-concat'); 7 | const brocSprite = require('broccoli-sprite'); 8 | const util = require('util'); 9 | 10 | module.exports = { 11 | name: 'ember-sprite', 12 | treeFor: treeFor, 13 | postprocessTree: postprocessTree, 14 | _processSprite: _processSprite, 15 | }; 16 | 17 | function treeFor( /*inTree*/ ) {} 18 | 19 | function getAppCSSOutputPath(options) { 20 | let appCssOutputPath = options.outputPaths.app.css.app; 21 | 22 | if(appCssOutputPath[0] === '/' ){ 23 | appCssOutputPath = appCssOutputPath.substr(1); 24 | } 25 | 26 | return appCssOutputPath; 27 | } 28 | 29 | function postprocessTree(type, workingTree) { 30 | if (type === 'all' && this.app.options.sprite) { 31 | let self = this; 32 | // retrieves the app CSS output path 33 | const appCssOutputPath = getAppCSSOutputPath(this.app.options); 34 | 35 | // for backwards compatibility to previous implementation that 36 | // passed plain object into sprite, 37 | // we push that object into an array we can iterate through to 38 | // process the sprite(s) 39 | if (Object.prototype.toString.call(this.app.options.sprite) === 40 | '[object Object]') { 41 | 42 | let tmp = this.app.options.sprite; 43 | this.app.options.sprite = []; 44 | this.app.options.sprite.push(tmp); 45 | } 46 | // process each of the sprites that was passed in 47 | this.app.options.sprite.forEach(function eachSprite(sprite) { 48 | workingTree = self._processSprite(sprite, workingTree, appCssOutputPath); 49 | }); 50 | } 51 | 52 | return workingTree; 53 | } 54 | 55 | function _processSprite(sprite, workingTree, appCssOutputPath) { 56 | let spriteTree = new Funnel(workingTree, { 57 | srcDir: '/', 58 | destDir: '/', 59 | include: [ 60 | ...sprite.src 61 | ], 62 | }); 63 | 64 | if (!!sprite.debug) { 65 | console.log('spriteTree', util.inspect(workingTree, false, 6, true)); 66 | } 67 | 68 | spriteTree = brocSprite(spriteTree, sprite); 69 | 70 | workingTree = brocMergeTrees([ 71 | workingTree, 72 | spriteTree 73 | ]); 74 | 75 | //sprites.css is appended to app.css, 76 | //so that two separate styles sheets do not need to get linked from index.html 77 | 78 | let spriteCssFile = sprite.stylesheetPath; 79 | 80 | let treeConcatCss = concat(workingTree, { 81 | inputFiles: [ 82 | appCssOutputPath, 83 | spriteCssFile 84 | ], 85 | outputFile: "/" + appCssOutputPath 86 | }); 87 | 88 | workingTree = brocMergeTrees([ 89 | workingTree, 90 | treeConcatCss 91 | ], { 92 | overwrite: true, 93 | }); 94 | 95 | if (sprite.removeSrcFiles) { 96 | workingTree = new Funnel(workingTree, { 97 | exclude: [ 98 | spriteCssFile, 99 | ...sprite.src 100 | ] 101 | }); 102 | } 103 | 104 | 105 | return workingTree; 106 | } 107 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ember-sprite 2 | 3 | This is an ember addon, that generates a sprite sheet from a folder of images. 4 | A sprite sheet consists of a single CSS file and a single image file. 5 | 6 | It uses [broccoli-sprite](https://github.com/bguiz/broccoli-sprite) to do so, 7 | and you can read more details there. 8 | 9 | This module's purpose is to allow you to use broccoli-sprite within an 10 | [ember-cli](http://www.ember-cli.com/) application. 11 | 12 | ## Usage 13 | 14 | As with any other ember addon, you simply need to run the install command: 15 | 16 | ```sh 17 | ember install ember-sprite 18 | ``` 19 | 20 | If you are still using Ember CLI < `v1.0`, 21 | please upgrade to the latest version. 22 | Check this package's version of `ember-cli` under `devDependencies` 23 | for the best compatibility. 24 | 25 | That is all! 26 | 27 | ## Configuration 28 | 29 | All the configuration options are pretty much the same as those in 30 | [broccoli-sprite](https://github.com/bguiz/broccoli-sprite). 31 | There is an extra option `removeSrcFiles` which tells addon to remove 32 | source images after the sprite is finished. 33 | 34 | The only thing that you need to do in addition is: 35 | 36 | - Put your images in the `public` folder (or a subfolder of `public`) 37 | - Add an array of sprite options for `broccoli-sprite` under `sprite` when instantiating `EmberApp`: 38 | 39 | For example, if the images you would like to be sprited are in `public/images/sprites`, 40 | you can configure your app, in `ember-cli-build.js`, like so: 41 | 42 | ```javascript 43 | var app = new EmberApp({ 44 | /* other options */ 45 | sprite: [ 46 | { 47 | debug: true, 48 | src: [ 49 | 'images/sprites/**/*.png' 50 | ], 51 | removeSrcFiles: true, 52 | spritePath: 'assets/sprites.png', 53 | stylesheetPath: 'assets/sprites.css', 54 | stylesheet: 'css', 55 | stylesheetOptions: { 56 | prefix: 'icon-', 57 | spritePath: '/assets/sprites.png', 58 | pixelRatio: 2, 59 | }, 60 | layoutOptions: { 61 | padding: 2, 62 | }, 63 | optiping: (process.env.NODE_ENV === 'production'), 64 | } 65 | // optional: more sprite sheet configurations 66 | // , { ... } 67 | ] 68 | }); 69 | ``` 70 | 71 | ## Examples 72 | 73 | ## From scratch 74 | 75 | ```bash 76 | # New ember-cli application 77 | ember new ember-sprite-demo 78 | ember install ember-sprite 79 | 80 | # download images for spriting 81 | mkdir -p public/images/sprites 82 | curl https://upload.wikimedia.org/wikipedia/en/6/69/Ember.js_Logo_and_Mascot.png > public/images/sprites/emberjs.png 83 | curl https://iojs.org/images/1.0.0.png > public/images/sprites/iojs.png 84 | curl https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png > public/images/sprites/js.png 85 | 86 | # add images to main template 87 | echo '
' >> app/templates/application.hbs 88 | echo '
' >> app/templates/application.hbs 89 | echo '
' >> app/templates/application.hbs 90 | 91 | # modify `EmberApp` to add the sprite configuration shown above 92 | $EDITOR ember-cli-build.js 93 | 94 | # run the application 95 | ember server 96 | $BROWSER http://localhost:4200 97 | # check that sprited images appear 98 | ``` 99 | 100 | ### From bundled demo page 101 | 102 | Alternatively, you can clone this repository and run `ember server` to see a 103 | sample application that generates both retina and non-retina sprites. 104 | 105 | ```bash 106 | cd tests/dummy 107 | ember server 108 | ``` 109 | 110 | ## Road map 111 | 112 | - [x] Remove need to link additional stylesheet from `index.html` 113 | - by concatenating the sprite sheet's CSS with the main app's CSS 114 | - [ ] Rerun upon file changes which trigger livereload 115 | 116 | 117 | ## Contributors 118 | 119 | Maintained by [Brendan Graetz](http://github.com/bguiz) 120 | 121 | Additional contributions from: 122 | 123 | - [Dhaulagiri](https://github.com/Dhaulagiri) 124 | - [jmonster](https://github.com/jmonster) 125 | 126 | ## Licence 127 | 128 | GPLv3 129 | --------------------------------------------------------------------------------