#### Sweet Alerts 2

A BEAUTIFUL, RESPONSIVE, CUSTOMIZABLE, ACCESSIBLE (WAI-ARIA) REPLACEMENT FOR JAVASCRIPT'S POPUP BOXES

###### 1. Initialize the plugin by referencing the necessary files:

                          <script src="sweetalert2.all.min.js"></script>
                            <link rel="stylesheet" type="text/css" href="sweetalert2.min.css">

###### 2. Call the sweetAlert-function after the page has loaded

                          Swal.fire({
                            title: 'Error!',
                            text: 'Do you want to continue',
                            type: 'error',
                            confirmButtonText: 'Cool'
                          })

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Plugin Link | https://sweetalert2.github.io/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/ext-component-sweet-alerts.html

#### Toastr

toastr is a Javascript library for Gnome / Growl type non-blocking notifications.

###### 1. Initialize the plugin by referencing the necessary files:

                          <script src="toastr.js"></script>
                          <link rel="stylesheet" type="text/css" href="toastr.css">

###### 2. Use toastr to display a toast for info, success, warning or error.

                          // Display an info toast with no title
                          toastr.info('Are you the 6 fingered man?')

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Plugin Link | https://github.com/CodeSeven/toastr
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/ext-component-toastr.html

#### NoUI Slider

noUiSlider is a lightweight range slider with multi-touch support and a ton of features. It supports non-linear ranges, requires no external dependencies, has keyboard support, and it works great in responsive designs..

###### 1. Initialize the plugin by referencing the necessary files:

                          <script src="nouislider.min.js"></script>
                          <link rel="stylesheet" type="text/css" href="nouislider.min.css">

###### 2. Binding to existing DOM element.

                          <div id="slider"></div>

###### 3. Basic usage looks something like this.

                          var slider = document.getElementById('slider');

                          noUiSlider.create(slider, {
                              start: [20, 80],
                              connect: true,
                              range: {
                                  'min': 0,
                                  'max': 100
                              }
                          });

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Plugin Link | https://refreshless.com/nouislider/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/ext-component-noui-slider.html

#### File Uploader

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. It’s lightweight, doesn't depend on any other library (like jQuery) and is highly customizable.

Warning! Don’t forget to specify an url option if you’re not using a form element, since Dropzone doesn't know where to post to without an action attribute.
Warning! Dropzone does not handle your file uploads on the server. You have to implement the code to receive and store the file yourself. See the section Server side implementation for more information.

###### 1. Initialize the plugin by referencing the necessary files:

                          <script src="/path/to/dropzone.min.js"></script>

###### 2. The typical way of using dropzone is by creating a form element with the class `dropzone`. That’s it. Dropzone will find all form elements with the class dropzone, automatically attach itself to it, and upload files dropped into it to the specified `action` attribute. The uploaded files can be handled just as if there would have been a html input.

                          <form action="/file-upload" class="dropzone">
                              <div class="fallback">
                                  <input name="file" type="file" multiple />
                              </div>
                          </form>

###### 3. Alternatively you can create dropzones programmatically (even on non `form` elements) by instantiating the `Dropzone` class

                          // Dropzone class:
                          var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

                          // jQuery
                          $("div#myId").dropzone({ url: "/file/post" });

#### Notes

- If you do not want the default message at all (»Drop files to upload (or click)«), you can put an element inside your dropzone element with the class `dz-message` and dropzone will not create the message for you.
- Dropzone will submit any hidden fields you have in your dropzone form. So this is an easy way to submit additional data. You can also use the `params` option.
- Dropzone adds data to the `file` object you can use when events fire. You can access `file.width` and `file.height` if it’s an image, as well as `file.upload` which is an object containing: `progress` (0-100), `total` (the total bytes) and `bytesSent`.
- If you want to add additional data to the file upload that has to be specific for each file, you can register for the `sending` event:

                                    myDropzone.on("sending", function(file, xhr, formData) {
                                        // Will send the filesize along with the file as POST data.
                                        formData.append("filesize", file.size);
                                    });

- To access the preview html of a file, you can access `file.previewElement`. For example:

                                    myDropzone.on("addedfile", function(file) {
                                        file.previewElement.addEventListener("click", function() {
                                            myDropzone.removeFile(file);
                                        });
                                    });

- If you want the whole body to be a Dropzone and display the files somewhere else you can simply instantiate a Dropzone object for the body, and define the `previewsContainer` option. The `previewsContainer` should have the `dropzone-previews` or `dropzone` class to properly display the file previews.

                                    new Dropzone(document.body, {
                                        previewsContainer: ".dropzone-previews",
                                        // You probably don't want the whole body
                                        // to be clickable to select files
                                        clickable: false
                                    });

- Look at the here for more examples.

Refer following links for usage:

Type | URL
--- | ---
Plugin Link | http://www.dropzonejs.com/
Github Page | https://github.com/enyo/dropzone
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/ext-component-file-uploader.html

#### Quill Editor

Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.

Note: to change fonts of quill editor you'll have to import your required font family in css and change editor fonts.

