ReadView

A Web Component that displays a read view of its content and allows the user to switch to an edit view.

Demo

Basic usage

Link Click to edit the link

Code

<read-view id="readViewDemo_readView">
    <a href="https://bruegmann.github.io/blue-web/" id="readViewDemo_link" target="_blank" rel="noopener noreferrer"
        >Link</a
    >
    Click to edit the link
</read-view>
<form id="readViewDemo_form" class="d-none">
    <input type="text" placeholder="Edit me" value="https://bruegmann.github.io/blue-web/" class="form-control" />
    <button type="submit" class="btn blue-btn-soft-secondary">Submit</button>
</form>

<script>
    readViewDemo_readView.addEventListener("EditRequested", () => {
        readViewDemo_readView.classList.add("d-none")
        readViewDemo_form.classList.remove("d-none")
    })

    readViewDemo_form.addEventListener("submit", (e) => {
        e.preventDefault()
        const input = readViewDemo_form.querySelector("input")
        readViewDemo_link.href = input.value
        readViewDemo_readView.classList.remove("d-none")
        readViewDemo_form.classList.add("d-none")
    })
</script>

Disabled

Link This one is disabled

Code

<read-view disabled>
    <a href="https://bruegmann.github.io/blue-web/" id="readViewDemo_link" target="_blank" rel="noopener noreferrer"
        >Link</a
    >
    This one is disabled
</read-view>

Edit post on GitHub