const mixinafDuvet::HtmlInjector

afDuvet::HtmlInjector

(Service) - Injects HTML elements into your page. Elements are queued up and injected just before the page is sent to the browser.

Elements are listed in the HTML in the order they are added. Duplicate elements are ignored. So if a component adds a stylesheet link, that component may be used many times on a page but, only ONE link to that stylesheet will be rendered.

Injecting scripts and stylesheets will also update an Content-Security-Policy directives to ensure the added content can be executed.

appendToBody

Source

abstract HtmlInjector appendToBody(Obj html)

Appends the given HTML Str (or afDuvet::HtmlNode) to the bottom of the body section. Returns this.

appendToHead

Source

abstract HtmlInjector appendToHead(Obj html)

Appends the given HTML Str (or afDuvet::HtmlNode) to the bottom of the head section. Returns this.

injectFantomMethod

Source

abstract ScriptTagBuilder injectFantomMethod(Method method, Obj?[]? args := null, [Str:Str]? env := null)

Injects a call to a Fantom method. That's right, this method lets you run Fantom code in your web browser! Because Fantom only compiles classes with the @Js facet into Javascript, ensure the method's class has it!

All method arguments must be @Serializable as they are serialised into Strings and embedded directly into Javascript.

env are environment variables passed into the Fantom Javascript runtime.

Note that when instantiating an FWT window, by default it takes up the whole browser window. To constrain the FWT window to a particular element on the page, pass in the follow environment variable:

"fwt.window.root" : "<element-id>"

Where <element-id> is the html ID of an element on the page. The FWT window will attach itself to this element.

htmlInjector.injectFantomMethod(FwtExample#info, null, ["fwt.window.root" : "<element-id>"])

Note that the element needs to specify a width, height and give a CSS position of relative. This may either be done in CSS or defined on the element directly:

<div id="fwt-window" style="width: 640px; height:480px; position:relative;"></div>

injectLink

Source

abstract LinkTagBuilder injectLink()

Injects a <link> element into the bottom of your head. Example:

injectLink.fromClientUrl(`/css/styles.css`)

will render the following tag:

<link href="/css/styles.css">

injectMeta

Source

abstract MetaTagBuilder injectMeta()

Injects a <meta> element into the bottom of your head. Example:

injectMeta.withName("viewport").withContent("initial-scale=1")

will render the following tag:

<meta name="viewport" content="initial-scale=1">

injectRequireJs

Source

abstract Void injectRequireJs()

Ensures that the RequireJS script and corresponding config is injected into the page.

A call to this is only required when you want to hard code require calls in the HTML. For example, if your HTML looked like this:

<html>
<body>
    <h1>Hello!</h1>
    <script>
        require(['jquery'], function($) {
            // ... wotever...
        });
    </script>
</body>
</html>

Then a call to injectRequireJs() would be required to ensure RequireJS was loaded before the script call.

injectRequireModule

Source

abstract ScriptTagBuilder injectRequireModule(Str moduleId, Str? funcName := null, Obj?[]? funcArgs := null)

Injects a call to a RequireJS module.

If the RequireJS module exposes an object then a function may be invoked using funcName and funcArgs. Example:

injectRequireModule("my/shirt", "addToCart", ["shirt", 1.99f])

will generate:

<script type="text/javascript">
  require(["my/shirt"], function (module) { module.addToCart("shirt", 1.99); });
</script>

Or, if the RequireJS module returns a function as its module definition then it may be invoked directly by passing null as the funcName. Example:

injectRequireCall("my/title", null, ["Reduced to Clear!"])

will generate:

<script type="text/javascript">
  require(["my/title"], function (module) { module("Reduced to Clear!"); });
</script>

Note that funcArgs are converted into JSON; which is really useful, as it means you don't have to!

injectRequireScript

Source

abstract ScriptTagBuilder injectRequireScript(Str:Str functionParams, Str script)

Wraps the script in a function call to RequireJS, ensuring the given module dependencies are available.

functionParams is a map of RequireJs module names to function parameter names. Example:

injectRequireScript(["jquery":"\$"], "\$('p').addClass('magic');")

will generate:

<script type="text/javascript">
  require(["jquery"], function ($) {
     $('p').addClass('magic');
  });
</script>

injectScript

Source

abstract ScriptTagBuilder injectScript(Bool appendToHead := false)

Injects a <script> element into the bottom of your body. Example:

injectScript.fromExternalUrl(`//code.jquery.com/jquery-2.1.1.min.js`)

will render the following tag:

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>

Consider using RequireJS AMD modules instead!

Note that by default the script is injected at the bottom of the <body> tag.

injectStylesheet

Source

abstract LinkTagBuilder injectStylesheet()

Injects a <link> element, defaulted for CSS stylesheets, into the bottom of your head. Example:

injectStylesheet.fromClientUrl(`/css/styles.css`)

will render the following tag:

<link type="text/css" rel="stylesheet" href="/css/styles.css">