Instance

There are two ways you receive a MANAWAVE instance to work with. A MANAWAVE instance is an object that lets you configure, override, or control the marquee. Also, an instance refers to the code that’s managing and updating the marquee both in logic and on the DOM.

MW

MW constructs and initializes a marquee given a DOM element. This will return you an instance.

// queried from the page
const element = document.querySelector("#element");
const mw = new MW(element);

MW Options

// selector with options
const MWOptions = {
  direction: "up",
  speed: 2.1,
  autoplay: true,
};

const mw = new MW("#element", MWOptions);

Here are all the options you can use:

Attributes

Attributes have specific values and formats to be followed.

{
  "speed": 2.1,
  "direction": 190.5,
  "autoplay": true
}

speed

type: number
default: 1

{
  "speed": 2.1
}

direction

type: number
default: 0

{
  "direction": 195.5
}

autoplay

type: boolean
default: false

{
  "autoplay": true
}

Marquee Pipeline

These are the properties:

• onLayout
• onMove
• onLoop

You should refer to the methods section below for details. Instead of being assigned to a constant, you would use the callback in the options object.

const mw = new MW("...", {
  onLayout: ({ initialSize, position, limits}) => { ... }
})

DOM Pipeline

These are the properties:

• onElementCreated
• onElementDrawn
• onElementDestroyed

You should refer to the methods section below for details. Instead of being assigned to a constant, you would use the callback in the options object.

const mw = new MW("...", {
  onElementCreated: ({ element, id }) => { ... }
})

MW Methods

These may look similar to the options because they are. These methods are intended to dynamically update the marquee during runtime.

General Methods

eachElement

type: (data: { element: HTMLElement; id: string }) => void;

Iterate through each element in the marquee and gives you the rendered element for manipulation. You also get its current unique id.

mw.eachElement(({ element, id }) => {
  element.style.background = "red";
});

See also: behavior of rendering marquee logic

Attributes

These are designated differently from the attributes found in the options. You use these methods to read and write changes to the attribute (except autoplay) over time (during runtime).

You might notice a “read” and “write” clause in the description. This means you can get the current value (read) or set it to some other value during runtime (write).

See also: MW Options Attributes

speed

You can use this to read and write the value.

mw.speed = 1.5;
console.log(mw.speed); // 1.5

direction

You can use this to read and write the value.

mw.direction = 20;
console.log(mw.direction); // 20

autoplay

You can use this to write the value.

mw.autoplay = true;

Marquee Pipeline

These are just like the MW Options except they are invoked during runtime. These methods allow you to dynamically update the marquee during runtime. If you want to read more in-depth, there’s a reference about overrides.

onLayout

type: (data: { initialSize: Rect; position: vec2; limits: Rect; }) => Partial<{ size: Rect; position: vec2 }> | void;

Invoked when a layout or relayout occurs. This can override the final logical size and rendered position of each item. For logical size, the DOM element still renders its original content and size. The final size refers to artificially adding or removing space for items. You can either add more spacing or squish items, in other words.

You’re given the initialSize and position to reuse original values if you wish. You’re also given the limits or bounding box of the marquee for your utility. None of these are needed to use onLayout, but they’re given if you want em’.

Triggers relayout
See also: behavior of layout

mw.onLayout = ({ position, limits, initialSize }) => {
  return {
    size: { width: initialSize.width + 10, height: initialSize.height + 10 },
    position: { x: position.x + 1, y: position.y + 1 },
  };
};

onMove

type: (data: { direction: number; speed: number; dt: DOMHighResTimeStamp; t: DOMHighResTimeStamp; }) => Partial<{ direction: number; }> | void;

onMove is invoked when all the items in the marquee moves. Right now, the only override is direction, which allows you to programmatically or dynamically manipulate the resulting direction of all items. You’re given some contextual data like the original direction or speed values.

You also get the delta time (time difference), dt, between marquee animation frames and total time, t. This is useful for syncing external animations to the marquee’s animation system.

mw.onMove = ({ direction, speed, dt, t }) => {
  return { direction: 999 };
};

onLoop

type: (data: { limits: BoundingBox; itemSize: Rect; marqueeSize: Rect; direction: vec2; }) => Partial<{ limits: BoundingBox }> | void;

onLoop is invoked when an item moves (wraps around) from one end or side of the marquee to the opposite. You get the limits, the bounding box of the marquee. You also get some original values like the original itemSize, marqueeSize, and direction. The marqueeSize refers to the pixel width and height of the MANAWAVE marquee DOM element.

Right now, you get to override the default limits to change where an item should “loop” or wrap around the marquee.

mw.onLoop = ({ limits, itemSize, marqueeSize, direction }) => {
  return {
    limits: {
      up: limits.up + 1,
      right: limits.right + 1,
      left: limits.left - 1,
      down: limits.down - 1,
    },
  };
};

DOM Pipeline

These are just like the MW Options except they are invoked during runtime. These methods allow you to interact with each marquee DOM element during runtime. If you want to read more in-depth, there’s a reference about overrides.

onElementCreated

type: (data: { element: HTMLElement; id: string; }) => Partial<{ element: HTMLElement }> | void

onElementCreated is invoked when a marquee item is rendered onto the marquee. You receive an element which is the original rendered HTML element. You can modify it just like any other HTML element. You also get the item’s unique id to reference this specific item.

You can maybe replace the rendered HTML element with your own by returning it, but this hasn’t been tested. This might be removed in the future.

Triggers relayout.

mw.onElementCreated = ({ element, id }) => {
  element.style.background = "red";
};

onElementDrawn

type: (data: { element: HTMLElement; id: string; dt: DOMHighResTimeStamp; t: DOMHighResTimeStamp; }) => void

onElementDrawn is invoked when a rendered marquee item is re-rendered or updated. You receive an element representing the element that just updated. You can modify it just like any other HTML element. You also get the item’s unique id to reference this specific item.

You also get the animation delta time (difference in time) dt between frames and t the total animation time. This is useful for syncing external animations to MANAWAVE’s animation timeline.

Triggers relayout.

mw.onElementCreated = ({ element, id, dt, t }) => {
  element.textContent = t;
};

onElementDestroyed

type: (data: { element: HTMLElement; id: string; }) => void

onElementDestroyed is invoked when a relayout occurs. A relayout would basically cause the marquee to reset, flushing all items and IDs. You receive the element that will be deleted with its unique id. This may be useful for any cleanup operations you should perform before the marquee gets reset.

mw.onElementCreated = ({ element, id }) => {
  element.style.background = "initial";
};

getMW

Given an Element, get an MW instance. You can use all the MW methods described above.

const element = document.querySelector("#element");

const mw = getMW(element);
mw.play();
mw.direction = 30;