Plugins

Additional features from 3rd-party library.

All of plugins initialization code can be found at assets/js/main.js for front page site and assets/js/main-admin.js for admin site

Apex Charts

Modern and interactive charts we use to represent statistic data into chart in admin dashboard page.

              
  
              
            
              
  //
  // Charts
  //
  
  "use strict";
  
  var ApexCharts = (function () {
    
    var $apexChart = $(".apex-chart");
    var options1 = {
      series: [{
        name: 'Sales',
        type: 'column',
        data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30],
        color: '#5465ff'
      }, {
        name: 'Session',
        type: 'area',
        data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43],
        color: '#ececec',
      }, {
        name: 'Conversion Rate',
        type: 'line',
        data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39],
        color: '#08aa58'
      }],
      chart: {
        height: 350,
        type: 'line',
        stacked: false,
      },
      grid: {
        borderColor: '#f5f7f9',
      },
      stroke: {
        width: [0, 0, 2],
        curve: 'smooth'
      },
      plotOptions: {
        bar: {
          columnWidth: '50%'
        }
      },
      fill: {
        opacity: [0.85, 0.45, 1],
      },
      labels: ['01/01/2003', '02/01/2003', '03/01/2003', '04/01/2003', '05/01/2003', '06/01/2003', '07/01/2003',
        '08/01/2003', '09/01/2003', '10/01/2003', '11/01/2003'
      ],
      markers: {
        size: 0
      },
      xaxis: {
        type: 'datetime'
      },
      yaxis: {
        min: 0
      },
      tooltip: {
        shared: true,
        intersect: false,
        y: {
          formatter: function (y) {
            if (typeof y !== "undefined") {
              return y.toFixed(0);
            }
            return y;
          }
        }
      }
    };
  
    if($apexChart.length) {
      new ApexCharts(document.querySelector("#dashboardChart"), options1).render();
    }
  })();

Datatables

Bootstrap styled tables with advanced interactions and controls

Title Published Date Status Actions
About Us July 22, 2021 Published
Contact July 20, 2021 Published
Support July 22, 2021 Published
Work with Us July 16, 2021 Draft 
              
  
              
            
              
  //
  // Datatables
  //

  "use strict";

  var tables = (function () {
    var $tables = $(".datatables");

    function init($this) {
      const table = $this.DataTable({
        responsive: true,
        columnDefs: [ {
          orderable: false,
          className: 'select-checkbox',
          targets: 0
        } ],
        select: {
            style: 'multi',
            selector: 'td:first-child'
        },
      });
      
      table.on("click", "th.select-checkbox", function() {
          if ($("th.select-checkbox").hasClass("selected")) {
              table.rows().deselect();
              $("th.select-checkbox").removeClass("selected");
          } else {
              table.rows().select();
              $("th.select-checkbox").parent().addClass("selected");
          }
      }).on("select deselect", function() {
          ("Some selection or deselection going on")
          if (table.rows({
                  selected: true
              }).count() !== table.rows().count()) {
              $("th.select-checkbox").parent().removeClass("selected");
          } else {
              $("th.select-checkbox").addClass("selected");
          }
      });
    }

    if($tables.length) {
      $tables.each(function () {
        init($(this));
      })
    }
  })();

Date Range Picker

A JavaScript component for choosing date ranges, dates and times.

              
  
              
            
              
  //
  // Date range picker
  //
  
  "use strict";
  
  var daterange = (function () {
    var $dtps = $('.daterange');
  
    function init($this) {
      var start = moment().subtract(29, 'days');
      var end = moment();
  
      $this.daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
          'Today': [moment(), moment()],
          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
          'This Month': [moment().startOf('month'), moment().endOf('month')],
          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
      });
    }
  
    if($dtps.length) {
      $dtps.each(function () {
        init($(this));
      })
    }
  })();

Dropzone

Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop library on the web and is used by millions of people.

              
  
              
            
              
  //
  // Dropzone
  //
  
  "use strict";
  
  var uploader = (function () {
    var $uploaders = $('.dropzone');
  
    function init($this) {
      new Dropzone($this[0], { 
        url: "path/to/server" ,
        addRemoveLinks: true
      })
    }
  
    if($uploaders.length) {
      $uploaders.each(function () {
        init($(this));
      })
    }
  })();

ElevateZoom-Plus

As shown in single product page for eCommerce, this plugin zooms images within a container or also in a "lens" that floats overtop of web page.

              
  
              
            
              
  //
  // Image zoom
  //

  "use strict";

  var gallery = (function () {
    var $imageGalleries = $(".gallery-image-zoom");

    function init($this) {
      var imgZoom = $($this).find('.img-zoom');
      imgZoom.ezPlus({
        zoomType: 'inner',
        gallery: 'gallery',
        galleryActiveClass: 'border rounded-1'
      });
    }

    if($imageGalleries.length) {
      $imageGalleries.each(function () {
        init($(this));
      })
    }
  })();

SyoTimer

Plugin for countdown timer as we use at event landing page.

              
  
              
            
              
  //
  // Timer
  //

  "use strict";

  var CountdownTimer = (function () {
    var $timers = $(".timer");

    function init($this) {
      $($this).syotimer({
        date: new Date(...$($this).data("target")),
      });
    }

    if($timers.length) {
      $timers.each(function () {
        init($(this));
      })
    }
  })();

Select2

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. Plugin theme Select2 Bootstrap 5 Theme is used to make the style compatible with Bootstrap 5. 

              
  
              
            
              
  //
  // Select2
  //
  
  "use strict";
  
  var select2 = (function () {
    var $selects = $('.select2');
  
    function init($this) {
      $this.select2({
        theme: "bootstrap-5",
        placeholder: $($this).data('select2-placeholder'),
        tags: $($this).data('select2-tags')
      })
    }
  
    if($selects.length) {
      $selects.each(function () {
        init($(this));
      })
    }
  })();

Swiper

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. We use Swiper on section that require slider such as testimonials, product carousel, image slider and also content slider.

              
  
              
            
              
  //
  // Swiper default
  //

  "use strict";

  var swiperDefault = (function () {
    var $sliders = $(".swiper-default");

    function init($this) {
      new Swiper($this, {
        loop: true,
        autoplay: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          dynamicBullets: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    }

    if($sliders.length) {
      $sliders.each(function () {
        init(this);
      })
    }
  })();
On this page