table_elements.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. /* ------------------------------------------------------------------------------
  2. *
  3. * # Table elements
  4. *
  5. * Demo JS code for table_elements.html page
  6. *
  7. * ---------------------------------------------------------------------------- */
  8. // Setup module
  9. // ------------------------------
  10. var TableElements = function() {
  11. //
  12. // Setup module components
  13. //
  14. // Default file input style
  15. var _componentMultiselect = function() {
  16. if (!$().multiselect) {
  17. console.warn('Warning - bootstrap-multiselect.js is not loaded.');
  18. return;
  19. }
  20. // Initialize
  21. $('.form-control-multiselect').multiselect();
  22. };
  23. // Default file input style
  24. var _componentSelect2 = function() {
  25. if (!$().select2) {
  26. console.warn('Warning - select2.min.js is not loaded.');
  27. return;
  28. }
  29. // Basic select
  30. $('.form-control-select2').select2({
  31. minimumResultsForSearch: Infinity
  32. });
  33. //
  34. // Select2 with icons
  35. //
  36. // Format icon
  37. function iconFormat(icon) {
  38. var originalOption = icon.element;
  39. if (!icon.id) { return icon.text; }
  40. var $icon = "<i class='icon-" + $(icon.element).data('icon') + "'></i>" + icon.text;
  41. return $icon;
  42. }
  43. // Initialize with options
  44. $('.form-control-select2-actions').select2({
  45. templateResult: iconFormat,
  46. minimumResultsForSearch: Infinity,
  47. templateSelection: iconFormat,
  48. escapeMarkup: function(m) { return m; }
  49. });
  50. };
  51. // Uniform
  52. var _componentUniform = function() {
  53. if (!$().uniform) {
  54. console.warn('Warning - uniform.min.js is not loaded.');
  55. return;
  56. }
  57. // Styled checkboxes, radios
  58. $('.form-input-styled').uniform({
  59. fileButtonClass: 'action btn bg-warning-400'
  60. });
  61. };
  62. // Switchery
  63. var _componentSwitchery = function() {
  64. if (typeof Switchery == 'undefined') {
  65. console.warn('Warning - switchery.min.js is not loaded.');
  66. return;
  67. }
  68. // Initialize
  69. var elems = Array.prototype.slice.call(document.querySelectorAll('.form-input-switchery'));
  70. elems.forEach(function(html) {
  71. var switchery = new Switchery(html);
  72. });
  73. //
  74. // "Display controls" switch
  75. //
  76. // Initialize Switchery
  77. var controls = document.querySelector('.form-input-switchery-controls');
  78. var controlsInit = new Switchery(controls);
  79. // Change select state on toggle
  80. controls.onchange = function() {
  81. if(controls.checked) {
  82. $('#available_controls').prop('disabled', false);
  83. }
  84. else {
  85. $('#available_controls').prop('disabled', true);
  86. }
  87. };
  88. };
  89. // Bootstrap file upload
  90. var _componentFileUpload = function() {
  91. if (!$().fileinput) {
  92. console.warn('Warning - fileinput.min.js is not loaded.');
  93. return;
  94. }
  95. // Multiple files uploader
  96. $('.bootstrap-uploader').fileinput({
  97. browseLabel: 'Browse',
  98. browseIcon: '<i class="icon-file-plus mr-2"></i>',
  99. uploadIcon: '<i class="icon-file-upload2 mr-2"></i>',
  100. removeIcon: '<i class="icon-cross2 font-size-base mr-2"></i>',
  101. layoutTemplates: {
  102. icon: '<i class="icon-file-check"></i>'
  103. },
  104. initialCaption: 'No file selected'
  105. });
  106. };
  107. // Touchspin spinners
  108. var _componentTouchspin = function() {
  109. if (!$().TouchSpin) {
  110. console.warn('Warning - touchspin.min.js is not loaded.');
  111. return;
  112. }
  113. // Initialize
  114. $('.form-control-touchspin').TouchSpin({
  115. min: 0,
  116. max: 100,
  117. step: 0.1,
  118. decimals: 2,
  119. prefix: '$'
  120. });
  121. };
  122. //
  123. // Return objects assigned to module
  124. //
  125. return {
  126. init: function() {
  127. _componentMultiselect();
  128. _componentSelect2();
  129. _componentUniform();
  130. _componentSwitchery();
  131. _componentFileUpload();
  132. _componentTouchspin();
  133. }
  134. }
  135. }();
  136. // Initialize module
  137. // ------------------------------
  138. document.addEventListener('DOMContentLoaded', function() {
  139. TableElements.init();
  140. });