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
abstract HtmlInjector appendToBody(Obj html)
Appends the given HTML Str (or
afDuvet::HtmlNode
) to the bottom of the body section. Returnsthis
.- appendToHead
abstract HtmlInjector appendToHead(Obj html)
Appends the given HTML Str (or
afDuvet::HtmlNode
) to the bottom of the head section. Returnsthis
.- injectFantomMethod
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
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
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
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
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
andfuncArgs
. 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 thefuncName
. 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
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 ofRequireJs
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
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
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">