Feature refactor

README.md

@@ -31,6 +31,11 @@ Ember Initials gives you a built-in components which you can use in yours templa
 ```hbs
 {{ember-initials name="John Doe"}}
 ```
+or
+
+```hbs
+{{ember-initials/initials name="John Doe"}}
+```
 
 ##### Image avatars:
 ```hbs

addon/initializers/ember-initials-store.js

@@ -0,0 +1,10 @@
+import Store from 'ember-initials/utils/store';
+
+export function initialize(application) {
+  application.register('store:ember-initials', Store);
+}
+
+export default {
+  initialize,
+  name: 'ember-initials-store',
+};

addon/mixins/adorable.js

@@ -1,24 +1,16 @@
-import { computed } from '@ember/object';
-import { reads, or } from '@ember/object/computed';
 import Mixin from '@ember/object/mixin';
+import Avatar from 'ember-initials/mixins/avatar';
+import { computed } from '@ember/object';
 
-export default Mixin.create({
-  tagName: 'img',
-  attributeBindings: ['width', 'height', 'src', 'title', 'alt'],
-
+export default Mixin.create(Avatar, {
   email: '',
   image: '',
 
-  title: 'User Avatar',
-  alt: 'User Avatar',
-
-  size: 30,
-  height: reads('size'),
-  width: reads('size'),
-
-  src: or('image', 'adorable'),
+  src: computed('image', 'email', 'size', function() {
+    return this.get('image') || this._adorableSrc(this.get('email'), this.get('size'));
+  }),
 
-  adorable: computed('email', 'size', function() {
-    return `https://api.adorable.io/avatars/${this.get('size')}/${this.get('email')}`;
-  })
+  _adorableSrc(email, size) {
+    return `https://api.adorable.io/avatars/${size}/${email}`;
+  }
 });

addon/mixins/avatar.js

@@ -0,0 +1,31 @@
+import Mixin from '@ember/object/mixin';
+import { reads } from '@ember/object/computed';
+import { getOwner } from '@ember/application';
+import { computed } from '@ember/object';
+
+export default Mixin.create({
+  tagName: 'img',
+  attributeBindings: ['width', 'height', 'src', 'alt', 'title', 'onError'],
+
+  src: '',
+  size: 30,
+  alt: 'User Avatar',
+  title: 'User Avatar',
+
+  height: reads('size'),
+  width: reads('size'),
+
+  config: computed(function() {
+    return getOwner(this).resolveRegistration('config:environment').emberInitials;
+  }),
+
+  fastboot: computed(function() {
+    return getOwner(this).lookup('service:fastboot');
+  }),
+
+  avatarsStore: computed(function() {
+    return getOwner(this).lookup('store:ember-initials');
+  }),
+
+  onError() {}
+});

addon/mixins/gravatar.js

@@ -1,36 +1,21 @@
-import { assign } from '@ember/polyfills';
-import { getOwner } from '@ember/application';
-import { reads } from '@ember/object/computed';
-import { computed } from '@ember/object';
 import Mixin from '@ember/object/mixin';
-import Config from 'ember-initials/config';
+import Avatar from 'ember-initials/mixins/avatar';
+import { computed } from '@ember/object';
 import md5 from 'md5';
 
