/** * @author n1474335 [n1474335@gmail.com] * @copyright Crown Copyright 2016 * @license Apache-2.0 */ /** * Object to handle the creation of operation ingredients. */ class HTMLIngredient { /** * HTMLIngredient constructor. * * @param {Object} config - The configuration object for this ingredient. * @param {App} app - The main view object for CyberChef. * @param {Manager} manager - The CyberChef event manager. */ constructor(config, app, manager) { this.app = app; this.manager = manager; this.name = config.name; this.type = config.type; this.value = config.value; this.disabled = config.disabled || false; this.hint = config.hint || false; this.target = config.target; this.toggleValues = config.toggleValues; this.id = "ing-" + this.app.nextIngId(); } /** * Renders the ingredient in HTML. * * @returns {string} */ toHtml() { let html = "", i, m; switch (this.type) { case "string": case "binaryString": case "byteArray": html += `
${this.hint ? "" + this.hint + "" : ""}
`; break; case "shortString": case "binaryShortString": html += `
${this.hint ? "" + this.hint + "" : ""}
`; break; case "toggleString": html += `
${this.hint ? "" + this.hint + "" : ""}
`; break; case "number": html += `
${this.hint ? "" + this.hint + "" : ""}
`; break; case "boolean": html += `
`; break; case "option": html += `
${this.hint ? "" + this.hint + "" : ""}
`; break; case "populateOption": html += `
${this.hint ? "" + this.hint + "" : ""}
`; this.manager.addDynamicListener("#" + this.id, "change", this.populateOptionChange, this); break; case "editableOption": html += `
${this.hint ? "" + this.hint + "" : ""}
`; this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this); break; case "text": html += `
${this.hint ? "" + this.hint + "" : ""}
`; break; default: break; } return html; } /** * Handler for populate option changes. * Populates the relevant argument with the specified value. * * @param {event} e */ populateOptionChange(e) { const el = e.target; const op = el.parentNode.parentNode; const target = op.querySelectorAll(".arg")[this.target]; target.value = el.childNodes[el.selectedIndex].getAttribute("populate-value"); const evt = new Event("change"); target.dispatchEvent(evt); this.manager.recipe.ingChange(); } /** * Handler for editable option clicks. * Populates the input box with the selected value. * * @param {event} e */ editableOptionClick(e) { e.preventDefault(); e.stopPropagation(); const link = e.target, input = link.parentNode.parentNode.parentNode.querySelector("input"); input.value = link.getAttribute("value"); const evt = new Event("change"); input.dispatchEvent(evt); this.manager.recipe.ingChange(); } } export default HTMLIngredient;