Add clear button

matrozov · Apr 9, 2017 · 6dbaebc · 6dbaebc
1 parent 942d637
commit 6dbaebc
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 41 deletions.
diff --git a/dist/css/selectopus.css b/dist/css/selectopus.css
@@ -1,4 +1,5 @@
 .selectopus-root {
+    position: relative;
     min-height: 34px;
     height: auto;
     overflow: hidden;
@@ -33,6 +34,18 @@
     content: "\d7";
     opacity: .4;
 }
+.selectopus-clear {
+    position: absolute;
+    top: 50%;
+    right: 9px;
+    margin-top: -8px;
+    width: 16px;
+    height: 16px;
+    font-size: 12px;
+    line-height: 16px;
+    text-align: center;
+    cursor: pointer;
+}
 .selectopus-popup {
     display: block;
     padding: 3px;

diff --git a/dist/css/selectopus.min.css b/dist/css/selectopus.min.css
diff --git a/dist/js/selectopus.full.js b/dist/js/selectopus.full.js
@@ -14,6 +14,7 @@
             $root: false,
             $placeholder: false,
             $items: false,
+            $clear: false,
             $popup: false,
             $popupInput: false,
             $popupItems: false,
@@ -54,6 +55,16 @@
                     .addClass('selectopus-items clearfix')
                     .appendTo(self.$root);
 
+                self.$clear = $('<div>')
+                    .addClass('selectopus-clear')
+                    .html('&#x2716;')
+                    .click(self.view.items.onClear)
+                    .appendTo(self.$root);
+
+                if (self._options.required) {
+                    self.$clear.hide();
+                }
+
                 self.$popup = $('<div>')
                     .addClass('selectopus-popup dropdown-menu');
 
@@ -296,25 +307,20 @@
             },
 
             view: {
-                placeholder: {
-                    hide: function() {
-                        self.$placeholder.hide();
-                    },
-
-                    show: function() {
-                        self.$placeholder.show();
-                    }
-                },
-
                 items: {
                     createList: function() {
                         self.view.items.clear();
 
                         if ($.isEmptyObject(self._value)) {
-                            self.view.placeholder.show();
+                            self.$placeholder.show();
+                            self.$clear.hide();
                         }
                         else {
-                            self.view.placeholder.hide();
+                            self.$placeholder.hide();
+
+                            if (!self._options.required) {
+                                self.$clear.show();
+                            }
                         }
 
                         $.each(self._value, function(value) {
@@ -337,6 +343,13 @@
                         self.$items.empty();
                     },
 
+                    onClear: function() {
+                        self.value.clear();
+                        self.view.items.createList();
+
+                        return false;
+                    },
+
                     onClick: function() {
                         if (!self._options.multiple) {
                             return true;

diff --git a/dist/js/selectopus.full.min.js b/dist/js/selectopus.full.min.js
diff --git a/dist/js/selectopus.js b/dist/js/selectopus.js
@@ -14,6 +14,7 @@
             $root: false,
             $placeholder: false,
             $items: false,
+            $clear: false,
             $popup: false,
             $popupInput: false,
             $popupItems: false,
@@ -54,6 +55,16 @@
                     .addClass('selectopus-items clearfix')
                     .appendTo(self.$root);
 
+                self.$clear = $('<div>')
+                    .addClass('selectopus-clear')
+                    .html('&#x2716;')
+                    .click(self.view.items.onClear)
+                    .appendTo(self.$root);
+
+                if (self._options.required) {
+                    self.$clear.hide();
+                }
+
                 self.$popup = $('<div>')
                     .addClass('selectopus-popup dropdown-menu');
 
@@ -296,25 +307,20 @@
             },
 
             view: {
-                placeholder: {
-                    hide: function() {
-                        self.$placeholder.hide();
-                    },
-
-                    show: function() {
-                        self.$placeholder.show();
-                    }
-                },
-
                 items: {
                     createList: function() {
                         self.view.items.clear();
 
                         if ($.isEmptyObject(self._value)) {
-                            self.view.placeholder.show();
+                            self.$placeholder.show();
+                            self.$clear.hide();
                         }
                         else {
-                            self.view.placeholder.hide();
+                            self.$placeholder.hide();
+
+                            if (!self._options.required) {
+                                self.$clear.show();
+                            }
                         }
 
                         $.each(self._value, function(value) {
@@ -337,6 +343,13 @@
                         self.$items.empty();
                     },
 
+                    onClear: function() {
+                        self.value.clear();
+                        self.view.items.createList();
+
+                        return false;
+                    },
+
                     onClick: function() {
                         if (!self._options.multiple) {
                             return true;

diff --git a/dist/js/selectopus.min.js b/dist/js/selectopus.min.js
diff --git a/docs/css/selectopus.min.css b/docs/css/selectopus.min.css