Merge pull request #6 from Exelord/feature-optimize-svg

Optimize SVG initials

Author: Exelord

addon/-private/generators.js

@@ -28,14 +28,18 @@ function capitalizedFirstLetter(word) {
   return word ? word[0].toUpperCase() : '';
 }
 
+export function removeImage(url) {
+  URL.revokeObjectURL(url);
+}
+
 export function generateImage(properties) {
   let textElement = generateTextElement(properties.initials, properties.initialsColor, properties.textStyles);
   let svgElement = generateSvgElement(properties.width, properties.height, properties.backgroundStyles);
 
   svgElement.append(textElement);
   let finalElement = Ember.$('<div>').append(svgElement);
-  let imageContent = window.btoa(unescape(encodeURIComponent(finalElement.html())));
-  return 'data:image/svg+xml;base64,' + imageContent;
+  let blob = new Blob([finalElement.html()], { type: "image/svg+xml" });
+  return URL.createObjectURL(blob);
 }
 
 export function generateInitials(name) {

addon/mixin.js

@@ -1,6 +1,6 @@
 import Ember from 'ember';
 import { colorIndex } from './-private/utils';
-import { generateInitials, generateImage } from './-private/generators';
+import { generateInitials, generateImage, removeImage } from './-private/generators';
 
 export default Ember.Mixin.create({
   tagName: 'img',
@@ -20,7 +20,7 @@ export default Ember.Mixin.create({
   textStyles: {},
 
   textColor: 'white',
-  fontSize: 12,
+  fontSize: 50,
   fontWeight: 200,
   fontFamily: 'Helvetica Neue Light, Arial, sans-serif',
 
@@ -37,6 +37,7 @@ export default Ember.Mixin.create({
   ],
 
   initialsObserver: Ember.observer('name', 'seedText', 'fontSize', 'fontWeight', 'fontFamily', 'textColor', 'defaultName', 'size', function () {
+    removeImage(this.get('src'));
     this.notifyPropertyChange('src');
   }),
 
@@ -59,8 +60,8 @@ export default Ember.Mixin.create({
 
   initialsProperties() {
     return {
-      width: this.get('width'),
-      height: this.get('height'),
+      width: 100,
+      height: 100,
       initials: generateInitials(this.get('name') || this.get('defaultName')),
       initialsColor: this.get('textColor'),
       textStyles: Ember.assign(this._textStyles(), this.get('textStyles')),

tests/dummy/app/components/initials-form/component.js

@@ -6,7 +6,7 @@ export default Ember.Component.extend({
   seedText: Ember.computed.reads('name'),
   defaultName: '?',
   textColor: 'white',
-  fontSize: 100,
+  fontSize: 70,
   fontWeight: 100,
   fontFamily: 'Helvetica Neue Light, Arial, sans-serif',
 

tests/integration/components/ember-initials-test.js

@@ -5,9 +5,14 @@ import hbs from 'htmlbars-inline-precompile';
 
 moduleForComponent('ember-initials', 'Ember initials Component Tests', { integration: true });
 
-function svgObject(container) {
-  let base64 = container.$('img').attr('src').split('base64,')[1];
-  return Ember.$(window.atob(base64))[0];
+function imagePromise(container) {
+  return new Ember.RSVP.Promise((resolve) => {
+    let src = container.$('img').attr('src');
+
+    Ember.$.get(src, (svg) => {
+      resolve(Ember.$(svg));
+    });
+  });
 }
 
 test('has correct tag name', function (assert) {
@@ -16,28 +21,35 @@ test('has correct tag name', function (assert) {
 });
 
 test('has correct initials', function (assert) {
-  this.render(hbs`{{ember-initials name="Super cool"}}`);
+  let done = assert.async();
 
-  let svg = svgObject(this);
-  let initials = svg.textContent;
+  this.render(hbs`{{ember-initials name="Super cool"}}`);
 
-  assert.equal(initials, 'SC');
+  imagePromise(this).then((svg) => {
+    let initials = svg.text();
+    assert.equal(initials, 'SC');
+    done();
+  });
 });
 
 test('has correct default name', function (assert) {
+  let done = assert.async();
   this.render(hbs`{{ember-initials}}`);
 
-  let svg = svgObject(this);
-  let initials = svg.textContent;
-
-  assert.equal(initials, '?');
+  imagePromise(this).then((svg) => {
+    let initials = svg.text();
+    assert.equal(initials, '?');
+    done();
+  });
 });
 
 test('when name and default name are empty', function (assert) {
+  let done = assert.async();
   this.render(hbs`{{ember-initials name='' defaultName=''}}`);
 
-  let svg = svgObject(this);
-  let initials = svg.textContent;
-
-  assert.equal(initials, '');
+  imagePromise(this).then((svg) => {
+    let initials = svg.text();
+    assert.equal(initials, '');
+    done();
+  });
 });