rDrama
/
rDrama
9
10
Fork 7
Code Issues Pull Requests Packages Releases Wiki Activity

fdfd

remotes/1693045480750635534/spooky-22
Aevann1 2021-08-22 19:00:07 +02:00
parent b2c7a14bd9
commit 8aee250116
10 changed files with 1910 additions and 1910 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
files/templates/authforms.html
View File

@ -124,4 +124,4 @@
</body> </body>
</html </html>

2338
files/templates/default.html
View File

File diff suppressed because it is too large Load Diff

300
files/templates/formatting.html
View File

@ -1,150 +1,150 @@
{% extends "default.html" %} {% extends "default.html" %}
{% block title %} {% block title %}
<title>{{'SITE_NAME' | app_config}} - Formatting</title> <title>{{'SITE_NAME' | app_config}} - Formatting</title>
<meta name="description" content="{{'SITE_NAME' | app_config}} Formatting"> <meta name="description" content="{{'SITE_NAME' | app_config}} Formatting">
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<pre> <pre>
</pre> </pre>
{% filter markdown %} {% filter markdown %}
# Formatting # Formatting
On {{'SITE_NAME' | app_config}}, you can use Markdown formatting. On {{'SITE_NAME' | app_config}}, you can use Markdown formatting.
## Inline formatting ## Inline formatting
{% endfilter %} {% endfilter %}
<table class="table table-striped mb-5"> <table class="table table-striped mb-5">
<thead class="bg-primary text-white"> <thead class="bg-primary text-white">
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Displays as</th> <th>Displays as</th>
</tr> </tr>
</thead> </thead>
<tr> <tr>
<td>Italics</td> <td>Italics</td>
<td>*text*</td> <td>*text*</td>
<td><i>text</i></td> <td><i>text</i></td>
</tr> </tr>
<tr> <tr>
<td>Bold</td> <td>Bold</td>
<td>**text**</td> <td>**text**</td>
<td><b>text</b></td> <td><b>text</b></td>
</tr> </tr>
<tr> <tr>
<td>Code</td> <td>Code</td>
<td>`text`</td> <td>`text`</td>
<td><code>text</code></td> <td><code>text</code></td>
</tr> </tr>
<tr> <tr>
<td>Strikethrough</td> <td>Strikethrough</td>
<td>~~text~~</td> <td>~~text~~</td>
<td><del>text</del></td> <td><del>text</del></td>
</tr> </tr>
<tr> <tr>
<td>Links</td> <td>Links</td>
<td>[{{'SITE_NAME' | app_config}}]({{request.host_url}})</td> <td>[{{'SITE_NAME' | app_config}}]({{request.host_url}})</td>
<td><a href="{{request.host_url}}">{{'SITE_NAME' | app_config}}</a></td> <td><a href="{{request.host_url}}">{{'SITE_NAME' | app_config}}</a></td>
</tr> </tr>
<tr> <tr>
<td>Emojis</td> <td>Emojis</td>
<td>:marseylove:</td> <td>:marseylove:</td>
<td><img data-toggle="tooltip" title="marseylove" delay="0" height="20" src="/assets/images/emojis/marseylove.gif"></td> <td><img data-toggle="tooltip" title="marseylove" delay="0" height="20" src="/assets/images/emojis/marseylove.gif"></td>
</tr> </tr>
</table> </table>
{% filter markdown %} {% filter markdown %}
## Block formatting ## Block formatting
These Markdown tags format an entire paragraph of text at a time. These Markdown tags format an entire paragraph of text at a time.
<table class="table table-striped mb-5"> <table class="table table-striped mb-5">
<thead class="bg-primary text-white"> <thead class="bg-primary text-white">
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Displays as</th> <th>Displays as</th>
</tr> </tr>
</thead> </thead>
<tr> <tr>
<td>Blockquote</td> <td>Blockquote</td>
<td>&gt; text</td> <td>&gt; text</td>
<td><blockquote>text</blockquote></td> <td><blockquote>text</blockquote></td>
</tr> </tr>
<tr> <tr>
<td>Headers 1-6</td> <td>Headers 1-6</td>
<td># Header 1<br>## Header 2<br>### Header 3<br>#### Header 4<br>##### Header 5<br>###### Header 6</td> <td># Header 1<br>## Header 2<br>### Header 3<br>#### Header 4<br>##### Header 5<br>###### Header 6</td>
<td><h1>Header 1</h1><h2>Header 2</h2><h3>Header 3</h3><h4>Header 4</h4><h5>Header 5</h5><h6>Header 6</h6></td> <td><h1>Header 1</h1><h2>Header 2</h2><h3>Header 3</h3><h4>Header 4</h4><h5>Header 5</h5><h6>Header 6</h6></td>
</tr> </tr>
<tr> <tr>
<td>Ordered list</td> <td>Ordered list</td>
<td>1. First thing<br>2. Second thing</td> <td>1. First thing<br>2. Second thing</td>
<td><ol><li>First thing</li><li>Second thing</li></ol></td> <td><ol><li>First thing</li><li>Second thing</li></ol></td>
</tr> </tr>
<tr> <tr>
<td>Unordered list</td> <td>Unordered list</td>
<td>* First thing<br>* Second thing</td> <td>* First thing<br>* Second thing</td>
<td><ul><li>First thing</li><li>Second thing</li></ul></td> <td><ul><li>First thing</li><li>Second thing</li></ul></td>
</tr> </tr>
<tr> <tr>
<td>Code Block</td> <td>Code Block</td>
<td>```<br>Use three backticks above and below.<br>Or, indent the lines with four spaces.<br>```</td> <td>```<br>Use three backticks above and below.<br>Or, indent the lines with four spaces.<br>```</td>
<td> <td>
</tr> </tr>
<tr> <tr>
<td>Spoilers</td> <td>Spoilers</td>
<td>&lt;s&gt; bussy > gussy &lt;/s&gt;</td> <td>&lt;s&gt; bussy > gussy &lt;/s&gt;</td>
<td><p class="spoiler">bussy > gussy</p></td> <td><p class="spoiler">bussy > gussy</p></td>
<pre> <pre>
Use three backticks above and below. Use three backticks above and below.
Or, indent the lines with four spaces. Or, indent the lines with four spaces.
</pre> </pre>
</td> </td>
</tr> </tr>
</table> </table>
## Custom Formatting ## Custom Formatting
We also have some custom hooks for mentioning users and subreddits. Note that these only work if the mentioned user or subreddit actually exists. We also have some custom hooks for mentioning users and subreddits. Note that these only work if the mentioned user or subreddit actually exists.
{% endfilter %} {% endfilter %}
<table class="table table-striped mb-5"> <table class="table table-striped mb-5">
<thead class="bg-primary text-white"> <thead class="bg-primary text-white">
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Displays as</th> <th>Displays as</th>
</tr> </tr>
</thead> </thead>
<tr> <tr>
<td>Username Mention</td> <td>Username Mention</td>
<td>@QuadNarca</td> <td>@QuadNarca</td>
<td><a class="d-inline-block" href="/@QuadNarca"><img src="/@QuadNarca/pic/profile" class="profile-pic-20 mr-1">@QuadNarca</a></td> <td><a class="d-inline-block" href="/@QuadNarca"><img src="/@QuadNarca/pic/profile" class="profile-pic-20 mr-1">@QuadNarca</a></td>
</tr> </tr>
<tr> <tr>
<td>Subreddit Mention</td> <td>Subreddit Mention</td>
<td>r/{{'SITE_NAME' | app_config}}</td> <td>r/{{'SITE_NAME' | app_config}}</td>
<td><a class="d-inline-block" href="https://www.reddit.com/r/{{'SITE_NAME' | app_config}}/">r/{{'SITE_NAME' | app_config}}</a></td> <td><a class="d-inline-block" href="https://www.reddit.com/r/{{'SITE_NAME' | app_config}}/">r/{{'SITE_NAME' | app_config}}</a></td>
</tr> </tr>
<tr> <tr>
<td>Redditor Mention</td> <td>Redditor Mention</td>
<td>u/Bardfinn</td> <td>u/Bardfinn</td>
<td><a class="d-inline-block" href="https://www.reddit.com/u/Bardfinn/">u/Bardfinn</a></td> <td><a class="d-inline-block" href="https://www.reddit.com/u/Bardfinn/">u/Bardfinn</a></td>
</tr> </tr>
</table> </table>
{% include "expanded_image_modal.html" %} {% include "expanded_image_modal.html" %}
{% include "expanded_video_modal.html" %} {% include "expanded_video_modal.html" %}
<script src="/assets/js/js.js"></script> <script src="/assets/js/js.js"></script>
{% endblock %} {% endblock %}

2
files/templates/login.html
View File

@ -134,4 +134,4 @@
</body> </body>
</html> </html>

238
files/templates/login_2fa.html
View File

@ -1,119 +1,119 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Sign in to {{'SITE_NAME' | app_config}}"> <meta name="description" content="Sign in to {{'SITE_NAME' | app_config}}">
<meta name="author" content=""> <meta name="author" content="">
<title>2-Step Login - {{'SITE_NAME' | app_config}}</title> <title>2-Step Login - {{'SITE_NAME' | app_config}}</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font Awesome --> <!-- Font Awesome -->
<link href="/assets/fontawesome/css/all.css" rel="stylesheet"> <!--load all styles --> <link href="/assets/fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->
<script data-search-pseudo-elements defer src="https://use.fontawesome.com/releases/latest/js/js.js" <script data-search-pseudo-elements defer src="https://use.fontawesome.com/releases/latest/js/js.js"
integrity="sha384-L469/ELG4Bg9sDQbl0hvjMq8pOcqFgkSpwhwnslzvVVGpDjYJ6wJJyYjvG3u8XW7" integrity="sha384-L469/ELG4Bg9sDQbl0hvjMq8pOcqFgkSpwhwnslzvVVGpDjYJ6wJJyYjvG3u8XW7"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<!-- {{'SITE_NAME' | app_config}} CSS --> <!-- {{'SITE_NAME' | app_config}} CSS -->
<link rel="stylesheet" href="/assets/style/{{'DEFAULT_THEME' | app_config}}.css"> <link rel="stylesheet" href="/assets/style/{{'DEFAULT_THEME' | app_config}}.css">
</head> </head>
<body id="login"> <body id="login">
<!-- Navigation --> <!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent fixed-top border-0"> <nav class="navbar navbar-expand-lg navbar-dark bg-transparent fixed-top border-0">
<div class="container-fluid"> <div class="container-fluid">
<button class="navbar-toggler d-none" type="button" data-toggle="collapse" data-target="#navbarResponsive" <button class="navbar-toggler d-none" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
</div> </div>
</nav> </nav>
<!-- Page Content --> <!-- Page Content -->
<div class="container-fluid position-absolute h-100 p-0 overflow-auto"> <div class="container-fluid position-absolute h-100 p-0 overflow-auto">
<div class="row no-gutters h-100"> <div class="row no-gutters h-100">
<div class="col-12 col-md-6 my-auto p-3"> <div class="col-12 col-md-6 my-auto p-3">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-10 col-md-7"> <div class="col-10 col-md-7">
<div class="mb-5"> <div class="mb-5">
<a href="/" class="text-decoration-none"><span class="h3 text-primary">{{'SITE_NAME' | app_config}}</span></a> <a href="/" class="text-decoration-none"><span class="h3 text-primary">{{'SITE_NAME' | app_config}}</span></a>
</div> </div>
<div id="login-form" class=""> <div id="login-form" class="">
<h1 class="h2">Two-step login</h1> <h1 class="h2">Two-step login</h1>
<p class="text-muted mb-md-5">To login, please enter the 6-digit verification code generated in your authenticator app.</p> <p class="text-muted mb-md-5">To login, please enter the 6-digit verification code generated in your authenticator app.</p>
{% if failed %} {% if failed %}
<div class="alert alert-danger alert-dismissible fade show d-flex my-3" role="alert"> <div class="alert alert-danger alert-dismissible fade show d-flex my-3" role="alert">
<i class="fas fa-exclamation-circle my-auto"></i> <i class="fas fa-exclamation-circle my-auto"></i>
<div> <div>
Invalid verification code. Please try again. Invalid verification code. Please try again.
</div> </div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
{% endif %} {% endif %}
<form action="/login" method="post" class="mt-md-3" id="login"> <form action="/login" method="post" class="mt-md-3" id="login">
<input type="hidden" name="username" value="{{v.username}}"> <input type="hidden" name="username" value="{{v.username}}">
<input type="hidden" name="redirect" value="{{redirect}}"> <input type="hidden" name="redirect" value="{{redirect}}">
<input type="hidden" name="time" value="{{time}}"> <input type="hidden" name="time" value="{{time}}">
<input type="hidden" name="hash" value="{{hash}}"> <input type="hidden" name="hash" value="{{hash}}">
<label for="2fa_token" class="mt-3">Your verification code</label> <label for="2fa_token" class="mt-3">Your verification code</label>
<input class="form-control" id="2fa_token" name="2fa_token" type="text" placeholder="6-digit code"> <input class="form-control" id="2fa_token" name="2fa_token" type="text" placeholder="6-digit code">
<small><a href="/lost_2fa">Lost your 2FA device?</a></small> <small><a href="/lost_2fa">Lost your 2FA device?</a></small>
<button class="btn btn-primary login w-100 mt-3" id="login_button">Sign in</button> <button class="btn btn-primary login w-100 mt-3" id="login_button">Sign in</button>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 col-md-6 d-none d-md-block"> <div class="col-12 col-md-6 d-none d-md-block">
<div class="splash-wrapper"> <div class="splash-wrapper">
<div class="splash-overlay"></div> <div class="splash-overlay"></div>
<img class="splash-img" src="/assets/images/{{'SITE_NAME' | app_config}}/cover.gif"></img> <img class="splash-img" src="/assets/images/{{'SITE_NAME' | app_config}}/cover.gif"></img>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

