Add custom scrollbar

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 <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",

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

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

webapp/titanembeds/templates/embed.html.j2

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