From 375dfafc3f62668076a29cba4e843664025898e5 Mon Sep 17 00:00:00 2001 From: Jeremy Zhang Date: Sun, 26 Nov 2017 02:03:53 +0000 Subject: [PATCH] Make query parameters dynamic and an autofill form --- webapp/titanembeds/app.py | 3 +- webapp/titanembeds/constants.py | 75 ++++++++++++++++ .../titanembeds/static/js/query_parameters.js | 29 +++++++ .../templates/card_queryparams.html.j2 | 87 ++++++++----------- 4 files changed, 142 insertions(+), 52 deletions(-) create mode 100644 webapp/titanembeds/constants.py create mode 100644 webapp/titanembeds/static/js/query_parameters.js diff --git a/webapp/titanembeds/app.py b/webapp/titanembeds/app.py index c87a648..17b59f3 100644 --- a/webapp/titanembeds/app.py +++ b/webapp/titanembeds/app.py @@ -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} diff --git a/webapp/titanembeds/constants.py b/webapp/titanembeds/constants.py new file mode 100644 index 0000000..98c7e41 --- /dev/null +++ b/webapp/titanembeds/constants.py @@ -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! Check here for a list of all language parameters Titan can support.
Wish Titan supported your language? Consider contributing to our CrowdIn project!", + "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... (Does not work for iframe loaded embeds!!! 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", + }, +] \ No newline at end of file diff --git a/webapp/titanembeds/static/js/query_parameters.js b/webapp/titanembeds/static/js/query_parameters.js new file mode 100644 index 0000000..66e198a --- /dev/null +++ b/webapp/titanembeds/static/js/query_parameters.js @@ -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); + }); +})(); \ No newline at end of file diff --git a/webapp/titanembeds/templates/card_queryparams.html.j2 b/webapp/titanembeds/templates/card_queryparams.html.j2 index 3441a68..eaf6986 100644 --- a/webapp/titanembeds/templates/card_queryparams.html.j2 +++ b/webapp/titanembeds/templates/card_queryparams.html.j2 @@ -7,67 +7,52 @@

Use query parameters to customize your individual embeds out of this world!

Query parameters are in the format of key-value pairs. They are appended after your embed url such that it would look like so:
https://titanembeds.com/embed/1234567890?css=1&defaultchannel=81387914189078528&theme=DiscordDark

Below is the reference of all the avaliable query parameters that may be used.

+ {% if "administrate_guild" in request.url %}

Modify the input fields to change your query parameters for your embed. Leave a box empty to not use the parameter.

{% endif %} + {% if "administrate_guild" in request.url %} +
+

Copy this URL for your iFrame src (or as a direct link) after entering the parameters in the form.

+ +
+ {% endif %} - \ No newline at end of file + +{% if "administrate_guild" in request.url %} + +{% endif %} \ No newline at end of file