HSD8-1507 Replace chosen module with custom combo box (#1388)

SU-HSDO · Jan 22, 2024 · d93d05b · d93d05b
1 parent 14b85e6
commit d93d05b
Show file tree

Hide file tree

Showing 29 changed files with 13,152 additions and 26 deletions.
diff --git a/.tugboat/config.yml b/.tugboat/config.yml
@@ -55,9 +55,11 @@ services:
         - mysql -h mysql -P 3306 -u tugboat -ptugboat -e 'SET GLOBAL max_allowed_packet=67108864;'
 
         - drush @hs_colorful.local cr
+        - drush @hs_colorful.local eval '\Drupal::moduleHandler()->loadInclude("user", "install");user_update_10000();'
         - blt drupal:update --site=hs_colorful
 
         - drush @hs_traditional.local cr
+        - drush @hs_traditional.local eval '\Drupal::moduleHandler()->loadInclude("user", "install");user_update_10000();'
         - blt drupal:update --site=hs_traditional
 
     # Collection of urls to compare visual results.

diff --git a/config/default/chosen.settings.yml b/config/default/chosen.settings.yml
diff --git a/config/default/core.extension.yml b/config/default/core.extension.yml
@@ -21,7 +21,6 @@ module:
   block_content_permissions: 0
   breakpoint: 0
   cancel_button: 0
-  chosen: 0
   chosen_lib: 0
   ckeditor5: 0
   ckeditor5_plugins: 0

diff --git a/docroot/modules/humsci/hs_views_helper/js/hs_views_helper.views_reset.js b/docroot/modules/humsci/hs_views_helper/js/hs_views_helper.views_reset.js
@@ -7,7 +7,6 @@
         return;
       }
       $.each(Drupal.views.instances, function (key, ajaxView) {
-
         $(once('views-reset', ajaxView['$exposed_form'].find('input[data-drupal-selector=edit-reset]'))).click(function (e) {
           e.preventDefault();
 

diff --git a/docroot/profiles/humsci/su_humsci_profile/.nvmrc b/docroot/profiles/humsci/su_humsci_profile/.nvmrc
@@ -0,0 +1 @@
+20
diff --git a/docroot/profiles/humsci/su_humsci_profile/js/select-lists/.gitignore b/docroot/profiles/humsci/su_humsci_profile/js/select-lists/.gitignore
@@ -0,0 +1,10 @@
+.env.local
+
+# Yarn files. See https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored.
+.yarn/*
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
diff --git a/docroot/profiles/humsci/su_humsci_profile/js/select-lists/.nvmrc b/docroot/profiles/humsci/su_humsci_profile/js/select-lists/.nvmrc
@@ -0,0 +1 @@
+20
diff --git a/docroot/profiles/humsci/su_humsci_profile/js/select-lists/.yarn/releases/yarn-4.0.2.cjs b/docroot/profiles/humsci/su_humsci_profile/js/select-lists/.yarn/releases/yarn-4.0.2.cjs
diff --git a/docroot/profiles/humsci/su_humsci_profile/js/select-lists/.yarnrc.yml b/docroot/profiles/humsci/su_humsci_profile/js/select-lists/.yarnrc.yml
@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.0.2.cjs
diff --git a/docroot/profiles/humsci/su_humsci_profile/js/select-lists/dist/index.html b/docroot/profiles/humsci/su_humsci_profile/js/select-lists/dist/index.html
@@ -0,0 +1,24 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>Widgets</title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/><style>body {
+      font-family: 'Inter', sans-serif;
+    }
+
+    .preview {
+      width: 100%;
+      max-width: 1100px;
+      margin: 80px auto;
+      border: 1px dashed rgba(0, 0, 0, 0.2);
+      position: relative;
+      padding: 1rem;
+    }
+
+    .preview::before {
+      content: 'WIDGET PREVIEW';
+      position: absolute;
+      display: block;
+      top: -18px;
+      font-size: 11px;
+      color: rgba(0, 0, 0, 0.5);
+    }
+    .visually-hidden {
+      display: none;
+    }</style><script defer="defer" src="/islands/select-list-filters.island.js"></script></head><body><div class="preview"><div id="gradgrow-filters-island"></div><form class="views-exposed-form bef-exposed-form" style="margin-top:20px; border: 4px solid red" data-drupal-selector="views-exposed-form-vpge-grad-grow-filters-block" action="/grad-grow-filters" id="views-exposed-form-vpge-grad-grow-filters-block" accept-charset="UTF-8" data-once="exposed-form"><div class="select-preact js-form-item form-item js-form-type-select form-item-competency js-form-item-competency"><label for="edit-competency">Filter by competency</label> <select data-drupal-selector="edit-competency" multiple="multiple" name="competency[]" id="edit-competency" size="9" class="form-select" data-once="chosen"><option value="1111">Communication</option><option value="1116" disabled="disabled">-Writing</option><option value="1181">-Speaking &amp; presenting</option><option value="1236">-Interpersonal communication</option><option value="1186">Teaching and Mentoring</option><option value="1246">-Pedagogy &amp; assessment</option><option value="1191">-Mentoring</option><option value="1051">-Course &amp; training design</option><option value="1081">Professionalism</option><option value="1121">-Academic &amp; research integrity</option><option value="1086">-Stress management &amp; work/life balance</option><option value="1126">-Critical &amp; analytical thinking</option><option value="1131">-Professional ethics</option><option value="1256">Diversity Equity &amp; Inclusion</option><option value="1216">-Inclusive mindset</option><option value="1221">-Equitable &amp; inclusive environments</option><option value="1301">-Teamwork &amp; collaboration</option><option value="1271">Leadership &amp; Management</option><option value="1071">-Negotiation &amp; conflict resolution</option><option value="1076">-Innovation &amp; problem-solving</option><option value="1096">-Management of people &amp; projects</option><option value="1101">-Leadership &amp; entrepreneurial skills</option><option value="1196">Career Development</option></select></div><div class="select-preact js-form-item form-item js-form-type-select form-item-content-type js-form-item-content-type"><label for="edit-content-type">Filter by learning opportunity</label> <select data-drupal-selector="edit-content-type" id="edit-content-type" name="content_type" class="form-select"><option value="All" selected="selected">- Any -</option><option value="1">Event</option><option value="2">Resource</option></select></div><div class="select-preact js-form-item form-item js-form-type-select form-item-commitment js-form-item-commitment"><label for="edit-commitment">Filter by time commitment</label> <select data-drupal-selector="edit-commitment" id="edit-commitment" name="commitment" class="form-select"><option value="All">All</option><option value="756">&lt; 3 hours</option><option value="751">3 - 8 hours</option><option value="746" selected="selected">&gt; 8 hours</option><option value="741">Self-guided</option></select></div><div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions"><input data-drupal-selector="edit-submit-vpge-grad-grow" type="submit" id="edit-submit-vpge-grad-grow" value="Apply filter" class="button js-form-submit form-submit"></div></form></div></body></html>
diff --git a/...files/humsci/su_humsci_profile/js/select-lists/dist/islands/select-list-filters.island.js b/...files/humsci/su_humsci_profile/js/select-lists/dist/islands/select-list-filters.island.js
diff --git a/docroot/profiles/humsci/su_humsci_profile/js/select-lists/package.json b/docroot/profiles/humsci/su_humsci_profile/js/select-lists/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "preact-island-examples",
+  "version": "0.1.0",
+  "description": "",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "umd:main": "dist/index.umd.js",
+  "module": "dist/index.module.js",
+  "source": "src/index.tsx",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "webpack --env prod",
+    "dev": "webpack serve --env dev"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.1.1",
+    "@mui/base": "^5.0.0-beta.32",
+    "preact": "^10.19.3",
+    "styled-components": "^6.1.8"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@types/webpack": "^5.28.5",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^6.9.1",
+    "dotenv-webpack": "^8.0.1",
+    "html-webpack-plugin": "^5.6.0",
+    "preact-island": "^1.1.2",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  },
+  "packageManager": "[email protected]"
+}
diff --git a/docroot/profiles/humsci/su_humsci_profile/js/select-lists/src/select-list-filters.island.tsx b/docroot/profiles/humsci/su_humsci_profile/js/select-lists/src/select-list-filters.island.tsx
@@ -0,0 +1,108 @@
+import {createIslandWebComponent} from 'preact-island'
+import SelectList from "./select-list";
+import {useEffect, useRef, useState} from "preact/compat";
+
+const FilterIsland = ({focus = false}) => {
+  const ref = useRef();
+  const [originalSelect, setOriginalSelect] = useState(null);
+  const [label, setLabel] = useState('');
+
+  useEffect(() => {
+    setOriginalSelect(ref.current.parentNode.querySelector('select'));
+    setLabel(ref.current.parentNode.querySelector('label').textContent);
+
+    // Use visibility because when display none, the field isn't updated
+    // sometimes after ajax.
+    const origSelect = ref.current.parentNode.querySelector('select');
+    origSelect.setAttribute('aria-hidden', 'true');
+    origSelect.style.visibility = 'hidden'
+    origSelect.style.height = '0'
+    origSelect.style.position = 'absolute'
+
+    const origLabel = ref.current.parentNode.querySelector('label');
+    origLabel.style.visibility = 'hidden'
+    origLabel.style.height = '0'
+    origLabel.style.position = 'absolute'
+  }, [])
+
+  const getSelectOptions = (selectElement) => {
+    const options = [];
+
+    const optionElements = selectElement.children;
+
+    for (let i = 0; i < optionElements.length; i++) {
+      const option = optionElements[i];
+      const value = option.getAttribute('value')
+      const label = option.textContent;
+      options.push({value, label, disabled: option.getAttribute('disabled') === 'disabled'});
+    }
+    return options;
+  }
+
+  const onSelectChange = (e, value) => {
+    if (!originalSelect.getAttribute('multiple')) return originalSelect.value = value;
+
+    for (let option of originalSelect.children) {
+      if (value.includes(option.getAttribute('value'))) {
+        option.setAttribute('selected', 'selected')
+      } else {
+        option.removeAttribute('selected');
+      }
+    }
+  }
+
+  const getDefaultValue = () => {
+    let defaultValue = [];
+    for (let option of originalSelect?.children) {
+      if (option.getAttribute('selected')) {
+        if (!originalSelect.getAttribute('multiple')) return option.getAttribute('value');
+
+        defaultValue.push(option.getAttribute('value'))
+      }
+    }
+    return defaultValue;
+  }
+
+  const selectOptions = originalSelect && getSelectOptions(originalSelect);
+
+  return (
+    <div ref={ref}>
+      {originalSelect &&
+        <SelectList
+          name={originalSelect.getAttribute('id') + '-preact'}
+          options={selectOptions.filter(item => item.value !== 'All')}
+          label={label}
+          multiple={originalSelect.getAttribute('multiple') === 'multiple'}
+          onChange={onSelectChange}
+          defaultValue={getDefaultValue()}
+          emptyLabel={selectOptions.find(item => item.value === 'All')?.label}
+        />
+      }
+    </div>
+  )
+}
+
+if (process.env.NODE_ENV === 'development') {
+  const island = createIslandWebComponent('combobox-select-list', FilterIsland)
+  island.render({
+    selector: `.select-preact`,
+  })
+} else {
+  (function () {
+    Drupal.behaviors.selectPreact = {
+      attach: function (context) {
+        let contextClass = ''
+        try {
+          contextClass = '.' + context.getAttribute('class').replace(/ /g, '.');
+        } catch (e) {
+        }
+
+        const island = createIslandWebComponent('combobox-select-list', FilterIsland)
+        island.render({
+          selector: `${contextClass} .select-preact`,
+          initialProps: {focus: contextClass.indexOf('js-view-dom-id') >= 0}
+        })
+      }
+    };
+  })();
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,7 +7,6 @@ @@
             return;
           }
           $.each(Drupal.views.instances, function (key, ajaxView) {
             $(once('views-reset', ajaxView['$exposed_form'].find('input[data-drupal-selector=edit-reset]'))).click(function (e) {
               e.preventDefault();
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		nodeLinker: node-modules

		yarnPath: .yarn/releases/yarn-4.0.2.cjs