Containsjs NPM

ContainsJS

ContainsJS is a tool to help create HTML using include. This means you can include any .html file inside your main html page. Helps you to reuse your code on other pages.

Create your HTML snippets - Instantiate ContainsJS and pass your views folder's path as parameter
Include any .html to your pages.

Dependencies

ContainJS needs jQuery in your project to work.

jQuery

Installation

There's two ways of using ContainsJS

NPM

On Windows
$ cd into_your_app_root_folder
$ mkdir views
$ npm install contain -s
$ move /node_modules/constainsjs/contains.js /public/scripts/

On Linux/Mac
$ cd into_your_app_root_folder
$ mkdir views
$ npm install contain -s
$ mv /node_modules/constainsjs/contains.js /public/scripts/

CDN

<script src="https://cdn.jsdelivr.net/npm/containsjs@0.1.4/contains.js"></script>

In your HTML

<head>
    <!-- Your jQuery Import goes here -->
    <script src="/scripts/contains.js"></script>
</head>

Usage

After you've included Contain in your project, open your main JS file. Instantiate ContainsJS document.ready.

$(document).ready(() => {
    // -> "/views/" is the path of the views folder we created.
    // Must contain / before and after the folder path.
    var contains = new ContainsJS('/views/'); 
    contains.include('header.html');
});

In your main HTML file, use the <contains> tag.

<body>
    <contains view="header"></contains>
</body>

Note that inside <contains> the name of the file you used inside your JS, is the same as the one in HTML, apart from the .html which is not necessary in HTML.

Inside your views folder, create a header.html file.

<div>
    <nav>
        <ul>
            <li><a href="http://npmjs.org/packages/containsjs">Contain</a></li>
        </ul>
    </nav>
</div>

Using JS with your view.

If you want to include new script to your views, instantiate like this:

containjs.include('test.html', ['./test.js', './test2.js']);

Where the second parameter is a scripts array. Specify the path only from the views folder you defined. Example: Files test.js and test2.js inside /views folder.

Or even scripts from other sources

containjs.include('test.html', ['https://www.script.com/script']);

You can also run inline scripts in your HTML

<div>
    <nav>
        <ul>
            <li><a href="http://npmjs.org/packages/containsjs">Contain</a></li>
        </ul>
    </nav>
</div>
<script>alert("Hello, I'm working!")</script>

Include function with Promise

If you need synchronous including of your code, use the Promise in the function.

contains.include("header.html", [".header.js"]).then(() => {
        // Now your HTML is included.
});

Custom Variables inside HTML

If you want to use custom variables inside your HTML, you can do so by doing like this:

containjs.include('teste.html',['./teste.js'], {name: 'Bob'});

Where the third parameter is a object with the same name you will specify on your HTML.

And to access it on your HTML:

<div>
    <nav>
        <ul>
            <li><a href="http://npmjs.org/packages/containsjs">Contain</a></li>
            <p>$name</p>
        </ul>
    </nav>
</div>
<script>alert("Hello $name, I'm working!")</script>

Add the same variable with a $ in front of it.

Append Elements

There's two ways to append elements to your included HTML.

With raw elements

contains.append("table.html", "<tr>Test</tr>")

Or with another view

contains.append("table.html", null, "table-element.html", {name: "Test", age: "18"}).then(() => {
    // Now your HTML is included.
})

The function takes 4 parameters, if you are using the raw element, you only need to pass your view, and the element to be included.

If you want to include another view to it, you need to pass your view, null, the path to the other view and optionally a attributes object to be included.

Extras

You can also hide/show your views programmatically.

You don't need to use bashow on your newly created <contains></contains>. The show function can be used for transitions for example.

    contains.show('header.html');
    contains.hide('footer.html');

Notes

You can include as many tags you want, and you only need to instantiate each one, only one time.

    <contains view="header"></contains>
    <contains view="body"></contains>
    <contains view="footer"></contains>

    $(document).ready(() => {
    var contains = new ContainsJS('/views/'); 
    contains.include('header.html');
    contains.include('body.html');
    contains.include('footer.html');
});