Skip to content

Commit b9a95a3

Browse files
alenaksualenaksu
authored
Merge pull request #52 from alenaksu/feat/improvements
feat: accessibility improvements and bugfixes
2 parents d08971f + 9515f7e commit b9a95a3

20 files changed

+4525
-11760
lines changed

‎README.md‎

Lines changed: 48 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ A Web Component to visualize JSON data in a tree view
2121
- [Basic Usage](#basic-usage)
2222
- [Load the JSON dynamically](#load-the-json-dynamically)
2323
- [Basic interactions](#basic-interactions)
24+
- [Custom renderer](#custom-renderer)
2425
- [Demo](#demo)
2526

2627
## Installation
@@ -108,15 +109,19 @@ json-viewer {
108109
/* Background, font and indentation */
109110
--background-color: #2a2f3a;
110111
--color: #f8f8f2;
111-
--font-family: monaco, Consolas, 'Lucida Console', monospace;
112+
--font-family: Nimbus Mono PS, Courier New, monospace;
112113
--font-size: 1rem;
114+
--line-height: 1.2rem;
113115
--indent-size: 1.5em;
114116
--indentguide-size: 1px;
115117
--indentguide-style: solid;
116118
--indentguide-color: #333;
117119
--indentguide-color-active: #666;
118120
--indentguide: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color);
119121
--indentguide-active: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color-active);
122+
--outline-color: #e0e4e5;
123+
--outline-width: 1px;
124+
--outline-style: dotted;
120125

121126
/* Types colors */
122127
--string-color: #a3eea0;
@@ -126,10 +131,10 @@ json-viewer {
126131
--property-color: #6fb3d2;
127132

128133
/* Collapsed node preview */
129-
--preview-color: rgba(222, 175, 143, 0.9);
134+
--preview-color: #deae8f;
130135

131136
/* Search highlight color */
132-
--highlight-color: #6fb3d2;
137+
--highlight-color: #c92a2a;
133138
}
134139
```
135140

@@ -172,6 +177,46 @@ const searchIterator = viewer.search('value');
172177
searchIterator.next();
173178
```
174179

180+
### Custom renderer
181+
_This is an experimental feature and it may change in the future_
182+
183+
The rendering of the values can be customized by defining a static method `customRenderer` in the custom element class.
184+
The function receives the value and the path of the node and it should return a HTML node or a Lit's `TemplateResult` object.
185+
186+
```js
187+
import { JsonViewer } from '@alenaksu/json-viewer/JsonViewer.js';
188+
189+
customElements.define(
190+
'json-viewer',
191+
class extends JsonViewer {
192+
static styles = [
193+
JsonViewer.styles,
194+
css`
195+
a {
196+
color: white;
197+
text-decoration: underline;
198+
}
199+
`
200+
];
201+
202+
static customRenderer(value, path) {
203+
if (typeof value === 'string') {
204+
if (URL.canParse(value)) {
205+
return html`<a href="${value}" target="_blank">${value}</a>`;
206+
} else if (Date.parse(value)) {
207+
return new Date(value).toLocaleString();
208+
}
209+
} else if (typeof value === 'number') {
210+
return value.toFixed(2);
211+
}
212+
213+
return super.customRenderer(value);
214+
}
215+
}
216+
);
217+
218+
```
219+
175220
## Demo
176221

177222
The demo can also be run locally with

‎custom-elements-manifest.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
module.exports = {
1+
export default {
22
globs: ['src/**/*.ts'],
33
outdir: 'dist'
44
}

‎docs/index.html‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,13 @@
44
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
55

66
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/codemirror.css" />
7-
8-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/themes/light.css" />
9-
<script type="module" crossorigin src="/json-viewer/assets/index.e94a7a56.js"></script>
10-
<link rel="stylesheet" href="/json-viewer/assets/index.d16606c6.css">
7+
<link
8+
rel="stylesheet"
9+
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
10+
>
11+
<link rel="stylesheet" href="/json-viewer/assets/index.d16606c6.css">
12+
13+
<script type="module" crossorigin src="/json-viewer/assets/index.e94a7a56.js"></script>
1114
</head>
1215

1316
<body>
@@ -75,10 +78,10 @@ <h1>@alenaksu/json-viewer</h1>
7578
</div>
7679
<div class="panel panel-right">
7780
<div id="actions-toolbar">
78-
<sl-button id="expand">Expand All</sl-button>
79-
<sl-button id="collapse">Collapse All</sl-button>
80-
<sl-input id="filter" placeholder="filter"></sl-input>
81-
<sl-input id="search" placeholder="search"></sl-input>
81+
<button id="expand">Expand All</button>
82+
<button id="collapse">Collapse All</button>
83+
<input id="filter" placeholder="filter"></input>
84+
<input id="search" placeholder="search"></input>
8285
</div>
8386
<json-viewer></json-viewer>
8487
</div>

0 commit comments

Comments
 (0)