Merge pull request #2 from Robdel12/make-install-easier

Remove mixin and auto add to the comsuing apps router

README.md

@@ -1,5 +1,5 @@
-# A11y-announcer 
-[![Build Status](https://travis-ci.org/Robdel12/a11y-announcer.svg?branch=master)](https://travis-ci.org/Robdel12/a11y-announcer) 
+# A11y-announcer
+[![Build Status](https://travis-ci.org/Robdel12/a11y-announcer.svg?branch=master)](https://travis-ci.org/Robdel12/a11y-announcer)
 [![npm version](https://badge.fury.io/js/a11y-announcer.svg)](http://badge.fury.io/js/a11y-announcer)
 
 This addon is to allow for accessible route changes inside of your ember application.
@@ -10,19 +10,15 @@ The goal for this addon is to fill the gaps in embers router. Thank you to
 @patrickfox [for the idea!](https://vimeo.com/117614181)
 
 ## How does it work?
-The basic idea of this addon is to announce the new page title on every route change. This means the page title _needs_ to change on every route. If it's routable, it's different enough to warrant a title change. 
+The basic idea of this addon is to announce the new page title on every route
+change. This means the page title _needs_ to change on every route. If it's
+routable, it's different enough to warrant a title change.
 
-I use [ember-cli-document-title](https://github.com/kimroen/ember-cli-document-title) to help me with manging the title of each route. 
+I use [ember-cli-document-title](https://github.com/kimroen/ember-cli-document-title) to help me with manging the title of each route.
 
 ### Getting Started
 
 - `ember install a11y-announcer`
-- In your `router.js`file import the mixin:
-```js
-import A11yAnnouncer from 'a11y-announcer/mixins/announcer';
-
-var Router = Ember.Router.extend(A11yAnnouncer, {...});
-```
 - Add `{{route-announcer}}` to your `application.hbs` file.
 
 #### Pushing updates to the announcer
@@ -31,7 +27,7 @@ Sometimes you want to push an announcement of some sort to the announcer.
 To do that you need to inject the announcer service:
 
 ```js
-export default Ember.Controller.exten({
+export default Ember.Controller.extend({
   announcer: Ember.inject.service('announcer')
 })
 ```
@@ -45,6 +41,25 @@ will be read off. There are three different strings you can pass here:
 - _polite_ which will not interrupt the screen reader
 - _assertive_ which will immediately interrupt the screen reader
 
+#### Changing the route change message
+
+To change the route has changes message from `${pageTitle} has loaded` to
+something custom (for example `${pageTitle} has finished loading`) you will
+need to edit your `Router` in `router.js`:
+
+```js
+var Router = Ember.Router.extend({
+  location: config.locationType
+  announcer: Ember.inject.service('announcer'),
+
+  init() {
+    this.super(...arguments);
+
+    this.set('announcer.message', 'has finished loading');
+  }
+});
+```
+
 ## Installation
 
 * `git clone` this repository

addon/services/announcer.js

@@ -1,8 +1,10 @@
 import Ember from 'ember';
 
 export default Ember.Service.extend({
+  message: "has loaded",
   announceMessage: null,
   announceTone: 'polite',
+
   announce: function(message, tone) {
     this.setProperties({
       announceMessage: message,

app/initializers/add-announcer-to-router.js

@@ -0,0 +1,22 @@
+import Ember from 'ember';
+import Router from '../router';
+
+export default {
+  name: 'add-announcer-to-router',
+  initialize: function(registry, application) {
+    Router.reopen({
+      announcer: Ember.inject.service('announcer'),
+      didTransition: function() {
+        this._super(...arguments);
+
+        Ember.run.later(this, () => {
+          let pageTitle = Ember.$('title').html().trim();
+          let serviceMessage = this.get('announcer.message');
+          let message = `${pageTitle} ${serviceMessage}`;
+
+          this.get('announcer').announce(message, 'polite');
+        }, 100);
+      }
+    });
+  }
+};

bower.json

@@ -5,12 +5,9 @@
     "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
     "ember-cli-test-loader": "ember-cli/ember-cli-test-loader#0.1.3",
     "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5",
-    "ember-qunit": "0.4.9",
-    "ember-qunit-notifications": "0.0.7",
     "ember-resolver": "~0.1.18",
-    "jquery": "^1.11.3",
+    "jquery": "1.11.3",
     "loader.js": "ember-cli/loader.js#3.2.1",
-    "qunit": "~1.18.0",
     "ember-mocha": "~0.8.0"
   }
 }

package.json

@@ -21,7 +21,6 @@
     "broccoli-asset-rev": "^2.1.2",
     "ember-cli": "1.13.8",
     "ember-cli-app-version": "0.5.0",
-    "ember-cli-content-security-policy": "0.4.0",
     "ember-cli-dependency-checker": "^1.0.1",
     "ember-cli-document-title": "0.2.0",
     "ember-cli-github-pages": "0.0.6",
@@ -30,7 +29,6 @@
     "ember-cli-inject-live-reload": "^1.3.1",
     "ember-cli-mocha": "0.9.2",
     "ember-cli-release": "0.2.3",
-    "ember-cli-sri": "^1.0.3",
     "ember-cli-uglify": "^1.2.0",
     "ember-disable-prototype-extensions": "^1.0.0",
     "ember-disable-proxy-controllers": "^1.0.0",
@@ -51,4 +49,4 @@
     "configPath": "tests/dummy/config",
     "demoURL": "http://robdel12.github.io/a11y-announcer"
   }
-}
+}

tests/acceptance/route-announcer-test.js

@@ -9,6 +9,7 @@ describe('Acceptance: RouteAnnouncer', function() {
 
   beforeEach(function() {
     application = startApp();
+    this.service = application.__container__.lookup('service:announcer');
   });
 
   afterEach(function() {
@@ -30,6 +31,18 @@ describe('Acceptance: RouteAnnouncer', function() {
     });
   });
 
+  describe("changing the route change message", function() {
+    beforeEach(function() {
+      this.service.set('message', 'has finished loading');
+      return visit('/');
+    });
+
+    it("updates the message", function() {
+      expect($('.spec-announcer').html().trim()).to.equal('Index title has finished loading');
+    });
+
+  });
+
   describe("visiting the 'another' route", function() {
     beforeEach(function() {
       return visit('/another');

tests/dummy/app/router.js

@@ -1,8 +1,7 @@
 import Ember from 'ember';
 import config from './config/environment';
-import A11yAnnouncer from 'a11y-announcer/mixins/announcer';
 
-var Router = Ember.Router.extend(A11yAnnouncer, {
+var Router = Ember.Router.extend({
   location: config.locationType
 });