Added more deinit() plugin methods

doc/changes.html

@@ -22,6 +22,7 @@
 		<h1 class="no-top-margin">Change log</h1>
 
 		<!-- NOTE: The first version and date in this file are picked up by the pack script. -->
+		<!-- NOTE: Only change this version number in a separate commit for the big number of modified files. -->
 		<h2 id="v2-0-0-rc-1">Version 2.0.0-rc.1</h2>
 		<p>Released: not yet</p>
 		<h3 class="no-toc">New features</h3>
@@ -33,6 +34,8 @@ <h3 class="no-toc">New features</h3>
 			<li>Added styling for the <a href="frontfire-ui-typography.html#mark"><code>&lt;mark&gt;</code> element</a></li>
 			<li>ToggleSwitch can be applied to an <code data-lang="html">&lt;input type="checkbox"&gt;</code> element, also automatically with the <code class="css-class">toggle-switch</code> CSS class</li>
 			<li>Added <a href="arraylist.html#selectManyRecursive"><code>ArrayList.selectManyRecursive</code></a> method</li>
+			<li>Added <a href="frontfire-core.html#deleteOptions"><code>Frontfire.deleteOptions</code></a> method</li>
+			<li>Added <code>deinit()</code> methods for the ColorPicker, Progressbar, Tree and WheelScrolling plugin.</li>
 		</ul>
 		<h3 class="no-toc">Breaking changes</h3>
 		<ul>
@@ -49,6 +52,7 @@ <h3 class="no-toc">Breaking changes since v1</h3>
 			<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>
+			<li>The <code>remove()</code> method of the Draggable, Resizable and Sortable plugins was renamed to <code>deinit()</code> and should only be called through <a href="frontfire-core.html#deinit"><code>F.deinit()</code></a>.</li>
 		</ul>
 
 		<hr class="double-margin">

doc/frontfire-core.html

@@ -2707,6 +2707,20 @@ <h3 id="deinit">deinit</h3>
 				</p>
 			</div>
 
+			<div class="member">
+				<h3 id="deleteOptions">deleteOptions</h3>
+				<ul>
+					<li><code>Frontfire.deleteOptions(pluginName, element)</code> → void</li>
+				</ul>
+				<p>
+					Deletes the initialised plugin options from the element.
+					This method is used by deinit() methods of plugins.
+				</p>
+				<p class="see-also">
+					See also: <a href="#initOptions">Frontfire.initOptions()</a>, <a href="#loadOptions">Frontfire.loadOptions()</a>
+				</p>
+			</div>
+
 			<div class="member" data-aliases="autostart">
 				<h3 id="frontfire">frontfire</h3>
 				<ul>
@@ -2752,7 +2766,7 @@ <h3 id="initOptions">initOptions</h3>
 					Read more about <a href="frontfire-ui-options.html">using plugin options</a>.
 				</p>
 				<p class="see-also">
-					See also: <a href="#registerPlugin">Frontfire.registerPlugin()</a>
+					See also: <a href="#registerPlugin">Frontfire.registerPlugin()</a>, <a href="#loadOptions">Frontfire.loadOptions()</a>, <a href="#deleteOptions">Frontfire.deleteOptions()</a>
 				</p>
 			</div>
 
@@ -2763,15 +2777,15 @@ <h3 id="loadOptions">loadOptions</h3>
 				</ul>
 				<p>
 					Loads the initialised plugin options for additional plugin functions.
-					If the plugin options have been initialised for the element, undefined is returned.
+					If the plugin options have not been initialised for the element, undefined is returned.
 					This method is used by plugin operations that work with a plugin instance after it has been created on an element.
 					Any options, including references to internal functions, that were set in the plugin’s create function can be accessed with this method in the additional operation methods.
 				</p>
 				<p>
 					See the <a href="#registerPlugin">registerPlugin()</a> method for an example of this method.
 				</p>
 				<p class="see-also">
-					See also: <a href="#registerPlugin">Frontfire.registerPlugin()</a>
+					See also: <a href="#registerPlugin">Frontfire.registerPlugin()</a>, <a href="#initOptions">Frontfire.initOptions()</a>, <a href="#deleteOptions">Frontfire.deleteOptions()</a>
 				</p>
 			</div>
 
@@ -2901,7 +2915,7 @@ <h3 id="registerPlugin">registerPlugin</h3>
 }
 </div>
 				<p class="see-also">
-					See also: <a href="#autostart">Frontfire.autostart()</a>
+					See also: <a href="#autostart">Frontfire.autostart()</a>, <a href="#initOptions">Frontfire.initOptions()</a>, <a href="#loadOptions">Frontfire.loadOptions()</a>, <a href="#deleteOptions">Frontfire.deleteOptions()</a>
 				</p>
 			</div>
 		</section>

doc/frontfire-ui-colorpicker.html

@@ -135,6 +135,21 @@ <h4 id="color">color</h4>
 			</p>
 		</div>
 
