SwatchCubicBezierTooltip.js (3024B)
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 CubicBezierWidget, 9 } = require("resource://devtools/client/shared/widgets/CubicBezierWidget.js"); 10 const SwatchBasedEditorTooltip = require("resource://devtools/client/shared/widgets/tooltip/SwatchBasedEditorTooltip.js"); 11 12 const XHTML_NS = "http://www.w3.org/1999/xhtml"; 13 14 /** 15 * The swatch cubic-bezier tooltip class is a specific class meant to be used 16 * along with rule-view's generated cubic-bezier 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 * CubicBezierWidget. 20 * 21 * @param {Document} document 22 * The document to attach the SwatchCubicBezierTooltip. 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 SwatchCubicBezierTooltip extends SwatchBasedEditorTooltip { 28 constructor(document) { 29 super(document); 30 31 // Creating a cubic-bezier instance. 32 // this.widget will always be a promise that resolves to the widget instance 33 this.widget = this.setCubicBezierContent([0, 0, 1, 1]); 34 this._onUpdate = this._onUpdate.bind(this); 35 } 36 37 /** 38 * Fill the tooltip with a new instance of the cubic-bezier widget 39 * initialized with the given value, and return a promise that resolves to 40 * the instance of the widget 41 */ 42 43 async setCubicBezierContent(bezier) { 44 const { doc } = this.tooltip; 45 this.tooltip.panel.innerHTML = ""; 46 47 const container = doc.createElementNS(XHTML_NS, "div"); 48 container.className = "cubic-bezier-container"; 49 50 this.tooltip.panel.appendChild(container); 51 this.tooltip.setContentSize({ width: 510, height: 370 }); 52 53 await this.tooltip.once("shown"); 54 return new CubicBezierWidget(container, bezier); 55 } 56 57 /** 58 * Overriding the SwatchBasedEditorTooltip.show function to set the cubic 59 * bezier curve in the widget 60 */ 61 async show() { 62 // Call the parent class' show function 63 await super.show(); 64 // Then set the curve and listen to changes to preview them 65 if (this.activeSwatch) { 66 this.currentBezierValue = this.activeSwatch.nextSibling; 67 this.widget.then(widget => { 68 widget.off("updated", this._onUpdate); 69 widget.cssCubicBezierValue = this.currentBezierValue.textContent; 70 widget.on("updated", this._onUpdate); 71 this.emit("ready"); 72 }); 73 } 74 } 75 76 _onUpdate(bezier) { 77 if (!this.activeSwatch) { 78 return; 79 } 80 81 this.currentBezierValue.textContent = bezier + ""; 82 this.preview(bezier + ""); 83 } 84 85 destroy() { 86 super.destroy(); 87 this.currentBezierValue = null; 88 this.widget.then(widget => { 89 widget.off("updated", this._onUpdate); 90 widget.destroy(); 91 }); 92 } 93 } 94 95 module.exports = SwatchCubicBezierTooltip;