bluetooth: Add sidebar and page manager for chrome://bluetooth-internals.

chrome/browser/resources/bluetooth_internals/sidebar.js

+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * Javascript for Sidebar, served from chrome://bluetooth-internals/.
+ */
+
+cr.define('sidebar', function() {
+  /** @const {!cr.ui.pageManager.PageManager}*/
+  var PageManager = cr.ui.pageManager.PageManager;
+
+  /**
+   * A side menu that lists the currently navigable pages.
+   * @constructor
+   * @param {string} sidebarDivId ID of the div corresponding to the sidebar.
+   * @param {string} overlayDivId ID of the div corresponding to the overlay.
+   * @extends {PageManager.Observer}
+   */
+  function Sidebar(sidebarDivId, overlayDivId) {
+    /** @private {!Element} */
+    this.sidebarDiv_ = $(sidebarDivId);
+    /** @private {!Element} */
+    this.sidebarList_ = this.sidebarDiv_.querySelector('ul');
+
+    this.sidebarDiv_.querySelectorAll('li').forEach(function(item) {
+      item.addEventListener('click', function() {
+        this.close();
+        PageManager.showPageByName(item.dataset.pageName);
+      }.bind(this));
+    }.bind(this));
+
+    /** @private {!Element} */
+    this.overlayDiv_ = $(overlayDivId);
+    this.overlayDiv_.addEventListener('click', this.close.bind(this));
+  }
+
+  Sidebar.prototype = {
+    __proto__: PageManager.Observer.prototype,
+
+    /**
+     * Closes the sidebar. Only applies to mobile layouts.
+     */
+    close: function() {
+      this.sidebarList_.classList.remove('open');
+      this.overlayDiv_.classList.remove('open');
+    },
+
+    /**
+     * Opens the sidebar. Only applies to mobile layouts.
+     */
+    open: function() {
+      this.sidebarList_.classList.add('open');
+      this.overlayDiv_.classList.add('open');
+    },
+
+    /**
+     * Called when a page is navigated to.
+     * @override
+     * @param {string} path The path of the page being visited.
+     */
+    updateHistory: function(path) {
+      this.sidebarDiv_.querySelectorAll('li').forEach(function(item) {
+        item.classList.toggle('active', item.dataset.pageName === path);
+      });
+    }
+  };
+
+  return {
+    Sidebar: Sidebar
+  };
+});