mirror of
https://github.com/TitanEmbeds/Titan.git
synced 2024-11-15 02:21:21 +01:00
Implement an extensive emoji picker, Closes #92
This commit is contained in:
Jeremy Zhang
parent
e14e65d45a
commit
c1658e83f2
@ -782,49 +782,34 @@ p.mentioned span.chatmessage {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
#emoji-picker {
|
||||
color: black;
|
||||
.wdt-emoji-popup {
|
||||
position: fixed;
|
||||
bottom: 12%;
|
||||
bottom: 5%;
|
||||
right: 1%;
|
||||
z-index: 500;
|
||||
width: 350px;
|
||||
height: 110px;
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
background-color: #eceff1;
|
||||
border-radius: 5px;
|
||||
top: auto !important;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.wdt-emoji-picker {
|
||||
bottom: 13px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#wdt-emoji-search, #wdt-emoji-search:focus {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 320px) {
|
||||
.wdt-emoji-picker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#emoji-picker-content {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
padding: 5px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#emoji-picker h6 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#emoji-tray-toggle {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 14px;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
#emoji-tray-toggle > .btn-floating {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#emoji-tray-toggle > .btn-floating > i {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
@media only screen and (min-device-width: 321px) {
|
||||
.wdt-emoji-picker {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#usercard .avatar {
|
||||
|
||||
@ -17,6 +17,8 @@
|
||||
/* global unauth_captcha_enabled */
|
||||
/* global soundManager */
|
||||
/* global disabled */
|
||||
/* global wdtEmojiBundle */
|
||||
/* global EmojiConvertor */
|
||||
|
||||
(function () {
|
||||
const theme_options = ["DiscordDark", "MetroEdge", "BetterTitan"]; // All the avaliable theming names
|
||||
@ -204,40 +206,6 @@
|
||||
$("#loginmodal").modal("open");
|
||||
});
|
||||
|
||||
$("#emoji-tray-toggle").click(function () {
|
||||
$("#emoji-picker").fadeToggle();
|
||||
var offset = $("#emoji-tray-toggle").offset().top;
|
||||
$("#emoji-picker").offset({"top": offset-120});
|
||||
$("#emoji-picker-emojis").html("");
|
||||
var template = $('#mustache_message_emoji').html();
|
||||
Mustache.parse(template);
|
||||
for (var i = 0; i < emoji_store.length; i++) {
|
||||
var emoji = emoji_store[i];
|
||||
var rendered = Mustache.render(template, {"id": emoji.id, "name": emoji.name, "animated": emoji.animated}).trim();
|
||||
var jqueryed = $(rendered);
|
||||
jqueryed.click(function () {
|
||||
var emote_name = $(this).attr("data-tooltip");
|
||||
place_emoji(emote_name);
|
||||
});
|
||||
$("#emoji-picker-emojis").append(jqueryed);
|
||||
}
|
||||
$('.tooltipped').tooltip();
|
||||
});
|
||||
|
||||
$("#chatcontent").click(function () {
|
||||
var emojipck_display = $('#emoji-picker').css('display');
|
||||
if (emojipck_display != "none") {
|
||||
$("#emoji-picker").fadeToggle();
|
||||
}
|
||||
});
|
||||
|
||||
$("#messagebox").click(function () {
|
||||
var emojipck_display = $('#emoji-picker').css('display');
|
||||
if (emojipck_display != "none") {
|
||||
$("#emoji-picker").fadeToggle();
|
||||
}
|
||||
});
|
||||
|
||||
$("#proceed_nsfw_btn").click(function () {
|
||||
var channel_id = $("#proceed_nsfw_btn").attr("channel_id");
|
||||
var should_animate = parseInt($("#proceed_nsfw_btn").attr("should_animate"));
|
||||
@ -263,6 +231,16 @@
|
||||
hljs.configure({useBR: true});
|
||||
linkify.options.defaults.ignoreTags = ["code"];
|
||||
|
||||
wdtEmojiBundle.defaults.emojiSheets = {
|
||||
'apple': 'https://cdnjs.cloudflare.com/ajax/libs/wdt-emoji-bundle/0.2.1/sheets/sheet_apple_64_indexed_128.png',
|
||||
'google': 'https://cdnjs.cloudflare.com/ajax/libs/wdt-emoji-bundle/0.2.1/sheets/sheet_google_64_indexed_128.png',
|
||||
'twitter': 'https://cdnjs.cloudflare.com/ajax/libs/wdt-emoji-bundle/0.2.1/sheets/sheet_twitter_64_indexed_128.png',
|
||||
'emojione': 'https://cdnjs.cloudflare.com/ajax/libs/wdt-emoji-bundle/0.2.1/sheets/sheet_emojione_64_indexed_128.png'
|
||||
};
|
||||
wdtEmojiBundle.defaults.pickerColors = ['gray'];
|
||||
wdtEmojiBundle.defaults.emojiType = 'twitter';
|
||||
wdtEmojiBundle.init('#messagebox');
|
||||
|
||||
var themeparam = getParameterByName('theme');
|
||||
var localstore_theme = localStorage.getItem("theme");
|
||||
if ((themeparam && $.inArray(themeparam, theme_options) != -1) || (localstore_theme)) {
|
||||
@ -520,6 +498,7 @@
|
||||
function prepare_guild(guildobj) {
|
||||
global_guest_icon = guildobj.guest_icon;
|
||||
emoji_store = guildobj.emojis;
|
||||
update_emoji_picker();
|
||||
guild_roles_list = guildobj.roles;
|
||||
fill_channels(guildobj.channels);
|
||||
fill_discord_members(guildobj.discordmembers);
|
||||
@ -627,14 +606,24 @@
|
||||
}
|
||||
}
|
||||
|
||||
function place_emoji(emoji_name) {
|
||||
if (!$('#messagebox').prop('disabled')) {
|
||||
$('#messagebox').val( $('#messagebox').val() + emoji_name + " " );
|
||||
$("#messagebox").focus();
|
||||
function update_emoji_picker() {
|
||||
var emojis = wdtEmojiBundle.listCustomEmojis();
|
||||
var short_names = [];
|
||||
for (var i = 0; i < emojis.length; i++) {
|
||||
short_names.push(emojis.short_name);
|
||||
}
|
||||
var emojipck_display = $('#emoji-picker').css('display');
|
||||
if (emojipck_display != "none") {
|
||||
$("#emoji-picker").fadeToggle();
|
||||
for (var i = 0; i < short_names.length; i++) {
|
||||
wdtEmojiBundle.removeCustomEmoji(short_names[i]);
|
||||
}
|
||||
for (var i = 0; i < emoji_store.length; i++) {
|
||||
var emote = emoji_store[i];
|
||||
var img_url = "https://cdn.discordapp.com/emojis/" + emote.id;
|
||||
if (emote.animated) {
|
||||
img_url += ".gif";
|
||||
} else {
|
||||
img_url += ".png";
|
||||
}
|
||||
wdtEmojiBundle.addCustomEmoji(emote.name, emote.name, img_url);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1475,7 +1464,12 @@
|
||||
$(this).val($.trim($(this).val()));
|
||||
$(this).blur();
|
||||
$("#messagebox").attr('readonly', true);
|
||||
var funct = post(selected_channel, $(this).val());
|
||||
var emojiConvertor = new EmojiConvertor();
|
||||
emojiConvertor.init_env();
|
||||
emojiConvertor.replace_mode = "unified";
|
||||
emojiConvertor.allow_native = true;
|
||||
var messageInput = emojiConvertor.replace_colons($(this).val());
|
||||
var funct = post(selected_channel, messageInput);
|
||||
funct.done(function(data) {
|
||||
$("#messagebox").val("");
|
||||
});
|
||||
@ -1654,6 +1648,7 @@
|
||||
|
||||
socket.on("GUILD_EMOJIS_UPDATE", function (emo) {
|
||||
emoji_store = emo;
|
||||
update_emoji_picker();
|
||||
});
|
||||
|
||||
socket.on("GUILD_UPDATE", function (guil) {
|
||||
|
||||
21
webapp/titanembeds/static/js/vendor/emoji.min.js
vendored
Normal file
21
webapp/titanembeds/static/js/vendor/emoji.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
66
webapp/titanembeds/static/js/vendor/wdt-emoji-bundle.min.js
vendored
Normal file
66
webapp/titanembeds/static/js/vendor/wdt-emoji-bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -7,6 +7,7 @@
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" integrity="sha256-e22BQKCF7bb/h/4MFJ1a4lTRR2OuAe8Hxa/3tgU5Taw=" crossorigin="anonymous" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css" integrity="sha256-90Y+fvi28WF+3jKH4tHEkoQ9WLeFKJjpvCPNOtU9ZvU=" crossorigin="anonymous" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spinkit/1.2.5/spinners/2-double-bounce.min.css" integrity="sha256-EUobIj2z8wTjkWEwkjqubfq0NEqgOoNScgHP1oUSU7M=" crossorigin="anonymous" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/wdt-emoji-bundle/0.2.1/wdt-emoji-bundle.min.css" integrity="sha256-5+pPkh0iWNYFrqNU7G36rsHynAmXNpL4rq6/NI29mmk=" crossorigin="anonymous" />
|
||||
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/embedstyle.css') }}">
|
||||
<link id="css-theme" type="text/css" rel="stylesheet" href="">
|
||||
|
||||
@ -247,26 +248,52 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="emoji-picker">
|
||||
<div id="emoji-picker-content">
|
||||
<div class="row">
|
||||
<h6>{{ _("Server Emoji") }}</h6>
|
||||
<div id="emoji-picker-emojis"></div>
|
||||
<div class="wdt-emoji-popup">
|
||||
<a href="#" class="wdt-emoji-popup-mobile-closer"> × </a>
|
||||
<div class="wdt-emoji-menu-content">
|
||||
<div id="wdt-emoji-menu-header">
|
||||
<a class="wdt-emoji-tab active" data-group-name="Recent"></a>
|
||||
<a class="wdt-emoji-tab" data-group-name="Custom"></a>
|
||||
<a class="wdt-emoji-tab" data-group-name="People"></a>
|
||||
<a class="wdt-emoji-tab" data-group-name="Nature"></a>
|
||||
<a class="wdt-emoji-tab" data-group-name="Foods"></a>
|
||||
<a class="wdt-emoji-tab" data-group-name="Activity"></a>
|
||||
<a class="wdt-emoji-tab" data-group-name="Places"></a>
|
||||
<a class="wdt-emoji-tab" data-group-name="Objects"></a>
|
||||
<a class="wdt-emoji-tab" data-group-name="Symbols"></a>
|
||||
<a class="wdt-emoji-tab" data-group-name="Flags"></a>
|
||||
</div>
|
||||
<div class="wdt-emoji-scroll-wrapper">
|
||||
<div id="wdt-emoji-menu-items">
|
||||
<input id="wdt-emoji-search" type="text" placeholder="Search">
|
||||
<h3 id="wdt-emoji-search-result-title">Search Results</h3>
|
||||
<div class="wdt-emoji-sections"></div>
|
||||
<div id="wdt-emoji-no-result">No emoji found</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wdt-emoji-footer">
|
||||
<div id="wdt-emoji-preview">
|
||||
<span id="wdt-emoji-preview-img"></span>
|
||||
<div id="wdt-emoji-preview-text">
|
||||
<span id="wdt-emoji-preview-name"></span><br>
|
||||
<span id="wdt-emoji-preview-aliases"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wdt-emoji-preview-bundle">
|
||||
<span>Pick-a-moji</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer id="footer" class="footer">
|
||||
<div id="emoji-tray-toggle">
|
||||
<a class="btn-floating btn-large waves-effect waves-light"><i class="material-icons">tag_faces</i></a>
|
||||
</div>
|
||||
<div id="footercontainer" class="footercontainer">
|
||||
<div class="currentuserchip" id="nameplate">
|
||||
<div id="currentuserimage_parent"><img id="currentuserimage" src="" class="circle currentuserimage" style="display: none;"></div>
|
||||
<div id="currentusername" class="currentusername"><span id="curuser_name">Titan</span><span id="curuser_discrim">#0001</span></div>
|
||||
</div>
|
||||
<div id="messageboxouter" class="input-field inline">
|
||||
<textarea placeholder="Enter message" id="messagebox" type="text" class="materialize-textarea" rows="1"></textarea>
|
||||
<textarea placeholder="Enter message" id="messagebox" type="text" class="materialize-textarea wdt-emoji-open-on-colon" rows="1"></textarea>
|
||||
<span id="visitor_mode_message" style="display:none;"><span id="visitor_mode_message_note">{{ _("Please login to post a message.") }}</span> <a id="visitor_login_btn" class="waves-effect waves-light btn">{{ _("Login") }}</a></span>
|
||||
</div>
|
||||
</div>
|
||||
@ -295,6 +322,8 @@
|
||||
|
||||
<script src="{{ url_for("static", filename="js/vendor/highlight.pack.js") }}"></script>
|
||||
<script src="{{ url_for("static", filename="js/vendor/jquery.balloon.min.js") }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/vendor/emoji.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/vendor/wdt-emoji-bundle.min.js') }}"></script>
|
||||
|
||||
{% raw %}
|
||||
<script id="mustache_channellistings" type="text/template">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user