wip: for pairing

alphagov · Mar 3, 2025 · f18e314 · f18e314
1 parent 0072319
commit f18e314
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 3 deletions.
diff --git a/app/assets/javascripts/components/select-with-search.js b/app/assets/javascripts/components/select-with-search.js
@@ -30,11 +30,33 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
       removeItemIconText: 'remove',
       labelId: this.select.id + '_label',
       closeDropdownOnSelect: this.select.multiple ? true : 'auto',
+      // callbackOnCreateTemplates: function(strToEl, escapeForTemplate, getClassNames) {
+      //   return {
+      //     item: ({ classNames }, data) => {
+      //       console.log(this)
+      //       return template(`
+      //         <div class="${getClassNames(classNames.item).join(' ')} ${
+      //         getClassNames(data.highlighted
+      //           ? classNames.highlightedState
+      //           : classNames.itemSelectable).join(' ')
+      //       } ${
+      //         data.placeholder ? classNames.placeholder : ''
+      //       }" data-item data-id="${data.id}" data-value="${escapeForTemplate(data.value)}" ${
+      //         data.active ? 'aria-selected="true"' : ''
+      //       } ${data.disabled ? 'aria-disabled="true"' : ''}>
+      //           <span>&bigstar;</span> ${escapeForTemplate(data.label)}
+      //         </div>
+      //       `);
+      //     },
+      //   };
+      // },
       callbackOnInit: function(){
         if (this.dropdown.type == "select-multiple") {
           let outer = this.containerOuter.element
           let list = this.itemList.element
           outer.append(list)
+          // this.config.classNames.itemSelectable = []
+          // console.log(this.config.classNames)
         }
       },
       // https://fusejs.io/api/options.html
@@ -44,6 +66,47 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
       }
     })
 
+    console.log(this.choices)
+    this.choices.itemList.element.addEventListener('click',function(event){
+      event.preventDefault()
+      event.stopPropagation()
+      event.target.classList.remove('is-highlighted')
+      console.log('clicked')
+      console.log(event.target)
+
+    })
+
+    // this.choices.passedElement.element.addEventListener(
+    //   'addItem',
+    //   function(event) {
+    //     //if (this.dropdown.type == "select-multiple") {
+    //       console.dir(event)
+
+    //     //}
+    //     // do something creative here...
+    //     // console.log(event.detail.id);
+    //     // console.log(event.detail.value);
+    //     // console.log(event.detail.label);
+    //     // console.log(event.detail.customProperties);
+    //     // console.log(event.detail.groupValue);
+    //   },
+    //   false,
+    // );
+
+    // this.choices.passedElement.element.addEventListener(
+    //   'change',
+    //   function (event) {
+    //     //const newRow = `${event.detail.label} <a href="#" data-remove="${event.detail.value}">remove</a>`
+    //     //document.querySelector("#chosen-items").append(newRow)
+    //     // TODO: somewhere we then need to define the behaviour for clicking 'remove' and call `choices.removeChoice(<data-remove>)
+
+    //     // Reset the Choices.js state (to avoid using the lozenge behaviour)
+    //     //let el = document.querySelector(event.target)
+    //     console.log(event);
+    //   },
+    //   false
+    // )
+
     this.module.choices = this.choices
   }
 

diff --git a/app/assets/stylesheets/components/_select-with-search.scss b/app/assets/stylesheets/components/_select-with-search.scss
@@ -192,9 +192,9 @@
 
     .choices__list--dropdown  {
       top: auto;
-      &, .coices__list {
-        pointer-events: visible;
-      }
+      // &, .coices__list {
+      //   pointer-events: visible;
+      // }
     }
 
   }