turnOn Tutorials

Tutorial Home › turnOn

Wait for multiple scripts

#7 Await custom conditions through functions

Await system scripts

Requirements

2sxc 7.00

Resources

Await custom conditions through functions

This page waits for a function to return true, 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:

Execute a JavaScript function after a custom condition was met

Look at the element below to see the effect.

Output

@{
    
  // 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 function to return true, 
  then execute the window.turnOnTutorial201.init function 
  and pass the domAttribute as JSON 
*@

   @* This tutorial uses turnOn, see turnOn tutorials *@
@{
  var data = new {
    domAttribute = uniqueDomAttrubute
  };
}
@Kit.Page.TurnOn("window.turnOnTutorial201.init()", data: data)

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

@* Include local JavaScript file *@
<script src="@CmsContext.View.Path/201-await-function.js" @Kit.Page.AssetAttributes()></script>

Source Code of 201-await-function.js// 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)
  }

  function ready() {
    // checks if spritejs exists and returns either true or false
    if (window.spritejs) return true
    return false
  }

  const tt = window.turnOnTutorial201 = window.turnOnTutorial201 || {};
  tt.init = tt.init || init;
  tt.ready = tt.ready || ready;

  // 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);
  }
})();

Wait for multiple scripts

#7 Await custom conditions through functions

Await system scripts

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

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


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
      <h2>Await custom conditions through functions</h2>
      <p>
        This page waits for a function to return true, 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.
      </p>
      <br>
      In this tutorial you'll learn how to:
      <ul>
        <li>
          Execute a JavaScript function <b>after</b> a custom condition was met
        </li>
      </ul>
      Look at the element below to see the effect. 
    </div>
  </div>

  @{
    
    // 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 function to return true, 
    then execute the window.turnOnTutorial201.init function 
    and pass the domAttribute as JSON 
  *@

     @* This tutorial uses turnOn, see turnOn tutorials *@
  @{
    var data = new {
      domAttribute = uniqueDomAttrubute
    };
  }
  @Kit.Page.TurnOn("window.turnOnTutorial201.init()", data: data)

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

  @* Include local JavaScript file *@
  <script src="@CmsContext.View.Path/201-await-function.js" @Kit.Page.AssetAttributes()></script>



@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })