utils.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * Returns a model representation of a table shorthand notation:
  7. *
  8. * modelTable( [
  9. * [ '00' ] // first row
  10. * [ '10' ] // second row
  11. * ] );
  12. *
  13. * will output:
  14. *
  15. * '<table><tableRow><tableCell>00</tableCell></tableRow><tableRow><tableCell>10</tableCell></tableRow></table>'
  16. *
  17. * Each table row passed in `tableData` array is represented as an array of strings or objects. A string defines text contents of a cell.
  18. *
  19. * Passing an object allows to pass additional table cell attributes:
  20. *
  21. * const tableCellData = {
  22. * colspan: 2,
  23. * rowspan: 4,
  24. * contents: 'foo' // text contents of a cell
  25. * };
  26. *
  27. * @param {Array.<String>} tableData
  28. * @param {Object} [attributes] Optional table attributes: `headingRows` and `headingColumns`.
  29. *
  30. * @returns {String}
  31. */
  32. export function modelTable( tableData, attributes ) {
  33. const tableRows = makeRows( tableData, 'tableCell', 'tableRow', 'tableCell' );
  34. return `<table${ formatAttributes( attributes ) }>${ tableRows }</table>`;
  35. }
  36. /**
  37. * Returns a view representation of a table shorthand notation:
  38. *
  39. * viewTable( [
  40. * [ '00', '01' ] // first row
  41. * [ '10', '11' ] // second row
  42. * ] );
  43. *
  44. * will output:
  45. *
  46. * '<table><tbody><tr><td>00</td><td>01<td></tr><tr><td>10</td><td>11<td></tr></tbody></table>'
  47. *
  48. * Each table row passed in `tableData` array is represented as an array of strings or objects. A string defines text contents of a cell.
  49. *
  50. * Passing an object allows to pass additional table cell attributes:
  51. *
  52. * const tableCellData = {
  53. * colspan: 2,
  54. * rowspan: 4,
  55. * isHeading: true, // will render table cell as `<th>` element
  56. * contents: 'foo' // text contents of a cell
  57. * };
  58. *
  59. * @param {Array.<Array.<String|Object>>} tableData The table data array.
  60. * @param {Object} [attributes] Optional table attributes: `headingRows` and `headingColumns` - passing them will properly render rows
  61. * in `<tbody>` or `<thead>` sections.
  62. *
  63. * @returns {String}
  64. */
  65. export function viewTable( tableData, attributes = {} ) {
  66. const headingRows = attributes.headingRows || 0;
  67. const thead = headingRows > 0 ? `<thead>${ makeRows( tableData.slice( 0, headingRows ), 'th', 'tr' ) }</thead>` : '';
  68. const tbody = tableData.length > headingRows ? `<tbody>${ makeRows( tableData.slice( headingRows ), 'td', 'tr' ) }</tbody>` : '';
  69. return `<figure class="table"><table>${ thead }${ tbody }</table></figure>`;
  70. }
  71. /**
  72. * Formats model or view table - useful for chai assertions debuging.
  73. *
  74. * @param {String} tableString
  75. * @returns {String}
  76. */
  77. export function formatTable( tableString ) {
  78. return tableString
  79. .replace( /<tableRow>/g, '\n<tableRow>\n ' )
  80. .replace( /<thead>/g, '\n<thead>\n ' )
  81. .replace( /<tbody>/g, '\n<tbody>\n ' )
  82. .replace( /<tr>/g, '\n<tr>\n ' )
  83. .replace( /<\/tableRow>/g, '\n</tableRow>' )
  84. .replace( /<\/thead>/g, '\n</thead>' )
  85. .replace( /<\/tbody>/g, '\n</tbody>' )
  86. .replace( /<\/tr>/g, '\n</tr>' )
  87. .replace( /<\/table>/g, '\n</table>' )
  88. .replace( /<\/figure>/g, '\n</figure>' );
  89. }
  90. /**
  91. * Returns formatted model table string.
  92. *
  93. * @param {Array.<String>} tableData
  94. * @param {Object} [attributes]
  95. * @returns {String}
  96. */
  97. export function formattedModelTable( tableData, attributes ) {
  98. const tableString = modelTable( tableData, attributes );
  99. return formatTable( tableString );
  100. }
  101. /**
  102. * Returns formatted view table string.
  103. *
  104. * @param {Array.<String>} tableData
  105. * @param {Object} [attributes]
  106. * @returns {String}
  107. */
  108. export function formattedViewTable( tableData, attributes ) {
  109. return formatTable( viewTable( tableData, attributes ) );
  110. }
  111. // Formats table cell attributes
  112. //
  113. // @param {Object} attributes Attributes of a cell.
  114. function formatAttributes( attributes ) {
  115. let attributesString = '';
  116. if ( attributes ) {
  117. const entries = Object.entries( attributes );
  118. if ( entries.length ) {
  119. attributesString = ' ' + entries.map( entry => `${ entry[ 0 ] }="${ entry[ 1 ] }"` ).join( ' ' );
  120. }
  121. }
  122. return attributesString;
  123. }
  124. // Formats passed table data to a set of table rows.
  125. function makeRows( tableData, cellElement, rowElement, headingElement = 'th' ) {
  126. return tableData
  127. .reduce( ( previousRowsString, tableRow ) => {
  128. const tableRowString = tableRow.reduce( ( tableRowString, tableCellData ) => {
  129. let tableCell = tableCellData;
  130. const isObject = typeof tableCellData === 'object';
  131. let resultingCellElement = cellElement;
  132. if ( isObject ) {
  133. tableCell = tableCellData.contents;
  134. if ( tableCellData.isHeading ) {
  135. resultingCellElement = headingElement;
  136. }
  137. delete tableCellData.contents;
  138. delete tableCellData.isHeading;
  139. }
  140. const formattedAttributes = formatAttributes( isObject ? tableCellData : '' );
  141. tableRowString += `<${ resultingCellElement }${ formattedAttributes }>${ tableCell }</${ resultingCellElement }>`;
  142. return tableRowString;
  143. }, '' );
  144. return `${ previousRowsString }<${ rowElement }>${ tableRowString }</${ rowElement }>`;
  145. }, '' );
  146. }