Oqtane Tutorials
Oqtane Tutorials

turnOn Tutorial

Tutorial Home › turnOn
Use the sxc data API to create metadata
#1 turnOn Tutorial
WebAPI and REST - Introduction
Requirements
Resources

turnOn Tutorial

Learn how to execute JavaScript functions using the 2sxc turnOn. Extend basic usage by passing data, awaiting conditions and more.

This page activates turnOn and executes a JavaScript function using turnOn.

In this tutorial you'll learn how to:

  • Activate turnOn using the PageService
  • Execute a JavaScript function on initial loading

⬇️ Result | Source ➡️

turnOn is waiting - this will be replaced within 3 seconds... 😔 
@inherits Custom.Hybrid.Razor14

<div id="turn-on-basic">
  turnOn is waiting - this will be replaced within 3 seconds... 😔
</div>

@* Executes the JavaScript function window.turnOnTutorial100.init() from the included script file *@
@Kit.Page.TurnOn("window.turnOnTutorial100.init()")

<script src="@App.Path/tutorials/turnon-use/js/100-local-js.js" @Kit.Page.AssetAttributes()></script>

Source Code of 100-local-js.js

// Use an IFFE to ensure the variables are not exposed globaly
// See https://developer.mozilla.org/en-US/docs/Glossary/IIFE
(() => {
  // The init function which should be called
  function init() {
    // Example element gets found in the DOM
    const exampleElement = document.querySelector("#turn-on-basic")
    // Success text gets displayed in the DOM
    exampleElement.innerText = "turnOn has been executed. 😉";
  }
  
  // For demo purpose, wait 3 seconds before we add the object and Init
  // This should simulate slow loading of a JavaScript
  
  setTimeout(() => {
    // Generate a new object if none exists yet (best practice)
    window.turnOnTutorial100 = window.turnOnTutorial100 || {};
    window.turnOnTutorial100.init = window.turnOnTutorial100.init || init;
  }, 3000);
})();

In this page turnOn passes parameters to a JavaScript function. The passed parameters then get deconstructed and used for DOM manipulation.

In this tutorial you'll learn how to:

  • Pass parameters to JavaScript functions using turnOn.
  • Deconstruct passed parameters

⬇️ Result | Source ➡️

turnOn Example 1 hasn't started yet.
turnOn Example 2 hasn't started yet. 
@inherits Custom.Hybrid.Razor14

<div id="turn-on-params-world">
  turnOn Example 1 hasn't started yet.
</div>
<div id="turn-on-example-deconstruct">
  turnOn Example 2 hasn't started yet.
</div>

@* Passes the parameters Hello for greeting and World for name in a JSON format and executes the window.turnOnTutorial110.init function *@

  @* This tutorial uses turnOn, see turnOn tutorials *@
@{
  var data = new {
    greeting = "Hello",
    name = "World"
  };

    var dataDemo = new {
    greeting = "Hello",
    name = "Moon"
  };
}
@Kit.Page.TurnOn("window.turnOnTutorial110.init()", data: data)
@Kit.Page.TurnOn("window.turnOnTutorial110.demoDeconstruct()", data: dataDemo)

<script src="@App.Path/tutorials/turnon-use/js/110-parameters.js" @Kit.Page.AssetAttributes()></script>

Source Code of 110-parameters.js

// Use an IFFE to ensure the variables are not exposed globaly
// See https://developer.mozilla.org/en-US/docs/Glossary/IIFE
(() => {
  // Simple init with Data object
  function init(data) {
    // Example element gets found in the DOM
    const exampleElement = document.querySelector("#turn-on-params-world")
    // Parameters get displayed in the DOM
    exampleElement.innerText = `turnOn has passed the parameters: ${data.greeting} ${data.name}!`;
  }
  
  // This is a more modern JS feature to deconstruct parameters
  // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
  function demoDeconstruct({greeting, name}) {
    // Example element gets found in the DOM
    const exampleElement = document.querySelector("#turn-on-example-deconstruct")
    // Parameters get displayed in the DOM
    exampleElement.innerText = `turnOn has passed the parameters: ${greeting} ${name}!`;
  }
  
  const tt = window.turnOnTutorial110 = window.turnOnTutorial110 || {};
  tt.init = tt.init || init;
  tt.demoDeconstruct = tt.demoDeconstruct || demoDeconstruct;
})();

This page creates a unique DOM attribute and sets it on a div. turnOn then passes this attribute to a JavaScript function, which identifies the element with a queryselector and performs DOM manipulations.

In this tutorial you'll learn how to:

  • Create a unique DOM attribute
  • Pass it to a JavaScript function

⬇️ Result | Source ➡️

turnOn hasn't passed any parameters. 
@inherits Custom.Hybrid.Razor14

@{
  // Create unique DOM attribute with Module Id
  var uniqueDomAttribute = "turn-on-example-" + CmsContext.Module.Id;
}

@* Inject attribute into DIV, to make it accessible for query *@
<div @uniqueDomAttribute>
  turnOn hasn't passed any parameters.
</div>


  @* This tutorial uses turnOn, see turnOn tutorials *@
@{
  var data = new {
    domAttribute = uniqueDomAttribute
  };
}

@Kit.Page.TurnOn("window.turnOnTutorial111.init()", data: data)

<script src="@App.Path/tutorials/turnon-use/js/111-module.js" @Kit.Page.AssetAttributes()></script>

