Module: kongUtilHtmlElem

Methods

(inner) addStyleSheet(href, otherAttrsopt) → {undefined}

Add a <link rel="stylesheet" href="..."> before </head>.

Parameters:
Name Type Attributes Default Description
href string | URL
otherAttrs Object <optional>
 {}

other attributes of <link>. rel could be overwritten if you want to add different things.
Source:
Returns:
Type
undefined
Examples
/// basic usage
 addStyleSheet('https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.css');
/// works but not recommended
 addStyleSheet('apple-icon-114.png', {rel: 'apple-touch-icon', size: '114x114', type: 'image/png'});

(inner) createButton(attrs, content) → {HTMLButtonElement}

Shortcut for createElement(['button', ...]) with default type 'button'

Parameters:
Name Type Description
attrs Object
content string | JsonML
Source:
Returns:
Type
HTMLButtonElement

(inner) createElement(jsonml, namespaceopt) → {Element|TextNode}

Use JsonML to create an HTML element. For attributes setting, see setAttributes.

Parameters:
Name Type Attributes Description
jsonml JsonML
namespace string <optional>

set this to use createElementNS()
Source:
See:
  • setAttributes
Returns:
Type
Element | TextNode

(inner) createElementFromTemplate(template) → {Node}

Use HTMLTemplateElement to create an HTML element.

Parameters:
Name Type Description
template string | Node | HTMLTemplateElement
  • string: selector of the template element
  • Node: the node to be cloned
  • HTMLTemplateElement: the template where the first element is to be cloned
Source:
See:
Returns:
Type
Node

(inner) createInputComplex(inputAttrs, labelContent, wrapClassNameopt, labelPositionopt, datalistopt) → {HTMLDivElement}

Create a container wrapping an input, a label, and maybe a datalist; with auto-generated UUID for linking to each other.

Parameters:
Name Type Attributes Default Description
inputAttrs Object

attributes of <input>
labelContent string | JsonML | HTMLlabelContentent

content of <label> or itself
wrapClassName string <optional>
 ''

className for wrapping <div>
labelPosition string <optional>
 'before'

'before' or 'after'
datalist Array.<string> <optional>
 null

content of <datalist>. Empty array still results in creating <datalist>. Use null/false/undefined to disable that.
Source:
Returns:
Type
HTMLDivElement
Examples
/// basic usage
 createInputComplex({type: 'text'}, 'labelHere~');
/// checked checkbox
 createInputComplex(
     {type: 'checkbox', checked: true},
     'here is a checkbox',
     '',
     'after'
 );
/// file selector
 createInputComplex(
     {type: 'file', style: 'display: none;'},
     ['span', {style: 'border: 1px solid #444;'}, 'File Selector']
 );

(inner) createSelectElement(attrs, options) → {HTMLSelectElement}

Create <select> and <option>s inside.

Parameters:
Name Type Description
attrs Object

attributes of <select>
options Array.<string> | Map | Object

key-value pairs of <option>s; or strings for <option>s with same value and textContent.
string | Array.<string>

value(s) of selected <option>s
Source:
Returns:
Type
HTMLSelectElement
Examples
/// basic usage
 createSelectElement({}, ['a', 'b', 'c'], 'b');
/// use object as key-value pairs. note "key"s would be shown texts.
 createSelectElement(
     {multiple: true, style: 'height: 6em'},
     {text1: 'value1', text2: 'value2', text3: 'value3'},
     ['value2', 'value3']
 );

(inner) createTable(records, columnsopt, tableAttrsopt) → {HTMLTableElement}

Shortcut to create a simple HTML table. For more complicated setting (ex. cell styling; resorting; transpose; filter), you should do it by yourself.

Parameters:
Name Type Attributes Default Description
records Array.<(Array|Object)>

each element is either an array, or an object maps names to data
columns Array.<(string|JsonML)> | Object <optional>

each element is either a JsonML, or an object maps names to attributes of <th>
tableAttrs Object <optional>
 {}

attributes of <table>
Source:
Returns:
Type
HTMLTableElement
Examples
/// basic usage
 createTable([[1, 2, 3], [4, 5], ['', '', 6]]);
/// with column names
 createTable(
     [
         [1, 2, 3],
         {a: 4, b: 5},
         {c: 6}
     ],
     ['a', 'b', 'c']
 );

(inner) extendElementPrototype()

Add some methods to Element class.

Source: