Yadciel/Titan
1
0
Fork 0
mirror of https://github.com/TitanEmbeds/Titan.git synced 2025-06-17 03:45:25 +02: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
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 () {
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();
}
})();