From 3a912bd89e6bd5270c9d919456bdb9c13622e2b5 Mon Sep 17 00:00:00 2001
From: Robert Jackson <robert.w.jackson@me.com>
Date: Tue, 1 Apr 2014 22:09:28 -0400
Subject: [PATCH] Refactor navbar to eliminate nested {{link-to}}.

no related issue

This is essentially setting up a binding from the `LinkView`'s `active`
status and whatever is set as `alternativeActive` in the `{{link-to}}`
(in our case the `activating-list-item` component.

Screenshots showing that the proper CSS classes are given:

![screenshot](http://monosnap.com/image/tzOH6n82rIVGNEFAUWVOLN52QuASQ4.png)

![screenshot](http://monosnap.com/image/5gmcwJcj0kgEXt8lnET4OKgIZ8KRpH.png)

![screenshot](http://monosnap.com/image/UCVNukTXLMNfVneLhzwVyhkrVlGSBt.png)
---
 core/client/app.js                                 |  3 ++-
 core/client/components/activating-list-item.js     |  5 +++++
 core/client/templates/-navbar.hbs                  | 14 +++-----------
 .../templates/components/activating-list-item.hbs  |  1 +
 core/client/utils/link-view.js                     |  9 +++++++++
 5 files changed, 20 insertions(+), 12 deletions(-)
 create mode 100644 core/client/components/activating-list-item.js
 create mode 100644 core/client/templates/components/activating-list-item.hbs
 create mode 100644 core/client/utils/link-view.js

diff --git a/core/client/app.js b/core/client/app.js
index 49b5c9af01..ecee1b0e4f 100755
--- a/core/client/app.js
+++ b/core/client/app.js
@@ -1,6 +1,7 @@
 import Resolver from 'ember/resolver';
 import initFixtures from 'ghost/fixtures/init';
 import {currentUser, injectCurrentUser} from 'ghost/initializers/current-user';
+import 'ghost/utils/link-view';
 
 var App = Ember.Application.extend({
     /**
@@ -20,4 +21,4 @@ initFixtures();
 App.initializer(currentUser);
 App.initializer(injectCurrentUser);
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/core/client/components/activating-list-item.js b/core/client/components/activating-list-item.js
new file mode 100644
index 0000000000..d9b3f2c638
--- /dev/null
+++ b/core/client/components/activating-list-item.js
@@ -0,0 +1,5 @@
+export default Ember.Component.extend({
+    tagName: 'li',
+    classNameBindings: ['active'],
+    active: false
+});
diff --git a/core/client/templates/-navbar.hbs b/core/client/templates/-navbar.hbs
index 1041a522b9..7666f14c68 100644
--- a/core/client/templates/-navbar.hbs
+++ b/core/client/templates/-navbar.hbs
@@ -4,17 +4,9 @@
     </a>
     <nav id="global-nav" role="navigation">
         <ul id="main-menu" >
-            {{!-- @TODO: don't nest link-to attributes
-                currently required to get proper class styling --}}
-            {{#link-to "posts" class="content" tagName="li" disabled=true}}
-                {{#link-to "posts"}}Content{{/link-to}}
-            {{/link-to}}
-            {{#link-to "new" class="editor" tagName="li" disabled=true}}
-                {{#link-to "new"}}New post{{/link-to}}
-            {{/link-to}}
-            {{#link-to "settings" class="settings" tagName="li" disabled=true}}
-                {{#link-to "settings"}}Settings{{/link-to}}
-            {{/link-to}}
+            {{activating-list-item route="posts" title="Content" classNames="content"}}
+            {{activating-list-item route="new" title="New post" classNames="content"}}
+            {{activating-list-item route="settings" title="Settings" classNames="content"}}
 
             <li id="usermenu" class="usermenu subnav">
                 <a href="#" class="dropdown">
diff --git a/core/client/templates/components/activating-list-item.hbs b/core/client/templates/components/activating-list-item.hbs
new file mode 100644
index 0000000000..15d2f4be23
--- /dev/null
+++ b/core/client/templates/components/activating-list-item.hbs
@@ -0,0 +1 @@
+{{#link-to route alternateActive=active}}{{title}}{{yield}}{{/link-to}}
diff --git a/core/client/utils/link-view.js b/core/client/utils/link-view.js
new file mode 100644
index 0000000000..9b0b85a452
--- /dev/null
+++ b/core/client/utils/link-view.js
@@ -0,0 +1,9 @@
+Ember.LinkView.reopen({
+    active: Ember.computed('resolvedParams', 'routeArgs', function () {
+        var isActive = this._super();
+
+        Ember.set(this, 'alternateActive', isActive);
+
+        return isActive;
+    })
+});