summaryrefslogtreecommitdiffstats
path: root/browser/base/content/newtab/customize.js
diff options
context:
space:
mode:
Diffstat (limited to 'browser/base/content/newtab/customize.js')
-rw-r--r--browser/base/content/newtab/customize.js133
1 files changed, 133 insertions, 0 deletions
diff --git a/browser/base/content/newtab/customize.js b/browser/base/content/newtab/customize.js
new file mode 100644
index 000000000..28a52373c
--- /dev/null
+++ b/browser/base/content/newtab/customize.js
@@ -0,0 +1,133 @@
+#ifdef 0
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+#endif
+
+var gCustomize = {
+ _nodeIDSuffixes: [
+ "blank",
+ "button",
+ "classic",
+ "enhanced",
+ "panel",
+ "overlay",
+ "learn"
+ ],
+
+ _nodes: {},
+
+ init: function() {
+ for (let idSuffix of this._nodeIDSuffixes) {
+ this._nodes[idSuffix] = document.getElementById("newtab-customize-" + idSuffix);
+ }
+
+ this._nodes.button.addEventListener("click", e => this.showPanel(e));
+ this._nodes.blank.addEventListener("click", this);
+ this._nodes.classic.addEventListener("click", this);
+ this._nodes.enhanced.addEventListener("click", this);
+ this._nodes.learn.addEventListener("click", this);
+
+ this.updateSelected();
+ },
+
+ hidePanel: function() {
+ this._nodes.overlay.addEventListener("transitionend", function onTransitionEnd() {
+ gCustomize._nodes.overlay.removeEventListener("transitionend", onTransitionEnd);
+ gCustomize._nodes.overlay.style.display = "none";
+ });
+ this._nodes.overlay.style.opacity = 0;
+ this._nodes.button.removeAttribute("active");
+ this._nodes.panel.removeAttribute("open");
+ document.removeEventListener("click", this);
+ document.removeEventListener("keydown", this);
+ },
+
+ showPanel: function(event) {
+ if (this._nodes.panel.getAttribute("open") == "true") {
+ return;
+ }
+
+ let {panel, button, overlay} = this._nodes;
+ overlay.style.display = "block";
+ panel.setAttribute("open", "true");
+ button.setAttribute("active", "true");
+ setTimeout(() => {
+ // Wait for display update to take place, then animate.
+ overlay.style.opacity = 0.8;
+ }, 0);
+
+ document.addEventListener("click", this);
+ document.addEventListener("keydown", this);
+
+ // Stop the event propogation to prevent panel from immediately closing
+ // via the document click event that we just added.
+ event.stopPropagation();
+ },
+
+ handleEvent: function(event) {
+ switch (event.type) {
+ case "click":
+ this.onClick(event);
+ break;
+ case "keydown":
+ this.onKeyDown(event);
+ break;
+ }
+ },
+
+ onClick: function(event) {
+ if (event.currentTarget == document) {
+ if (!this._nodes.panel.contains(event.target)) {
+ this.hidePanel();
+ }
+ }
+ switch (event.currentTarget.id) {
+ case "newtab-customize-blank":
+ sendAsyncMessage("NewTab:Customize", {enabled: false, enhanced: false});
+ break;
+ case "newtab-customize-classic":
+ if (this._nodes.enhanced.getAttribute("selected")){
+ sendAsyncMessage("NewTab:Customize", {enabled: true, enhanced: true});
+ } else {
+ sendAsyncMessage("NewTab:Customize", {enabled: true, enhanced: false});
+ }
+ break;
+ case "newtab-customize-enhanced":
+ sendAsyncMessage("NewTab:Customize", {enabled: true, enhanced: !gAllPages.enhanced});
+ break;
+ case "newtab-customize-learn":
+ this.showLearn();
+ break;
+ }
+ },
+
+ onKeyDown: function(event) {
+ if (event.keyCode == event.DOM_VK_ESCAPE) {
+ this.hidePanel();
+ }
+ },
+
+ showLearn: function() {
+ window.open(TILES_INTRO_LINK, 'new_window');
+ this.hidePanel();
+ },
+
+ updateSelected: function() {
+ let {enabled, enhanced} = gAllPages;
+ let selected = enabled ? enhanced ? "enhanced" : "classic" : "blank";
+ ["enhanced", "classic", "blank"].forEach(id => {
+ let node = this._nodes[id];
+ if (id == selected) {
+ node.setAttribute("selected", true);
+ }
+ else {
+ node.removeAttribute("selected");
+ }
+ });
+ if (selected == "enhanced") {
+ // If enhanced is selected, so is classic (since enhanced is a subitem of classic)
+ this._nodes.classic.setAttribute("selected", true);
+ }
+ },
+};