109 lines
2.4 KiB
JavaScript
109 lines
2.4 KiB
JavaScript
import { $ } from '../../../src/js/utils/dom';
|
|
|
|
export class docSectionBuilder {
|
|
constructor(LIB_OBJ) {
|
|
this.LIB_OBJ = LIB_OBJ;
|
|
}
|
|
|
|
setParent(parent) {
|
|
// this.parent = parent;
|
|
this.section = parent;
|
|
}
|
|
|
|
setSys(sys) {
|
|
this.sys = sys;
|
|
this.blockMap = {};
|
|
}
|
|
|
|
make() {
|
|
// const section = document.querySelector(this.section);
|
|
let s = this.sys;
|
|
$.create('h6', { inside: this.section, innerHTML: s.title });
|
|
|
|
s.contentBlocks.forEach((blockConf, index) => {
|
|
this.blockMap[index] = this.getBlock(blockConf);
|
|
});
|
|
}
|
|
|
|
getBlock(blockConf) {
|
|
let block;
|
|
let type = blockConf.type;
|
|
|
|
if(type === "text") {
|
|
block = this.getText(blockConf);
|
|
} else if(type === "code") {
|
|
block = this.getCode(blockConf);
|
|
} else {
|
|
block = this.getDemo(blockConf);
|
|
}
|
|
}
|
|
getText(blockConf) {}
|
|
getCode(blockConf) {
|
|
let pre = $.create('pre', { inside: this.section });
|
|
let code = $.create('code', {
|
|
inside: pre,
|
|
className: `hljs ${blockConf.lang}`,
|
|
innerHTML: blockConf.content
|
|
});
|
|
}
|
|
getDemo(blockConf) {
|
|
let args = blockConf.config;
|
|
let figure = $.create('figure', { inside: this.section });
|
|
this.libObj = new this.LIB_OBJ(figure, args);
|
|
|
|
this.getDemoOptions(blockConf.options, args, figure);
|
|
this.getDemoActions(blockConf.actions, args);
|
|
}
|
|
getDemoOptions(options, args, figure) {
|
|
options.forEach(o => {
|
|
const btnGroup = $.create('div', {
|
|
inside: this.section,
|
|
className: `btn-group ${o.name}`
|
|
});
|
|
const mapKeys = o.mapKeys;
|
|
|
|
if(o.type === "map") {
|
|
args[o.path[0]] = {};
|
|
}
|
|
|
|
Object.keys(o.states).forEach(key => {
|
|
let state = o.states[key];
|
|
let activeClass = key === o.activeState ? 'active' : '';
|
|
|
|
let button = $.create('button', {
|
|
inside: btnGroup,
|
|
className: `btn btn-sm btn-secondary ${activeClass}`,
|
|
innerHTML: key,
|
|
onClick: (e) => {
|
|
// map
|
|
if(o.type === "map") {
|
|
mapKeys.forEach((attr, i) => {
|
|
args[o.path[0]][attr] = state[i];
|
|
})
|
|
} else {
|
|
// boolean, number, object
|
|
args[o.path[0]] = state;
|
|
}
|
|
this.libObj = new this.LIB_OBJ(figure, args);
|
|
}
|
|
});
|
|
|
|
if(activeClass) { button.click(); }
|
|
});
|
|
});
|
|
}
|
|
|
|
getDemoActions(actions, args) {
|
|
actions.forEach(o => {
|
|
let args = o.args || [];
|
|
$.create('button', {
|
|
inside: this.section,
|
|
className: `btn btn-sm btn-secondary`,
|
|
innerHTML: o.name,
|
|
onClick: () => {this.libObj[o.fn](...o.args);}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|