Remove jquery (WIP)

Author: timwis

scripts/src/components/dataset-display.js

@@ -1,22 +1,28 @@
-import $ from 'jquery'
-
 import {queryByHook} 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)
+        showDetailsBtns.forEach((btn) => {
+          btn.style.display = 'inline-block' // TODO: replace with show()
+          btn.addEventListener('click', (event) => {
+            const details = queryByHook('resource-details', btn.parentNode)
+            // TODO: toggle visibility of 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()
+    
+    const showDetailsBtns = queryByHook('show-resource-details')
+    showDetailsBtns.forEach((btn) => {
+      btn.addEventListener
     })
   }
 }

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

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,48 @@ 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.style.display = 'none')
+}
+
+export function show (els) {
+  ensureArray(els).forEach((el) => el.style.display = '')
+}
+
+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
+}