logo

/Code Snippet|v2.3.3

Module

domUtiladdClass.jsline 23

domUtil module

Static Methods

addClass(element, cssClass)addClass.jsline 23

Add css class to element

PARAMETERS
NameTypeDescription

element

HTMLElementSVGElement

target element

cssClass

string

css classes to add

closest(element, selector)closest.jsline 16

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 17

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 27

Disable browser's text selection behaviors.

PARAMETERS
NameTypeDescription

el

[ HTMLElement ]

target element. if not supplied, use

enableTextSelection(el)enableTextSelection.jsline 28

Enable browser's text selection behaviors.

PARAMETERS
NameTypeDescription

el

[ HTMLElement ]

target element. if not supplied, use

getClass(element)getClass.jsline 15

Get HTML element's design classes.

PARAMETERS
NameTypeDescription

element

HTMLElementSVGElement

target element

RETURNS:
{

string

} - element css class name

getData(element, key)getData.jsline 16

Get data value from data-attribute

PARAMETERS
NameTypeDescription

element

HTMLElement

target element

key

string

key

RETURNS:
{

string

} - value

hasClass(element, cssClass)hasClass.jsline 17

Check element has specific css class

PARAMETERS
NameTypeDescription

element

HTMLElementSVGElement

target element

cssClass

string

css class

RETURNS:
{

boolean

}

matches(element, selector)matches.jsline 28

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 18

Remove css class from element

PARAMETERS
NameTypeDescription

element

HTMLElementSVGElement

target element

cssClass

string

css classes to remove

removeData(element, key)removeData.jsline 15

Remove data property

PARAMETERS
NameTypeDescription

element

HTMLElement

target element

key

string

key

removeElement(element)removeElement.jsline 12

Remove element from parent node.

PARAMETERS
NameTypeDescription

element

HTMLElement

element to remove.

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

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 383

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
// ES6
import template from 'tui-code-snippet/domUtil/template'; 

// CommonJS
const template = require('tui-code-snippet/domUtil/template'); 

const 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}}';

const 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;
  }
};

const 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 18

Toggle css class

PARAMETERS
NameTypeDescription

element

HTMLElementSVGElement

target element

cssClass

string

css classes to toggle

Resizable