logo

/Code Snippet|v2.3.0

Module

domUtiladdClass.jsline 24

domUtil module

Static Methods

addClass(element, cssClass)addClass.jsline 24

Add css class to element

PARAMETERS
NameTypeDescription

element

HTMLElementSVGElement

target element

cssClass

string

css classes to add

closest(element, selector)closest.jsline 17

Find parent element recursively

PARAMETERS
NameTypeDescription

element

HTMLElement

base element to start find

selector

string

selector string for find

RETURNS:
{

HTMLElement

} - element finded or null

css(element, key, value)css.jsline 18

Setting element style

PARAMETERS
NameTypeDescription

element

HTMLElementSVGElement

element to setting style

key

stringobject

style prop name or {prop: value} pair object

value

[ string ]

style value

disableTextSelection(el)disableTextSelection.jsline 28

Disable browser's text selection behaviors.

PARAMETERS
NameTypeDescription

el

[ HTMLElement ]

target element. if not supplied, use

enableTextSelection(el)enableTextSelection.jsline 29

Enable browser's text selection behaviors.

PARAMETERS
NameTypeDescription

el

[ HTMLElement ]

target element. if not supplied, use

getClass(element)getClass.jsline 16

Get HTML element's design classes.

PARAMETERS
NameTypeDescription

element

HTMLElementSVGElement

target element

RETURNS:
{

string

} - element css class name

getData(element, key)getData.jsline 17

Get data value from data-attribute

PARAMETERS
NameTypeDescription

element

HTMLElement

target element

key

string

key

RETURNS:
{

string

} - value

hasClass(element, cssClass)hasClass.jsline 18

Check element has specific css class

PARAMETERS
NameTypeDescription

element

HTMLElementSVGElement

target element

cssClass

string

css class

RETURNS:
{

boolean

}

matches(element, selector)matches.jsline 29

Check element match selector

PARAMETERS
NameTypeDescription

element

HTMLElement

element to check

selector

string

selector to check

RETURNS:
{

boolean

} - is selector matched to element?

removeClass(element, cssClass)removeClass.jsline 19

Remove css class from element

PARAMETERS
NameTypeDescription

element

HTMLElementSVGElement

target element

cssClass

string

css classes to remove

removeData(element, key)removeData.jsline 16

Remove data property

PARAMETERS
NameTypeDescription

element

HTMLElement

target element

key

string

key

removeElement(element)removeElement.jsline 13

Remove element from parent node.

PARAMETERS
NameTypeDescription

element

HTMLElement

element to remove.

setData(element, key, value)setData.jsline 17

Set data attribute to target element

PARAMETERS
NameTypeDescription

element

HTMLElement

element to set data attribute

key

string

key

value

string

value

template(text, context)template.jsline 380

Convert text by binding expressions with context.

If expression exists in the context, it will be replaced.
ex) '{{title}}' with context {title: 'Hello!'} is converted to 'Hello!'.
An array or object can be accessed using bracket and dot notation.
ex) '{{odds[2]}}' with context {odds: [1, 3, 5]} is converted to '5'.
ex) '{{evens[first]}}' with context {evens: [2, 4], first: 0} is converted to '2'.
ex) '{{project["name"]}}' and '{{project.name}}' with context {project: {name: 'CodeSnippet'}} is converted to 'CodeSnippet'.

If replaced expression is a function, next expressions will be arguments of the function.
ex) '{{add 1 2}}' with context {add: function(a, b) {return a + b;}} is converted to '3'.

It has 3 predefined block helpers '{{helper ...}} ... {{/helper}}': 'if', 'each', 'with ... as ...'.
1) 'if' evaluates conditional statements. It can use with 'elseif' and 'else'.
2) 'each' iterates an array or object. It provides '@index'(array), '@key'(object), and '@this'(current element).
3) 'with ... as ...' provides an alias.

PARAMETERS
NameTypeDescription

text

string

text with expressions

context

object

context

RETURNS:
{

string

} - text that bind with its context
EXAMPLES
var template = require('tui-code-snippet/domUtil/template');

var source = 
    '<h1>'
  +   '{{if isValidNumber title}}'
  +     '{{title}}th'
  +   '{{elseif isValidDate title}}'
  +     'Date: {{title}}'
  +   '{{/if}}'
  + '</h1>'
  + '{{each list}}'
  +   '{{with addOne @index as idx}}'
  +     '<p>{{idx}}: {{@this}}</p>'
  +   '{{/with}}'
  + '{{/each}}';

var context = {
  isValidDate: function(text) {
    return /^\d{4}-(0|1)\d-(0|1|2|3)\d$/.test(text);
  },
  isValidNumber: function(text) {
    return /^\d+$/.test(text);
  }
  title: '2019-11-25',
  list: ['Clean the room', 'Wash the dishes'],
  addOne: function(num) {
    return num + 1;
  }
};

var result = template(source, context);
console.log(result); // <h1>Date: 2019-11-25</h1><p>1: Clean the room</p><p>2: Wash the dishes</p>

toggleClass(element, cssClass)toggleClass.jsline 19

Toggle css class

PARAMETERS
NameTypeDescription

element

HTMLElementSVGElement

target element

cssClass

string

css classes to toggle

Resizable