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 {!Element} sidebarDiv The div corresponding to the sidebar.
+   * @extends {PageManager.Observer}
+   */
+  function Sidebar(sidebarDiv) {
+    /** @private {!Element} */
+    this.sidebarDiv_ = sidebarDiv;
+    /** @private {!Element} */
+    this.sidebarContent_ = this.sidebarDiv_.querySelector('.sidebar-content');
+    /** @private {!Element} */
+    this.sidebarList_ = this.sidebarContent_.querySelector('ul');
+
+    this.sidebarList_.querySelectorAll('li button').forEach(function(item) {
+      item.addEventListener('click', this.onItemClick_.bind(this));
+    }, this);
+
+    /** @private {!Element} */
+    this.overlayDiv_ = this.sidebarDiv_.querySelector('.overlay');
+    this.overlayDiv_.addEventListener('click', this.close.bind(this));
+
+    window.matchMedia('screen and (max-width: 600px)').addListener(
+        function(query) { if (!query.matches) this.close(); }.bind(this));
+  }
+
+  Sidebar.prototype = {
+    __proto__: PageManager.Observer.prototype,
+
+    /**
+     * Closes the sidebar. Only applies to layouts with window width <= 600px.
+     */
+    close: function() {
+      this.sidebarDiv_.classList.remove('open');
+      document.body.style.overflow = '';
+    },
+
+    /**
+     * Opens the sidebar. Only applies to layouts with window width <= 600px.
+     */
+    open: function() {
+      document.body.style.overflow = 'hidden';
+      this.sidebarDiv_.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.sidebarContent_.querySelectorAll('li').forEach(function(item) {
+        item.classList.toggle('selected', item.dataset.pageName === path);
+      });
+    },
+
+    /**
+     * Switches the page based on which sidebar list button was clicked.
+     * @param {!Event} event
+     * @private
+     */
+    onItemClick_: function(event) {
+      this.close();
+      PageManager.showPageByName(event.target.parentNode.dataset.pageName);
+    },
+  };
+
+  return {
+    Sidebar: Sidebar
+  };
+});