You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →

Book a Demo Install Sign in

concat.js

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

concat.js

Chainable DOM Builder

1.0.0

latest

Source

npm

Version published: 8 years ago

Weekly downloads: 18

Maintainers: 1

Weekly downloads

Created: 12 years ago

Source

concat.js

Chainable DOM Builder

How to use

$C(parentNode, replace, direct)
    ...
.end();

parentNode is a DOM element to put the result into.

replace is a boolean value indicates that parentNode's content should be replaced with newly built content (newly built content will be appended to the current one when replace is coerced to false).

direct indicates that everything should be rendered directly to parentNode right away (skipping documentFragment creation).

Return value is the result's documentFragment in case parentNode is not passed. When parentNode is passed, return value is undefined.

Usage example

var tmp = 0;

$C(document.body)
    .div({'class': 'ololo', 'style': 'background-color: red; height: 100px;'})
        .act(function() {
            // In all callbacks _this_ is pointing to the current element
            // (it's newly created div here).
            this.addEventListener('click', function() { alert(5555); });
        })
        .ul()
            .repeat(2)
                .li()
                    .text('aaa')
    .end(4) // end(number) could be used to replace _number_ end() calls.
    .repeat(3)
        .span({'style': function() { return 'border: 1px solid green;'}})
            .text(function(index) {
                // _index_ is the repeat() index (from 0 to 2 here).
                return index + ' ' + Math.random();
            })
        .end()
    .end()
    .repeat(function() { return ++tmp <= 5; })
        .p()
            .text(function(index) { return index + ' ' + tmp; })
        .end()
    .end()
    .div()
        .text('hello')
        .text('<br>', true) // It is possible to add unescaped markup fragments.
        .text('world')
    .end()
    .test(1 === 1) // .test() is used for conditional processing.
        .elem('section') // Not all elements have shortcut functions like .div()
            .text('ololo')
        .end()
    .end()
    .test(function() { return false; })
        .text('alala')
    .end()
    .each([9, 8, 7])
        .p()
            .text(function(item, index, arr) {
                // _index_ is .each() array index, _item_ is the array element.
                return index + ' ' + item;
            })
            .repeat(2)
                .div()
                    .text(function(index) { return index; })
                .end()
            .end()
            .div()
                .text(function(item, index, arr) { return index + ' ' + item; })
    .end(3)
    .choose()
        .when(false).text('1111').end()
        .when(true).text('2222').end()
        .otherwise().text('3333').end()
    .end()
.end();

Will append the following to <body> tag:

<div class="ololo" style="background-color: red; height: 100px;">
    <ul>
        <li>aaa</li>
        <li>aaa</li>
    </ul>
</div>
<span style="border: 1px solid green;">0 0.3901003133505583</span>
<span style="border: 1px solid green;">1 0.19187432969920337</span>
<span style="border: 1px solid green;">2 0.0640524192713201</span>
<p>0 1</p>
<p>1 2</p>
<p>2 3</p>
<p>3 4</p>
<p>4 5</p>
<div>
    hello
    <br>
    world
</div>
<section>ololo</section>
<p>
    0 9
    <div>0</div>
    <div>1</div>
    <div>0 9</div>
</p>
<p>
    1 8
    <div>0</div>
    <div>1</div>
    <div>1 8</div>
</p>
<p>
    2 7
    <div>0</div>
    <div>1</div>
    <div>2 7</div>
</p>
2222

Define custom actions

You can define custom actions for build process. For example, if you use jQuery, you can define an action for event handlers binding like below:

$C.define('on', function(item, index, arr, args) {
    $.fn.on.apply($(this), args);
});

$C(document.body)
    .div()
        .on('click', function(e) { alert(123); })
        .on('mousemove', function(e) { alert(345); })
        .text('I am clickable and mousemoveable')
.end(2);

Memorize results

On every step of DOM building, we can memorize nodes and other data. Memorized items are being put into $C.mem dictionary. $C.mem dictionary is initially empty, but it is shared between different $C() calls. You may want to reset this dictionary manually like $C.mem = {}.

$C(document.body)
    .div()
        .mem('helloDiv')
        .text('hello')
    .end()
    .each([11, 22])
        .span()
            .mem(function(item, index, arr) {
                return 'each' + index;
            }, function(item, index, arr) {
                return index + ' ' + item + ' ' + this.tagName.toLowerCase();
            })
        .end()
    .end()
.end();

In this example $C.mem will be:

{helloDiv: <div>hello</div>, each0: '0 11 span', each1: '1 22 span'}

Another example (with $C.mem resetting):

$C.mem = {aa: 123, bb: 234};

$C(document.body)
    .div()
        .mem('aa')
        .text('hello')
    .end()
.end();

And $C.mem will be:

{aa: <div>hello</div>, bb: 234}

Keywords

DOM

builder

FAQs

What is concat.js?

Is concat.js popular?

Is concat.js well maintained?

Package last updated on 31 Jan 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install