components_collapsible.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. /* ------------------------------------------------------------------------------
  2. *
  3. * # Collapsible, accordion and other navs
  4. *
  5. * Demo JS code for components_navs.html page
  6. *
  7. * ---------------------------------------------------------------------------- */
  8. // Setup module
  9. // ------------------------------
  10. var ComponentsCollapsible = function() {
  11. //
  12. // Setup module components
  13. //
  14. // Pickadate picker
  15. var _componentSortable = function() {
  16. if (!$().sortable) {
  17. console.warn('Warning - interactions.min.js from jQuery UI library is not loaded.');
  18. return;
  19. }
  20. // Accordion component sorting
  21. $('.accordion-sortable').sortable({
  22. connectWith: '.accordion-sortable',
  23. items: '.card',
  24. helper: 'original',
  25. cursor: 'move',
  26. handle: '[data-action=move]:not(.disabled)',
  27. revert: 100,
  28. containment: '.content',
  29. forceHelperSize: true,
  30. placeholder: 'sortable-placeholder',
  31. forcePlaceholderSize: true,
  32. tolerance: 'pointer',
  33. start: function(e, ui){
  34. ui.placeholder.height(ui.item.outerHeight());
  35. }
  36. });
  37. // Collapsible component sorting
  38. $('.collapsible-sortable').sortable({
  39. connectWith: '.collapsible-sortable',
  40. items: '.card',
  41. helper: 'original',
  42. cursor: 'move',
  43. handle: '[data-action=move]:not(.disabled)',
  44. revert: 100,
  45. containment: '.content',
  46. forceHelperSize: true,
  47. placeholder: 'sortable-placeholder',
  48. forcePlaceholderSize: true,
  49. tolerance: 'pointer',
  50. start: function(e, ui){
  51. ui.placeholder.height(ui.item.outerHeight());
  52. }
  53. });
  54. };
  55. //
  56. // Return objects assigned to module
  57. //
  58. return {
  59. init: function() {
  60. _componentSortable();
  61. }
  62. }
  63. }();
  64. // Initialize module
  65. // ------------------------------
  66. document.addEventListener('DOMContentLoaded', function() {
  67. ComponentsCollapsible.init();
  68. });