Feature/title and desc

addon/components/async-svg.js

@@ -0,0 +1,23 @@
+import Ember from 'ember';
+import Aria from '../mixins/aria';
+import Common from '../mixins/common';
+const PREFIX = '';
+
+const async = Ember.Component.extend(Aria, Common, {
+  _svg: Ember.observer('src', function() {
+    const src = this.get('src').replace(/\.svg$/, '');
+    Ember.$.ajax({
+      method: 'GET',
+      url: `${PREFIX}/${src}.svg`
+    }).done(data => {
+      this.setSVG(data);
+    });
+    return true;
+  })
+});
+
+async.reopenClass({
+  positionalParams: ['src']
+});
+async[Ember.NAME_KEY] = 'async-svg';
+export default async;

addon/components/inline-svg.js

@@ -0,0 +1,22 @@
+import Ember from 'ember';
+import Aria from '../mixins/aria';
+import Common from '../mixins/common';
+import SVGs from 'svgs';
+
+const inline = Ember.Component.extend(Aria, Common, {
+  _svg: Ember.computed('src', function() {
+    const src = this.get('src') || '';
+    const path = src.replace(/\.svg$/, '').replace(/\//g, '.');
+    const svg = Ember.get(SVGs, path);
+
+    Ember.assert(`No SVG found for ${path}`, svg);
+
+    this.setSVG(svg);
+  })
+});
+
+inline.reopenClass({
+  positionalParams: ['src']
+});
+inline[Ember.NAME_KEY] = 'inline-svg';
+export default inline;

addon/mixins/aria.js

@@ -0,0 +1,10 @@
+import Ember from 'ember';
+
+export default Ember.Mixin.create({
+  labelledBy: Ember.computed('title', 'desc', function() {
+    const title = this.get('title') ? 'title' : '';
+    const desc = this.get('desc') ? ' desc' : '';
+    return `${title}${desc}`;
+  }),
+  role: 'img'
+});

addon/mixins/common.js

@@ -0,0 +1,60 @@
+import Ember from 'ember';
+import layout from '../templates/components/svg';
+const htmlSafe = Ember.String.htmlSafe;
+
+export default Ember.Mixin.create({
+  layout: layout,
+  tagName: '',
+
+  /**
+   * Initialize SVG on load
+   */
+  init() {
+    this._super(...arguments);
+    Ember.run.schedule('afterRender', () => {
+      this.notifyPropertyChange('src');
+    });
+  },
+  preserveAspectRatio: null,
+  setSVG(data) {
+    const {width, height, x, y} = this.getProperties('width', 'height', 'x', 'y');
+    this.set('svg', htmlSafe(Ember.$(data).find('svg').html()));
+
+    /**
+     * viewBox
+     *
+     * Not required but often included;
+     */
+    const viewBox = Ember.$(data).find('svg').attr('viewBox');
+    if (Ember.typeOf(this.get('viewBox')) === 'undefined' && viewBox) { this.set('viewBox', viewBox); }
+
+    /**
+     * viewport (width, height)
+     *
+     * The visible portion of the SVG. Firefox may object if not defined but isn't
+     * strictly required and you run the risk of cutoff.
+     *
+     * By default if not set on component or in the SVG then a width of 100% will be
+     * used; this is typically the desired behaviour.
+     */
+    const viewWidth = Ember.$(data).find('svg').attr('width');
+    const viewHeight = Ember.$(data).find('svg').attr('height');
+    if (!width) { this.set('width', viewWidth || '100%'); }
+    if (!height && !width && viewHeight) { this.set('height', viewHeight); }
+
+    /**
+     * Aspect Ratio (preserveAspectRatio)
+     *
+     * SVG has a boolean flag to ensure that viewBox and viewport are the same aspect
+     * ratio. If its stated in the file we'll proxy it through but default its not set.
+     */
+    const preserveAspectRatio = Ember.$(data).find('svg').attr('preserveAspectRatio');
+    if (preserveAspectRatio) { this.set('preserveAspectRatio', preserveAspectRatio); }
+
+    const defaultX = Ember.$(data).find('svg').attr('x');
+    const defaultY = Ember.$(data).find('svg').attr('y');
+    if (!x && defaultX) { this.set('x', Ember.$(data).find('svg').attr('x')); }
+    if (!y && defaultY) { this.set('y', Ember.$(data).find('svg').attr('y')); }
+  }
+
+});

addon/templates/components/svg.hbs

@@ -0,0 +1,20 @@
+<svg
+  class={{class}}
+  aria-labelledby="{{labelledBy}}"
+  role="{{role}}"
+  viewBox={{viewBox}}
+  preserveAspectRatio={{preserveAspectRatio}}
+  width={{width}}
+  height={{height}}
+  x={{x}}
+  y={{y}}
+>
+  {{#if title}}
+    <title class="title">{{title}}</title>
+  {{/if}}
+  {{#if desc}}
+    <desc class="desc">{{desc}}</desc>
+  {{/if}}
+  {{svg}}
+  {{yield}}
+</svg>

app/components/async-svg.js

@@ -0,0 +1 @@
+export { default } from 'ember-inline-svg/components/async-svg';

app/components/inline-svg.js

@@ -0,0 +1 @@
+export { default } from 'ember-inline-svg/components/inline-svg';

index.js

@@ -2,6 +2,7 @@
 'use strict';
 
 var fs          = require('fs');
+var path        = require('path');
 var merge       = require('merge');
 var mergeTrees  = require('broccoli-merge-trees');
 var flatiron    = require('broccoli-flatiron');
@@ -10,14 +11,14 @@ var SVGOptmizer = require('./svg-optimizer');
 
 module.exports = {
   name: 'ember-inline-svg',
-  
+
   included: function(app) {
     if (app.app) {
       app = app.app;
     }
     this.app = app;
   },
-  
+
   options: function() {
     return merge(true, {}, {
       paths:   ['public'],
@@ -41,22 +42,48 @@ module.exports = {
     return new SVGOptmizer(tree, {svgoConfig: config});
   },
 
-  treeForApp: function(tree) {
-    var svgs = mergeTrees(this.svgPaths().filter(function(path) {
-      return fs.existsSync(path);
+  buildSvgTree: function() {
+    let svgs = mergeTrees(this.svgPaths().filter(function(path) {
+      return fs.statSync(path);
     }));
 
     svgs = new Funnel(svgs, {
       include: [new RegExp(/\.svg$/)]
     });
 
-    svgs = this.optimizeSVGs(svgs);
+    return this.optimizeSVGs(svgs);
+  },
 
-    svgs = flatiron(svgs, {
+  treeForPublic: function(tree) {
+    const trees = [];
+    const svgs = this.buildSvgTree();
+
+    if(tree) {
+      trees.push(tree);
+    }
+    trees.push(flatiron(svgs, {
       outputFile: 'svgs.js',
       trimExtensions: true
-    });
+    }));
+
+    return mergeTrees(trees);
+  },
+
+  // treeForVendor: function(tree) {
+  //   const trees = [];
+  //   const svgs = this.buildSvgTree();
+  //   console.log('treeForVendor, cwd: ', path.dirname());
+  //
+  //   if(tree) {
+  //     trees.push(tree);
+  //   }
+  //   // trees.push(svgs);
+  //   trees.push(flatiron(svgs, {
+  //     outputFile: 'svgs.js',
+  //     trimExtensions: true
+  //   }));
+  //
+  //   return mergeTrees(trees);
+  // },
 
-    return mergeTrees([tree, svgs]);
-  }
 };

package.json

@@ -26,24 +26,24 @@
     "ember-cli-app-version": "^1.0.0",
     "ember-cli-content-security-policy": "0.4.0",
     "ember-cli-dependency-checker": "^1.1.0",
-    "ember-cli-htmlbars": "^1.0.1",
     "ember-cli-htmlbars-inline-precompile": "^0.3.1",
     "ember-cli-ic-ajax": "0.2.4",
     "ember-cli-inject-live-reload": "^1.3.1",
     "ember-cli-qunit": "^1.0.4",
     "ember-cli-release": "0.2.8",
     "ember-cli-sri": "^1.2.0",
     "ember-cli-uglify": "^1.2.0",
+    "ember-disable-prototype-extensions": "^1.0.0",
     "ember-disable-proxy-controllers": "^1.0.1",
     "ember-export-application-global": "^1.0.4",
-    "ember-disable-prototype-extensions": "^1.0.0",
     "ember-try": "0.0.8"
   },
   "keywords": [
     "ember-addon",
     "svg"
   ],
   "dependencies": {
+    "ember-cli-htmlbars": "^1.0.1",
     "broccoli-caching-writer": "^0.5.5",
     "broccoli-flatiron": "0.0.0",
     "broccoli-funnel": "^1.0.1",

tests/dummy/app/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Dummy</title>
+    <title>Inline SVG</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 

tests/dummy/app/templates/application.hbs

@@ -1,5 +1,18 @@
 <h2 id='title'>ember-inline-svg</h2>
 
-{{inline-svg 'kiwi'}}
+<h3>Compile Time: </h3>
+{{inline-svg 'kiwi'
+  title='kiwi'
+  desc='demonstration of compile-time inlining'
+  width='400px'
+}}
+
+<h3>Run Time:</h3>
+
+{{async-svg 'kiwi'
+  title='kiwi'
+  desc='demonstration of run-time inlining'
+  width='400px'
+}}
 
 {{outlet}}

tests/integration/components/async-svg-test.js

@@ -0,0 +1,25 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('async-svg', 'Integration | Component | async svg', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });" + EOL + EOL +
+
+  this.render(hbs`{{async-svg}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:" + EOL +
+  this.render(hbs`
+    {{#async-svg}}
+      template block text
+    {{/async-svg}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/integration/components/inline-svg-test.js

@@ -0,0 +1,25 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('inline-svg', 'Integration | Component | inline svg', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });" + EOL + EOL +
+
+  this.render(hbs`{{inline-svg}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:" + EOL +
+  this.render(hbs`
+    {{#inline-svg}}
+      template block text
+    {{/inline-svg}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/unit/mixins/aria-test.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+import AriaMixin from '../../../mixins/aria';
+import { module, test } from 'qunit';
+
+module('Unit | Mixin | aria');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  let AriaObject = Ember.Object.extend(AriaMixin);
+  let subject = AriaObject.create();
+  assert.ok(subject);
+});

tests/unit/mixins/common-test.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+import CommonMixin from '../../../mixins/common';
+import { module, test } from 'qunit';
+
+module('Unit | Mixin | common');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  let CommonObject = Ember.Object.extend(CommonMixin);
+  let subject = CommonObject.create();
+  assert.ok(subject);
+});