dropdown() method expects target as option instead of first parameter

doc/changes.html

@@ -48,6 +48,7 @@ <h3 class="no-toc">Breaking changes since v1</h3>
 			<li>CSS class <code>inverted-indicator</code> of the carousel removed, use the <code class="css-class">dark</code> and <code class="css-class">not-dark</code> theme classes instead</li>
 			<li>Off-canvas <code>offcanvasopening</code>, <code>offcanvasopen</code>, <code>offcanvasclosing</code>, <code>offcanvasclose</code> events renamed to <a href="frontfire-ui-offcanvas.html#opening"><code>opening</code></a>, <a href="frontfire-ui-offcanvas.html#open"><code>open</code></a>, <a href="frontfire-ui-offcanvas.html#closing"><code>closing</code></a>, <a href="frontfire-ui-offcanvas.html#close-event"><code>close</code></a> (similar to modal)</li>
 			<li>Removed undocumented styles for <code data-lang="css">nav ul.menu</code>, modify the <a href="frontfire-ui-variables.html?s=@menu">--menu-*</a> CSS variables for that scope instead</li>
+			<li>The <a href="frontfire-core.html#dropdown"><code>dropdown()</code></a> plugin method no longer accepts the target element as first parameter. Instead, the <a href="frontfire-ui-dropdown.html#options">target property</a> must be set in the options object. This removes the last inconsistency with Frontfire UI plugin methods that now all have a single options parameter. The target can now also be specified as CSS selector string, also from a data-opt HTML attribute.</li>
 		</ul>
 
 		<hr class="double-margin">

doc/frontfire-core.html

@@ -5120,11 +5120,12 @@ <h3 id="dropdown">dropdown</h3>
 					<span class="plugin">Plugin:</span> <a href="frontfire-ui-dropdown.html">Dropdown</a>
 				</p>
 				<ul>
-					<li><code>dropdown(target, options)</code> → Dropdown plugin instance</li>
+					<li><code>dropdown(options)</code> → Dropdown plugin instance</li>
 				</ul>
 				<p>
 					Opens a dropdown with the selected element and places it at the specified target element.
-					The target elements must already have the <code class="css-class">dropdown</code> CSS class, it is not added by this method.
+					The options must at least set a target element.
+					The dropdown element must already have the <code class="css-class">dropdown</code> CSS class, it is not added by this method.
 					See the plugin page for examples.
 				</p>
 			</div>

doc/frontfire-ui-accordion.html

@@ -337,8 +337,8 @@ <h2 id="options">Options</h2>
 				</tr>
 				<tr>
 					<td><code>scrollOffsetElement</code></td>
-					<td>String, Node</td>
-					<td>Element whose height to consider when scrolling to an item, as CSS selector or Node. Both offsets are added.</td>
+					<td>Node, String</td>
+					<td>Element whose height to consider when scrolling to an item, as Node or CSS selector. Both offsets are added.</td>
 					<td>None</td>
 				</tr>
 			</tbody>

doc/frontfire-ui-draggable.html

@@ -289,20 +289,20 @@ <h2 id="options">Options</h2>
 				</tr>
 				<tr>
 					<td><code>cancel</code></td>
-					<td>String, Node(s)</td>
-					<td>The element(s) that cannot start a drag operation, as CSS selector within the scope of the element to drag, or Node (collection).</td>
+					<td>Node(s), String</td>
+					<td>The element(s) that cannot start a drag operation, as Node (collection) or CSS selector within the scope of the element to drag.</td>
 					<td>None</td>
 				</tr>
 				<tr>
 					<td><code>catchElement</code></td>
-					<td>String, Node(s)</td>
-					<td>An element that catches all pointer input and moves the draggable to that point. Specified as CSS selector or Node (collection).</td>
+					<td>Node(s), String</td>
+					<td>An element that catches all pointer input and moves the draggable to that point. Specified as Node (collection) or CSS selector.</td>
 					<td>None</td>
 				</tr>
 				<tr>
 					<td><code>containment</code></td>
-					<td>String, Node(s)</td>
-					<td>Constrains the drag movement inside the specified element, specified as CSS selector or Node (collection), or the “parent” of the dragged element or the “viewport”.</td>
+					<td>Node(s), String</td>
+					<td>Constrains the drag movement inside the specified element, specified as Node (collection) or CSS selector, or the “parent” of the dragged element or the “viewport”.</td>
 					<td>None</td>
 				</tr>
 				<tr>
@@ -325,8 +325,8 @@ <h2 id="options">Options</h2>
 				</tr>
 				<tr>
 					<td><code>handle</code></td>