+		<h3 id="methods">Plugin methods</h3>
+		<p>
+			This plugin provides methods to control the view.
+		</p>
+
+		<div class="member">
+			<h4 id="deinit">deinit</h4>
+			<ul>
+				<li><code>deinit()</code> → this (Frontfire)</li>
+			</ul>
+			<p>
+				Deinitializes the plugin and empties the elements.
+			</p>
+		</div>
+
 		<h3 id="colorpicker-events">Plugin events</h3>
 		<p>
 			This plugin triggers events for the input field.

doc/frontfire-ui-draggable.html

@@ -350,12 +350,12 @@ <h2 id="methods">Plugin methods</h2>
 		</p>
 
 		<div class="member">
-			<h3 id="remove">remove</h3>
+			<h3 id="deinit">deinit</h3>
 			<ul>
-				<li><code>remove()</code> → Frontfire</li>
+				<li><code>deinit()</code> → this (Frontfire)</li>
 			</ul>
 			<p>
-				Removes the draggable features from the elements.
+				Deinitializes the plugin and removes the draggable features from the elements.
 			</p>
 		</div>
 

doc/frontfire-ui-progressbar.html

@@ -264,6 +264,21 @@ <h3 id="valueSuffix">valueSuffix</h3>
 </div>
 		</div>
 
+		<h2 id="methods">Plugin methods</h2>
+		<p>
+			This plugin provides methods to control the progress bar.
+		</p>
+
+		<div class="member">
+			<h3 id="deinit">deinit</h3>
+			<ul>
+				<li><code>deinit()</code> → this (Frontfire)</li>
+			</ul>
+			<p>
+				Deinitializes the plugin and removes the progress bar from the elements.
+			</p>
+		</div>
+
 		<h2 id="events">Plugin events</h2>
 		<p>
 			This plugin triggers events for the progress bar.

doc/frontfire-ui-resizable.html

@@ -325,12 +325,12 @@ <h2 id="methods">Plugin methods</h2>
 		</p>
 
 		<div class="member">
-			<h3 id="remove">remove</h3>
+			<h3 id="deinit">deinit</h3>
 			<ul>
-				<li><code>remove()</code> → Frontfire</li>
+				<li><code>deinit()</code> → this (Frontfire)</li>
 			</ul>
 			<p>
-				Removes the resizing features from the elements.
+				Deinitializes the plugin and removes the resizing features from the elements.
 			</p>
 		</div>
 

doc/frontfire-ui-selectable.html

@@ -624,6 +624,16 @@ <h2 id="methods">Plugin methods</h2>
 			This plugin provides methods to control the selectable state.
 		</p>
 
+		<div class="member">
+			<h3 id="deinit">deinit</h3>
+			<ul>
+				<li><code>deinit()</code> → this (Frontfire)</li>
+			</ul>
+			<p>
+				Deinitializes the plugin.
+			</p>
+		</div>
+
 		<div class="member">
 			<h3 id="getSelection">getSelection</h3>
 			<ul>

doc/frontfire-ui-sortable.html

@@ -487,12 +487,12 @@ <h2 id="methods">Plugin methods</h2>
 		</p>
 
 		<div class="member">
-			<h3 id="remove">remove</h3>
+			<h3 id="deinit">deinit</h3>
 			<ul>
-				<li><code>remove()</code> → Frontfire</li>
+				<li><code>deinit()</code> → this (Frontfire)</li>
 			</ul>
 			<p>
-				Removes the sortable features from the elements.
+				Deinitializes the plugin and removes the sortable features from the elements.
 			</p>
 		</div>
 

doc/frontfire-ui-tree.html

@@ -440,6 +440,16 @@ <h2 id="methods">Plugin methods</h2>
 			This plugin provides methods to control the tree view.
 		</p>
 
+		<div class="member">
+			<h3 id="deinit">deinit</h3>
+			<ul>
+				<li><code>deinit()</code> → this (Frontfire)</li>
+			</ul>
+			<p>
+				Deinitializes the plugin and removes the tree from the elements.
+			</p>
+		</div>
+
 		<div class="member">
 			<h3 id="deselectItem">deselectItem</h3>
 			<ul>

doc/frontfire-ui-wheelscrolling.html

@@ -130,6 +130,21 @@ <h2 id="options">Options</h2>
 				</tr>
 			</tbody>
 		</table>
+
+		<h2 id="methods">Plugin methods</h2>
+		<p>
+			This plugin provides methods to control the scroll behaviour.
+		</p>
+
+		<div class="member">
+			<h3 id="deinit">deinit</h3>
+			<ul>
+				<li><code>deinit()</code> → this (Frontfire)</li>
+			</ul>
+			<p>
+				Deinitializes the plugin and removes the event handlers from the elements.
+			</p>
+		</div>
 	</main>
 
 	<footer>

src/js/frontfire-core.js

