knomedia · July 3, 2014 18:10 · Jul 3, 2014
diff --git a/jsbin.jizuti.css b/jsbin.jizuti.css
@@ -0,0 +1,7 @@
+/* Put your CSS here */
+html, body {
+    margin: 20px;
+}
+.hidden {
+  display: none;
+}
diff --git a/jsbin.jizuti.html b/jsbin.jizuti.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Ember Starter Kit</title>
+    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
+    <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+    <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
+    <script src="http://builds.emberjs.com/tags/v1.5.1/ember.js"></script>
+  </head>
+  <body>
+
+    <div class='wrapper'>
+
+      <div>
+        <p>
+          Small example of managing focus in ember using events
+        </p>
+      </div>
+      <div id='emberz'></div>
+
+
+    </div>
+    <script type="text/x-handlebars">
+      {{outlet}}
+    </script>
+
+
+    <script type="text/x-handlebars" data-template-name="index">
+      <div class='group-header'>
+        <h3>Some Button that reveals some content</h3>
+        <button {{action 'toggle'}} aria-controls='group-detail'>
+          {{buttonLabel}}
+        </button>
+      </div>
+
+      <div id='group-detail' role='region' tabindex='0'
+           {{bind-attr aria-expanded='expanded'}}
+           {{bind-attr class='isExpanded::hidden'}} >
+           <span tabindex='0'>Here are some details</span>
+      </div>
+
+    </script>
+  </body>
+</html>
diff --git a/jsbin.jizuti.js b/jsbin.jizuti.js
@@ -0,0 +1,60 @@
+App = Ember.Application.create();
+
+App.Router.map(function() {
+  // put your routes here
+});
+
+App.IndexRoute = Ember.Route.extend({
+  model: function() {
+    return ['red', 'yellow', 'blue'];
+  }
+});
+
+
+App.IndexController = Ember.ObjectController.extend(Ember.Evented, {
+  isExpanded: false,
+
+  expanded: function(){
+    return '' + this.get('isExpanded');
+  }.property('isExpanded'),
+
+  buttonLabel: function() {
+    return (this.get('isExpanded'))? 'Hide Details' : 'Show Details';
+  }.property('isExpanded'),
+
+  actions: {
+    toggle: function() {
+      var eventName = 'groupExpanded';
+      this.toggleProperty('isExpanded');
+      if(!this.get('isExpanded')) {
+        eventName = 'groupHidden';
+      }
+      this.trigger(eventName);
+      return false;
+    }
+  }
+
+});
+
+App.IndexView = Ember.View.extend({
+  didInsertElement: function(){
+    this.get('controller').on('groupExpanded', this, this.focusDetails);
+    this.get('controller').on('groupHidden', this, this.focusHeader);
+  },
+  willDestroyElement: function() {
+    this.get('controller').off('groupExpanded', this, this.focusDetails);
+    this.get('controller').off('groupHidden', this, this.focusHeader);
+  },
+
+  focusDetails: function() {
+    Ember.run.scheduleOnce('afterRender', this, function() {
+      this.$('#group-detail').focus();
+    });
+  },
+
+  focusHeader: function() {
+    Ember.run.scheduleOnce('afterRender', this, function() {
+      this.$('.group-header button').focus();
+    });
+  }
+});