25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

149 lines
3.4 KiB

  1. import { $ } from '../../../src/js/utils/dom';
  2. import { toTitleCase } from '../../../src/js/utils/helpers';
  3. export class docsBuilder {
  4. constructor(LIB_OBJ) {
  5. this.LIB_OBJ = LIB_OBJ;
  6. }
  7. makeSection(parent, sys) {
  8. return new docSection(this.LIB_OBJ, parent, sys);
  9. }
  10. }
  11. class docSection {
  12. constructor(LIB_OBJ, parent, sys) {
  13. this.LIB_OBJ = LIB_OBJ;
  14. this.parent = parent; // should be preferably a section
  15. this.sys = sys;
  16. this.blockMap = {};
  17. this.demos = [];
  18. this.make();
  19. }
  20. make() {
  21. // const section = document.querySelector(this.parent);
  22. let s = this.sys;
  23. if(s.title) {
  24. $.create('h6', { inside: this.parent, innerHTML: s.title });
  25. }
  26. s.contentBlocks.forEach((blockConf, index) => {
  27. this.blockMap[index] = this.getBlock(blockConf);
  28. });
  29. }
  30. getBlock(blockConf) {
  31. let fnName = 'get' + toTitleCase(blockConf.type);
  32. if(this[fnName]) {
  33. return this[fnName](blockConf);
  34. } else {
  35. throw new Error(`Unknown section block type '${blockConf.type}'.`);
  36. }
  37. }
  38. getText(blockConf) {
  39. return $.create('p', {
  40. inside: this.parent,
  41. className: 'new-context',
  42. innerHTML: blockConf.content
  43. });
  44. }
  45. getCode(blockConf) {
  46. let pre = $.create('pre', { inside: this.parent });
  47. let lang = blockConf.lang || 'javascript';
  48. let code = $.create('code', {
  49. inside: pre,
  50. className: `hljs ${lang}`,
  51. innerHTML: blockConf.content
  52. });
  53. }
  54. getCustom(blockConf) {
  55. this.parent.innerHTML += blockConf.html;
  56. }
  57. getDemo(blockConf) {
  58. let bc = blockConf;
  59. let args = bc.config;
  60. let figure, row;
  61. if(!bc.sideContent) {
  62. figure = $.create('figure', { inside: this.parent });
  63. } else {
  64. row = $.create('div', {
  65. inside: this.parent,
  66. className: "row",
  67. innerHTML: `<div class="col-sm-8"></div>
  68. <div class="col-sm-4"></div>`,
  69. });
  70. figure = $.create('figure', { inside: row.querySelector('.col-sm-8') });
  71. row.querySelector('.col-sm-4').innerHTML += bc.sideContent;
  72. }
  73. let libObj = new this.LIB_OBJ(figure, args);
  74. let demoIndex = this.demos.length;
  75. this.demos.push(libObj);
  76. if(bc.postSetup) {
  77. bc.postSetup(this.demos[demoIndex], figure, row);
  78. }
  79. this.getDemoOptions(demoIndex, bc.options, args, figure);
  80. this.getDemoActions(demoIndex, bc.actions, args);
  81. }
  82. getDemoOptions(demoIndex, options=[], args={}, figure) {
  83. options.forEach(o => {
  84. const btnGroup = $.create('div', {
  85. inside: this.parent,
  86. className: `btn-group ${o.name}`
  87. });
  88. const mapKeys = o.mapKeys;
  89. if(o.type === "map") {
  90. args[o.path[0]] = {};
  91. }
  92. Object.keys(o.states).forEach(key => {
  93. let state = o.states[key];
  94. let activeClass = key === o.activeState ? 'active' : '';
  95. let button = $.create('button', {
  96. inside: btnGroup,
  97. className: `btn btn-sm btn-secondary ${activeClass}`,
  98. innerHTML: key,
  99. onClick: (e) => {
  100. // map
  101. if(o.type === "map") {
  102. mapKeys.forEach((attr, i) => {
  103. args[o.path[0]][attr] = state[i];
  104. })
  105. } else {
  106. // boolean, string, number, object
  107. args[o.path[0]] = state;
  108. }
  109. this.demos[demoIndex] = new this.LIB_OBJ(figure, args);
  110. }
  111. });
  112. if(activeClass) { button.click(); }
  113. });
  114. });
  115. }
  116. getDemoActions(demoIndex, actions=[], args={}) {
  117. actions.forEach(o => {
  118. let args = o.args || [];
  119. $.create('button', {
  120. inside: this.parent,
  121. className: `btn btn-action btn-sm btn-secondary`,
  122. innerHTML: o.name,
  123. onClick: () => {this.demos[demoIndex][o.fn](...args);}
  124. });
  125. });
  126. }
  127. }