Merge pull request #175 from dboehmer/no-jQuery

Remove jQuery and migrate Bootstrap to v5.1.3

Author: dboehmer

lib/Coocook/Controller/Root.pm

@@ -90,14 +90,13 @@ sub auto : Private {
 
     $c->stash(
         css => [
-            '/lib/bootstrap-4.4.1-dist/css/bootstrap' . ( $c->debug ? '.css' : '.min.css' ),
+            '/lib/bootstrap-5.1.3-dist/css/bootstrap' . ( $c->debug ? '.css' : '.min.css' ),
             '/css/local_bootstrap_modifications.css',
             '/css/material-design-icons.css',
             '/css/style.css',
         ],
         js => [
-            '/lib/jquery-3.5.1' .                      ( $c->debug ? '.js' : '.min.js' ),
-            '/lib/bootstrap-4.4.1-dist/js/bootstrap' . ( $c->debug ? '.js' : '.min.js' ),
+            '/lib/bootstrap-5.1.3-dist/js/bootstrap' . ( $c->debug ? '.js' : '.min.js' ),
             '/lib/marked/marked' .                     ( $c->debug ? '.js' : '.min.js' ),
             '/js/script.js',
         ],

root/static/js/article/edit.js

@@ -1,11 +1,14 @@
-$(function() {
+(() => {
     // check 'preorder' when changing preorder details
-    $('input[name="preorder_workdays"],input[name="preorder_servings"]').on( 'change click input', function() {
-        $('input[name="preorder"').prop('checked', true);
+    const preorderInputElem = document.getElementById('preorder');
+    const preorderWorkdaysInputElem = document.getElementById('preorder_workdays');
+    const preorderServingsInputElem = document.getElementById('preorder_servings');
+    [preorderWorkdaysInputElem, preorderServingsInputElem].forEach(elem => {
+        elem.addEventListener('input', () => preorderInputElem.checked = true);
     });
 
     // check 'shelf life' when changing shelf life period
-    $('input[name="shelf_life_days"]').on( 'change click input', function() {
-        $('input[name="shelf_life"').prop('checked', true);
-    });
-});
+    const shelfLifeInputElem = document.getElementById('shelf_life');
+    const shelfLifeDaysInputElem = document.getElementById('shelf_life_days');
+    shelfLifeDaysInputElem.addEventListener('input', () => shelfLifeInputElem.checked = true);
+})();

root/static/js/recipe/import/preview.js

@@ -1,47 +1,56 @@
-$( function() {
-    $('form#import table td.article select').change(function() {
-        let $this = $(this);
-
-        let $selectedOption = $this.find('option:selected');
-
-        let $unit = $this.closest('tr').find('td.unit select');
-        let $units = $unit.find('option');
-
-        if( !$selectedOption.val() ) {
-            $units.show();
-            return;
-        }
-
-        let unitIds = $selectedOption.attr('data-units').split(',');
-
-        // if select unit is not applicable to article, reset unit selector
-        if( unitIds.indexOf( $unit.val() ) == -1 ) {
-            $unit.val('');
+(() => {
+    const articleElemList = document.querySelectorAll('form#import table td.article select');
+    articleElemList.forEach(articleElem => {
+        articleElem.onchange = () => {
+            let selectedArticleElem = articleElem.options[articleElem.options.selectedIndex];
+        
+            let unitElem = articleElem.closest('tr').querySelector('td.unit select');
+            let unitOptionElems = unitElem.options;
+
+            if( !selectedArticleElem.value ) {
+                Array.from(unitOptionElems).forEach(unitOptionElem => {
+                    unitOptionElem.style.display = 'block';
+                });
+                return;
+            }
+    
+            let unitIds = selectedArticleElem.getAttribute('data-units').split(',');
+            // if select unit is not applicable to article, reset unit selector
+            if( unitIds.indexOf( unitElem.value ) == -1 ) {
+                unitElem.value = '';
+            }
+    
+            // show only applicable units
+            Array.from(unitOptionElems).forEach(unitOptionElem => {
+                let unitId = unitOptionElem.value;
+                if( unitId == '' || unitIds.indexOf(unitId) > -1 ) {
+                    unitOptionElem.style.display = 'block';
+                } else {
+                    unitOptionElem.style.display = 'none';
+                }
+            });
         }
-
-        // show only applicable units
-        $units.each( function() {
-            let $u = $(this);
-            let unitId = $u.val();
-
-            $u.toggle( unitId == '' || unitIds.indexOf(unitId) > -1 );
-        });
-    }).trigger('change');
+    });
 
     // check uniqueness of recipe name
-    $('form#import input[name="name"]').on('change input', function() {
-        let name = this.value;
-
-        this.setCustomValidity( existingRecipeNames.indexOf(name) == -1 ? '' : "This recipe name already exists in this project" );
-    }).trigger('input');
+    const nameInputElem = document.querySelector('form#import input[name="name"]');
+    nameInputElem.addEventListener('input', () => {
+        let name = nameInputElem.value;
+        
+        nameInputElem.setCustomValidity( existingRecipeNames.indexOf(name) == -1 ? '' : "This recipe name already exists in this project" );
+    });
 
     // skip checkboxes
-    $('form#import table td.import input[type="checkbox"]').on( 'change', function() {
-        let skip = !this.checked;
-        let $tr = $(this).closest('tr');
+    const checkboxElemList = document.querySelectorAll('form#import table td.import input[type="checkbox"]');
+    checkboxElemList.forEach(checkboxElem => {
+        checkboxElem.onchange = () => {
+            let skip = !checkboxElem.checked;
+            let trElem = checkboxElem.closest('tr');
 
-        $tr.toggleClass( 'skip', skip );
+            trElem.classList.toggle('skip');
 
-        $tr.find('input,select').not(this).prop( 'disabled', skip );
-    }).trigger('change');
-} );
+            Array.from(trElem.querySelectorAll('input,select')).filter((item) => item != checkboxElem)
+                .forEach(item => skip ? item.setAttribute( 'disabled', skip ) : item.removeAttribute('disabled') );
+        }
+    });
+})();

root/static/js/script.js

@@ -1,42 +1,30 @@
-$(function() {
+(() => {
 
     // reduce options of <select> inputs for unit to units applicable to selected article
-    $('select[name=article]').each(function() {
-        let $article = $(this);
-        let $unit    = $article.closest('form').find('select[name=unit]');
+    const articleElems = document.getElementsByName('article');
+    Array.from(articleElems).forEach(articleElem => {
+        const unitElem = articleElem.closest('form').querySelector('select[name=unit]');
 
-        if( $unit.length == 1 ) {
-            let $units = $unit.find('option');
+        if( unitElem.type == "select-one" ) {
+            const unitOptionElems = unitElem.options;
 
             // event handler
-            $article.change(function() {
-                let data_units = $article.find('option:selected').attr('data-units');
-
-                if( ! data_units ) {    // no 'data-units' attribute, e.g. for "choose article" placeholder
-                    $units.show();
-                    return;
-                }
+            articleElem.onchange = () => {
+                let data_units = articleElem.options[articleElem.selectedIndex].getAttribute('data-units');
 
                 let units = data_units.split(',');
                 let units_hash = {};
                 units.forEach(function(unit) { units_hash[unit] = true } );
 
-                $units.each(function() {
-                    let $unit = $(this);
-                    $unit.toggle( Boolean( units_hash[ $unit.attr('value') ] ) );
-                });
-
-                $units.prop('selected', false);
-
-                // select first visible option ( :visible does not work properly for select options)
-                $units.each(function () {
-                    if ($(this).css('display') != 'none') {
-                        $(this).prop('selected', true);
-                        return false;
+                Array.from(unitOptionElems).forEach(unitOptionElem => {
+                    if( Boolean( units_hash[ unitOptionElem.value ] ) ) {
+                        unitOptionElem.style.display = "block";
+                        unitOptionElem.selected = true;
+                    } else {
+                        unitOptionElem.style.display = "none";
                     }
                 });
-            })
-            .change();    // trigger on page load
+            }
         }
     });
 
@@ -75,4 +63,4 @@ $(function() {
         }
     });
 
-});
+})();

root/static/js/user/register.js

@@ -1,44 +1,40 @@
-$( function() {
-    $('input[name="url"]').attr('tabindex', -1);
+(() => {
+    document.querySelector('input[name="url"]')?.setAttribute('tabindex', -1);
 
-    var MAX_STARS = 5;
+    const MAX_STARS = 5;
 
-    let $password  = $('input[name="password"]');
-    let $password2 = $('input[name="password2"]');
-    let $meter = $( '<span>' );
+    const passwordElem  = document.querySelector('input[name="password"]');
+    const password2Elem = document.querySelector('input[name="password2"]');
+    const meterElem =  document.createElement('span');
+    passwordElem.parentElement.appendChild(meterElem);
 
-    $meter.insertAfter($password);
-    $meter.before('&nbsp;');
-
-    $password.on( 'change input', function() {
-        let password = $password.val();
+    passwordElem.addEventListener('input', () => {
+        let password = passwordElem.value;
 
         let stars = password == '' ? 0 : ( zxcvbn(password).score + 1 );
 
         let html = 'strength: ';
         html += '&#x2605;'.repeat(             stars );
         html += '&#x2606;'.repeat( MAX_STARS - stars );
 
-        $meter.html( html );
-        $meter.attr( 'title', stars + ' of ' + MAX_STARS );
+        meterElem.innerHTML = html;
+        meterElem.setAttribute( 'title', stars + ' of ' + MAX_STARS );
     });
 
-    $password.change();
-
-    let $comparator = $('<span>');
-
-    $comparator.insertAfter($password2);
-    $comparator.before('&nbsp;');
-
-    $password.add($password2).on('change input', function() {
-        let password  = $password .val();
-        let password2 = $password2.val();
-
-        if( password.length || password2.length ) {
-            $comparator.text( password == password2 ? "matches" : "doesn't match" );
-        }
-        else {
-            $comparator.text('');
-        }
+    const comparatorElem = document.createElement('span');
+    password2Elem.parentElement.appendChild(comparatorElem);
+
+    [passwordElem, password2Elem].forEach(item => {
+        item.addEventListener('input', () => {
+            let password  = passwordElem.value;
+            let password2 = password2Elem.value;
+
+            if( password.length || password2.length ) {
+                comparatorElem.innerHTML = password == password2 ? "matches" : "doesn't match";
+            }
+            else {
+                comparatorElem.innerHTML = '';
+            }
+        });
     });
-} );
+})();