Няма описание
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

editor.bootstrap4.js 5.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  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-bs4', '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-bs4')(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 = '<h5 class="modal-title">'+i18nDefaults.create.title+'</h5>';
  42. i18nDefaults.edit.title = '<h5 class="modal-title">'+i18nDefaults.edit.title+'</h5>';
  43. i18nDefaults.remove.title = '<h5 class="modal-title">'+i18nDefaults.remove.title+'</h5>';
  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",
  66. "buttonInternal": "btn btn-outline-secondary"
  67. },
  68. "field": {
  69. "wrapper": "DTE_Field form-group row",
  70. "label": "col-lg-4 col-form-label",
  71. "input": "col-lg-8",
  72. "error": "error is-invalid",
  73. "msg-labelInfo": "form-text text-secondary small",
  74. "msg-info": "form-text text-secondary small",
  75. "msg-message": "form-text text-secondary small",
  76. "msg-error": "form-text text-danger small",
  77. "multiValue": "card multi-value",
  78. "multiInfo": "small",
  79. "multiRestore": "card multi-restore"
  80. }
  81. } );
  82. $.extend( true, DataTable.ext.buttons, {
  83. create: {
  84. formButtons: {
  85. className: 'btn-primary'
  86. }
  87. },
  88. edit: {
  89. formButtons: {
  90. className: 'btn-primary'
  91. }
  92. },
  93. remove: {
  94. formButtons: {
  95. className: 'btn-danger'
  96. }
  97. }
  98. } );
  99. /*
  100. * Bootstrap display controller - this is effectively a proxy to the Bootstrap
  101. * modal control.
  102. */
  103. DataTable.Editor.display.bootstrap = $.extend( true, {}, DataTable.Editor.models.displayController, {
  104. /*
  105. * API methods
  106. */
  107. "init": function ( dte ) {
  108. var conf = {
  109. // Note that `modal-dialog-scrollable` is BS4.3+ only. It has no effect on 4.0-4.2
  110. content: $(
  111. '<div class="modal fade DTED">'+
  112. '<div class="modal-dialog modal-dialog-scrollable" />'+
  113. '</div>'
  114. ),
  115. close: $('<button class="close">&times;</div>')
  116. .on('click', function () {
  117. dte.close('icon');
  118. }),
  119. shown: false,
  120. fullyShow: false
  121. }
  122. // This is a bit horrible, but if you mousedown and then drag out of the modal container, we don't
  123. // want to trigger a background action.
  124. var allowBackgroundClick = false;
  125. $(document).on('mousedown', 'div.modal', function (e) {
  126. allowBackgroundClick = $(e.target).hasClass('modal') && conf.shown
  127. ? true
  128. : false;
  129. } );
  130. $(document).on('click', 'div.modal', function (e) {
  131. if ( $(e.target).hasClass('modal') && allowBackgroundClick ) {
  132. dte.background();
  133. }
  134. } );
  135. // Add `form-control` to required elements
  136. dte.on( 'displayOrder.dtebs', function ( e, display, action, form ) {
  137. $.each( dte.s.fields, function ( key, field ) {
  138. $('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node() )
  139. .addClass( 'form-control' );
  140. } );
  141. } );
  142. dte._bootstrapDisplay = conf;
  143. return DataTable.Editor.display.bootstrap;
  144. },
  145. "open": function ( dte, append, callback ) {
  146. var conf = dte._bootstrapDisplay;
  147. $(append).addClass('modal-content');
  148. if ( conf._shown ) {
  149. // Modal already up, so just draw in the new content
  150. var content = conf.content.find('div.modal-dialog');
  151. content.children().detach();
  152. content.append( append );
  153. if ( callback ) {
  154. callback();
  155. }
  156. return;
  157. }
  158. conf.shown = true;
  159. conf.fullyDisplayed = false;
  160. var content = conf.content.find('div.modal-dialog');
  161. content.children().detach();
  162. content.append( append );
  163. $('div.modal-header', append).append( conf.close );
  164. $(conf.content)
  165. .one('shown.bs.modal', function () {
  166. // Can only give elements focus when shown
  167. if ( dte.s.setFocus ) {
  168. dte.s.setFocus.focus();
  169. }
  170. conf.fullyDisplayed = true;
  171. if ( callback ) {
  172. callback();
  173. }
  174. })
  175. .one('hidden', function () {
  176. conf.shown = false;
  177. })
  178. .appendTo( 'body' )
  179. .modal( {
  180. backdrop: "static",
  181. keyboard: false
  182. } );
  183. },
  184. "close": function ( dte, callback ) {
  185. var conf = dte._bootstrapDisplay;
  186. if ( !conf.shown ) {
  187. if ( callback ) {
  188. callback();
  189. }
  190. return;
  191. }
  192. // Check if actually displayed or not before hiding. BS4 doesn't like `hide`
  193. // before it has been fully displayed
  194. if ( ! conf.fullyDisplayed ) {
  195. $(conf.content)
  196. .one('shown.bs.modal', function () {
  197. conf.close( dte, callback );
  198. } );
  199. return;
  200. }
  201. $(conf.content)
  202. .one( 'hidden.bs.modal', function () {
  203. $(this).detach();
  204. } )
  205. .modal('hide');
  206. conf.shown = false;
  207. conf.fullyDisplayed = false;
  208. if ( callback ) {
  209. callback();
  210. }
  211. },
  212. node: function ( dte ) {
  213. return dte._bootstrapDisplay.content[0];
  214. }
  215. } );
  216. return DataTable.Editor;
  217. }));