暫無描述
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.semanticui.js 4.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. /*! Semantic UI integration for DataTables' Editor
  2. * ©2018 SpryMedia Ltd - datatables.net/license
  3. */
  4. (function( factory ){
  5. if ( typeof define === 'function' && define.amd ) {
  6. // AMD
  7. define( ['jquery', 'datatables.net-se', '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-se')(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 Semantic UI modal
  35. */
  36. DataTable.Editor.defaults.display = "semanticui";
  37. /*
  38. * Change the default classes from Editor to be classes for Bootstrap
  39. */
  40. $.extend( true, $.fn.dataTable.Editor.classes, {
  41. "header": {
  42. "wrapper": "DTE_Header header"
  43. },
  44. "body": {
  45. "wrapper": "DTE_Body content"
  46. },
  47. "footer": {
  48. "wrapper": "DTE_Footer actions"
  49. },
  50. "form": {
  51. "tag": "ui form",
  52. "button": "ui button",
  53. "buttonInternal": "ui button",
  54. "content": 'DTE_Form_Content'
  55. },
  56. "field": {
  57. "wrapper": "DTE_Field inline fields",
  58. "label": "right aligned five wide field",
  59. "input": "eight wide field DTE_Field_Input",
  60. "error": "error has-error",
  61. "msg-labelInfo": "ui small",
  62. "msg-info": "ui small",
  63. "msg-message": "ui message small",
  64. "msg-error": "ui error message small",
  65. "multiValue": "ui message multi-value",
  66. "multiInfo": "small",
  67. "multiRestore": "ui message multi-restore"
  68. },
  69. inline: {
  70. wrapper: "DTE DTE_Inline ui form"
  71. },
  72. bubble: {
  73. table: "DTE_Bubble_Table ui form",
  74. bg: "ui dimmer modals page transition visible active"
  75. }
  76. } );
  77. $.extend( true, DataTable.ext.buttons, {
  78. create: {
  79. formButtons: {
  80. className: 'primary'
  81. }
  82. },
  83. edit: {
  84. formButtons: {
  85. className: 'primary'
  86. }
  87. },
  88. remove: {
  89. formButtons: {
  90. className: 'negative'
  91. }
  92. }
  93. } );
  94. /*
  95. * Bootstrap display controller - this is effectively a proxy to the Bootstrap
  96. * modal control.
  97. */
  98. var self;
  99. DataTable.Editor.display.semanticui = $.extend( true, {}, DataTable.Editor.models.displayController, {
  100. /*
  101. * API methods
  102. */
  103. "init": function ( dte ) {
  104. // init can be called multiple times (one for each Editor instance), but
  105. // we only support a single construct here (shared between all Editor
  106. // instances)
  107. if ( ! self._dom.modal ) {
  108. self._dom.modal = $('<div class="ui modal DTED"></div>');
  109. self._dom.close = $('<i class="close icon"/>')
  110. .click( function (e) {
  111. self._dte.close('icon');
  112. return false;
  113. } );
  114. $(document).on('click', 'div.ui.dimmer.modals', function (e) {
  115. if ( $(e.target).hasClass('modal') && self._shown ) {
  116. self._dte.background();
  117. }
  118. } );
  119. }
  120. return self;
  121. },
  122. "open": function ( dte, append, callback ) {
  123. if ( self._shown ) {
  124. if ( callback ) {
  125. callback();
  126. }
  127. return;
  128. }
  129. self._dte = dte;
  130. self._shown = true;
  131. var modal = self._dom.modal;
  132. var appendChildren = $(append).children();
  133. // Clean up any existing elements and then insert the elements to
  134. // display. In Semantic UI we need to have the header, content and
  135. // actions at the top level of the modal rather than as children of a
  136. // wrapper.
  137. modal
  138. .children()
  139. .detach();
  140. modal
  141. .append( appendChildren )
  142. .prepend( modal.children('.header') ) // order is important
  143. .addClass( append.className )
  144. .prepend( self._dom.close );
  145. $(self._dom.modal)
  146. .modal( 'setting', {
  147. autofocus: false,
  148. dimmerSettings: {
  149. closable: false
  150. },
  151. onVisible: function () {
  152. // Can only give elements focus when shown
  153. if ( self._dte.s.setFocus ) {
  154. self._dte.s.setFocus.focus();
  155. }
  156. if ( callback ) {
  157. callback();
  158. }
  159. },
  160. onHidden: function () {
  161. $(append).append( appendChildren );
  162. self._shown = false;
  163. }
  164. } )
  165. .modal( 'show' );
  166. },
  167. "close": function ( dte, callback ) {
  168. var modal = self._dom.modal;
  169. if ( !self._shown ) {
  170. if ( callback ) {
  171. callback();
  172. }
  173. return;
  174. }
  175. modal.modal('hide');
  176. self._dte = dte;
  177. self._shown = false;
  178. if ( callback ) {
  179. callback();
  180. }
  181. },
  182. node: function ( dte ) {
  183. return self._dom.modal[0];
  184. },
  185. /*
  186. * Private properties
  187. */
  188. "_shown": false,
  189. "_dte": null,
  190. "_dom": {}
  191. } );
  192. self = DataTable.Editor.display.semanticui;
  193. return DataTable.Editor;
  194. }));