-					<td>String, Node(s)</td>
-					<td>The element(s) that can start a drag operation, as CSS selector within the scope of the element to drag, or Node (collection).</td>
+					<td>Node(s), String</td>
+					<td>The element(s) that can start a drag operation, as Node (collection) or CSS selector within the scope of the element to drag.</td>
 					<td>The element to drag</td>
 				</tr>
 				<tr>
@@ -337,8 +337,8 @@ <h2 id="options">Options</h2>
 				</tr>
 				<tr>
 					<td><code>stack</code></td>
-					<td>String, Node(s)</td>
-					<td>The elements among which the dragged element will be pulled to the front. Specified as CSS selector or Node (collection).</td>
+					<td>Node(s), String</td>
+					<td>The elements among which the dragged element will be pulled to the front. Specified as Node (collection) or CSS selector.</td>
 					<td>None</td>
 				</tr>
 			</tbody>

doc/frontfire-ui-dropdown.html

@@ -42,8 +42,8 @@ <h2 id="description">Description</h2>
 		</p>
 		<p>
 			To open a dropdown element, call the <a href="frontfire-core.html#dropdown"><code>dropdown()</code></a> plugin function on the element to show as dropdown.
-			The function takes the target placement element and options as arguments.
-			The options are optional and can alternatively be specified as data-opt HTML attributes with the dropdown HTML element.
+			The function takes the options (including target placement element) as argument.
+			The options must at least set a target element and can alternatively be specified as data-opt HTML attributes with the dropdown HTML element.
 		</p>
 
 		<h2 id="example">Example</h2>
