#2 Basic turnOn usage and activation
Activate turnOn and execute basic tasks
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
Look at the text below to see the effect.
turnOn is waiting - this will be replaced within 3 seconds... 😔
#2 Basic turnOn usage and activation
@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade;
<!-- unimportant stuff, hidden -->
Activate turnOn and execute basic tasks... <!-- unimportant stuff, hidden -->
<div id="turn-on-example">
turnOn is waiting - this will be replaced within 3 seconds... 😔
</div>
@{
// Use the PageService to activate turnOn
Kit.Page.Activate("turnOn");
}
@* Executes the JavaScript function window.turnOnTutorial100.init() from the included script file *@
<turnOn turn-on='{ "run": "window.turnOnTutorial100.init()" }'></turnOn>
<script src="@App.Path/turn-on/_100-local js.js"></script>
<!-- unimportant stuff, hidden -->
// 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-example")
// 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);
})();