mirror of
https://github.com/TitanEmbeds/Titan.git
synced 2024-12-24 14:07:03 +01:00
Add custom scrollbar
This commit is contained in:
Jeremy Zhang
parent
cc2ea3d68b
commit
e820587e15
@ -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",
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user