Commit 4dd65aae authored by Zéfling's avatar Zéfling 🎨
Browse files

add more options

parent e033f9de
Pipeline #17 failed with stages
in 0 seconds
......@@ -11,7 +11,7 @@ npm i json2html-lib --save
## Requirements
Only for demo:
- Angular 9.1.0 and more
- Angular 10.0.0 and more
## Demo
......@@ -21,34 +21,14 @@ Only for demo:
### Examples
#### changeLuminosity
```typescript
import {json2html} from 'json2html-lib';
import {Json2html} from 'json2html';
const color = new json2html('red');
const color = new Json2html('red');
color.changeLuminosity(0.55);
console.log(color.toHEX()); // #ff8c8c
```
#### maskColor
```typescript
const color = new json2html('red');
color.maskColor('blue', 0.25);
console.log(color.toHEX()); // #bf0040
```
#### addColor
```typescript
const color = new json2html('red');
color.addColor({
h: -23,
v: 10,
alpha: -0.2
});
console.log(color.toHEX()); // #ff3381cc
```
## Publishing the library
......
......@@ -8,12 +8,14 @@ export interface Json2htmlRef {
}
export interface Json2htmlOptions {
formatting?: 'inline' | 'multiline';
spaceType?: 'space' | 'tab',
spaceLength?: 4,
spaceBase?: 0,
maxLenght?: 0,
attrPosition?: 'inline' | 'space' | 'alignTag' | 'alignFirst',
type?: 'html' | 'xml'
attrPosition?: 'inline' | 'space' | 'alignTag' | 'alignFirstAttr',
type?: 'html' | 'xml',
indent?: boolean
}
export class Json2html {
......@@ -23,8 +25,10 @@ export class Json2html {
spaceLength: 4,
spaceBase: 0,
maxLenght: 0,
attrPosition: 'inline',
type: 'html'
attrPosition: 'alignFirstAttr',
type: 'html',
formatting: 'multiline',
indent: true
}
constructor(
......@@ -39,9 +43,16 @@ export class Json2html {
}
private _generate(lvl: number, json: Json2htmlRef) {
let tag = `<${json.tag}${this._generateAttrs(lvl, json)}>${this._generateHtml(lvl, json)}</${json.tag}>`;
const tagBegin = `<${json.tag}${this._generateAttrs(lvl, json)}>`
let tagcontent = this._generateHtml(lvl, json);
if (tagcontent) {
if (this._hasMultiline()) {
tagcontent = `${tagcontent}\n${this._getSpacing(lvl)}`;
}
}
const tagEnd = `</${json.tag}>`;
return tag;
return `${tagBegin}${tagcontent}${tagEnd}`;
}
private _generateAttrs(lvl: number, json: Json2htmlRef) {
......@@ -49,8 +60,31 @@ export class Json2html {
let attrs = json.attrs;
if (json.attrs && Object.keys(json.attrs).length) {
for (let id in json.attrs) {
if (this.options.attrPosition === 'inline') {
string += ' '
switch (this.options.attrPosition) {
case 'inline':
string += ' ';
break;
case 'space':
if (string && this.options.indent) {
string += `\n${this._getSpacing(lvl + 1)}`;
} else {
string += ' ';
};
break;
case 'alignTag':
if (string && this.options.indent) {
string += `\n${this._getSpacing(lvl, 1)}`;
} else {
string += ' ';
};
break;
case 'alignFirstAttr':
if (string && this.options.indent) {
string += `\n${this._getSpacing(lvl, this.json.tag.length + 2)}`;
} else {
string += ' ';
};
break;
}
string += `${id}${json.attrs[id] !== null || json.attrs[id] !== undefined ? `="${json.attrs[id]}"` : ''}`;
}
......@@ -62,9 +96,15 @@ export class Json2html {
let string = '';
if (json.body) {
if (typeof json.body === 'string') {
if (this._hasMultiline()) {
string = `\n${this._getSpacing(lvl + 1)}`;
}
string += json.body;
} else {
json.body.forEach(element => {
json.body.forEach((element) => {
if (this._hasMultiline()) {
string += `\n${this._getSpacing(lvl + 1)}`;
}
if (typeof element === 'string') {
string += element;
} else {
......@@ -76,4 +116,15 @@ export class Json2html {
return string;
}
private _hasMultiline(): boolean {
return this.options.formatting === 'multiline';
}
private _getSpacing(lvl: number, ajout: number = 0): string {
return this.options.indent
? (this.options.spaceType === 'space' ? ' ' : '\t')
.repeat((lvl + this.options.spaceBase) * this.options.spaceLength + ajout)
: '';
}
}
......@@ -12,8 +12,23 @@ export class AppComponent {
console.log(new Json2html({
tag: 'div',
attrs: { 'id': 'test', 'class': 'testclasse' },
attrs: { id: 'test', class: 'testclasse' },
body: 'test'
}, { formatting: 'multiline' }).toString());
console.log(new Json2html({
tag: 'div',
attrs: { id: 'test', class: 'testclasse', test: null },
body: [
'test',
{
tag: 'div',
attrs: { id: 'test', class: 'testclasse', test: null },
body: [
'test2'
]
}
]
}).toString());
}
......
Supports Markdown
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