image_detail.html

{{define "title"}}{{.Image.Title}} | i.k8r{{end}}
{{define "content"}}
<div class="detailpage">
    <div class="detail">
    {{if .IsMine}}
        <h2 class="title fake-input" contenteditable="true" placeholder="Title">{{.Image.Title}}</h2>
    {{else}}
        <h2 class="title">{{.Image.Title}}</h2>
    {{end}}
        <a class="image" href="/{{.Image.Id}}">
            <img src="/{{.Image.Id}}">
        </a>
    {{if .IsMine}}
        <p class="description fake-input" contenteditable="true" placeholder="Description"
           data-multiline>{{.Image.Description}}</p>
    {{else}}
        <div class="description">{{.Image.Description}}</div>
    {{end}}
    </div>
    <div class="sidebar">
    {{if .IsMine}}
        <div class="actions">
            <form class="delete-form" method="post">
                <input type="hidden" name="action" value="delete">
                <input type="hidden" name="id" value="{{.Image.Id}}">
                <input type="submit" value="Delete">
            </form>
            <form class="update-form" method="post">
                <input type="hidden" name="action" value="update">
                <input type="hidden" name="id" value="{{.Image.Id}}">
                <input type="hidden" name="title" value="{{.Image.Title}}">
                <input type="hidden" name="description" value="{{.Image.Description}}">
                <input type="submit" value="Save">
            </form>
        </div>
    {{end}}
        <div class="url">
            <p>Detail Page</p>
            <div>
                <input id="url_full" type="text" value="https://i.k8r.eu/i/{{.Image.Id}}">
                <button class="copy" data-target="#url_full">Copy</button>
            </div>
        </div>
        <div class="url">
            <p>Direct Link</p>
            <div>
                <input id="url_direct" type="text" value="https://i.k8r.eu/{{.Image.Id}}">
                <button class="copy" data-target="#url_direct">Copy</button>
            </div>
        </div>
    </div>
</div>
<script>
    Array.prototype.slice.call(document.querySelectorAll("button.copy[data-target]")).forEach((button) => {
        const target = document.querySelector(button.dataset["target"]);
        if (target) {
            button.addEventListener("click", () => {
                target.select();
                document.execCommand("Copy");
            })
        }
    });
</script>
{{if .IsMine}}
<script>
    const fakeTitle = document.querySelector(".title.fake-input[contenteditable]");
    const fakeDescription = document.querySelector(".description.fake-input[contenteditable]");

    const actualTitle = document.querySelector(".update-form input[name=title]");
    const actualDescription = document.querySelector(".update-form input[name=description]");

    const fakeTitleListener = (event) => {
        requestAnimationFrame(() => {
            document.title = event.target.innerText + " | i.k8r";
            actualTitle.value = fakeTitle.innerText;
        })

    };
    const fakeDescriptionListener = (event) => {
        requestAnimationFrame(() => {
            actualDescription.value = fakeDescription.innerText;
        })

    };

    // Insert <br> between lines instead of \n for editing
    fakeDescription.innerHTML = "";
    actualDescription.value.split("\n").forEach((line) => {
        const textNode = document.createTextNode(line);
        const brNode = document.createElement("br");
        fakeDescription.appendChild(textNode);
        fakeDescription.appendChild(brNode);
    });
    fakeDescription.removeChild(fakeDescription.lastChild);

    fakeTitle.addEventListener("input", fakeTitleListener);
    fakeTitle.addEventListener("keypress", fakeTitleListener);

    fakeDescription.addEventListener("input", fakeDescriptionListener);
    fakeDescription.addEventListener("keypress", fakeDescriptionListener);
</script>
{{end}}
{{end}}