diff --git a/.eslintrc.json b/.eslintrc.json index db7c93bd78..a8276d147f 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -170,7 +170,8 @@ "hotspots": false, "compose_ui": false, "common": false, - "panels": false + "panels": false, + "PerfectScrollbar": false }, "plugins": [ "eslint-plugin-empty-returns" diff --git a/package.json b/package.json index 687f549d4a..b313eea5ce 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "katex": "0.8.3", "moment": "2.21.0", "moment-timezone": "0.5.14", - "perfect-scrollbar": "0.7.1", + "perfect-scrollbar": "1.3.0", "plotly.js": "1.19.2", "script-loader": "0.7.2", "source-map-loader": "0.2.2", diff --git a/static/js/portico/help.js b/static/js/portico/help.js index 8a7258651e..8551d44860 100644 --- a/static/js/portico/help.js +++ b/static/js/portico/help.js @@ -1,4 +1,4 @@ -const perfectScrollbar = require('perfect-scrollbar'); +import PerfectScrollbar from 'perfect-scrollbar'; function registerCodeSection($codeSection) { const $li = $codeSection.find("ul.nav li"); @@ -94,12 +94,26 @@ function scrollToHash(container) { }); }; + var markdownPS = new PerfectScrollbar($(".markdown")[0], { + suppressScrollX: true, + useKeyboard: false, + wheelSpeed: 0.68, + scrollingThreshold: 50, + }); + + new PerfectScrollbar($(".sidebar")[0], { + suppressScrollX: true, + useKeyboard: false, + wheelSpeed: 0.68, + scrollingThreshold: 50, + }); + $(".sidebar.slide h2").click(function (e) { var $next = $(e.target).next(); if ($next.is("ul")) { $next.slideToggle("fast", "swing", function () { - perfectScrollbar.update($(".markdown")[0]); + markdownPS.update(); }); } }); @@ -124,7 +138,7 @@ function scrollToHash(container) { if (html_map[path]) { $(".markdown .content").html(html_map[path]); - perfectScrollbar.update(container); + markdownPS.update(); render_code_sections(); scrollToHash(container); } else { @@ -134,7 +148,7 @@ function scrollToHash(container) { html_map[path] = res; $(".markdown .content").html(html_map[path]); loading.name = null; - perfectScrollbar.update(container); + markdownPS.update(); scrollToHash(container); }); } @@ -155,20 +169,8 @@ function scrollToHash(container) { window.location.href = window.location.href.replace(/#.*/, '') + '#' + $(this).attr("id"); }); - perfectScrollbar.initialize($(".markdown")[0], { - suppressScrollX: true, - useKeyboard: false, - wheelSpeed: 0.68, - }); - - perfectScrollbar.initialize($(".sidebar")[0], { - suppressScrollX: true, - useKeyboard: false, - wheelSpeed: 0.68, - }); - window.onresize = function () { - perfectScrollbar.update($(".markdown")[0]); + markdownPS.update(); }; window.addEventListener("popstate", function () { diff --git a/static/js/ui.js b/static/js/ui.js index c20ca2ae54..aae2fe8b26 100644 --- a/static/js/ui.js +++ b/static/js/ui.js @@ -14,20 +14,24 @@ exports.replace_emoji_with_text = function (element) { }; exports.set_up_scrollbar = function (element) { - element.perfectScrollbar({ + var perfectScrollbar = new PerfectScrollbar(element[0], { suppressScrollX: true, useKeyboard: false, wheelSpeed: 0.68, + scrollingThreshold: 50, }); + element[0].perfectScrollbar = perfectScrollbar; }; exports.update_scrollbar = function (element) { element.scrollTop = 0; - element.perfectScrollbar('update'); + if (element[0].perfectScrollbar !== undefined) { + element[0].perfectScrollbar.update(); + } }; exports.destroy_scrollbar = function (element) { - element.perfectScrollbar('destroy'); + element[0].perfectScrollbar.destroy(); }; function update_message_in_all_views(message_id, callback) { diff --git a/static/styles/components.css b/static/styles/components.css index 179498a2d8..02f12677f2 100644 --- a/static/styles/components.css +++ b/static/styles/components.css @@ -66,11 +66,11 @@ a.no-underline:hover { font-style: italic; } -.ps:hover.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail > .ps__scrollbar-x { +.ps--scrolling-x > .ps__rail-x > .ps__thumb-x:hover { background-color: #606060; } -.ps:hover.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail > .ps__scrollbar-y { +.ps--scrolling-y > .ps__rail-y > .ps__thumb-y:hover { background-color: #606060; } diff --git a/static/styles/portico.css b/static/styles/portico.css index eee608e72d..f0444045b0 100644 --- a/static/styles/portico.css +++ b/static/styles/portico.css @@ -1799,7 +1799,7 @@ input.new-organization-button { -webkit-filter: brightness(0.7); } - .app.help .sidebar:not(.show) .ps__scrollbar-y-rail { + .app.help .sidebar:not(.show) .ps__rail-y { display: none; /* Hide y-scrollbar on collapsed sidebar view */ } } diff --git a/tools/update-prod-static b/tools/update-prod-static index 6be8e5e1eb..7b763578e1 100755 --- a/tools/update-prod-static +++ b/tools/update-prod-static @@ -78,7 +78,7 @@ subprocess.check_call(['cp', '-R', 'node_modules/katex/dist/fonts', stdout=fp, stderr=fp) CSS_FILES = [ - 'node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.css', + 'node_modules/perfect-scrollbar/css/perfect-scrollbar.css', 'node_modules/flatpickr/dist/flatpickr.css', 'node_modules/flatpickr/dist/plugins/confirmDate/confirmDate.css', ] diff --git a/tools/webpack.assets.json b/tools/webpack.assets.json index 73c64a3aa4..1167e7db9a 100644 --- a/tools/webpack.assets.json +++ b/tools/webpack.assets.json @@ -13,7 +13,7 @@ "./node_modules/moment-timezone/builds/moment-timezone-with-data.min.js" ], "help": [ - "./node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.js", + "./node_modules/perfect-scrollbar/dist/perfect-scrollbar.js", "./static/js/portico/help.js" ], "katex": "./node_modules/katex/dist/katex.min.js", diff --git a/version.py b/version.py index 7d5f939a7c..6669c8dd75 100644 --- a/version.py +++ b/version.py @@ -8,4 +8,4 @@ ZULIP_VERSION = "1.7.1+git" # Typically, adding a dependency only requires a minor version bump, and # removing a dependency requires a major version bump. -PROVISION_VERSION = '16.1' +PROVISION_VERSION = '17.0' diff --git a/yarn.lock b/yarn.lock index a96561632f..e8e220fbbf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4811,9 +4811,9 @@ pend@~1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50" -perfect-scrollbar@0.7.1: - version "0.7.1" - resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-0.7.1.tgz#0c256fb9c5cee401d60a299687a3f9a61487e0d5" +perfect-scrollbar@1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.3.0.tgz#61da56f94b58870d8e0a617bce649cee17d1e3b2" performance-now@^0.2.0: version "0.2.0" diff --git a/zproject/settings.py b/zproject/settings.py index 315ea1f268..f24edfe0b1 100644 --- a/zproject/settings.py +++ b/zproject/settings.py @@ -942,7 +942,7 @@ PIPELINE = { 'third/bootstrap/css/bootstrap.css', 'third/bootstrap/css/bootstrap-btn.css', 'third/bootstrap/css/bootstrap-responsive.css', - 'node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.css', + 'node_modules/perfect-scrollbar/css/perfect-scrollbar.css', ), 'output_filename': 'min/common.css' }, @@ -991,7 +991,7 @@ JS_SPECS = { 'third/jquery-throttle-debounce/jquery.ba-throttle-debounce.js', 'third/jquery-idle/jquery.idle.js', 'third/jquery-autosize/jquery.autosize.js', - 'node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.js', + 'node_modules/perfect-scrollbar/dist/perfect-scrollbar.js', 'third/lazyload/lazyload.js', 'third/spectrum/spectrum.js', 'third/sockjs/sockjs-0.3.4.js',