extools v1.0.2

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/extools@1.0.2/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/extools@1.0.2/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..." }]
});

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" }]
});

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..." }]
});

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="example@gmail.com">
            <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" }]
});

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" }]
});

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" }]
});

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" }]
});