superform - 02 onFormModifiedStateChange

by fiddlerintheoffice

HTML

<link rel="stylesheet" href="http://megaflop.net/uic/jquery.uic-form3-jsfiddle.css">
<script src="https://megaflop.net/uic/custom-elements.js"></script>
<form is="super-form">
    <div class="wrapper">
        <div class="required">
            <label for="username">username</label>
            <input type="text" id="username" name="username" value="uicform3user" placeholder="username">
        </div>
        <div class="required">
            <label for="password">password</label>
            <input type="text" id="password" name="password" value="uicform3pass" placeholder="password">
        </div>
        <div class="message">
            <div class="initial">Your form is in initial state.</div>
            <div class="unsaved">You have unsaved data.</div>
        </div>
    </div>
</form>

JavaScript

import SuperForm from 'https://megaflop.net/uic/super-form.js';
const form = document.querySelector('form');

form.on('propertyModifiedStateChange', (elements, name, initVal, currentVal, modified, e) => {
    elements.forEach(el => {
        if (modified === true) {
            el.closest('div').classList.add('modified');
        }
        else {
            el.closest('div').classList.remove('modified');
        }
    });
});
form.on('formModifiedStateChange', (modified, e) => {
    console.log('a')
    if (modified === true) {
        form.classList.add('modified');
    } else {
        form.classList.remove('modified');
    }
});