OmniWidget - Shared CSS and JavaScript

Package Guides
1

OmniWidget

Contact: iExpulsion#2926 on Discord

OmniWidget allows creators to create and maintain a single Widget to house their CSS and JavaScript and apply that to any and all other Widgets.

Package Contents

  • Templates
    • OmniWidget
      • A base component you drag onto the Player Template that contains an OmniWidgetComponent and OmniWidgetExampleStyle to configure that is the backbone to sharing the contents of a Widget to other Widgets.
  • Scripts
    • OmniWidgetComponent
      • The script where you define the Widget you wish to copy over to other Widgets.
  • Widgets
    • OmniWidgetExampleStyle
      • An example Widget that has basic CSS and JavaScript to be shared with other Widgets.
    • OmniWidgetExampleUsage
      • An example Widget that shows the initialization and usage of shared CSS and JavaScript.

Setup

  1. OmniID: A unique identifier for your Shared Widget, helpful when needing to share multiple different CSS/JavaScript files.
  2. SourceWidget: A reference to the WidgetAsset to assist in finding the correct Widget to copy to the Destination Widgets.
  3. DestinationWidgets: An array of WidgetAssets to search for to apply the SourceWidgets style and script tag elements.
  • Add this function to your Destination Widgets inside the script tag.
<script>
	engine.on('AddSharedContent', function (style, script) {
		var styleElement = document.createElement('style');
		var scriptElement = document.createElement('script');
		styleElement.textContent = style;
		scriptElement.textContent = script;

		document.head.appendChild(styleElement);
		document.head.appendChild(scriptElement);
	});
</script>
  • Modify OmniWidgetExampleStyle or make a duplicate and swap the SourceWidget to your duplicate to add your own CSS and JavaScript that will be copied to the Destination Widgets.
3 Likes