Skip to main content
Home  › ... 2sxc Apps › 2sxc Tutorial

turnOn Tutorials

Tutorial Home
Passing anonymous objects as parameters with turnOn
#6 Wait for multiple scripts
Await custom conditions through functions

Await libraries, before executing functions with turnOn

This page waits for a thirdparty library to finish loading, then executes a JavaScript function with turnOn and passes a domAttribute as parameter. The executed JavaScript then triggers thirdparty library code, which modifies the DOM element in the page that causes an animation.


In this tutorial you'll learn how to:
  • Include an external library
  • Execute a JavaScript function after the library has finished loading
Look at the element below to see the effect.
Requirements
Resources

Passing anonymous objects as parameters with turnOn
#6 Wait for multiple scripts
Await custom conditions through functions

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code 

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade;
<!-- unimportant stuff, hidden -->
Await libraries, before executing... <!-- unimportant stuff, hidden -->
<!-- unimportant stuff, hidden -->

@{
  // Use the PageService to activate turnOn
  Kit.Page.Activate("turnOn");
  
  // Create unique DOM attribute with Module Id
  var uniqueDomAttrubute = "turn-on-example-" + CmsContext.Module.Id;
}

@* Inject attribute into DIV, to make it accessible for query *@
<div @uniqueDomAttrubute></div>

@* 
  Wait for thirdparty library to load, 
  then execute the window.turnOnTutorial200.init function 
  and pass the domAttribute as JSON 
*@

<turnOn turn-on='{
  "await": "window.spritejs",
  "run": "window.turnOnTutorial200.init()",
  "data": { "domAttribute": "@uniqueDomAttrubute" } }'></turnOn>

@* Include thirdparty library from CDN *@
<script src="https://unpkg.com/spritejs@3/dist/spritejs.js"></script>

@* Include local JavaScript file *@
<script src="@App.Path/turn-on/_200-multi-file.js"></script>

<!-- unimportant stuff, hidden -->

Source Code of _200-multi-file.js

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code 

// Use an IFFE to ensure the variables are not exposed globaly
// See https://developer.mozilla.org/en-US/docs/Glossary/IIFE
(() => {
  // Data gets passed as a single object, so we need to deconstruct it.
  function init({domAttribute}) {
    // The element gets found in the DOM by a querySelector with the passed attribute
    const foundElement = document.querySelector(`[${domAttribute}]`)
    foundElement.style.width = '100%';
    foundElement.style.height = '250px';
    
    // Thirdparty code gets executed
    animateSpaceship(foundElement)
  }
  
  const tt = window.turnOnTutorial200 = window.turnOnTutorial200 || {};
  tt.init = tt.init || init;
  
  // Example code that consumes thirdparty library
  function animateSpaceship(container) {
    const {Scene, Sprite} = spritejs;
    const scene = new Scene({container, width: 1000, height: 250, mode: 'stickyTop'});
    const layer = scene.layer();
    const spaceShip = new Sprite('https://images.squarespace-cdn.com/content/v1/528a31e5e4b00863f1646510/1562710379584-IOMK7TTBLH7H8GJ8QB1A/Screen+Shot+2019-07-09+at+5.12.37+PM.png');
    
    spaceShip.attr({
      anchor: [0, 0.3],
      pos: [0, 0],
    });
    
    spaceShip.animate([
      {pos: [0, 0]},
      {pos: [0, 75]},
      {pos: [600, 100]},
      {pos: [600, 50]},
    ], {
      duration: 4000,
      iterations: Infinity,
      direction: 'alternate',
    });
    
    layer.append(spaceShip);
  }
})();