Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
 
 
 

109 lignes
2.4 KiB

  1. import { $ } from '../../../src/js/utils/dom';
  2. export class docSectionBuilder {
  3. constructor(LIB_OBJ) {
  4. this.LIB_OBJ = LIB_OBJ;
  5. }
  6. setParent(parent) {
  7. // this.parent = parent;
  8. this.section = parent;
  9. }
  10. setSys(sys) {
  11. this.sys = sys;
  12. this.blockMap = {};
  13. }
  14. make() {
  15. // const section = document.querySelector(this.section);
  16. let s = this.sys;
  17. $.create('h6', { inside: this.section, innerHTML: s.title });
  18. s.contentBlocks.forEach((blockConf, index) => {
  19. this.blockMap[index] = this.getBlock(blockConf);
  20. });
  21. }
  22. getBlock(blockConf) {
  23. let block;
  24. let type = blockConf.type;
  25. if(type === "text") {
  26. block = this.getText(blockConf);
  27. } else if(type === "code") {
  28. block = this.getCode(blockConf);
  29. } else {
  30. block = this.getDemo(blockConf);
  31. }
  32. }
  33. getText(blockConf) {}
  34. getCode(blockConf) {
  35. let pre = $.create('pre', { inside: this.section });
  36. let code = $.create('code', {
  37. inside: pre,
  38. className: `hljs ${blockConf.lang}`,
  39. innerHTML: blockConf.content
  40. });
  41. }
  42. getDemo(blockConf) {
  43. let args = blockConf.config;
  44. let figure = $.create('figure', { inside: this.section });
  45. this.libObj = new this.LIB_OBJ(figure, args);
  46. this.getDemoOptions(blockConf.options, args, figure);
  47. this.getDemoActions(blockConf.actions, args);
  48. }
  49. getDemoOptions(options, args, figure) {
  50. options.forEach(o => {
  51. const btnGroup = $.create('div', {
  52. inside: this.section,
  53. className: `btn-group ${o.name}`
  54. });
  55. const mapKeys = o.mapKeys;
  56. if(o.type === "map") {
  57. args[o.path[0]] = {};
  58. }
  59. Object.keys(o.states).forEach(key => {
  60. let state = o.states[key];
  61. let activeClass = key === o.activeState ? 'active' : '';
  62. let button = $.create('button', {
  63. inside: btnGroup,
  64. className: `btn btn-sm btn-secondary ${activeClass}`,
  65. innerHTML: key,
  66. onClick: (e) => {
  67. // map
  68. if(o.type === "map") {
  69. mapKeys.forEach((attr, i) => {
  70. args[o.path[0]][attr] = state[i];
  71. })
  72. } else {
  73. // boolean, number, object
  74. args[o.path[0]] = state;
  75. }
  76. this.libObj = new this.LIB_OBJ(figure, args);
  77. }
  78. });
  79. if(activeClass) { button.click(); }
  80. });
  81. });
  82. }
  83. getDemoActions(actions, args) {
  84. actions.forEach(o => {
  85. let args = o.args || [];
  86. $.create('button', {
  87. inside: this.section,
  88. className: `btn btn-sm btn-secondary`,
  89. innerHTML: o.name,
  90. onClick: () => {this.libObj[o.fn](...o.args);}
  91. });
  92. });
  93. }
  94. }