<p>
On this page you will find a sample implementation for many HTML5 controls. The binding is set up in both
directions, so that a change to the control also causes a change to the values, and changes to the values cause a change to the
control.
</p>
<p>
You can save the updater as a temporary variable in the console. In our case Chrome assigns the variable <code>temp1</code> to
the object.
</p>
<p>
Note that instead of <code>temp1</code> you have to take the variable from your browser.
</p>
<p>
And then access the data array using <code>temp1.getSubject().</code>
</p>
<p>
For example, to enable the checkbox you can set <code>temp1.getSubject().value.checkbox="YES"</code>. To deactivate the checkbox
you have to remove the value <code>temp1.getSubject().value.checkbox=undefined</code>
</p>
<p>
Note that you have to take the variable from your browser instead of temp1.
</p>
<p>
At the bottom you will find the JSON with all values
</p>
<h3>Examples</h3>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>-->
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-coy.css" rel="stylesheet"/>-->
<template id="example1">
<style>
[readonly] {
background-color: #e9e9e9;
border: 1px solid grey;
}
div {
box-sizing: border-box;
}
.table {
display: grid;
grid-template-columns: 1fr 1fr 4fr;
}
.cell.control {
padding: 5px 20px;
}
.cell.value {
padding: 5px 20px;
}
.json {
margin: 5px 20px;
padding: 20px;
border: 4px solid #424242;
margin-top: 20px
}
</style>
<div id="container">
<div class="table">
<div class="cell control"><select type="input" data-monster-bind="path:value.multiple" multiple>
<option value="a" data-monster-attributes="selected path:value.multiple | call:checkstate">A
</option>
<option value="b" data-monster-attributes="selected path:value.multiple | call:checkstate">B
</option>
<option value="c" data-monster-attributes="selected path:value.multiple | call:checkstate">C
</option>
</select></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.multiple"></div>
<div class="cell code"></div>
<div class="cell control"><select type="input" data-monster-bind="path:value.select"
data-monster-attributes="value path:value.select">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.select"></div>
<div class="cell code"></div>
<div class="cell control"><input type="checkbox" data-monster-bind="path:value.checkbox" value="YES"
data-monster-attributes="checked path:value.checkbox | call:checkstate">
</div>
<div class="cell value"><input id="my" readonly data-monster-attributes="value path:value.checkbox"></div>
<div class="cell code"></div>
<div class="cell control"><input type="search" name="search" data-monster-bind="path:value.search"
data-monster-attributes="value path:value.search"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.search"></div>
<div class="cell code"></div>
<div class="cell control"><input type="tel" name="tel" data-monster-bind="path:value.tel"
data-monster-attributes="value path:value.tel"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.tel"></div>
<div class="cell code"></div>
<div class="cell control"><input type="time" name="time" data-monster-bind="path:value.time"
data-monster-attributes="value path:value.time"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.time"></div>
<div class="cell code"></div>
<div class="cell control"><input type="url" name="url" data-monster-bind="path:value.url"
data-monster-attributes="value path:value.url"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.url"></div>
<div class="cell code"></div>
<div class="cell control"><input type="week" name="week" data-monster-bind="path:value.week"
data-monster-attributes="value path:value.week"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.week"></div>
<div class="cell code"></div>
<div class="cell control"><input type="color" name="color" data-monster-bind="path:value.color"
data-monster-attributes="value path:value.color"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.color"></div>
<div class="cell code"></div>
<div class="cell control"><input type="radio" name="doit" data-monster-bind="path:value.radio" value="2"
data-monster-attributes="checked path:value.radio | call:checkstate"><br>
<input type="radio" name="doit" data-monster-bind="path:value.radio" value="1"
data-monster-attributes="checked path:value.radio | call:checkstate"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.radio"></div>
<div class="cell code"></div>
<div class="cell control"><input type="range" name="range" data-monster-bind="path:value.range"
data-monster-attributes="value path:value.range"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.range"></div>
<div class="cell code"></div>
<div class="cell control"><input type="password" name="password" data-monster-bind="path:value.password"
data-monster-attributes="value path:value.password"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.password"></div>
<div class="cell code"></div>
<div class="cell control">
<input type="number" name="number" data-monster-bind="path:value.number"
data-monster-attributes="value path:value.number"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.number"></div>
<div class="cell code"></div>
<div class="cell control">
<input type="month" name="month" data-monster-bind="path:value.month"
data-monster-attributes="value path:value.month"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.month"></div>
<div class="cell code"></div>
<div class="cell control"><input type="email" name="email" data-monster-bind="path:value.email"
data-monster-attributes="value path:value.email"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.email"></div>
<div class="cell code"></div>
<div class="cell control"><input type="datetime-local" name="datetime-local"
data-monster-bind="path:value.datetime-local"
data-monster-attributes="value path:value.datetime-local"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.datetime-local"></div>
<div class="cell code"></div>
<div class="cell control">
<input type="date" name="date" data-monster-bind="path:value.date"
data-monster-attributes="value path:value.date"></div>
<div class="cell value"><input readonly data-monster-attributes="value path:value.date"></div>
<div class="cell code"></div>
</div>
<div class="json"
data-monster-replace="path:value | tojson"></div>
</div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-coy.css" rel="stylesheet"/>
<script type="module">
'use strict';
import {Updater} from "https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.2/dist/modules/dom/updater.js";
document.addEventListener('readystatechange', () => {
if (document.readyState == 'complete') {
let included = false;
let example1 = document.getElementById('example1');
let article = document.querySelector('article');
if (article) {
article.appendChild(example1.content);
included = true;
} else {
// for local debug
document.body.appendChild(example1.content);
}
document.querySelectorAll('div[class*=control]').forEach((element) => {
let col = element.nextElementSibling.nextElementSibling;
let source = (element.innerHTML);
let pre = document.createElement('pre');
pre.setAttribute('class', 'prettyprint source')
let code = document.createElement('code');
col.appendChild(pre);
pre.appendChild(code);
source = Prism.highlight(source, Prism.languages.html, 'html');
code.innerHTML = source
})
const container = document.getElementById('container');
const updater = new Updater(container, {
value: {
input: "Init Value - input",
textarea: "Init Value - textarea",
file: "Init Value - file",
checkbox: "Init Value - checkbox",
radio: "Init Value - radio",
multiple: ['a', 'c']
}
});
updater.run();
updater.enableEventProcessing();
console.log(updater);
}
});
</script>