Remove jquery

_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]] %}

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; }

package.json

@@ -15,8 +15,7 @@
     "parcel": "^2.8.3"
   },
   "dependencies": {
-    "bootstrap": "^4.3.1",
-    "jquery": "^3.4.1",
+    "bootstrap.native": "~4.1.0",
     "jquery-deparam": "^0.5.3",
     "lodash": "^4.17.11"
   }

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

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()
-    })
   }
 }

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

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

scripts/src/index.js

@@ -1,20 +1,20 @@
 /* global settings */
-import $ from 'jquery'
-import 'jquery-deparam'
-import 'bootstrap/js/dist/collapse'
+import deparam from 'jquery-deparam'
+import 'bootstrap.native/dist/bootstrap-native-v4'
 
 import DatasetsList from './components/datasets-list'
 import CategoriesFilter from './components/categories-filter'
 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
     }
   }
 }