diff --git a/docs/plugins.md b/docs/plugins.md index 103398187..e9b16e977 100644 --- a/docs/plugins.md +++ b/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)). diff --git a/examples/plugins.html b/examples/plugins.html index 79bb5aa4b..d7190aebe 100644 --- a/examples/plugins.html +++ b/examples/plugins.html @@ -21,6 +21,29 @@

Selectize.js

+
+

Plugin: "clear_button"

+
+ + +
+
+ + +
+ +
+

Plugin: "remove_button"

diff --git a/src/plugins/clear_button/plugin.js b/src/plugins/clear_button/plugin.js new file mode 100644 index 000000000..da3478eba --- /dev/null +++ b/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 + */ + +Selectize.define("clear_button", function (options) { + var self = this; + + options = $.extend( + { + title: "Clear", + className: "clear", + label: "×", + html: function (data) { + return ( + ' ' + data.label + '' + ); + }, + }, + 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"); + }); + }; + })(); +}); diff --git a/src/plugins/clear_button/plugin.less b/src/plugins/clear_button/plugin.less new file mode 100644 index 000000000..716f7fe5c --- /dev/null +++ b/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); + } + +} diff --git a/src/plugins/clear_button/plugin.scss b/src/plugins/clear_button/plugin.scss new file mode 100644 index 000000000..30bfdc9f9 --- /dev/null +++ b/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); + } + +} \ No newline at end of file diff --git a/src/scss/selectize.scss b/src/scss/selectize.scss index 45d69e4ee..39e27277f 100644 --- a/src/scss/selectize.scss +++ b/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;