aw-lights/liveview-rust/js/liveview-dev.js

import morphdom from "morphdom";
const $ = require('jquery');

window.morphdom = morphdom;
window.$ = $;

let conn = null;

let content = document.getElementById('content');

function connect() {
    disconnect();
    let wsUri = (window.location.protocol === 'https:' && 'wss://' || 'ws://') + window.location.host + '/ws/';
    conn = new WebSocket(wsUri);
    console.log('Connecting...');
    conn.onopen = function () {
        console.log('Connected.');
    };
    conn.onmessage = function (e) {
        let new_content = document.createElement('div');
        new_content.setAttribute('id', 'content');
        new_content.innerHTML = e.data;
        morphdom(content, new_content, {
            onBeforeElUpdated: function (fromEl, toEl) {
                if (toEl.tagName === 'INPUT') {
                    toEl.value = fromEl.value;
                }
            },

        });
        // attach();
    };
    conn.onclose = function () {
        console.log('Disconnected.');
        conn = null;
    };
}

function disconnect() {
    if (conn != null) {
        log('Disconnecting...');
        conn.close();
        conn = null;
    }
}

function send_event(kind, event, data = null) {
    let json = JSON.stringify({
        "kind": kind,
        "event": event,
        "data": data,
    });
    console.log(json);
    conn.send(json);
}

function hexToRgb(v) {
    // Adapted from https://stackoverflow.com/a/5624139
    var result = /^#?([a-f\d]{1,2})([a-f\d]{2})([a-f\d]{2})$/i.exec(v);

    if(result) {
        result.splice(0, 1);
        v = result.map(r => parseInt(r, 16));
    }

    return v;
}

function getFormData(form) {
    // let ret = {};
    return Array.from(form.elements).reduce((acc, e) => {
        switch(e.type) {
            case "color":
                acc[e.name] = hexToRgb(e.value);
                break;
            case "number":
                acc[e.name] = parseInt(e.value);
                break;
            case "checkbox":
                acc[e.name] = e.value === "on";
                break;
            default:
                break;
        }
        return acc;
    }, {});
    // return ret;
}

const CLICK_EVENT = 'click';
const SUBMIT_EVENT = 'submit';
const INPUT_EVENT = 'input';
const KEYDOWN_EVENT = 'keydown';
const MOUSEOVER_EVENT = 'mouseover';
const MOUSEOUT_EVENT = 'mouseout';

function attach() {
    let clickElems = document.querySelectorAll('[rust-click]');
    for (let i = 0; i < clickElems.length; i++) {
        clickElems[i].addEventListener(CLICK_EVENT, function (e) {
            e.preventDefault();
            let val = clickElems[i].getAttribute('rust-click');
            send_event(CLICK_EVENT, val);
        });
    }

    let submitElems = document.querySelectorAll('[rust-submit]');
    for (let i = 0; i < submitElems.length; i++) {
        submitElems[i].addEventListener(SUBMIT_EVENT, function (e) {
            console.log("Preventing");
            e.preventDefault();
            // Form serialization
            // let form = $(this).serialize();
            // JSON serialization
            let data = {};
            data[document.getElementById("template-name").value] = getFormData(this);
            let form = JSON.stringify(data);
            console.log("serialized form", form);
            let event = submitElems[i].getAttribute('rust-submit');
            send_event(SUBMIT_EVENT, event, form);
        });
    }

    let inputElems = document.querySelectorAll('[rust-input]');
    for (let i = 0; i < inputElems.length; i++) {
        inputElems[i].addEventListener(INPUT_EVENT, function (e) {
            let event = inputElems[i].getAttribute('rust-input');
            let val = $(this).val();
            send_event(INPUT_EVENT, event, val);
        });
    }

    let keydownElems = document.querySelectorAll('[rust-keydown]');
    for (let i = 0; i < keydownElems.length; i++) {
        keydownElems[i].addEventListener(KEYDOWN_EVENT, function (e) {
            let event = keydownElems[i].getAttribute('rust-keydown');
            let val = $(this).val();
            send_event(KEYDOWN_EVENT, event, val);
        });
    }

    let mouseoverElems = document.querySelectorAll('[rust-mouseover]');
    for (let i = 0; i < mouseoverElems.length; i++) {
        mouseoverElems[i].addEventListener(MOUSEOVER_EVENT, function (e) {
            let event = mouseoverElems[i].getAttribute('rust-mouseover');
            let val = $(this).val();
            send_event(MOUSEOVER_EVENT, event, val);
        });
    }

    let mouseoutElems = document.querySelectorAll('[rust-mouseout]');
    for (let i = 0; i < mouseoutElems.length; i++) {
        mouseoutElems[i].addEventListener(MOUSEOUT_EVENT, function (e) {
            let event = mouseoutElems[i].getAttribute('rust-mouseout');
            let val = $(this).val();
            send_event(MOUSEOUT_EVENT, event, val);
        });
    }
}

connect();
attach();