Two way address bar

app/components/dummy-demo-app.js

@@ -1,9 +1,11 @@
 import Ember from 'ember';
 import ResizeMixin from 'ember-twiddle/lib/resize-mixin';
 
-const { $, on } = Ember;
+const { $, on, inject } = Ember;
 
 export default Ember.Component.extend(ResizeMixin, {
+  demoApp: inject.service(),
+
   iframeId: 'dummy-content-iframe',
   classNames: ['content'],
 
@@ -34,6 +36,8 @@ export default Ember.Component.extend(ResizeMixin, {
       ifrm.document.close();
     }
 
+    this.get('demoApp').setCurrentIFrame(ifrm);
+
     if (Ember.testing) {
       ifrm = ifrm.contentWindow;
       ifrm.document.open();

app/gist/controller.js

@@ -441,6 +441,9 @@ export default Ember.Controller.extend({
       run(() => {
         if(typeof m.data==='object' && 'setDemoAppUrl' in m.data) {
           if (!this.get('isDestroyed')) {
+            if (window.messagesWaiting > 0) {
+              window.messagesWaiting = 0;
+            }
             this.set('applicationUrl', m.data.setDemoAppUrl || '/');
           }
         }

app/gist/route.js

@@ -4,6 +4,7 @@ const { inject } = Ember;
 
 export default Ember.Route.extend({
   notify: inject.service('notify'),
+  demoApp: inject.service(),
 
   titleToken: Ember.computed.readOnly('controller.model.description'),
 
@@ -77,6 +78,10 @@ export default Ember.Route.extend({
 
     showTwiddles: function() {
       this.transitionTo('twiddles');
+    },
+
+    urlChanged: function(newUrl) {
+      this.get('demoApp').postMessage({ newUrl });
     }
   },
 

app/gist/template.hbs

@@ -77,9 +77,9 @@
       }}
     </div>
     {{run-or-live-reload liveReloadChanged="liveReloadChanged" runNow="runNow"}}
-    <div class="url-bar">
-      <div>{{applicationUrl}}</div>
-    </div>
+      <div class="url-bar">
+        {{input value=applicationUrl enter="urlChanged"}}
+      </div>
     {{dummy-demo-app html=buildOutput}}
     {{#if fullScreen}}
       <a class="exit-full-screen-link" {{action 'exitFullScreen'}}>Edit Twiddle</a>

app/services/demo-app.js

@@ -0,0 +1,13 @@
+import Ember from 'ember';
+
+export default Ember.Service.extend({
+  setCurrentIFrame: function(iframe) {
+    this.iframe = iframe;
+  },
+
+  postMessage: function(data) {
+    if (this.iframe) {
+      this.iframe.contentWindow.postMessage(data, '*');
+    }
+  }
+});

app/styles/app.scss

@@ -446,9 +446,10 @@ body {
   border-bottom: 1px solid #ddd;
   padding: 6px;
 }
-.url-bar > div {
+.url-bar > input {
   display: block;
   height: 25px;
+  width: 100%;
   padding: 3px;
   background: #fff;
   border: 1px solid #ddd;

blueprints/router_initializer.js

@@ -4,11 +4,29 @@ import config from 'demo-app/config/environment';
 
 Router.reopen({
   updateUrlBar: Ember.on('didTransition', function() {
-    window.parent.postMessage({setDemoAppUrl:this.get('url')}, config.TWIDDLE_ORIGIN);
+    window.parent.postMessage({
+      setDemoAppUrl: this.get('url')
+    }, config.TWIDDLE_ORIGIN);
+  }),
+
+  listenForOutsideDemoAppUrlChanges: Ember.on('init', function() {
+    var router = this;
+
+    function demoAppUrlChanged(event) {
+      if (event.origin !== config.TWIDDLE_ORIGIN) {
+        return;
+      }
+
+      if (event.data.newUrl) {
+        router.transitionTo(event.data.newUrl);
+      }
+    }
+
+    window.addEventListener('message', demoAppUrlChanged, false);
   })
 });
 
 export default {
   name: 'router',
   initialize: function() {}
-};
+};

tests/acceptance/routing-test.js

@@ -5,58 +5,136 @@ import startApp from 'ember-twiddle/tests/helpers/start-app';
 module('Acceptance | routing', {
   beforeEach: function() {
     this.application = startApp();
+
+    this.registerWaiter = () => {
+      window.messagesWaiting = 1;
+      this._waiter = () => {
+        return window.messagesWaiting === 0;
+      };
+      Ember.Test.registerWaiter(this._waiter);
+    };
   },
 
   afterEach: function() {
+    window.messagesWaiting = 0;
+    if (this._waiter) {
+      Ember.Test.unregisterWaiter(this._waiter);
+      this._waiter = null;
+    }
+
     Ember.run(this.application, 'destroy');
   }
 });
 
-test('Able to do routing in a gist', function(assert) {
+const aboutLink = '.test-about-link';
+const indexLink = '.test-index-link';
+const addressBar = '.url-bar input';
+const outletText = 'p';
 
-  const files = [
-    {
-      filename: "about.template.hbs",
-      content: "<p>About Page</p>"
-    },
-    {
-      filename: "index.template.hbs",
-      content: "<p>Main Page</p>"
-    },
-    {
-      filename: "application.template.hbs",
-      content: "{{#link-to \"index\" class=\"test-index-link\"}}Index{{/link-to}}\n{{#link-to \"about\" class=\"test-about-link\"}}About{{/link-to}}\n\n{{outlet}}"
-    },
-    {
-      filename: "router.js",
-      content: "import Ember from 'ember';\nimport config from './config/environment';\n\nvar Router = Ember.Router.extend({\n  location: config.locationType\n});\n\nRouter.map(function() {\n  this.route(\"about\");\n});\n\nexport default Router;\n"
-    },
-    {
-      filename: "twiddle.json",
-      content: "{\n  \"version\": \"0.4.0\",\n  \"dependencies\": {\n    \"jquery\": \"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js\",\n    \"ember\": \"https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember.js\",\n    \"ember-data\": \"https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.13/ember-data.js\",\n    \"ember-template-compiler\": \"https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember-template-compiler.js\"\n  }\n}"
-    }
-  ];
+const TWIDDLE_WITH_ROUTES = [
+  {
+    filename: "about.template.hbs",
+    content: "<p>About Page</p>"
+  },
+  {
+    filename: "index.template.hbs",
+    content: "<p>Main Page</p>"
+  },
+  {
+    filename: "application.template.hbs",
+    content: `{{#link-to "index" class="test-index-link"}}Index{{/link-to}}
+              {{#link-to "about" class="test-about-link"}}About{{/link-to}}
+
+              {{outlet}}`
+  },
+  {
+    filename: "router.js",
+    content: `import Ember from 'ember';
+              import config from './config/environment';
+
+              var Router = Ember.Router.extend({
+                location: config.locationType
+              });
 
-  const aboutLink = '.test-about-link';
-  const indexLink = '.test-index-link';
-  const outletText = 'p';
+              Router.map(function() {
+                this.route("about");
+              });
+
+              export default Router;`
+  },
+  {
+    filename: "twiddle.json",
+    content: `{
+                "version": "0.4.0",
+                "dependencies": {
+                  "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
+                  "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember.js",
+                  "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.13/ember-data.js",
+                  "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember-template-compiler.js"
+                }
+              }`
+  }
+];
+
+test('Able to do routing in a gist', function(assert) {
   let iframe_window;
 
-  runGist(files);
+  runGist(TWIDDLE_WITH_ROUTES);
 
-  andThen(function() {
-    iframe_window = outputPane();
+  andThen(() => {
+    this.registerWaiter();
+  });
 
+  andThen(() => {
+    assert.equal(find(addressBar).val(), '/', "Correct URL is shown in address bar 0");
+
+    this.registerWaiter();
+    iframe_window = outputPane();
     iframe_window.click(iframe_window.find(aboutLink));
   });
 
-  andThen(function() {
+  andThen(() => {
     assert.equal(outputContents(outletText), 'About Page', 'About Link leads to About Page being displayed');
+    assert.equal(find(addressBar).val(), '/about', "Correct URL is shown in address bar 1");
 
+    this.registerWaiter();
     iframe_window.click(iframe_window.find(indexLink));
   });
 
-  andThen(function() {
+  andThen(() => {
     assert.equal(outputContents(outletText), 'Main Page', 'Index Link leads to Main Page being displayed');
+    assert.equal(find(addressBar).val(), '/', "Correct URL is shown in address bar 2");
   });
 });
+
+test('URL can be changed via the address bar', function(assert) {
+  runGist(TWIDDLE_WITH_ROUTES);
+
+  andThen(() => {
+    this.registerWaiter();
+  });
+
+  andThen(function() {
+    assert.equal(find(addressBar).val(), '/', "Correct URL is shown in address bar 0");
+
+    click(addressBar);
+    fillIn(addressBar, '/about');
+    keyEvent(addressBar, 'keyup', 13);
+  });
+
+  andThen(function() {
+    assert.equal(outputContents(outletText), 'About Page', 'Changing the URL to /about and pressing enter leads to the About Page being displayed');
+    assert.equal(find(addressBar).val(), '/about', "Correct URL is shown in address bar 1");
+
+    click(addressBar);
+    fillIn(addressBar, '/');
+    keyEvent(addressBar, 'keyup', 13);
+  });
+
+  andThen(function() {
+    assert.equal(outputContents(outletText), 'Main Page', 'Changing the URL to / and pressing enter leads to the Main Page being displayed');
+    assert.equal(find(addressBar).val(), '/', "Correct URL is shown in address bar 2");
+  });
+});
+
+