tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

SwatchLinearEasingFunctionTooltip.js (3198B)

      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/. */
      4 
      5 "use strict";
      6 
      7 const {
      8  LinearEasingFunctionWidget,
      9 } = require("devtools/client/shared/widgets/LinearEasingFunctionWidget");
     10 const SwatchBasedEditorTooltip = require("devtools/client/shared/widgets/tooltip/SwatchBasedEditorTooltip");
     11 
     12 const XHTML_NS = "http://www.w3.org/1999/xhtml";
     13 
     14 /**
     15 * The swatch linear-easing-function tooltip class is a specific class meant to be used
     16 * along with rule-view's generated linear-easing-function swatches.
     17 * It extends the parent SwatchBasedEditorTooltip class.
     18 * It just wraps a standard Tooltip and sets its content with an instance of a
     19 * LinearEasingFunctionWidget.
     20 *
     21 * @param {Document} document
     22 *        The document to attach the SwatchLinearEasingFunctionTooltip. This is either the toolbox
     23 *        document if the tooltip is a popup tooltip or the panel's document if it is an
     24 *        inline editor.
     25 */
     26 
     27 class SwatchLinearEasingFunctionTooltip extends SwatchBasedEditorTooltip {
     28  constructor(document) {
     29    super(document);
     30 
     31    this.onWidgetUpdated = this.onWidgetUpdated.bind(this);
     32 
     33    // Creating a linear-easing-function instance.
     34    // this.widget will always be a promise that resolves to the widget instance
     35    this.widget = this.createWidget();
     36  }
     37 
     38  /**
     39   * Fill the tooltip with a new instance of the linear-easing-function widget
     40   * initialized with the given value, and return a promise that resolves to
     41   * the instance of the widget
     42   */
     43 
     44  async createWidget() {
     45    const { doc } = this.tooltip;
     46    this.tooltip.panel.innerHTML = "";
     47 
     48    const container = doc.createElementNS(XHTML_NS, "div");
     49    container.className = "linear-easing-function-container";
     50 
     51    this.tooltip.panel.appendChild(container);
     52    this.tooltip.setContentSize({ width: 400, height: 400 });
     53 
     54    await this.tooltip.once("shown");
     55    return new LinearEasingFunctionWidget(container);
     56  }
     57 
     58  /**
     59   * Overriding the SwatchBasedEditorTooltip.show function to set the linear function line
     60   * in the widget
     61   */
     62  async show() {
     63    // Call the parent class' show function
     64    await super.show();
     65    // Then set the line and listen to changes to preview them
     66    if (this.activeSwatch) {
     67      this.ruleViewCurrentLinearValueElement = this.activeSwatch.nextSibling;
     68      this.widget.then(widget => {
     69        widget.off("updated", this.onWidgetUpdated);
     70        widget.setCssLinearValue(this.activeSwatch.getAttribute("data-linear"));
     71        widget.on("updated", this.onWidgetUpdated);
     72        this.emit("ready");
     73      });
     74    }
     75  }
     76 
     77  onWidgetUpdated(newValue) {
     78    if (!this.activeSwatch) {
     79      return;
     80    }
     81 
     82    this.ruleViewCurrentLinearValueElement.textContent = newValue;
     83    this.activeSwatch.setAttribute("data-linear", newValue);
     84    this.preview(newValue);
     85  }
     86 
     87  destroy() {
     88    super.destroy();
     89    this.currentFunctionText = null;
     90    this.widget.then(widget => {
     91      widget.off("updated", this.onWidgetUpdated);
     92      widget.destroy();
     93    });
     94  }
     95 }
     96 
     97 module.exports = SwatchLinearEasingFunctionTooltip;