class InteractionElement { constructor(htmlId="", checkStatus=true, disabledBefore=true, disabledAfter=false, hideBefore=true, hideAfter=false) { this.htmlId = htmlId; this.element = (htmlId) => {this.element = document.getElementById(htmlId);} this.checkStatus = checkStatus; this.callbacks = {}; this.disabledBefore = disabledBefore; this.disabledAfter = disabledAfter; this.hideBefore = hideBefore; this.hideAfter = hideAfter; this.element(this.htmlId); } setCallback(trigger, callback, bindThis, args=[]) { this.callbacks[trigger] = { "function": callback, "bindThis": bindThis, "args": args }; } bindThisToCallback(trigger) { let callback = this.callbacks[trigger]; let boundedCallback = callback["function"].bind(callback.bindThis); return boundedCallback; } static onChangeExecute(interactionElements) { // checks if a change for every interactionElement happens and executes // the callbacks accordingly // TODO: This function scould be a static function of the Class InteractionElements // This class does not exist yet. The Class InteractionElements should hold // a list of InteractionElement objects. onChangeExecute loops over InteractionElements // and executes the callbacks as mentioned accordingly. An additional // InteractionElements Class is logically right but also makes things a little more // complex. It is not yet decided. for (let interaction of interactionElements) { if (interaction.checkStatus) { interaction.element.addEventListener("change", (event) => { if (event.target.checked) { let f_on = interaction.bindThisToCallback("on"); let args_on = interaction.callbacks.on.args; f_on(...args_on); } else if (!event.target.checked){ let f_off = interaction.bindThisToCallback("off"); let args_off = interaction.callbacks.off.args; f_off(...args_off); } }); } else { continue } }; } }