Yadciel/Titan
1
0
Fork 0
mirror of https://github.com/TitanEmbeds/Titan.git synced 2025-06-16 11:25:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

Implement sending rich embeds

Browse Source
This commit is contained in:
Jeremy Zhang
2019-11-06 13:45:48 -08:00
parent 8dec93d087
commit aa49b2d473
15 changed files with 529 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
webapp/titanembeds/static/css/embed.css
View File

@ -926,6 +926,10 @@ p.mentioned span.chatmessage {
.wdt-emoji-picker {
display: none;
}
#send-rich-embed-btn {
display: none;
}
#upload-file-btn {
display: none;
@ -940,7 +944,11 @@ p.mentioned span.chatmessage {
.wdt-emoji-picker {
display: block;
}
#send-rich-embed-btn {
display: block;
}
#upload-file-btn {
display: block;
}
@ -963,6 +971,19 @@ p.mentioned span.chatmessage {
color: white;
}
#send-rich-embed-btn {
position: absolute;
bottom: 5px;
right: 91px;
color: gray;
padding: 1px;
transition: .3s ease-out;
}
#send-rich-embed-btn:hover {
color: white;
}
#send-msg-btn {
position: absolute;
bottom: 7px;
@ -980,6 +1001,11 @@ p.mentioned span.chatmessage {
display: none;
}
#richembedmodal {
width: 80%;
max-height: 89vh;
}
@media only screen and (min-width: 500px) {
#filemodal-body {
display: flex;
@ -996,14 +1022,37 @@ p.mentioned span.chatmessage {
max-height: 100px;
}
#messagebox-filemodal {
#messagebox-filemodal, #messagebox-richembedmodal, #richembedmodal-left input {
background-color: rgba(0, 0, 0, 0.07);
}
#messagebox-filemodal::placeholder {
#messagebox-filemodal::placeholder, #messagebox-richembedmodal::placeholder, #richembedmodal-left input::placeholder {
color: #90a4ae;
}
#richembedmodal-left .input-field label {
color: white;
}
#richembedmodal-left input[type=text] {
height: 25px;
margin-bottom: 5px;
}
#richembedmodal-fields .input-field {
margin-top: 25px;
}
#richembedmodal-fields .delete-field {
padding-left: 0;
padding-right: 0;
color: #F5B7D0;
}
#richembedmodal-fields > div {
margin-bottom: 0;
}
#mention-picker {
color: black;
position: fixed;

22
webapp/titanembeds/static/js/admin_cosmetics.js
View File

@ -1,13 +1,13 @@
/* global $, Materialize, location */
function postForm(user_id, css, css_limit, guest_icon, badges) {
function postForm(user_id, css, css_limit, guest_icon, send_rich_embed, badges) {
if (css_limit == "") {
css_limit = 0;
}
var funct = $.ajax({
dataType: "json",
method: "POST",
data: {"user_id": user_id, "css": css, "css_limit": css_limit, "guest_icon": guest_icon, "badges": badges}
data: {"user_id": user_id, "css": css, "css_limit": css_limit, "guest_icon": guest_icon, "send_rich_embed": send_rich_embed, "badges": badges}
});
return funct.promise();
}
@ -42,8 +42,9 @@ $(function() {
var css_checked = $("#new_css_switch").is(':checked');
var css_limit = $("#new_css_limit").val();
var guest_icon_checked = $("#new_guest_icon_switch").is(':checked');
var send_rich_embed_checked = $("#new_send_rich_embed_switch").is(":checked");
var badges = $("#new_badges > option:selected").map(function(){ return this.value }).get().join();
var formPost = postForm(user_id, css_checked, css_limit, guest_icon_checked, badges);
var formPost = postForm(user_id, css_checked, css_limit, guest_icon_checked, send_rich_embed_checked, badges);
formPost.done(function (data) {
location.reload();
});
@ -118,6 +119,21 @@ function update_guest_icon_switch(user_id, element) {
});
}
function update_send_rich_embed_switch(user_id, element) {
var send_rich_checked = $(element).is(':checked');
var formPatch = patchForm(user_id, {"send_rich_embed": send_rich_checked});
formPatch.done(function (data) {
Materialize.toast('Send Rich Embed updated!', 10000);
});
formPatch.fail(function (data) {
if (data.status == 409) {
Materialize.toast('This user id does not exists!', 10000);
} else {
Materialize.toast('Oh no! Something has failed changing the send rich embed toggle!', 10000);
}
});
}
function update_badges(user_id, element) {
var badges = $(element).val().join();
var formPatch = patchForm(user_id, {"badges": badges});

9
webapp/titanembeds/static/js/administrate_guild.js
View File

@ -182,6 +182,15 @@ $('#file_upload').change(function() {
});
});
$('#send_rich_embed').change(function() {
var pathname = window.location.pathname;
var checked = $(this).is(':checked')
var payload = {"send_rich_embed": checked}
$.post(pathname, payload, function(data) {
Materialize.toast('Updated send rich embed setting!', 2000)
});
});
function initiate_ban(guild_id, user_id) {
var reason = prompt("Please enter your reason for ban");
var payload = {

290
webapp/titanembeds/static/js/embed.js
View File

@ -155,7 +155,7 @@
return funct.promise();
}
function post(channel_id, content, file) {
function post(channel_id, content, file, richembed) {
if (content == "") {
content = null;
}
@ -188,6 +188,11 @@
}
return myXhr;
}
} else if (richembed) {
data = {"guild_id": guild_id, "channel_id": channel_id, "richembed": richembed};
if (content) {
data["content"] = content;
}
} else {
data = {"guild_id": guild_id, "channel_id": channel_id, "content": content};
}
@ -290,6 +295,7 @@
}
}
$("#send-rich-embed-btn").hide();
$("#upload-file-btn").hide();
$("#send-msg-btn").hide();
@ -332,6 +338,14 @@
outDuration: 400,
complete: function () { $("#fileinput").val(""); }
});
$("#richembedmodal").modal({
dismissible: true,
opacity: .3,
inDuration: 400,
outDuration: 400,
endingTop: '4%',
complete: function () { }
});
$("#usercard").modal({
opacity: .5,
});
@ -373,6 +387,10 @@
$("#proceed_fileupload_btn").click(function () {
$("#messagebox-filemodal").trigger(jQuery.Event("keydown", { keyCode: 13 } ));
});
$("#proceed_richembedmodal_btn").click(function () {
$("#messagebox-richembedmodal").trigger(jQuery.Event("keydown", { keyCode: 13 } ));
});
$("#fileinput").change(function (e){
var files = e.target.files;
@ -403,6 +421,52 @@
}
}
});
$("#send-rich-embed-btn").click(function () {
$("#richembedmodal").modal("open");
$("#messagebox-richembedmodal").val($("#messagebox").val());
$("#richembedform-color").val("#6BABDA");
$("#richembedform-title").val("");
$("#richembedform-description").val("");
$("#richembedform-url").val("");
$("#richembedform-thumbnailurl").val("");
$("#richembedform-authorname").val("");
$("#richembedform-authorurl").val("");
$("#richembedform-authoricon").val("");
$("#richembedform-footertext").val("");
$("#richembedmodal-fields").empty();
$("#richembedmodal-preview").empty();
});
$("#richembedmodal-left input").keyup(function () {
genPreviewPopulateRichEmbed();
});
$("#richembedmodal_addfield_btn").click(function () {
var count = $("#richembedmodal-fields > .row").length;
if (count >= 10) {
$("#richembedmodal_addfield_btn").addClass("disabled");
return;
}
var template = $($("#mustache_richembedfieldinput").html());
$("#richembedmodal-fields").append(template);
template.find("input.name").keyup(function () {
genPreviewPopulateRichEmbed();
});
template.find("input.value").keyup(function () {
genPreviewPopulateRichEmbed();
});
template.find(".delete-field").click(function () {
$(this).closest(".row").remove();
$("#richembedmodal_addfield_btn").removeClass("disabled");
});
count = $("#richembedmodal-fields > .row").length;
if (count >= 10) {
$("#richembedmodal_addfield_btn").addClass("disabled");
return;
}
});
$( "#theme-selector" ).change(function () {
var theme = $("#theme-selector option:selected").val();
@ -621,6 +685,7 @@
$("#messagebox").hide();
$("#emoji-tray-toggle").hide();
$(".wdt-emoji-picker").hide();
$("#send-rich-embed-btn").hide();
$("#upload-file-btn").hide();
$("#send-msg-btn").hide();
} else {
@ -628,6 +693,7 @@
$("#messagebox").show();
$("#emoji-tray-toggle").show();
$(".wdt-emoji-picker").show();
$("#send-rich-embed-btn").show();
$("#upload-file-btn").show();
$("#send-msg-btn").show();
}
@ -834,6 +900,7 @@
if (curr_default_channel == null) {
$("#messagebox").prop('disabled', true);
$("#messagebox").prop('placeholder', "NO TEXT CHANNELS");
$("#send-rich-embed-btn").hide();
$("#upload-file-btn").hide();
$("#send-msg-btn").hide();
Materialize.toast("You find yourself in a strange place. You don't have access to any text channels, or there are none in this server.", 20000);
@ -845,12 +912,14 @@
if (this_channel.write) {
$("#messagebox").prop('disabled', false);
$("#messagebox").prop('placeholder', "Enter message");
$("#send-rich-embed-btn").show();
$("#upload-file-btn").show();
$("#send-msg-btn").show();
$(".wdt-emoji-picker").show();
} else {
$("#messagebox").prop('disabled', true);
$("#messagebox").prop('placeholder', "Messaging is disabled in this channel.");
$("#send-rich-embed-btn").hide();
$("#upload-file-btn").hide();
$("#send-msg-btn").hide();
$(".wdt-emoji-picker").hide();
@ -860,6 +929,11 @@
} else {
$("#upload-file-btn").hide();
}
if (this_channel.embed_links) {
$("#send-rich-embed-btn").show();
} else {
$("#send-rich-embed-btn").hide();
}
$("#channeltopic").text(this_channel.channel.topic);
$("#channel-"+selected_channel).parent().addClass("active");
}
@ -1109,6 +1183,107 @@
}
$("#usercard").modal('open');
}
function generatePreviewRichEmbed() {
var richembed = generateRichEmbedObjFromModalForm();
var rendered = render_embed(richembed);
$("#richembedmodal-preview").html(rendered);
}
function genPreviewPopulateRichEmbed() {
generatePreviewRichEmbed();
var richembed = generateRichEmbedObjFromModalForm();
$("#richembedmodal-object").val("");
if (Object.keys(richembed).length > 2) {
if (richembed.fields && richembed.fields.length == 0) {
return;
}
$("#richembedmodal-object").val(JSON.stringify(richembed));
}
}
function generateRichEmbedObjFromModalForm() {
var color = $("#richembedform-color").val();
var title = $("#richembedform-title").val();
var description = $("#richembedform-description").val();
var url = $("#richembedform-url").val();
var thumbnailurl = $("#richembedform-thumbnailurl").val();
var authorname = $("#richembedform-authorname").val();
var authorurl = $("#richembedform-authorurl").val();
var authoricon = $("#richembedform-authoricon").val();
var footertext = $("#richembedform-footertext").val();
var output = {
"type": "rich"
};
if (color.startsWith("#")) {
color = color.substr(1);
}
color = "0x" + color;
color = parseInt(color, 16);
output["color"] = color;
if (title) {
output["title"] = title;
}
if (description) {
output["description"] = description;
}
if (url) {
output["url"] = url;
}
if (thumbnailurl) {
output["thumbnail"] = {
"url": thumbnailurl,
"proxy_url": thumbnailurl,
};
}
if (authorname || authorurl || authoricon) {
output["author"] = {};
}
if (authorname) {
output["author"]["name"] = authorname;
}
if (authorurl) {
output["author"]["url"] = authorurl;
}
if (authoricon) {
output["author"]["icon_url"] = authoricon;
output["author"]["proxy_icon_url"] = authoricon;
}
if (footertext) {
output["footer"] = {
"text": footertext
}
}
var fieldRows = $("#richembedmodal-fields > .row");
if (fieldRows.length) {
output["fields"] = [];
}
for (var i = 0; i < Math.min(fieldRows.length, 10); i++) {
var fieldRow = $(fieldRows[i]);
var fieldName = fieldRow.find("input.name").val().trim();
var fieldValue = fieldRow.find("input.value").val().trim();
if (fieldName && fieldValue) {
output["fields"].push({
"name": fieldName,
"value": fieldValue,
"inline": false,
});
}
}
return output;
}
function flashElement(element) {
var opacity = element.css("opacity");
@ -1378,47 +1553,50 @@
// if ($.inArray(disembed.type, ["rich", "link", "video"]) == -1) {
// continue;
// }
if (disembed.type == "image") {
var img = "<img class=\"image attachment materialboxed\" src=\"" + disembed.thumbnail.proxy_url + "\">";
emb.push(img);
continue;
}
disembed.isVideo = false;
if (disembed.type == "video") {
disembed.isVideo = true;
if (disembed.video) {
var url = new URL(disembed.video.url);
if (url.hostname.endsWith("twitch.tv")) {
if (url.searchParams.has("autoplay")) {
url.searchParams.set("autoplay", "false");
disembed.video.url = url.toString();
}
}
}
}
disembed.toRenderFooter = false;
if (disembed.footer) {
disembed.toRenderFooter = true;
} else if (disembed.timestamp) {
disembed.toRenderFooter = true;
}
disembed.footerVerticalBar = disembed.footer && disembed.timestamp;
if (disembed.timestamp) {
disembed.formatted_timestamp = moment(disembed.timestamp).format('ddd MMM Do, YYYY [at] h:mm A');
}
if (disembed.color) {
disembed.hexColor = "#" + disembed.color.toString(16);
}
var template = $('#mustache_richembed').html();
Mustache.parse(template);
var rendered = Mustache.render(template, disembed);
var rendered = render_embed(disembed);
emb.push(rendered);
}
}
return emb;
}
function render_embed(disembed) {
if (disembed.type == "image") {
var img = "<img class=\"image attachment materialboxed\" src=\"" + disembed.thumbnail.proxy_url + "\">";
return img;
}
disembed.isVideo = false;
if (disembed.type == "video") {
disembed.isVideo = true;
if (disembed.video) {
var url = new URL(disembed.video.url);
if (url.hostname.endsWith("twitch.tv")) {
if (url.searchParams.has("autoplay")) {
url.searchParams.set("autoplay", "false");
disembed.video.url = url.toString();
}
}
}
}
disembed.toRenderFooter = false;
if (disembed.footer) {
disembed.toRenderFooter = true;
} else if (disembed.timestamp) {
disembed.toRenderFooter = true;
}
disembed.footerVerticalBar = disembed.footer && disembed.timestamp;
if (disembed.timestamp) {
disembed.formatted_timestamp = moment(disembed.timestamp).format('ddd MMM Do, YYYY [at] h:mm A');
}
if (disembed.color) {
disembed.hexColor = "#" + disembed.color.toString(16);
}
var template = $('#mustache_richembed').html();
Mustache.parse(template);
var rendered = Mustache.render(template, disembed);
return rendered;
}
function parse_message_reactions(reactions) {
var reacts = []
@ -2010,12 +2188,15 @@
if (event.keyCode == 16) {
shift_pressed = true;
}
if(event.keyCode == 13 && !shift_pressed && ($(this).val().length >= 1 || $("#fileinput").val().length >= 1)) {
if(event.keyCode == 13 && !shift_pressed && ($(this).val().length >= 1 || $("#fileinput").val().length >= 1 || $("#richembedmodal-object").val().length >= 1)) {
$(this).val($.trim($(this).val()));
$(this).blur();
$("#messagebox-richembedmodal").attr('readonly', true);
$("#messagebox-filemodal").attr('readonly', true);
$("#proceed_fileupload_btn").attr("disabled", true);
$("#proceed_richembedmodal_btn").attr("disabled", true);
$("#messagebox").attr('readonly', true);
$("#richembedmodal-left input").attr('readonly', true);
$("#send-msg-btn").attr("disabled", true);
var emojiConvertor = new EmojiConvertor();
emojiConvertor.init_env();
@ -2028,12 +2209,18 @@
file = $("#fileinput")[0].files[0];
}
$("#filemodalprogress").show();
var funct = post(selected_channel, messageInput, file);
var richembed = $("#richembedmodal-object").val();
if (!richembed) {
richembed = null;
}
var funct = post(selected_channel, messageInput, file, richembed);
funct.done(function(data) {
$("#messagebox").val("");
$("#messagebox-filemodal").val("");
$("#fileinput").val("");
$("#richembedmodal-object").val("");
$("#filemodal").modal("close");
$("#richembedmodal").modal("close");
});
funct.fail(function(data) {
Materialize.toast('Failed to send message.', 10000);
@ -2055,6 +2242,9 @@
$("#messagebox-filemodal").attr('readonly', false);
$("#proceed_fileupload_btn").attr("disabled", false);
$("#filemodalprogress").hide();
$("#messagebox-richembedmodal").attr('readonly', false);
$("#proceed_richembedmodal_btn").attr("disabled", false);
$("#richembedmodal-left input").attr('readonly', false);
$("#send-msg-btn").attr("disabled", false);
if ($("#filemodal").is(":visible")) {
$("#messagebox-filemodal").focus();
@ -2086,6 +2276,28 @@
$("#messagebox").trigger(jQuery.Event("keydown", { keyCode: 13 } ));
}
});
$("#messagebox-richembedmodal").keyup(function (event) {
if (event.keyCode == 16) {
shift_pressed = false;
}
});
$("#messagebox-richembedmodal").keydown(function (event) {
if ($(this).val().length == 1) {
$(this).val($.trim($(this).val()));
}
if (event.keyCode == 16) {
shift_pressed = true;
}
if(event.keyCode == 13 && !shift_pressed) {
$(this).val($.trim($(this).val()));
$(this).blur();
$("#messagebox").val($(this).val());
$("#messagebox").trigger(jQuery.Event("keydown", { keyCode: 13 } ));
}
});
$("#send-msg-btn").click(function () {
$("#messagebox").focus();