mirror of
https://github.com/TitanEmbeds/Titan.git
synced 2025-06-17 03:45:25 +02:00
Basic embed interface + login to embed client
This commit is contained in:
Jeremy Zhang
130
titanembeds/static/css/embedstyle.css
Normal file
130
titanembeds/static/css/embedstyle.css
Normal file
@ -0,0 +1,130 @@
|
||||
html {
|
||||
background-color: #455a64;
|
||||
color: white;
|
||||
}
|
||||
|
||||
main {
|
||||
min-height: calc(100vh - 80px);
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 50px;
|
||||
background-color: #37474f;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: #263238;
|
||||
background: linear-gradient(rgba(38, 50, 56, 1), rgba(255,0,0,0));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
nav .brand-logo {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 993px) {
|
||||
.container {
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
.side-nav {
|
||||
color: white;
|
||||
background-color: #607d8b;
|
||||
}
|
||||
|
||||
.side-nav .userView .name {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.side-nav li>a {
|
||||
color: #eceff1;
|
||||
}
|
||||
|
||||
.side-nav .subheader {
|
||||
color: #cfd8dc;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
.divider {
|
||||
background-color: #90a4ae;
|
||||
}
|
||||
|
||||
.channel-hash {
|
||||
font-size: 95%;
|
||||
color: #b0bec5;
|
||||
}
|
||||
|
||||
.membercircle {
|
||||
margin-top: 5px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.membername {
|
||||
position: absolute;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.chatcontent {
|
||||
padding-left: 1%;
|
||||
padding-top: 1%;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 601px) {
|
||||
nav a.button-collapse {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.chatusername {
|
||||
font-weight: bold;
|
||||
color: #eceff1;
|
||||
}
|
||||
|
||||
.chattimestamp {
|
||||
font-size: 10px;
|
||||
color: #90a4ae;
|
||||
}
|
||||
|
||||
.footercontainer {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.currentuserchip {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -6px;
|
||||
padding: 6px;
|
||||
padding-right: 9px;
|
||||
background-color: #455a64;
|
||||
}
|
||||
|
||||
.currentuserimage {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.currentusername {
|
||||
position: relative;
|
||||
top: 7px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
position: relative;
|
||||
top: -19px;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: #546e7a;
|
||||
}
|
||||
216
titanembeds/static/js/embed.js
Normal file
216
titanembeds/static/js/embed.js
Normal file
@ -0,0 +1,216 @@
|
||||
/* global $ */
|
||||
/* global Materialize */
|
||||
/* global Mustache */
|
||||
/* global guild_id */
|
||||
|
||||
var logintimer; // timer to keep track of user inactivity after hitting login
|
||||
|
||||
function resize_messagebox() {
|
||||
var namebox_width = $("#nameplate").outerWidth(true);
|
||||
var screen_width = $(document).width();
|
||||
$("#messageboxouter").width(screen_width - namebox_width - 40);
|
||||
}
|
||||
|
||||
function query_guild() {
|
||||
var funct = $.ajax({
|
||||
dataType: "json",
|
||||
url: "/api/query_guild",
|
||||
data: {"guild_id": guild_id}
|
||||
});
|
||||
return funct.promise();
|
||||
}
|
||||
|
||||
function create_authenticated_user() {
|
||||
var funct = $.ajax({
|
||||
method: "POST",
|
||||
dataType: "json",
|
||||
url: "/api/create_authenticated_user",
|
||||
data: {"guild_id": guild_id}
|
||||
});
|
||||
return funct.promise();
|
||||
}
|
||||
|
||||
function create_unauthenticated_user(username) {
|
||||
var funct = $.ajax({
|
||||
method: "POST",
|
||||
dataType: "json",
|
||||
url: "/api/create_unauthenticated_user",
|
||||
data: {"username": username, "guild_id": guild_id}
|
||||
});
|
||||
return funct.promise();
|
||||
}
|
||||
|
||||
function fetch(channel_id, after=null) {
|
||||
var funct = $.ajax({
|
||||
method: "GET",
|
||||
dataType: "json",
|
||||
url: "/api/fetch",
|
||||
data: {"channel_id": channel_id, "after": after}
|
||||
});
|
||||
return funct.promise();
|
||||
}
|
||||
|
||||
$(function(){
|
||||
resize_messagebox();
|
||||
|
||||
$("#loginmodal").modal({
|
||||
dismissible: false, // Modal can be dismissed by clicking outside of the modal
|
||||
opacity: .5, // Opacity of modal background
|
||||
inDuration: 300, // Transition in duration
|
||||
outDuration: 200, // Transition out duration
|
||||
startingTop: '4%', // Starting top style attribute
|
||||
endingTop: '10%', // Ending top style attribute
|
||||
}
|
||||
);
|
||||
|
||||
var guild = query_guild();
|
||||
guild.fail(function() {
|
||||
$('#loginmodal').modal('open');
|
||||
});
|
||||
|
||||
guild.done(function(data) {
|
||||
initialize_embed(data);
|
||||
//$('#loginmodal').modal('open');
|
||||
});
|
||||
});
|
||||
|
||||
function lock_login_fields() {
|
||||
$("#loginProgress").show();
|
||||
$("#discordlogin_btn").attr("disabled",true);
|
||||
$("#custom_username_field").prop("disabled",true);
|
||||
logintimer = setTimeout(function() {
|
||||
unlock_login_fields();
|
||||
}, 60000);
|
||||
}
|
||||
|
||||
function unlock_login_fields() {
|
||||
$("#loginProgress").hide();
|
||||
$("#discordlogin_btn").attr("disabled",false);
|
||||
$("#custom_username_field").prop("disabled",false);
|
||||
clearTimeout(logintimer);
|
||||
}
|
||||
|
||||
function initialize_embed(guildobj) {
|
||||
$('#loginmodal').modal('close');
|
||||
unlock_login_fields();
|
||||
if (guildobj === undefined) {
|
||||
var guild = query_guild();
|
||||
guild.done(function(data) {
|
||||
prepare_guild(data);
|
||||
});
|
||||
} else {
|
||||
prepare_guild(guildobj);
|
||||
}
|
||||
}
|
||||
|
||||
function prepare_guild(guildobj) {
|
||||
console.log(guildobj);
|
||||
fill_channels(guildobj.channels);
|
||||
fill_discord_members(guildobj.discordmembers);
|
||||
fill_authenticated_users(guildobj.embedmembers.authenticated);
|
||||
fill_unauthenticated_users(guildobj.embedmembers.unauthenticated);
|
||||
}
|
||||
|
||||
function fill_channels(channels) {
|
||||
var template = $('#mustache_channellistings').html();
|
||||
Mustache.parse(template);
|
||||
$("#channels-list").empty();
|
||||
for (var i = 0; i < channels.length; i++) {
|
||||
var chan = channels[i];
|
||||
var rendered = Mustache.render(template, {"channelid": chan.id, "channelname": chan.name});
|
||||
$("#channels-list").append(rendered);
|
||||
}
|
||||
}
|
||||
|
||||
function fill_discord_members(discordmembers) {
|
||||
var template = $('#mustache_authedusers').html();
|
||||
Mustache.parse(template);
|
||||
$("#discord-members").empty();
|
||||
for (var i = 0; i < discordmembers.length; i++) {
|
||||
var member = discordmembers[i];
|
||||
var rendered = Mustache.render(template, {"id": member.id, "username": member.username, "avatar": member.avatar_url});
|
||||
$("#discord-members").append(rendered);
|
||||
}
|
||||
}
|
||||
|
||||
function fill_authenticated_users(users) {
|
||||
var template = $('#mustache_authedusers').html();
|
||||
Mustache.parse(template);
|
||||
$("#embed-discord-members").empty();
|
||||
for (var i = 0; i < users.length; i++) {
|
||||
var member = users[i];
|
||||
var rendered = Mustache.render(template, {"id": member.id, "username": member.username, "avatar": member.avatar_url});
|
||||
$("#embed-discord-members").append(rendered);
|
||||
}
|
||||
}
|
||||
|
||||
function fill_unauthenticated_users(users) {
|
||||
var template = $('#mustache_unauthedusers').html();
|
||||
Mustache.parse(template);
|
||||
$("#embed-unauth-users").empty();
|
||||
for (var i = 0; i < users.length; i++) {
|
||||
var member = users[i];
|
||||
var rendered = Mustache.render(template, {"username": member.username, "discriminator": member.discriminator});
|
||||
$("#embed-unauth-users").append(rendered);
|
||||
}
|
||||
}
|
||||
|
||||
function wait_for_discord_login() {
|
||||
_wait_for_discord_login(0);
|
||||
}
|
||||
|
||||
function _wait_for_discord_login(index) {
|
||||
setTimeout(function() {
|
||||
var usr = create_authenticated_user();
|
||||
usr.done(function(data) {
|
||||
initialize_embed();
|
||||
return;
|
||||
});
|
||||
usr.fail(function(data) {
|
||||
if (data.status == 403) {
|
||||
Materialize.toast('Authentication error! You have been banned.', 10000);
|
||||
} else if (index < 10) {
|
||||
_wait_for_discord_login(index + 1);
|
||||
}
|
||||
});
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
$("#discordlogin_btn").click(function() {
|
||||
lock_login_fields();
|
||||
wait_for_discord_login();
|
||||
});
|
||||
|
||||
$("#custom_username_field").keyup(function(event){
|
||||
if(event.keyCode == 13 && $(this).val().length >= 2 && $(this).val().length <= 32) {
|
||||
lock_login_fields();
|
||||
var usr = create_unauthenticated_user($(this).val());
|
||||
usr.done(function(data) {
|
||||
initialize_embed();
|
||||
});
|
||||
usr.fail(function(data) {
|
||||
if (data.status == 403) {
|
||||
Materialize.toast('Authentication error! You have been banned.', 10000);
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
$(window).resize(function() {
|
||||
resize_messagebox();
|
||||
});
|
||||
|
||||
$('#guild-btn').sideNav({
|
||||
menuWidth: 300, // Default is 300
|
||||
edge: 'left', // Choose the horizontal origin
|
||||
closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
|
||||
draggable: true // Choose whether you can drag to open on touch screens
|
||||
}
|
||||
);
|
||||
|
||||
$('#members-btn').sideNav({
|
||||
menuWidth: 300, // Default is 300
|
||||
edge: 'right', // Choose the horizontal origin
|
||||
draggable: true // Choose whether you can drag to open on touch screens
|
||||
}
|
||||
);
|
||||
Reference in New Issue
Block a user