From 5cbb1afad1aeedfa0e318b90c0e9c2adc10fd598 Mon Sep 17 00:00:00 2001
From: Yves Goergen <git@ygoe.de>
Date: Fri, 10 Mar 2023 21:26:31 +0100
Subject: [PATCH] Added more deinit() plugin methods

---
 doc/changes.html                     |  4 ++++
 doc/frontfire-core.html              | 22 ++++++++++++++++++----
 doc/frontfire-ui-colorpicker.html    | 15 +++++++++++++++
 doc/frontfire-ui-draggable.html      |  6 +++---
 doc/frontfire-ui-progressbar.html    | 15 +++++++++++++++
 doc/frontfire-ui-resizable.html      |  6 +++---
 doc/frontfire-ui-selectable.html     | 10 ++++++++++
 doc/frontfire-ui-sortable.html       |  6 +++---
 doc/frontfire-ui-tree.html           | 10 ++++++++++
 doc/frontfire-ui-wheelscrolling.html | 15 +++++++++++++++
 src/js/frontfire-core.js             | 10 +++++++++-
 src/js/plugins/colorpicker.js        | 17 ++++++++++++++---
 src/js/plugins/draggable.js          |  7 ++++---
 src/js/plugins/progressbar.js        | 13 ++++++++++++-
 src/js/plugins/resizable.js          |  7 ++++---
 src/js/plugins/selectable.js         |  1 +
 src/js/plugins/sortable.js           | 15 ++++++++-------
 src/js/plugins/tree.js               | 20 +++++++++++++++++---
 src/js/plugins/wheelscrolling.js     | 22 +++++++++++++++++++---
 19 files changed, 184 insertions(+), 37 deletions(-)

diff --git a/doc/changes.html b/doc/changes.html
index 5432251..b74fd05 100644
--- a/doc/changes.html
+++ b/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">
diff --git a/doc/frontfire-core.html b/doc/frontfire-core.html
index 9830750..487a5b0 100644
--- a/doc/frontfire-core.html
+++ b/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,7 +2777,7 @@ <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>
@@ -2771,7 +2785,7 @@ <h3 id="loadOptions">loadOptions</h3>
 					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>
diff --git a/doc/frontfire-ui-colorpicker.html b/doc/frontfire-ui-colorpicker.html
index 4385a4d..784d457 100644
--- a/doc/frontfire-ui-colorpicker.html
+++ b/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.
diff --git a/doc/frontfire-ui-draggable.html b/doc/frontfire-ui-draggable.html
index 9d2978c..39b020e 100644
--- a/doc/frontfire-ui-draggable.html
+++ b/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>
 
diff --git a/doc/frontfire-ui-progressbar.html b/doc/frontfire-ui-progressbar.html
index ca41176..43a9b54 100644
--- a/doc/frontfire-ui-progressbar.html
+++ b/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.
diff --git a/doc/frontfire-ui-resizable.html b/doc/frontfire-ui-resizable.html
index ae256e5..744d2c0 100644
--- a/doc/frontfire-ui-resizable.html
+++ b/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>
 
diff --git a/doc/frontfire-ui-selectable.html b/doc/frontfire-ui-selectable.html
index 0b70fe8..24ef754 100644
--- a/doc/frontfire-ui-selectable.html
+++ b/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>
diff --git a/doc/frontfire-ui-sortable.html b/doc/frontfire-ui-sortable.html
index c5bd505..e342d4a 100644
--- a/doc/frontfire-ui-sortable.html
+++ b/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>
 
diff --git a/doc/frontfire-ui-tree.html b/doc/frontfire-ui-tree.html
index 9424bc8..fcd1282 100644
--- a/doc/frontfire-ui-tree.html
+++ b/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>
diff --git a/doc/frontfire-ui-wheelscrolling.html b/doc/frontfire-ui-wheelscrolling.html
index 95da40a..8563533 100644
--- a/doc/frontfire-ui-wheelscrolling.html
+++ b/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>
diff --git a/src/js/frontfire-core.js b/src/js/frontfire-core.js
index e9bb783..d0e3233 100644
--- a/src/js/frontfire-core.js
+++ b/src/js/frontfire-core.js
@@ -3515,7 +3515,7 @@
 	}
 
 	// 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.
@@ -3523,6 +3523,14 @@
 		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])) {
diff --git a/src/js/plugins/colorpicker.js b/src/js/plugins/colorpicker.js
index 37d8717..c4f92f2 100644
--- a/src/js/plugins/colorpicker.js
+++ b/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"]
 });
diff --git a/src/js/plugins/draggable.js b/src/js/plugins/draggable.js
index fc34711..424fd01 100644
--- a/src/js/plugins/draggable.js
+++ b/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
 	}
 });
diff --git a/src/js/plugins/progressbar.js b/src/js/plugins/progressbar.js
index 26e5548..b8dca8b 100644
--- a/src/js/plugins/progressbar.js
+++ b/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"]
 });
diff --git a/src/js/plugins/resizable.js b/src/js/plugins/resizable.js
index 9182a45..325cbd2 100644
--- a/src/js/plugins/resizable.js
+++ b/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
 	}
 });
diff --git a/src/js/plugins/selectable.js b/src/js/plugins/selectable.js
index 0e5c3d8..7b4fe66 100644
--- a/src/js/plugins/selectable.js
+++ b/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);
 	});
 }
 
