You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

173 lines
4.0 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. if(s.contentBlocks) {
  27. s.contentBlocks.forEach((blockConf, index) => {
  28. this.blockMap[index] = this.getBlock(blockConf);
  29. });
  30. } else {
  31. // TODO:
  32. this.blockMap['test'] = this.getDemo(s);
  33. }
  34. }
  35. getBlock(blockConf) {
  36. let fnName = 'get' + toTitleCase(blockConf.type);
  37. if(this[fnName]) {
  38. return this[fnName](blockConf);
  39. } else {
  40. throw new Error(`Unknown section block type '${blockConf.type}'.`);
  41. }
  42. }
  43. getText(blockConf) {
  44. return $.create('p', {
  45. inside: this.parent,
  46. className: 'new-context',
  47. innerHTML: blockConf.content
  48. });
  49. }
  50. getCode(blockConf) {
  51. let pre = $.create('pre', { inside: this.parent });
  52. let lang = blockConf.lang || 'javascript';
  53. let code = $.create('code', {
  54. inside: pre,
  55. className: `hljs ${lang}`,
  56. innerHTML: blockConf.content
  57. });
  58. }
  59. getCustom(blockConf) {
  60. this.parent.innerHTML += blockConf.html;
  61. }
  62. getDemo(blockConf) {
  63. let bc = blockConf;
  64. let args = bc.config;
  65. let figure, row;
  66. if(!bc.sideContent) {
  67. figure = $.create('figure', { inside: this.parent });
  68. } else {
  69. row = $.create('div', {
  70. inside: this.parent,
  71. className: "row",
  72. innerHTML: `<div class="col-sm-8"></div>
  73. <div class="col-sm-4"></div>`,
  74. });
  75. figure = $.create('figure', { inside: row.querySelector('.col-sm-8') });
  76. row.querySelector('.col-sm-4').innerHTML += bc.sideContent;
  77. }
  78. let libObj = new this.LIB_OBJ(figure, args);
  79. let demoIndex = this.demos.length;
  80. this.demos.push(libObj);
  81. if(bc.postSetup) {
  82. bc.postSetup(this.demos[demoIndex], figure, row);
  83. }
  84. this.getDemoOptions(demoIndex, bc.options, args, figure);
  85. this.getDemoActions(demoIndex, bc.actions, args);
  86. }
  87. getDemoOptions(demoIndex, options=[], args={}, figure) {
  88. options.forEach(o => {
  89. const btnGroup = $.create('div', {
  90. inside: this.parent,
  91. className: `btn-group ${o.name}`
  92. });
  93. const mapKeys = o.mapKeys;
  94. if(o.type === "number") {
  95. let numOpts = o.numberOptions;
  96. const inputGroup = $.create('input', {
  97. inside: btnGroup,
  98. className: `form-control`,
  99. type: "range",
  100. min: numOpts.min,
  101. max: numOpts.max,
  102. step: numOpts.step,
  103. value: o.activeState ? o.activeState : 0,
  104. // (max - min)/2
  105. onInput: (value) => {
  106. args[o.path[0]][o.path[1]] = value;
  107. this.demos[demoIndex] = new this.LIB_OBJ(figure, args);
  108. }
  109. });
  110. } else if(["map", "string"].includes(o.type)) {
  111. args[o.path[0]] = {};
  112. Object.keys(o.states).forEach(key => {
  113. let state = o.states[key];
  114. let activeClass = key === o.activeState ? 'active' : '';
  115. let button = $.create('button', {
  116. inside: btnGroup,
  117. className: `btn btn-sm btn-secondary ${activeClass}`,
  118. innerHTML: key,
  119. onClick: (e) => {
  120. // map
  121. if(o.type === "map") {
  122. mapKeys.forEach((attr, i) => {
  123. args[o.path[0]][attr] = state[i];
  124. })
  125. } else {
  126. // boolean, string, number, object
  127. args[o.path[0]] = state;
  128. }
  129. this.demos[demoIndex] = new this.LIB_OBJ(figure, args);
  130. }
  131. });
  132. if(activeClass) { button.click(); }
  133. });
  134. }
  135. });
  136. }
  137. getDemoActions(demoIndex, actions=[], args={}) {
  138. actions.forEach(o => {
  139. let args = o.args || [];
  140. $.create('button', {
  141. inside: this.parent,
  142. className: `btn btn-action btn-sm btn-secondary`,
  143. innerHTML: o.name,
  144. onClick: () => {this.demos[demoIndex][o.fn](...args);}
  145. });
  146. });
  147. }
  148. }