140 lines
5.0 KiB
HTML
140 lines
5.0 KiB
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 %}
|