Examples

Example of projects

• Input element example
• Iframe element example
• Drag&Drop example
• Cruz extension

Lifecycle methods

main.js

export default function myPlugin(script, geniallyEngine) {
  script.slide.on("entering", () => {
    console.log("entering slide");
  });
  script.slide.on("entered", () => {
    console.log("entering slide");
  });
  script.slide.on("exiting", () => {
    console.log("exiting slide");
  });
  script.slide.on("exited", () => {
    console.log("exited slide");
  });
}

Changing the opacity from an item

configSchema

{
  "configSchema": {
    "fields": [
      {
        "type": "itemRef",
        "name": "opacityItem",
        "label": {
          "en": "Item to reduce opacity"
        },
        "accept": [
          "image",
        ],
        "canBeNull": true
      }
    ]
  }
}

main.js

script.slide.on("entering", () => {
  const { opacityItem } = script.config;
  element.opacity = 0.1;
}

Changing a item property on click

configSchema

{
  "configSchema": {
    "fields": [
      {
        "type": "itemRef",
        "name": "opacityItem",
        "label": {
          "en": "Item to reduce opacity"
        },
        "accept": [
          "image",
        ],
        "canBeNull": true
      }
    ]
  }
}

main.js

script.slide.on("entering", () => {
  const { opacityItem } = script.config;

  opacityItem.on('click', () => {
    element.opacity = 0.5;
  });
}