Source Code of 111-module.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}]`)
    // Parameters get displayed in the DOM
    foundElement.innerText = `turnOn has passed the domAttribute: ${domAttribute}`;
  }
  
  const tt = window.turnOnTutorial111 = window.turnOnTutorial111 || {};
  tt.init = tt.init || init;
})();

This page creates a anonymous object and sets it on a div. turnOn then passes this attribute to a JavaScript function, which identifies the element with a queryselector and performs DOM manipulations.

In this tutorial you'll learn how to:

  • Create a anonymous object in c#
  • Pass it's data to a JavaScript function

⬇️ Result | Source ➡️

turnOn hasn't started yet. 
@inherits Custom.Hybrid.Razor14

@* Inject attribute into DIV, to make it accessible for query *@
<div id="turn-on-example-complex-object">
  turnOn hasn't started yet.
</div>

@{
  
  // Create an anonymous object and define example settings 
  var data = new {
    domId = "turn-on-example-complex-object",
    style = new {
      backgroundColor = "mediumpurple",
      height = 100,
      width = 400
    }
  };
}

@* Passes the exampleObject as parameter in a JSON format and executes the window.turnOnTutorial120.init function *@
@Kit.Page.TurnOn("window.turnOnTutorial120.init()", data: data)

<script src="@App.Path/tutorials/turnon-use/js/120-anonymous-object.js" @Kit.Page.AssetAttributes()></script>

Source Code of 120-anonymous-object.js

(() => {
  // Data gets passed as a single object, so we need to deconstruct it.
  function init({domId, style}) {
    // The element gets found in the DOM by a querySelector with the passed attribute
    const foundElement = document.querySelector(`#${domId}`)
  
    // apply passed settings on DOM element
    foundElement.style.backgroundColor = style.backgroundColor;
    foundElement.style.height = `${style.height}px`;
    foundElement.style.width = `${style.width}px`;
  
    // Parameters get displayed in the DOM
    foundElement.innerText = `turnOn has passed this data: ${JSON.stringify({domId, style})}`;
  }
  
  const tt = window.turnOnTutorial120 = window.turnOnTutorial120 || {};
  tt.init = tt.init || init;
})();

This 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

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.Razor14

@{
  // Create unique DOM attribute with Module Id
  var domAttribute = "turn-on-require-many-" + CmsContext.Module.Id;
  var data = new {
    domAttribute
  };
}

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

@* 
  Wait for thirdparty library "spritejs" to load, 
  then execute the window.turnOnTutorial200.init function 
  and pass the domAttribute as JSON
*@
@Kit.Page.TurnOn("window.turnOnTutorial200.init()", data: data, require: "window.spritejs")

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

@* Include local JavaScript file *@
<script src="@App.Path/tutorials/turnon-use/js/200-multi-file.js" @Kit.Page.AssetAttributes()></script>

Source Code of 200-multi-file.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)
  }
  
  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);
  }
})();

This 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

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.Razor14

@{  
  // Create unique DOM attribute with Module Id
  var domAttribute = "turn-on-require-fn-" + CmsContext.Module.Id;
}

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

@* 
  Wait for function to return true, 
  then execute the window.turnOnTutorial201.init function 
  and pass the domAttribute as JSON 
*@
@Kit.Page.TurnOn("window.turnOnTutorial201.init()",
  data: new { domAttribute },
  require: "window.turnOnTutorial201.ready()"
)

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

@* Include local JavaScript file *@
<script src="@App.Path/tutorials/turnon-use/js/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);
  }
})();

This page waits for a system script to load, then executes a JavaScript function with turnOn and passes a domAttribute as parameter. The executed JavaScript then triggers a system script, which binds the fancybox properties.

In this tutorial you'll learn how to:

  • Execute a JavaScript function after a system script was loaded

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.Razor14

@{
  // Create unique DOM attribute with Module Id
  var domAttribute = "turn-on-req-script-" + CmsContext.Module.Id;
}

@* Inject attribute into DIV, to make it accessible for query *@
<a @domAttribute href='https://images.unsplash.com/photo-1503899036084-c55cdd92da26?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80' data-caption="System script used here">
    <img loading="lazy" class="img-fluid" src='https://images.unsplash.com/photo-1503899036084-c55cdd92da26?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=250&q=80'/>
</a>

@* 
  Wait for the system script to load, 
  then execute the window.turnOnTutorial202.init function 
  and pass the domAttribute as JSON 
*@

@* activate turnOn *@
@Kit.Page.TurnOn("window.turnOnTutorial202.init()",
  data: new { domAttribute },
  require: "window.Fancybox"
)

@* activate Fancybox *@
@Kit.Page.Activate("fancybox4")

@* Include local JavaScript file *@
<script src="@App.Path/tutorials/turnon-use/js/202-system-scripts.js" @Kit.Page.AssetAttributes()></script>

Source Code of 202-system-scripts.js

// Use an IFFE to ensure the variables are not exposed globaly
// See https://developer.mozilla.org/en-US/docs/Glossary/IIFE
(() => {
  // The init function which should be called
  function init({ domAttribute }) {
    // Example element gets found in the DOM and bound to Fancybox
    Fancybox.bind(`[${domAttribute}]`);
  }

  const tt = window.turnOnTutorial202 = window.turnOnTutorial202 || {};
  tt.init = tt.init || init;
})();

 

Use the sxc data API to create metadata
#1 turnOn Tutorial
WebAPI and REST - Introduction