Нема описа
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.bootstrap.js 4.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  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. "buttonInternal": "btn btn-default"
  67. },
  68. "field": {
  69. "wrapper": "DTE_Field",
  70. "label": "col-lg-4 control-label",
  71. "input": "col-lg-8 controls",
  72. "error": "error has-error",
  73. "msg-labelInfo": "help-block",
  74. "msg-info": "help-block",
  75. "msg-message": "help-block",
  76. "msg-error": "help-block",
  77. "multiValue": "well well-sm multi-value",
  78. "multiInfo": "small",
  79. "multiRestore": "well well-sm 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. "init": function ( dte ) {
  105. var content = $(
  106. '<div class="modal fade DTED">'+
  107. '<div class="modal-dialog">'+
  108. '<div class="modal-content"/>'+
  109. '</div>'+
  110. '</div>'
  111. );
  112. var conf = {
  113. content: content,
  114. close: $('<button class="close">&times;</div>')
  115. .on('click', function () {
  116. dte.close('icon');
  117. }),
  118. modalContent: content.find('div.modal-content'),
  119. shown: false
  120. };
  121. $(document).on('mousedown', 'div.modal', function (e) {
  122. if ( $(e.target).hasClass('modal') && conf.shown ) {
  123. dte.background();
  124. }
  125. } );
  126. // Add `form-control` to required elements
  127. dte.on( 'displayOrder.dtebs', function ( e, display, action, form ) {
  128. $.each( dte.s.fields, function ( key, field ) {
  129. $('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node() )
  130. .addClass( 'form-control' );
  131. } );
  132. } );
  133. dte._bootstrapDisplay = conf;
  134. return DataTable.Editor.display.bootstrap;
  135. },
  136. "open": function ( dte, append, callback ) {
  137. var conf = dte._bootstrapDisplay;
  138. if ( conf.shown ) {
  139. if ( callback ) {
  140. callback();
  141. }
  142. return;
  143. }
  144. conf.shown = true;
  145. var content = conf.modalContent;
  146. content.children().detach();
  147. content.append( append );
  148. $('div.modal-header', append).prepend( conf.close );
  149. $(conf.content)
  150. .one('shown.bs.modal', function () {
  151. // Can only give elements focus when shown
  152. if ( dte.s.setFocus ) {
  153. dte.s.setFocus.focus();
  154. }
  155. if ( callback ) {
  156. callback();
  157. }
  158. })
  159. .one('hidden', function () {
  160. conf.shown = false;
  161. })
  162. .appendTo( 'body' )
  163. .modal( {
  164. backdrop: "static",
  165. keyboard: false
  166. } );
  167. },
  168. "close": function ( dte, callback ) {
  169. var conf = dte._bootstrapDisplay;
  170. if ( !conf.shown ) {
  171. if ( callback ) {
  172. callback();
  173. }
  174. return;
  175. }
  176. $(conf.content)
  177. .one( 'hidden.bs.modal', function () {
  178. $(this).detach();
  179. } )
  180. .modal('hide');
  181. conf.shown = false;
  182. if ( callback ) {
  183. callback();
  184. }
  185. },
  186. node: function ( dte ) {
  187. return dte._bootstrapDisplay.content[0];
  188. }
  189. } );
  190. return DataTable.Editor;
  191. }));