From b700ad8e090a0dd1af7f7eb9d75444e0daffa564 Mon Sep 17 00:00:00 2001 From: Jelmer Veen Date: Tue, 30 Jul 2024 11:35:45 +0200 Subject: [PATCH] feat(tree-nav): comment style can now be selected and is off by default --- flightkit/components/table.js | 6 +++--- flightkit/components/tree-navigation.js | 16 +++++++--------- flightkit/index.html | 7 ++++--- 3 files changed, 14 insertions(+), 15 deletions(-) diff --git a/flightkit/components/table.js b/flightkit/components/table.js index b3d059f..c3faf92 100644 --- a/flightkit/components/table.js +++ b/flightkit/components/table.js @@ -7,15 +7,15 @@ export class FlightkitTable extends HTMLElement { base; /** to render */ component = null; + properties = new Set(); + uniqueEntriesByProperties = {}; + propertyLabelDictionary = {}; _contents = []; _orderBy = []; - properties = new Set(); _columnOrder = []; _filter = ''; _selectionProperty = ''; /** must be an unique property on the element to select on. */ _selectedIds = new Set(); /** used to sync selections */ - uniqueEntriesByProperties = {}; - propertyLabelDictionary = {}; _templates = {}; /** html templates to use for columns and caption/tfoot */ _templateClasses = {}; diff --git a/flightkit/components/tree-navigation.js b/flightkit/components/tree-navigation.js index e1946ef..410cb0e 100644 --- a/flightkit/components/tree-navigation.js +++ b/flightkit/components/tree-navigation.js @@ -7,6 +7,7 @@ export class FlightkitTreeNavigation extends HTMLElement { contents; component; listType = 'ul'; + commentType = '' // currently just by adding this, it will change the iconset to database. iconSet; filter = { value: '', caseSensitive: false }; @@ -44,8 +45,8 @@ export class FlightkitTreeNavigation extends HTMLElement { this.base = new BaseComponent(); /** Check if there is contents already there. */ this.setContents(this.getAttribute('contents')); - - this.iconSet = this.getAttribute('icon-set') ? this.getAttribute('icon-type') : 'file'; + this.commentType = this.getAttribute('comment') ?? ''; + this.iconSet = this.getAttribute('icon-set') ?? 'file'; this.maxDepth = this.getAttribute('max-depth') ? parseInt(this.getAttribute('max-depth')) : -1; this.setFilter(this.getAttribute('filter')); @@ -266,18 +267,15 @@ export class FlightkitTreeNavigation extends HTMLElement { createLeafText(text) { - let hasComment = typeof text === 'string' ? text.includes('(') || text.includes('[') : false; + let hasComment = typeof text === 'string' && this.commentType.length ? text.includes(this.commentType[0]) : false; let titleText = ''; let commentText = '' if (hasComment) { - let roundBracketIndex = text.indexOf('('); - let squareBracketIndex = text.indexOf('['); - let indexToCut = squareBracketIndex === -1 ? roundBracketIndex : squareBracketIndex; - - titleText = this.convertJsonKeyToTitle(text.substring(0, indexToCut)); - commentText = text.substring(indexToCut); + let commentBracketIndex = text.indexOf(this.commentType[0]); + titleText = this.convertJsonKeyToTitle(text.substring(0, commentBracketIndex)); + commentText = text.substring(commentBracketIndex + 1, text.length - 1).trim(); } else { titleText = this.convertJsonKeyToTitle(text); diff --git a/flightkit/index.html b/flightkit/index.html index 98cb6f2..84c1d8e 100644 --- a/flightkit/index.html +++ b/flightkit/index.html @@ -16,13 +16,14 @@ code { width: fit-content; } +
- - + +
@@ -30,7 +31,7 @@ - +