scaffold.mjs

scaffold.mjs

import component from '../system/component.parent.mjs';

class scaffold extends component {

  constructor(selector) {

    super(selector);

    // DOM element representing the message panel
    this._panel = this.dom.querySelector("[data-panel]"); 
    this.write('Component instance created with id #' + this.id);
    this.write('Initial breakpoint: ' + dragon.viewport.currentMode.name + ', width: ' + dragon.viewport.width + 'px');
    this.write('Initial orientation: ' + dragon.viewport.currentOrientation);

    this._name = this.attributes.name;
    this.dom.addEventListener("click", this.handleClick.bind(this));

    // opt-in watchers
    this.watchResize();
    this.watchVisibility();
    this.watchAttributes();

    }

    get name() {
      return this._name;
    }

    set name(newName) {
      if (newName) {
        this._name = newName;
        this.write('Name: ' + this.name);
      }
    }

    write(msg)  {
      let today = new Date();
      msg = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds() + today.getMilliseconds() + ' --- ' + msg;
      this._panel.value = this._panel.value += (this._panel.value ? '\n' : '') + msg;
      console.debug(this.constructor.name + ' (#' + this.id + '): ' + msg);
    }

    handleClick(e) {
      this.write('Click received on ' + this.name);
    }

    handleReady(e) { 
      this.write('App ready'); 
      // simulate interaction with other instance of this component
      if (this.id !== "scaffold2") {
        dragon.components.scaffold.instances.scaffold2.write("Cross component message coming from instance " + this.id);
      } 
    }
  
    handleModeChange(e) { 
      this.write('Breakpoint changed from ' + e.detail.from.name + ' to ' + e.detail.to.name); 
    }

    handleOrientationChange(e) {
      this.write('Orientation changed from ' + e.detail.from + ' to ' + e.detail.to); 
    }

    handleMutation(mutation) {
      this.name = this.attributes.name;
    }

    handleComponentResize(e) {
      this.write('Component resized to ' + e.width);
    }

    handleVisibility(e) {
      if (e.isIntersecting) {
        this.write('Component inside viewport');
      } else {
        this.write('Component outside viewport');
      }
    }

}

export {scaffold};