includer.js

---

Includer.js is a javascript tool🔨 to assist in the creation of websites or web applications, it makes it possible to include HTML📃 parts, such as: Header, Footer, Modals, etc, or even create a MasterPage, and on the others pages simply define what should be rendered. There are two ways to use includer.js, as stated in the text above, 1st simply using inc, or 2nd using the rendering inc tag.

Why use? 🤔
When you are creating web applications💻, or even websites📰, there are sections that are usually on almost every page of the website and using conventional HTML you should usually repeat them on every page, and when you need to change something in sections should be done on every page they exist.

Includer.js solves this situation, with it the developer will be able to define the section in a single file and then import📌 it into the page they want, just as Php's include and require functions work. It also gives you the ability to set a MasterPage for all pages as Asp.Net works. And it's an easy tool to use😎.

To use simple include, simply import the script into the page you want to include, choose the preferred location, and set it based on syntax:

    <inc src="[filepath]"></inc>

☝ Very important notes:

* The file extension to be included must not be defined.
❌ Eg.: src="header.html" ; ✔ src="header"
* Includer offers a function that executes after the page is fully loaded, which is: inc.loaded (function (e) {...}), like the standard javascript functions window.onload, document.addEventListener ( 'DOMContentLoaded', ...), etc, but these functions cannot be used because THEY ARE NOT EXECUTED.

Image Illustration

---

To use include render (which has the concept of MasterPage), simply create the MasterPage structure which is usually the base HTML structure, then identify where the main content will be made available, with the inc tag with this as the src property content. There is no need to import includer.js into the MasterPage.

    <inc src="this"></inc>

Image Illustration

☝ Very importante note:

In this case, includer runs the scripts defined on the page after it is fully loaded, and the standard javascript functions like window.onload, document.addEventListener ('DOMContentLoaded', ...), etc, ARE NOT EXECUTED, but includer inc.loaded(function (e) {...}) function is executed (it can be used as non, but we advise using it).

For pages that will be rendered, the first one should be imported the includer.js script and set a render property, if it is set without value to it, by default includer will look for MasterPage in the root with the name _master_.html, but if it is into a folder, the MasterPage path must be assigned as the property value. To set the page title just set a title attribute with the desired value in the current script.

    <!-- In case where MasterPage is in the root and has the name _master_.html -->
    <script src="includer.js" render title="Main Page"></script>

    <!-- In case MasterPage is in a folder -->
    <script src="includer.js" render="shared/_master_" title="Home Page"></script>

Once you have imported the script you can proceed with the common code.

Image Illustration

* When using the simple includer, the argument of the function that is passed by inc.loaded((e) => { ... }), is the DOMContentLoaded event.
* When using include render, the argument of the function that is passed by inc.loaded((e) => { ... }), is the document element.

Structuring Order is very important🤞, because of the browser's code reading order!

Using includer-render, we also have the ability to change pages without reloading, by default all changes are made with page reloading to rebuild it, to achieve the effect of changing pages without reloading it must have consider the anchors (a tag), defining that in them the attributes: reload and pTitle.

• reload, it controls the element's click event, causing the page to be called to be injected into the element with the inc tag and the src attribute or the element with the inc-src attribute.

• pTitle, allows you to set the page title (title tag) text after the new page is injected to the value that is set to it.

    <script src="includer.js" title="Main Page"></script>
    <!-- What does includer understand when these attributes are defined:
        * reload - reload only main content.
        * pTitle - after reloading gives this title. -->
    <label> You are in Index Page <a href="home.html" reload pTitle="Home Page">Click Here</a></label>

This functionality comes with the inc.added(function(e){ ... }), which fires whenever the new page is injected, and is passed as the function argument.
Note ☝: Must be used inside the main function inc.loaded(function(e){ ... }).

If we don't want to use the includer tag (inc), we can also use the standard HTML tags and still be able to include the desired sections, so we have to set the inc-src attribute on the element where we want the content to be injected.

    <!-- Including the header -->
    <header class="myHeader" inc-src="inc/header"></header>
    
    <!-- Including the main content -->
    <main class="myMain" inc-src="inc/main"></main>

    <!-- Including the footer -->
    <footer class="myFooter" inc-src="inc/footer"></footer>

😀 Includes can be added dynamically with javascript, so it is ideal for building SPA applications (Single Page Application) 😎.

---

Thanks a lot for visiting includer.js repo 🙂, I hope you enjoyed!!! 👌

Salute 😃

© 2019, Afonso Matumona Elias | Translated by Google Translator