Requirements
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
Output
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 })