WhisperMaPhone/main/templates/whispermaphone/post.html

94 lines
3.7 KiB
HTML
Raw Normal View History

{% extends "whispermaphone/page.html" %}
{% load static %}
2020-09-06 16:39:00 +00:00
{% block title %}Post{% endblock %}
2020-09-06 16:39:00 +00:00
{% block head %}
<link href="{% static 'main/post.css' %}" rel="stylesheet">
{% endblock %}
2020-09-06 03:12:54 +00:00
{% block navigation %}
<a href="/" class="text" style="border: none">Thoughts</a>
2021-04-20 16:10:45 +00:00
<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">
2020-10-05 17:22:12 +00:00
{% 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>
2020-10-05 17:22:12 +00:00
<input type="hidden" name="timezone_offset" id="timezone_offset">
<input type="file" name="media" id="media"><br>
2020-09-06 03:38:15 +00:00
2020-10-05 17:22:12 +00:00
<input type="submit" id="post-button" value="Submit">
</form>
{% endblock %}
2020-09-06 03:12:54 +00:00
{% block scripts %}
2020-09-06 04:06:16 +00:00
<script>
const textEl = document.getElementById("text");
const textExtEl = document.getElementById("extended_text");
textEl.addEventListener("input", evt => {
2021-05-03 06:00:50 +00:00
// If the length is more than 140
2020-09-06 04:06:16 +00:00
const value = textEl.value;
2020-09-06 04:12:14 +00:00
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;
}
2020-09-06 04:06:16 +00:00
}
// TODO: Auto-set width of short text box
//textEl.style.width = "auto";
//textEl.style.width = textEl.scrollWidth + "px";
2020-09-06 04:06:16 +00:00
});
2020-09-06 03:38:15 +00:00
const textboxes = document.getElementsByClassName("thought");
for (const box of textboxes) {
//style.height doesn't include padding, .scrollHeight does
//This is fine as long as we reset scrollHeight before changing it
//And we have to set it this first time
//This also effectively doubles the padding value we set in CSS
box.style.height = box.scrollHeight + "px";
box.addEventListener("input", evt => {
box.style.height = "auto";
box.style.height = box.scrollHeight + "px";
});
2021-05-03 06:00:50 +00:00
//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;
}
});
}
2020-09-06 04:06:16 +00:00
const timezoneOffsetEl = document.getElementById("timezone_offset");
timezoneOffsetEl.value = (new Date()).getTimezoneOffset();
</script>
{% endblock %}