Replace javascript with jquery CKAN module

ckanext/ontario_theme/fanstatic/scripts/odc-access-level.js

@@ -1,73 +1,85 @@
+// Enable JavaScript's strict mode. Strict mode catches some common
+// programming errors and throws exceptions, prevents some unsafe actions from
+// being taken, and disables some confusing and bad JavaScript features.
+
 /*
- * Function for changing URL parameters when an access level
- * checkbox is clicked.
+ * CKAN module function for changing URL parameters on checkbox selection and
+ * updating callout
  *
+ * accessLevelBoxes
+ *  All the access level checkboxes in the search bar
+ * openCheckbox
+ *  The checkbox with value open
  */
+"use strict";
 
-(function () {
-    var accessLevelBoxes = document.querySelectorAll('input[name="access_level"][type="checkbox"]');
-    let params = new URLSearchParams(document.location.search);
-    var openCheckbox = document.getElementById("checkbox-option-open");
-    if (!params.has("access_level") && openCheckbox) {
-        openCheckbox.checked = true;
-    } else if (params.has("access_level")) {
-        let selected_levels = params.getAll("access_level");
-        selected_levels.forEach((e) => {
-            document.getElementById(`checkbox-option-${e}`).checked = true
-        });
-    }
-
-    accessLevelBoxes.forEach(element => {
-        element.addEventListener('change', showAccessLevel)
-    })
-
-    function showAccessLevel() {
-        let params = new URLSearchParams(document.location.search);
-        const isChecked = this.checked;
-        const paramName = this.name;
-        const paramValue = this.value;
-        if (openCheckbox.checked && !params.has(paramName)) {
-            params.append(paramName, openCheckbox.value)
-        }
-
-        if (isChecked) {
-            if (params.has('page')) {
-                params.delete('page');
+ckan.module('access_level_checkboxes', function ($) {
+    return {
+        options: {
+            accessLevelBoxes: null,
+            openCheckbox: null,
+		},
+        initialize: function () {
+            this.accessLevelBoxes = $('input[name="access_level"][type="checkbox"]');
+            var params = new URLSearchParams(document.location.search);
+            this.openCheckbox = $("#checkbox-option-open");
+            if (!params.has("access_level") && this.openCheckbox) {
+                this.openCheckbox.prop('checked', true);
+            } else if (params.has("access_level")) {
+                var selected_levels = params.getAll("access_level");
+                selected_levels.forEach(function(e) {
+                    $(`#checkbox-option-${e}`).prop('checked', true);
+                });
             }
-            params.append(paramName, paramValue);
-        } else {
-            if (params.has(paramName, paramValue)) {
-                params.delete(paramName, paramValue);
+            $(this.accessLevelBoxes).on('change', jQuery.proxy(this._onChange, this));
+            $(document).ready(jQuery.proxy(this._updateAccessLevelSentence, this));
+        },
+        _onChange: function (event) {
+            var target = event.target;
+            var isChecked = $(target).prop('checked');
+            const paramName = $(target).attr('name');
+            var paramValue = $(target).val();
+            var params = new URLSearchParams(document.location.search);
+
+            if (this.openCheckbox.is(':checked') && !params.has(paramName)) {
+                params.append(paramName, this.openCheckbox.val());
             }
-        }
-        window.location.search = params;
-    }
 
-    window.addEventListener('load', updateAccessLevelSentence)
-
-    function updateAccessLevelSentence() {
-        const selectedBoxes = document.querySelectorAll('input[name="access_level"]:checked');
-        const allLevels = document.getElementById('access-level-checkboxes');
-        const calloutElement = document.getElementById('access-level-sentence-value');
-
-        let displayName = "";
-
-        if (selectedBoxes.length === accessLevelBoxes.length) {
-            displayName = allLevels.dataset.value;
-        } else if (selectedBoxes.length === 1) {
-            displayName = selectedBoxes[0].getAttribute('data-display-name');
-        } else {
-            selectedBoxes.forEach((box, index) => {
-                displayName += box.getAttribute('data-display-name');
-                if (index < selectedBoxes.length - 1) {
-                    displayName += calloutElement.dataset.and;
+            if (isChecked) {
+                if (params.has('page')) {
+                    params.delete('page');
                 }
-            });
-        }
-
-        if (calloutElement) {
-            calloutElement.textContent = displayName;
+                params.append(paramName, paramValue);
+            } else {
+                if (params.has(paramName, paramValue)) {
+                    params.delete(paramName, paramValue);
+                }
+            }
+            window.location.search = params;
+        },
+        _updateAccessLevelSentence: function (event) {
+            var selectedBoxes = $('input[name="access_level"]:checked');
+            var calloutElement = $('#access-level-sentence-value');
+            const and = this._(' and ');
+            const all_levels = this._('All levels');
+
+            var displayName = "";
+
+            if (selectedBoxes.length === this.accessLevelBoxes.length) {
+                displayName = all_levels;
+            } else if (selectedBoxes.length === 1) {
+                displayName = selectedBoxes.first().data('display-name');
+            } else {
+                selectedBoxes.each(function(index) {
+                    displayName += $(this).data('display-name');
+                    if (index < selectedBoxes.length - 1) {
+                        displayName += and
+                    }
+                });
+            }
+            if (calloutElement.length > 0) {
+                calloutElement.text(displayName);
+            }
         }
     }
-
-  })();
+});

ckanext/ontario_theme/fanstatic/scripts/webassets.yml

@@ -9,7 +9,6 @@ ontario_theme_js:
     - odc-search-modal.js
     - odc-clear-filters.js
     - odc-toc-smooth-scroll.js
-    - odc-access-level.js
 
 ontario_theme_form_validators_js:
   filters: rjsmin
@@ -24,6 +23,15 @@ ontario_theme_facet_checkboxes_js:
   filters: rjsmin
   contents: odc-facet-checkboxes.js
   output: ontario_theme_scripts/%(version)s_odc-facet-checkboxes.js
+  extra:
+    preload:
+      - vendor/jquery
+      - base/main
+
+ontario_theme_access_level_js:
+  filters: rjsmin
+  contents: odc-access-level.js
+  output: ontario_theme_scripts/%(version)s_odc-access-level.js
   extra:
     preload:
       - vendor/jquery

ckanext/ontario_theme/i18n/ckanext-ontario_theme.pot

@@ -1483,12 +1483,12 @@ msgstr ""
 msgid "Sort by"
 msgstr ""
 
-#: ckanext/ontario_theme/templates/internal/snippets/access_level_checkboxes.html:7
-msgid "All levels"
+#: ckanext/ontario_theme/fanstatic/scripts/odc-access.js:72
+msgid " and "
 msgstr ""
 
-#: ckanext/ontario_theme/templates/internal/snippets/search_form.html:169
-msgid "and"
+#: ckanext/ontario_theme/fanstatic/scripts/odc-access.js:73
+msgid "All levels"
 msgstr ""
 
 #: ckanext/ontario_theme/templates/internal/snippets/search_form.html:83

ckanext/ontario_theme/i18n/fr/LC_MESSAGES/ckanext-ontario_theme.po

@@ -2069,11 +2069,11 @@ msgstr "Juridiction"
 msgid "Showing datasets with access level"
 msgstr "Jeux de données avec niveau d’accès"
 
-#: ckanext/ontario_theme/templates/internal/snippets/access_level_checkboxes.html:7
+#: ckanext/ontario_theme/fanstatic/scripts/odc-access.js:73
 msgid "All levels"
 msgstr "Tous les niveaux"
 
-#: ckanext/ontario_theme/templates/internal/snippets/search_form.html:169
+#: ckanext/ontario_theme/fanstatic/scripts/odc-access.js:87
 msgid " and "
 msgstr " et "
 

ckanext/ontario_theme/templates/internal/snippets/access_level_checkboxes.html

@@ -1,9 +1,10 @@
 {% set schema_dict = h.scheming_get_dataset_schema('dataset')['dataset_fields'] %}
 {% set name = "access_level" %}
-<div class="access-level ontario-form-group">
+{%- asset "ontario_theme_scripts/ontario_theme_access_level_js" -%}
+<div class="access-level ontario-form-group" data-module="access_level_checkboxes">
   <fieldset class="ontario-fieldset">
     <legend class="ontario-fieldset__legend">{{ _('Access level') }}{{ _(':') }}</legend>
-    <div id="access-level-checkboxes" class="ontario-checkboxes" data-value="{{ _('All levels') }}">
+    <div id="access-level-checkboxes" class="ontario-checkboxes">
       {# Checking selected checkboxes #}
       {% with access_levels = h.scheming_field_by_name(schema_dict, name).choices %}
         {% for levels in access_levels %}

ckanext/ontario_theme/templates/internal/snippets/search_form.html

@@ -180,7 +180,7 @@ <h2 class="ontario-label">
         {% set border_highlight = "ontario-border-highlight--dark-blue" if count !=0 else "ontario-border-highlight--dark-taupe" %}
         <div class="ontario-callout {{ border_highlight }} access-level-status ontario-small-12 ontario-large-7 ontario-columns">
           <p id="access-level-sentence-id">
-            {{ _('Showing datasets with access level') }}{{ _(':') }} <span id="access-level-sentence-value" data-and="{{ _(' and ') }}"></span>
+            {{ _('Showing datasets with access level') }}{{ _(':') }} <span id="access-level-sentence-value"></span>
           </p>
         </div>
       {% endif %}