Make query parameters dynamic and an autofill form

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}

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! <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",
+    },
+]

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);
+    });
+})();

webapp/titanembeds/templates/card_queryparams.html.j2

@@ -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>
+                      <strong>{{ param.name }}=&lt;{{ param.type }}&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>
+                      {{ param.description }}
-                      <em>Eg: css=1</em>
+                      {% if param.options %}
-                    </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!
                       <hr>
                       <strong>Avaliable Options:</strong>
                       <ul class="browser-default">
-                        <li><strong>true</strong></li>
+                        {% for option in param.options %}
-                        <li><strong>false</strong> (default)</li>
+                        <li><strong>{{ option.name }}</strong> {% if option.default %}(default){% endif %}</li>
+                        {% endfor %}
                       </ul>
                       <hr>
-                      <em>Eg: noscroll=true</em>
+                      {% else %}
-                    </li>
+                      <br>
-                    <li class="collection-item">
+                      {% endif %}
-                      <strong>sametarget=&lt;boolean&gt;</strong> <br>
+                      <em>Eg: {{ param.name }}={{ param.example }}</em>
-                      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.)
+                      {% if "administrate_guild" in request.url %}
-                      <hr>
+                      <br>
-                      <strong>Avaliable Options:</strong>
+                      <input class="queryparam" name="{{ param.name }}" type="text" style="background-color: #F9F8F6;">
-                      <ul class="browser-default">
+                      {% endif %}
-                        <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>
                     </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 %}