123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164 |
- /* ------------------------------------------------------------------------------
- *
- * # Dragula - drag and drop library
- *
- * Demo JS code for extension_dnd.html page
- *
- * ---------------------------------------------------------------------------- */
- // Setup module
- // ------------------------------
- var DragAndDrop = function() {
- //
- // Setup module components
- //
- // Dragula examples
- var _componentDragula = function() {
- if (typeof dragula == 'undefined') {
- console.warn('Warning - dragula.min.js is not loaded.');
- return;
- }
- // Draggable cards
- dragula([document.getElementById('cards-target-left'), document.getElementById('cards-target-right')]);
- // Draggable forms
- dragula([document.getElementById('forms-target-left'), document.getElementById('forms-target-right')]);
- // Draggable media lists
- dragula([document.getElementById('media-list-target-left'), document.getElementById('media-list-target-right')], {
- mirrorContainer: document.querySelector('.media-list-container'),
- moves: function (el, container, handle) {
- return handle.classList.contains('dragula-handle');
- }
- });
- //
- // Dropdown menu items
- //
- // Define containers
- var containers = $('.dropdown-menu-sortable').toArray();
- // Init dragula
- dragula(containers, {
- mirrorContainer: document.querySelector('.dropdown-menu-sortable')
- });
- //
- // Draggable tabs
- //
- // Basic tabs
- dragula([document.getElementById('tabs-target-left')], {
- mirrorContainer: document.querySelector('#tabs-target-left')
- });
- // Basic justified
- dragula([document.getElementById('tabs-target-right')], {
- mirrorContainer: document.querySelector('#tabs-target-right')
- });
- // Colored tabs
- dragula([document.getElementById('tabs-solid-target-left')], {
- mirrorContainer: document.querySelector('#tabs-solid-target-left')
- });
- // Colored justified
- dragula([document.getElementById('tabs-solid-target-right')], {
- mirrorContainer: document.querySelector('#tabs-solid-target-right')
- });
- //
- // Draggable pills
- //
- // Basic pills
- dragula([document.getElementById('pills-target-left')], {
- mirrorContainer: document.querySelector('#pills-target-left')
- });
- // Basic justified
- dragula([document.getElementById('pills-target-right')], {
- mirrorContainer: document.querySelector('#pills-target-right')
- });
- // Toolbar pills
- dragula([document.getElementById('pills-toolbar-target-left')], {
- mirrorContainer: document.querySelector('#pills-toolbar-target-left')
- });
- // Toolbar justified
- dragula([document.getElementById('pills-toolbar-target-right')], {
- mirrorContainer: document.querySelector('#pills-toolbar-target-right')
- });
- //
- // Accordion and collapsible
- //
- // Accordion
- dragula([document.getElementById('accordion-target')], {
- mirrorContainer: document.getElementById('accordion-target')
- });
- // Collapsible
- dragula([document.getElementById('collapsible-target')], {
- mirrorContainer: document.getElementById('collapsible-target')
- });
- };
- // Select2
- var _componentSelect2 = function() {
- if (!$().select2) {
- console.warn('Warning - select2.min.js is not loaded.');
- return;
- }
- // Initialize
- $('.form-control-select2').select2();
- };
- // Uniform
- var _comopnentUniform = function() {
- if (!$().uniform) {
- console.warn('Warning - uniform.min.js is not loaded.');
- return;
- }
- // Initializw
- $('.form-input-styled').uniform({
- fileButtonClass: 'action btn bg-warning-400'
- });
- };
- //
- // Return objects assigned to module
- //
- return {
- init: function() {
- _componentDragula();
- _componentSelect2();
- _comopnentUniform();
- }
- }
- }();
- // Initialize module
- // ------------------------------
- document.addEventListener('DOMContentLoaded', function() {
- DragAndDrop.init();
- });
|