From 89b651bb89bd9978e642fb73ab21b45f72070393 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Tron=C3=AD=C4=8Dek?= Date: Wed, 20 Jan 2021 17:42:42 +0100 Subject: [PATCH 1/8] Simple code changes in animations.js - delete double semicolons - Convert anonymous functions to arrow functions where possible --- animations.js | 60 +++++++++++++++++++++++++-------------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/animations.js b/animations.js index d97fab2..11f8cd5 100644 --- a/animations.js +++ b/animations.js @@ -4,7 +4,7 @@ $(".column").on('click', function() { return; } var bounding_box = $(this).get(0).getBoundingClientRect(); - $(this).css({ top: bounding_box.top + 'px', left: bounding_box.left -20+ 'px' }); + $(this).css({ top: `${bounding_box.top}px`, left: `${bounding_box.left - 20}px` }); $(this).addClass('in-animation').removeClass('pointer'); $("#empty-container").remove(); $('
').insertAfter(this); @@ -58,27 +58,27 @@ $(".column").on('animationend', function(e){ }); -$('#audioSource').on('mousedown touchend focusin focusout', function(e) { - var state = $('#multiselect-trigger').data('state') || 0; - if( state == 0 ) { - $('#multiselect-trigger').data('state', '1').addClass('open').removeClass('closed'); - $('#multiselect-trigger').find('.chevron').removeClass('bottom'); - $('#multiselect-trigger').parent().find('.multiselect-contents').show(); - $('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();; - $('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').show();; - } -}); +$('#audioSource').on('mousedown touchend focusin focusout', (e) => { + var state = $('#multiselect-trigger').data('state') || 0; + if (state == 0) { + $('#multiselect-trigger').data('state', '1').addClass('open').removeClass('closed'); + $('#multiselect-trigger').find('.chevron').removeClass('bottom'); + $('#multiselect-trigger').parent().find('.multiselect-contents').show(); + $('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show(); + $('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').show(); + } + }); -$('#audioSource3').on('mousedown touchend focusin focusout', function(e) { - var state = $('#multiselect-trigger3').attr('data-state') || 0; - if( state == 0 ) { - $('#multiselect-trigger3').attr('data-state', '1').addClass('open').removeClass('closed'); - $('#multiselect-trigger3').find('.chevron').removeClass('bottom'); - $('#multiselect-trigger3').parent().find('.multiselect-contents').show(); - $('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();; - $('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').show();; - } -}); +$('#audioSource3').on('mousedown touchend focusin focusout', (e) => { + var state = $('#multiselect-trigger3').attr('data-state') || 0; + if (state == 0) { + $('#multiselect-trigger3').attr('data-state', '1').addClass('open').removeClass('closed'); + $('#multiselect-trigger3').find('.chevron').removeClass('bottom'); + $('#multiselect-trigger3').parent().find('.multiselect-contents').show(); + $('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show(); + $('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').show(); + } + }); $('#multiselect-trigger').on('mousedown touchend focusin focusout', function(e) { var state = $(this).data('state') || 0; @@ -87,14 +87,14 @@ $('#multiselect-trigger').on('mousedown touchend focusin focusout', function(e) $(this).data('state', '1').addClass('open').removeClass('closed'); $(this).find('.chevron').removeClass('bottom'); $(this).parent().find('.multiselect-contents').show(); - $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();; - $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').show();; + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show(); + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').show(); } else { // close the dropdown $(this).data('state', '0').addClass('closed').removeClass('open'); $(this).find('.chevron').addClass('bottom'); - $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide();; - $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide();; + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide(); + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide(); } e.preventDefault(); }); @@ -104,18 +104,18 @@ $('#multiselect-trigger3').on('mousedown touchend focusin focusout', function(e) if( state == 0 ) { // open the dropdown - errorlog("STATE: "+state); + errorlog(`STATE: ${state}`); $(this).attr('data-state', '1').addClass('open').removeClass('closed'); $(this).find('.chevron').removeClass('bottom'); $(this).parent().find('.multiselect-contents').show(); - $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();; - $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').show();; + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show(); + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').show(); } else { // close the dropdown $(this).attr('data-state', '0').addClass('closed').removeClass('open'); $(this).find('.chevron').addClass('bottom'); - $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide();; - $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide();; + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide(); + $(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide(); } e.preventDefault(); }); From 547a914a59f84a4215710c997a76cec929970430 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Tron=C3=AD=C4=8Dek?= Date: Wed, 20 Jan 2021 17:44:55 +0100 Subject: [PATCH 2/8] Template strings and const --- animations.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/animations.js b/animations.js index 11f8cd5..f22b11a 100644 --- a/animations.js +++ b/animations.js @@ -1,15 +1,16 @@ $("body").append(''); $(".column").on('click', function() { - if ( $(this).hasClass( "skip-animation" )){ + if ($(this).hasClass( "skip-animation" )){ return; } - var bounding_box = $(this).get(0).getBoundingClientRect(); + + const bounding_box = $(this).get(0).getBoundingClientRect(); $(this).css({ top: `${bounding_box.top}px`, left: `${bounding_box.left - 20}px` }); $(this).addClass('in-animation').removeClass('pointer'); $("#empty-container").remove(); $('
').insertAfter(this); - var styles = ''; + let styles = ''; styles = '@keyframes outlightbox {'; styles += '0% {'; styles += 'height: 100%;'; @@ -38,8 +39,9 @@ $(".close").on('click', function(e) { $(this).hide(); $(".container-inner").hide(); $("body").css('overflow', 'auto'); - var bounding_box = $(this).parent().get(0).getBoundingClientRect(); - $(this).parent().css({ top: bounding_box.top + 'px', left: bounding_box.left + 'px' }); + + const bounding_box = $(this).parent().get(0).getBoundingClientRect(); + $(this).parent().css({ top: `${bounding_box.top}px`, left: `${bounding_box.left}px` }); $(this).parent().addClass('out-animation'); cleanupMediaTracks(); e.stopPropagation(); From e412f486bd92dbde0323ce60a34220a096345745 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Tron=C3=AD=C4=8Dek?= Date: Wed, 20 Jan 2021 17:46:11 +0100 Subject: [PATCH 3/8] var =>const --- animations.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/animations.js b/animations.js index f22b11a..208954d 100644 --- a/animations.js +++ b/animations.js @@ -61,7 +61,7 @@ $(".column").on('animationend', function(e){ $('#audioSource').on('mousedown touchend focusin focusout', (e) => { - var state = $('#multiselect-trigger').data('state') || 0; + const state = $('#multiselect-trigger').data('state') || 0; if (state == 0) { $('#multiselect-trigger').data('state', '1').addClass('open').removeClass('closed'); $('#multiselect-trigger').find('.chevron').removeClass('bottom'); @@ -69,10 +69,10 @@ $('#audioSource').on('mousedown touchend focusin focusout', (e) => { $('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show(); $('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').show(); } - }); +}); $('#audioSource3').on('mousedown touchend focusin focusout', (e) => { - var state = $('#multiselect-trigger3').attr('data-state') || 0; + const state = $('#multiselect-trigger3').attr('data-state') || 0; if (state == 0) { $('#multiselect-trigger3').attr('data-state', '1').addClass('open').removeClass('closed'); $('#multiselect-trigger3').find('.chevron').removeClass('bottom'); @@ -80,10 +80,10 @@ $('#audioSource3').on('mousedown touchend focusin focusout', (e) => { $('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show(); $('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').show(); } - }); +}); $('#multiselect-trigger').on('mousedown touchend focusin focusout', function(e) { - var state = $(this).data('state') || 0; + const state = $(this).data('state') || 0; if( state == 0 ) { // open the dropdown $(this).data('state', '1').addClass('open').removeClass('closed'); @@ -102,7 +102,7 @@ $('#multiselect-trigger').on('mousedown touchend focusin focusout', function(e) }); // multiselect dropdowns $('#multiselect-trigger3').on('mousedown touchend focusin focusout', function(e) { - var state = $(this).attr('data-state') || 0; + const state = $(this).attr('data-state') || 0; if( state == 0 ) { // open the dropdown From a26cd7a1c99438f018bec71fb01e19958789ac99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Tron=C3=AD=C4=8Dek?= Date: Wed, 20 Jan 2021 17:46:33 +0100 Subject: [PATCH 4/8] Unused events as _e --- animations.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/animations.js b/animations.js index 208954d..85549b0 100644 --- a/animations.js +++ b/animations.js @@ -60,7 +60,7 @@ $(".column").on('animationend', function(e){ }); -$('#audioSource').on('mousedown touchend focusin focusout', (e) => { +$('#audioSource').on('mousedown touchend focusin focusout', (_e) => { const state = $('#multiselect-trigger').data('state') || 0; if (state == 0) { $('#multiselect-trigger').data('state', '1').addClass('open').removeClass('closed'); @@ -71,7 +71,7 @@ $('#audioSource').on('mousedown touchend focusin focusout', (e) => { } }); -$('#audioSource3').on('mousedown touchend focusin focusout', (e) => { +$('#audioSource3').on('mousedown touchend focusin focusout', (_e) => { const state = $('#multiselect-trigger3').attr('data-state') || 0; if (state == 0) { $('#multiselect-trigger3').attr('data-state', '1').addClass('open').removeClass('closed'); From e31571e5080bdf842bff92c040d19a3ca7797605 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Tron=C3=AD=C4=8Dek?= Date: Wed, 20 Jan 2021 17:50:43 +0100 Subject: [PATCH 5/8] Rewrite style injection as a template string --- animations.js | 41 ++++++++++++++++++++++------------------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/animations.js b/animations.js index 85549b0..482a1f9 100644 --- a/animations.js +++ b/animations.js @@ -10,25 +10,28 @@ $(".column").on('click', function() { $("#empty-container").remove(); $('
').insertAfter(this); - let styles = ''; - styles = '@keyframes outlightbox {'; - styles += '0% {'; - styles += 'height: 100%;'; - styles += 'width: 100%;'; - styles += 'top: 0px;'; - styles += 'left: 0px;'; - styles += '}'; - styles += '50% {'; - styles += 'height: 220px;'; - styles += 'top: ' + bounding_box.y + 'px;'; - styles += '}'; - styles += '100% {'; - styles += 'height: 220px;'; - styles += 'width: '+bounding_box.width+'px;'; - styles += 'top: ' + bounding_box.y + 'px;'; - styles += 'left: ' + bounding_box.x + 'px;'; - styles += '}'; - styles += '}'; + const styles = ` + @keyframes outlightbox { + 0% { + height: 100%; + width: 100%; + top: 0px; + left: 0px; + } + + 50% { + height: 220px; + top: ${bounding_box.y}px; + } + + 100% { + height: 220px; + width: ${bounding_box.width}px; + top: ${bounding_box.y}px; + left: ${bounding_box.x}px; + } + } + `; $("#lightbox-animations").empty(); $("#lightbox-animations").get(0).sheet.insertRule(styles, 0); From 0913cc204d49906585caef892ff392bfffc7736f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Tron=C3=AD=C4=8Dek?= Date: Wed, 20 Jan 2021 17:51:28 +0100 Subject: [PATCH 6/8] Unnecesary spaces --- animations.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/animations.js b/animations.js index 482a1f9..076ff51 100644 --- a/animations.js +++ b/animations.js @@ -1,6 +1,6 @@ $("body").append(''); $(".column").on('click', function() { - if ($(this).hasClass( "skip-animation" )){ + if ($(this).hasClass("skip-animation")){ return; } @@ -107,7 +107,7 @@ $('#multiselect-trigger').on('mousedown touchend focusin focusout', function(e) $('#multiselect-trigger3').on('mousedown touchend focusin focusout', function(e) { const state = $(this).attr('data-state') || 0; - if( state == 0 ) { + if(state == 0) { // open the dropdown errorlog(`STATE: ${state}`); $(this).attr('data-state', '1').addClass('open').removeClass('closed'); From 8819b2fe9510cb03525b503cfa38e6850c5eaa61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Tron=C3=AD=C4=8Dek?= Date: Wed, 20 Jan 2021 17:52:36 +0100 Subject: [PATCH 7/8] Eqeqeq https://eslint.org/docs/rules/eqeqeq --- animations.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/animations.js b/animations.js index 076ff51..8a7c2d1 100644 --- a/animations.js +++ b/animations.js @@ -51,11 +51,11 @@ $(".close").on('click', function(e) { }); $(".column").on('animationend', function(e){ - if (e.originalEvent.animationName == 'inlightbox') { + if (e.originalEvent.animationName === 'inlightbox') { $(this).children(".close").show(); $(this).children(".container-inner").show(); } - else if (e.originalEvent.animationName == 'outlightbox') { + else if (e.originalEvent.animationName === 'outlightbox') { $(this).removeClass('in-animation').removeClass('out-animation').removeClass('columnfade').addClass('pointer'); $("#empty-container").remove(); $("#lightbox-animations").get(0).sheet.deleteRule(0); @@ -65,7 +65,7 @@ $(".column").on('animationend', function(e){ $('#audioSource').on('mousedown touchend focusin focusout', (_e) => { const state = $('#multiselect-trigger').data('state') || 0; - if (state == 0) { + if (state === 0) { $('#multiselect-trigger').data('state', '1').addClass('open').removeClass('closed'); $('#multiselect-trigger').find('.chevron').removeClass('bottom'); $('#multiselect-trigger').parent().find('.multiselect-contents').show(); @@ -76,7 +76,7 @@ $('#audioSource').on('mousedown touchend focusin focusout', (_e) => { $('#audioSource3').on('mousedown touchend focusin focusout', (_e) => { const state = $('#multiselect-trigger3').attr('data-state') || 0; - if (state == 0) { + if (state === 0) { $('#multiselect-trigger3').attr('data-state', '1').addClass('open').removeClass('closed'); $('#multiselect-trigger3').find('.chevron').removeClass('bottom'); $('#multiselect-trigger3').parent().find('.multiselect-contents').show(); @@ -87,7 +87,7 @@ $('#audioSource3').on('mousedown touchend focusin focusout', (_e) => { $('#multiselect-trigger').on('mousedown touchend focusin focusout', function(e) { const state = $(this).data('state') || 0; - if( state == 0 ) { + if( state === 0 ) { // open the dropdown $(this).data('state', '1').addClass('open').removeClass('closed'); $(this).find('.chevron').removeClass('bottom'); @@ -107,7 +107,7 @@ $('#multiselect-trigger').on('mousedown touchend focusin focusout', function(e) $('#multiselect-trigger3').on('mousedown touchend focusin focusout', function(e) { const state = $(this).attr('data-state') || 0; - if(state == 0) { + if(state === 0) { // open the dropdown errorlog(`STATE: ${state}`); $(this).attr('data-state', '1').addClass('open').removeClass('closed'); From 0af23bf6dee6e0ef26c8daee7e247bbb4f40488a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Tron=C3=AD=C4=8Dek?= Date: Wed, 20 Jan 2021 17:54:16 +0100 Subject: [PATCH 8/8] Break --- animations.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/animations.js b/animations.js index 8a7c2d1..43ef92c 100644 --- a/animations.js +++ b/animations.js @@ -9,7 +9,7 @@ $(".column").on('click', function() { $(this).addClass('in-animation').removeClass('pointer'); $("#empty-container").remove(); $('
').insertAfter(this); - + const styles = ` @keyframes outlightbox { 0% {