editor.foundation.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. /*! Foundation 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-zf', '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-zf')(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 foundation control
  35. */
  36. DataTable.Editor.defaults.display = "foundation";
  37. /*
  38. * Change the default classes from Editor to be classes for Foundation
  39. */
  40. $.extend( true, $.fn.dataTable.Editor.classes, {
  41. field: {
  42. wrapper: "DTE_Field row",
  43. label: "small-4 columns inline",
  44. input: "small-8 columns",
  45. error: "error",
  46. multiValue: "panel radius multi-value",
  47. multiInfo: "small",
  48. multiRestore: "panel radius multi-restore",
  49. "msg-labelInfo": "label secondary",
  50. "msg-info": "label secondary",
  51. "msg-message": "label secondary",
  52. "msg-error": "label alert"
  53. },
  54. form: {
  55. button: "button small"
  56. }
  57. } );
  58. /*
  59. * Foundation display controller - this is effectively a proxy to the Foundation
  60. * modal control.
  61. */
  62. var self;
  63. DataTable.Editor.display.foundation = $.extend( true, {}, DataTable.Editor.models.displayController, {
  64. /*
  65. * API methods
  66. */
  67. "init": function ( dte ) {
  68. self._dom.content = $(
  69. '<div class="reveal reveal-modal" data-reveal />'
  70. );
  71. self._dom.close = $('<button class="close close-button">&times;</div>');
  72. self._dom.close.click( function () {
  73. self._dte.close('icon');
  74. } );
  75. return self;
  76. },
  77. "open": function ( dte, append, callback ) {
  78. if ( self._shown ) {
  79. if ( callback ) {
  80. callback();
  81. }
  82. return;
  83. }
  84. self._dte = dte;
  85. self._shown = true;
  86. var content = self._dom.content;
  87. content.children().detach();
  88. content.append( append );
  89. content.prepend( self._dom.close );
  90. $(self._dom.content)
  91. .one('opened.fndtn.reveal', function () {
  92. if ( callback ) {
  93. callback();
  94. }
  95. })
  96. .one('closed.fndtn.reveal', function () {
  97. self._shown = false;
  98. });
  99. if ( window.Foundation && window.Foundation.Reveal ) {
  100. // Foundation 6
  101. if ( ! self._reveal ) {
  102. self._reveal = new window.Foundation.Reveal( self._dom.content, {
  103. closeOnClick: false
  104. } );
  105. }
  106. $(self._dom.content).appendTo('body');
  107. self._reveal.open();
  108. }
  109. else {
  110. // Foundation 5
  111. $(self._dom.content).foundation( 'reveal','open' );
  112. }
  113. $(document).on('click.dte-zf', 'div.reveal-modal-bg, div.reveal-overlay', function () {
  114. self._dte.background();
  115. } );
  116. },
  117. "close": function ( dte, callback ) {
  118. if ( !self._shown ) {
  119. if ( callback ) {
  120. callback();
  121. }
  122. return;
  123. }
  124. if ( self._reveal ) {
  125. self._reveal.close();
  126. }
  127. else {
  128. $(self._dom.content).foundation( 'reveal', 'close' );
  129. }
  130. $(document).off( 'click.dte-zf' );
  131. self._dte = dte;
  132. self._shown = false;
  133. if ( callback ) {
  134. callback();
  135. }
  136. },
  137. node: function ( dte ) {
  138. return self._dom.content[0];
  139. },
  140. /*
  141. * Private properties
  142. */
  143. "_shown": false,
  144. "_dte": null,
  145. "_dom": {}
  146. } );
  147. self = DataTable.Editor.display.foundation;
  148. return DataTable.Editor;
  149. }));