Remove jquery

timwis · timwis · commit 6c43aeab0a03 · 2023-02-15T07:14:42.000Z
diff --git a/_layouts/dataset.html b/_layouts/dataset.html
@@ -52,9 +52,9 @@ <h2>Resources</h2>
           <li data-hook="resource-item" property='dcat:distribution' typeof='dcat:Distribution'>
             <a href="{{ resource.url }}" property='dcat:accessURL'><span property="dct:title">{{ resource.name }}</span></a>
             {% if resource.format %}<span class="badge badge-secondary" property='dcat:mediaType'>{{ resource.format}}</span>{% endif %}
-            <a href="#" class="show-resource-details" data-hook="show-resource-details">(Details)</a>
+            <a href="#" class="show-resource-details hidden" data-hook="show-resource-details">(Details)</a>
             {% if resource.description %}<div class="resource-description">{{ resource.description }}</div>{% endif %}
-            <table class="table table-striped table-condensed resource-details" data-hook="resource-details">
+            <table class="table table-striped table-condensed resource-details hidden" data-hook="resource-details">
               {% for field in resource_fields %}
                 {% unless resource_system_fields contains field.field_name %}
                   {% assign value = resource[field[field_name]] %}
diff --git a/css/main.css b/css/main.css
@@ -38,11 +38,6 @@ dataset {
   display: inline-block;
 }
 
-.resource-details,
-.show-resource-details {
-  display: none;
-}
-
 .show-resource-details {
   font-size: 80%;
 }
@@ -77,4 +72,6 @@ dataset {
 
 .view-code-link {
   margin: 1em;
-}
+}
+
+.hidden { display: none; }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,6 @@
   },
   "dependencies": {
     "bootstrap": "^4.3.1",
-    "jquery": "^3.4.1",
     "jquery-deparam": "^0.5.3",
     "lodash": "^4.17.11"
   }
diff --git a/scripts/dist/index.js b/scripts/dist/index.js
diff --git a/scripts/src/components/categories-filter.js b/scripts/src/components/categories-filter.js
@@ -1,8 +1,7 @@
-import $ from 'jquery'
 import {chain, pick, omit, filter, defaults} from 'lodash'
 
 import TmplListGroupItem from '../templates/list-group-item'
