Refactor package (#31)

* Refactor package

* Upgrade packages

* Fix tests

* Upgrade qunit

.eslintrc.js

@@ -2,7 +2,7 @@
 module.exports = {
   root: true,
   parserOptions: {
-    ecmaVersion: 6,
+    ecmaVersion: 2017,
     sourceType: 'module'
   },
   extends: 'eslint:recommended',

.travis.yml

@@ -8,7 +8,6 @@ sudo: false
 cache:
   directories:
     - $HOME/.npm
-    - $HOME/.cache # includes bowers cache
 
 env:
   # we recommend testing LTS's and latest stable release (bonus points to beta/canary)
@@ -25,14 +24,11 @@ matrix:
 
 before_install:
   - npm config set spin false
-  - npm install -g bower
-  - bower --version
-  - npm install phantomjs-prebuilt
-  - node_modules/phantomjs-prebuilt/bin/phantomjs --version
+  - npm install -g phantomjs-prebuilt
+  - phantomjs --version
 
 install:
   - npm install
-  - bower install
 
 script:
   # Usually, it's ok to finish the test scenario without reverting

addon/mixins/initials/index.js → addon/mixins/initials.js

@@ -1,12 +1,12 @@
 import Ember from 'ember';
-import { colorIndex } from './-private/utils';
-import { generateInitials } from './-private/generators';
+import ColorIndex from '../utils/color-index';
+import Initials from '../utils/initials';
 
 export default Ember.Mixin.create({
   tagName: 'img',
   attributeBindings: ['width', 'height', 'src', 'onError'],
 
-  initialsStore: Ember.inject.service('ember-initials/initials-store'),
+  initialsStore: Ember.inject.service('ember-initials-store'),
 
   defaultName: '?',
   defaultBackground: '#dd6a58',
@@ -47,7 +47,7 @@ export default Ember.Mixin.create({
     if (this.get('seedText') === this.get('defaultName')) {
       return this.get('defaultBackground');
     } else {
-      let index = colorIndex(this.get('seedText'), this.get('colors.length'));
+      let index = ColorIndex(this.get('seedText'), this.get('colors.length'));
       return this.get('colors')[index];
     }
   }),
@@ -80,7 +80,7 @@ export default Ember.Mixin.create({
     return {
       width: 100,
       height: 100,
-      initials: generateInitials(this.get('name') || this.get('defaultName')),
+      initials: Initials(this.get('name') || this.get('defaultName')),
       initialsColor: this.get('textColor'),
       textStyles: Ember.assign(this._textStyles(), this.get('textStyles')),
       backgroundStyles: Ember.assign(this._backgroundStyles(), this.get('backgroundStyles')),

addon/services/ember-initials-store.js

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

addon/mixins/initials/-private/utils.js → addon/utils/color-index.js

@@ -1,4 +1,11 @@
-export function hashCode(string) {
+export default function (seedText, colorsLength) {
+  let code = hashCode(seedText);
+  return Math.abs(Math.floor(code % colorsLength));
+}
+
+// Private
+
+function hashCode(string) {
   let hash = 0;
 
   if (string.length === 0) return hash;
@@ -11,8 +18,3 @@ export function hashCode(string) {
 
   return hash;
 }
-
-export function colorIndex(seedText, colorsLength) {
-  let code = hashCode(seedText);
-  return Math.abs(Math.floor(code % colorsLength));
-}

addon/utils/generators/base.js

@@ -0,0 +1,23 @@
+// This is an Initials Image Generator Interface
+// You have to implement these methods if you want to create your own generator
+
+// revoke(url) {
+//   should revoke image from browser cache
+// }
+
+// generate(properties) {
+//   should return generated image url
+// }
+
+export default class {
+  constructor() {
+    this._implement(this.revoke, 'revoke');
+    this._implement(this.generate, 'generate');
+  }
+
+  _implement(fn, name) {
+    if (typeof fn !== "function" || fn.length !== 1) {
+      throw `Base Generator: '${name}' function has to be implemented with exactly one argument!`
+    }
+  }
+}

addon/utils/generators/svg.js

@@ -0,0 +1,45 @@
+import Ember from 'ember';
+import Base from './base';
+
+export default class extends Base {
+  revoke(url) {
+    URL.revokeObjectURL(url);
+  }
+
+  generate(properties) {
+    let textElement = this._generateTextElement(properties.initials, properties.initialsColor, properties.textStyles);
+    let svgElement = this._generateSvgElement(properties.width, properties.height, properties.backgroundStyles);
+
+    svgElement.append(textElement);
+    let finalElement = Ember.$('<div>').append(svgElement);
+    let blob = new Blob([finalElement.html()], { type: "image/svg+xml" });
+    return URL.createObjectURL(blob);
+  }
+
+  // Private
+
+  _generateTextElement(text, color, styles = {}) {
+    return this._generateElement('<text></text>', styles, {
+      y: '50%',
+      x: '50%',
+      dy: '0.35em',
+      'text-anchor': 'middle',
+      'pointer-events': 'auto',
+      fill: color,
+    }).html(text);
+  }
+
+  _generateElement(name, styles = {}, attrs = {}) {
+    return Ember.$(name).attr(attrs).css(styles);
+  }
+
+  _generateSvgElement(width, height, styles = {}) {
+    return this._generateElement('<svg></svg>', styles, {
+      width,
+      height,
+      xmlns: 'http://www.w3.org/2000/svg',
+      'pointer-events': 'none',
+      'viewBox': '0 0 100 100'
+    });
+  }
+}

addon/utils/initials.js

@@ -0,0 +1,20 @@
+export default function(name) {
+  let initials = name ? name.trim() : '';
+  let letters = initials.split(' ');
+
+  if (letters.length > 1) {
+    let first = capitalizedFirstLetter(letters.shift());
+    let last = capitalizedFirstLetter(letters.pop());
+    initials = first + last;
+  } else if (letters.length === 1) {
+    initials = capitalizedFirstLetter(letters.shift());
+  }
+
+  return initials;
+}
+
+// Private
+
+function capitalizedFirstLetter(word) {
+  return word ? word[0].toUpperCase() : '';
+}

app/services/ember-initials-store.js

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

index.js

@@ -12,12 +12,12 @@ module.exports = {
     this._super.included(app);
 
     app.import('vendor/ember-initials/md5.js');
-    app.import('vendor/ember-initials/shims/md5/' + shimFor('md5'), {
+    app.import('vendor/shims/md5/' + shimFor('md5'), {
       type: 'vendor'
     });
 
     app.import('vendor/ember-initials/object_hash.js');
-    app.import('vendor/ember-initials/shims/object-hash/' + shimFor('object-hash'), {
+    app.import('vendor/shims/object-hash/' + shimFor('object-hash'), {
       type: 'vendor'
     });
   },

package.json

@@ -34,22 +34,22 @@
   "devDependencies": {
     "bootstrap-sass": "^3.3.7",
     "broccoli-asset-rev": "2.5.0",
-    "ember-ajax": "2.5.6",
-    "ember-bootstrap": "1.0.0-alpha.9",
-    "ember-cli": "2.12.1",
+    "ember-ajax": "^3.0.0",
+    "ember-bootstrap": "1.0.0-alpha.12",
+    "ember-cli": "2.13.0",
     "ember-cli-app-version": "3.0.0",
     "ember-cli-dependency-checker": "^1.3.0",
     "ember-cli-eslint": "^3.0.0",
-    "ember-cli-fastboot": "1.0.0-beta.16",
+    "ember-cli-fastboot": "1.0.0-beta.18",
     "ember-cli-favicon": "1.0.0-beta.4",
     "ember-cli-github-pages": "0.1.2",
     "ember-cli-htmlbars": "^1.1.1",
-    "ember-cli-htmlbars-inline-precompile": "^0.3.6",
+    "ember-cli-htmlbars-inline-precompile": "^0.4.0",
     "ember-cli-inject-live-reload": "^1.4.1",
-    "ember-cli-qunit": "^3.1.0",
+    "ember-cli-qunit": "^4.0.0",
     "ember-cli-release": "^1.0.0-beta.2",
-    "ember-cli-sass": "6.1.2",
-    "ember-cli-shims": "^1.0.2",
+    "ember-cli-sass": "6.1.3",
+    "ember-cli-shims": "^1.1.0",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-test-loader": "^2.1.0",
     "ember-cli-uglify": "^1.2.0",
@@ -60,14 +60,14 @@
     "ember-load-initializers": "^1.0.0",
     "ember-resolver": "^4.1.0",
     "ember-scroll-to": "0.6.4",
-    "ember-source": "~2.12.0",
-    "loader.js": "4.2.3"
+    "ember-source": "~2.13.0",
+    "loader.js": "4.3.0"
   },
   "dependencies": {
     "blueimp-md5": "^2.7.0",
-    "broccoli-funnel": "1.1.0",
+    "broccoli-funnel": "1.2.0",
     "broccoli-merge-trees": "2.0.0",
-    "ember-cli-babel": "^5.2.4",
+    "ember-cli-babel": "^6.1.0",
     "object-hash": "^1.1.8"
   },
   "fastbootDependencies": [

tests/test-helper.js

@@ -1,4 +1,6 @@
 import resolver from './helpers/resolver';
 import { setResolver } from 'ember-qunit';
+import { start } from 'ember-cli-qunit';
 
 setResolver(resolver);
+start();