Bug 874155 - [SMS] Handle the edit mode without using the location ha…

…sh - r=gnarf * Removes #edit url and replaces with startEdit and cancelEdit on ThreadUI and ThreadListUI Closes gh-10078
mozilla-b2g · Jun 4, 2013 · bd9c7ed · bd9c7ed
1 parent 0689050
commit bd9c7ed
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 33 deletions.
diff --git a/apps/sms/index.html b/apps/sms/index.html
@@ -50,7 +50,7 @@
             <a href="#new" id="icon-add">
               <span class="icon icon-compose"></span>
             </a>
-            <a href="#edit" id="threads-edit-icon">
+            <a id="threads-edit-icon">
               <span class="icon icon-edit"></span>
             </a>
           </menu>
@@ -97,7 +97,7 @@ <h1 id="threads-edit-mode" data-l10n-id="editMode">Edit mode</h1>
             <span class="icon icon-back"></span>
           </a>
           <menu type="toolbar">
-            <a href="#edit" id="icon-edit">
+            <a id="messages-edit-icon">
               <span class="icon icon-edit"></span>
             </a>
           </menu>

diff --git a/apps/sms/js/activity_handler.js b/apps/sms/js/activity_handler.js
@@ -172,10 +172,6 @@ var ActivityHandler = {
           window.location.hash = threadHash;
           MessageManager.activity.isLocked = false;
           break;
-        case '#edit':
-          history.back();
-          showAction();
-          break;
         default:
           if (locationHash.indexOf('#thread=') !== -1) {
             // Don't switch back to thread list if we're

diff --git a/apps/sms/js/message_manager.js b/apps/sms/js/message_manager.js
@@ -238,11 +238,9 @@ var MessageManager = {
         break;
       case '#thread-list':
         //Keep the  visible button the :last-child
-        var editButton = document.getElementById('icon-edit');
+        var editButton = document.getElementById('messages-edit-icon');
         editButton.parentNode.appendChild(editButton);
-        if (mainWrapper.classList.contains('edit')) {
-          mainWrapper.classList.remove('edit');
-        } else if (threadMessages.classList.contains('new')) {
+        if (threadMessages.classList.contains('new')) {
           MessageManager.slide('right', function() {
             threadMessages.classList.remove('new');
           });
@@ -260,11 +258,6 @@ var MessageManager = {
           });
         }
         break;
-      case '#edit':
-        ThreadListUI.cleanForm();
-        ThreadUI.cleanForm();
-        mainWrapper.classList.toggle('edit');
-        break;
       default:
         var threadId = Threads.currentId;
         var filter;

diff --git a/apps/sms/js/thread_list_ui.js b/apps/sms/js/thread_list_ui.js
@@ -8,6 +8,9 @@ var ThreadListUI = {
   // threads. Updated in ThreadListUI.renderThreads
   count: 0,
 
+  // Set to |true| when in edit mode
+  inEditMode: false,
+
   init: function thlui_init() {
     var _ = navigator.mozL10n.get;
 
@@ -25,6 +28,8 @@ var ThreadListUI = {
       this[Utils.camelCase(id)] = document.getElementById('threads-' + id);
     }, this);
 
+    this.mainWrapper = document.getElementById('main-wrapper');
+
     this.delNumList = [];
     this.fullHeight = this.container.offsetHeight;
 
@@ -41,7 +46,11 @@ var ThreadListUI = {
     );
 
     this.cancelButton.addEventListener(
-      'click', this.cancelEditMode.bind(this)
+      'click', this.cancelEdit.bind(this)
+    );
+
+    this.editIcon.addEventListener(
+      'click', this.startEdit.bind(this)
     );
 
     this.container.addEventListener(
@@ -207,8 +216,8 @@ var ThreadListUI = {
       this.removeThread(threadId);
 
       if (--count === 0) {
+        this.cancelEdit();
         WaitingScreen.hide();
-        window.location.hash = '#thread-list';
       }
     }
 
@@ -252,8 +261,15 @@ var ThreadListUI = {
     ThreadListUI.editIcon.classList[addWhenEmpty]('disabled');
   },
 
-  cancelEditMode: function thlui_cancelEditMode() {
-    window.location.hash = '#thread-list';
+  startEdit: function thlui_edit() {
+    this.inEditMode = true;
+    this.cleanForm();
+    this.mainWrapper.classList.toggle('edit');
+  },
+
+  cancelEdit: function thlui_cancelEdit() {
+    this.inEditMode = false;
+    this.mainWrapper.classList.remove('edit');
   },
 
   renderThreads: function thlui_renderThreads(threads, renderCallback) {
@@ -414,7 +430,7 @@ var ThreadListUI = {
     if (!threadFound) {
       threadsContainer.appendChild(node);
     }
-    if (document.getElementById('main-wrapper').classList.contains('edit')) {
+    if (this.inEditMode) {
       this.checkInputs();
     }
   },

diff --git a/apps/sms/js/thread_ui.js b/apps/sms/js/thread_ui.js
@@ -55,6 +55,8 @@ var ThreadUI = global.ThreadUI = {
   // duration of the notification that message type was converted
   CONVERTED_MESSAGE_DURATION: 3000,
   recipients: null,
+  // Set to |true| when in edit mode
+  inEditMode: false,
   init: function thui_init() {
     var _ = navigator.mozL10n.get;
     var templateIds = ['contact', 'highlight', 'message', 'not-downloaded',
@@ -70,7 +72,7 @@ var ThreadUI = global.ThreadUI = {
       'check-all-button', 'uncheck-all-button',
       'contact-pick-button', 'back-button', 'send-button', 'attach-button',
       'delete-button', 'cancel-button',
-      'edit-mode', 'edit-form', 'tel-form',
+      'edit-icon', 'edit-mode', 'edit-form', 'tel-form',
       'max-length-notice', 'convert-notice'
     ].forEach(function(id) {
       this[Utils.camelCase(id)] = document.getElementById('messages-' + id);
@@ -142,6 +144,10 @@ var ThreadUI = global.ThreadUI = {
       'click', this.cancelEdit.bind(this)
     );
 
+    this.editIcon.addEventListener(
+      'click', this.startEdit.bind(this)
+    );
+
     this.deleteButton.addEventListener(
       'click', this.delete.bind(this)
     );
@@ -1021,6 +1027,12 @@ var ThreadUI = global.ThreadUI = {
     this.checkInputs();
   },
 
+  startEdit: function thui_edit() {
+    this.inEditMode = true;
+    this.cleanForm();
+    this.mainWrapper.classList.toggle('edit');
+  },
+
   delete: function thui_delete() {
     var question = navigator.mozL10n.get('deleteMessages-confirmation');
     if (window.confirm(question)) {
@@ -1044,12 +1056,12 @@ var ThreadUI = global.ThreadUI = {
             ThreadUI.removeMessageDOM(inputs[i].parentNode.parentNode);
           }
 
+          ThreadUI.cancelEdit();
+
           if (!ThreadUI.container.firstElementChild) {
-            ThreadUI.mainWrapper.classList.remove('edit');
             window.location.hash = '#thread-list';
-          } else {
-            window.history.back();
           }
+
           WaitingScreen.hide();
         });
       };
@@ -1059,7 +1071,8 @@ var ThreadUI = global.ThreadUI = {
   },
 
   cancelEdit: function thlui_cancelEdit() {
-    window.history.go(-1);
+    this.inEditMode = false;
+    this.mainWrapper.classList.remove('edit');
   },
 
   chooseMessage: function thui_chooseMessage(target) {
@@ -1144,7 +1157,7 @@ var ThreadUI = global.ThreadUI = {
   handleEvent: function thui_handleEvent(evt) {
     switch (evt.type) {
       case 'click':
-        if (window.location.hash !== '#edit') {
+        if (!this.inEditMode) {
           // if the click wasn't on an attachment check for other clicks
           if (!thui_mmsAttachmentClick(evt.target)) {
             this.handleMessageClick(evt);

diff --git a/apps/sms/test/unit/sms_test.js b/apps/sms/test/unit/sms_test.js
@@ -262,7 +262,7 @@ suite('SMS App Unit-Test', function() {
       });
 
       test('Select all/Deselect All buttons', function() {
-        document.getElementById('main-wrapper').classList.add('edit');
+        ThreadListUI.startEdit();
         // Retrieve all inputs
         var inputs = ThreadListUI.container.getElementsByTagName('input');
         // Activate all inputs
@@ -293,7 +293,7 @@ suite('SMS App Unit-Test', function() {
       });
 
       test('Select all while receiving new thread', function(done) {
-        document.getElementById('main-wrapper').classList.add('edit');
+        ThreadListUI.startEdit();
         ThreadListUI.toggleCheckedAll(true);
 
         var checkboxes =
@@ -334,7 +334,7 @@ suite('SMS App Unit-Test', function() {
       });
 
       test('checkInputs should fire in edit mode', function(done) {
-        document.getElementById('main-wrapper').classList.add('edit');
+        ThreadListUI.startEdit();
         ThreadListUI.checkInputs = stub();
 
         ThreadListUI.counter++;
@@ -352,7 +352,7 @@ suite('SMS App Unit-Test', function() {
       });
 
       test('checkInputs should not fire in normal mode', function(done) {
-        document.getElementById('main-wrapper').classList.remove('edit');
+        ThreadListUI.cancelEdit();
         ThreadListUI.checkInputs = stub();
 
         ThreadListUI.counter++;
@@ -448,7 +448,7 @@ suite('SMS App Unit-Test', function() {
       });
 
       test('Select all while receiving new message', function(done) {
-        document.getElementById('main-wrapper').classList.add('edit');
+        ThreadUI.startEdit();
         ThreadUI.toggleCheckedAll(true);
 
         var checkboxes =
@@ -511,7 +511,7 @@ suite('SMS App Unit-Test', function() {
       });
 
       test('checkInputs should fire in edit mode', function(done) {
-        document.getElementById('main-wrapper').classList.add('edit');
+        ThreadUI.startEdit();
         ThreadUI.checkInputs = stub();
 
         // now a new message comes in...
@@ -529,7 +529,7 @@ suite('SMS App Unit-Test', function() {
       });
 
       test('checkInputs should not fire in normal mode', function(done) {
-        document.getElementById('main-wrapper').classList.remove('edit');
+        ThreadUI.cancelEdit();
         ThreadUI.checkInputs = stub();
 
         // now a new message comes in...