02. Sargasso Element Lifecycle

When a Sargasso element appears in the document, the framework supervisor will instantiate an instance of the object, attach it to the element and call the start() method of the object. When removed from the DOM, sleep() will be called allowing cleanup of any resources or event handlers set up in start (note that event listeners created with this.on and this.once are automatically cleaned up.)

Almost all Sargasso sub classes will need to override start() and sleep() to allocate and deallocate resources such as event handlers.

This example illustrates the object life cycle, enter viewport notification and an event handler.

Try It

<style>
  .container { margin-top: 150vh; margin-bottom: 33vh; text-align: center; }
  .clicked { color: red; }
</style>

<h3>Sargasso Element Example</h3>

<p>
  Sargasso Elements know when then are scrolled into the viewport and when they are removed from the document. This example uses a click event handler which removes the element when triggered to illustrate the Sargasso life cycle. Event handlers are automatically cleaned up when the element is destroyed.
</p>

<p>Scroll down to see it in action</p>

<!-- this is well below the fold (margin-top: 150vh;) -->
<div class="container">
  <button data-sargasso-class="MyButtonClass">
    Hello World!
  </button>
</div>

<script type="module">
  import { Sargasso, utils } from "@pelagiccreatures/sargasso"

  class MyButtonClass extends Sargasso {
    constructor(element, options = {}) {
      options.watchViewport = true; // <- tell me when I am visible by calling this.enterViewport()
      super(element, options); // important!
      this.parentElement = this.element.parentElement
    }

    start() {
      super.start(); // important!

      // add click event handler that triggers once
      this.once("click", (e) => {
        this.clicked();
      });
    }

    sleep() {
      // This is where you would clean up any resouces allocated in start()
      // BUT we dont have to explicitly remove the click event handler, sargasso takes care of that.
      this.parentElement.innerHTML = "I'm gone.";
      super.sleep(); // important!
    }

    // this public method is called when the element becomes visible if options.watchViewport = true
    // usually no need to call super class on these event hooks
    enterViewport() {
      this.queueFrame(() => {
        this.element.innerHTML += " Now In viewport!";
      });

      setTimeout(() => {
        this.queueFrame(() => {
          this.element.innerHTML += " Click me!";
        });
      },1000)
    }

    // It's a good practice to use animation frames for code that changes content
    clicked() {
      const frame = () => {
        // set up a DOM mutation frame
        this.addClass("clicked");
        this.element.innerHTML += " Clicked!";
      };
      this.queueFrame(frame); // schedule to update in next animation frame

      // remove me from the document after one second to illustrate Sargasso lifecycle
      // Sargasso will call sleep().
      setTimeout(() => {
        this.element.remove();
      }, 1000);
    }
  }

  utils.registerSargassoClass("MyButtonClass",MyButtonClass);

  // Start Sargasso
  utils.bootSargasso();
</script>