demo app

addon/-private/generators.js

@@ -36,8 +36,8 @@ export function generateImage(properties) {
 }
 
 export function generateInitials(name) {
-  let initials = name ? name[0] : '';
-  let letters = name.match(/(\b\w)/g) || [];
+  let initials = name ? name : '';
+  let letters = initials.match(/(\b\w)/g) || [];
 
   if (letters.length > 1) {
     let first = letters.shift().toUpperCase();

addon/-private/utils.js

@@ -1,7 +1,7 @@
 function hashCode(string) {
   let hash = 0;
 
-  if (string.length > 0) {
+  if (string && string.length > 0) {
     for (let i = 0; i < string.length; i++) {
       hash = string.charCodeAt(i) + ((hash << 5) - hash);
     }

addon/mixin.js

@@ -20,7 +20,7 @@ export default Ember.Mixin.create({
   textStyles: {},
 
   textColor: 'white',
-  fontSize: '12px',
+  fontSize: 12,
   fontWeight: 200,
   fontFamily: 'Helvetica Neue Light, Arial, sans-serif',
 
@@ -36,7 +36,7 @@ export default Ember.Mixin.create({
     '#b49255', '#a94136', '#5461b4',
   ],
 
-  initialsObserver: Ember.observer('name', 'seedText', function () {
+  initialsObserver: Ember.observer('name', 'seedText', 'fontSize', 'fontWeight', 'fontFamily', 'textColor', 'defaultName', function () {
     this.set('src', this.createInitials());
   }),
 
@@ -61,7 +61,7 @@ export default Ember.Mixin.create({
     return {
       width: this.get('width'),
       height: this.get('height'),
-      initials: generateInitials(this.get('name')),
+      initials: generateInitials(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')),
@@ -72,7 +72,7 @@ export default Ember.Mixin.create({
     return {
       'font-family': this.get('fontFamily'),
       'font-weight': this.get('fontWeight'),
-      'font-size': this.get('fontSize'),
+      'font-size': `${this.get('fontSize')}px`,
     };
   },
 

bower.json

@@ -3,6 +3,7 @@
   "dependencies": {
     "ember": "~2.7.0",
     "ember-cli-shims": "0.1.1",
-    "ember-qunit-notifications": "0.1.0"
+    "ember-qunit-notifications": "0.1.0",
+    "bootstrap": "~3.3.5"
   }
 }

package.json

@@ -33,6 +33,7 @@
   "devDependencies": {
     "broccoli-asset-rev": "^2.4.2",
     "ember-ajax": "^2.0.1",
+    "ember-bootstrap": "0.11.2",
     "ember-cli": "2.7.0",
     "ember-cli-app-version": "^1.0.0",
     "ember-cli-dependency-checker": "^1.2.0",

tests/dummy/app/components/initials-blocks/template.hbs

@@ -0,0 +1,38 @@
+<div class="col-sm-4">
+  {{ember-initials class="img-rounded"
+    size=size
+    name=name
+    seedText=seedText
+    defaultName=defaultName
+    textColor=textColor
+    fontSize=fontSize
+    fontWeight=fontWeight
+    fontFamily=fontFamily
+  }}
+</div>
+
+<div class="col-sm-4">
+  {{ember-initials class="img-circle"
+    size=size
+    name=name
+    seedText=seedText
+    defaultName=defaultName
+    textColor=textColor
+    fontSize=fontSize
+    fontWeight=fontWeight
+    fontFamily=fontFamily
+  }}
+</div>
+
+<div class="col-sm-4">
+  {{ember-initials class="img-thumbnail"
+    size=size
+    name=name
+    seedText=seedText
+    defaultName=defaultName
+    textColor=textColor
+    fontSize=fontSize
+    fontWeight=fontWeight
+    fontFamily=fontFamily
+  }}
+</div>

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

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  size: 150,
+  name: 'Ember Initials',
+  seedText: Ember.computed.reads('name'),
+  defaultName: '?',
+  textColor: 'white',
+  fontSize: 100,
+  fontWeight: 100,
+  fontFamily: 'Helvetica Neue Light, Arial, sans-serif',
+});

tests/dummy/app/components/initials-form/template.hbs

@@ -0,0 +1,58 @@
+<div class="col-sm-12 text-center">
+  {{initials-blocks
+    size=size
+    name=name
+    seedText=seedText
+    defaultName=defaultName
+    textColor=textColor
+    fontSize=fontSize
+    fontWeight=fontWeight
+    fontFamily=fontFamily
+  }}
+</div>
+
+<div class="col-sm-12 row form">
+  <div class="col-sm-6">
+    <div class="form-group">
+      <label>Size:</label>
+      {{input placeholder="Size" value=size type="number" class="form-control" }}
+    </div>
+
+    <div class="form-group">
+      <label>Name:</label>
+      {{input placeholder="Name" value=name class="form-control" }}
+    </div>
+
+    <div class="form-group">
+      <label>Seed Text:</label>
+      {{input placeholder="Seed text" value=seedText class="form-control" }}
+    </div>
+
+    <div class="form-group">
+      <label>Default Name:</label>
+      {{input placeholder="Default Name" value=defaultName class="form-control" }}
+    </div>
+  </div>
+
+  <div class="col-sm-6">
+    <div class="form-group">
+      <label>Text color:</label>
+      {{input placeholder="Text color" value=textColor class="form-control" }}
+    </div>
+
+    <div class="form-group">
+      <label>Font size:</label>
+      {{input placeholder="Font size" type="number" value=fontSize class="form-control" }}
+    </div>
+
+    <div class="form-group">
+      <label>Font weight:</label>
+      {{input placeholder="Font weight" type="number" value=fontWeight class="form-control" }}
+    </div>
+
+    <div class="form-group">
+      <label>Font family:</label>
+      {{input placeholder="Font family" value=fontFamily class="form-control" }}
+    </div>
+  </div>
+</div>

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>Ember Initials - Demo</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
@@ -19,6 +19,7 @@
 
     <script src="{{rootURL}}assets/vendor.js"></script>
     <script src="{{rootURL}}assets/dummy.js"></script>
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
 
     {{content-for "body-footer"}}
   </body>

tests/dummy/app/styles/app.css

@@ -0,0 +1,12 @@
+.container, .form {
+  margin-top: 50px;
+}
+
+.description, .footer {
+  margin-bottom: 50px;
+}
+
+.travis {
+  margin-bottom: 20px;
+  padding-left: 20px;
+}

tests/dummy/app/templates/index.hbs

@@ -1 +1,31 @@
-{{ember-initials height=50 width=50 name="Super cool"}}
+<div class='container'>
+  <a class="github-button" href="https://github.com/exelord/ember-initials"
+     data-style="mega" data-count-href="/exelord/ember-initials/stargazers"
+     data-count-api="/repos/exelord/ember-initials#stargazers_count"
+     data-count-aria-label="# stargazers on GitHub"
+     aria-label="Star exelord/ember-initials on GitHub">
+     Github
+  </a>
+
+  <a href="https://travis-ci.org/Exelord/ember-initials">
+    <img src="https://travis-ci.org/Exelord/ember-initials.svg?branch=master" class="travis" />
+  </a>
+  <img src="ember-initials.png" width="100%" class="img-responsive" />
+  <hr>
+
+  <div class="col-sm-12 row description">
+    Ember Initials is a package for generating simple avatars with users initials.
+    It support Ember 2 apps. Thanks to highly customizable interface you can define your own colors,
+    defaults and styles. I promise you, it will do the job!
+  </div>
+
+  {{initials-form}}
+
+  <div class="col-sm-12 row footer text-muted">
+    <hr>
+    For more options and details check the documentaion:
+    <a href="https://github.com/Exelord/ember-initials/" target="_blank">
+      https://github.com/Exelord/ember-initials
+    </a>
+  </div>
+</div>

tests/dummy/config/environment.js

@@ -39,9 +39,7 @@ module.exports = function(environment) {
   }
 
   if (environment === 'production') {
-    ENV.locationType = 'hash';
-    ENV.rootURL = '/ember-initials/';
-
+    ENV.rootURL = '/ember-initials/'
   }
 
   return ENV;