From 26323fa9589979c4c4b9d54548e52836a2057ec5 Mon Sep 17 00:00:00 2001 From: luis Date: Sun, 8 Oct 2023 11:32:22 +0200 Subject: [PATCH] Modernize --- framework.js | 11 +++++++--- index.html | 58 +++++++++++++--------------------------------------- main.js | 33 ++++++++++++++++++++++++++++++ 3 files changed, 55 insertions(+), 47 deletions(-) create mode 100644 main.js diff --git a/framework.js b/framework.js index 4de9f5d..a4524ad 100644 --- a/framework.js +++ b/framework.js @@ -1,11 +1,16 @@ "use strict"; -window.htmlToElement = function(html) { +export async function request(resource, options) { + let response = await fetch(resource, options); + if (response.ok) return response; else throw response; +} + +export function htmlToElement(html) { let template = document.createElement('template'); template.innerHTML = html.trim(); return template.content.firstChild; } -window.AuxEvent = class { +export class AuxEvent { constructor() { this.event = document.createElement('e'); this.aux = new Event('e'); @@ -27,7 +32,7 @@ window.AuxEvent = class { } } -window.Observable = class { +export class Observable { constructor(initialValue) { this.variable = initialValue; this.event = new AuxEvent(); diff --git a/index.html b/index.html index 419345b..0fa7bd4 100644 --- a/index.html +++ b/index.html @@ -1,47 +1,17 @@ - - - Data binding - - - - - - - -

Data binding

- -

-
-
- - + + + Data binding + + + + + + +

Data binding

+ +

+
+ diff --git a/main.js b/main.js new file mode 100644 index 0000000..3575bf7 --- /dev/null +++ b/main.js @@ -0,0 +1,33 @@ +"use strict"; +import {htmlToElement, Observable} from "./framework.js"; + +let mainInput = document.querySelector("input"); +let nInputs = new Observable(mainInput.value); +let message = new Observable("Binded data"); + +function inputElement() { + let element = htmlToElement(`
+ +

+
`); + let input = element.querySelector('input'); + input.value = message.value; + input.oninput = () => {message.value = input.value}; + input.onmouseenter = () => input.focus(); + message.subscribe(input, () => input.value = message.value); + return element; +} + +function inputsElement() { + let element = htmlToElement(`
`); + + for (let i = 0; i < nInputs.value; i++) + element.appendChild(inputElement()); + + nInputs.subscribe(element, () => element.replaceWith(inputsElement())); + return element; +} + +mainInput.oninput = () => {nInputs.value = mainInput.value}; +mainInput.onmouseenter = () => mainInput.select(); +document.getElementById("inputs").replaceWith(inputsElement());