Source code
Revision control
Copy as Markdown
Other Tools
/* 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
"use strict";
this.MarqueeWidget = class {
constructor(shadowRoot) {
this.shadowRoot = shadowRoot;
this.element = shadowRoot.host;
this.document = this.element.ownerDocument;
this.window = this.document.defaultView;
// This needed for behavior=alternate, in order to know in which of the two
// directions we're going.
this.dirsign = 1;
this._currentLoop = this.element.loop;
this.animation = null;
this._restartScheduled = null;
}
onsetup() {
// White-space isn't allowed because a marquee could be
// inside 'white-space: pre'
this.shadowRoot.innerHTML = `<link rel="stylesheet" href="chrome://global/content/elements/marquee.css"
/><slot></slot>`;
this._mutationObserver = new this.window.MutationObserver(aMutations =>
this._mutationActor(aMutations)
);
this._mutationObserver.observe(this.element, {
attributes: true,
attributeOldValue: true,
attributeFilter: ["loop", "direction", "behavior"],
});
// init needs to be run after the page has loaded in order to calculate
// the correct height/width
if (this.document.readyState == "complete") {
this.init();
} else {
this.window.addEventListener("load", this, { once: true });
}
this.shadowRoot.addEventListener("marquee-start", this);
this.shadowRoot.addEventListener("marquee-stop", this);
}
teardown() {
this.doStop();
this._mutationObserver.disconnect();
this.window.removeEventListener("load", this);
this.shadowRoot.removeEventListener("marquee-start", this);
this.shadowRoot.removeEventListener("marquee-stop", this);
this.shadowRoot.replaceChildren();
}
handleEvent(aEvent) {
if (!aEvent.isTrusted) {
return;
}
switch (aEvent.type) {
case "load":
this.init();
break;
case "marquee-start":
this.doStart();
break;
case "marquee-stop":
this.doStop();
break;
case "finish":
this._animationFinished();
break;
}
}
_animationFinished() {
let behavior = this.element.behavior;
let shouldLoop =
this._currentLoop > 1 || (this._currentLoop == -1 && behavior != "slide");
if (shouldLoop) {
if (this._currentLoop > 0) {
this._currentLoop--;
}
if (behavior == "alternate") {
this.dirsign = -this.dirsign;
}
this.doStop();
this.doStart();
}
}
get scrollDelayWithTruespeed() {
if (this.element.scrollDelay < 60 && !this.element.trueSpeed) {
return 60;
}
return this.element.scrollDelay;
}
get slot() {
return this.shadowRoot.lastChild;
}
/**
* Computes CSS-derived values needed to compute the transform of the
* contents.
*
* In particular, it measures the auto width and height of the contents,
* and the effective width and height of the marquee itself, along with its
* css directionality (which affects the effective direction).
*/
getMetrics() {
let slot = this.slot;
slot.style.width = "max-content";
let slotCS = this.window.getComputedStyle(slot);
let marqueeCS = this.window.getComputedStyle(this.element);
let contentWidth = parseFloat(slotCS.width) || 0;
let contentHeight = parseFloat(slotCS.height) || 0;
let marqueeWidth = parseFloat(marqueeCS.width) || 0;
let marqueeHeight = parseFloat(marqueeCS.height) || 0;
slot.style.width = "";
return {
contentWidth,
contentHeight,
marqueeWidth,
marqueeHeight,
cssDirection: marqueeCS.direction,
};
}
/**
* Gets the layout metrics from getMetrics(), and returns an object
* describing the start, end, and axis of the animation for the given marquee
* behavior and direction.
*/
getTransformParameters({
contentWidth,
contentHeight,
marqueeWidth,
marqueeHeight,
cssDirection,
}) {
const innerWidth = marqueeWidth - contentWidth;
const innerHeight = marqueeHeight - contentHeight;
const dir = this.element.direction;
let start = 0;
let end = 0;
const axis = dir == "up" || dir == "down" ? "y" : "x";
switch (this.element.behavior) {
case "alternate":
switch (dir) {
case "up":
case "down": {
if (innerHeight >= 0) {
start = innerHeight;
end = 0;
} else {
start = 0;
end = innerHeight;
}
if (dir == "down") {
[start, end] = [end, start];
}
if (this.dirsign == -1) {
[start, end] = [end, start];
}
break;
}
case "right":
case "left":
default: {
if (innerWidth >= 0) {
start = innerWidth;
end = 0;
} else {
start = 0;
end = innerWidth;
}
if (dir == "right") {
[start, end] = [end, start];
}
if (cssDirection == "rtl") {
[start, end] = [end, start];
}
if (this.dirsign == -1) {
[start, end] = [end, start];
}
break;
}
}
break;
case "slide":
switch (dir) {
case "up": {
start = marqueeHeight;
end = 0;
break;
}
case "down": {
start = -contentHeight;
end = innerHeight;
break;
}
case "right":
default: {
let isRight = dir == "right";
if (cssDirection == "rtl") {
isRight = !isRight;
}
if (isRight) {
start = -contentWidth;
end = innerWidth;
} else {
start = marqueeWidth;
end = 0;
}
break;
}
}
break;
case "scroll":
default:
switch (dir) {
case "up":
case "down": {
start = marqueeHeight;
end = -contentHeight;
if (dir == "down") {
[start, end] = [end, start];
}
break;
}
case "right":
case "left":
default: {
start = marqueeWidth;
end = -contentWidth;
if (dir == "right") {
[start, end] = [end, start];
}
if (cssDirection == "rtl") {
[start, end] = [end, start];
}
break;
}
}
break;
}
return { start, end, axis };
}
/**
* Measures the marquee contents, and starts the marquee animation if needed.
* The translate animation is applied to the <slot> element.
* Bouncing and looping is implemented in the finish event handler for the
* given animation (see _animationFinished()).
*/
doStart() {
if (this.animation) {
return;
}
let scrollAmount = this.element.scrollAmount;
if (!scrollAmount) {
return;
}
let metrics = this.getMetrics();
let { axis, start, end } = this.getTransformParameters(metrics);
let duration =
(Math.abs(end - start) * this.scrollDelayWithTruespeed) / scrollAmount;
let startValue = start + "px";
let endValue = end + "px";
if (axis == "y") {
startValue = "0 " + startValue;
endValue = "0 " + endValue;
}
// NOTE(emilio): It seems tempting to use `iterations` here, but doing so
// wouldn't be great because this uses current layout values (via
// getMetrics()), so sizes wouldn't update. This way we update once per
// animation iteration.
//
// fill: forwards is needed so that behavior=slide doesn't jump back to the
// start after the animation finishes.
this.animation = this.slot.animate(
{
translate: [startValue, endValue],
},
{
duration,
easing: "linear",
fill: "forwards",
}
);
this.animation.addEventListener("finish", this, { once: true });
}
doStop() {
if (!this.animation) {
return;
}
if (this._restartScheduled) {
this.window.cancelAnimationFrame(this._restartScheduled);
this._restartScheduled = null;
}
this.animation.removeEventListener("finish", this);
this.animation.cancel();
this.animation = null;
}
init() {
this.element.stop();
this.doStart();
}
_mutationActor(aMutations) {
while (aMutations.length) {
let mutation = aMutations.shift();
let attrName = mutation.attributeName.toLowerCase();
let oldValue = mutation.oldValue;
let newValue = this.element.getAttribute(attrName);
if (oldValue == newValue) {
continue;
}
if (attrName == "loop") {
this._currentLoop = this.element.loop;
}
if (attrName == "direction" || attrName == "behavior") {
this._scheduleRestartIfNeeded();
}
}
}
// Schedule a restart with the new parameters if we're running.
_scheduleRestartIfNeeded() {
if (!this.animation || this._restartScheduled != null) {
return;
}
this._restartScheduled = this.window.requestAnimationFrame(() => {
if (this.animation) {
this.doStop();
this.doStart();
}
});
}
};