Add custom scrollbar

This commit is contained in:
Jeremy Zhang 2018-08-08 02:05:06 +00:00
parent cc2ea3d68b
commit e820587e15
4 changed files with 167 additions and 3 deletions

View File

@ -66,6 +66,138 @@ QUERY_PARAMETERS = [
},
],
},
{
"name": "scrollbartheme",
"type": "string",
"description": "Sets the scrollbar theme. View the demo of all themes <a href=\"http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html\" target=\"_blank\">here</a>. Or create your own theme by overriding <a href=\"https://i.imgur.com/SZPL0ag.png\" target=\"_blank\">these classes</a> and following at <a href=\"https://github.com/malihu/malihu-custom-scrollbar-plugin/blob/master/jquery.mCustomScrollbar.css\" target=\"_blank\">these examples</a>!",
"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",

View File

@ -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;
}

View File

@ -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({

View File

@ -8,6 +8,7 @@
<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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" integrity="sha256-JHGEmB629pipTkMag9aMaw32I8zle24p3FpsEeI6oZU=" crossorigin="anonymous" />
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/embed.css') }}">
<link id="css-theme" type="text/css" rel="stylesheet" href="">
@ -331,6 +332,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/soundmanager2/2.97a.20150601/script/soundmanager2-nodebug-jsmin.js" integrity="sha256-5KBL+8gS3BkWOs22YOrezN3Djl4pwodgZaPQY9hgu4Y=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js" integrity="sha256-THlgZSjqt7idNSdnUvGypTuXB5C4hV9kSuPYrbiq19o=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/caret/1.0.0/jquery.caret.min.js" integrity="sha256-NfP6KWI/oETcPbLcLXVAamn8K2wJrYH8ZIRrOf1XNUE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js" integrity="sha256-AKEjDiK2rz+d8TSPLNVNydvgJvOkG5veMAnc79FkiuE=" crossorigin="anonymous"></script>
<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>