Skip to content

fix options #901

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
BigBlueHat wants to merge 7 commits into
base: main
Choose a base branch
from
Open

fix options #901

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3ea6604
Fix base URL; simplify UX.
BigBlueHat Dec 16, 2025
1a174ba
Improve Safe Mode error display.
BigBlueHat Dec 16, 2025
e97f3be
Update tabs on any change.
BigBlueHat Dec 17, 2025
b21879e
Simplify safemode option; fix boolean states.
BigBlueHat Dec 17, 2025
3925b19
Fix parse error message/details output.
BigBlueHat Dec 17, 2025
b993836
Trigger output refresh on option changes.
BigBlueHat Dec 17, 2025
a091164
Simplify Processing Mode selection UX.
BigBlueHat Dec 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions playground/next/editor.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ function editorListener(docName) {
const parsed = JSON.parse(latestChange);
this[docName] = parsed;
this.parseError = '';
this.setOutputTab(this.outputTab);
} catch (err) {
this.parseError = err.message;
};
Expand Down Expand Up @@ -329,13 +330,12 @@ window.app = createApp({
inputTab: 'json-ld',
outputTab: 'expanded',
options: {
processingMode: '',
processingMode: 'json-ld-1.1',
base: '',
baseUrl: '',
compactArrays: true,
compactToRelative: true,
rdfDirection: '',
safe: ''
safe: false
},
tabs: {
expanded: {icon: 'expand alternate', label: 'Expanded'},
Expand Down Expand Up @@ -431,7 +431,7 @@ window.app = createApp({
this.setOutputTab(this.outputTab);
},
async setOutputTab(value) {
if (!value || !this.doc) return;
if (!this.doc) return;
if (value) this.outputTab = value;
let context = this.contextDoc;
switch (this.outputTab) {
Expand All @@ -442,7 +442,7 @@ window.app = createApp({
setEditorValue(readOnlyEditor, expanded);
this.parseError = '';
} catch(err) {
this.parseError = err.message;
this.parseError = err;
}
break;
case 'compacted':
Expand Down
59 changes: 18 additions & 41 deletions playground/next/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,48 +143,27 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
<form class="ui form">
<div class="inline fields" id="options-api-processingMode">
<label for="options-api-processingMode" class="two wide field">Processing Mode</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="options-api-processingMode-default" name="processingMode" value="" checked
v-model="options.processingMode">
<label for="options-api-processingMode-default">Default</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="options-api-processingMode-1-0" name="processingMode" value="json-ld-1.0"
v-model="options.processingMode">
v-model="options.processingMode" @change="setOutputTab()">
<label for="options-api-processingMode-1-0">JSON-LD 1.0</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="options-api-processingMode-1-1" name="processingMode" value="json-ld-1.1"
v-model="options.processingMode">
v-model="options.processingMode" @change="setOutputTab()">
<label for="options-api-processingMode-1-1">JSON-LD 1.1</label>
</div>
</div>
</div>

<div class="inline fields" id="options-api-base">
<label for="options-api-base" class="two wide field">Base</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="options-api-base-default" name="base" value="" checked
v-model="options.base">
<label for="options-api-base-default">Default</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="options-api-base-custom" name="base" value="custom"
v-model="options.base">
<label for="options-api-base-custom">Custom URL</label>
</div>
</div>
<div class="eleven wide field">
<div class="sixteen wide field">
<input type="text" id="options-api-base-url" placeholder="URL"
v-model="options.baseUrl">
v-model="options.base" @change="setOutputTab()">
</div>
</div>

Expand All @@ -193,7 +172,7 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="options-api-compactArrays"
v-model="options.compactArrays">
v-model="options.compactArrays" @change="setOutputTab()">
<label for="options-api-compactArrays">Compact Arrays</label>
</div>
</div>
Expand All @@ -204,7 +183,7 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="options-api-compactToRelative"
v-model="options.compactToRelative">
v-model="options.compactToRelative" @change="setOutputTab()">
<label for="options-api-compactToRelative">Compact To Relative</label>
</div>
</div>
Expand All @@ -216,14 +195,14 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="options-api-rdfDirection-default" name="rdfDirection" value="" checked
v-model="options.rdfDirection">
v-model="options.rdfDirection" @change="setOutputTab()">
<label for="options-api-rdfDirection-default">Default (null)</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="options-api-rdfDirection-i18n-datatype" name="rdfDirection" value="i18n-datatype"
v-model="options.rdfDirection">
v-model="options.rdfDirection" @change="setOutputTab()">
<label for="options-api-rdfDirection-i18n-datatype">"i18n-datatype"</label>
</div>
</div>
Expand All @@ -235,22 +214,15 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
<label for="options-api-safe" class="two wide field">Safe</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="options-api-safe-default" name="safe" value="" checked
v-model="options.safe">
<label for="options-api-safe-default">Default (False)</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="options-api-safe-false" name="safe" value="false"
v-model="options.safe">
<input type="radio" id="options-api-safe-false" name="safe" :value="false"
v-model="options.safe" @change="setOutputTab()">
<label for="options-api-safe-false">False</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" id="options-api-safe-true" name="safe" value="true"
v-model="options.safe">
<input type="radio" id="options-api-safe-true" name="safe" :value="true"
v-model="options.safe" @change="setOutputTab()">
<label for="options-api-safe-true">True</label>
</div>
</div>
Expand Down Expand Up @@ -291,7 +263,12 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
</div>
</div>
<!-- errors -->
<div class="ui error message" v-show="parseError" v-text="parseError"></div>
<div class="ui error message" v-show="parseError.message">
<div class="header" v-text="parseError.message"></div>
<div class="content">
<pre v-text="JSON.stringify(parseError?.details?.event, null, 2)"></pre>
</div>
</div>
<!-- outputs and renderings -->
<div class="ui top attached tabular menu">
<div v-for="(tab, key) in tabs" :class="{ active: outputTab == key, disabled: doc === '' }" class="item" @click="setOutputTab(key)"><i class="icon" :class="tab.icon"></i> <span v-text="tab.label"></span></div>
Expand Down