###### 1. Initialize the plugin by referencing the necessary files:

                <link href="quill.snow.css" rel="stylesheet">
                <script href="quill.js"> <script>

###### 2. Create the editor container:

                  <div id="editor">
                  </div>

###### 3. Basic usage looks something like this.

                    var quill = new Quill('#editor', {
                      theme: 'snow'
                    });

Type | URL
--- | ---
Plugin Link | https://quilljs.com/
Github Page | https://github.com/quilljs/quill
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/ext-component-quill-editor.html

#### Drag And Drop

Drag and drop so simple it hurts

###### 1. Basic Initialization

                <script src='dragula.min.js'></script>
                <link href="dragula.min.css" rel="stylesheet">

###### 2. Usage

              dragula([document.getElementById(left), document.getElementById(right)]);

Type | URL
--- | ---
Plugin Link | https://bevacqua.github.io/dragula/
Github Page | https://github.com/bevacqua/dragula
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/ext-component-drag-drop.html

#### Shepherd Tour

Guide your users through a tour of your app.

Note: Shepherd Tour does not support Internet Explorer.

###### 1. Necessary Files

                    <script src='shepherd.min.js'></script>
                    <link href="shepherd-theme-default.css" rel="stylesheet">

###### 2. Usage

                    var tour = new Shepherd.Tour({
                      defaultStepOptions: {
                        classes: 'shadow-md bg-purple-dark',
                        scrollTo: true
                      }
                    });

                    tour.addStep('example', {
                      title: 'Example Shepherd',
                      text: 'Creating a Shepherd is easy too! Just create ...',
                      attachTo: '.hero-example bottom',
                      advanceOn: '.docs-link click'
                    });

                    tour.start();

Type | URL
--- | ---
Plugin Link | https://shipshapecode.github.io/shepherd/docs/welcome/
Github Page | https://github.com/shipshapecode/shepherd
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/ext-component-tour.html

#### Clipboard

Clipboard is a manually created extension. Use below code to initialize clipboard

###### 1. Dom Binding

                <input type="text" class="form-control" id="copy-to-clipboard-input" value="Copy Me!">
                <button class="btn btn-primary waves-effect waves-light" id="btn-copy">Copy!</button>

###### 2. Usage

                    var userText = $("#copy-to-clipboard-input");
                    var btnCopy = $("#btn-copy");

                    // copy text on click
                    btnCopy.on("click", function () {
                      userText.select();
                      document.execCommand("copy");
                    })

Type | URL
--- | ---
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/ext-component-clipboard.html

#### Media Player

Simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.

###### 1. Required Files

            <script src='plyr.min.js'></script>
      <link href="plyr.css" rel="stylesheet">

###### 2. Usage

JavaScript

    var player = new Plyr('.default-player');

Type | URL
--- | ---
Plugin Link | https://plyr.io/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/ext-component-plyr.html

#### Context Menu

Context Menu can provide a simple list of clickable commands, or offer an in-menu form. This makes very simple attribute modification possible.

Note: The toasts appearing on click of menu items are manually configured using third party plugin Toastr.

###### 1. Required Files

                  <script src='contextMenu.min.js'></script>
                  <link href="contextMenu.min.css" rel="stylesheet">

###### 2. Dom Binding

                <button class="btn btn-primary" id="basic-context-menu">Basic Context Menu>

###### 3. Usage

                        $.contextMenu({
                          selector: "#basic-context-menu",
                          callback: function (key, options) {
                            var r = "clicked " + key;
                            window.console && console.log(r) || alert(r);
                          },
                          items: {
                            "Option 1": { name: "Option 1" },
                            "Option 2": { name: "Option 2" },
                          }
                        })

Type | URL
--- | ---
Plugin Link | https://swisnl.github.io/jQuery-contextMenu/
Github Page | https://github.com/swisnl/jQuery-contextMenu
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/ext-component-context-menu.html

#### Swiper

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

###### 1. Required Vendor Files

                    <script src='swiper.min.js'></script>
                    <link href="swiper.min.css" rel="stylesheet">

###### 2. Required Template Specific Files

                        <link href="swiper.css" rel="stylesheet">

###### 3. Dom Binding

                <div class="swiper-default swiper-container">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide"> Slider 1 data </div>
                    <div class="swiper-slide"> Slider 2 data </div>
                  </div>
                </div>

###### 4. Initialization

                var mySwiper = new Swiper('.swiper-default');

Type | URL
--- | ---
Plugin Link | https://idangero.us/swiper/
Template Page | https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/ext-component-swiper.html

#### Internationalization

18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop.

###### 1. Required Files

                    <script src='i18next.min.js'></script>
                    <link href="i18next.min.css" rel="stylesheet">

###### 2. Usage

    i18next.init({
      lng: 'en',
      debug: true,
      resources: {
        en: {
          translation: {
            "key": "hello world"
          }
        }
      }
    }, function(err, t) {
      // initialized and ready to go!
      document.getElementById('output').innerHTML = i18next.t('key');
    });

Type | URL
--- | ---
Plugin Link | https://www.i18next.com/
Github Page | https://github.com/i18next/i18next
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/ext-component-i18n.html