Commit 69a884f1 authored by Zéfling's avatar Zéfling 🎨
Browse files

Add a dynamic demo

parent ac06bbaf
<h1>json2html-lib</h1>
<div>
<button type="button"
(click)="updateExample(1)">Example 1</button>
<button type="button"
(click)="updateExample(2)">Example 2</button>
</div>
<main>
<fieldset class="json">
<legend>json</legend>
<textarea (change)="format($event.target.value)">{{data | json}}</textarea>
</fieldset>
<fieldset class="options">
<legend>options</legend>
<div>
<label>
<span>formatting</span>
<select [value]="formatting"
(change)="formatting = $event.target.value; generated()">
<option value="multiline">multiline (defaut): structure sur plusieur lignes avec indentation
possible</option>
<option value="inline">inline: all on one line without space</option>
</select>
</label>
<label *ngIf="formatting === 'multiline'">
<span>indent</span>
<input type="checkbox"
[checked]="indent"
(change)="indent = $event.target.checked; generated()">
</label>
<label *ngIf="indent && formatting === 'multiline'">
<span>spaceType</span>
<select [value]="spaceType"
(change)="spaceType = $event.target.value; generated()">
<option value="space">space (defaut)</option>
<option value="tab">tab</option>
</select>
</label>
<label *ngIf="indent && formatting === 'multiline'">
<span>spaceLength</span>
<input [value]="spaceLength"
type="number"
min="0"
(change)="spaceLength = $event.target.value; generated()">
</label>
<label *ngIf="indent && formatting === 'multiline'">
<span>spaceBase</span>
<input [value]="spaceBase"
type="number"
min="0"
(change)="spaceBase = $event.target.value; generated()">
</label>
<label *ngIf="indent && formatting === 'multiline'">
<span>attrPosition</span>
<select [value]="attrPosition"
(change)="attrPosition = $event.target.value; generated()">
<option value="space">inline: no alignment</option>
<option value="space">space: alignment with higher level</option>
<option value="alignTag">alignTag: alignment with the tag</option>
<option value="alignFirstAttr">alignFirstAttr (default): alignment with the first attribute</option>
</select>
</label>
<label>
<span>type</span>
<select [value]="type"
(change)="type = $event.target.value; generated()">
<option value="html">html (default)</option>
<option value="xml">xml</option>
</select>
</label>
<label>
<span>xmlDefaultTag</span>
<input type="text"
[value]="xmlDefaultTag"
(change)="xmlDefaultTag = $event.target.value; generated()">
</label>
<label>
<span>noContentTags</span>
<input type="text"
[value]="noContentTags"
(change)="noContentTags = $event.target.value; generated()">
</label>
</div>
</fieldset>
<fieldset class="rendu">
<legend>Rendu</legend>
<textarea>{{html}}</textarea>
</fieldset>
</main>
<footer>
<a href="https://git.ikilote.net/angular/json2html">Source code</a>
</footer>
\ No newline at end of file
::ng-deep {
:root {
}
body {
font-family: sans;
}
* {
box-sizing: border-box;
}
}
main {
display: grid;
grid-template: "a b c" / 2fr 2fr 2fr;
}
form {
flex: 3;
}
aside {
flex: 2;
padding: 0 15px
}
textarea {
width: 100%;
min-height: 350px;
}
input:not([type="checkbox"]):not([type="radio"]),
select {
width: 100%;
}
label {
display: block;
& > span {
display: block;
font-weight: 700;
}
}
\ No newline at end of file
import { Component } from '@angular/core';
import { Json2html } from 'projects/json2html/src/public_api';
import { Json2html, Json2htmlRef, Json2htmlOptions } from 'projects/json2html/src/public_api';
import { examples } from './app.json';
@Component({
selector: 'app-root',
......@@ -9,60 +11,69 @@ import { Json2html } from 'projects/json2html/src/public_api';
})
export class AppComponent {
// options
spaceType: 'space' | 'tab' = 'space';
spaceLength = 4;
spaceBase = 0;
// maxLenght= 0;
attrPosition: 'inline' | 'space' | 'alignTag' | 'alignFirstAttr' = 'alignFirstAttr';
type: 'html' | 'xml' = 'html';
formatting: 'inline' | 'multiline' = 'multiline';
indent = true;
xmlDefaultTag = 'span';
noContentTags = [
'area',
'base',
'br',
'col',
'command',
'embed',
'hr',
'img',
'input',
'keygen',
'link',
'meta',
'param',
'source',
'track',
'wbr'
].toString();
data: Json2htmlRef | Json2htmlRef[];
html: string;
constructor() {
this.updateExample(1);
}
console.log(new Json2html({
tag: 'div',
attrs: { id: 'test1', class: 'testclasse' },
body: [
'test',
{
tag: 'div',
attrs: { id: 'test2', class: 'foobar' },
body: 'test'
}
]
}, { formatting: 'multiline' }).toString());
updateExample(number: number) {
this.data = examples[number];
this.generated();
}
format(json: string) {
try {
this.data = JSON.parse(json);
} catch (error) {
console.error(error);
}
}
console.log(new Json2html([{
tag: 'div',
attrs: { id: 'test', class: 'testclasse', test: null },
body: [
'test',
{
tag: 'div',
attrs: { id: 'test-div', class: 'foo' },
body: [
'test2',
{
tag: 'div',
attrs: { id: 'test-subdiv', class: 'foobar' },
body: 'test3'
}
]
},
{
tag: 'hr'
},
{
tag: 'span',
attrs: { id: 'test-span', class: 'bar' },
body: [
'test2'
]
}
]
},
{
tag: 'span',
attrs: { id: 'attr-2', class: 'bar' },
body: [
'test2'
]
}], {
spaceBase: 5,
type: 'xml'
}).toString());
generated() {
const options: Json2htmlOptions = {
spaceType: this.spaceType,
spaceLength: this.spaceLength,
spaceBase: this.spaceBase,
attrPosition: this.attrPosition,
type: this.type,
formatting: this.formatting,
indent: this.indent,
xmlDefaultTag: this.xmlDefaultTag,
noContentTags: this.noContentTags.split(',')
};
console.log(options);
this.html = new Json2html(this.data, options).toString();
}
}
export const examples = [
,
{
tag: 'div',
attrs: { id: 'test1', class: 'testclasse' },
body: [
'test',
{
tag: 'div',
attrs: { id: 'test2', class: 'foobar' },
body: 'test'
}
]
},
[
{
tag: 'div',
attrs: { id: 'test', class: 'testclasse', test: null },
body: [
'test',
{
tag: 'div',
attrs: { id: 'test-div', class: 'foo' },
body: [
'test2',
{
tag: 'div',
attrs: { id: 'test-subdiv', class: 'foobar' },
body: 'test3'
}
]
},
{
tag: 'hr'
},
{
tag: 'span',
attrs: { id: 'test-span', class: 'bar' },
body: [
'test2'
]
}
]
},
{
tag: 'span',
attrs: { id: 'attr-2', class: 'bar' },
body: [
'test2'
]
}
]
];
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment