Yadciel/Titan
1
0
Fork 0
mirror of https://github.com/TitanEmbeds/Titan.git synced 2024-11-14 18:11:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Make query parameters dynamic and an autofill form

Browse Source
This commit is contained in:
Jeremy Zhang 2017-11-26 02:03:53 +00:00
parent 6d724796da
commit 375dfafc3f
4 changed files with 142 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
webapp/titanembeds/app.py
View File

@ -7,6 +7,7 @@ from .blueprints import api, user, admin, embed, gateway
import os
from titanembeds.database import get_administrators_list
from titanembeds.i18n import LANGUAGES
import titanembeds.constants as constants
try:
import uwsgi
@ -71,4 +72,4 @@ def before_first_request():
@app.context_processor
def context_processor():
return {"devs": get_administrators_list()}
return {"devs": get_administrators_list(), "constants": constants}

75
webapp/titanembeds/constants.py Normal file
View File

@ -0,0 +1,75 @@
QUERY_PARAMETERS = [
{
"name": "css",
"type": "integer",
"description": "Styles the embed's theme according to the unique custom CSS ID. Custom CSS may be managed from the user dashboard page.",
"example": "1",
},
{
"name": "defaultchannel",
"type": "snowflake",
"description": "Instead of having the top channel as the first channel your users see, you may change it. Enable Discord's Developer mode in the Appearances tab of the User Settings and copy the channel ID.",
"example": "1234567890",
},
{
"name": "lang",
"type": "language",
"description": "Is your users multilingual? No worries, Titan can speak multiple languages! <a href=\"https://github.com/TitanEmbeds/Titan/blob/master/webapp/titanembeds/i18n.py\" target=\"_blank\">Check here</a> for a list of all language parameters Titan can support. <br> Wish Titan supported your language? Consider contributing to <a href=\"http://translate.titanembeds.com/\" target=\"_blank\">our CrowdIn project</a>!",
"example": "nl",
"input": "text",
},
{
"name": "noscroll",
"type": "boolean",
"description": "Prevents the embed from scrolling down on first load. Useful for those who wants to set #info -typed channels as their default channel. Gotta have those good reads!",
"example": "true",
"options": [
{
"name": "true",
"default": False,
},
{
"name": "false",
"default": True,
},
],
},
{
"name": "sametarget",
"type": "boolean",
"description": "For those who don't want the Discord Login to open in a new tab/window... (<em>Does not work for iframe loaded embeds!!!</em> This is a direct link option only.)",
"example": "true",
"options": [
{
"name": "true",
"default": False,
},
{
"name": "false",
"default": True,
},
],
},
{
"name": "theme",
"type": "string",
"description": "Want your embed to use one of our premade themes? Look no further!",
"example": "DiscordDark",
"options": [
{
"name": "BetterTitan",
"default": False,
},
{
"name": "DiscordDark",
"default": False,
},
],
},
{
"name": "username",
"type": "string",
"description": "Prefills the guest username field with the given username.",
"example": "Rainbow%20Dash",
},
]

29
webapp/titanembeds/static/js/query_parameters.js Normal file
View File

@ -0,0 +1,29 @@
/* global $ */
(function () {
"use strict";
function updateQueryParameters() {
let baseURL = window.location.origin + "/embed/" + $("#queryparam_guildid").val();
let inputs = $("input.queryparam");
let url = baseURL;
for (let i = 0; i < inputs.length; i++) {
let input = $(inputs[i]);
let name = input.attr("name");
let value = input.val();
if (!value) {
continue;
}
if (!url.includes("?")) {
url += "?";
} else {
url += "&";
}
url += `${name}=${value}`;
}
$("#queryparam_url").val(url);
}
$(function () {
$("input.queryparam").change(updateQueryParameters);
$("#queryparam_guildid").change(updateQueryParameters);
});
})();

87
webapp/titanembeds/templates/card_queryparams.html.j2
View File