-export default Mixin.create({
-  tagName: 'img',
-  attributeBindings: ['width', 'height', 'src'],
-
+export default Mixin.create(Avatar, {
   email: null,
-
   image: null,
   relativeUrl: false,
+
   defaultImage: computed(function() {
     return this.get('config.gravatar.defaultImage');
   }),
 
-  size: 30,
-  height: reads('size'),
-  width: reads('size'),
-
   src: computed('email', 'size', 'image', 'defaultImage', function() {
     return this.get('image') ? this.get('image') : this.generateGravatarUrl();
   }),
 
-  config: computed(function() {
-    let appSettings = getOwner(this).resolveRegistration('config:environment').emberInitials || {};
-    return assign({}, Config, appSettings);
-  }),
-
   generateGravatarUrl() {
     let hash = md5(this.get('email'));
     let size = this.get('size');
@@ -41,10 +26,11 @@ export default Mixin.create({
   },
 
   defaultImageUrl() {
-    if (this.get('relativeUrl') && this.get('defaultImage')) {
-      return `${window.location.origin}/${this.get('defaultImage')}`;
-    } else {
-      return this.get('defaultImage');
-    }
+    let defaultImage = this.get('defaultImage');
+    return this.get('relativeUrl') && defaultImage ? this._absoluteImageSrc(defaultImage) : defaultImage;
+  },
+
+  _absoluteImageSrc(relativePath) {
+    return `${window.location.origin}/${relativePath}`;
   }
 });

addon/mixins/image.js

@@ -1,27 +1,10 @@
-import { assign } from '@ember/polyfills';
-import { getOwner } from '@ember/application';
-import { computed } from '@ember/object';
-import { reads, or } from '@ember/object/computed';
 import Mixin from '@ember/object/mixin';
-import Config from 'ember-initials/config';
-
-export default Mixin.create({
-  tagName: 'img',
-  attributeBindings: ['width', 'height', 'src', 'title', 'alt'],
-
-  image: null,
-  defaultImage: reads('config.image.defaultImageUrl'),
+import Avatar from 'ember-initials/mixins/avatar';
+import { reads, or } from '@ember/object/computed';
 
-  title: 'User Avatar',
-  alt: 'User Avatar',
-  size: 30,
-  height: reads('size'),
-  width: reads('size'),
+export default Mixin.create(Avatar, {
+  image: '',
 
   src: or('image', 'defaultImage'),
-
-  config: computed(function() {
-    let appSettings = getOwner(this).resolveRegistration('config:environment').emberInitials || {};
-    return assign({}, Config, appSettings);
-  })
+  defaultImage: reads('config.image.defaultImageUrl'),
 });

addon/mixins/initials.js

@@ -1,48 +1,34 @@
+import Mixin from '@ember/object/mixin';
+import Avatar from 'ember-initials/mixins/avatar';
 import { assign } from '@ember/polyfills';
-import { getOwner } from '@ember/application';
 import { observer, computed } from '@ember/object';
 import { reads } from '@ember/object/computed';
-import { inject as service } from '@ember/service';
-import Mixin from '@ember/object/mixin';
-import ColorIndex from '../utils/color-index';
-import Initials from '../utils/initials';
+import ColorIndex from 'ember-initials/utils/color-index';
+import Initials from 'ember-initials/utils/initials';
 
-export default Mixin.create({
-  tagName: 'img',
-  attributeBindings: ['width', 'height', 'src', 'onError'],
-
-  initialsStore: service('ember-initials-store'),
+export default Mixin.create(Avatar, {
+  image: null,
+  colors: null,
+  textStyles: null,
+  backgroundStyles: null,
 
   defaultName: '?',
   defaultBackground: '#dd6a58',
 
-  image: null,
-  name: reads('defaultName'),
-  seedText: reads('name'),
-
-  size: 30,
-  height: reads('size'),
-  width: reads('size'),
-
-  backgroundStyles: {},
-  textStyles: {},
-
-  textColor: 'white',
   fontSize: 50,
   fontWeight: 200,
+  textColor: 'white',
   fontFamily: 'Helvetica Neue Light, Arial, sans-serif',
 
-  colors: [
-    '#1abc9c', '#16a085', '#f1c40f',
-    '#f39c12', '#2ecc71', '#27ae60',
-    '#e67e22', '#d35400', '#3498db',
-    '#2980b9', '#e74c3c', '#c0392b',
-    '#9b59b6', '#8e44ad', '#bdc3c7',
-    '#34495e', '#2c3e50', '#95a5a6',
-    '#7f8c8d', '#ec87bf', '#d870ad',
-    '#f69785', '#9ba37e', '#b49255',
-    '#b49255', '#a94136', '#5461b4',
-  ],
+  name: reads('defaultName'),
+  seedText: reads('name'),
+
+  src: computed('fastboot.isFastBoot', 'image', function() {
+    let image = this.get('image');
+
+    if (image) return image;
+    return this.get('fastboot.isFastBoot') ? '' : this.createInitials();
+  }),
 
   initialsObserver: observer('name', 'seedText', 'fontSize', 'fontWeight', 'fontFamily', 'textColor', 'defaultName', function () {
     this.notifyPropertyChange('src');
@@ -57,19 +43,25 @@ export default Mixin.create({
     }
   }),
 
-  src: computed('fastboot.isFastBoot', 'image', function() {
-    let image = this.get('image');
-
-    if (!this.get('fastboot.isFastBoot')) {
-      return image ? image : this.createInitials();
-    } else {
-      return image ? image : '';
-    }
-  }),
-
-  fastboot: computed(function() {
-    return getOwner(this).lookup('service:fastboot');
-  }),
+  init() {
+    this._super(...arguments);
+
+    this.setProperties({
+      backgroundStyles: {},
+      textStyles: {},
+      colors: [
+        '#1abc9c', '#16a085', '#f1c40f',
+        '#f39c12', '#2ecc71', '#27ae60',
+        '#e67e22', '#d35400', '#3498db',
+        '#2980b9', '#e74c3c', '#c0392b',
+        '#9b59b6', '#8e44ad', '#bdc3c7',
+        '#34495e', '#2c3e50', '#95a5a6',
+        '#7f8c8d', '#ec87bf', '#d870ad',
+        '#f69785', '#9ba37e', '#b49255',
+        '#b49255', '#a94136', '#5461b4',
+      ]
+    })
+  },
 
   onError: computed('image', function() {
     if (this.get('image')) {
@@ -78,7 +70,7 @@ export default Mixin.create({
   }),
 
   createInitials() {
-    return this.get('initialsStore').initialsFor(this.initialsProperties());
+    return this.get('avatarsStore').initialsFor(this.initialsProperties());
   },
 
   initialsProperties() {

addon/utils/store.js

@@ -0,0 +1,31 @@
+import { computed } from '@ember/object';
+import EmberObject from "@ember/object";
+import hash from 'object-hash';
+import SvgGenerator from '../utils/generators/svg';
+
+export default EmberObject.extend({
+  cache: null,
+
+  generator: computed(function() {
+    return new SvgGenerator;
+  }),
+
+  init() {
+    this._super(...arguments);
+    this.set('cache', {});
+  },
+
+  removeAll() {
+    Object.keys(this.get(`cache`)).forEach((key) => this.get('generator').revoke(key))
+    this.set('cache', {});
+  },
+
+  initialsFor(properties) {
+    let key = hash(properties);
+    return this.get('cache')[key] || this._create(key, properties);
+  },
+
+  _create(key, properties) {
+    return this.get('cache')[key] = this.get('generator').generate(properties);
+  }
+});

app/components/ember-initials/initials/component.js

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

app/initializers/ember-initials-store.js

@@ -0,0 +1 @@
+export { default } from 'ember-initials/initializers/ember-initials-store';

config/environment.js

@@ -1,6 +1,13 @@
 /* eslint-env node */
 'use strict';
 
-module.exports = function (/* environment, appConfig */) {
-  return { };
+module.exports = function (environment, appConfig) {
+  appConfig.emberInitials = {
+    image: {
+      defaultImageUrl: ''
+    },
+    gravatar: {
+      defaultImageUrl: ''
+    },
+  };
 };