DEV Community

artydev
artydev

Posted on • Updated on

DML : User Web Module

I like this functionality very much.
Look how you can get a reference to the element newly created in the last line of the below sample.

You can test it here : UWM

<html lang="de">
  <head>
  <meta charset="utf-8">
    <title>title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://efpage.de/DML/DML_homepage/lib/DML-min.js"></script>
  </head>

  <body>
  <h1>
  User defined web modules
  </h1>

  <script>
    function myInput(s, width) {
      inlineDiv(span(s), "text-align: left").style.width = width + "px";
      let ret = inputText("", {
        baseAttrib: "margin: 3px; ",
        fieldWidth: [100, 100],
      });
      return ret; // Return reference for access
    }
    h1("Input-Test");
    myInput("Short", 100);
    myInput("VeryLong", 100);
    let rmedium = myInput("Medium", 100);
    rmedium.oninput = (e) => console.log(e.target.value)
  </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Discussion (3)

Collapse
efpage profile image
Eckehard

Nice, this is the way it was intended to use. We can call "myInput" a generator function, as it generates a new UI element or a group of elements.

Just, inputText already implemented this functionality, so this gives the same result:

  <script>
    function myInput(s, width) {
      let ret = inputText(s, {
        baseAttrib: "margin: 3px; ",
        fieldWidth: [100, 100],
      });
      return ret; // Return reference for access
    }
    h1("Input-Test");
    myInput("Short");
    myInput("VeryLong");
    let rmedium = myInput("Medium");
    rmedium.oninput = (e) => console.log(e.target.value)
  </script>
Enter fullscreen mode Exit fullscreen mode

(It seems the documentation is outdated and needs some urgfent update...)

Interestingly, it is possible put also some callback functions inside the "generator" function, so you can also implement some general behavoir. In the following example, a key filter was implemented inside the myInput:

 <script>  "use strict";
    // Make the input elements / key filter
    function myInput(txt, rule) {
      // Create text and input field
      idiv(txt, "width: 100px;")
      let inp = make("input", { value: 1 })
      br()

      // Key filter
      inp.onkeydown = (e) => { if (e.key.length == 1) if (!e.key.match(rule)) e.preventDefault() } // Filter keys
      return inp
    }

    // Build the page
    h1("Binary converter")
    sidiv("", _box + _bigPadding)
    let b = myInput("binary", "[0,1]")
    let d = myInput("decimal", "[0-9]")
    b.oninput = () => d.value = parseInt(b.value, 2)
    d.oninput = () => b.value = ( parseInt(d.value,10) >>> 0).toString(2);
  </script>
Enter fullscreen mode Exit fullscreen mode

(see examples->Binary)

Collapse
artydev profile image
artydev Author

Thank you Eckehard :-)

Collapse
efpage profile image
Eckehard

Just updated this part of the documentation...