From 5bcd6f44a5a8d2aca76fbb863ce0c165f0990f16 Mon Sep 17 00:00:00 2001
From: John McLear <john@mclear.co.uk>
Date: Sat, 30 Jan 2021 07:32:12 +0000
Subject: [PATCH] lint: skin-variants (#4603)

* lint: skin-variants

* for squash: Fix attachment of event listener

Before this PR the statement was outside the function. I'm assuming
the move into the function body was accidental, so move it back out.

* for squash: Preserve order of function calls

Co-authored-by: Richard Hansen <rhansen@rhansen.org>
---
 src/static/js/skin_variants.js | 42 +++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/static/js/skin_variants.js b/src/static/js/skin_variants.js
index d5d663c08..a7902545e 100644
--- a/src/static/js/skin_variants.js
+++ b/src/static/js/skin_variants.js
@@ -1,19 +1,14 @@
-// Specific hash to display the skin variants builder popup
-if (window.location.hash.toLowerCase() == '#skinvariantsbuilder') {
-  $('#skin-variants').addClass('popup-show');
+'use strict';
 
-  $('.skin-variant').change(() => {
-    updateSkinVariantsClasses();
-  });
+// Specific hash to display the skin variants builder popup
+if (window.location.hash.toLowerCase() === '#skinvariantsbuilder') {
+  $('#skin-variants').addClass('popup-show');
 
   const containers = ['editor', 'background', 'toolbar'];
   const colors = ['super-light', 'light', 'dark', 'super-dark'];
 
-  updateCheckboxFromSkinClasses();
-  updateSkinVariantsClasses();
-
   // add corresponding classes when config change
-  function updateSkinVariantsClasses() {
+  const updateSkinVariantsClasses = () => {
     const domsToUpdate = [
       $('html'),
       $('iframe[name=ace_outer]').contents().find('html'),
@@ -27,23 +22,21 @@ if (window.location.hash.toLowerCase() == '#skinvariantsbuilder') {
 
     domsToUpdate.forEach((el) => { el.removeClass('full-width-editor'); });
 
-    const new_classes = [];
+    const newClasses = [];
     $('select.skin-variant-color').each(function () {
-      new_classes.push(`${$(this).val()}-${$(this).data('container')}`);
+      newClasses.push(`${$(this).val()}-${$(this).data('container')}`);
     });
-    if ($('#skin-variant-full-width').is(':checked')) new_classes.push('full-width-editor');
+    if ($('#skin-variant-full-width').is(':checked')) newClasses.push('full-width-editor');
 
-    domsToUpdate.forEach((el) => { el.addClass(new_classes.join(' ')); });
+    domsToUpdate.forEach((el) => { el.addClass(newClasses.join(' ')); });
 
-    $('#skin-variants-result').val(`"skinVariants": "${new_classes.join(' ')}",`);
-  }
+    $('#skin-variants-result').val(`"skinVariants": "${newClasses.join(' ')}",`);
+  };
 
   // run on init
-  function updateCheckboxFromSkinClasses() {
+  const updateCheckboxFromSkinClasses = () => {
     $('html').attr('class').split(' ').forEach((classItem) => {
-      var container = classItem.split('-').slice(-1);
-
-      var container = classItem.substring(classItem.lastIndexOf('-') + 1, classItem.length);
+      const container = classItem.substring(classItem.lastIndexOf('-') + 1, classItem.length);
       if (containers.indexOf(container) > -1) {
         const color = classItem.substring(0, classItem.lastIndexOf('-'));
         $(`.skin-variant-color[data-container="${container}"`).val(color);
@@ -51,5 +44,12 @@ if (window.location.hash.toLowerCase() == '#skinvariantsbuilder') {
     });
 
     $('#skin-variant-full-width').prop('checked', $('html').hasClass('full-width-editor'));
-  }
+  };
+
+  $('.skin-variant').change(() => {
+    updateSkinVariantsClasses();
+  });
+
+  updateCheckboxFromSkinClasses();
+  updateSkinVariantsClasses();
 }