Merge pull request #1872 from fabienwnklr/feature-clear_button

Feature clear button

Author: risadams

docs/plugins.md

@@ -13,7 +13,7 @@ complete control.
 - All plugins live in their own folders in ["src/plugins"](../src/plugins).
 - Plugin names should be in follow the format: `/[a-z_]+$`
 - JS source should live in a "plugin.js" file (required).
-- CSS should live in a "plugin.less" file (optional). It will be bundled at build time.
+- CSS should live in a "plugin.less" and "plugin.scss" file (optional) if use SCSS file, include it into `src/scss/selectize.scss`. It will be bundled at build time.
 - Plugins are initialized right before the control is setup.
   This means that if you want to listen for events on any of the control's
   elements, you should override the `setup()` method (see ["DOM Events"](#dom-events)).

examples/plugins.html

@@ -21,6 +21,29 @@
 		<div id="wrapper">
 			<h1>Selectize.js</h1>
 
+			<div class="demo">
+				<h2>Plugin: "clear_button"</h2>
+				<div class="control-group">
+					<label for="clear-btn">Tags: Simple select</label>
+					<select id="clear-btn" class="clear-btn demo-default" name="clear-btn">
+						<option value="awesome">awesome</option>
+						<option value="neat">neat</option>
+					</select>
+				</div>
+				<div class="control-group">
+					<label for="clear-btn">Tags: Multiple select</label>
+					<select multiple id="clear-btn" class="clear-btn demo-default" name="clear-btn">
+						<option value="awesome">awesome</option>
+						<option value="neat">neat</option>
+					</select>
+				</div>
+				<script>
+				$('.clear-btn').selectize({
+					plugins: ['clear_button']
+				});
+				</script>
+			</div>
+
 			<div class="demo">
 				<h2>Plugin: "remove_button"</h2>
 				<div class="control-group">

src/plugins/clear_button/plugin.js

@@ -0,0 +1,69 @@
+/**
+ * Plugin: "clear_button" (selectize.js)
+ * Copyright (c) 2013 Brian Reavis & contributors
+ * Copyright (c) 2020-2022 Selectize Team & contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
+ * file except in compliance with the License. You may obtain a copy of the License at:
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
+ * ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ *
+ * @author Fabien Winkler <[email protected]>
+ */
+
+Selectize.define("clear_button", function (options) {
+  var self = this;
+
+  options = $.extend(
+    {
+      title: "Clear",
+      className: "clear",
+      label: "×",
+      html: function (data) {
+        return (
+          '<a class="' + data.className + '" title="' + data.title + '"> ' + data.label + '</a>'
+        );
+      },
+    },
+    options
+  );
+
+  self.setup = (function () {
+    var original = self.setup;
+    return function () {
+      original.apply(self, arguments);
+      self.$button_clear = $(options.html(options));
+
+      if (self.settings.mode === "single") self.$wrapper.addClass("single");
+
+      self.$wrapper.append(self.$button_clear);
+
+      if (self.getValue() === "" || self.getValue().length === 0) {
+        self.$wrapper.find("." + options.className).css("display", "none");
+      }
+
+      self.on("change", function () {
+        if (self.getValue() !== "" || self.getValue().length === 0) {
+          self.$wrapper.find("." + options.className).css("display", "");
+        } else {
+          self.$wrapper.find("." + options.className).css("display", "none");
+        }
+      });
+
+      self.$wrapper.on("click", "." + options.className, function (e) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        e.stopPropagation();
+
+        if (self.isLocked) return;
+
+        self.clear();
+        self.$wrapper.find("." + options.className).css("display", "none");
+      });
+    };
+  })();
+});

src/plugins/clear_button/plugin.less

@@ -0,0 +1,28 @@
+.selectize-control.plugin-clear_button {
+  .clear {
+      display: flex;
+      position: absolute;
+      height: 100%;
+      width: 25px;
+      top: 0;
+      right: calc(@selectize-padding-x - @selectize-padding-item-x);
+      color: rgba(0, 0, 0);
+      opacity: 0.4;
+      font-weight: bold;
+      border: none;
+      cursor: pointer;
+      z-index: 1;
+      font-size: 21px;
+      justify-content: center;
+      align-items: center;
+  }
+
+  .clear:hover {
+      opacity: 1;
+  }
+
+  &.single .clear {
+      right: calc(@selectize-padding-x - @selectize-padding-item-x + 1.5rem);
+  }
+
+}

src/plugins/clear_button/plugin.scss

@@ -0,0 +1,28 @@
+.#{$selectize}-control.plugin-clear_button {
+    .clear {
+        display: flex;
+        position: absolute;
+        height: 100%;
+        width: 25px;
+        top: 0;
+        right: calc(#{$select-padding-x} - #{$select-padding-item-x});
+        color: rgba(0, 0, 0);
+        opacity: 0.4;
+        font-weight: bold;
+        border: none;
+        cursor: pointer;
+        z-index: 1;
+        font-size: 21px;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .clear:hover {
+        opacity: 1;
+    }
+
+    &.single .clear {
+        right: calc(#{$select-padding-x} - #{$select-padding-item-x} + 1.5rem);
+    }
+    
+}

src/scss/selectize.scss

@@ -94,6 +94,7 @@ $select-spinner-border-color: $select-color-border;
 @import "../plugins/dropdown_header/plugin.scss";
 @import "../plugins/optgroup_columns/plugin.scss";
 @import "../plugins/remove_button/plugin.scss";
+@import "../plugins/clear_button/plugin.scss";
 
 .#{$selectize}-control {
   position: relative;