From 87d5c3e462ac4dc2ea326a8b406cba9655e8ba9b Mon Sep 17 00:00:00 2001 From: Jeremy Zhang Date: Tue, 19 Sep 2017 23:38:46 +0000 Subject: [PATCH] Add User CSS Live Previewer, closes #53 --- webapp/titanembeds/static/js/usercss.js | 71 +++++++++++++++++--- webapp/titanembeds/templates/embed.html.j2 | 9 ++- webapp/titanembeds/templates/usercss.html.j2 | 59 ++++++++++++---- 3 files changed, 115 insertions(+), 24 deletions(-) diff --git a/webapp/titanembeds/static/js/usercss.js b/webapp/titanembeds/static/js/usercss.js index 489ae7a..978f65b 100644 --- a/webapp/titanembeds/static/js/usercss.js +++ b/webapp/titanembeds/static/js/usercss.js @@ -1,14 +1,7 @@ -/*global $, ace, Materialize, newCSS*/ +/*global $, ace, Materialize, newCSS, CSS_ID*/ (function () { if($("#css_editor").length != 0) { var editor = ace.edit("css_editor"); - editor.commands.addCommand({ - name: 'save', - bindKey: {win: "Ctrl-S", "mac": "Cmd-S"}, - exec: function(editor) { - $('#submit-btn').trigger('click'); - } - }); } function postForm() { @@ -34,12 +27,37 @@ if($("#css_editor").length != 0) { editor.getSession().setMode("ace/mode/css"); editor.setTheme("ace/theme/chrome"); + + editor.commands.addCommand({ + name: 'save', + bindKey: {win: "Ctrl-S", "mac": "Cmd-S"}, + exec: function(editor) { + $('#submit-btn').trigger('click'); + } + }); + editor.on("blur", function () { + update_live_preview(); + }); } $("#submit-btn").click(submitForm); if (!newCSS) { $("#delete-btn").click(delete_css); } + + $(".updateLivePreview").on("blur", function () { + update_live_preview(); + }); + + $("#toggleCSSVar").on("change", function () { + update_live_preview(); + }); + + $("#preview_guildid").keyup(function (event) { + if (event.keyCode == 13) { + change_live_preview(); + } + }); }); function formatCSSVars() { @@ -65,6 +83,8 @@ window.location.href = "edit/" + data.id; } else { Materialize.toast('CSS Updated!', 10000); + update_live_preview(true); + $("#live_preview_warning").hide(); } }); formPost.fail(function () { @@ -89,4 +109,39 @@ } }); } + + function update_live_preview(refresh=false) { + if (refresh) { + $('#iframepreview')[0].contentWindow.location.reload(true); + return; + } + $("#live_preview_warning").show(); + var output = ""; + + if ($("#toggleCSSVar").is(':checked')) { + var cssVars = formatCSSVars(); + output += ":root {"; + for (var key in cssVars) { + if (cssVars.hasOwnProperty(key)) { + output += "--" + key + ":" + cssVars[key] + ";"; + } + } + output += "}"; + } + + if($("#css_editor").length != 0) { + output += editor.getValue(); + } + + $("#iframepreview").contents().find('#user-defined-css').html(output); + } + + function change_live_preview() { + var src = "/embed/" + $("#preview_guildid").val(); + if (!newCSS) { + src += "?css=" + CSS_ID; + } + $("#iframepreview").attr("src", src); + update_live_preview(); + } })(); \ No newline at end of file diff --git a/webapp/titanembeds/templates/embed.html.j2 b/webapp/titanembeds/templates/embed.html.j2 index 3f389aa..4ecd5e4 100644 --- a/webapp/titanembeds/templates/embed.html.j2 +++ b/webapp/titanembeds/templates/embed.html.j2 @@ -19,9 +19,12 @@ {{ guild['name'] }} - Embed - Titan Embeds for Discord {% include 'google_analytics.html.j2' %} - {% if css is not none %} - - {% endif %} +
diff --git a/webapp/titanembeds/templates/usercss.html.j2 b/webapp/titanembeds/templates/usercss.html.j2 index c512cce..7bdffd5 100644 --- a/webapp/titanembeds/templates/usercss.html.j2 +++ b/webapp/titanembeds/templates/usercss.html.j2 @@ -5,6 +5,20 @@ {% set title="Editing " + css.name + " - User CSS" %} {% endif %} +{%- set live_preview -%} + +
+ {{ request.url_root }}embed/ +
+ +{% endset %} + {% block content %}

{% if new %}New{% else %}Editing {{ css.name }}{% endif %} - User Defined CSS

Note: This feature is only used for CSS. Any attempts to enter HTML or malicious CSS code @@ -40,47 +54,47 @@ will have CSS cosmetic privilages removed, if caught. Please don't, we check the

Modal Background Color (--modal): - +
Uncategorized Discord Users (--noroleusers): - +
Main Background Color (--main): - +
Text input placeholder (--placeholder): - +
Sidebar Dividers (--sidebardivider): - +
Left Sidebar/Guild Navigation Background (--leftsidebar): - +
Right Sidebar/Member List Background (--rightsidebar): - +
Header Background (--header): - +
Chat Message (--chatmessage): - +
Discriminator Text (--discrim): - +
Message Box Background (--chatbox): - +

TIP! You can use the variables in your CSS below! Something like color: var(--leftsidebar); would work!

@@ -91,13 +105,19 @@ will have CSS cosmetic privilages removed, if caught. Please don't, we check the

All custom CSS slots are used. Donate to get more!

Free up some slots by emptying your other custom CSS field and submitting it (Titan will automatically mark empty custom css editor fields as unused slots in the database) or delete the user defined css slot altogether.

+ {{ live_preview }}
{% else %}

Edit your CSS code here

Remove any text and leave this box blank when submitting to not use up your custom css slots.

-
-
{% if new %}/* Enter your CSS code here! */{% else %}{% if css.css %}{{ css.css|e }}{% endif %}{% endif %}
+
+
+
{% if new %}/* Enter your CSS code here! */{% else %}{% if css.css %}{{ css.css|e }}{% endif %}{% endif %}
+
+
+ {{ live_preview }} +

@@ -116,6 +136,7 @@ will have CSS cosmetic privilages removed, if caught. Please don't, we check the {% endblock %} @@ -130,5 +151,17 @@ will have CSS cosmetic privilages removed, if caught. Please don't, we check the bottom: 0; left: 0; } + + #css_editor_container { + position: relative; + height: 55vh; + min-height: 500px; + } + + #iframepreview { + width: 100%; + height: 43vh; + min-height: 450px; + } {% endblock %} \ No newline at end of file