Neologistic Paraphasic Mumbling

    @convergence/input-element-bindings
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.1 • Public • Published

    Convergence Input Element Bindings

    Build

    This module provides a set of utilities to bind plain HTML Input / Form Elements to a Convergence model. The module provides simple two way data binding between the HTML input element and a particular field in the Convergence data model. The module currently supports the following input elements:

    • Text Input Fields
      • <input type="text" />
      • <input type="password" />
      • <input type="email" />
      • <input type="url" />
      • <input type="search" />
      • <textarea />
    • Radio Buttons
      • <input type="radio" />
    • Select Elements
      • <select />
      • <select multiple />
    • Color Selector
      • <input type="color" />
    • Number Fields
      • <input type="number" />
      • <input type="range" />

    You can see it in action here.

    Installation

    npm install @convergence/input-element-bindings

    Example Usage

    <html>
    <head>
      <script src="https://cdn.jsdelivr.net/npm/rxjs@6.6.2/bundles/rxjs.umd.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/@convergence/convergence/convergence.global.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/@convergence/string-change-detector/browser/string-change-detector.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/@convergence/input-element-bindings@0.5.0/dist/umd/convergence-input-element-bindings.min.js"></script>
    </head>
    <body>
      <input type="text" id="textInput" disabled="disabled"/>
      
      <script>
      const DOMAIN_URL = "http://localhost:8000/realtime/domain/convergence/default";
      Convergence.connectAnonymously(DOMAIN_URL)
          .then((domain) => {
              return domain.models().openAutoCreate({
                  collection: "input-binder",
                  id: "example",
                  data: () => {
                      return {textInput: "Text to collaborate on"};
                  }
              });
          })
          .then((model) => {
              const textInput = document.getElementById("textInput");
              textInput.disabled = false;
              const realTimeString = model.elementAt("textInput");
              ConvergenceInputElementBinder.bindTextInput(textInput, realTimeString);
          })
          .catch((error) => {
              console.error(error);
          });
      </script>
    </body>
    </html>

    You can find a working example in the example directory.

    API

    function bindTextInput(textInput, stringElement)
    function bindNumberInput(numberInput, numberElement)
    function bindCheckboxInput(checkboxInput, booleanElement)
    function bindRangeInput(rangeInput, numberElement)
    function bindColorInput(colorInput, stringElement)
    function bindSingleSelect(selectInput, stringElement)
    function bindMultiSelect(selectInput, arrayElement)
    function bindRadioInputs(radioInputs, stringElement)

    Install

    npm i @convergence/input-element-bindings

    DownloadsWeekly Downloads

    14

    Version

    0.5.1

    License

    MIT

    Unpacked Size

    196 kB

    Total Files

    54

    Last publish

    Collaborators

    • convergence