diff options
Diffstat (limited to 'typescript/src/getNewHTML.ts')
| -rw-r--r-- | typescript/src/getNewHTML.ts | 199 |
1 files changed, 199 insertions, 0 deletions
diff --git a/typescript/src/getNewHTML.ts b/typescript/src/getNewHTML.ts new file mode 100644 index 0000000..f5d2070 --- /dev/null +++ b/typescript/src/getNewHTML.ts @@ -0,0 +1,199 @@ +/* SPDX-License-Identifier: AGPL-3.0-or-later */ + +import type AjaxResponse from "./AjaxResponse.js"; +import type AjaxSettings from "./AjaxSettings.js"; +import type Pod from "./Pod.js"; +import PodsClassName from "./podsClassName.js"; +import type State from "./State.js"; +import type SubPod from "./SubPod.js"; + +export default ( + AjaxSettings: AjaxSettings, + AjaxResponse: AjaxResponse +): string => + ` + <div class="${PodsClassName}"> + <div> + <div> + <section> + ${ + // Wolfram Alpha does have some limitations when it comes to processing certain types of input. + // When "input" is an empty string, + // the "pods" property will not be present in the "queryresult" object. + // To see an example of an empty input string, + // visit the following URL: + // https://www.wolframalpha.com/input?i= + Object.freeze(AjaxResponse) === undefined + ? (console.warn({ AjaxResponse }), "") + : AjaxResponse.queryresult === undefined + ? (console.warn({ AjaxResponse }), "") + : AjaxResponse.queryresult.pods === undefined + ? "" // console.warn + : AjaxResponse.queryresult.pods.map(buildPod).join("") + } + <section> + <div> + <h2> + Technical information + </h2> + </div> + <div> </div> + <div> + <div> + <div> + <details> + <div> + If you have programming knowledge, feel free to explore the technical information provided below: + </div> + <textarea name="technical-information">${ + Object.freeze(AjaxSettings) === undefined + ? (console.warn({ AjaxSettings }), "") + : Object.freeze(AjaxResponse) === undefined + ? (console.warn({ AjaxResponse }), "") + : escapeHTML(tryStringify(AjaxSettings, AjaxResponse)) + }</textarea> + </details> + </div> + </div> + </div> + <div> </div> + </section> + </section> + </div> + </div> + </div> + `; + +const buildPod = (pod: Pod): string => + ` + <section> + <div> + ${ + pod.title === undefined + ? (console.warn({ pod }), "") + : `<h2>${escapeHTML(pod.title)}</h2>` + } + ${ + // In most cases, pods are stateless and do not have specific states. + // As a result, the "states" property of "pod" is typically undefined. + pod.states === undefined + ? "" // console.warn + : pod.states.map(buildSelectElement).join("") + } + </div> + <div> </div> + ${ + pod.subpods === undefined + ? (console.warn({ pod }), "") + : pod.subpods.map(buildSubpod).join("") + } + </section> + `; + +const buildSelectElement = (state: State): string => + // Although it is possible to handle the scenario where the "states" property is undefined, + // implementing the necessary logic may result in a cluttered user interface. + // This challenge is primarily due to my limited expertise in front-end design. + // Consequently, the current implementation of the parsing logic is still insufficient in addressing the situation where the "states" property is undefined. + state.states === undefined + ? "" // console.warn + : ` + <select name="pod-states"> + ${ + state.value === undefined + ? (console.warn({ state }), "") + : ` + <option>${escapeHTML(state.value)}</option> + ` + } + ${state.states.map(buildOption).join("")} + </select> + `; + +const buildOption = (state: { name?: string }): string => + state.name === undefined + ? (console.warn({ state }), "") + : ` + <option>${escapeHTML(state.name)}</option> + `; + +const buildSubpod = (subpod: SubPod): string => + ` + ${ + subpod.img === undefined + ? (console.warn({ subpod }), "") + : ` + <div> + <div> + <img + src="${escapeHTML( + subpod.img.src === undefined + ? (console.warn({ subpod }), "") + : subpod.img.src + )}" + alt="${escapeHTML( + subpod.img.alt === undefined + ? (console.warn({ subpod }), "") + : subpod.img.alt + )}" + > + </div> + </div> + ` + } + ${ + subpod.plaintext === undefined + ? (console.warn({ subpod }), "") + : ` + <div style="font-family: monospace; overflow: auto;"> + <div> + <div> + <details> + <summary style="direction: rtl;"></summary> + <div> + <pre>${escapeHTML(subpod.plaintext)}</pre> + </div> + <br /> + </details> + </div> + </div> + </div> + ` + } + `; + +const tryStringify = ( + AjaxSettings: AjaxSettings, + AjaxResponse: AjaxResponse +): string => { + try { + return JSON.stringify( + { + document, + AjaxSettings, + AjaxResponse, + }, + null, + 4 + ); + } catch (error) { + console.warn({ error }); + return error instanceof TypeError ? error.message + "\n" + error.stack : ""; + // JSON.stringify() - JavaScript | MDN + // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#exceptions + } +}; + +const escapeHTML = (unsafeHTML: string): string => + unsafeHTML + .replace(/&/g, "&") + .replace(/</g, "<") + .replace(/>/g, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); + +// Can I escape HTML special chars in JavaScript? - Stack Overflow +// https://stackoverflow.com/questions/6234773/can-i-escape-html-special-chars-in-javascript + +// test case: +// https://www.wolframalpha.com/input?i=solve+%7By%27%28x%29+%3D+-2+y%2C+y%280%29%3D1%7D+from+0+to+10+using+r+k+f+algorithm |