109 lines
4.0 KiB
HTML
109 lines
4.0 KiB
HTML
{% extends "whispermaphone/page.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}Post{% endblock %}
|
|
|
|
{% block head %}
|
|
<link href="{% static 'main/post.css' %}" rel="stylesheet">
|
|
{% endblock %}
|
|
|
|
{% block navigation %}
|
|
<a href="/" class="text" style="border: none">Thoughts</a>
|
|
<a href="/about" class="text" style="border: none">About</a>
|
|
<h1 class="text">Post</h1>
|
|
{% endblock %}
|
|
|
|
{% block main %}
|
|
<form action="{% url 'post'%}" method="post" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
<textarea name="text" id="text" class="thought" rows="1" placeholder="What are you thinking?"></textarea>
|
|
<textarea name="extended_text" id="extended_text" class="thought" rows="2" placeholder="Anything else?"></textarea>
|
|
<input type="hidden" name="timezone_offset" id="timezone_offset">
|
|
<input type="file" name="media" id="media"><br>
|
|
|
|
<input type="submit" id="post-button" value="Submit">
|
|
</form>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
const textEl = document.getElementById("text");
|
|
const textExtEl = document.getElementById("extended_text");
|
|
|
|
function updateBoxHeight(box) {
|
|
const rows = box.rows;
|
|
box.rows = 1;
|
|
|
|
//style.height doesn't include padding, .scrollHeight does
|
|
box.style.height = "auto";
|
|
const height = box.scrollHeight;
|
|
|
|
if (rows > 1 && height < 36) {
|
|
//set the rows back to 2, set the height to the height, and set top margin
|
|
box.style.height = height + "px";
|
|
box.rows = rows;
|
|
box.style.marginTop = "15px";
|
|
}else {
|
|
box.style.height = height + "px";
|
|
box.rows = rows;
|
|
box.style.marginTop = "0";
|
|
}
|
|
}
|
|
|
|
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
|
|
console.log(startPos, endPos);
|
|
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;
|
|
}
|
|
}
|
|
|
|
// TODO: Auto-set width of short text box
|
|
//textEl.style.width = "auto";
|
|
//textEl.style.width = textEl.scrollWidth + "px";
|
|
});
|
|
|
|
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
|
|
const el = document.getElementById("media");
|
|
el.files = files;
|
|
}
|
|
});
|
|
}
|
|
|
|
const timezoneOffsetEl = document.getElementById("timezone_offset");
|
|
timezoneOffsetEl.value = (new Date()).getTimezoneOffset();
|
|
</script>
|
|
{% endblock %}
|