diff --git a/src/js/plugins/sortable.js b/src/js/plugins/sortable.js
index e3969a8..bf257c2 100644
--- a/src/js/plugins/sortable.js
+++ b/src/js/plugins/sortable.js
@@ -67,7 +67,7 @@ function sortable(options) {
 		elem.classList.add(sortableClass);
 		let opt = F.initOptions("sortable", elem, {}, options);
 		opt._prepareChild = prepareChild;
-		opt._remove = remove;
+		opt._deinit = deinit;
 
 		// Remove text nodes between children which cause layout issues when dragging
 		Array.from(elem.childNodes)
@@ -339,30 +339,31 @@ function sortable(options) {
 			return p;
 		}
 
-		function remove() {
+		function deinit() {
 			observer.disconnect();
 			elem.F.children.forEach(child => {
 				child.F.off(sortableEventClass);
-				child.F.draggable.remove();
+				child.F.draggable.deinit();
 			});
 		}
 	});
 }
 
-// Removes the sortable features from the elements.
-function remove() {
+// Deinitializes the plugin.
+function deinit() {
 	return this.forEach(elem => {
 		if (!elem.classList.contains(sortableClass)) return;
 		elem.classList.remove(sortableClass);
 		let opt = F.loadOptions("sortable", elem);
-		opt._remove();
+		opt._deinit();
+		F.deleteOptions("sortable", elem);
 	});
 }
 
 F.registerPlugin("sortable", sortable, {
 	defaultOptions: sortableDefaults,
 	methods: {
-		remove: remove
+		deinit: deinit
 	},
 	selectors: [".sortable"]
 });
diff --git a/src/js/plugins/tree.js b/src/js/plugins/tree.js
index 6cfa3a9..49bca8f 100644
--- a/src/js/plugins/tree.js
+++ b/src/js/plugins/tree.js
@@ -1,6 +1,7 @@
 // ==================== Tree plugin ====================
 
 const treeClass = "ff-tree";
+const treeEventClass = ".ff-tree";
 
 // Defines default options for the tree view plugin.
 let treeDefaults = {
@@ -104,8 +105,8 @@ function tree(options) {
 	if (container.tabIndex === -1)
 		container.tabIndex = 0;
 
-	container.F.on("blur", () => container.classList.remove("ff-focus-visible"));
-	container.F.on("keydown", event => {
+	container.F.on("blur" + treeEventClass, () => container.classList.remove("ff-focus-visible"));
+	container.F.on("keydown" + treeEventClass, event => {
 		if (event.key !== "Control" && event.key !== "Shift")
 			container.classList.add("ff-focus-visible");
 		if (event.key === "ArrowUp") {
@@ -981,6 +982,18 @@ function callMethod(self, name, args) {
 	return opt["_" + name].apply(null, args);
 }
 
+// Deinitializes the plugin.
+function deinit() {
+	return this.forEach(elem => {
+		if (!elem.classList.contains(treeClass)) return;
+		elem.classList.remove(treeClass);
+		elem.classList.remove("ff-focus-visible")
+		elem.off(treeEventClass);
+		elem.replaceChildren();
+		F.deleteOptions("tree", elem);
+	});
+}
+
 F.registerPlugin("tree", tree, {
 	defaultOptions: treeDefaults,
 	methods: {
@@ -994,6 +1007,7 @@ F.registerPlugin("tree", tree, {
 		updateItem: updateItem,
 		insertItem: insertItem,
 		removeItem: removeItem,
-		updateView: updateView
+		updateView: updateView,
+		deinit: deinit
 	}
 });
diff --git a/src/js/plugins/wheelscrolling.js b/src/js/plugins/wheelscrolling.js
index f635210..acf1748 100644
--- a/src/js/plugins/wheelscrolling.js
+++ b/src/js/plugins/wheelscrolling.js
@@ -1,5 +1,7 @@
 // ==================== Wheel-scrolling plugin ====================
 
+const wheelScrollingEventClass = ".wheel-scrolling";
+
 // Defines default options for the wheel-scrolling plugin.
 let wheelScrollingDefaults = {
 	// The scroll offset of a single wheel delta event.
@@ -17,7 +19,7 @@ let wheelScrollingDefaults = {
 // Enables custom mouse wheel scrolling on each selected element.
 function wheelScrolling(options) {
 	return this.forEach(element => {
-		if (element.F.hasEventListeners("wheel.wheel-scrolling")) return;   // Already done
+		if (element.F.hasEventListeners("wheel" + wheelScrollingEventClass)) return;   // Already done
 
 		let opt = F.initOptions("wheelScrolling", element, {}, options);
 
@@ -29,7 +31,7 @@ function wheelScrolling(options) {
 			duration = wheelScrollingDefaults.duration;
 
 		let scrollTarget, scrollTargetTimeout, scrollAnimation;
-		element.F.on("wheel.wheel-scrolling", event => {
+		element.F.on("wheel" + wheelScrollingEventClass, event => {
 			event.preventDefault();
 			if (opt.disabled) return;
 
@@ -57,7 +59,21 @@ function wheelScrolling(options) {
 	});
 }
 
-F.registerPlugin("wheelScrolling", wheelScrolling);
+// Deinitializes the plugin.
+function deinit() {
+	return this.forEach(elem => {
+		if (!elem.F.hasEventListeners("wheel" + wheelScrollingEventClass)) return;
+		elem.off(wheelScrollingEventClass);
+		F.deleteOptions("wheelScrolling", elem);
+	});
+}
+
+F.registerPlugin("wheelScrolling", wheelScrolling, {
+	defaultOptions: wheelScrollingDefaults,
+	methods: {
+		deinit: deinit
+	}
+});
 
 
 // ==================== Private functions ====================