refactor(frontend): no-var

frontend/src/utils/async-table/async-table.js

@@ -374,11 +374,11 @@ export class AsyncTable {
     // create new FormData and format any date values
     const formData = Datepicker.unformatAll(this._pagesizeForm, new FormData(this._pagesizeForm));
 
-    for (var k of url.searchParams.keys()) {
+    for (const k of url.searchParams.keys()) {
       url.searchParams.delete(k);
     }
 
-    for (var kv of formData.entries()) {
+    for (const kv of formData.entries()) {
       url.searchParams.append(kv[0], kv[1]);
     }
 

frontend/src/utils/course-teaser/course-teaser.js

@@ -1,10 +1,10 @@
 import { Utility } from '../../core/utility';
 import './course-teaser.sass';
 
-var COURSE_TEASER_INITIALIZED_CLASS = 'course-teaser--initialized';
+const COURSE_TEASER_INITIALIZED_CLASS = 'course-teaser--initialized';
 
-var COURSE_TEASER_EXPANDED_CLASS = 'course-teaser__expanded';
+const COURSE_TEASER_EXPANDED_CLASS = 'course-teaser__expanded';
-var COURSE_TEASER_CHEVRON_CLASS = 'course-teaser__chevron';
+const COURSE_TEASER_CHEVRON_CLASS = 'course-teaser__chevron';
 
 @Utility({
   selector: '[uw-course-teaser]:not(.course-teaser__not-expandable)',
@@ -25,9 +25,9 @@ export class CourseTeaser {
   }
 
   _onToggleExpand(event) {
-    var isLink = event.target.tagName.toLowerCase() === 'a';
+    const isLink = event.target.tagName.toLowerCase() === 'a';
-    var isChevron = event.target.classList.contains(COURSE_TEASER_CHEVRON_CLASS);
+    const isChevron = event.target.classList.contains(COURSE_TEASER_CHEVRON_CLASS);
-    var isExpanded = this._element.classList.contains(COURSE_TEASER_EXPANDED_CLASS);
+    const isExpanded = this._element.classList.contains(COURSE_TEASER_EXPANDED_CLASS);
 
     if ((!isExpanded && !isLink) || isChevron) {
       this._element.classList.toggle(COURSE_TEASER_EXPANDED_CLASS);

frontend/src/utils/form/datepicker.js

@@ -120,7 +120,7 @@ export class Datepicker {
     // FIXME dirty hack below; fix tail.datetime instead
 
     // get date object from internal format before datetime does nasty things with it
-    var parsedMomentDate = moment(this._element.value, [ FORM_DATE_FORMAT[this.elementType], FORM_DATE_FORMAT_MOMENT[this.elementType] ], true);
+    let parsedMomentDate = moment(this._element.value, [ FORM_DATE_FORMAT[this.elementType], FORM_DATE_FORMAT_MOMENT[this.elementType] ], true);
     if (parsedMomentDate && parsedMomentDate.isValid()) {
       parsedMomentDate = parsedMomentDate.toDate();
     } else {

frontend/src/utils/form/interactive-fieldset.js

@@ -112,7 +112,7 @@ export class InteractiveFieldset {
   }
 
   _matchesConditionalValue() {
-    var matches;
+    let matches;
 
     if (this._isCheckbox()) {
       matches = this.conditionalInput.checked === true;

frontend/src/utils/form/navigate-away-prompt.js

@@ -64,8 +64,8 @@ export class NavigateAwayPrompt {
   _beforeUnloadHandler = (event) => {
     // compare every value of the current FormData with every corresponding value of the initial FormData and set formDataHasChanged to true if there is at least one change
     const currentFormData = new FormData(this._element);
-    var formDataHasChanged = false;
+    let formDataHasChanged = false;
-    for (let key of generatorFromFormDatas(this._initFormData, currentFormData)) {
+    for (const key of generatorFromFormDatas(this._initFormData, currentFormData)) {
       if (currentFormData.get(key) !== this._initFormData.get(key)) {
         formDataHasChanged = true;
         break;

frontend/src/utils/form/reactive-submit-button.js

@@ -1,6 +1,6 @@
 import { Utility } from '../../core/utility';
 
-var REACTIVE_SUBMIT_BUTTON_INITIALIZED_CLASS = 'reactive-submit-button--initialized';
+const REACTIVE_SUBMIT_BUTTON_INITIALIZED_CLASS = 'reactive-submit-button--initialized';
 
 @Utility({
   selector: 'form',
@@ -56,8 +56,8 @@ export class ReactiveSubmitButton {
 
   setupInputs() {
     this._requiredInputs.forEach((el) => {
-      var checkbox = el.getAttribute('type') === 'checkbox';
+      const checkbox = el.getAttribute('type') === 'checkbox';
-      var eventType = checkbox ? 'change' : 'input';
+      const eventType = checkbox ? 'change' : 'input';
       el.addEventListener(eventType, () => {
         this.updateButtonState();
       });
@@ -73,9 +73,9 @@ export class ReactiveSubmitButton {
   }
 
   inputsValid() {
-    var done = true;
+    let done = true;
     this._requiredInputs.forEach((inp) => {
-      var len = inp.value.trim().length;
+      const len = inp.value.trim().length;
       if (done && len === 0) {
         done = false;
       }

frontend/src/utils/hide-columns/hide-columns.js

@@ -142,7 +142,7 @@ export class HideColumns {
     const colspan = Math.max(1, th.colSpan) || 1;
     const columnIndex = this.colIndex(th);
 
-    for (var i = 0; i < Math.max(colspan, originalColspan); i++) {
+    for (let i = 0; i < Math.max(colspan, originalColspan); i++) {
       this.updateColumnDisplay(columnIndex + i, hidden);
     }
     this.updateHider(hider, hidden);
@@ -298,7 +298,7 @@ export class HideColumns {
     if (!rowParent)
       return 0;
 
-    var i = 0;
+    let i = 0;
     for (const sibling of Array.from(rowParent.cells).slice(0, cell.cellIndex)) {
       i += this.colSpan(sibling);
     }
@@ -307,7 +307,7 @@ export class HideColumns {
   }
 
   getCol(row, columnIndex) {
-    var c = 0;
+    let c = 0;
 
     for (const cell of row.cells) {
       c += cell ? this.colSpan(cell) : 1;

frontend/src/utils/inputs/checkbox.js

@@ -1,9 +1,9 @@
 import { Utility } from '../../core/utility';
 import './checkbox.sass';
 
-var CHECKBOX_CLASS = 'checkbox';
+const CHECKBOX_CLASS = 'checkbox';
-var RADIOBOX_CLASS = 'radiobox';
+const RADIOBOX_CLASS = 'radiobox';
-var CHECKBOX_INITIALIZED_CLASS = 'checkbox--initialized';
+const CHECKBOX_INITIALIZED_CLASS = 'checkbox--initialized';
 
 @Utility({
   selector: 'input[type="checkbox"]:not([uw-no-checkbox]), input[type="radio"]:not([uw-no-radiobox])',
@@ -32,13 +32,13 @@ export class Checkbox {
       return false;
     }
 
-    var siblingEl = element.nextSibling;
+    const siblingEl = element.nextSibling;
-    var parentEl = element.parentElement;
+    const parentEl = element.parentElement;
 
-    var wrapperEl = document.createElement('div');
+    const wrapperEl = document.createElement('div');
     wrapperEl.classList.add(box_class);
 
-    var labelEl = document.createElement('label');
+    const labelEl = document.createElement('label');
     labelEl.setAttribute('for', element.id);
 
     wrapperEl.appendChild(element);

frontend/src/utils/inputs/radio.js

@@ -1,8 +1,8 @@
 import { Utility } from '../../core/utility';
 import './radio.sass';
 
-var RADIO_CLASS = 'radiobox';
+const RADIO_CLASS = 'radiobox';
-var RADIO_INITIALIZED_CLASS = 'radio--initialized';
+const RADIO_INITIALIZED_CLASS = 'radio--initialized';
 
 @Utility({
   selector: 'input[type="radio"]:not([uw-no-radio])',
@@ -28,13 +28,13 @@ export class Radio {
       return false;
     }
 
-    var siblingEl = element.nextSibling;
+    const siblingEl = element.nextSibling;
-    var parentEl = element.parentElement;
+    const parentEl = element.parentElement;
 
-    var wrapperEl = document.createElement('div');
+    const wrapperEl = document.createElement('div');
     wrapperEl.classList.add(RADIO_CLASS);
 
-    var labelEl = document.createElement('label');
+    const labelEl = document.createElement('label');
     labelEl.setAttribute('for', element.id);
 
     wrapperEl.appendChild(element);

frontend/src/utils/tabber/tabber.js

@@ -1,92 +0,0 @@
-import './tabber.sass';
-
-(function($) {
-
-  document.addEventListener('DOMContentLoaded', function() {
-    'use strict';
-
-    // define plugin
-    $.fn.tabgroup = function() {
-
-      var $this = $(this);
-      var $openers = $('<div class="tab-group-openers"></div>');
-      $this.prepend($openers);
-
-      var openedByDefault = $this.data('tab-open') || 0;
-      var tabs = [];
-      var currentTab = {};
-
-      $this.find('.tab').each(function(i, t) {
-        var tab = $(t);
-        tab.data('tab-index', i);
-        var tabName = tab.data('tab-name') || 'Tab '+i;
-        var tabFile = tab.data('tab-file') || false;
-        var $opener = makeOpener(tabName, i);
-        $openers.append($opener);
-        if (tab.find('.tab-title')) {
-          tab.find('.tab-title').remove();
-        }
-        tab.hide();
-        var loaded = false;
-        tabs.push({index: i, name: tabName, file: tabFile, dom: tab, opener: $opener, loaded: loaded });
-      });
-
-      $this.on('click', 'a[href^="#"]', function(event) {
-        var $target = $(event.currentTarget);
-        var tab = getTabByName($target.attr('href').replace('#', ''));
-        if ( tab ) {
-          showTab(tab.index);
-        }
-        event.preventDefault();
-      });
-
-      function getTabByName(name) {
-        var it = -1;
-        $.each(tabs, function(i, t) {
-          if ( t.name.toLowerCase() === name.toLowerCase() ) {
-            it = i;
-          }
-        });
-        if ( it >= 0 ) {
-          return tabs[it];
-        } else {
-          return false;
-        }
-      }
-
-      function makeOpener(tabName, i) {
-        return $('<span class="tab-opener">'+tabName+'</span>').
-                on('click', function() {
-                  showTab(i);
-                });
-      }
-
-      function showTab(i) {
-        tabs.forEach(function(t) {
-          t.dom.hide();
-          t.opener.removeClass('tab-visible');
-        });
-        currentTab = tabs[i];
-        if ( !currentTab.loaded && currentTab.file ){
-          $.get(currentTab.file, function(res) {
-            currentTab.dom.html(res);
-            currentTab.loaded = true;
-          });
-        }
-        currentTab.opener.addClass('tab-visible');
-        currentTab.dom.show();
-      }
-
-      showTab(openedByDefault);
-      currentTab = tabs[openedByDefault];
-
-    };
-
-    // apply plugin to all available tab-groups if on wide screen
-    if (window.innerWidth > 768) {
-      $('.tab-group').each(function(i, t) {
-        $(t).tabgroup();
-      });
-    }
-  });
-})($);

frontend/src/utils/tabber/tabber.sass

@@ -1,35 +0,0 @@
-.tab-group
-  border-top: 2px solid #dcdcdc
-  padding-top: 30px
-
-.tab-group-openers
-  display: flex
-  justify-content: stretch
-  line-height: 40px
-  font-size: 14px
-  margin-bottom: 40px
-
-.tab-opener
-  display: inline-block
-  flex: 1
-  text-align: center
-  padding: 0 13px
-  margin: 0 2px
-  background-color: var(--color-dark)
-  color: white
-  font-size: 16px
-  text-transform: uppercase
-  font-weight: 600
-  transition: all .1s ease
-  border-bottom: 5px solid rgba(100, 100, 100, 0.2)
-
-.tab-opener:not(.tab-visible):hover
-  cursor: pointer
-  background-color: transparent
-  color: rgb(52, 48, 58)
-  border-bottom-color: grey
-
-.tab-opener.tab-visible
-  background-color: transparent
-  color: rgb(52, 48, 58)
-  border-bottom-color: var(--color-primary)

frontend/src/utils/tooltips/tooltips.js

@@ -2,11 +2,11 @@ import { Utility } from '../../core/utility';
 import './tooltips.sass';
 import { MovementObserver } from '../../lib/movement-observer/movement-observer';
 
-var TOOLTIP_CLASS = 'tooltip';
+const TOOLTIP_CLASS = 'tooltip';
-var TOOLTIP_INITIALIZED_CLASS = 'tooltip--initialized';
+const TOOLTIP_INITIALIZED_CLASS = 'tooltip--initialized';
-var TOOLTIP_OPEN_CLASS = 'tooltip--active';
+const TOOLTIP_OPEN_CLASS = 'tooltip--active';
-var TOOLTIP_ORIENTATION_MARGIN = 10;
+const TOOLTIP_ORIENTATION_MARGIN = 10;
-var TOOLTIP_CENTER_THRESHOLD = 20;
+const TOOLTIP_CENTER_THRESHOLD = 20;
 
 @Utility({
   selector: `.${TOOLTIP_CLASS}`,