NAV-423. Support to enable links in table by column config.

Tradeshift · Oct 26, 2020 · 93d0c8c · 93d0c8c
1 parent 478adff
commit 93d0c8c
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 10 deletions.
diff --git a/docs/src/xhtml/components/table/formatting.xhtml b/docs/src/xhtml/components/table/formatting.xhtml
@@ -82,6 +82,30 @@
 					<code>http(s)://</code> and note that links should not be used for internal navigation, at
 					least not just yet.
 				</p>
+				<p>
+					If you need to support links only in specific column, you can set the
+					<code>linkable</code> property to <code>true</code> in a column's config:
+				</p>
+				<ul class="splitscreen">
+					<li>
+						<figure data-ts="DoxScript">
+							<script type="runnable">
+								ts.ui.get('#table4', table => {
+									table.cols([
+										{label: 'Disabled link column'},
+										{label: 'Not disabled link column', linkable: true}
+									]);
+									table.rows([
+										['Please visit [Tradeshift](http://www.tradeshift.com)', 'Please visit [Tradeshift](http://www.tradeshift.com)']
+									]);
+								});
+							</script>
+						</figure>
+					</li>
+					<li>
+						<div data-ts="Table" id="table4"></div>
+					</li>
+				</ul>
 				<p>
 					If the link should work more like a button, you can intecept the click action with the
 					<code>onlink</code> callback. In this case, you can use any string as the
@@ -92,7 +116,7 @@
 						<figure data-ts="DoxScript">
 							<script type="runnable">
 								var popup = ts.ui.Notification;
-								ts.ui.get('#table4', table => {
+								ts.ui.get('#table5', table => {
 									table.linkable(function onlink(anystring) {
 										popup.success(anystring);
 									}).rows([
@@ -103,7 +127,7 @@
 						</figure>
 					</li>
 					<li>
-						<div data-ts="Table" id="table4"></div>
+						<div data-ts="Table" id="table5"></div>
 					</li>
 				</ul>
 				<p>
@@ -114,7 +138,7 @@
 					<li>
 						<figure data-ts="DoxScript">
 							<script type="runnable">
-								ts.ui.get('#table5', function(table) {
+								ts.ui.get('#table6', function(table) {
 									table.disableMarkdown();
 									table.rows([
 										['*Italic text*'],
@@ -127,7 +151,7 @@
 						</figure>
 					</li>
 					<li>
-						<div data-ts="Table" id="table5"></div>
+						<div data-ts="Table" id="table6"></div>
 					</li>
 				</ul>
 				<p>
@@ -138,9 +162,9 @@
 					<li>
 						<figure data-ts="DoxScript">
 							<script type="runnable">
-								ts.ui.get('#table6', function(table) {
+								ts.ui.get('#table7', function(table) {
 									table.cols([
-										{label: 'Disabled markdown column', markdownFormatting: false},
+										{label: 'Disabled markdown column', markdownFormatting: false, linkable: true},
 										{label: 'Not disabled markdown column'}
 									]);
 									table.rows([
@@ -154,7 +178,7 @@
 						</figure>
 					</li>
 					<li>
-						<div data-ts="Table" id="table6"></div>
+						<div data-ts="Table" id="table7"></div>
 					</li>
 				</ul>
 			</section>

diff --git a/spec/runtime/spirits/[email protected]/ts.ui.TableSpirit.spec.js b/spec/runtime/spirits/[email protected]/ts.ui.TableSpirit.spec.js
@@ -339,6 +339,17 @@ describe('ts.ui.TableSpirit', function likethis() {
 			});
 		});
 
+		it('should support link in column config', function(done) {
+			setup(function(spirit, dom) {
+				spirit.cols([{ linkable: true }]);
+				spirit.rows([['Please visit [Tradeshift](http://www.tradeshift.com)']]);
+				sometime(function later() {
+					expect(spirit.element.innerHTML).toContain('Tradeshift</a>');
+					done();
+				});
+			});
+		});
+
 		it('should support link(old syntax)', function(done) {
 			setup(function(spirit, dom) {
 				spirit.linkable();
@@ -392,6 +403,17 @@ describe('ts.ui.TableSpirit', function likethis() {
 				});
 			});
 		});
+
+		it('should not render link with disabled markdown in column config', function(done) {
+			setup(function(spirit, dom) {
+				spirit.cols([{ markdownFormatting: false, linkable: true }]);
+				spirit.rows([['Please visit [Tradeshift](http://www.tradeshift.com)']]);
+				sometime(function later() {
+					expect(spirit.element.innerHTML).not.toContain('Tradeshift</a>');
+					done();
+				});
+			});
+		});
 	});
 
 	describe('Sort', function() {

diff --git a/src/runtime/edbml/functions/ts.ui.tablerows.edbml b/src/runtime/edbml/functions/ts.ui.tablerows.edbml
@@ -57,6 +57,8 @@
 
 	function renderCell(col, row, cell) {
 		var editable = iseditable(col, row, cell);
+		var markdownDisabled = col && !col.markdownFormatting || !table.markdownFormatting;
+		var markdownWhitelist = col && col.linkable ? whitelist.concat('a') : whitelist;
 		@class = getCellClass(col, row, cell, editable);
 		@id = table.$cellid(row.$index, cell.$index);
 		<td @id @class @note data-index="${cell.$index}">
@@ -69,12 +71,12 @@
 				}
 				if(ts.ui.Model.is(cell)) {
 					out.html += cell.render();
-				} else if(col && !col.markdownFormatting || !table.markdownFormatting) {
+				} else if(markdownDisabled) {
 					<p>
 						out.html += edbml.safetext(cell.text);
 					</p>
 				} else {
-					out.html += Markdown.parse(cell.text, whitelist);
+					out.html += Markdown.parse(cell.text, markdownWhitelist);
 				}
 			</div>
 		</td>

diff --git a/src/runtime/js/ts.ui/tables/[email protected]/models/cols/ts.ui.TableColModel.js b/src/runtime/js/ts.ui/tables/[email protected]/models/cols/ts.ui.TableColModel.js
@@ -172,11 +172,17 @@ ts.ui.TableColModel = (function using(chained) {
 		sort: null,
 
 		/**
-		 * Applies a markdown formatting to the cells in this column or not.
+		 * Apply a markdown formatting to the cells in this column or not.
 		 * @type {boolean}
 		 */
 		markdownFormatting: true,
 
+		/**
+		 * Enable links in the column's cells via Markdown.
+		 * @type {boolean}
+		 */
+		linkable: false,
+
 		/**
 		 * Is (cell content) of type number?
 		 * @returns {boolean}