Limit context menu on mobile

css/style.css

@@ -212,15 +212,22 @@ div#t {
   border-bottom: 1px solid #D0D0D0;
   z-index: 30;
 }
+#top-menu .btn-group {
+  flex-direction: column;
+}
+.dropdown-toggle span {
+  /* Push dropdown triangle to the right end */
+  margin-right: auto;
+}
 div#t button.navbar-toggler {
   background-color: var(--btn-bg-color);
   width: 5rem;
 }
 div#t a {padding: 3px;}
-div#t div.navbar-nav a:hover {
+#t .navbar-nav a:not(.dropdown-item):hover {
   filter: brightness(1.3);
 }
-div#t div.navbar-nav a:active {padding: 4px 2px 2px 4px;}
+#t .navbar-nav a:active {padding: 4px 2px 2px 4px;}
 div#t div.TB_Separator {
   align-self: stretch;
   flex: 0 0 1px;
@@ -595,8 +602,8 @@ div.dlg-window .buttons-list {
     border-bottom: none;
     z-index: auto;
   }
-  div#t div.navbar-nav a:hover {
-    background: transparent url(../images/tb_bg.gif) no-repeat scroll center center;
+  #t .navbar-nav a:not(.dropdown-item):hover {
+    background: transparent url(../images/tb_bg.gif) no-repeat scroll left center;
     filter: none;
   }
   div#t .nav-link {

index.html

@@ -86,23 +86,27 @@
 				</button>	
 				<div class="collapse navbar-collapse px-1 py-2 py-md-0" id="top-menu">
 					<div class="navbar-nav flex-grow-1">
-						<a id="mnu_add" class="nav-link" href="#" onclick="theWebUI.showAdd(); return(false);" onfocus="this.blur()" uilangtitle="mnu_add">
-							<div id="add" class="nav-icon"></div>
-						</a>
-						<div class="TB_Separator"></div>
-						<a id="mnu_remove" class="nav-link" href="#" onclick="theWebUI.removeTorrent(); return(false);" onfocus="this.blur()" uilangtitle="mnu_remove">
-							<div id="remove" class="nav-icon"></div>
-						</a>
+						<div class="d-flex flex-row align-items-center">
+							<a id="mnu_add" class="nav-link flex-grow-1" href="#" onclick="theWebUI.showAdd(); return(false);" onfocus="this.blur()" uilangtitle="mnu_add">
+								<div id="add" class="nav-icon"></div>
+							</a>
+							<div class="TB_Separator"></div>
+							<a id="mnu_remove" class="nav-link flex-grow-1" href="#" onclick="theWebUI.removeTorrent(); return(false);" onfocus="this.blur()" uilangtitle="mnu_remove">
+								<div id="remove" class="nav-icon"></div>
+							</a>
+						</div>
 						<div class="TB_Separator"></div>
-						<a id="mnu_start" class="nav-link" href="#" onclick="theWebUI.start(); return(false);" onfocus="this.blur()" uilangtitle="mnu_start">
-							<div id="start" class="nav-icon"></div>
-						</a>
-						<a id="mnu_pause" class="nav-link" href="#" onclick="theWebUI.pause(); return(false);" onfocus="this.blur()" uilangtitle="mnu_pause">
-							<div id="pause" class="nav-icon"></div>
-						</a>
-						<a id="mnu_stop" class="nav-link" href="#" onclick="theWebUI.stop(); return(false);" onfocus="this.blur()" uilangtitle="mnu_stop">
-							<div id="stop" class="nav-icon"></div>
-						</a>
+						<div class="d-flex flex-row align-items-center">
+							<a id="mnu_start" class="nav-link flex-grow-1" href="#" onclick="theWebUI.start(); return(false);" onfocus="this.blur()" uilangtitle="mnu_start">
+								<div id="start" class="nav-icon"></div>
+							</a>
+							<a id="mnu_pause" class="nav-link flex-grow-1" href="#" onclick="theWebUI.pause(); return(false);" onfocus="this.blur()" uilangtitle="mnu_pause">
+								<div id="pause" class="nav-icon"></div>
+							</a>
+							<a id="mnu_stop" class="nav-link flex-grow-1" href="#" onclick="theWebUI.stop(); return(false);" onfocus="this.blur()" uilangtitle="mnu_stop">
+								<div id="stop" class="nav-icon"></div>
+							</a>
+						</div>
 						<div class="TB_Separator"></div>
 						<a id="mnu_settings" class="nav-link" href="#" onclick="theWebUI.showSettings(); return(false);" onfocus="this.blur()" uilangtitle="mnu_settings">
 							<div id="setting" class="nav-icon"></div>

