From 367eb0f92c5eb39832b5f0736adce10e0a3081a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?"J.=20Rene=CC=81e=20Beach"?= <splendidnoise@gmail.com>
Date: Mon, 3 Dec 2012 14:31:31 -0500
Subject: [PATCH] in-progress commit for turning the Edit bar button into the
 toggle for the in-place editing state toggle.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: J. Renée Beach <splendidnoise@gmail.com>
---
 js/edit.js                |    2 +-
 js/routers/edit-router.js |    4 +--
 js/views/menu-view.js     |   65 ++++++++++++++++++++++++++++++++++++++-------
 3 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/js/edit.js b/js/edit.js
index f496d17..7202704 100644
--- a/js/edit.js
+++ b/js/edit.js
@@ -26,7 +26,7 @@ Drupal.behaviors.edit = {
     var $context = $(context);
 
     // Initialize the Edit app.
-    $context.find('#edit_view-edit-toggles').once('edit-init', Drupal.edit.init);
+    $context.find('#toolbar-tab-edit').once('edit-init', Drupal.edit.init);
 
     // As soon as there is at least one editable property, show the Edit tab in
     // the toolbar.
diff --git a/js/routers/edit-router.js b/js/routers/edit-router.js
index 4d7b196..56b76d0 100644
--- a/js/routers/edit-router.js
+++ b/js/routers/edit-router.js
@@ -13,7 +13,7 @@ Drupal.edit.routers.EditRouter = Backbone.Router.extend({
   appModel: null,
 
   routes: {
-    "quick-edit": "edit",
+    "edit": "edit",
     "view": "view",
     "": "view"
   },
@@ -40,7 +40,7 @@ Drupal.edit.routers.EditRouter = Backbone.Router.extend({
           that.appModel.set('isViewing', true);
         }
         else {
-          that.navigate('#quick-edit');
+          that.navigate('#edit');
         }
       });
     }
diff --git a/js/views/menu-view.js b/js/views/menu-view.js
index 834f743..2406b4c 100644
--- a/js/views/menu-view.js
+++ b/js/views/menu-view.js
@@ -10,12 +10,26 @@ Drupal.edit = Drupal.edit || {};
 Drupal.edit.views = Drupal.edit.views || {};
 Drupal.edit.views.MenuView = Backbone.View.extend({
 
+  events: {
+    'click #toolbar-tab-edit': 'editClickHandler',
+    'click #toolbar-administration .tab a': 'tabClickHandler'
+  },
+
   /**
    * Implements Backbone Views' initialize() function.
    */
   initialize: function() {
     _.bindAll(this, 'stateChange');
     this.model.on('change:isViewing', this.stateChange);
+    // @todo
+    // Re-implement hook_toolbar and the corresponding JavaScript behaviors
+    // once https://drupal.org/node/1847198 is resolved. The toolbar tray is
+    // necessary when the page request is processed because its render element
+    // has an #attached property with the Edit module library code assigned to
+    // it. Currently a toolbar tab is not passed as a renderable array, so
+    // #attached properties are not processed. The toolbar tray DOM element is
+    // unnecessary right now, so it is removed.
+    this.$el.find('#toolbar-tray-edit').remove();
 
     // We have to call stateChange() here, because URL fragments are not passed
     // the server, thus the wrong anchor may be marked as active.
@@ -26,16 +40,47 @@ Drupal.edit.views.MenuView = Backbone.View.extend({
    * Listens to app state changes.
    */
   stateChange: function() {
-    // Unmark whichever one is currently marked as active.
-    this.$('a.edit_view-edit-toggle')
-      .removeClass('active')
-      .parent().removeClass('active');
-
-    // Mark the correct one as active.
-    var activeAnchor = this.model.get('isViewing') ? 'view' : 'edit';
-    this.$('a.edit_view-edit-toggle.edit-' + activeAnchor)
-      .addClass('active')
-      .parent().addClass('active');
+    var isViewing = this.model.get('isViewing');
+    // Toggle the state of the Toolbar Edit tab based on the isViewing state.
+    this.$el.find('#toolbar-tab-edit').toggleClass('active', !isViewing);
+    // Manage the toolbar state until
+    // https://drupal.org/node/1847198 is resolved
+    if (!isViewing) {
+      // Remove the 'toolbar-tray-open' class from the body element.
+      this.$el.removeClass('toolbar-tray-open');
+      // Deactivate any other active tabs and trays.
+      this.$el
+        .find('.bar a', '#toolbar-administration')
+        .not('#toolbar-tab-edit')
+        .add('.tray', '#toolbar-administration')
+        .removeClass('active');
+    }
+  },
+  /**
+   * Handles clicks on the edit tab of the toolbar.
+   *
+   * @param {Object} event
+   */
+  editClickHandler: function (event) {
+    var isViewing = this.model.get('isViewing');
+    // Toggle the href of the Toolbar Edit tab based on the isViewing state. The
+    // href value should represent to state to be entered.
+    this.$el.find('#toolbar-tab-edit').attr('href', (isViewing) ? '#edit' : '#view');
+    if (!isViewing) {
+      this.model.set('isViewing', !isViewing);
+    }
+  },
+  /**
+   * Handles clicks on tabs of the toolbar other than the edit tab.
+   *
+   * STILL WORKING ON THIS.
+   *
+   * @param {Object} event
+   */
+  tabClickHandler: function (event) {
+    if (this.model.get('isViewing')) {
+      this.model.set('isViewing', false);
+    }
   }
 });
 
-- 
1.7.10.4