Quelle  marquee.js   Sprache: JAVA

/* 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/. */

"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();
      }
    });
  }
};