Resolve broken cancel buttons

Choices-js · Mar 28, 2017 · 7efd189 · 7efd189
1 parent 779d2e0
commit 7efd189
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 72 deletions.
diff --git a/README.md b/README.md
@@ -511,6 +511,13 @@ example.passedElement.addEventListener('addItem', function(event) {
 
 **Usage:** Triggered each time an item is unhighlighted.
 
+### choice
+**Arguments:** `value`
+
+**Input types affected:** `select-one`, `select-multiple`
+
+**Usage:** Triggered each time a chouce is selected **by a user**, regardless if it changes the value of the input.
+
 ### change
 **Arguments:** `value`
 

diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js
@@ -1019,6 +1019,10 @@ class Choices {
     const choice = this.store.getChoiceById(id);
     const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
 
+    triggerEvent(this.passedElement, 'choice', {
+      choice,
+    });
+
     if (choice && !choice.selected && !choice.disabled) {
       const canAddItem = this._canAddItem(activeItems, choice.value);
 
@@ -1582,7 +1586,9 @@ class Choices {
       const activeItems = this.store.getItemsFilteredByActive();
       const hasShiftKey = e.shiftKey;
 
-      if (foundTarget = findAncestorByAttrName(target, 'data-item')) {
+      if(foundTarget = findAncestorByAttrName(target, 'data-button')) {
+        this._handleButtonAction(activeItems, foundTarget);
+      } else if (foundTarget = findAncestorByAttrName(target, 'data-item')) {
         this._handleItemAction(activeItems, foundTarget, hasShiftKey);
       } else if (foundTarget = findAncestorByAttrName(target, 'data-choice')) {
         this._handleChoiceAction(activeItems, foundTarget);
@@ -1603,6 +1609,7 @@ class Choices {
     const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
     const activeItems = this.store.getItemsFilteredByActive();
 
+
     // If target is something that concerns us
     if (this.containerOuter.contains(target)) {
       // Handle button delete
@@ -2073,76 +2080,76 @@ class Choices {
     const templates = {
       containerOuter: (direction) => {
         return strToEl(`
-            <div class="${classNames.containerOuter}" data-type="${this.passedElement.type}" ${this.passedElement.type === 'select-one' ? 'tabindex="0"' : ''} aria-haspopup="true" aria-expanded="false" dir="${direction}"></div>
-          `);
+          <div class="${classNames.containerOuter}" data-type="${this.passedElement.type}" ${this.passedElement.type === 'select-one' ? 'tabindex="0"' : ''} aria-haspopup="true" aria-expanded="false" dir="${direction}"></div>
+        `);
       },
       containerInner: () => {
         return strToEl(`
-            <div class="${classNames.containerInner}"></div>
-          `);
+          <div class="${classNames.containerInner}"></div>
+        `);
       },
       itemList: () => {
         return strToEl(`
-            <div class="${classNames.list} ${this.passedElement.type === 'select-one' ? classNames.listSingle : classNames.listItems}"></div>
-          `);
+          <div class="${classNames.list} ${this.passedElement.type === 'select-one' ? classNames.listSingle : classNames.listItems}"></div>
+        `);
       },
       placeholder: (value) => {
         return strToEl(`
-            <div class="${classNames.placeholder}">${value}</div>
-          `);
+          <div class="${classNames.placeholder}">${value}</div>
+        `);
       },
       item: (data) => {
         if (this.config.removeItemButton) {
           return strToEl(`
-              <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : ''} ${!data.disabled ? classNames.itemSelectable : ''}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''} data-deletable>
-              ${data.label}<button type="button" class="${classNames.button}" data-button>Remove item</button>
-              </div>
-            `);
+            <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : ''} ${!data.disabled ? classNames.itemSelectable : ''}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''} data-deletable>
+            ${data.label}<button type="button" class="${classNames.button}" data-button>Remove item</button>
+            </div>
+          `);
         }
         return strToEl(`
           <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}"  data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
             ${data.label}
           </div>
-          `);
+        `);
       },
       choiceList: () => {
         return strToEl(`
-            <div class="${classNames.list}" dir="ltr" role="listbox" ${this.passedElement.type !== 'select-one' ? 'aria-multiselectable="true"' : ''}></div>
-          `);
+          <div class="${classNames.list}" dir="ltr" role="listbox" ${this.passedElement.type !== 'select-one' ? 'aria-multiselectable="true"' : ''}></div>
+        `);
       },
       choiceGroup: (data) => {
         return strToEl(`
-            <div class="${classNames.group} ${data.disabled ? classNames.itemDisabled : ''}" data-group data-id="${data.id}" data-value="${data.value}" role="group" ${data.disabled ? 'aria-disabled="true"' : ''}>
-              <div class="${classNames.groupHeading}">${data.value}</div>
-            </div>
-          `);
+          <div class="${classNames.group} ${data.disabled ? classNames.itemDisabled : ''}" data-group data-id="${data.id}" data-value="${data.value}" role="group" ${data.disabled ? 'aria-disabled="true"' : ''}>
+            <div class="${classNames.groupHeading}">${data.value}</div>
+          </div>
+        `);
       },
       choice: (data) => {
         return strToEl(`
           <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
-              ${data.label}
-            </div>
-          `);
+            ${data.label}
+          </div>
+        `);
       },
       input: () => {
         return strToEl(`
           <input type="text" class="${classNames.input} ${classNames.inputCloned}" autocomplete="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list">
-          `);
+        `);
       },
       dropdown: () => {
         return strToEl(`
-            <div class="${classNames.list} ${classNames.listDropdown}" aria-expanded="false"></div>
-          `);
+          <div class="${classNames.list} ${classNames.listDropdown}" aria-expanded="false"></div>
+        `);
       },
       notice: (label) => {
         return strToEl(`
-            <div class="${classNames.item} ${classNames.itemChoice}">${label}</div>
-          `);
+          <div class="${classNames.item} ${classNames.itemChoice}">${label}</div>
+        `);
       },
       option: (data) => {
         return strToEl(`
-            <option value="${data.value}" selected>${data.label}</option>
-          `);
+          <option value="${data.value}" selected>${data.label}</option>
+        `);
       },
     };
 

diff --git a/assets/styles/css/base.css b/assets/styles/css/base.css
@@ -138,4 +138,12 @@ h6, .h6 {
   display: none;
 }
 
+.zero-bottom {
+  margin-bottom: 0;
+}
+
+.zero-top {
+  margin-top: 0;
+}
+
 /*=====  End of Section comment block  ======*/
diff --git a/assets/styles/css/base.min.css b/assets/styles/css/base.min.css
diff --git a/assets/styles/css/choices.css b/assets/styles/css/choices.css
@@ -46,7 +46,7 @@
 }
 
 .choices[data-type*="select-one"] .choices__button {
-  background-image: url("../../icons//cross-inverse.svg");
+  background-image: url("../../icons/cross-inverse.svg");
   padding: 0;
   background-size: 8px;
   height: 100%;
@@ -113,7 +113,7 @@
   margin-left: 8px;
   padding-left: 16px;
   border-left: 1px solid #008fa1;
-  background-image: url("../../icons//cross.svg");
+  background-image: url("../../icons/cross.svg");
   background-size: 8px;
   width: 8px;
   line-height: 1;