1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
8 * Instances of SyncedTabsDeckView render DOM nodes from a given state.
9 * No state is kept internaly and the DOM will completely
10 * rerender unless the state flags `isUpdatable`, which helps
11 * make small changes without the overhead of a full rerender.
13 export const SyncedTabsDeckView = function (window, tabListComponent, props) {
16 this._window = window;
17 this._doc = window.document;
19 this._tabListComponent = tabListComponent;
20 this._deckTemplate = this._doc.getElementById("deck-template");
21 this.container = this._doc.createElement("div");
24 SyncedTabsDeckView.prototype = {
26 if (state.isUpdatable) {
34 let deck = this._doc.importNode(
35 this._deckTemplate.content,
40 let tabListWrapper = this._doc.createElement("div");
41 tabListWrapper.className = "tabs-container sync-state";
42 this._tabListComponent.init();
43 tabListWrapper.appendChild(this._tabListComponent.container);
44 deck.appendChild(tabListWrapper);
45 this.container.appendChild(deck);
47 this._attachListeners();
52 this._tabListComponent.uninit();
53 this.container.remove();
57 // Note that we may also want to update elements that are outside of the
58 // deck, so use the document to find the class names rather than our
60 for (let panel of state.panels) {
62 Array.prototype.map.call(
63 this._doc.getElementsByClassName(panel.id),
64 item => item.classList.add("selected")
67 Array.prototype.map.call(
68 this._doc.getElementsByClassName(panel.id),
69 item => item.classList.remove("selected")
76 while (this.container.firstChild) {
77 this.container.firstChild.remove();
82 let syncPrefLinks = this.container.querySelectorAll(".sync-prefs");
83 for (let link of syncPrefLinks) {
84 link.addEventListener("click", this.props.onSyncPrefClick);
87 .querySelector(".connect-device")
88 .addEventListener("click", this.props.onConnectDeviceClick);