9895fa1bba
changed in it the comments.html template (along with submission.html) has numerous undesirable properties which i will describe now. unless you are very familiar with the codebase, it can be extremely difficult to grok. this is pretty insane as there is nothing fundamentally complex about the goal of comments.html: return a component that shows a username and info, reports if any, comment content, and actions a user can take. this behemeoth was initially 886 lines in the old version of this codebase, and this is with awards and a lot of other cruft removed. anyway, the maintainability of this file is about on par with some legacy application that keels over and dies if you sneeze vaguely in its direction. the nicest thing i can say about it is that it isn't currently crashing. anyway some of the problems include: * large, splittable components, are not split into separate files. this makes it incredibly difficult to find or make changes across the template and makes it nearly impossible to find or change a specific thing. this is most easily exemplified in the modals, which should by all accounts be separate templates, just inlined into comments.html. * the nesting is oftentimes incorrect. inexplicably, probably out of laziness from when the code was first written, things will end up fully left aligned, while multiple layers deep into a nesting context. if an if statement or an endif is changed, it is *incredibly* difficult to figure out where the error was. you can't trust the nesting. * multiple repeated checks for things that are always true. this is probably a symptom of the above two problems but it's very noticeable once you fix the nesting. for example there is a block near the very top of the actions bar which checks for parent_submission which effectively checks "is this in a post" (this commit won't complain about parent_submission checks but i do have opinions on those). all of the action buttons further down the chain also check for parent_submission, or even check inconsistently (by using if c.post) within this context this is a completely unnecessary check in this context. while it is potentially useful (and in fact because #251 requires we dismantle the assumption a little bit) to have these checks now, the fact that they were initially added shows that when the code was all initial written, there was little care into thinking about comment state. * mobile actions are duplicated and duplicated inline. i actually do find it probably pretty hard to support this normally given the codebase's DOM so whatever, duplicate the things, *but* if we're going to do that, inlining it into the middle of an incredibly long template is really difficult to comprehend as a design decision. ...anyway yeah this PR intends to fix these problems and enable work to be done on #251. this is a "perfect is the enemy of good" commit. it doesn't change much fundamental and is not intended to erase the sins of the original file, but at least make it maintainable. this also fixes a minor bug with #473 where the GIF modal was left in by accident.
178 lines
8 KiB
HTML
178 lines
8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
{% include "analytics.html" %}
|
|
|
|
<meta name="description" content="{{config('DESCRIPTION')}}">
|
|
{% include "csp.html" %}
|
|
|
|
<script src="{{ 'js/bootstrap.js' | asset }}"></script>
|
|
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<meta name="author" content="">
|
|
<link rel="icon" type="image/png" href="{{ ('images/'~SITE_ID~'/icon.webp') | asset }}">
|
|
|
|
{% block title %}
|
|
<title>Create a post - {{SITE_TITLE}}</title>
|
|
{% endblock %}
|
|
|
|
|
|
{% block stylesheets %}
|
|
{% if v %}
|
|
<style>:root{--primary:#{{v.themecolor}}}</style>
|
|
<link rel="stylesheet" href="{{ 'css/main.css' | asset }}">
|
|
<link rel="stylesheet" href="{{ ('css/'~v.theme~'.css') | asset }}">
|
|
{% if v.css %}
|
|
<style>{{v.css | safe}}</style>
|
|
{% endif %}
|
|
{% else %}
|
|
<style>:root{--primary:#{{config('DEFAULT_COLOR')}}</style>
|
|
<link rel="stylesheet" href="{{ 'css/main.css' | asset }}">
|
|
<link rel="stylesheet" href="{{ ('css/'~config('DEFAULT_THEME')~'.css') | asset }}">
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
<body id="submit" {% if v and v.background %}style="overflow-x: hidden; background:url(/assets/images/backgrounds/{{v.background}}?v=3) center center fixed; background-color: var(--background)display: block{% if 'anime' not in v.background %};background-size: cover{% endif %}"{% endif %}>
|
|
|
|
{% include "header.html" %}
|
|
|
|
{% block form %}
|
|
|
|
|
|
<div class="submit-grid-view">
|
|
<form id="submitform" action="{% if sub %}/h/{{sub.name}}{% endif %}/submit" method="post" enctype="multipart/form-data" style="grid-column: 2">
|
|
|
|
<div class="container">
|
|
|
|
<div class="row justify-content-center mb-5">
|
|
|
|
<div class="col p-3 py-md-0">
|
|
|
|
<h2 class="mt-3">Create a post</h2>
|
|
|
|
<div class="body">
|
|
|
|
<input type="hidden" name="formkey" value="{{v.formkey}}">
|
|
|
|
<label class='mt-4' for="title">Post Title</label>
|
|
|
|
|
|
<input autocomplete="off" class="form-control" id="post-title" aria-describedby="titleHelpRegister" type="text" name="title" placeholder="Required" value="{{title}}" minlength="1" maxlength="500" required oninput="checkForRequired();savetext()">
|
|
|
|
<div id="urlblock">
|
|
<label for="URL" class="mt-3">URL</label>
|
|
<input autocomplete="off" class="form-control" id="post-url" aria-describedby="URLHelp" name="url" type="url" placeholder="Optional if you have text." value="{{request.values.get('url','')}}" maxlength="2048" required oninput="checkForRequired();hide_image();savetext();checkRepost(this);autoSuggestTitle()">
|
|
<small id="system" class="form-text text-muted">To post an image, use a direct image link such as i.imgur.com</small>
|
|
</div>
|
|
<div id="image-upload-block">
|
|
<div><label class="mt-3">Attachment Upload</label></div>
|
|
|
|
<img loading="lazy" id="image-preview" style="max-width:50%">
|
|
<label class="btn btn-secondary m-0" for="file-upload">
|
|
<div id="filename-show">Select File</div>
|
|
<input autocomplete="off" id="file-upload" type="file" name="file" {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} accept="image/*" hidden>
|
|
</label>
|
|
<small class="form-text text-muted">Optional if you have text.</small>
|
|
<small class="form-text text-muted">You can upload images or videos up to 60 seconds.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<label for="body" class="mt-3">Text<i class="fas fa-info-circle text-gray-400 ml-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Uses markdown. Limited to {{SUBMISSION_BODY_LENGTH_MAXIMUM}} characters."></i></label>
|
|
|
|
<div>
|
|
<textarea form="submitform" id="post-text" class="form-control rounded" aria-label="With textarea" placeholder="Optional if you have a link or an image." rows="7" name="body" oninput="markdown('post-text','preview');charLimit('post-text','character-count-submit-text-form');checkForRequired();savetext()" maxlength="{{SUBMISSION_BODY_LENGTH_MAXIMUM}}" required></textarea>
|
|
|
|
<div class="btn btn-secondary fl-r mt-3" onclick="document.getElementById('preview').classList.toggle('d-none');">
|
|
Toggle preview
|
|
</div>
|
|
|
|
<div class="text-small font-weight-bold mt-1" id="character-count-submit-text-form" style="right: 1rem; bottom: 0.5rem; z-index: 3;"></div>
|
|
|
|
</div>
|
|
|
|
<p></p>
|
|
<small class="btn btn-secondary format d-inline-block m-0" onclick="makeBold('post-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Bold">
|
|
<i class="fas fa-bold" aria-hidden="true"></i>
|
|
</small>
|
|
|
|
<small class="btn btn-secondary format d-inline-block m-0" onclick="makeItalics('post-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Italicize">
|
|
<i class="fas fa-italic" aria-hidden="true"></i>
|
|
</small>
|
|
|
|
<small class="btn btn-secondary format d-inline-block m-0" onclick="makeQuote('post-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Quote">
|
|
<i class="fas fa-quote-right" aria-hidden="true"></i>
|
|
</small>
|
|
|
|
|
|
<label class="format btn btn-secondary m-0 ml-1 {% if v %}d-inline-block{% else %}d-none{% endif %}" for="file-upload-submit">
|
|
<div id="filename-show-submit"><i class="far fa-image"></i></div>
|
|
<input autocomplete="off" id="file-upload-submit" multiple="multiple" type="file" name="file2" accept="image/*" {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} onchange="changename('filename-show-submit','file-upload-submit');checkForRequired()" hidden>
|
|
</label>
|
|
|
|
<div id="preview" class="preview my-3"></div>
|
|
|
|
<pre></pre>
|
|
<div class="form-text text-small"><a href="/formatting" {% if v and v.newtab and not g.webview %}target="_blank"{% endif %}>Formatting help</a></div>
|
|
<pre></pre>
|
|
|
|
<div class="custom-control custom-checkbox">
|
|
<input checked autocomplete="off" type="checkbox" class="custom-control-input" id="followers" name="followers">
|
|
<label class="custom-control-label" for="followers">Notify followers</label>
|
|
</div>
|
|
|
|
<div class="custom-control custom-checkbox">
|
|
<input autocomplete="off" type="checkbox" class="custom-control-input" id="nsfw" name="over_18">
|
|
<label class="custom-control-label" for="nsfw">+18</label>
|
|
</div>
|
|
<div class="custom-control custom-checkbox">
|
|
<input onchange='draft(this);' autocomplete="off" type="checkbox" class="custom-control-input" id="private" name="private">
|
|
<label class="custom-control-label" for="private">Draft</label>
|
|
</div>
|
|
|
|
<pre>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</pre>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="row fixed-bottom bg-white border-top p-3" id="" style="z-index: 100; bottom: 0px; transition: bottom 220ms cubic-bezier(0, 0, 0.2, 1) 0s;">
|
|
<div class="col">
|
|
<a href="/" class="btn btn-secondary">Cancel</a>
|
|
</div>
|
|
<div class="col text-right">
|
|
{% if error %}<span class="text-danger text-large mr-2">{{error}}</span>{% endif %}
|
|
<button class="btn btn-primary" id="create_button" type="submit" disabled>Post</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% if request.path == '/submit' %}
|
|
<script>
|
|
let sub = document.getElementById('sub')
|
|
if (sub) sub.value = localStorage.getItem("sub")
|
|
</script>
|
|
{% endif %}
|
|
|
|
<script src="{{ 'js/vendor/purify.min.js' | asset }}"></script>
|
|
<script src="{{ 'js/vendor/marked.min.js' | asset }}"></script>
|
|
<script src="{{ 'js/marked.custom.js' | asset }}"></script>
|
|
<script src="{{ 'js/formatting.js' | asset }}"></script>
|
|
<script src="{{ 'js/submit.js' | asset }}"></script>
|
|
</body>
|
|
</html>
|