Read View

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

<bl-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
</bl-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

<bl-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
</bl-read-view>

Grab the code

When you don't use the entire Blue Web library, you can also just copy and paste the required code into your own project.

Copy and paste the following code into your project. Source: @/src/js/read-view.ts

Edit post on GitHub