dom

Documentation

Index

• func Append(parentHtmlId, html string)
• func CreateTransientDiv() (htmlId string)
• func GetInnerHtml(htmlId string) (html string)
• func InsertAdjacent(referenceId string, pos RelativePositionId, html string)
• func LoadScriptModuleAndRun(src string, attributes map[string]string, runJS string) error
• func LoadScriptOrRequireJSModuleAndRun(moduleName, src string, attributes map[string]string, runJS string) error
• func LoadScriptOrRequireJSModuleAndRunTransient(moduleName, src string, attributes map[string]string, runJS string) error
• func Persist(htmlId string)
• func Remove(htmlId string)
• func SetInnerHtml(htmlId, html string)
• func SetInnerText(htmlId, text string)
• func TransientJavascript(js string)
• type RelativePositionId

Functions

func Append

func Append(parentHtmlId, html string)

Append the given `html` content to the element identified by `parentHtmlId` in the DOM. It uses TransientJavascript to inject the given html at the end of the element's `innerHTML` in the DOM.

Important considerations:

• Output generated in this format is not saved or convertable to HTML. It is generated dynamically with Javascript, which is not captured by Jupyter. Use `Persist` to repost content such that it can be saved.
• This prevents adding extra vertical space for each call of DisplayHtml, which allows one to better tailor the output.

If you need more specialized control where the `html` is inserted, check InsertAdjacent call.

func CreateTransientDiv

func CreateTransientDiv() (htmlId string)

CreateTransientDiv creates a transient (using `gonbui.UpdateHtml`) empty `<div>` element on the front-ent, with a unique id.

It returns the id for the newly created element. This `htmlId` can be used to create new HTML content, for example, using Append, InsertAdjacent or SetInnerHtml defined in the `dom` package.

Example:

rootId := dom.CreateTransientDiv()
dom.Append(rootId, "<h3>Click On A Buttom</h3>\n")
bOk := widgets.Button("Ok").AppendTo(rootId).Done()
bNotOk := widgets.Button("NotOk").AppendTo(rootId).Done()
dom.Append(rootId, "\n<br/>\n<hr/>\n")

func GetInnerHtml

func GetInnerHtml(htmlId string) (html string)

GetInnerHtml returns the html content of an element in the DOM.

func InsertAdjacent

func InsertAdjacent(referenceId string, pos RelativePositionId, html string)

InsertAdjacent inserts the html content (in the front-end) adjacent to the element pointed by referenceId, and in the position described by pos. It uses the Javascript method `insertAdjacentHTML`, see details in: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Important considerations:

• Output generated in this format is not saved or convertable to HTML. It is generated dynamically with Javascript, which is not captured by Jupyter. Use `Persist` to repost content such that it can be saved.
• This prevents adding extra vertical space for each call of DisplayHtml, which allows one to better tailor the output.

func LoadScriptModuleAndRun

func LoadScriptModuleAndRun(src string, attributes map[string]string, runJS string) error

LoadScriptModuleAndRun loads the given script module and, `onLoad`, runs the given code.

If the module has been previously loaded, it immediately runs the given code.

The script module given is appended to the `HEAD` of the page.

Extra `attributes` can be given, and will be appended to the `script` node.

Example: to make sure Plotly Javascript (https://plotly.com/javascript/) is loaded -- please check Plotly's installation directions for the latest version.

gonbui.LoadScriptModuleAndRun(
	"https://cdn.plot.ly/plotly-2.29.1.min.js", {"charset": "utf-8"},
	"console.log('Plotly loaded.')");

func LoadScriptOrRequireJSModuleAndRun

func LoadScriptOrRequireJSModuleAndRun(moduleName, src string, attributes map[string]string, runJS string) error

LoadScriptOrRequireJSModuleAndRun is similar to LoadScriptModuleAndRun but it will use RequireJS if loaded, and it uses DisplayHtml instead -- which allows it to be included if the notebook is exported.

In this version `runJS` will have `module` defined as the name of the module passed by `require` is RequireJS is available, or have it set to `null` otherwise.

Notice while Jupyter notebook uses RequireJS, it hides in its context, so for the cells' HTML content, it is as if RequireJS is not available. But when the notebook is exported to HTML, RequireJS is available. LoadScriptOrRequireJSModuleAndRun will issue javascript code that dynamically handles both situations.

Args:

• `moduleName`: is the name to be module to be used if RequireJS is installed -- it is ignored if RequireJS is not available.
• `src`: URL of the library to load. Used as the script source if loading the script the usual way, or used as the paths configuration option for RequireJS.
• `attributes`: Extra attributes to use in the `<script>` tag, if RequestJS is not available.
• `runJS`: Javascript code to run, where `module` will be defined to the imported module if RequireJS is installed, and `null` otherwise.

func LoadScriptOrRequireJSModuleAndRunTransient

func LoadScriptOrRequireJSModuleAndRunTransient(moduleName, src string, attributes map[string]string, runJS string) error

LoadScriptOrRequireJSModuleAndRunTransient works exactly like LoadScriptOrRequireJSModuleAndRun, but the javascript code is executed as transient content (not saved).

func Persist

func Persist(htmlId string)

Persist content of the presumably transient element identified by `htmlId` by extracting its `innerHTML` and then displaying it with `gonbui.DisplayHtml`. Finally, it removes the element identified by `htmlId`, leaving only the newly created one.

This goes through the JupyterServer, and therefore it can be converted to HTML, and is displayed by GitHub and such.

Usually, one does this at the end of a cell execution, when the content is no longer interactive.

Notice TransientJavascript content is overwritten and doesn't get persisted in this fashion.

func Remove

func Remove(htmlId string)

Remove removes element identified by htmlId from DOM.

func SetInnerHtml

func SetInnerHtml(htmlId, html string)

SetInnerHtml sets the html contents of a DOM element identified by `htmlId`.

Important considerations:

• Output generated in this format is not saved or convertable to HTML. It is generated dynamically with Javascript, which is not captured by Jupyter. Use `Persist` to repost content such that it can be saved.
• This prevents adding extra vertical space for each call of DisplayHtml, which allows one to better tailor the output.

For specialized control where the `html` is inserted, check InsertAdjacent call.

func SetInnerText

func SetInnerText(htmlId, text string)

SetInnerText sets the text contents of a DOM element identified by `htmlId`.

Important considerations:

• Output generated in this format is not saved or convertable to HTML. It is generated dynamically with Javascript, which is not captured by Jupyter. Use `Persist` to repost content such that it can be saved.
• This prevents adding extra vertical space for each call of DisplayHtml, which allows one to better tailor the output.

For specialized control where the `html` is inserted, check InsertAdjacent call.

func TransientJavascript

func TransientJavascript(js string)

TransientJavascript sends a block of javascript to the front-end notebook that is executed on a transient area (using UpdateHtml).

This also prevents using vertical space in the cell output at every execution -- that happens if using DisplayHtml or ScriptJavascript to execute the javascript code.

Notice this content is transient and cannot be persisted with Persist -- it's overwritten after each execution.

Types

type RelativePositionId

type RelativePositionId string

RelativePositionId is used by InsertAdjacentHtml to indicate where, relative to an HTML element (pointed by an id), the html piece is to be inserted.

const (
	BeforeBegin RelativePositionId = "beforebegin"
	AfterBegin  RelativePositionId = "afterbegin"
	BeforeEnd   RelativePositionId = "beforeend"
	AfterEnd    RelativePositionId = "afterend"
)