Yadciel/Titan
1
0
Fork 0
mirror of https://github.com/TitanEmbeds/Titan.git synced 2024-12-25 06:27:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add User CSS Live Previewer, closes #53

Browse Source
This commit is contained in:
Jeremy Zhang 2017-09-19 23:38:46 +00:00
parent a9a261634a
commit 87d5c3e462
3 changed files with 115 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
webapp/titanembeds/static/js/usercss.js
View File

@ -1,14 +1,7 @@
/*global $, ace, Materialize, newCSS*/ /*global $, ace, Materialize, newCSS, CSS_ID*/
(function () { (function () {
if($("#css_editor").length != 0) { if($("#css_editor").length != 0) {
var editor = ace.edit("css_editor"); 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() { function postForm() {
@ -34,12 +27,37 @@
if($("#css_editor").length != 0) { if($("#css_editor").length != 0) {
editor.getSession().setMode("ace/mode/css"); editor.getSession().setMode("ace/mode/css");
editor.setTheme("ace/theme/chrome"); 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); $("#submit-btn").click(submitForm);
if (!newCSS) { if (!newCSS) {
$("#delete-btn").click(delete_css); $("#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() { function formatCSSVars() {
@ -65,6 +83,8 @@
window.location.href = "edit/" + data.id; window.location.href = "edit/" + data.id;
} else { } else {
Materialize.toast('CSS Updated!', 10000); Materialize.toast('CSS Updated!', 10000);
update_live_preview(true);
$("#live_preview_warning").hide();
} }
}); });
formPost.fail(function () { 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();
}
})(); })();

5
webapp/titanembeds/templates/embed.html.j2
View File

@ -19,9 +19,12 @@
<title>{{ guild['name'] }} - Embed - Titan Embeds for Discord</title> <title>{{ guild['name'] }} - Embed - Titan Embeds for Discord</title>
{% include 'google_analytics.html.j2' %} {% include 'google_analytics.html.j2' %}
<style id="user-defined-css">
{% if css is not none %} {% if css is not none %}
<style id="user-defined-css">{% if cssvariables is not none and css.css_var_bool %}{{ cssvariables|e }}{% endif %} {% if css.css is not none %}{{ css.css }}{% endif %}</style> {% if cssvariables is not none and css.css_var_bool %}{{ cssvariables|e }}{% endif %}
{% if css.css is not none %}{{ css.css }}{% endif %}
{% endif %} {% endif %}
</style>
</head> </head>
<body> <body>
<div class="navbar-fixed"> <div class="navbar-fixed">

57
webapp/titanembeds/templates/usercss.html.j2
View File

@ -5,6 +5,20 @@
{% set title="Editing " + css.name + " - User CSS" %} {% set title="Editing " + css.name + " - User CSS" %}
{% endif %} {% endif %}
{%- set live_preview -%}
<iframe id="iframepreview" src="
{% if new %}
{{ url_for("embed.guild_embed", guild_id="295085744249110529") }}
{% else %}
{{ url_for("embed.guild_embed", guild_id="295085744249110529", css=css.id) }}
{% endif %}
" frameborder="0"></iframe>
<div class="input-field inline">
{{ request.url_root }}embed/<input id="preview_guildid" value="295085744249110529" placeholder="Server ID">
</div>
<p class="red lighten-3" id="live_preview_warning" style="display: none;">WARNING: Changes you've made to the css shown in the live preview MAY NOT have been saved! <strong>Hit the submit button to save your work.</strong></p>
{% endset %}
{% block content %} {% block content %}
<h1>{% if new %}New{% else %}Editing {{ css.name }}{% endif %} - User Defined CSS</h1> <h1>{% if new %}New{% else %}Editing {{ css.name }}{% endif %} - User Defined CSS</h1>
<p><strong>Note:</strong> This feature is only used for CSS. Any attempts to enter HTML or malicious CSS code <p><strong>Note:</strong> 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
<div class="row"> <div class="row">
<div class="col m6 s12"> <div class="col m6 s12">
<span>Modal Background Color (<code>--modal</code>):<span> <span>Modal Background Color (<code>--modal</code>):<span>
<input id="css_var_modal" class="jscolor {hash:true}" value="{% if new or variables is none %}#546e7a{% else %}{{ variables.modal|e }}{% endif %}"> <input id="css_var_modal" class="jscolor {hash:true} updateLivePreview" value="{% if new or variables is none %}#546e7a{% else %}{{ variables.modal|e }}{% endif %}">
</div> </div>
<div class="col m6 s12"> <div class="col m6 s12">
<span>Uncategorized Discord Users (<code>--noroleusers</code>):<span> <span>Uncategorized Discord Users (<code>--noroleusers</code>):<span>
<input id="css_var_noroleusers" class="jscolor {hash:true}" value="{% if new or variables is none %}#eceff1{% else %}{{ variables.noroleusers|e }}{% endif %}"> <input id="css_var_noroleusers" class="jscolor {hash:true} updateLivePreview" value="{% if new or variables is none %}#eceff1{% else %}{{ variables.noroleusers|e }}{% endif %}">
</div> </div>
<div class="col m6 s12"> <div class="col m6 s12">
<span>Main Background Color (<code>--main</code>):<span> <span>Main Background Color (<code>--main</code>):<span>
<input id="css_var_main" class="jscolor {hash:true}" value="{% if new or variables is none %}#455a64{% else %}{{ variables.main|e }}{% endif %}"> <input id="css_var_main" class="jscolor {hash:true} updateLivePreview" value="{% if new or variables is none %}#455a64{% else %}{{ variables.main|e }}{% endif %}">
</div> </div>
<div class="col m6 s12"> <div class="col m6 s12">
<span>Text input placeholder (<code>--placeholder</code>):<span> <span>Text input placeholder (<code>--placeholder</code>):<span>
<input id="css_var_placeholder" class="jscolor {hash:true}" value="{% if new or variables is none %}#636363{% else %}{{ variables.placeholder|e }}{% endif %}"> <input id="css_var_placeholder" class="jscolor {hash:true} updateLivePreview" value="{% if new or variables is none %}#636363{% else %}{{ variables.placeholder|e }}{% endif %}">
</div> </div>
<div class="col m6 s12"> <div class="col m6 s12">
<span>Sidebar Dividers (<code>--sidebardivider</code>):<span> <span>Sidebar Dividers (<code>--sidebardivider</code>):<span>
<input id="css_var_sidebardivider" class="jscolor {hash:true}" value="{% if new or variables is none %}#90a4ae{% else %}{{ variables.sidebardivider|e }}{% endif %}"> <input id="css_var_sidebardivider" class="jscolor {hash:true} updateLivePreview" value="{% if new or variables is none %}#90a4ae{% else %}{{ variables.sidebardivider|e }}{% endif %}">
</div> </div>
<div class="col m6 s12"> <div class="col m6 s12">
<span>Left Sidebar/Guild Navigation Background (<code>--leftsidebar</code>):<span> <span>Left Sidebar/Guild Navigation Background (<code>--leftsidebar</code>):<span>
<input id="css_var_leftsidebar" class="jscolor {hash:true}" value="{% if new or variables is none %}#607d8b{% else %}{{ variables.leftsidebar|e }}{% endif %}"> <input id="css_var_leftsidebar" class="jscolor {hash:true} updateLivePreview" value="{% if new or variables is none %}#607d8b{% else %}{{ variables.leftsidebar|e }}{% endif %}">
</div> </div>
<div class="col m6 s12"> <div class="col m6 s12">
<span>Right Sidebar/Member List Background (<code>--rightsidebar</code>):<span> <span>Right Sidebar/Member List Background (<code>--rightsidebar</code>):<span>
<input id="css_var_rightsidebar" class="jscolor {hash:true}" value="{% if new or variables is none %}#607d8b{% else %}{{ variables.rightsidebar|e }}{% endif %}"> <input id="css_var_rightsidebar" class="jscolor {hash:true} updateLivePreview" value="{% if new or variables is none %}#607d8b{% else %}{{ variables.rightsidebar|e }}{% endif %}">
</div> </div>
<div class="col m6 s12"> <div class="col m6 s12">
<span>Header Background (<code>--header</code>):<span> <span>Header Background (<code>--header</code>):<span>
<input id="css_var_header" class="jscolor {hash:true}" value="{% if new or variables is none %}#263238{% else %}{{ variables.header|e }}{% endif %}"> <input id="css_var_header" class="jscolor {hash:true} updateLivePreview" value="{% if new or variables is none %}#263238{% else %}{{ variables.header|e }}{% endif %}">
</div> </div>
<div class="col m6 s12"> <div class="col m6 s12">
<span>Chat Message (<code>--chatmessage</code>):<span> <span>Chat Message (<code>--chatmessage</code>):<span>
<input id="css_var_chatmessage" class="jscolor {hash:true}" value="{% if new or variables is none %}#c3c4c5{% else %}{{ variables.chatmessage|e }}{% endif %}"> <input id="css_var_chatmessage" class="jscolor {hash:true} updateLivePreview" value="{% if new or variables is none %}#c3c4c5{% else %}{{ variables.chatmessage|e }}{% endif %}">
</div> </div>
<div class="col m6 s12"> <div class="col m6 s12">
<span>Discriminator Text (<code>--discrim</code>):<span> <span>Discriminator Text (<code>--discrim</code>):<span>
<input id="css_var_discrim" class="jscolor {hash:true}" value="{% if new or variables is none %}#FFFFFF{% else %}{{ variables.discrim|e }}{% endif %}"> <input id="css_var_discrim" class="jscolor {hash:true} updateLivePreview" value="{% if new or variables is none %}#FFFFFF{% else %}{{ variables.discrim|e }}{% endif %}">
</div> </div>
<div class="col m6 s12"> <div class="col m6 s12">
<span>Message Box Background (<code>--chatbox</code>):<span> <span>Message Box Background (<code>--chatbox</code>):<span>
<input id="css_var_chatbox" class="jscolor {hash:true}" value="{% if new or variables is none %}#37474f{% else %}{{ variables.chatbox|e }}{% endif %}"> <input id="css_var_chatbox" class="jscolor {hash:true} updateLivePreview" value="{% if new or variables is none %}#37474f{% else %}{{ variables.chatbox|e }}{% endif %}">
</div> </div>
</div> </div>
<p><strong>TIP!</strong> You can use the variables in your CSS below! Something like <code>color: var(--leftsidebar);</code> would work!</p> <p><strong>TIP!</strong> You can use the variables in your CSS below! Something like <code>color: var(--leftsidebar);</code> would work!</p>
@ -91,14 +105,20 @@ will have CSS cosmetic privilages removed, if caught. Please don't, we check the
<p class="flow-text">All custom CSS slots are used. Donate to get more!</p> <p class="flow-text">All custom CSS slots are used. Donate to get more!</p>
<p>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.</p> <p>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.</p>
<hr> <hr>
{{ live_preview }}
</div> </div>
{% else %} {% else %}
<div class="col s12"> <div class="col s12">
<p class="flow-text">Edit your CSS code here</p> <p class="flow-text">Edit your CSS code here</p>
<p><em>Remove any text and leave this box blank when submitting to not use up your custom css slots.</em></p> <p><em>Remove any text and leave this box blank when submitting to not use up your custom css slots.</em></p>
<div style="position: relative; height: 40vh;"> <div class="row">
<div class="col s12 m12 l6" id="css_editor_container">
<div id="css_editor">{% if new %}/* Enter your CSS code here! */{% else %}{% if css.css %}{{ css.css|e }}{% endif %}{% endif %}</div> <div id="css_editor">{% if new %}/* Enter your CSS code here! */{% else %}{% if css.css %}{{ css.css|e }}{% endif %}{% endif %}</div>
</div> </div>
<div class="col s12 m12 l6">
{{ live_preview }}
</div>
</div>
<br> <br>
</div> </div>
{% endif %} {% endif %}
@ -116,6 +136,7 @@ will have CSS cosmetic privilages removed, if caught. Please don't, we check the
<script src="//cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js" integrity="sha256-y1h79SSb3icyBC/BrLCzoexQZAOGwlvoAr85biY4QGw=" crossorigin="anonymous"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js" integrity="sha256-y1h79SSb3icyBC/BrLCzoexQZAOGwlvoAr85biY4QGw=" crossorigin="anonymous"></script>
<script> <script>
const newCSS = {% if new %}true{% else %}false{% endif %}; const newCSS = {% if new %}true{% else %}false{% endif %};
const CSS_ID = {%if new %}null{% else %}{{ css.id }}{% endif %};
</script> </script>
<script type="text/javascript" src="{{ url_for('static', filename='js/usercss.js') }}"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/usercss.js') }}"></script>
{% endblock %} {% endblock %}
@ -130,5 +151,17 @@ will have CSS cosmetic privilages removed, if caught. Please don't, we check the
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
#css_editor_container {
position: relative;
height: 55vh;
min-height: 500px;
}
#iframepreview {
width: 100%;
height: 43vh;
min-height: 450px;
}
</style> </style>
{% endblock %} {% endblock %}