@@ -3515,14 +3515,22 @@
 	}
 
 	// Loads plugin options for additional plugin functions.
-	// If the plugin options have been initialised for the element, undefined is returned.
+	// If the plugin options have not been initialised for the element, undefined is returned.
 	//
 	// pluginName: The plugin name.
 	// elem: The element to find data attributes in. Options are stored here, too.
 	Frontfire.loadOptions = function (pluginName, elem) {
 		return getNodeData(elem, "ff-" + pluginName + "-options");
 	}
 
+	// Deletes plugin options.
+	//
+	// pluginName: The plugin name.
+	// elem: The element in which the options are stored.
+	Frontfire.deleteOptions = function (pluginName, elem) {
+		deleteNodeData(elem, "ff-" + pluginName + "-options");
+	}
+
 	// Interprets an option value specified as separate attribute or unquoted string.
 	function convertOptValue(value, converters, name) {
 		if (converters && isFunction(converters[name])) {

src/js/plugins/colorpicker.js

@@ -81,8 +81,6 @@ function colorPicker(options) {
 		let isEmpty = !opt.color;
 		opt.color = new Color(opt.color);
 
-		container.classList.add(colorPickerClass);
-
 		let language = opt.language || document.documentElement.lang;
 		let translate = F.getTranslator(dictionary, language);
 
@@ -499,13 +497,26 @@ function setColor(newColor) {
 	});
 }
 
+// Deinitializes the plugin.
+function deinit() {
+	return this.forEach(elem => {
+		if (!elem.classList.contains(colorPickerClass)) return;
+		elem.classList.remove(colorPickerClass);
+		elem.replaceChildren();
+		elem.style.width = "";
+		elem.style.maxWidth = "";
+		F.deleteOptions("colorPicker", elem);
+	});
+}
+
 F.registerPlugin("colorPicker", colorPicker, {
 	defaultOptions: colorPickerDefaults,
 	methods: {
 		color: {
 			get: getColor,
 			set: setColor
-		}
+		},
+		deinit: deinit
 	},
 	selectors: ["div.color-picker"]
 });

src/js/plugins/draggable.js

@@ -260,8 +260,8 @@ function draggable(options) {
 	});
 }
 
-// Removes the draggable features from the elements.
-function remove() {
+// Deinitializes the plugin.
+function deinit() {
 	return this.forEach(elem => {
 		if (!elem.classList.contains(draggableClass)) return;
 		elem.classList.remove(draggableClass);
@@ -271,6 +271,7 @@ function remove() {
 		opt.cancelF?.off(draggableEventClass);
 		if (opt.catchElement)
 			F(opt.catchElement).off(draggableEventClass);
+		F.deleteOptions("draggable", elem);
 	});
 }
 
@@ -302,6 +303,6 @@ function stackElements(stackedElemsF, dragElem) {
 F.registerPlugin("draggable", draggable, {
 	defaultOptions: draggableDefaults,
 	methods: {
-		remove: remove
+		deinit: deinit
 	}
 });

src/js/plugins/progressbar.js

@@ -162,6 +162,16 @@ function setValueSuffix(suffix) {
 	});
 }
 
+// Deinitializes the plugin.
+function deinit() {
+	return this.forEach(elem => {
+		if (!elem.classList.contains(progressbarClass)) return;
+		elem.classList.remove(progressbarClass);
+		elem.querySelector("div.ff-bar")?.remove();
+		F.deleteOptions("progressbar", elem);
+	});
+}
+
 F.registerPlugin("progressbar", progressbar, {
 	defaultOptions: progressbarDefaults,
 	methods: {
@@ -185,7 +195,8 @@ F.registerPlugin("progressbar", progressbar, {
 		valueSuffix: {
 			get: getValueSuffix,
 			set: setValueSuffix
-		}
+		},
+		deinit: deinit
 	},
 	selectors: [".progressbar"]
 });

src/js/plugins/resizable.js

@@ -261,8 +261,8 @@ function resizable(options) {
 	});
 }
 
-// Removes the resizing features from the elements.
-function remove() {
+// Deinitializes the plugin.
+function deinit() {
 	return this.forEach(elem => {
 		if (!elem.classList.contains(resizableClass)) return;
 		elem.classList.remove(resizableClass);
@@ -271,12 +271,13 @@ function remove() {
 			elem.style.position = "static";
 		elem.F.querySelectorAll(".ff-resizable-handle").remove();
 		opt._disabledObserver.undo();
+		F.deleteOptions("resizable", elem);
 	});
 }
 
 F.registerPlugin("resizable", resizable, {
 	defaultOptions: resizableDefaults,
 	methods: {
-		remove: remove
+		deinit: deinit
 	}
 });

src/js/plugins/selectable.js

@@ -1042,6 +1042,7 @@ function deinit() {
 	return this.forEach(node => {
 		let opt = F.loadOptions("selectable", node);
 		opt && opt._deinit();
+		F.deleteOptions("selectable", node);
 	});
 }