WhisperMaPhone/thoughts/templates/thoughts/post.html

{% extends "thoughts/page.html" %}
{% load static %}

{% block title %}Post{% endblock %}

{% block head %}
<link href="{% static 'thoughts/post.css' %}" rel="stylesheet">
{% endblock %}

{% block navigation %}
    <a  class="text" href="/">Thoughts</a>
    <a  class="text" href="/about">About</a>
    <h1 class="text" aria-current="page">Post</h1>
{% endblock %}

{% block main %}
<form action="" method="post" enctype="multipart/form-data" id="post-form">
    <div class="error">{{ form_error }}</div>

    {% csrf_token %}
    {{ form.text }}
    {{ form.extended_text }}

    {{ form.timezone_offset }}

    <div class="media-wrapper">
        {{ form.media }}
        {{ form.media_alt }}
    </div>

    <input type="submit" id="post-button" value="{% if editing %}Update{% else %}Submit{% endif %}">
    {{ form.submit }}
</form>

{% endblock %}

{% block scripts %}
<script>
    const textEl = document.getElementById("id_text");
    const textExtEl = document.getElementById("id_extended_text");

    function updateBoxHeight(box) {
        // Save scroll position
        const scrollY = window.scrollY;
        //style.height doesn't include padding, .scrollHeight does
        box.style.height = "auto";
        // Set overflow hidden to ensure scrollbars aren't shown, since they change the width and thus the height
        box.style.overflow = "hidden";
        box.style.height = box.scrollHeight + "px";
        //Restore scroll position
        window.scrollTo(0, scrollY);
    }

    // If we're handling maxlength in JS, then having the maxlength attribute is annoying
    // We could (should?) also leave the property on there and then add a keydown
    //      listener when you're at 140 characters, but this is easier
    textEl.removeAttribute("maxlength");
    textEl.addEventListener("input", evt => {
        // If the length is more than 140
        const value = textEl.value;
        if (value.length > 140) {
            const splitAt = value.lastIndexOf(" ", 140) + 1; // Plus 1 keeps the space in the original text instead of moving it
            const toMove = value.substring(splitAt);
            const startPos = textEl.selectionStart;
            const endPos = textEl.selectionEnd;
            textEl.value = value.substring(0, splitAt - 1); //Remove word and space from original

            // Only move down if we're at the end of the first box
            if (startPos === 141 && endPos === 141) {
                textExtEl.value = toMove + textExtEl.value;

                // Place the cursor at the end of what we just moved down
                textExtEl.focus();
                textExtEl.selectionStart = toMove.length;
                textExtEl.selectionEnd = toMove.length;
            }else {
                // Move the last word down, adding a space
                textExtEl.value = toMove + " " + textExtEl.value;

                // Move cursor back to where it was
                textEl.selectionStart = startPos;
                textEl.selectionEnd = endPos;
            }

            //Resize both text boxes
            updateBoxHeight(textExtEl);
            updateBoxHeight(textEl);
        }
    });

    const mediaInput = document.getElementById("id_media");
    const mediaAlt = document.getElementById("id_media_alt");
    const clearCheckbox = document.getElementById("media-clear_id");

    function updateMediaAlt() {
        // If we're editing and there was a file, then there will be a Clear button we can check for
        if (mediaInput.value || (clearCheckbox && !clearCheckbox.checked)) {
            mediaAlt.classList.remove("hidden");
        }else {
            mediaAlt.classList.add("hidden");
        }
        updateBoxHeight(mediaAlt);
    }
    mediaAlt.addEventListener("input", () => {
        updateBoxHeight(mediaAlt);
    });
    mediaInput.addEventListener("input", updateMediaAlt);
    if (clearCheckbox) {
        clearCheckbox.addEventListener("change", updateMediaAlt);
    }
    updateMediaAlt();

    const textboxes = document.getElementsByClassName("thought");
    for (const box of textboxes) {
        // Set the initial heights of the boxes
        updateBoxHeight(box);
        box.addEventListener("input", evt => updateBoxHeight(box));

        // Allow pasting images into either text box
        box.addEventListener("paste", evt => {
            const files = evt.clipboardData.files;
            // We can only use the first image from the pasteboard
            if (files && files.length > 0) {
                // This seems to only allow entry of a single file
                mediaInput.files = files;
                updateMediaAlt();
            }
        });
    }

    const timezoneOffsetEl = document.getElementById("id_timezone_offset");
    timezoneOffsetEl.setAttribute("type", "hidden");
    // The text box needs to be in hours, UTC offset (e.g. -8)
    // .getTimezoneOffset() returns minutes behind UTC
    {% if not editing %}
    timezoneOffsetEl.value = -(new Date()).getTimezoneOffset() / 60;
    {% endif %}
</script>
{% endblock %}