From d3c727bab6b18c38b9f2d771f00c29a13e5a83e0 Mon Sep 17 00:00:00 2001 From: Gregor Kleen Date: Tue, 12 May 2020 20:40:46 +0200 Subject: [PATCH] refactor(frontend): no-var --- frontend/src/utils/async-table/async-table.js | 4 +- .../src/utils/course-teaser/course-teaser.js | 12 +-- frontend/src/utils/form/datepicker.js | 2 +- .../src/utils/form/interactive-fieldset.js | 2 +- .../src/utils/form/navigate-away-prompt.js | 4 +- .../src/utils/form/reactive-submit-button.js | 10 +- .../src/utils/hide-columns/hide-columns.js | 6 +- frontend/src/utils/inputs/checkbox.js | 14 +-- frontend/src/utils/inputs/radio.js | 12 +-- frontend/src/utils/tabber/tabber.js | 92 ------------------- frontend/src/utils/tabber/tabber.sass | 35 ------- frontend/src/utils/tooltips/tooltips.js | 10 +- 12 files changed, 38 insertions(+), 165 deletions(-) delete mode 100644 frontend/src/utils/tabber/tabber.js delete mode 100644 frontend/src/utils/tabber/tabber.sass diff --git a/frontend/src/utils/async-table/async-table.js b/frontend/src/utils/async-table/async-table.js index 1503c6691..52ee85e02 100644 --- a/frontend/src/utils/async-table/async-table.js +++ b/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]); } diff --git a/frontend/src/utils/course-teaser/course-teaser.js b/frontend/src/utils/course-teaser/course-teaser.js index 889e7937a..0419dcbda 100644 --- a/frontend/src/utils/course-teaser/course-teaser.js +++ b/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'; -var COURSE_TEASER_CHEVRON_CLASS = 'course-teaser__chevron'; +const COURSE_TEASER_EXPANDED_CLASS = 'course-teaser__expanded'; +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'; - var isChevron = event.target.classList.contains(COURSE_TEASER_CHEVRON_CLASS); - var isExpanded = this._element.classList.contains(COURSE_TEASER_EXPANDED_CLASS); + const isLink = event.target.tagName.toLowerCase() === 'a'; + const isChevron = event.target.classList.contains(COURSE_TEASER_CHEVRON_CLASS); + const isExpanded = this._element.classList.contains(COURSE_TEASER_EXPANDED_CLASS); if ((!isExpanded && !isLink) || isChevron) { this._element.classList.toggle(COURSE_TEASER_EXPANDED_CLASS); diff --git a/frontend/src/utils/form/datepicker.js b/frontend/src/utils/form/datepicker.js index 1f2603cca..655ffd1c8 100644 --- a/frontend/src/utils/form/datepicker.js +++ b/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 { diff --git a/frontend/src/utils/form/interactive-fieldset.js b/frontend/src/utils/form/interactive-fieldset.js index 438e41012..7e912ab90 100644 --- a/frontend/src/utils/form/interactive-fieldset.js +++ b/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; diff --git a/frontend/src/utils/form/navigate-away-prompt.js b/frontend/src/utils/form/navigate-away-prompt.js index b0542ef9f..f55eaba78 100644 --- a/frontend/src/utils/form/navigate-away-prompt.js +++ b/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; - for (let key of generatorFromFormDatas(this._initFormData, currentFormData)) { + let formDataHasChanged = false; + for (const key of generatorFromFormDatas(this._initFormData, currentFormData)) { if (currentFormData.get(key) !== this._initFormData.get(key)) { formDataHasChanged = true; break; diff --git a/frontend/src/utils/form/reactive-submit-button.js b/frontend/src/utils/form/reactive-submit-button.js index a53b91001..e46eed77e 100644 --- a/frontend/src/utils/form/reactive-submit-button.js +++ b/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'; - var eventType = checkbox ? 'change' : 'input'; + const checkbox = el.getAttribute('type') === 'checkbox'; + 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; } diff --git a/frontend/src/utils/hide-columns/hide-columns.js b/frontend/src/utils/hide-columns/hide-columns.js index 312bb1024..c9b2dc94b 100644 --- a/frontend/src/utils/hide-columns/hide-columns.js +++ b/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; diff --git a/frontend/src/utils/inputs/checkbox.js b/frontend/src/utils/inputs/checkbox.js index 54611dd9e..9b1b541ff 100644 --- a/frontend/src/utils/inputs/checkbox.js +++ b/frontend/src/utils/inputs/checkbox.js @@ -1,9 +1,9 @@ import { Utility } from '../../core/utility'; import './checkbox.sass'; -var CHECKBOX_CLASS = 'checkbox'; -var RADIOBOX_CLASS = 'radiobox'; -var CHECKBOX_INITIALIZED_CLASS = 'checkbox--initialized'; +const CHECKBOX_CLASS = 'checkbox'; +const RADIOBOX_CLASS = 'radiobox'; +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; - var parentEl = element.parentElement; + const siblingEl = element.nextSibling; + 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); diff --git a/frontend/src/utils/inputs/radio.js b/frontend/src/utils/inputs/radio.js index 3778fda84..38a3f0f2f 100644 --- a/frontend/src/utils/inputs/radio.js +++ b/frontend/src/utils/inputs/radio.js @@ -1,8 +1,8 @@ import { Utility } from '../../core/utility'; import './radio.sass'; -var RADIO_CLASS = 'radiobox'; -var RADIO_INITIALIZED_CLASS = 'radio--initialized'; +const RADIO_CLASS = 'radiobox'; +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; - var parentEl = element.parentElement; + const siblingEl = element.nextSibling; + 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); diff --git a/frontend/src/utils/tabber/tabber.js b/frontend/src/utils/tabber/tabber.js deleted file mode 100644 index 39ed37576..000000000 --- a/frontend/src/utils/tabber/tabber.js +++ /dev/null @@ -1,92 +0,0 @@ -import './tabber.sass'; - -(function($) { - - document.addEventListener('DOMContentLoaded', function() { - 'use strict'; - - // define plugin - $.fn.tabgroup = function() { - - var $this = $(this); - var $openers = $('
'); - $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 $(''+tabName+''). - 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(); - }); - } - }); -})($); diff --git a/frontend/src/utils/tabber/tabber.sass b/frontend/src/utils/tabber/tabber.sass deleted file mode 100644 index eea4355fd..000000000 --- a/frontend/src/utils/tabber/tabber.sass +++ /dev/null @@ -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) diff --git a/frontend/src/utils/tooltips/tooltips.js b/frontend/src/utils/tooltips/tooltips.js index 846ae288f..12d628f35 100644 --- a/frontend/src/utils/tooltips/tooltips.js +++ b/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'; -var TOOLTIP_INITIALIZED_CLASS = 'tooltip--initialized'; -var TOOLTIP_OPEN_CLASS = 'tooltip--active'; -var TOOLTIP_ORIENTATION_MARGIN = 10; -var TOOLTIP_CENTER_THRESHOLD = 20; +const TOOLTIP_CLASS = 'tooltip'; +const TOOLTIP_INITIALIZED_CLASS = 'tooltip--initialized'; +const TOOLTIP_OPEN_CLASS = 'tooltip--active'; +const TOOLTIP_ORIENTATION_MARGIN = 10; +const TOOLTIP_CENTER_THRESHOLD = 20; @Utility({ selector: `.${TOOLTIP_CLASS}`,