feat: #8734, move slideout to package.json

install/package.json

@@ -116,6 +116,7 @@
         "serve-favicon": "^2.5.0",
         "sharp": "0.26.1",
         "sitemap": "^6.1.0",
+        "slideout": "1.0.1",
         "socket.io": "2.3.0",
         "socket.io-adapter-cluster": "^1.0.1",
         "socket.io-adapter-postgres": "^1.2.1",

public/src/admin/.eslintrc

@@ -1,7 +1,5 @@
 {
 	"globals": {
-		"Sortable": true,
+		"Sortable": true
-		"Slideout": true,
-		"NProgress": true
 	}
 }

public/src/admin/admin.js

@@ -151,58 +151,60 @@
 	}
 
 	function configureSlidemenu() {
-		var env = utils.findBootstrapEnvironment();
+		require(['slideout'], function (Slideout) {
+			var env = utils.findBootstrapEnvironment();
 
-		var slideout = new Slideout({
+			var slideout = new Slideout({
-			panel: document.getElementById('panel'),
+				panel: document.getElementById('panel'),
-			menu: document.getElementById('menu'),
+				menu: document.getElementById('menu'),
-			padding: 256,
+				padding: 256,
-			tolerance: 70,
+				tolerance: 70,
-		});
+			});
-
-		if (env === 'md' || env === 'lg') {
-			slideout.disableTouch();
-		}
-
-		$('#mobile-menu').on('click', function () {
-			slideout.toggle();
-		});
-
-		$('#menu a').on('click', function () {
-			slideout.close();
-		});
-
-		$(window).on('resize', function () {
-			slideout.close();
-
-			env = utils.findBootstrapEnvironment();
 
 			if (env === 'md' || env === 'lg') {
 				slideout.disableTouch();
+			}
+
+			$('#mobile-menu').on('click', function () {
+				slideout.toggle();
+			});
+
+			$('#menu a').on('click', function () {
+				slideout.close();
+			});
+
+			$(window).on('resize', function () {
+				slideout.close();
+
+				env = utils.findBootstrapEnvironment();
+
+				if (env === 'md' || env === 'lg') {
+					slideout.disableTouch();
+					$('#header').css({
+						position: 'relative',
+					});
+				} else {
+					slideout.enableTouch();
+					$('#header').css({
+						position: 'fixed',
+					});
+				}
+			});
+
+			function onOpeningMenu() {
 				$('#header').css({
-					position: 'relative',
+					top: ($('#panel').position().top * -1) + 'px',
-				});
+					position: 'absolute',
-			} else {
-				slideout.enableTouch();
-				$('#header').css({
-					position: 'fixed',
 				});
 			}
-		});
 
-		function onOpeningMenu() {
+			slideout.on('open', onOpeningMenu);
-			$('#header').css({
-				top: ($('#panel').position().top * -1) + 'px',
-				position: 'absolute',
-			});
-		}
 
-		slideout.on('open', onOpeningMenu);
+			slideout.on('close', function () {
-
+				$('#header').css({
-		slideout.on('close', function () {
+					top: '0px',
-			$('#header').css({
+					position: 'fixed',
-				top: '0px',
+				});
-				position: 'fixed',
 			});
 		});
 	}

src/meta/js.js

@@ -92,7 +92,6 @@ JS.scripts = {
 		'public/vendor/semver/semver.browser.js',
 		'public/vendor/jquery/serializeObject/jquery.ba-serializeobject.min.js',
 		'public/vendor/jquery/deserialize/jquery.deserialize.min.js',
-		'public/vendor/slideout/slideout.min.js',
 	],
 
 	// modules listed below are built (/src/modules) so they can be defined anonymously
@@ -106,6 +105,7 @@ JS.scripts = {
 		'clipboard.js': 'node_modules/clipboard/dist/clipboard.min.js',
 		'nprogress.js': 'node_modules/nprogress/nprogress.js',
 		'tinycon.js': 'node_modules/tinycon/tinycon.js',
+		'slideout.js': 'node_modules/slideout/dist/slideout.min.js',
 	},
 };