@ -7,67 +7,52 @@
<p class="flow-text">Use query parameters to customize your individual embeds out of this world!</p>
<p>Query parameters are in the format of key-value pairs. They are appended after your embed url such that it would look like so: <br><em>https://titanembeds.com/embed/1234567890<strong>?css=1&defaultchannel=81387914189078528&theme=DiscordDark</strong></em></p>
<p>Below is the reference of all the avaliable query parameters that may be used.</p>
{% if "administrate_guild" in request.url %}<p><strong>Modify the input fields to change your query parameters for your embed. Leave a box empty to not use the parameter.</strong></p>{% endif %}
<ul class="collection">
{% for param in constants.QUERY_PARAMETERS %}
<li class="collection-item">
<strong>css=&lt;integer&gt;</strong> <br>
Styles the embed's theme according to the unique custom CSS ID. Custom CSS may be managed from the user dashboard page. <br>
<em>Eg: css=1</em>
</li>
<li class="collection-item">
<strong>defaultchannel=&lt;snowflake&gt;</strong> <br>
Instead of having the top channel as the first channel your users see, you may change it. Enable Discord's Developer mode in the Appearances tab of the User Settings and copy the channel ID. <br>
<em>Eg: defaultchannel=1234567890</em>
</li>
<li class="collection-item">
<strong>lang=&lt;language&gt;</strong> <br>
Is your users multilingual? No worries, Titan can speak multiple languages! <a href="https://github.com/TitanEmbeds/Titan/blob/master/webapp/titanembeds/i18n.py" target="_blank">Check here</a> for a list of all language parameters Titan can support. <br>
Wish Titan supported your language? Consider contributing to <a href="http://translate.titanembeds.com/" target="_blank">our CrowdIn project</a>! <br>
<em>Eg: lang=nl</em>
</li>
<li class="collection-item">
<strong>noscroll=&lt;boolean&gt;</strong> <br>
Prevents the embed from scrolling down on first load. Useful for those who wants to set #info -typed channels as their default channel. Gotta have those good reads!
<strong>{{ param.name }}=&lt;{{ param.type }}&gt;</strong> <br>
{{ param.description }}
{% if param.options %}
<hr>
<strong>Avaliable Options:</strong>
<ul class="browser-default">
<li><strong>true</strong></li>
<li><strong>false</strong> (default)</li>
{% for option in param.options %}
<li><strong>{{ option.name }}</strong> {% if option.default %}(default){% endif %}</li>
{% endfor %}
</ul>
<hr>
<em>Eg: noscroll=true</em>
</li>
<li class="collection-item">
<strong>sametarget=&lt;boolean&gt;</strong> <br>
For those who don't want the Discord Login to open in a new tab/window... (<em>Does not work for iframe loaded embeds!!!</em> This is a direct link option only.)
<hr>
<strong>Avaliable Options:</strong>
<ul class="browser-default">
<li><strong>true</strong></li>
<li><strong>false</strong> (default)</li>
</ul>
<hr>
<em>Eg: sametarget=true</em>
</li>
<li class="collection-item">
<strong>theme=&lt;string&gt;</strong> <br>
Want your embed to use one of our premade themes? Look no further! <br>
<hr>
<strong>Avaliable Options:</strong>
<ul class="browser-default">
<li><strong>BetterTitan</strong></li>
<li><strong>DiscordDark</strong></li>
</ul>
<hr>
<em>Eg: theme=DiscordDark</em>
</li>
<li class="collection-item">
<strong>username=&lt;string&gt;</strong> <br>
Prefills the guest username field with the given username. <br>
<em>Eg: username=Rainbow%20Dash</em>
{% else %}
<br>
{% endif %}
<em>Eg: {{ param.name }}={{ param.example }}</em>
{% if "administrate_guild" in request.url %}
<br>
<input class="queryparam" name="{{ param.name }}" type="text" style="background-color: #F9F8F6;">
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% if "administrate_guild" in request.url %}
<div class="col s12 black-text">
<p class="flow-text">Copy this URL for your iFrame src (or as a direct link) after entering the parameters in the form.</p>
<ul class="collection">
<li class="collection-item">
<strong>Embed/Server ID</strong>
<input id="queryparam_guildid" type="text" style="background-color: #F9F8F6;" value="{{ guild['id'] }}">
</li>
<li class="collection-item">
Embed URL after query parameters appled
<input id="queryparam_url" readonly value="{{ url_for("embed.guild_embed", guild_id=guild['id'], _external=True) }}" id="disabled" type="text" onclick="this.setSelectionRange(0, this.value.length)">
</li>
</ul>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% if "administrate_guild" in request.url %}
<script type="text/javascript" src="{{ url_for('static', filename='js/query_parameters.js') }}" defer></script>
{% endif %}