API Docs for: 3.10.3
Show:

File: datatable/js/message.js

  1. /**
  2. Adds support for a message container to appear in the table. This can be used
  3. to indicate loading progress, lack of records, or any other communication
  4. needed.
  5.  
  6. @module datatable
  7. @submodule datatable-message
  8. @since 3.5.0
  9. **/
  10. var Message;
  11.  
  12. /**
  13. _API docs for this extension are included in the DataTable class._
  14.  
  15. Adds support for a message container to appear in the table. This can be used
  16. to indicate loading progress, lack of records, or any other communication
  17. needed.
  18.  
  19. Features added to `Y.DataTable`, and made available for custom classes at
  20. `Y.DataTable.Message`.
  21.  
  22. @class DataTable.Message
  23. @for DataTable
  24. @since 3.5.0
  25. **/
  26. Y.namespace('DataTable').Message = Message = function () {};
  27.  
  28. Message.ATTRS = {
  29. /**
  30. Enables the display of messages in the table. Setting this to false will
  31. prevent the message Node from being created and `showMessage` from doing
  32. anything.
  33.  
  34. @attribute showMessages
  35. @type {Boolean}
  36. @default true
  37. @since 3.5.0
  38. **/
  39. showMessages: {
  40. value: true,
  41. validator: Y.Lang.isBoolean
  42. }
  43. };
  44.  
  45. Y.mix(Message.prototype, {
  46. /**
  47. Template used to generate the node that will be used to report messages.
  48.  
  49. @property MESSAGE_TEMPLATE
  50. @type {HTML}
  51. @default <tbody class="{className}"><td class="{contentClass}" colspan="{colspan}"></td></tbody>
  52. @since 3.5.0
  53. **/
  54. MESSAGE_TEMPLATE: '<tbody class="{className}"><tr><td class="{contentClass}" colspan="{colspan}"></td></tr></tbody>',
  55.  
  56. /**
  57. Hides the message node.
  58.  
  59. @method hideMessage
  60. @return {DataTable}
  61. @chainable
  62. @since 3.5.0
  63. **/
  64. hideMessage: function () {
  65. this.get('boundingBox').removeClass(
  66. this.getClassName('message', 'visible'));
  67.  
  68. return this;
  69. },
  70.  
  71. /**
  72. Display the message node and set its content to `message`. If there is a
  73. localized `strings` entry for the value of `message`, that string will be
  74. used.
  75.  
  76. @method showMessage
  77. @param {String} message The message name or message itself to display
  78. @return {DataTable}
  79. @chainable
  80. @since 3.5.0
  81. **/
  82. showMessage: function (message) {
  83. var content = this.getString(message) || message;
  84.  
  85. if (!this._messageNode) {
  86. this._initMessageNode();
  87. }
  88.  
  89. if (this.get('showMessages')) {
  90. if (content) {
  91. this._messageNode.one(
  92. '.' + this.getClassName('message', 'content'))
  93. .setHTML(content);
  94.  
  95. this.get('boundingBox').addClass(
  96. this.getClassName('message','visible'));
  97. } else {
  98. // TODO: is this right?
  99. // If no message provided, remove the message node.
  100. this.hideMessage();
  101. }
  102. }
  103.  
  104. return this;
  105. },
  106.  
  107. //--------------------------------------------------------------------------
  108. // Protected methods
  109. //--------------------------------------------------------------------------
  110. /**
  111. Updates the colspan of the `<td>` used to display the messages.
  112.  
  113. @method _afterMessageColumnsChange
  114. @param {EventFacade} e The columnsChange event
  115. @protected
  116. @since 3.5.0
  117. **/
  118. _afterMessageColumnsChange: function () {
  119. var contentNode;
  120.  
  121. if (this._messageNode) {
  122. contentNode = this._messageNode.one(
  123. '.' + this.getClassName('message', 'content'));
  124.  
  125. if (contentNode) {
  126. // FIXME: This needs to become a class extension plus a view or
  127. // plugin for the table view.
  128. contentNode.set('colSpan', this._displayColumns.length);
  129. }
  130. }
  131. },
  132.  
  133. /**
  134. Relays to `_uiSetMessage` to hide or show the message node.
  135.  
  136. @method _afterMessageDataChange
  137. @param {EventFacade} e The dataChange event
  138. @protected
  139. @since 3.5.0
  140. **/
  141. _afterMessageDataChange: function () {
  142. this._uiSetMessage();
  143. },
  144.  
  145. /**
  146. Removes the message node if `showMessages` is `false`, or relays to
  147. `_uiSetMessage` if `true`.
  148.  
  149. @method _afterShowMessagesChange
  150. @param {EventFacade} e The showMessagesChange event
  151. @protected
  152. @since 3.5.0
  153. **/
  154. _afterShowMessagesChange: function (e) {
  155. if (e.newVal) {
  156. this._uiSetMessage(e);
  157. } else if (this._messageNode) {
  158. this.get('boundingBox').removeClass(
  159. this.getClassName('message', 'visible'));
  160.  
  161. this._messageNode.remove().destroy(true);
  162. this._messageNode = null;
  163. }
  164. },
  165.  
  166. /**
  167. Binds the events necessary to keep the message node in sync with the current
  168. table and configuration state.
  169.  
  170. @method _bindMessageUI
  171. @protected
  172. @since 3.5.0
  173. **/
  174. _bindMessageUI: function () {
  175. this.after(['dataChange', '*:add', '*:remove', '*:reset'],
  176. Y.bind('_afterMessageDataChange', this));
  177.  
  178. this.after('columnsChange', Y.bind('_afterMessageColumnsChange', this));
  179.  
  180. this.after('showMessagesChange',
  181. Y.bind('_afterShowMessagesChange', this));
  182. },
  183.  
  184. /**
  185. Merges in the message related strings and hooks into the rendering cycle to
  186. also render and bind the message node.
  187.  
  188. @method initializer
  189. @protected
  190. @since 3.5.0
  191. **/
  192. initializer: function () {
  193. this._initMessageStrings();
  194.  
  195. if (this.get('showMessages')) {
  196. this.after('table:renderBody', Y.bind('_initMessageNode', this));
  197. }
  198.  
  199. this.after(Y.bind('_bindMessageUI', this), this, 'bindUI');
  200. this.after(Y.bind('_syncMessageUI', this), this, 'syncUI');
  201. },
  202.  
  203. /**
  204. Creates the `_messageNode` property from the configured `MESSAGE_TEMPLATE`
  205. and inserts it before the `<table>`'s `<tbody>` node.
  206.  
  207. @method _initMessageNode
  208. @protected
  209. @since 3.5.0
  210. **/
  211. _initMessageNode: function () {
  212. if (!this._messageNode) {
  213. this._messageNode = Y.Node.create(
  214. Y.Lang.sub(this.MESSAGE_TEMPLATE, {
  215. className: this.getClassName('message'),
  216. contentClass: this.getClassName('message', 'content'),
  217. colspan: this._displayColumns.length || 1
  218. }));
  219.  
  220. this._tableNode.insertBefore(this._messageNode, this._tbodyNode);
  221. }
  222. },
  223.  
  224. /**
  225. Add the messaging related strings to the `strings` map.
  226.  
  227. @method _initMessageStrings
  228. @protected
  229. @since 3.5.0
  230. **/
  231. _initMessageStrings: function () {
  232. // Not a valueFn because other class extensions will want to add to it
  233. this.set('strings', Y.mix((this.get('strings') || {}),
  234. Y.Intl.get('datatable-message')));
  235. },
  236.  
  237. /**
  238. Node used to display messages from `showMessage`.
  239.  
  240. @property _messageNode
  241. @type {Node}
  242. @value `undefined` (not initially set)
  243. @since 3.5.0
  244. **/
  245. //_messageNode: null,
  246.  
  247. /**
  248. Synchronizes the message UI with the table state.
  249.  
  250. @method _syncMessageUI
  251. @protected
  252. @since 3.5.0
  253. **/
  254. _syncMessageUI: function () {
  255. this._uiSetMessage();
  256. },
  257.  
  258. /**
  259. Calls `hideMessage` or `showMessage` as appropriate based on the presence of
  260. records in the `data` ModelList.
  261.  
  262. This is called when `data` is reset or records are added or removed. Also,
  263. if the `showMessages` attribute is updated. In either case, if the
  264. triggering event has a `message` property on the EventFacade, it will be
  265. passed to `showMessage` (if appropriate). If no such property is on the
  266. facade, the `emptyMessage` will be used (see the strings).
  267.  
  268. @method _uiSetMessage
  269. @param {EventFacade} e The columnsChange event
  270. @protected
  271. @since 3.5.0
  272. **/
  273. _uiSetMessage: function (e) {
  274. if (!this.data.size()) {
  275. this.showMessage((e && e.message) || 'emptyMessage');
  276. } else {
  277. this.hideMessage();
  278. }
  279. }
  280. });
  281.  
  282.  
  283. if (Y.Lang.isFunction(Y.DataTable)) {
  284. Y.Base.mix(Y.DataTable, [ Message ]);
  285. }
  286.