js/plugins.js

@@ -48,7 +48,6 @@ function injectCSSText(text)
 var thePlugins =
 {
 	list: {},
-	topMenu: [],
 	restictions:
 	{
 		cantChangeToolbar: 	0x0001,
@@ -96,13 +95,6 @@ var thePlugins =
 		else
 			window.setTimeout( 'thePlugins.waitLoad("'+callback+'")', 500 );
 	},
-
-	registerTopMenu: function( plg, weight )
-	{
-		this.topMenu.push( { "name": plg.name, "weight": weight } );
-		this.topMenu.sort( function(a,b) { return(a.weight-b.weight); } );
-	}
-
 };
 
 function rPlugin( name, version, author, descr, restictions, help )
@@ -330,24 +322,81 @@ rPlugin.prototype.removePageFromTabs = function(id)
 	return(this);
 }
 
-rPlugin.prototype.registerTopMenu = function(weight)
-{
+/**
+ * Add a menu item for the plugin to the plugins' dropdown menu.
+ * @param {number} weight An interger that determines the position of the
+ * menu item in the dropdown menu. A higher value will make a lower position.
+ * If multiple items have the same value, newly added items will be at a
+ * lower position.
+ * @param {string} name Name to be shown on the dropdown menu item.
+ * @param {Function} onclick Function to be executed when clicking on the
+ * dropdown menu item.
+ * @returns {rPlugin}
+ */
+rPlugin.prototype.registerTopMenu = function(weight, name, onclick) {
 	if (this.canChangeToolbar()) {
 		if (!$$("mnu_plugins"))
-			this.addButtonToToolbar("plugins", theUILang.Plugins, "theWebUI.showPluginsMenu()", "help");
-		thePlugins.registerTopMenu(this, weight);
+			this.addButtonToToolbar("plugins", theUILang.Plugins, "", "help", true);
+		weight = iv(weight);
+		const newItem = $("<li>").data({weight:weight}).append(
+			$("<a>")
+				.addClass("dropdown-item")
+				.attr({href:"#"})
+				.on("click", onclick)
+				.text(name ?? this.name),
+		);
+		const dropdownMenu = $("#mnu_plugins").siblings("ul.dropdown-menu");
+		const beforeItem = dropdownMenu.find("li").filter((_, ele) => $(ele).data("weight") > weight);
+		if (beforeItem.length > 0) {
+			// Must call `.first()` here, otherwise the `newItem` will be inserted beore
+			// every item on the 'beforeItem' list.
+			beforeItem.first().before(newItem);
+		} else {
+			dropdownMenu.append(newItem);
+		}
 	}
 	return this;
 }
 
-rPlugin.prototype.addButtonToToolbar = function(id, name, onclick, idBefore) {
+/**
+ * Add a new button to the top menu.
+ * @param {string} id HTML `id` of the button. The exact `id` will be applied to
+ * the icon element of the button, and an id of `mnu_id` will be applied to the
+ * wrapper anchor of the button.
+ * @param {string} name Name of the button, will be applied as the tooltip text
+ * on desktop and description title on mobile.
+ * @param {Function | string} onclick Click handler of the button.
+ * @param {string} idBefore HTML `id` of an existing button for the new button
+ * to be inserted before. If no button is found, the new button will be added
+ * before the settings button.
+ * @param {boolean} isDropDown Whether the new button is a dropdown button,
+ * default is `false`.
+ * @returns {rPlugin}
+ */
+rPlugin.prototype.addButtonToToolbar = function(id, name, onclick, idBefore, isDropDown) {
 	if (this.canChangeToolbar()) {
-		const newBtn = $("<a>").attr(
-			{id:`mnu_${id}`, href:"#", onclick:onclick, onfocus:"this.blur();", title:`${name}...`}
-		).addClass("nav-link top-menu-item").append(
-			$("<div>").attr({id:id}).addClass("nav-icon"),
-			$("<span>").addClass("d-inline d-md-none").text(`${name}...`),
-		);
+		let newBtn = $("<a>")
+			.attr({id:`mnu_${id}`, href:"#", title:`${name}...`})
+			.on({
+				click: $type(onclick) === "function" ? () => onclick() : () => eval(onclick),
+				focus: (ev) => ev.target.blur(),
+			})
+			.addClass("nav-link top-menu-item")
+			.append(
+				$("<div>").attr({id:id}).addClass("nav-icon"),
+				$("<span>").addClass("d-inline d-md-none").text(`${name}...`),
+			);
+		// make a dropdown button if `isDropDown` is `true`
+		if (isDropDown) {
+			// wrap button in a group, with a dropdown menu
+			newBtn = $("<div>").addClass("btn-group").append(
+				newBtn
+					.addClass("dropdown-toggle")
+					.attr({"aria-expanded":false, "data-bs-toggle":"dropdown"}),
+				$("<ul>").addClass("dropdown-menu p-2").append(),
+			);
+		}
+
 		const beforeBtn = $(`#mnu_${idBefore}`);
 		beforeBtn && beforeBtn.length > 0 ? newBtn.insertBefore(beforeBtn) : newBtn.insertBefore($("#mnu_settings"));
 	}

js/webui.js

@@ -558,15 +558,6 @@ var theWebUI =
 // plugins
 //
 
-	showPluginsMenu: function()
-	{
-		theContextMenu.clear();
-		for( var item in thePlugins.topMenu )
-			thePlugins.get(thePlugins.topMenu[item].name).createPluginMenu();
-        	var offs = $("#plugins").offset();
-		theContextMenu.show(offs.left-5,offs.top+5+$("#plugins").height());
-	},
-
 	plgSelect: function(e, id)
 	{
 		if($type(id) && (e.which==3))

plugins/bulk_magnet/init.js

@@ -105,14 +105,6 @@ plugin.showBulkAdd = function()
 	theDialogManager.show("dlgBulkAdd");
 }
 
-plugin.createPluginMenu = function()
-{
-	if(this.enabled)
-	{
-		theContextMenu.add([theUILang.bulkAdd, plugin.showBulkAdd]);
-	}
-}
-
 plugin.bulkAdd = function()
 {
 	theWebUI.request("?action=bulkadd",[plugin.wasAdded, plugin]);
@@ -149,7 +141,7 @@ plugin.wasAdded = function(data)
 }
 
 plugin.onLangLoaded = function() {
-	this.registerTopMenu(9);
+	this.registerTopMenu(9, theUILang.bulkAdd, plugin.showBulkAdd);
 	const dlgBulkAddContent = $("<div>").addClass("cont fxcaret").append(
 		$("<textarea>").attr({id:"bulkadd"}).on("input", (ev) => {
 			$('#dlgBulkAdd .OK').prop('disabled', ev.target.value.trim() === '');

plugins/extratio/init.js

@@ -312,14 +312,8 @@ plugin.correctCSS = function()
 	}
 }
 
-plugin.createPluginMenu = function()
-{
-	if(this.enabled)
-		theContextMenu.add([theUILang.mnu_ratiorule, "theWebUI.showRatioRules()"]);
-}
-
 plugin.onLangLoaded = function() {
-	this.registerTopMenu(7);
+	this.registerTopMenu(7, theUILang.mnu_ratiorule, theWebUI.showRatioRules);
 	const dlgEditRatioRulesContent = $("<div>").addClass("cont fxcaret").append(
 		$("<div>").addClass("row").append(
 			$("<div>").addClass("col-md-6 d-flex flex-column align-items-center").append(

plugins/rssurlrewrite/init.js

@@ -8,7 +8,7 @@ theWebUI.maxRuleNo = 0;
 
 theWebUI.showRules = function()
 {
-	theWebUI.request("?action=getrules",[this.loadRules, this]);
+	theWebUI.request("?action=getrules",[theWebUI.loadRules, this]);
 }
 
 theWebUI.storeRuleParams = function()
@@ -250,14 +250,8 @@ if(plugin.canChangeMenu())
 	}
 }
 
-plugin.createPluginMenu = function()
-{
-	if(this.enabled)
-		theContextMenu.add([theUILang.mnu_rssurlrewrite, "theWebUI.showRules()"]);		
-}
-
 plugin.onLangLoaded = function() {
-	this.registerTopMenu(5);
+	this.registerTopMenu(5, theUILang.mnu_rssurlrewrite, theWebUI.showRules);
 	const dlgEditRulesContent = $("<div>").addClass("cont fxcaret").append(
 		$("<div>").addClass("row").append(
 			$("<div>").addClass("col-md-6 d-flex flex-column align-items-center").append(