-import {setContent, slugify, createDatasetFilters, collapseListGroup} from '../util'
+import {setContent, slugify, createDatasetFilters, collapseListGroup, param} from '../util'
 
 export default class {
   constructor (opts) {
@@ -34,7 +33,7 @@ export default class {
         const itemParams = selected ? omit(params, 'category') : defaults({category: categorySlug}, params)
         return {
           title: category,
-          url: '?' + $.param(itemParams),
+          url: '?' + param(itemParams),
           count: filteredDatasets.length,
           unfilteredCount: datasetsInCat.length,
           selected: selected
diff --git a/scripts/src/components/dataset-display.js b/scripts/src/components/dataset-display.js
@@ -1,22 +1,24 @@
-import $ from 'jquery'
-
-import {queryByHook} from '../util'
+import {queryByHook, show, toggleVisibility} from '../util'
 
 export default class {
   constructor (opts) {
-    const elements = {
-      resourceItem: queryByHook('resource-item', opts.el)
-    }
+    const resourceItems = queryByHook('resource-item', opts.el)
 
     // Resource details links
-    elements.resourceItem.each((index, item) => {
-      if ($('table tr', item).length) {
-        queryByHook('show-resource-details', item).show()
+    resourceItems.forEach((resourceItem) => {
+      const hasDetails = !!resourceItem.querySelector('table tr')
+      if (hasDetails) {
+        const showDetailsBtns = queryByHook('show-resource-details', resourceItem)
+        show(showDetailsBtns)
+
+        showDetailsBtns.forEach((btn) => {
+          const details = queryByHook('resource-details', btn.parentNode)
+          btn.addEventListener('click', (event) => {
+            toggleVisibility(details)
+            event.preventDefault()
+          })
+        })
       }
     })
-    elements.resourceItem.on('click', '[data-hook~=show-resource-details]', (e) => {
-      $(e.currentTarget).closest('[data-hook~=resource-item]').children('[data-hook~=resource-details]').toggle()
-      e.preventDefault()
-    })
   }
 }
diff --git a/scripts/src/components/datasets-list.js b/scripts/src/components/datasets-list.js
@@ -25,7 +25,7 @@ export default class {
 
     // Filter datasets and render in items container
     const paramFilters = pick(opts.params, ['organization', 'category'])
-    const attributeFilters = pick(opts.el.data(), ['organization', 'category'])
+    const attributeFilters = pick(opts.el.dataset, ['organization', 'category'])
     const filters = createDatasetFilters(defaults(paramFilters, attributeFilters))
     const filteredDatasets = filter(opts.datasets, filters)
     const datasetsMarkup = filteredDatasets.map(TmplDatasetItem)
@@ -38,7 +38,7 @@ export default class {
 
     // Search datasets listener
     const searchFunction = this._createSearchFunction(filteredDatasets)
-    elements.searchQuery.on('keyup', (e) => {
+    elements.searchQuery.forEach((el) => el.addEventListener('keyup', (e) => {
       const query = e.currentTarget.value
 
       // Datasets
@@ -49,7 +49,7 @@ export default class {
       // Dataset count
       const resultsCountMarkup = results.length + ' datasets'
       setContent(elements.datasetsCount, resultsCountMarkup)
-    })
+    }))
   }
 
   // Returns a function that can be used to search an array of datasets
diff --git a/scripts/src/components/organizations-filter.js b/scripts/src/components/organizations-filter.js
@@ -1,8 +1,7 @@
-import $ from 'jquery'
 import {chain, pick, omit, filter, defaults} from 'lodash'
 
 import TmplListGroupItem from '../templates/list-group-item'
-import {setContent, slugify, createDatasetFilters, collapseListGroup} from '../util'
+import {setContent, slugify, createDatasetFilters, collapseListGroup, param} from '../util'
 
 export default class {
   constructor (opts) {
@@ -23,7 +22,7 @@ export default class {
         const itemParams = selected ? omit(params, 'organization') : defaults({organization: orgSlug}, params)
         return {
           title: organization,
-          url: '?' + $.param(itemParams),
+          url: '?' + param(itemParams),
           count: filteredDatasets.length,
           unfilteredCount: datasetsInOrg.length,
           selected: selected
diff --git a/scripts/src/index.js b/scripts/src/index.js
@@ -1,6 +1,5 @@
 /* global settings */
-import $ from 'jquery'
-import 'jquery-deparam'
+import deparam from 'jquery-deparam'
 import 'bootstrap/js/dist/collapse'
 
 import DatasetsList from './components/datasets-list'
@@ -9,12 +8,13 @@ import OrganizationsFilter from './components/organizations-filter'
 import DatasetDisplay from './components/dataset-display'
 import {queryByComponent} from './util'
 
-const params = $.deparam(window.location.search.substr(1))
+const params = deparam(window.location.search.substr(1))
 
 // Helper function to ensure datasets.json is only fetched once per page
 let datasetsCache
 function getDatasets () {
-  datasetsCache = datasetsCache || $.getJSON(`${settings.BASE_URL}/datasets.json`)
+  const url = `${settings.BASE_URL}/datasets.json`
+  datasetsCache = datasetsCache || fetch(url).then((response) => response.json())
   return datasetsCache
 }
 
@@ -31,11 +31,11 @@ for (let component of components) {
     // If the component depends on datasets.json, fetch it first (once per page) and pass it
     if (component.usesDatasets) {
       getDatasets().then((datasets) => {
-        els.each((index, el) => new component.class({el: $(el), params, datasets})) // eslint-disable-line
+        els.forEach((el) => new component.class({el: el, params, datasets})) // eslint-disable-line
       })
     // Otherwise simply initialize the component
     } else {
-      els.each((index, el) => new component.class({el: $(el), params})) // eslint-disable-line
+      els.forEach((el) => new component.class({el: el, params})) // eslint-disable-line
     }
   }
 }
diff --git a/scripts/src/util.js b/scripts/src/util.js
@@ -1,15 +1,17 @@
-import $ from 'jquery'
-
 export function queryByHook (hook, container) {
-  return $(`[data-hook~=${hook}]`, container)
+  const context = container || document
+  return Array.from(context.querySelectorAll(`[data-hook~=${hook}]`))
 }
 
 export function queryByComponent (component, container) {
-  return $(`[data-component~=${component}]`, container)
+  const context = container || document
+  return Array.from(context.querySelectorAll(`[data-component~=${component}]`))
 }
 
 export function setContent (container, content) {
-  return container.empty().append(content)
+  const containerList = ensureArray(container)
+  const contentString = Array.isArray(content) ? content.join('\n') : content
+  containerList.forEach((container) => container.innerHTML = contentString)
 }
 
 // Meant to mimic Jekyll's slugify function
@@ -37,20 +39,52 @@ export function createDatasetFilters (filters) {
 
 // Collapses a bootstrap list-group to only show a few items by default
 // Number of items to show can be specified in [data-show] attribute or passed as param
-export function collapseListGroup (container, show) {
-  if (!show) show = container.data('show') || 5
+export function collapseListGroup (container, numToShow) {
+  if (!numToShow) numToShow = +container.dataset.show || 5
+
+  const hideFromIndex = numToShow + 1
+  const itemsToHideQuery = `.list-group-item:nth-of-type(n+${hideFromIndex}):not(.active)`
+  const itemsToHide = Array.from(container.querySelectorAll(itemsToHideQuery))
 
-  const itemsToHide = $('.list-group-item:gt(' + (show - 1) + '):not(.active)', container)
   if (itemsToHide.length) {
-    itemsToHide.hide()
-
-    const showMoreButton = $('<a href="#" class="list-group-item">Show ' + itemsToHide.length + ' more...</a>')
-    showMoreButton.on('click', function (e) {
-      itemsToHide.show()
-      $(this).off('click')
-      $(this).remove()
-      e.preventDefault()
-    })
-    container.append(showMoreButton)
+    hide(itemsToHide)
+
+    const showMoreButton = createShowMoreButton(itemsToHide)
+    container.appendChild(showMoreButton)
   }
 }
+
+export function param (obj) {
+  const params = new URLSearchParams(obj)
+  return params.toString()
+}
+
+export function hide (els) {
+  ensureArray(els).forEach((el) => el.classList.add('hidden'))
+}
+
+export function show (els) {
+  ensureArray(els).forEach((el) => el.classList.remove('hidden'))
+}
+
+export function toggleVisibility (els) {
+  ensureArray(els).forEach((el) => el.classList.toggle('hidden'))
+}
+
+function ensureArray (item) {
+  return Array.isArray(item) ? item : [item]
+}
+
+function createShowMoreButton (hiddenItems) {
+  const el = document.createElement('a')
+  el.classList.add('list-group-item')
+  el.setAttribute('href', '#')
+  el.textContent = `Show ${hiddenItems.length} more...`
+  el.addEventListener('click', function (event) {
+    show(hiddenItems)
+    this.remove()
+    event.preventDefault()
+  }, {once: true})
+
+  return el
+}

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,6 @@`
`16`	`16`	`},`
`17`	`17`	`"dependencies": {`
`18`	`18`	`"bootstrap": "^4.3.1",`
`19`		`- "jquery": "^3.4.1",`
`20`	`19`	`"jquery-deparam": "^0.5.3",`
`21`	`20`	`"lodash": "^4.17.11"`
`22`	`21`	`}`