extension_dnd.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. /* ------------------------------------------------------------------------------
  2. *
  3. * # Dragula - drag and drop library
  4. *
  5. * Demo JS code for extension_dnd.html page
  6. *
  7. * ---------------------------------------------------------------------------- */
  8. // Setup module
  9. // ------------------------------
  10. var DragAndDrop = function() {
  11. //
  12. // Setup module components
  13. //
  14. // Dragula examples
  15. var _componentDragula = function() {
  16. if (typeof dragula == 'undefined') {
  17. console.warn('Warning - dragula.min.js is not loaded.');
  18. return;
  19. }
  20. // Draggable cards
  21. dragula([document.getElementById('cards-target-left'), document.getElementById('cards-target-right')]);
  22. // Draggable forms
  23. dragula([document.getElementById('forms-target-left'), document.getElementById('forms-target-right')]);
  24. // Draggable media lists
  25. dragula([document.getElementById('media-list-target-left'), document.getElementById('media-list-target-right')], {
  26. mirrorContainer: document.querySelector('.media-list-container'),
  27. moves: function (el, container, handle) {
  28. return handle.classList.contains('dragula-handle');
  29. }
  30. });
  31. //
  32. // Dropdown menu items
  33. //
  34. // Define containers
  35. var containers = $('.dropdown-menu-sortable').toArray();
  36. // Init dragula
  37. dragula(containers, {
  38. mirrorContainer: document.querySelector('.dropdown-menu-sortable')
  39. });
  40. //
  41. // Draggable tabs
  42. //
  43. // Basic tabs
  44. dragula([document.getElementById('tabs-target-left')], {
  45. mirrorContainer: document.querySelector('#tabs-target-left')
  46. });
  47. // Basic justified
  48. dragula([document.getElementById('tabs-target-right')], {
  49. mirrorContainer: document.querySelector('#tabs-target-right')
  50. });
  51. // Colored tabs
  52. dragula([document.getElementById('tabs-solid-target-left')], {
  53. mirrorContainer: document.querySelector('#tabs-solid-target-left')
  54. });
  55. // Colored justified
  56. dragula([document.getElementById('tabs-solid-target-right')], {
  57. mirrorContainer: document.querySelector('#tabs-solid-target-right')
  58. });
  59. //
  60. // Draggable pills
  61. //
  62. // Basic pills
  63. dragula([document.getElementById('pills-target-left')], {
  64. mirrorContainer: document.querySelector('#pills-target-left')
  65. });
  66. // Basic justified
  67. dragula([document.getElementById('pills-target-right')], {
  68. mirrorContainer: document.querySelector('#pills-target-right')
  69. });
  70. // Toolbar pills
  71. dragula([document.getElementById('pills-toolbar-target-left')], {
  72. mirrorContainer: document.querySelector('#pills-toolbar-target-left')
  73. });
  74. // Toolbar justified
  75. dragula([document.getElementById('pills-toolbar-target-right')], {
  76. mirrorContainer: document.querySelector('#pills-toolbar-target-right')
  77. });
  78. //
  79. // Accordion and collapsible
  80. //
  81. // Accordion
  82. dragula([document.getElementById('accordion-target')], {
  83. mirrorContainer: document.getElementById('accordion-target')
  84. });
  85. // Collapsible
  86. dragula([document.getElementById('collapsible-target')], {
  87. mirrorContainer: document.getElementById('collapsible-target')
  88. });
  89. };
  90. // Select2
  91. var _componentSelect2 = function() {
  92. if (!$().select2) {
  93. console.warn('Warning - select2.min.js is not loaded.');
  94. return;
  95. }
  96. // Initialize
  97. $('.form-control-select2').select2();
  98. };
  99. // Uniform
  100. var _comopnentUniform = function() {
  101. if (!$().uniform) {
  102. console.warn('Warning - uniform.min.js is not loaded.');
  103. return;
  104. }
  105. // Initializw
  106. $('.form-input-styled').uniform({
  107. fileButtonClass: 'action btn bg-warning-400'
  108. });
  109. };
  110. //
  111. // Return objects assigned to module
  112. //
  113. return {
  114. init: function() {
  115. _componentDragula();
  116. _componentSelect2();
  117. _comopnentUniform();
  118. }
  119. }
  120. }();
  121. // Initialize module
  122. // ------------------------------
  123. document.addEventListener('DOMContentLoaded', function() {
  124. DragAndDrop.init();
  125. });