Bug 994152 Loop needs a "do not disturb" control. r=mhammond,r=Standard8

browser/components/loop/content/js/panel.js

@@ -18,6 +18,37 @@ loop.panel = (function(_, mozL10n) {
    */
   var router;
 
+  /**
+   * Do not disturb panel subview.
+   */
+  var DoNotDisturbView = sharedViews.BaseView.extend({
+    template: _.template([
+      '<label>',
+      '  <input type="checkbox" <%- checked %>>',
+      '  <span data-l10n-id="do_not_disturb"></span>',
+      '</label>',
+    ].join('')),
+
+    events: {
+      "click input[type=checkbox]": "toggle"
+    },
+
+    /**
+     * Toggles mozLoop activation status.
+     */
+    toggle: function() {
+      navigator.mozLoop.doNotDisturb = !navigator.mozLoop.doNotDisturb;
+      this.render();
+    },
+
+    render: function() {
+      this.$el.html(this.template({
+        checked: navigator.mozLoop.doNotDisturb ? "checked" : ""
+      }));
+      return this;
+    }
+  });
+
   /**
    * Panel view.
    */
@@ -27,23 +58,30 @@ loop.panel = (function(_, mozL10n) {
       '  <p data-l10n-id="get_link_to_share"></p>',
       '</div>',
       '<div class="action">',
-      '  <p class="invite">',
-      '    <input type="text" name="caller" data-l10n-id="caller">',
-      '    <button class="get-url btn btn-success disabled" href=""',
+      '  <form class="invite">',
+      '    <input type="text" name="caller" data-l10n-id="caller" required>',
+      '    <button type="submit" class="get-url btn btn-success"',
       '       data-l10n-id="get_a_call_url"></button>',
-      '  </p>',
+      '  </form>',
       '  <p class="result hide">',
       '    <input id="call-url" type="url" readonly>',
       '    <a class="go-back btn btn-info" href="" data-l10n-id="new_url"></a>',
       '  </p>',
+      '  <p class="dnd"></p>',
       '</div>',
     ].join("")),
 
     className: "share generate-url",
 
+    /**
+     * Do not disturb view.
+     * @type {DoNotDisturbView|undefined}
+     */
+    dndView: undefined,
+
     events: {
       "keyup input[name=caller]": "changeButtonState",
-      "click .get-url": "getCallUrl",
+      "submit form.invite": "getCallUrl",
       "click a.go-back": "goBack"
     },
 
@@ -54,7 +92,7 @@ loop.panel = (function(_, mozL10n) {
       }
       this.notifier = options.notifier;
       this.client = new loop.shared.Client({
-        baseServerUrl: window.navigator.mozLoop.serverUrl
+        baseServerUrl: navigator.mozLoop.serverUrl
       });
     },
 
@@ -69,6 +107,7 @@ loop.panel = (function(_, mozL10n) {
         this.clearPending();
         if (err) {
           this.notifier.errorL10n("unable_retrieve_url");
+          this.render();
           return;
         }
         this.onCallUrlReceived(callUrlData);
@@ -113,6 +152,13 @@ loop.panel = (function(_, mozL10n) {
       } else {
         this.$(".get-url").addClass("disabled").attr("disabled", "disabled");
       }
+    },
+
+    render: function() {
+      this.$el.html(this.template());
+      // Do not Disturb sub view
+      this.dndView = new DoNotDisturbView({el: this.$(".dnd")}).render();
+      return this;
     }
   });
 
@@ -179,7 +225,7 @@ loop.panel = (function(_, mozL10n) {
   function init() {
     // Do the initial L10n setup, we do this before anything
     // else to ensure the L10n environment is setup correctly.
-    mozL10n.initialize(window.navigator.mozLoop);
+    mozL10n.initialize(navigator.mozLoop);
 
     router = new PanelRouter({
       document: document,
@@ -196,6 +242,7 @@ loop.panel = (function(_, mozL10n) {
   return {
     init: init,
     PanelView: PanelView,
+    DoNotDisturbView: DoNotDisturbView,
     PanelRouter: PanelRouter
   };
 })(_, document.mozL10n);