VTL.createView(component_id: string) creates a view for the component component_id. Returns VTL.Promise after successfully discovering the component and loading the view data.
VTL.createForm(component_id: string) creates a form for the component component_id. Returns VTL.Promise after successfully detecting the component and initializing the form.
VTL.error(type: string, message: string, location: string): displays an error message.
VTL.initialPOST sends an initial POST with a query string from the URL.
VTL.updateMathJax updates the formula view when using MathJax.
Using handlers:
VTL.createForm("login").then(VTL.initialPOST);
new VTL.Component(id: string) creates a new VTL.Component.
component.id: string: component ID.
component.model: XMLDocument: component model.
component.view: HTMLElement: component view.
component.promise(executor) returns a promise, bound to this component.
executor: resolve => void is a function, to be executed by the constructor, during the process of constructing the new promise.
resolve(status: string) invokes the next promise in the chain, bound to this component.
VTL.Promise allows multiple calls of resolve inside a function executor and nested asynchronous functions. Every time you call resolve all subsequent promises will be invoked.
reject(reason) is not supported in VTL.Promise. VTL.error is used instead.
promise.then(onFulfilled) adds a fulfillment handler to the promise and returns a new promise.
onFulfilled: component => VTL.Promise: the fulfillment handler must return an object of type VTL.Promise.
catch(onRejected) is not supported in VTL.Promise. VTL.error is used instead.
.A4 = .w-A4 + .mx-auto.
.A5 = .w-A5 + .mx-auto.
.A6 = .w-A6 + .mx-auto.
.subquery, #subquery: when clicked adds the current query string to the attribute href.
.btn-back, #btn-back: button "Back".
.btn-print, #btn-print: button "Print".
.btn-reload, #btn-reload button "Refresh".
.form-floating-group vertical input group for .form-floating.
.fw-300 = font-weight: 300.
.fw-500 = font-weight: 500.
.inner-my-0 removes the top margin of the first child element and the bottom margin of the last child element.
.text-shadow adds text-shadow.
.w-A4 sets the maximum length = A4 (40em, because 40em * 12pt (font size) = almost 170mm = 210mm (A4) -20mm left -20mm right).
.w-A5 sets the maximum length = A5 (30em, because 30em * 12pt (font size) = almost 128mm = 148mm (A5) -10mm left -10mm right).
.w-A6 sets the maximum length = A6 (20em, because 20em * 12pt (font size) = almost 85mm = 105mm (A6) -10mm left -10mm right).
.w-min = width: min-content.
.w-max = width: max-content.
The location of the backend server can be changed using the HTML tag:
<link id="server" href="http://vaskovsky.net/vtl/sample/en/" rel="preconnect"/>
where http://vaskovsky.net/vtl/sample/en/ is the address of your backend server.
vtl.src.js: JavaScript framework.
vtl.js: minimized version of the file vtl.src.js.
vtl.css: CSS style set.
style.css = vtl.css + questionable changes to the styles of standard elements.
markdown.css: minimum set of styles for simple text documents.