WIP bug 997920 - Rocketbar cancel button

benfrancis · Apr 17, 2014 · e180b60 · e180b60
1 parent 5af9c23
commit e180b60
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 2 deletions.
diff --git a/apps/system/index.html b/apps/system/index.html
@@ -454,6 +454,7 @@
             <input id="rocketbar-input" type="text" x-inputmode="verbatim"
               placeholder="Search or enter address" data-l10n-id="search-or-enter-address" value="">
             </input>
+            <button type="reset" id="rocketbar-cancel" data-l10n-id="close">Close</button>
           </form>
         </div>
         <!-- Statusbar icons -->

diff --git a/apps/system/js/rocketbar.js b/apps/system/js/rocketbar.js
@@ -39,6 +39,7 @@ var Rocketbar = {
     this.titleContent = document.getElementById('rocketbar-title-content');
     this.form = document.getElementById('rocketbar-form');
     this.input = document.getElementById('rocketbar-input');
+    this.cancel = document.getElementById('rocketbar-cancel');
     this.results = document.getElementById('rocketbar-results');
 
     // Listen for settings changes
@@ -135,6 +136,7 @@ var Rocketbar = {
     this.input.addEventListener('focus', this);
     this.input.addEventListener('blur', this);
     this.input.addEventListener('input', this);
+    this.cancel.addEventListener('click', this);
     this.form.addEventListener('submit', this);
 
     // Listen for messages from search app
@@ -175,7 +177,9 @@ var Rocketbar = {
       case 'touchstart':
       case 'touchmove':
       case 'touchend':
-        this.handleTouch(e);
+        if (e.target != this.cancel) {
+          this.handleTouch(e);
+        }
         break;
       case 'transitionend':
         this.handleTransitionEnd(e);
@@ -189,6 +193,11 @@ var Rocketbar = {
       case 'input':
         this.handleInput(e);
         break;
+      case 'click':
+        if (e.target == this.cancel) {
+          this.handleCancel(e);
+        }
+        break;
       case 'submit':
         this.handleSubmit(e);
         break;
@@ -230,6 +239,7 @@ var Rocketbar = {
     this.input.removeEventListener('focus', this);
     this.input.removeEventListener('blur', this);
     this.input.removeEventListener('input', this);
+    this.cancel.removeEventListener('click', this);
     this.form.removeEventListener('submit', this);
 
     // Stop listening for messages from search app
@@ -565,6 +575,14 @@ var Rocketbar = {
       input: input
     });
   },
+
+  /**
+   * Handle click of cancel button.
+   */
+  handleCancel: function(e) {
+    this.deactivate();
+    this.hideResults();
+  },
 
   /**
    * Handle submission of the Rocketbar.

diff --git a/apps/system/style/rocketbar/rocketbar.css b/apps/system/style/rocketbar/rocketbar.css
@@ -33,7 +33,6 @@ body:not(.rb-enabled) #rocketbar {
 
 #rocketbar-title, #rocketbar-form {
   position: absolute;
-  width: calc(100% - 3.2rem);
   height: 3.6rem;
   background-color: #333;
   border-radius: 1.8rem;
@@ -43,6 +42,15 @@ body:not(.rb-enabled) #rocketbar {
   white-space: nowrap;
 }
 
+#rocketbar-title {
+  width: calc(100% - 3.2rem);
+}
+
+#rocketbar-form {
+  display: flex;
+  flex-direction: row;
+}
+
 #rocketbar-title-content, #rocketbar-input {
   display: block;
   width: 100%;
@@ -75,6 +83,19 @@ body:not(.rb-enabled) #rocketbar {
   border: none;
 }
 
+#rocketbar-input, #rocketbar-cancel {
+  flex: auto;
+}
+
+#rocketbar-cancel {
+  background: none;
+  border: none;
+  border-left: solid 1px rgba(255, 255, 255, 0.08);
+  color: #00AACC;
+  font-size: 1.4rem;
+  line-height: 1.8rem;
+}
+
 #rocketbar-title.hidden, #rocketbar-form.hidden {
   display: none;
 }