Merge branch 'main' into 120-tech-unit-testing-for-autocomplete-combobox

Author: zoltan-dulac

.eslintrc.json

@@ -6,6 +6,12 @@
         "jest": true
     },
     "extends": ["eslint:recommended", "prettier"],
+    "globals": {
+        "Chartist": "readonly",
+        "__dirname": "readonly",
+        "page": "readonly",
+        "process": "readonly"
+    },
     "parserOptions": {
         "sourceType": "module",
         "ecmaVersion": 12
@@ -26,7 +32,8 @@
         "**.php",
         "js/tmp.js",
         "js/demos/ana-tudor/**",
-        "bin/php-express/**"
+        "bin/php-express/**",
+        "content/code-fragments/**/*"
     ],
     "plugins": ["import", "node", "promise"],
     "overrides": [

bin/check-html.js

@@ -1,6 +1,5 @@
 const fs = require('fs');
 const wget = require('wget-improved');
-const { execFile } = require('child_process');
 const { vnu } = require('vnu');
 
 const htmlList = [];
@@ -27,7 +26,7 @@ async function getHTML() {
                 console.error(err);
                 return 1;
             });
-            download.on('end', function (output) {
+            download.on('end', function () {
                 numFilesIndexed++;
                 if (numFilesIndexed === numFiles) {
                     console.log('Files downloaded.  Analyzing');

bin/promote-node-modules-to-server.js

@@ -1,6 +1,5 @@
 const fs = require('fs');
 const fsExtra = require('fs-extra');
-const { exec } = require('child_process');
 
 console.log('Running promote-node-modules-to-server.js');
 console.log('clearing lib directory');

bin/server.js

@@ -3,7 +3,6 @@ const path = require('path');
 const rewrite = require('express-urlrewrite');
 const app = express();
 const port = 8888;
-const { exec } = require('child_process');
 
 let phpCmd = 'php';
 

content/body/button.php

@@ -250,4 +250,3 @@
             </div>
 
         </div>
-    

css/article.css

@@ -42,6 +42,7 @@
   position: -webkit-sticky;
   position: sticky;
   left: 0;
+  z-index: 1;
 }
 .sticky-table__sticky-horiz-heading {
   position: -webkit-sticky;
@@ -173,8 +174,8 @@ table.fixed-headers [role="rowheader"],
 table.fixed-headers [role="cell"],
 [role="table"].fixed-headers [role="cell"] {
   overflow: hidden;
-  width: 14.28571429%;
-  max-width: 14.28571429%;
+  width: 100% / 7;
+  max-width: 100% / 7;
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;

css/checkbox__aria.css

@@ -28,7 +28,7 @@
   text-align: center;
   text-shadow: 0 0 0.0714em #73994d;
   font-weight: bold;
-  transform: scale(2.5) translateY(-0.0625rem) translateX(-0.125rem);
+  transform: scale(2.5) translateY(-1 / 16rem) translateX(-2 / 16rem);
 }
 [role="checkbox"][aria-checked="mixed"]:after {
   content: "-";

enable-node-libs/glider-js/glider.css

@@ -45,7 +45,8 @@
   opacity: 0;
   height: 0;
 }
-.glider-prev,.glider-next {
+.glider-prev,
+.glider-next {
   user-select: none;
   position: absolute;
   outline: none;
@@ -61,8 +62,8 @@
   color: #666;
   opacity: 1;
   line-height: 1;
-  transition: opacity .5s cubic-bezier(.17,.67,.83,.67),
-              color .5s cubic-bezier(.17,.67,.83,.67);
+  transition: opacity 0.5s cubic-bezier(0.17, 0.67, 0.83, 0.67),
+    color 0.5s cubic-bezier(0.17, 0.67, 0.83, 0.67);
 }
 .glider-prev:hover,
 .glider-next:hover,
@@ -76,7 +77,7 @@
 }
 .glider-next.disabled,
 .glider-prev.disabled {
-  opacity: .25;
+  opacity: 0.25;
   color: #666;
   cursor: default;
 }
@@ -113,7 +114,7 @@
 .glider-dot.active {
   background: #a89cc8;
 }
-@media(max-width: 36em){
+@media (max-width: 36em) {
   .glider::-webkit-scrollbar {
     opacity: 1;
     -webkit-appearance: none;
@@ -124,6 +125,6 @@
     opacity: 1;
     border-radius: 99px;
     background-color: rgba(156, 156, 156, 0.25);
-    box-shadow: 0 0 1px rgba(255,255,255,.25);
+    box-shadow: 0 0 1px rgba(255, 255, 255, 0.25);
   }
 }

enable-node-libs/glider-js/glider.js

@@ -47,6 +47,7 @@
         slidesToShow: 1,
         resizeLock: true,
         duration: 0.5,
+        passiveListeners: false,
         // easeInQuad
         easing: function (x, t, b, c, d) {
           return c * (t /= d) * t + b
@@ -82,9 +83,14 @@
 
     // set events
     _.resize = _.init.bind(_, true)
-    _.event(_.ele, 'add', {
-      scroll: _.updateControls.bind(_)
-    })
+    _.event(
+      _.ele,
+      'add',
+      {
+        scroll: _.updateControls.bind(_)
+      },
+      { passive: _.opt.passiveListeners }
+    )
     _.event(_window, 'add', {
       resize: _.resize
     })
@@ -201,7 +207,11 @@
 
     _.ele.classList.toggle('draggable', _.opt.draggable === true)
     _.event(_.ele, 'remove', events)
-    if (_.opt.draggable) _.event(_.ele, 'add', events)
+    if (_.opt.draggable) {
+      _.event(_.ele, 'add', events, {
+        passive: _.opt.passiveListeners
+      })
+    }
   }
 
   gliderPrototype.buildDots = function () {

enable-node-libs/jquery-validation/dist/jquery.validate.min.js

@@ -8,13 +8,6 @@ const alert = new (function () {
         assertiveAlertEl.innerHTML = `The time now is ${new Date().toLocaleTimeString()}`;
     };
 
-    this.checkboxChangeHandler = (e) => {
-        assertiveAlertEl.setAttribute(
-            'aria-expanded',
-            checkboxEl.checked ? 'true' : 'false',
-        );
-    };
-
     this.init = () => {
         sayTimeEl.addEventListener('click', this.sayTimeClickHandler);
     };

enable-node-libs/wicg-inert/dist/inert.min.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-unused-vars
 var ariaButtonExample = new (function () {
     const activate = (e) => {
         const { target } = e;

js/bookmarklets/positionStickyTest.js

@@ -21,7 +21,7 @@ const lineChartDemo = function (chartSel, tableSel) {
             series.push([]);
         }
 
-        $bodyRows.forEach(($el, i) => {
+        $bodyRows.forEach(($el) => {
             const $rowData = $el.querySelectorAll('td');
 
             labels.push($el.querySelector('th').innerText);
@@ -105,5 +105,5 @@ const lineChartDemo = function (chartSel, tableSel) {
     $chart.classList.add('bar-chart--initialized');
 };
 
-const demo = new lineChartDemo('#bar-chart', '#bar-chart__data');
+new lineChartDemo('#bar-chart', '#bar-chart__data');
 tabs.init();

js/demos/alert.js

@@ -1,5 +1,3 @@
-import showcode from '../enable-libs/showcode.js';
-
 const $form = document.getElementById('group-example__form');
 const $checkboxes = $form.querySelectorAll('input[type="checkbox"]');
 const $error = document.getElementById('html-checkbox__error');
@@ -25,5 +23,3 @@ $form.addEventListener('submit', (e) => {
         $error.focus();
     }
 });
-
-//showcode.addJsObj('checkbox', checkbox);

js/demos/aria-button-example.js

@@ -1,4 +1,4 @@
-var htmlButtonExample = new (function () {
+new (function () {
     const activate = (e) => {
         const { target } = e;
         if (

js/demos/bar-chart.js

@@ -112,8 +112,7 @@ d3.csv('../../data/line-chart.csv').then(function (data) {
         const rows = tbody.selectAll('tr').data(data).enter().append('tr');
 
         // create a cell in each row for each column
-        const cells = rows
-            .selectAll('td')
+        rows.selectAll('td')
             .data(function (row) {
                 return columns.map(function (column) {
                     return { column: column, value: row[column] };

js/demos/checkbox.js

@@ -9,7 +9,6 @@ const margin = { top: 30, right: 20, bottom: 30, left: 50 },
 // Parse the date / time
 // Enable changed d3.time.format to d3.timeFormat due to API changes
 // details: https://stackoverflow.com/questions/39369789/how-to-solve-typeerror-d3-time-is-undefined
-const parseDate = d3.timeParse('%d-%b-%y');
 
 // Set the ranges
 // Enable changed d3.time.scale changed to d3.scaleTime and d3.scale.linear changed to d3.scaleLinear
@@ -111,8 +110,7 @@ d3.csv('../../data/ice-cream.csv').then(function (data) {
         const rows = tbody.selectAll('tr').data(data).enter().append('tr');
 
         // create a cell in each row for each column
-        const cells = rows
-            .selectAll('td')
+        rows.selectAll('td')
             .data(function (row) {
                 return columns.map(function (column) {
                     return { column: column, value: row[column] };

js/demos/html-button-example.js

@@ -1,11 +1,11 @@
-const ariaLinkShim = new (function () {
+new (function () {
     this.navigateLink = (e) => {
         // We want to activate on click or by pressing either
         // ENTER or SPACE. Why SPACE? To be extra careful, since the
         // W3C recommends both on buttons):
         //
         // https://www.w3.org/TR/using-aria/#third
-        if (e.type == 'click' || e.key === ' ' || e.key === 'Enter') {
+        if (e.type === 'click' || e.key === ' ' || e.key === 'Enter') {
             const ref = e.target != null ? e.target : e.srcElement;
             if (ref && ref.getAttribute('role') === 'link') {
                 window.location.href = ref.getAttribute('data-href');

js/demos/line-chart copy.js

@@ -1,16 +1,16 @@
-const logExample = new (function () {
+new (function () {
     const sysLogEl = document.getElementById('syslog');
 
     const reportCPUUsage = function () {
-        var result = fetch('services/sysinfo.php');
+        const result = fetch('services/sysinfo.php');
         result
             .then(function (response) {
                 return response.text();
             })
             .then(function (text) {
                 sysLogEl.innerHTML += `<span>${text}</span>`;
             })
-            .catch(function (ex) {
+            .catch(function () {
                 sysLogEl.innerHTML += '<span>Failed to get system info.</span>';
             });
     };

js/demos/line-chart.js

@@ -1,2 +1,4 @@
+// eslint-disable-next-line no-unused-vars
 import showcode from '../enable-libs/showcode.js';
+// eslint-disable-next-line no-unused-vars
 import radiogroup from '../modules/radiogroup.js';

js/demos/link.js

@@ -9,7 +9,6 @@ const dictLookup = new (function () {
         '.wiktionary-lookup__content-container',
     );
 
-    const $sourceURL = document.querySelector('.wiktionary-lookup__source-url');
     const $licenceInfo = document.querySelector(
         '.wiktionary-lookup__license-info',
     );
@@ -18,10 +17,8 @@ const dictLookup = new (function () {
     const $pageAlert = document.querySelector('.wiktionary-lookup__page-alert');
 
     function showPage(page, text) {
-        const sourceurl = baseURL + '/wiki/' + page;
         $pageTitle.innerHTML = page;
         $wikiInfo.innerHTML = text;
-        //$sourceURL.setAttribute("href", sourceurl);
         $licenceInfo.style.display = 'block';
         $pageAlert.innerHTML = `Now displaying information about the word "${page}".`;
 

js/demos/log.js

@@ -15,7 +15,6 @@ import Templify from './modules/templify.js';
 import EnableFlyout from './modules/enable-flyout.js';
 import enableVisibleOnFocus from './modules/enable-visible-on-focus.js';
 import offscreenObserver from './modules/offscreen-observer.js';
-import textZoom from './demos/hero-image-text-resize.js';
 import tableOfContents from './modules/enable-toc.js';
 import {
     focusDeepLink,
@@ -31,7 +30,7 @@ function buildFlyoutMenuHTML() {
     const hamburgerMenuJSON = JSON.parse(hamburgerMenuJSONEl.innerHTML);
 
     // Now, let's use Templify to convert the JSON into HTML.
-    const hamburgerMenu = new Templify(hamburgerMenuEl, hamburgerMenuJSON);
+    new Templify(hamburgerMenuEl, hamburgerMenuJSON);
 
     // Initialize the hamburger menu.
     EnableFlyout.init();
@@ -49,7 +48,7 @@ function initEnable() {
         .getPropertyValue('--enable-flyout__desktop-min');
     Array.prototype.forEach.call(
         document.querySelectorAll('.breakpoint-width'),
-        (el, i) => {
+        (el) => {
             el.innerHTML = breakpointWidth;
         },
     );

js/demos/radiogroup.js

@@ -23,7 +23,7 @@ const Switch = new (function() {
 
     this.onClick = (evt) => {
         let el = evt.target;
-        const id = el.id;
+        const id = el.id.split('-')[0];
         const switchEl = el.closest('[role="switch"]');
         let ariaDescribedBy;
         let isChecked;
@@ -59,4 +59,4 @@ const Switch = new (function() {
             );
         }    
     }
-})
+})