Lifecycle Hooks

Your Component extends the Component base class, digideckCore.Component, that gives some useful built in lifecycle hooks for you to use in your component. This gives you some built-in callbacks to respond to for presentation/presentation-editor events. See below for examples:

Tip

DIGIDECK Components leverage Custom Web Elements API to create custom HTML nodes and extend the basic HTMLElement class. This means your component will have access to the HTMLElement class methods like removeEventListener setAttribute etc.

There are also some extended callbacks you can tap into specified for DIGIDECK components e.g. onQuickMenuInputActionCompleted

onInit

Is invoked each time the custom element is appended into a document-connected element.

my-component.view.js

  constructor() {
    super();
  }

  onInit() {
    this.setupComponentHTML();
  }

onLayoutModeActive

Triggered when the presentaiton-editor is switched to 'layout mode'. This allows you to set layout-mode specific functionality/styles.

my-component.edit.js

  constructor() {
    super();
  }

  onLayoutModeActive() {
    this.removeClickHandlers();
  }

onEditModeActive

Triggered when the presentaiton-editor is switched to 'edit mode'. This allows you to set edit-mode specific functionality/styles.

my-component.edit.js

  constructor() {
    super();
  }

  onEditModeActive() {
    this.addClickHandlers();
  }

onComponentSettingsInputValueChanged

Triggered when a Component Settings Panel input value is changed by a user. Function has one argument that is an object with properties key and value.

• key - key for input defined in dynamic input form for the input which most of the time is the same as the component option key.
• value - value of key

  onComponentSettingsInputValueChanged({ key, value }) {
    if (key === options.IMAGE) {
      this.renderImage(value);
      return;
    }

    if (key === options.BACKGROUND_COLOR) {
      this.styleBackgroundColor(value);
      return;
    }

    // etc
  }

componentOptionsUpdated

Triggered when any of the attributes on your component node are updated.

Note: In order for your attributes to be observed and trigger this callback, they must be added to the observedAttributes getter that will exist in your ${componentName}.view.js file that gets created when you ddcomp init.

In the example below, any time the image, hover-image, ignore-root-slide or container-aria-label attriburtes are updated componentOptionsUpdated will be triggered.

my-component.edit.js

  constructor() {
    super();
  }

  componentOptionsUpdated(name, oldVal, newVal) {
    super.componentOptionsUpdated(name, oldVal, newVal);
  }

my-component.view.js

  static get observedAttributes() {
    return [
      "image",
      "hover-image",
      "ignore-root-slide",
      "container-aria-label",
    ];
  }

onDestroy

Triggered when your component node is destroyed (removed from the DOM).

my-component.view.js

  constructor() {
    super();
  }

  onDestroy() {
    this.removeMemoryLeaks();
  }

onQuickMenuInputActionCompleted

Callback to execute when a quick menu action takes place.

Callback Parameters:

• action: Object object containing information about that input an action was completed on.

  • Example of action object:

{
  componentId: "34e96515-693c-40d4-8c13-60b48b8ca244",
  data: {
    type: 'button',
    iconClass: 'fas fa-cog',
    label: 'Settings',
    key: 'settings-button'
  },
  type: "componentQuickMenuActionCompleted"
}

---

onQuickMenuInputActionCompleted = (action) => {
    switch (action?.data?.key) {
        case quickMenuKeys.CHANGE_VIDEO_BUTTON:
            digideckCore.mediaService.openVideoSelector((video) => {
                this.setJsonComponentOption(popupVideoOptions.SOURCE, [video]);
                digideckCore.uiService.sendComponentOptionsUpdatedMessage(this.id, {
                    [popupVideoOptions.SOURCE]: [video]
                });
                if (this.isPopupOpen) {
                    this.hidePopupVideoModal();
                }
            });
            break;
        case quickMenuKeys.SETTINGS_BUTTON:
            this.openPopupVideoSettings();
            break;
        case quickMenuKeys.SHOW_HIDE_VIDEO_BUTTON:
            this.isPopupOpen ? this.hidePopupVideoModal() : this.openPopupVideoModal();
            break;
    }
};

onQuickMenuInputValueChanged

Callback to execute when a quick menu input's value changes.

Callback Parameters:

• input: Object the input that had its value changed.

  • Example of input object:

{
  key: "border-color",
  options: {
      isBorderColor: true
  },
  type: "color",
  value: "rgba(172,46,46,1)"
}

---

onQuickMenuInputValueChanged(input) {
    switch (input.key) {
        case quickMenuKeys.BACKGROUND_COLOR:
            this.setComponentOption(options.BACKGROUND_COLOR, input.value);
            break;
        case quickMenuKeys.BORDER_COLOR:
            this.setComponentOption(options.BORDER_COLOR, input.value);
            break;
    }
}

onComponentDeselected

Function that will run when your component is deselected.

this.onComponentDeselected = () => {
    this.selected = false;
};

onComponentSelected

Function that will execute when your component is selected.

this.onComponentSelected = () => {
    let quickMenuConfig = [
        {
            type: 'color',
            value: this.backgroundCol,
            key: options.BACKGROUND_COL,
            options: { includeGradient: true }
        },
        {
            type: 'color',
            value: this.backgroundBorderCol,
            key: options.BACKGROUND_BORDER_COL,
            options: { isBorderColor: true }
        },
        { type: 'button', iconClass: 'fas fa-image', name: 'Show Background', key: 'show-bg-btn' }
    ];
    digideckCore.uiService.displayComponentQuickMenu(this.id, quickMenuConfig);
};

onComponentMultiSelected

Function that will execute when your component is selected with other components. This will not fire if your component is selected individually.

this.onComponentMultiSelected = () => {
    this.multipleComponentsSelected = true;
};

onComponentInView

Function that executes when a component is rendered in the presentation view. This includes when a component slide is navigated to or a hidden component is shown.

onComponentInView() {
  this.playVideo();
}

onComponentLeaveView

Same as onComponentInView, but is when a component is no longer in view, such as navigating away from the slide or hiding the component via visibility.

onComponentLeaveView() {
  this.stopVideo();
}

onLockedInEditorChange

Function that will execute when a selected component is locked.

this.onLockedInEditorChange = (isLockedInEditor) => {
  isLockedInEditor ? this.doSomethingWhenLocked() : this.doSomethingWhenUnlocked();
}