editor.bootstrap.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. /*! Bootstrap integration for DataTables' Editor
  2. * ©2015 SpryMedia Ltd - datatables.net/license
  3. */
  4. (function( factory ){
  5. if ( typeof define === 'function' && define.amd ) {
  6. // AMD
  7. define( ['jquery', 'datatables.net-bs', 'datatables.net-editor'], function ( $ ) {
  8. return factory( $, window, document );
  9. } );
  10. }
  11. else if ( typeof exports === 'object' ) {
  12. // CommonJS
  13. module.exports = function (root, $) {
  14. if ( ! root ) {
  15. root = window;
  16. }
  17. if ( ! $ || ! $.fn.dataTable ) {
  18. $ = require('datatables.net-bs')(root, $).$;
  19. }
  20. if ( ! $.fn.dataTable.Editor ) {
  21. require('datatables.net-editor')(root, $);
  22. }
  23. return factory( $, root, root.document );
  24. };
  25. }
  26. else {
  27. // Browser
  28. factory( jQuery, window, document );
  29. }
  30. }(function( $, window, document, undefined ) {
  31. 'use strict';
  32. var DataTable = $.fn.dataTable;
  33. /*
  34. * Set the default display controller to be our bootstrap control
  35. */
  36. DataTable.Editor.defaults.display = "bootstrap";
  37. /*
  38. * Alter the buttons that Editor adds to TableTools so they are suitable for bootstrap
  39. */
  40. var i18nDefaults = DataTable.Editor.defaults.i18n;
  41. i18nDefaults.create.title = "<h3>"+i18nDefaults.create.title+"</h3>";
  42. i18nDefaults.edit.title = "<h3>"+i18nDefaults.edit.title+"</h3>";
  43. i18nDefaults.remove.title = "<h3>"+i18nDefaults.remove.title+"</h3>";
  44. var tt = DataTable.TableTools;
  45. if ( tt ) {
  46. tt.BUTTONS.editor_create.formButtons[0].className = "btn btn-primary";
  47. tt.BUTTONS.editor_edit.formButtons[0].className = "btn btn-primary";
  48. tt.BUTTONS.editor_remove.formButtons[0].className = "btn btn-danger";
  49. }
  50. /*
  51. * Change the default classes from Editor to be classes for Bootstrap
  52. */
  53. $.extend( true, $.fn.dataTable.Editor.classes, {
  54. "header": {
  55. "wrapper": "DTE_Header modal-header"
  56. },
  57. "body": {
  58. "wrapper": "DTE_Body modal-body"
  59. },
  60. "footer": {
  61. "wrapper": "DTE_Footer modal-footer"
  62. },
  63. "form": {
  64. "tag": "form-horizontal",
  65. "button": "btn btn-default"
  66. },
  67. "field": {
  68. "wrapper": "DTE_Field",
  69. "label": "col-lg-4 control-label",
  70. "input": "col-lg-8 controls",
  71. "error": "error has-error",
  72. "msg-labelInfo": "help-block",
  73. "msg-info": "help-block",
  74. "msg-message": "help-block",
  75. "msg-error": "help-block",
  76. "multiValue": "well well-sm multi-value",
  77. "multiInfo": "small",
  78. "multiRestore": "well well-sm multi-restore"
  79. }
  80. } );
  81. /*
  82. * Bootstrap display controller - this is effectively a proxy to the Bootstrap
  83. * modal control.
  84. */
  85. var self;
  86. DataTable.Editor.display.bootstrap = $.extend( true, {}, DataTable.Editor.models.displayController, {
  87. /*
  88. * API methods
  89. */
  90. "init": function ( dte ) {
  91. // init can be called multiple times (one for each Editor instance), but
  92. // we only support a single construct here (shared between all Editor
  93. // instances)
  94. if ( ! self._dom.content ) {
  95. self._dom.content = $(
  96. '<div class="modal fade">'+
  97. '<div class="modal-dialog">'+
  98. '<div class="modal-content"/>'+
  99. '</div>'+
  100. '</div>'
  101. );
  102. self._dom.close = $('<button class="close">&times;</div>');
  103. self._dom.close.click( function () {
  104. self._dte.close('icon');
  105. } );
  106. $(document).on('click', 'div.modal', function (e) {
  107. if ( $(e.target).hasClass('modal') && self._shown ) {
  108. self._dte.background();
  109. }
  110. } );
  111. dte.on( 'open.dtebs', function ( e, type ) {
  112. if ( type === 'inline' || type === 'bubble' ) {
  113. $('div.DTE input[type=text], div.DTE select, div.DTE textarea').addClass( 'form-control' );
  114. }
  115. } );
  116. }
  117. return self;
  118. },
  119. "open": function ( dte, append, callback ) {
  120. if ( self._shown ) {
  121. if ( callback ) {
  122. callback();
  123. }
  124. return;
  125. }
  126. self._dte = dte;
  127. self._shown = true;
  128. var content = self._dom.content.find('div.modal-content');
  129. content.children().detach();
  130. content.append( append );
  131. $('div.modal-header', append).prepend( self._dom.close );
  132. $(self._dom.content)
  133. .one('shown.bs.modal', function () {
  134. // Can only give elements focus when shown
  135. if ( self._dte.s.setFocus ) {
  136. self._dte.s.setFocus.focus();
  137. }
  138. if ( callback ) {
  139. callback();
  140. }
  141. })
  142. .one('hidden', function () {
  143. self._shown = false;
  144. })
  145. .appendTo( 'body' )
  146. .modal( {
  147. backdrop: "static",
  148. keyboard: false
  149. } );
  150. $('input:not([type=checkbox]):not([type=radio]), select, textarea', self._dom.content)
  151. .addClass( 'form-control' );
  152. },
  153. "close": function ( dte, callback ) {
  154. if ( !self._shown ) {
  155. if ( callback ) {
  156. callback();
  157. }
  158. return;
  159. }
  160. $(self._dom.content)
  161. .one( 'hidden.bs.modal', function () {
  162. $(this).detach();
  163. } )
  164. .modal('hide');
  165. self._dte = dte;
  166. self._shown = false;
  167. if ( callback ) {
  168. callback();
  169. }
  170. },
  171. node: function ( dte ) {
  172. return self._dom.content[0];
  173. },
  174. /*
  175. * Private properties
  176. */
  177. "_shown": false,
  178. "_dte": null,
  179. "_dom": {}
  180. } );
  181. self = DataTable.Editor.display.bootstrap;
  182. return DataTable.Editor;
  183. }));