ExTools

Extra Javascript Tools for your website Quick & Easy

Tools included:

• TagInput
• Modal
• Clone
• AutoComplete
• DatePicker
• Calculator
• Upload

Installation

Simply include it as a <script> tag from CDN.

<script src="https://unpkg.com/[email protected]/extools.min.js"></script>

Or

# Use
npm install extools
# Or
yarn add extools

//Then
const extools = require("extools");

And don't forget css

<link rel="stylesheet" href="https://unpkg.com/[email protected]/extools.min.css">

Documentation & Example

TagInput

See example

First, create a blank Container for the tool

<div class="container1"></div>

Then, call the tool with the script

var t = new extools({ 
    container: ".container1", 
    tool: "taginput", 
    name: "taginput", 
    data: ["tag1", "tag", "tag3"],
    attributes: [{ el: ".input", name: "placeholder", value: "Enter a tag..." }]
});

|Attribute|Required|Uses| |---------|:------:|---| |container|yes|Defines container element for the tool| |tool|yes|Select the tool. Tools list here| |name|no|Name attribute for the hidden Input| |data|no|JSON array. The tags will shown on load| |attributes|no|JSON array. Set custom attribute for an element inside container|

Modal

See example

First, create a Container for the tool

<div class="container2">
    <button data-action="show">Show content</button>
    <div class="et--modal--hidden" data-target="hidden">
        You can put anything you want inside this `<div>`
    </div>
</div>

You can customize anything, except for the attribute data-action and data-target. Then, call the tool with the script

var t = new extools({ 
    container: ".container2", 
    tool: "modal",
    attributes: [{ el: "#select-element-inside-container", name: "custom-attribute-name", value: "attribute-value" }]
});

|Attribute|Required|Uses| |---------|:------:|---| |container|yes|Defines container element for the tool| |tool|yes|Select the tool. Tools list here| |attributes|no|JSON array. Set custom attribute for an element inside the container|

AutoComplete

See example

First, create a Container for the tool

<div class="container3"></div>

Then, call the tool with the script

var t = new extools({ 
    container: ".container3", 
    tool: "autocomplete",
    data: ["John", "Jenny", "Jack", "Harry"],
    name: "autocomplete",
    highlight: "#color-code",
    attributes: [{ el: ".input", name: "placeholder", value: "Type to search..." }]
});

|Attribute|Required|Uses| |---------|:------:|---| |container|yes|Defines container element for the tool| |tool|yes|Select the tool. Tools list here| |data|yes|JSON array. Contains all data to queried from| |name|no|Name attribute for the Input| |highlight|no|Color code for highlighting the text| |attributes|no|JSON array. Set custom attribute for an element inside the container|

Clone

See example

First, create a Container for the tool

<div class="container4">
    <div data-target="bucket" class="panel">
        <div class="panel-block" data-target="source">
            <span>Email:</span>
            <input type="email" class="input" name="emails[]" placeholder="[email protected]">
            <span class="button is-danger" data-action="remove"><span class="icon"><i class="far fa-trash-alt"></i></span></span>
        </div>
    </div>
    <button type="button" class="button is-dark" data-action="clone">Clone</button>
</div>

You can customize anything, except for the attribute data-action and data-target. Then, call the tool with the script

var t = new extools({ 
    container: ".container4", 
    tool: "clone",
    attributes: [{ el: "#select-element-inside-container", name: "custom-attribute-name", value: "attribute-value" }]
});

|Attribute|Required|Uses| |---------|:------:|---| |container|yes|Defines container element for the tool| |tool|yes|Select the tool. Tools list here| |attributes|no|JSON array. Set custom attribute for an element inside the container|

DatePicker

See example

First, create a Container for the tool

<div class="container5"></div>

Then, call the tool with the script

var t = new extools({ 
    container: ".container5", 
    tool: "datepicker",
    name: "datepicker",
    date: "2019-04-19",
    attributes: [{ el: "#select-element-inside-container", name: "custom-attribute-name", value: "attribute-value" }]
});

|Attribute|Required|Uses| |---------|:------:|---| |container|yes|Defines container element for the tool| |tool|yes|Select the tool. Tools list here| |name|no|Name attribute for the hidden Input| |date|no|yyyy-mm-dd. The date selected on start| |attributes|no|JSON array. Set custom attribute for an element inside the container|

Calculator

See example

First, create a Container for the tool

<div class="container6"></div>

Then, call the tool with the script

var t = new extools({ 
    container: ".container6", 
    tool: "calculator",
    name: "datepicker",
    attributes: [{ el: "#select-element-inside-container", name: "custom-attribute-name", value: "attribute-value" }]
});

|Attribute|Required|Uses| |---------|:------:|---| |container|yes|Defines container element for the tool| |tool|yes|Select the tool. Tools list here| |name|no|Name attribute for the hidden Input| |attributes|no|JSON array. Set custom attribute for an element inside the container|

Upload

See example

First, create a Container for the tool

<div class="container7"></div>

Then, call the tool with the script

var t = new extools({ 
    container: ".container7", 
    tool: "upload",
    name: "upload",
    multiple: true,
    directory: true,
    onChange: function(e) {
        //callback function for input
        console.log(e.target.files);
    },
    attributes: [{ el: "#select-element-inside-container", name: "custom-attribute-name", value: "attribute-value" }]
});

|Attribute|Required|Uses| |---------|:------:|---| |container|yes|Defines container element for the tool| |tool|yes|Select the tool. Tools list here| |name|no|Name attribute for the file Input| |multiple|no|Allow select multiple Files at once| |directory|no|Allow select Folder| |onChange|no|Callback function for the File input onchange| |attributes|no|JSON array. Set custom attribute for an element inside the container|