From e820587e155a0f0dca7adcb918313acd5c4146c1 Mon Sep 17 00:00:00 2001 From: Jeremy Zhang Date: Wed, 8 Aug 2018 02:05:06 +0000 Subject: [PATCH] Add custom scrollbar --- webapp/titanembeds/constants.py | 132 +++++++++++++++++++++ webapp/titanembeds/static/css/embed.css | 12 +- webapp/titanembeds/static/js/embed.js | 24 +++- webapp/titanembeds/templates/embed.html.j2 | 2 + 4 files changed, 167 insertions(+), 3 deletions(-) diff --git a/webapp/titanembeds/constants.py b/webapp/titanembeds/constants.py index a18aa68..8d22fc8 100644 --- a/webapp/titanembeds/constants.py +++ b/webapp/titanembeds/constants.py @@ -66,6 +66,138 @@ QUERY_PARAMETERS = [ }, ], }, + { + "name": "scrollbartheme", + "type": "string", + "description": "Sets the scrollbar theme. View the demo of all themes here. Or create your own theme by overriding these classes and following at these examples!", + "example": "3d-dark", + "options": [ + { + "name": "light", + "default": True, + }, + { + "name": "dark", + "default": False, + }, + { + "name": "minimal", + "default": False, + }, + { + "name": "minimal-dark", + "default": False, + }, + { + "name": "light-2", + "default": False, + }, + { + "name": "dark-2", + "default": False, + }, + { + "name": "light-3", + "default": False, + }, + { + "name": "dark-3", + "default": False, + }, + { + "name": "light-thick", + "default": False, + }, + { + "name": "dark-thick", + "default": False, + }, + { + "name": "light-thin", + "default": False, + }, + { + "name": "dark-thin", + "default": False, + }, + { + "name": "inset", + "default": False, + }, + { + "name": "inset-dark", + "default": False, + }, + { + "name": "inset-2", + "default": False, + }, + { + "name": "inset-2-dark", + "default": False, + }, + { + "name": "inset-3", + "default": False, + }, + { + "name": "inset-3-dark", + "default": False, + }, + { + "name": "rounded", + "default": False, + }, + { + "name": "rounded-dark", + "default": False, + }, + { + "name": "rounded-dots", + "default": False, + }, + { + "name": "rounded-dots-dark", + "default": False, + }, + { + "name": "3d", + "default": False, + }, + { + "name": "3d-dark", + "default": False, + }, + { + "name": "3d-thick", + "default": False, + }, + { + "name": "3d-thick-dark", + "default": False, + }, + { + "name": "custom", + "default": False, + }, + ], + }, + { + "name": "showscrollbar", + "type": "boolean", + "description": "Shows the scrollbar permanently without autohiding.", + "example": "true", + "options": [ + { + "name": "true", + "default": False, + }, + { + "name": "false", + "default": True, + }, + ], + }, { "name": "theme", "type": "string", diff --git a/webapp/titanembeds/static/css/embed.css b/webapp/titanembeds/static/css/embed.css index 4904c11..44379e8 100644 --- a/webapp/titanembeds/static/css/embed.css +++ b/webapp/titanembeds/static/css/embed.css @@ -48,9 +48,19 @@ html { } } +body, #overall-main-content { + height: 100vh; +} + +#overall-main-content { + overflow-y: hidden; +} + main { + overflow-y: scroll; min-height: calc(100vh - 80px); overflow-x: hidden; + height: 100%; } footer { @@ -172,7 +182,7 @@ nav .brand-logo { padding-left: 1%; padding-top: 1%; padding-bottom: 40px; - margin-bottom: 13px; + margin-bottom: 90px; word-wrap: break-word; } diff --git a/webapp/titanembeds/static/js/embed.js b/webapp/titanembeds/static/js/embed.js index 64489a8..9267d20 100644 --- a/webapp/titanembeds/static/js/embed.js +++ b/webapp/titanembeds/static/js/embed.js @@ -328,7 +328,7 @@ if (!has_already_been_initially_resized) { has_already_been_initially_resized = true; if (has_handled_noscroll) { - $("html, body").animate({ scrollTop: $(document).height() }, "fast"); + $("main").mCustomScrollbar("scrollTo", "bottom", {scrollEasing:"easeOut"}); } else { has_handled_noscroll = true; Materialize.toast('Continue scrolling to read on...', 5000); @@ -352,6 +352,21 @@ } }); + var showScrollbar = getParameterByName("showscrollbar") == "true"; + if (showScrollbar) { + showScrollbar = 2; + } else { + showScrollbar = 0; + } + var scrollbarTheme = getParameterByName("scrollbartheme"); + if (!scrollbarTheme) { + scrollbarTheme = "light"; + } + $("main").mCustomScrollbar({ + alwaysShowScrollbar: showScrollbar, + theme: scrollbarTheme + }); + if (disabled) { Materialize.toast('This server is currently disabled. If you are an administrator of this server, please get in touch with a TitanEmbeds team member to lift the ban.', 100000); return; @@ -1304,12 +1319,17 @@ if ($("#chatcontent p:last-child.mentioned").length) { play_notification_sound("mention"); } + if (replace == null && jumpscroll) { if (!has_handled_noscroll) { has_handled_noscroll = true; Materialize.toast('Continue scrolling to read on...', 5000); } else { - $("html, body").animate({ scrollTop: $(document).height() }, "slow"); + $("main .mCSB_container").animate({ + top: -1 * ($("main .mCSB_container").height() - $(window).height()) + }, "slow", function () { + $("main").mCustomScrollbar("update"); + }); } } $('#chatcontent').linkify({ diff --git a/webapp/titanembeds/templates/embed.html.j2 b/webapp/titanembeds/templates/embed.html.j2 index b7ff2a0..06c1bd9 100644 --- a/webapp/titanembeds/templates/embed.html.j2 +++ b/webapp/titanembeds/templates/embed.html.j2 @@ -8,6 +8,7 @@ + @@ -331,6 +332,7 @@ +