2
files/templates/settings.html
View File

@ -260,4 +260,4 @@
</body> </body>
</html </html>

2
files/templates/settings2.html
View File

@ -233,4 +233,4 @@
</body> </body>
</html </html>

2
files/templates/sign_up.html
View File

@ -229,4 +229,4 @@
</body> </body>
</html> </html>

2
files/templates/sign_up_failed_ref.html
View File

@ -148,4 +148,4 @@
</body> </body>
</html> </html>

932
files/templates/submit.html
View File

@ -1,466 +1,466 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
{% include "bootstrap.html" %} {% include "bootstrap.html" %}
<script> <script>
$(document).ready(function() { $(document).ready(function() {
$('#submitform').submit(function() { $('#submitform').submit(function() {
// disable button // disable button
$("#create_button").prop("disabled", true); $("#create_button").prop("disabled", true);
// add spinner to button // add spinner to button
$("#create_button").html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Creating post'); $("#create_button").html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Creating post');
}); });
}); });
// Text Formatting // Text Formatting
// Bold Text // Bold Text
makeBold = function (form) { makeBold = function (form) {
var text = document.getElementById(form); var text = document.getElementById(form);
var startIndex = text.selectionStart, var startIndex = text.selectionStart,
endIndex = text.selectionEnd; endIndex = text.selectionEnd;
var selectedText = text.value.substring(startIndex, endIndex); var selectedText = text.value.substring(startIndex, endIndex);
var format = '**' var format = '**'
if (selectedText.includes('**')) { if (selectedText.includes('**')) {
text.value = selectedText.replace(/\*/g, ''); text.value = selectedText.replace(/\*/g, '');
} }
else if (selectedText.length == 0) { else if (selectedText.length == 0) {
text.value = text.value.substring(0, startIndex) + selectedText + text.value.substring(endIndex); text.value = text.value.substring(0, startIndex) + selectedText + text.value.substring(endIndex);
} }
else { else {
text.value = text.value.substring(0, startIndex) + format + selectedText + format + text.value.substring(endIndex); text.value = text.value.substring(0, startIndex) + format + selectedText + format + text.value.substring(endIndex);
} }
} }
// Italicize Comment Text // Italicize Comment Text
makeItalics = function (form) { makeItalics = function (form) {
var text = document.getElementById(form); var text = document.getElementById(form);
var startIndex = text.selectionStart, var startIndex = text.selectionStart,
endIndex = text.selectionEnd; endIndex = text.selectionEnd;
var selectedText = text.value.substring(startIndex, endIndex); var selectedText = text.value.substring(startIndex, endIndex);
var format = '*' var format = '*'
if (selectedText.includes('*')) { if (selectedText.includes('*')) {
text.value = selectedText.replace(/\*/g, ''); text.value = selectedText.replace(/\*/g, '');
} }
else if (selectedText.length == 0) { else if (selectedText.length == 0) {
text.value = text.value.substring(0, startIndex) + selectedText + text.value.substring(endIndex); text.value = text.value.substring(0, startIndex) + selectedText + text.value.substring(endIndex);
} }
else { else {
text.value = text.value.substring(0, startIndex) + format + selectedText + format + text.value.substring(endIndex); text.value = text.value.substring(0, startIndex) + format + selectedText + format + text.value.substring(endIndex);
} }
} }
// Quote Comment Text // Quote Comment Text
makeQuote = function (form) { makeQuote = function (form) {
var text = document.getElementById(form); var text = document.getElementById(form);
var startIndex = text.selectionStart, var startIndex = text.selectionStart,
endIndex = text.selectionEnd; endIndex = text.selectionEnd;
var selectedText = text.value.substring(startIndex, endIndex); var selectedText = text.value.substring(startIndex, endIndex);
var format = '>' var format = '>'
if (selectedText.includes('>')) { if (selectedText.includes('>')) {
text.value = text.value.substring(0, startIndex) + selectedText.replace(/\>/g, '') + text.value.substring(endIndex); text.value = text.value.substring(0, startIndex) + selectedText.replace(/\>/g, '') + text.value.substring(endIndex);
} }
else if (selectedText.length == 0) { else if (selectedText.length == 0) {
text.value = text.value.substring(0, startIndex) + selectedText + text.value.substring(endIndex); text.value = text.value.substring(0, startIndex) + selectedText + text.value.substring(endIndex);
} }
else { else {
text.value = text.value.substring(0, startIndex) + format + selectedText + text.value.substring(endIndex); text.value = text.value.substring(0, startIndex) + format + selectedText + text.value.substring(endIndex);
} }
} }
// Character Count // Character Count
function charLimit(form, text) { function charLimit(form, text) {
var input = document.getElementById(form); var input = document.getElementById(form);
var text = document.getElementById(text); var text = document.getElementById(text);
var length = input.value.length; var length = input.value.length;
var maxLength = input.getAttribute("maxlength"); var maxLength = input.getAttribute("maxlength");
if (length >= maxLength) { if (length >= maxLength) {
text.style.color = "#E53E3E"; text.style.color = "#E53E3E";
} }
else if (length >= maxLength * .72){ else if (length >= maxLength * .72){
text.style.color = "#FFC107"; text.style.color = "#FFC107";
} }
else { else {
text.style.color = "#A0AEC0"; text.style.color = "#A0AEC0";
} }
text.innerText = maxLength - length; text.innerText = maxLength - length;
} }
//part of submit page js //part of submit page js
hide_image=function(){ hide_image=function(){
x=document.getElementById('image-upload-block'); x=document.getElementById('image-upload-block');
url=document.getElementById('post-URL').value; url=document.getElementById('post-URL').value;
if (url.length>=1){ if (url.length>=1){
x.classList.add('d-none'); x.classList.add('d-none');
} }
else { else {
x.classList.remove('d-none'); x.classList.remove('d-none');
} }
} }
// Auto-suggest title given URL // Auto-suggest title given URL
function autoSuggestTitle() { function autoSuggestTitle() {
var urlField = document.getElementById("post-URL"); var urlField = document.getElementById("post-URL");
var titleField = document.getElementById("post-title"); var titleField = document.getElementById("post-title");
var isValidURL = urlField.checkValidity(); var isValidURL = urlField.checkValidity();
if (isValidURL && urlField.value.length > 0 && titleField.value === "") { if (isValidURL && urlField.value.length > 0 && titleField.value === "") {
var x = new XMLHttpRequest(); var x = new XMLHttpRequest();
x.withCredentials=true; x.withCredentials=true;
x.onreadystatechange = function() { x.onreadystatechange = function() {
if (x.readyState == 4 && x.status == 200) { if (x.readyState == 4 && x.status == 200) {
title=JSON.parse(x.responseText)["title"]; title=JSON.parse(x.responseText)["title"];
titleField.value=title; titleField.value=title;
checkForRequired() checkForRequired()
} }
} }
x.open('get','/submit/title?url=' + urlField.value); x.open('get','/submit/title?url=' + urlField.value);
x.send(null); x.send(null);
}; };
}; };
// Run AutoSuggestTitle function on load // Run AutoSuggestTitle function on load
if (window.location.pathname=='/submit') { if (window.location.pathname=='/submit') {
window.onload = autoSuggestTitle(); window.onload = autoSuggestTitle();
} }
// Paste to create submission // Paste to create submission
document.addEventListener('paste', function (event) { document.addEventListener('paste', function (event) {
var nothingFocused = document.activeElement === document.body; var nothingFocused = document.activeElement === document.body;
if (nothingFocused) { if (nothingFocused) {
var clipText = event.clipboardData.getData('Text'); var clipText = event.clipboardData.getData('Text');
var url = new RegExp('^(?:[a-z]+:)?//', 'i'); var url = new RegExp('^(?:[a-z]+:)?//', 'i');
if (url.test(clipText) && window.location.pathname !== '/submit') { if (url.test(clipText) && window.location.pathname !== '/submit') {
window.location.href = '/submit?url=' + clipText; window.location.href = '/submit?url=' + clipText;
} }
else if (url.test(clipText) && window.location.pathname == '/submit') { else if (url.test(clipText) && window.location.pathname == '/submit') {
document.getElementById("post-URL").value = clipText; document.getElementById("post-URL").value = clipText;
autoSuggestTitle() autoSuggestTitle()
} }
} }
}); });
// Submit Page Front-end Validation // Submit Page Front-end Validation
function checkForRequired() { function checkForRequired() {
// Divs // Divs
var title = document.getElementById("post-title"); var title = document.getElementById("post-title");
var url = document.getElementById("post-URL"); var url = document.getElementById("post-URL");
var text = document.getElementById("post-text"); var text = document.getElementById("post-text");
var button = document.getElementById("create_button"); var button = document.getElementById("create_button");
var image = document.getElementById("file-upload"); var image = document.getElementById("file-upload");
// Toggle reuqired attribute // Toggle reuqired attribute
if (url.value.length > 0 || image.value.length > 0) { if (url.value.length > 0 || image.value.length > 0) {
text.required = false; text.required = false;
url.required=false; url.required=false;
} else if (text.value.length > 0 || image.value.length > 0) { } else if (text.value.length > 0 || image.value.length > 0) {
url.required = false; url.required = false;
} else { } else {
text.required = true; text.required = true;
url.required = true; url.required = true;
} }
// Validity check // Validity check
var isValidTitle = title.checkValidity(); var isValidTitle = title.checkValidity();
var isValidURL = url.checkValidity(); var isValidURL = url.checkValidity();
var isValidText = text.checkValidity(); var isValidText = text.checkValidity();
// Disable submit button if invalid inputs // Disable submit button if invalid inputs
if (isValidTitle && (isValidURL || image.value.length>0)) { if (isValidTitle && (isValidURL || image.value.length>0)) {
button.disabled = false; button.disabled = false;
} else if (isValidTitle && isValidText) { } else if (isValidTitle && isValidText) {
button.disabled = false; button.disabled = false;
} else { } else {
button.disabled = true; button.disabled = true;
} }
} }
</script> </script>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="icon" type="image/png" href="/assets/images/{{'SITE_NAME' | app_config}}/favicon.gif"> <link rel="icon" type="image/png" href="/assets/images/{{'SITE_NAME' | app_config}}/favicon.gif">
{% include "emoji_modal.html" %} {% include "emoji_modal.html" %}
{% include "gif_modal.html" %} {% include "gif_modal.html" %}
{% block title %} {% block title %}
<title>Create a post - {{'SITE_NAME' | app_config}}</title> <title>Create a post - {{'SITE_NAME' | app_config}}</title>
{% endblock %} {% endblock %}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap" rel="stylesheet">
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- {{'SITE_NAME' | app_config}} Board CSS --> <!-- {{'SITE_NAME' | app_config}} Board CSS -->
{% block stylesheets %} {% block stylesheets %}
{% if v %} {% if v %}
<link rel="stylesheet" href="/assets/style/{{v.theme}}_{{v.themecolor}}.css"> <link rel="stylesheet" href="/assets/style/{{v.theme}}_{{v.themecolor}}.css">
{% if v.agendaposter %}<link rel="stylesheet" href="/assets/style/agendaposter.css">{% elif v.css %}<link rel="stylesheet" href="/@{{v.username}}/css">{% endif %} {% if v.agendaposter %}<link rel="stylesheet" href="/assets/style/agendaposter.css">{% elif v.css %}<link rel="stylesheet" href="/@{{v.username}}/css">{% endif %}
{% else %} {% else %}
<link rel="stylesheet" href="/assets/style/{{'DEFAULT_THEME' | app_config}}.css"> <link rel="stylesheet" href="/assets/style/{{'DEFAULT_THEME' | app_config}}.css">
{% endif %} {% endif %}
{% endblock %} {% endblock %}
<!-- Font Awesome --> <!-- Font Awesome -->
<link href="/assets/style/fa.css" rel="stylesheet"> <!--load all styles --> <link href="/assets/style/fa.css" rel="stylesheet"> <!--load all styles -->
{% if v %} {% if v %}
<script> <script>
function post(url, callback, errortext) { function post(url, callback, errortext) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open("POST", url, true); xhr.open("POST", url, true);
var form = new FormData() var form = new FormData()
form.append("formkey", "{{v.formkey}}"); form.append("formkey", "{{v.formkey}}");
xhr.withCredentials=true; xhr.withCredentials=true;
xhr.onload=callback xhr.onload=callback
xhr.onerror=function(){alert(errortext)} xhr.onerror=function(){alert(errortext)}
xhr.send(form); xhr.send(form);
} }
function formkey() { function formkey() {
return '{{v.formkey}}'; return '{{v.formkey}}';
} }
</script> </script>
{% endif %} {% endif %}
</head> </head>
<body id="submit" style="overflow-x: hidden; {% if v and v.background %} background:url(/assets/images/backgrounds/{{v.background}}) no-repeat center center fixed !important; background-size: cover!important; background-color: #000!important;{% endif %}"> <body id="submit" style="overflow-x: hidden; {% if v and v.background %} background:url(/assets/images/backgrounds/{{v.background}}) no-repeat center center fixed !important; background-size: cover!important; background-color: #000!important;{% endif %}">
<!-- Navigation --> <!-- Navigation -->
{% include "header.html" %} {% include "header.html" %}
{% block form %} {% block form %}
<!-- Page Content --> <!-- Page Content -->
<form id="submitform" action="/submit" method="post" enctype="multipart/form-data"> <form id="submitform" action="/submit" method="post" enctype="multipart/form-data">
<div class="container"> <div class="container">
<div class="row justify-content-center mb-4 pb-7"> <div class="row justify-content-center mb-4 pb-7">
<div class="col col-md-6 p-3 py-md-0"> <div class="col col-md-6 p-3 py-md-0">
<h1 class="d-none d-md-block">Create a post</h1> <h1 class="d-none d-md-block">Create a post</h1>
<h2 class="h3 d-md-none">Create a post</h2> <h2 class="h3 d-md-none">Create a post</h2>
<div class="body"> <div class="body">
<input type="hidden" name="formkey" value="{{v.formkey}}"> <input type="hidden" name="formkey" value="{{v.formkey}}">
<label for="title">Post Title</label> <label for="title">Post Title</label>
<input class="form-control" id="post-title" aria-describedby="titleHelpRegister" type="text" name="title" placeholder="Required" value="{{title}}" minlength="1" maxlength="500" required oninput="checkForRequired()"> <input class="form-control" id="post-title" aria-describedby="titleHelpRegister" type="text" name="title" placeholder="Required" value="{{title}}" minlength="1" maxlength="500" required oninput="checkForRequired()">
<div id="urlblock"> <div id="urlblock">
<label for="URL" class="mt-3">URL</label> <label for="URL" class="mt-3">URL</label>
<input class="form-control" id="post-URL" aria-describedby="URLHelp" type="url" name="url" placeholder="Optional if you have text." value="{{request.args.get('url','')}}" required oninput="checkForRequired();autoSuggestTitle();hide_image()"> <input class="form-control" id="post-URL" aria-describedby="URLHelp" type="url" name="url" placeholder="Optional if you have text." value="{{request.args.get('url','')}}" required oninput="checkForRequired();autoSuggestTitle();hide_image()">
<small class="form-text text-muted">To post an image, use a direct image link such as i.imgur.com</small> <small class="form-text text-muted">To post an image, use a direct image link such as i.imgur.com</small>
</div> </div>
<div id="image-upload-block"> <div id="image-upload-block">
<div><label class="mt-3">Image Upload</label></div> <div><label class="mt-3">Image Upload</label></div>
<img id="image-preview" class="w-100 d-block"> <img id="image-preview" class="w-100 d-block">
<label class="btn btn-secondary m-0" for="file-upload"> <label class="btn btn-secondary m-0" for="file-upload">
<div id="filename-show">Select Image</div> <div id="filename-show">Select Image</div>
<input id="file-upload" type="file" name="file" accept="image/*" hidden> <input id="file-upload" type="file" name="file" accept="image/*" hidden>
</label> </label>
<small class="form-text text-muted">Images uploaded will be public. Optional if you have text.</small> <small class="form-text text-muted">Images uploaded will be public. Optional if you have text.</small>
</div> </div>
</div> </div>
<label for="body" class="mt-3">Text<i class="fas fa-info-circle text-gray-400 ml-1" data-toggle="tooltip" data-placement="top" title="Uses markdown. Limited to 10000 characters."></i></label> <label for="body" class="mt-3">Text<i class="fas fa-info-circle text-gray-400 ml-1" data-toggle="tooltip" data-placement="top" title="Uses markdown. Limited to 10000 characters."></i></label>
<div class="input-group"> <div class="input-group">
<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="3" name="body" oninput="charLimit('post-text','character-count-submit-text-form');checkForRequired()" maxlength="10000" required>{{text}}</textarea> <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="3" name="body" oninput="charLimit('post-text','character-count-submit-text-form');checkForRequired()" maxlength="10000" required>{{text}}</textarea>
<span class="position-absolute text-small font-weight-bold" id="character-count-submit-text-form" style="right: 1rem; bottom: 0.5rem; z-index: 3;"></span> <span class="position-absolute text-small font-weight-bold" id="character-count-submit-text-form" style="right: 1rem; bottom: 0.5rem; z-index: 3;"></span>
<div class="bg-light text-format d-none"> <div class="bg-light text-format d-none">
<small class="format"><i class="fas fa-bold"></i></small> <small class="format"><i class="fas fa-bold"></i></small>
<small class="format"><i class="fas fa-italic"></i></small> <small class="format"><i class="fas fa-italic"></i></small>
<small class="format"><i class="fas fa-quote-right"></i></small> <small class="format"><i class="fas fa-quote-right"></i></small>
<small class="format"><i class="fas fa-link"></i></small> <small class="format"><i class="fas fa-link"></i></small>
</div> </div>
</div> </div>
<p></p> <p></p>
<small class="btn btn-secondary format d-inline-block m-0"> <small class="btn btn-secondary format d-inline-block m-0">
<i class="fas fa-bold" aria-hidden="true" onclick="makeBold('post-text')" data-toggle="tooltip" data-placement="bottom" title="Bold"></i> <i class="fas fa-bold" aria-hidden="true" onclick="makeBold('post-text')" data-toggle="tooltip" data-placement="bottom" title="Bold"></i>
</small> </small>
&nbsp; &nbsp;
<small class="btn btn-secondary format d-inline-block m-0"> <small class="btn btn-secondary format d-inline-block m-0">
<i class="fas fa-italic" aria-hidden="true" onclick="makeItalics('post-text')" data-toggle="tooltip" data-placement="bottom" title="Italicize"></i> <i class="fas fa-italic" aria-hidden="true" onclick="makeItalics('post-text')" data-toggle="tooltip" data-placement="bottom" title="Italicize"></i>
</small> </small>
&nbsp; &nbsp;
<small class="btn btn-secondary format d-inline-block m-0"> <small class="btn btn-secondary format d-inline-block m-0">
<i class="fas fa-quote-right" aria-hidden="true" onclick="makeQuote('post-text')" data-toggle="tooltip" data-placement="bottom" title="Quote"></i> <i class="fas fa-quote-right" aria-hidden="true" onclick="makeQuote('post-text')" data-toggle="tooltip" data-placement="bottom" title="Quote"></i>
</small> </small>
&nbsp; &nbsp;
<small class="btn btn-secondary format d-inline-block m-0"><span class="font-weight-bolder text-uppercase" aria-hidden="true" onclick="getGif();commentForm('post-text')" data-toggle="modal" data-target="#gifModal" data-toggle="tooltip" data-placement="bottom" title="Add GIF">GIF</span></small> <small class="btn btn-secondary format d-inline-block m-0"><span class="font-weight-bolder text-uppercase" aria-hidden="true" onclick="getGif();commentForm('post-text')" data-toggle="modal" data-target="#gifModal" data-toggle="tooltip" data-placement="bottom" title="Add GIF">GIF</span></small>
&nbsp; &nbsp;
<label class="btn btn-secondary format d-inline-block m-0" for="emoji-reply-btn"> <label class="btn btn-secondary format d-inline-block m-0" for="emoji-reply-btn">
<div id="emoji-reply-btn" onclick="loadEmojis('post-text')" aria-hidden="true" data-toggle="modal" data-target="#emojiModal" data-toggle="tooltip" data-placement="bottom" title="Add Emoji"><i class="fas fa-smile-beam"></i></div> <div id="emoji-reply-btn" onclick="loadEmojis('post-text')" aria-hidden="true" data-toggle="modal" data-target="#emojiModal" data-toggle="tooltip" data-placement="bottom" title="Add Emoji"><i class="fas fa-smile-beam"></i></div>
</label> </label>
<pre></pre> <pre></pre>
<div class="form-text text-small"><a href="/formatting" target="_blank">Formatting help</a></div> <div class="form-text text-small"><a href="/formatting" target="_blank">Formatting help</a></div>
<pre></pre> <pre></pre>
<div class="custom-control custom-checkbox"> <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="nsfwCheck" name="over_18"> <input type="checkbox" class="custom-control-input" id="nsfwCheck" name="over_18">
<label class="custom-control-label" for="nsfwCheck">+18</label> <label class="custom-control-label" for="nsfwCheck">+18</label>
</div> </div>
<div class="custom-control custom-checkbox"> <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="privateCheck" name="private"> <input type="checkbox" class="custom-control-input" id="privateCheck" name="private">
<label class="custom-control-label" for="privateCheck">Unlisted</label> <label class="custom-control-label" for="privateCheck">Unlisted</label>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="container"> <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="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"> <div class="col">
<a href="/" class="btn btn-secondary">Cancel</a> <a href="/" class="btn btn-secondary">Cancel</a>
</div> </div>
<div class="col text-right"> <div class="col text-right">
{% if error %}<span class="text-danger mr-2">{{error}}</span>{% endif %} {% if error %}<span class="text-danger mr-2">{{error}}</span>{% endif %}
<button class="btn btn-outline-purple" id="create_button" type="submit" disabled>Post</button> <button class="btn btn-outline-purple" id="create_button" type="submit" disabled>Post</button>
</div> </div>
</div> </div>
</div> </div>
</form> </form>
{% endblock %} {% endblock %}
<!-- {{'SITE_NAME' | app_config}} JS --> <!-- {{'SITE_NAME' | app_config}} JS -->
<script src="/assets/js/js.js"></script> <script src="/assets/js/js.js"></script>
<!-- ClipboardJS --> <!-- ClipboardJS -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<!-- Instantiate clipboard by passing a string selector --> <!-- Instantiate clipboard by passing a string selector -->
<script> <script>
var clipboard = new ClipboardJS('.copy-link'); var clipboard = new ClipboardJS('.copy-link');
clipboard.on('success', function(e) { clipboard.on('success', function(e) {
jQuery(function($) { jQuery(function($) {
$('#toast-success').toast('show'); $('#toast-success').toast('show');
}) })
console.log(e); console.log(e);
}); });
clipboard.on('error', function(e) { clipboard.on('error', function(e) {
jQuery(function($) { jQuery(function($) {
$('#toast-error').toast('show'); $('#toast-error').toast('show');
}) })
console.log(e); console.log(e);
}); });
document.onpaste = function(event) { document.onpaste = function(event) {
f=document.getElementById('file-upload'); f=document.getElementById('file-upload');
files = event.clipboardData.files files = event.clipboardData.files
filename = files[0].name.toLowerCase() filename = files[0].name.toLowerCase()
if (filename.endsWith(".jpg") || filename.endsWith(".jpeg") || filename.endsWith(".png") || filename.endsWith(".gif")) if (filename.endsWith(".jpg") || filename.endsWith(".jpeg") || filename.endsWith(".png") || filename.endsWith(".gif"))
{ {
f.files = files; f.files = files;
$('#filename-show').text(filename); $('#filename-show').text(filename);
$('#urlblock').addClass('d-none'); $('#urlblock').addClass('d-none');
var fileReader = new FileReader(); var fileReader = new FileReader();
fileReader.readAsDataURL(f.files[0]); fileReader.readAsDataURL(f.files[0]);
fileReader.addEventListener("load", function () {$('#image-preview').attr('src', this.result);}); fileReader.addEventListener("load", function () {$('#image-preview').attr('src', this.result);});
$('#file-upload').attr('required', false); $('#file-upload').attr('required', false);
checkForRequired(); checkForRequired();
} }
} }
$('#file-upload').on('change', function(e){ $('#file-upload').on('change', function(e){
f=document.getElementById('file-upload'); f=document.getElementById('file-upload');
$('#urlblock').addClass('d-none'); $('#urlblock').addClass('d-none');
$('#filename-show').text($('#file-upload')[0].files[0].name); $('#filename-show').text($('#file-upload')[0].files[0].name);
var fileReader = new FileReader(); var fileReader = new FileReader();
fileReader.readAsDataURL(f.files[0]); fileReader.readAsDataURL(f.files[0]);
fileReader.addEventListener("load", function () {$('#image-preview').attr('src', this.result);}); fileReader.addEventListener("load", function () {$('#image-preview').attr('src', this.result);});
checkForRequired(); checkForRequired();
}) })
</script> </script>
</body> </body>
</html> </html>