@@ -67,7 +67,7 @@ <h2 class="no-top-margin">Dropdown title</h2>
 			<script>
 				let dropdown;
 				F("#open-dropdown1").on("click", event => {
-					dropdown = F("#dropdown1").dropdown(event.currentTarget);
+					dropdown = F("#dropdown1").dropdown({ target: event.currentTarget });
 				});
 
 				F("#dropdown1").on("close", () => {
@@ -152,6 +152,12 @@ <h2 id="options">Options</h2>
 					<td>Additional CSS styles to add to the dropdown container. This can be any format supported by <a href="frontfire-core.html#style">Frontfire.style</a>.</td>
 					<td>None</td>
 				</tr>
+				<tr>
+					<td><code>target</code></td>
+					<td>Node, String</td>
+					<td>The target element to place the dropdown at, as Node or CSS selector. <strong>This setting is required.</strong></td>
+					<td>None</td>
+				</tr>
 			</tbody>
 		</table>
 

doc/frontfire-ui-resizable.html

@@ -258,8 +258,8 @@ <h2 id="options">Options</h2>
 				</tr>-->
 				<tr>
 					<td><code>containment</code></td>
-					<td>String, Node(s)</td>
-					<td>Constrains the resizing inside the specified element, specified as CSS selector or Node (collection), or the “parent” of the resized element or the “viewport”.</td>
+					<td>Node(s), String</td>
+					<td>Constrains the resizing inside the specified element, specified as Node (collection) or CSS selector, or the “parent” of the resized element or the “viewport”.</td>
 					<td>None</td>
 				</tr>
 				<tr>

doc/frontfire-ui-sortable.html

@@ -438,14 +438,14 @@ <h2 id="options">Options</h2>
 				</tr>
 				<tr>
 					<td><code>cancel</code></td>
-					<td>String, Node(s)</td>
-					<td>The element(s) that cannot start a drag operation, as CSS selector within the scope of the element to drag, or Node (collection).</td>
+					<td>Node(s), String</td>
+					<td>The element(s) that cannot start a drag operation, as Node (collection) or CSS selector within the scope of the element to drag.</td>
 					<td>None</td>
 				</tr>
 				<tr>
 					<td><code>containment</code></td>
-					<td>String, Node(s)</td>
-					<td>Constrains the drag movement inside the specified element, specified as CSS selector or Node (collection), or the “parent” of the dragged element or the “viewport”.</td>
+					<td>Node(s), String</td>
+					<td>Constrains the drag movement inside the specified element, specified as Node (collection) or CSS selector, or the “parent” of the dragged element or the “viewport”.</td>
 					<td>None</td>
 				</tr>
 				<tr>
@@ -462,8 +462,8 @@ <h2 id="options">Options</h2>
 				</tr>
 				<tr>
 					<td><code>handle</code></td>
-					<td>String, Node(s)</td>
-					<td>The element(s) that can start a drag operation, as CSS selector within the scope of the element to drag, or Node (collection).</td>
+					<td>Node(s), String</td>
+					<td>The element(s) that can start a drag operation, as Node (collection) or CSS selector within the scope of the element to drag.</td>
 					<td>The element to drag</td>
 				</tr>
 				<tr>
@@ -474,8 +474,8 @@ <h2 id="options">Options</h2>
 				</tr>
 				<tr>
 					<td><code>stack</code></td>
-					<td>String, Node(s), Boolean</td>
-					<td>The elements among which the dragged element will be pulled to the front. Specified as CSS selector or Node (collection). true to stack all sortable children.</td>
+					<td>Node(s), String, Boolean</td>
+					<td>The elements among which the dragged element will be pulled to the front. Specified as Node (collection) or CSS selector. true to stack all sortable children.</td>
 					<td>None</td>
 				</tr>
 			</tbody>

doc/frontfire-ui-table.html

@@ -896,8 +896,8 @@ <h3 id="template-rows-options">Options</h3>
 				</tr>
 				<tr>
 					<td><code>template</code></td>
-					<td>String, Node</td>
-					<td>The template element that contains a table row to use for all records. Specified as CSS selector or Node.</td>
+					<td>Node, String</td>
+					<td>The template element that contains a table row to use for all records. Specified as Node or CSS selector.</td>
 					<td>None</td>
 				</tr>
 			</tbody>

doc/frontfire-ui-tabs.html

@@ -684,8 +684,8 @@ <h3 id="template-options">Options</h3>
 				</tr>
 				<tr>
 					<td><code>template</code></td>
-					<td>String, Node</td>
-					<td>The template element that contains a tab page to use for all records. Specified as CSS selector or Node.</td>
+					<td>Node, String</td>
+					<td>The template element that contains a tab page to use for all records. Specified as Node or CSS selector.</td>
 					<td>None</td>
 				</tr>
 			</tbody>

src/js/plugins/dropdown.js

@@ -4,6 +4,9 @@ const dropdownContainerClass = "ff-dropdown-container";
 
 // Defines default options for the dropdown plugin.
 let dropdownDefaults = {
+	// The target element to place the dropdown at, as Node or CSS selector.
+	target: undefined,
+
 	// The placement of the dropdown relative to the target element.
 	placement: undefined,
 
@@ -45,11 +48,12 @@ let dropdownDefaults = {
 };
 
 // Opens a dropdown with the selected element and places it at the specified target element.
-// TODO: Move target parameter into options, allow selector or node
-function createDropdown(target, options) {
+function createDropdown(options) {
 	let element = this.first;
 	if (!element) return;   // Nothing to do
 
+	let opt = F.initOptions("dropdown", element, {}, options);
+	let target = F(opt.target).first;
 	if (!target) {
 		console.error("No dropdown target specified");
 		return;   // Nothing to do
@@ -67,8 +71,6 @@ function createDropdown(target, options) {
 			return element.F.dropdown;   // Already open
 		}
 	}
-
-	let opt = F.initOptions("dropdown", element, {}, options);
 	opt._wasConnected = wasConnected;
 
 	// Measure these before the dropdown is added to the document and may become internally visible

src/js/plugins/menu.js

@@ -106,11 +106,11 @@ function menu() {
 					}
 					event.preventDefault();
 					if (itemA.F.disabled) return;
-					let ddOpt = {};
+					let ddOpt = { target: item };
 					if (isVertical) {
 						ddOpt["placement"] = "right-top";
 					}
-					submenu.F.dropdown(item, ddOpt);
+					submenu.F.dropdown(ddOpt);
 					item.classList.add("open");
 					submenu.F.once("close", () => {
 						item.classList.remove("open");

src/js/plugins/selectable.js

@@ -108,7 +108,8 @@ function selectable(options) {
 					let cssClass = "";
 					if (button.closest(".dark, .not-dark")?.classList.contains("dark"))
 						cssClass = "dark";   // Set dropdown container to dark
-					newSelect.F.dropdown(button, {
+					newSelect.F.dropdown({
+						target: button,
 						offsetTop: 1,
 						offsetBottom: -1,
 						fixed: fixed,

src/js/plugins/timepicker.js

@@ -1117,7 +1117,7 @@ function timePicker(options) {
 			updateViewVisibilities();
 			updateViews();
 			newInput.classList.add("open");
-			dropdown.F.dropdown(newInput, { autoClose: false });
+			dropdown.F.dropdown({ target: newInput, autoClose: false });
 			if (input.closest(".dark, .not-dark")?.classList.contains("dark"))
 				dropdown.parentElement.classList.add("dark");   // Set dropdown container to dark
 			input.F.trigger("open", { bubbles: true });