custom.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. document.querySelectorAll(".use-termynal").forEach(node => {
  2. node.style.display = "block";
  3. new Termynal(node, {
  4. lineDelay: 500
  5. });
  6. });
  7. const progressLiteralStart = "---> 100%";
  8. const promptLiteralStart = "$ ";
  9. const customPromptLiteralStart = "# ";
  10. const termynalActivateClass = "termy";
  11. let termynals = [];
  12. function createTermynals() {
  13. document
  14. .querySelectorAll(`.${termynalActivateClass} .highlight`)
  15. .forEach(node => {
  16. const text = node.textContent;
  17. const lines = text.split("\n");
  18. const useLines = [];
  19. let buffer = [];
  20. function saveBuffer() {
  21. if (buffer.length) {
  22. let isBlankSpace = true;
  23. buffer.forEach(line => {
  24. if (line) {
  25. isBlankSpace = false;
  26. }
  27. });
  28. dataValue = {};
  29. if (isBlankSpace) {
  30. dataValue["delay"] = 0;
  31. }
  32. if (buffer[buffer.length - 1] === "") {
  33. // A last single <br> won't have effect
  34. // so put an additional one
  35. buffer.push("");
  36. }
  37. const bufferValue = buffer.join("<br>");
  38. dataValue["value"] = bufferValue;
  39. useLines.push(dataValue);
  40. buffer = [];
  41. }
  42. }
  43. for (let line of lines) {
  44. if (line === progressLiteralStart) {
  45. saveBuffer();
  46. useLines.push({
  47. type: "progress"
  48. });
  49. } else if (line.startsWith(promptLiteralStart)) {
  50. saveBuffer();
  51. const value = line.replace(promptLiteralStart, "").trimEnd();
  52. useLines.push({
  53. type: "input",
  54. value: value
  55. });
  56. } else if (line.startsWith("// ")) {
  57. saveBuffer();
  58. const value = "💬 " + line.replace("// ", "").trimEnd();
  59. useLines.push({
  60. value: value,
  61. class: "termynal-comment",
  62. delay: 0
  63. });
  64. } else if (line.startsWith(customPromptLiteralStart)) {
  65. saveBuffer();
  66. const promptStart = line.indexOf(promptLiteralStart);
  67. if (promptStart === -1) {
  68. console.error("Custom prompt found but no end delimiter", line)
  69. }
  70. const prompt = line.slice(0, promptStart).replace(customPromptLiteralStart, "")
  71. let value = line.slice(promptStart + promptLiteralStart.length);
  72. useLines.push({
  73. type: "input",
  74. value: value,
  75. prompt: prompt
  76. });
  77. } else {
  78. buffer.push(line);
  79. }
  80. }
  81. saveBuffer();
  82. const div = document.createElement("div");
  83. node.replaceWith(div);
  84. const termynal = new Termynal(div, {
  85. lineData: useLines,
  86. noInit: true,
  87. lineDelay: 500
  88. });
  89. termynals.push(termynal);
  90. });
  91. }
  92. function loadVisibleTermynals() {
  93. termynals = termynals.filter(termynal => {
  94. if (termynal.container.getBoundingClientRect().top - innerHeight <= 0) {
  95. termynal.init();
  96. return false;
  97. }
  98. return true;
  99. });
  100. }
  101. window.addEventListener("scroll", loadVisibleTermynals);
  102. createTermynals();
  103. loadVisibleTermynals();