Fix touch interaction for edit workspace name and add workspace select

pboyer · Oct 2, 2014 · a25da0d · a25da0d
1 parent e788ff7
commit a25da0d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 5 deletions.
diff --git a/app/scripts/views/AppView.js b/app/scripts/views/AppView.js
@@ -64,6 +64,16 @@ define([  'backbone',
       'mouseout #add-workspace-button': 'hideAddWorkspaceSelect',
       'mouseover #add-workspace-select-element': 'showAddWorkspaceSelect',
       'mouseout #add-workspace-select-element': 'hideAddWorkspaceSelect',
+
+      // touch
+      'touchstart #add-workspace-button': 'toggleAddWorkspaceSelect'
+
+    },
+
+    toggleAddWorkspaceSelect: function(){
+
+      $('#add-workspace-select-element').toggle();
+
     },
 
     showHelpOnFirstExperience: function(){

diff --git a/app/scripts/views/WorkspaceTabView.js b/app/scripts/views/WorkspaceTabView.js
@@ -22,7 +22,11 @@ define(['backbone'], function(Backbone) {
       'mouseover': 'showEditButton',
       'mouseout': 'hideEditButton',
       'click .edit-button': 'startEdit',
-      'blur .workspace-name': 'endEdit'
+      'blur .workspace-name': 'endEdit',
+
+      // touch
+      'touchstart .edit-button': 'startEdit',
+      'touchstart': 'toggleShowingEditButton'
 
     },
 
@@ -40,10 +44,26 @@ define(['backbone'], function(Backbone) {
 
     },
 
+    toggleShowingEditButton: function(){
+
+      if ( this.editButtonShown ){
+        this.editButtonShown = false;
+        this.hideEditButton();
+      } else {
+        this.editButtonShown = true;
+        this.showEditButton();
+      }
+
+    },
+
     showEditButton: function() {
       this.$('.edit-button').css('visibility', 'visible');
     },
 
+    hideEditButton: function() {
+      this.$('.edit-button').css('visibility', 'hidden');
+    },
+
     startEdit: function(e) {
 
       this.$input.prop('disabled', false);
@@ -54,15 +74,15 @@ define(['backbone'], function(Backbone) {
     },
 
     endEdit: function() {
+
+      // the edit button is still visible on touch devices
+      this.hideEditButton();
+
       this.$input.prop('disabled', true);
       this.$input.css('pointer-events', 'none');
       this.model.set('name', this.$input.val() );
     },
 
-    hideEditButton: function() {
-      this.$('.edit-button').css('visibility', 'hidden');
-    },
-
     click: function(e) {
       this.model.app.set('currentWorkspace', this.model.get('_id'));
     },