bootstrap-table-mobile.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. (function (global, factory) {
  2. if (typeof define === "function" && define.amd) {
  3. define([], factory);
  4. } else if (typeof exports !== "undefined") {
  5. factory();
  6. } else {
  7. var mod = {
  8. exports: {}
  9. };
  10. factory();
  11. global.bootstrapTableMobile = mod.exports;
  12. }
  13. })(this, function () {
  14. 'use strict';
  15. /**
  16. * @author: Dennis Hernández
  17. * @webSite: http://djhvscf.github.io/Blog
  18. * @version: v1.1.0
  19. */
  20. !function ($) {
  21. 'use strict';
  22. var showHideColumns = function showHideColumns(that, checked) {
  23. if (that.options.columnsHidden.length > 0) {
  24. $.each(that.columns, function (i, column) {
  25. if (that.options.columnsHidden.indexOf(column.field) !== -1) {
  26. if (column.visible !== checked) {
  27. that.toggleColumn(that.fieldsColumnsIndex[column.field], checked, true);
  28. }
  29. }
  30. });
  31. }
  32. };
  33. var resetView = function resetView(that) {
  34. if (that.options.height || that.options.showFooter) {
  35. setTimeout(function () {
  36. that.resetView.call(that);
  37. }, 1);
  38. }
  39. };
  40. var changeView = function changeView(that, width, height) {
  41. if (that.options.minHeight) {
  42. if (width <= that.options.minWidth && height <= that.options.minHeight) {
  43. conditionCardView(that);
  44. } else if (width > that.options.minWidth && height > that.options.minHeight) {
  45. conditionFullView(that);
  46. }
  47. } else {
  48. if (width <= that.options.minWidth) {
  49. conditionCardView(that);
  50. } else if (width > that.options.minWidth) {
  51. conditionFullView(that);
  52. }
  53. }
  54. resetView(that);
  55. };
  56. var conditionCardView = function conditionCardView(that) {
  57. changeTableView(that, false);
  58. showHideColumns(that, false);
  59. };
  60. var conditionFullView = function conditionFullView(that) {
  61. changeTableView(that, true);
  62. showHideColumns(that, true);
  63. };
  64. var changeTableView = function changeTableView(that, cardViewState) {
  65. that.options.cardView = cardViewState;
  66. that.toggleView();
  67. };
  68. var debounce = function debounce(func, wait) {
  69. var timeout;
  70. return function () {
  71. var context = this,
  72. args = arguments;
  73. var later = function later() {
  74. timeout = null;
  75. func.apply(context, args);
  76. };
  77. clearTimeout(timeout);
  78. timeout = setTimeout(later, wait);
  79. };
  80. };
  81. $.extend($.fn.bootstrapTable.defaults, {
  82. mobileResponsive: false,
  83. minWidth: 562,
  84. minHeight: undefined,
  85. heightThreshold: 100, // just slightly larger than mobile chrome's auto-hiding toolbar
  86. checkOnInit: true,
  87. columnsHidden: []
  88. });
  89. var BootstrapTable = $.fn.bootstrapTable.Constructor,
  90. _init = BootstrapTable.prototype.init;
  91. BootstrapTable.prototype.init = function () {
  92. _init.apply(this, Array.prototype.slice.apply(arguments));
  93. if (!this.options.mobileResponsive) {
  94. return;
  95. }
  96. if (!this.options.minWidth) {
  97. return;
  98. }
  99. if (this.options.minWidth < 100 && this.options.resizable) {
  100. console.log("The minWidth when the resizable extension is active should be greater or equal than 100");
  101. this.options.minWidth = 100;
  102. }
  103. var that = this,
  104. old = {
  105. width: $(window).width(),
  106. height: $(window).height()
  107. };
  108. $(window).on('resize orientationchange', debounce(function (evt) {
  109. // reset view if height has only changed by at least the threshold.
  110. var height = $(this).height(),
  111. width = $(this).width();
  112. if (Math.abs(old.height - height) > that.options.heightThreshold || old.width != width) {
  113. changeView(that, width, height);
  114. old = {
  115. width: width,
  116. height: height
  117. };
  118. }
  119. }, 200));
  120. if (this.options.checkOnInit) {
  121. var height = $(window).height(),
  122. width = $(window).width();
  123. changeView(this, width, height);
  124. old = {
  125. width: width,
  126. height: height
  127. };
  128. }
  129. };
  130. }(jQuery);
  131. });