From 472e089acf1fcc4285c55c9a8e06b90035f56627 Mon Sep 17 00:00:00 2001
From: Jason Frey <fryguy9@gmail.com>
Date: Fri, 13 Dec 2024 13:23:20 -0500
Subject: [PATCH] Drop coffeescript

---
 Gemfile                          |  1 -
 site/_config.yml                 |  1 -
 site/assets/js/_banner.coffee    |  8 ---
 site/assets/js/_doc_menu.coffee  | 14 ------
 site/assets/js/_doc_menu.js      | 15 ++++++
 site/assets/js/_header.coffee    | 73 ---------------------------
 site/assets/js/_header.js        | 84 ++++++++++++++++++++++++++++++++
 site/assets/js/_lightbox.coffee  | 60 -----------------------
 site/assets/js/_lightbox.js      | 74 ++++++++++++++++++++++++++++
 site/assets/js/_site_menu.coffee |  3 --
 site/assets/js/_site_menu.js     |  1 +
 site/assets/js/_theme.coffee     | 34 -------------
 site/assets/js/_theme.js         | 40 +++++++++++++++
 site/assets/js/main.coffee       | 18 -------
 site/assets/js/main.js           | 22 +++++++++
 15 files changed, 236 insertions(+), 212 deletions(-)
 delete mode 100644 site/assets/js/_banner.coffee
 delete mode 100644 site/assets/js/_doc_menu.coffee
 create mode 100644 site/assets/js/_doc_menu.js
 delete mode 100644 site/assets/js/_header.coffee
 create mode 100644 site/assets/js/_header.js
 delete mode 100644 site/assets/js/_lightbox.coffee
 create mode 100644 site/assets/js/_lightbox.js
 delete mode 100644 site/assets/js/_site_menu.coffee
 create mode 100644 site/assets/js/_site_menu.js
 delete mode 100644 site/assets/js/_theme.coffee
 create mode 100644 site/assets/js/_theme.js
 delete mode 100644 site/assets/js/main.coffee
 create mode 100644 site/assets/js/main.js

diff --git a/Gemfile b/Gemfile
index 2bd42a8a6..fd5413caf 100644
--- a/Gemfile
+++ b/Gemfile
@@ -6,7 +6,6 @@ gem "activesupport", ">= 5.2.7", :require => false
 gem "bootstrap-sass", "~> 3.x"
 gem "font-awesome-sass", "~> 4.x"
 gem "jekyll", "~> 4.3"
-gem "jekyll-coffeescript"
 gem "jekyll-paginate"
 gem "jekyll-sass-converter"
 gem "jekyll-sitemap"
diff --git a/site/_config.yml b/site/_config.yml
index e92c0e5a6..350d8cc83 100644
--- a/site/_config.yml
+++ b/site/_config.yml
@@ -6,7 +6,6 @@
 # 'jekyll serve'. If you change this file, please restart the server process.
 
 plugins:
-  - jekyll-coffeescript
   - jekyll-paginate
   - jekyll-sass-converter
   - jekyll-sitemap
diff --git a/site/assets/js/_banner.coffee b/site/assets/js/_banner.coffee
deleted file mode 100644
index c196dddce..000000000
--- a/site/assets/js/_banner.coffee
+++ /dev/null
@@ -1,8 +0,0 @@
-# Banner animation
-
-# adjust translateY of .banner-logo
-
-# $(document).ready ->
-#   if $(".triad").length > 0
-#     miq.setup_banner_ani()
-    # window.addEventListener "scroll", miq.on_scroll
diff --git a/site/assets/js/_doc_menu.coffee b/site/assets/js/_doc_menu.coffee
deleted file mode 100644
index f94a1f7fc..000000000
--- a/site/assets/js/_doc_menu.coffee
+++ /dev/null
@@ -1,14 +0,0 @@
-# Menu
-
-# Open all down to active link
-miq.open_active = ->
-  $("li.active").parents("li").each (i, elem) ->
-    $(elem).addClass("menu-open")
-
-$(document).ready ->
-  if $(".menu-parent").length > 0
-    miq.open_active()
-
-    $(document).on "click", ".menu-parent > a", (e) ->
-      $(@).parent("li.menu-parent").toggleClass("menu-open")
-      e.preventDefault()
diff --git a/site/assets/js/_doc_menu.js b/site/assets/js/_doc_menu.js
new file mode 100644
index 000000000..c3852eb03
--- /dev/null
+++ b/site/assets/js/_doc_menu.js
@@ -0,0 +1,15 @@
+// Menu
+
+// Open all down to active link
+miq.open_active = () => $("li.active").parents("li").each((i, elem) => $(elem).addClass("menu-open"));
+
+$(document).ready(function() {
+  if ($(".menu-parent").length > 0) {
+    miq.open_active();
+
+    $(document).on("click", ".menu-parent > a", function(e) {
+      $(this).parent("li.menu-parent").toggleClass("menu-open");
+      e.preventDefault();
+    });
+  }
+});
diff --git a/site/assets/js/_header.coffee b/site/assets/js/_header.coffee
deleted file mode 100644
index e23976c48..000000000
--- a/site/assets/js/_header.coffee
+++ /dev/null
@@ -1,73 +0,0 @@
-# Header animation
-
-miq.setup_header_ani = ->
-  miq.header = miq.select(".site-header")
-  miq.triad  = miq.select(".triad")
-  miq.title  = miq.select(".banner h1")
-
-  miq.fade_offset = miq.header.offsetHeight
-  miq.fade_start  = miq.fade_offset / 2 # Start fading a little lower than top
-  miq.fade_stop   = (miq.triad.offsetTop + miq.triad.offsetHeight)
-  miq.fade_diff   = (miq.fade_stop - miq.fade_start) / 1.8
-
-  miq.header_pad  = parseInt($(miq.header).css('padding-top'))
-  miq.scale_start = miq.header.offsetHeight
-  miq.scale_stop  = miq.fade_stop
-  miq.scale_diff  = (miq.scale_stop - miq.fade_start) * 1.1
-
-  miq.last_scroll_y = -1
-
-miq.fade_header = ->
-  if miq.last_scroll_y > miq.fade_start && miq.last_scroll_y < miq.fade_stop
-    opac = miq.last_scroll_y / miq.fade_diff
-  else if miq.last_scroll_y < miq.fade_start
-    opac = 0
-  else if miq.last_scroll_y > miq.fade_stop
-    opac = 1
-
-  start_values = [6, 52, 81, opac]
-  end_values   = [12, 105, 165, opac]
-
-  start_color = "rgba(#{start_values.join()})"
-  end_color   = "rgba(#{end_values.join()})"
-
-  miq.header.style.backgroundImage = "linear-gradient(to right, #{start_color} 0, #{end_color} 100%)"
-
-miq.scale_header = ->
-  # shrink padding by half
-
-  if miq.last_scroll_y > miq.scale_start && miq.last_scroll_y < miq.scale_stop
-    divider = 1 + (miq.last_scroll_y / miq.scale_diff)
-  else if miq.last_scroll_y < miq.scale_start
-    divider = 1
-  else if miq.last_scroll_y > miq.scale_stop
-    divider = 2
-
-  pad = miq.header_pad / divider
-
-  miq.header.style.paddingTop = "#{pad}px"
-  miq.header.style.paddingBottom = "#{pad}px"
-
-miq.on_scroll = ->
-  miq.update_background()
-
-miq.update_background = ->
-  if miq.last_scroll_y == window.scrollY
-    requestAnimationFrame(miq.update_background)
-    return false
-  else
-    miq.last_scroll_y = window.scrollY
-
-  miq.animate_header()
-  requestAnimationFrame(miq.update_background)
-
-miq.animate_header = ->
-  miq.fade_header()
-  miq.scale_header()
-
-
-$(document).ready ->
-  if $(".triad").length > 0
-    miq.setup_header_ani()
-    miq.scale_header()
-    window.addEventListener "scroll", miq.on_scroll
diff --git a/site/assets/js/_header.js b/site/assets/js/_header.js
new file mode 100644
index 000000000..2c369e801
--- /dev/null
+++ b/site/assets/js/_header.js
@@ -0,0 +1,84 @@
+// Header animation
+
+miq.setup_header_ani = function() {
+  miq.header = miq.select(".site-header");
+  miq.triad  = miq.select(".triad");
+  miq.title  = miq.select(".banner h1");
+
+  miq.fade_offset = miq.header.offsetHeight;
+  miq.fade_start  = miq.fade_offset / 2; // Start fading a little lower than top
+  miq.fade_stop   = (miq.triad.offsetTop + miq.triad.offsetHeight);
+  miq.fade_diff   = (miq.fade_stop - miq.fade_start) / 1.8;
+
+  miq.header_pad  = parseInt($(miq.header).css('padding-top'));
+  miq.scale_start = miq.header.offsetHeight;
+  miq.scale_stop  = miq.fade_stop;
+  miq.scale_diff  = (miq.scale_stop - miq.fade_start) * 1.1;
+
+  miq.last_scroll_y = -1;
+};
+
+miq.fade_header = function() {
+  let opac;
+  if ((miq.last_scroll_y > miq.fade_start) && (miq.last_scroll_y < miq.fade_stop)) {
+    opac = miq.last_scroll_y / miq.fade_diff;
+  } else if (miq.last_scroll_y < miq.fade_start) {
+    opac = 0;
+  } else if (miq.last_scroll_y > miq.fade_stop) {
+    opac = 1;
+  }
+
+  const start_values = [6, 52, 81, opac];
+  const end_values   = [12, 105, 165, opac];
+
+  const start_color = `rgba(${start_values.join()})`;
+  const end_color   = `rgba(${end_values.join()})`;
+
+  miq.header.style.backgroundImage = `linear-gradient(to right, ${start_color} 0, ${end_color} 100%)`;
+};
+
+miq.scale_header = function() {
+  // shrink padding by half
+
+  let divider;
+  if ((miq.last_scroll_y > miq.scale_start) && (miq.last_scroll_y < miq.scale_stop)) {
+    divider = 1 + (miq.last_scroll_y / miq.scale_diff);
+  } else if (miq.last_scroll_y < miq.scale_start) {
+    divider = 1;
+  } else if (miq.last_scroll_y > miq.scale_stop) {
+    divider = 2;
+  }
+
+  const pad = miq.header_pad / divider;
+
+  miq.header.style.paddingTop = `${pad}px`;
+  miq.header.style.paddingBottom = `${pad}px`;
+};
+
+miq.on_scroll = () => miq.update_background();
+
+miq.update_background = function() {
+  if (miq.last_scroll_y === window.scrollY) {
+    requestAnimationFrame(miq.update_background);
+    return false;
+  } else {
+    miq.last_scroll_y = window.scrollY;
+  }
+
+  miq.animate_header();
+  requestAnimationFrame(miq.update_background);
+};
+
+miq.animate_header = function() {
+  miq.fade_header();
+  miq.scale_header();
+};
+
+
+$(document).ready(function() {
+  if ($(".triad").length > 0) {
+    miq.setup_header_ani();
+    miq.scale_header();
+    window.addEventListener("scroll", miq.on_scroll);
+  }
+});
diff --git a/site/assets/js/_lightbox.coffee b/site/assets/js/_lightbox.coffee
deleted file mode 100644
index 4d29470e2..000000000
--- a/site/assets/js/_lightbox.coffee
+++ /dev/null
@@ -1,60 +0,0 @@
-# A super simple image zoom solution inspired by Dribbble
-
-@miq ||= {}
-
-class miq.LightboxImg
-  constructor: (elem) ->
-    @element = $(elem)
-    @bindEvents()
-
-  bindEvents: ->
-    @element.on 'click', ->
-      miq.lightbox.display(@.src, @.alt)
-
-class miq.Lightbox
-  constructor: (boxDiv) ->
-    @box = $(boxDiv)
-
-    @title = @box.find('.lightbox-title')
-    @titleText = "Enlarged Image"
-
-    @closeBtn = @box.find('.lightbox-close')
-    @image = @box.find('.lightbox-image > img')
-
-    @bindEvents()
-
-  display: (imgSrc, text = '') ->
-    @image.attr('src', imgSrc)
-
-    if text.length > 0
-      @title.text(text)
-
-    # set body to no-scroll
-    $('body').addClass('js-no_scroll')
-
-    # reset zoom
-    $('.lightbox-image').removeClass('lightbox-full')
-
-    # set class of container
-    @box.addClass('js-display')
-
-  close: ->
-    @box.removeClass('js-display')
-    $('body').removeClass('js-no_scroll')
-
-  bindEvents: =>
-    @closeBtn.on 'click', =>
-      @close()
-
-    @box.on 'click', (e) =>
-      @close()
-
-    @image.on 'click', (e) ->
-      e.stopPropagation()
-      $('.lightbox-image').toggleClass('lightbox-full')
-
-$(document).ready ->
-  miq.boxImgs = []
-  miq.boxImgs.push(new miq.LightboxImg(elem)) for elem in $('.large_img')
-
-  miq.lightbox = new miq.Lightbox('#lightbox')
diff --git a/site/assets/js/_lightbox.js b/site/assets/js/_lightbox.js
new file mode 100644
index 000000000..f7b0df9fb
--- /dev/null
+++ b/site/assets/js/_lightbox.js
@@ -0,0 +1,74 @@
+// A super simple image zoom solution inspired by Dribbble
+
+miq.LightboxImg = class LightboxImg {
+  constructor(elem) {
+    this.element = $(elem);
+    this.bindEvents();
+  }
+
+  bindEvents() {
+    this.element.on('click', function() {
+      miq.lightbox.display(this.src, this.alt);
+    });
+  }
+};
+
+miq.Lightbox = class Lightbox {
+  constructor(boxDiv) {
+    this.bindEvents = this.bindEvents.bind(this);
+    this.box = $(boxDiv);
+
+    this.title = this.box.find('.lightbox-title');
+    this.titleText = "Enlarged Image";
+
+    this.closeBtn = this.box.find('.lightbox-close');
+    this.image = this.box.find('.lightbox-image > img');
+
+    this.bindEvents();
+  }
+
+  display(imgSrc, text) {
+    if (text == null) { text = ''; }
+    this.image.attr('src', imgSrc);
+
+    if (text.length > 0) {
+      this.title.text(text);
+    }
+
+    // set body to no-scroll
+    $('body').addClass('js-no_scroll');
+
+    // reset zoom
+    $('.lightbox-image').removeClass('lightbox-full');
+
+    // set class of container
+    this.box.addClass('js-display');
+  }
+
+  close() {
+    this.box.removeClass('js-display');
+    $('body').removeClass('js-no_scroll');
+  }
+
+  bindEvents() {
+    this.closeBtn.on('click', () => {
+      this.close();
+    });
+
+    this.box.on('click', e => {
+      this.close();
+    });
+
+    this.image.on('click', function(e) {
+      e.stopPropagation();
+      $('.lightbox-image').toggleClass('lightbox-full');
+    });
+  }
+};
+
+$(document).ready(function() {
+  miq.boxImgs = [];
+  for (var elem of $('.large_img')) { miq.boxImgs.push(new miq.LightboxImg(elem)); }
+
+  miq.lightbox = new miq.Lightbox('#lightbox');
+});
diff --git a/site/assets/js/_site_menu.coffee b/site/assets/js/_site_menu.coffee
deleted file mode 100644
index 6c06177b6..000000000
--- a/site/assets/js/_site_menu.coffee
+++ /dev/null
@@ -1,3 +0,0 @@
-$(document).ready ->
-  $('[data-behavior="off_canvas-toggle"]').on 'click', ->
-    $('body').toggleClass('off_canvas-visible')
diff --git a/site/assets/js/_site_menu.js b/site/assets/js/_site_menu.js
new file mode 100644
index 000000000..f85d8cf38
--- /dev/null
+++ b/site/assets/js/_site_menu.js
@@ -0,0 +1 @@
+$(document).ready(() => $('[data-behavior="off_canvas-toggle"]').on('click', () => $('body').toggleClass('off_canvas-visible')));
diff --git a/site/assets/js/_theme.coffee b/site/assets/js/_theme.coffee
deleted file mode 100644
index 648603e54..000000000
--- a/site/assets/js/_theme.coffee
+++ /dev/null
@@ -1,34 +0,0 @@
-miq.light_theme     = "light-theme"
-miq.dark_theme      = "dark-theme"
-miq.storage_key     = "miq-theme"
-miq.button_selector = "[data-toggle-theme]"
-miq.html_doc        = miq.select("html")
-miq.theme_buttons   = miq.selectAll(miq.button_selector)
-
-miq.set_theme = (was, now) ->
-  miq.html_doc.classList.add(now)
-  miq.html_doc.classList.remove(was)
-  localStorage.setItem(miq.storage_key, JSON.stringify(now))
-
-miq.handle_button_click = ->
-  # get the current theme from localStorage
-  current_theme = localStorage.getItem(miq.storage_key)
-
-  # If the current theme and its light theme then set it to dark theme else if
-  # its dark then set it to light
-  if current_theme
-    if (JSON.parse(current_theme) == miq.light_theme)
-      miq.set_theme(miq.light_theme, miq.dark_theme)
-    else
-      miq.set_theme(miq.dark_theme, miq.light_theme)
-
-  else
-    # if localStorage is not defined then we want to use whatever the media
-    # color-scheme is to switch it to the opposite
-    if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches)
-      miq.set_theme(miq.dark_theme, miq.light_theme)
-    else
-      miq.set_theme(miq.light_theme, miq.dark_theme)
-
-for button in miq.theme_buttons
-  button.addEventListener("click", miq.handle_button_click)
diff --git a/site/assets/js/_theme.js b/site/assets/js/_theme.js
new file mode 100644
index 000000000..de3b38c8c
--- /dev/null
+++ b/site/assets/js/_theme.js
@@ -0,0 +1,40 @@
+miq.light_theme     = "light-theme";
+miq.dark_theme      = "dark-theme";
+miq.storage_key     = "miq-theme";
+miq.button_selector = "[data-toggle-theme]";
+miq.html_doc        = miq.select("html");
+miq.theme_buttons   = miq.selectAll(miq.button_selector);
+
+miq.set_theme = function(was, now) {
+  miq.html_doc.classList.add(now);
+  miq.html_doc.classList.remove(was);
+  localStorage.setItem(miq.storage_key, JSON.stringify(now));
+};
+
+miq.handle_button_click = function() {
+  // get the current theme from localStorage
+  const current_theme = localStorage.getItem(miq.storage_key);
+
+  // If the current theme and its light theme then set it to dark theme else if
+  // its dark then set it to light
+  if (current_theme) {
+    if (JSON.parse(current_theme) === miq.light_theme) {
+      miq.set_theme(miq.light_theme, miq.dark_theme);
+    } else {
+      miq.set_theme(miq.dark_theme, miq.light_theme);
+    }
+
+  } else {
+    // if localStorage is not defined then we want to use whatever the media
+    // color-scheme is to switch it to the opposite
+    if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      miq.set_theme(miq.dark_theme, miq.light_theme);
+    } else {
+      miq.set_theme(miq.light_theme, miq.dark_theme);
+    }
+  }
+};
+
+for (var button of miq.theme_buttons) {
+  button.addEventListener("click", miq.handle_button_click);
+}
diff --git a/site/assets/js/main.coffee b/site/assets/js/main.coffee
deleted file mode 100644
index 30dc7da86..000000000
--- a/site/assets/js/main.coffee
+++ /dev/null
@@ -1,18 +0,0 @@
----
----
-
-@miq ||= {
-  ui: {}
-}
-
-miq.select = (selector = "body") ->
-  document.querySelector(selector)
-
-miq.selectAll = (selector = "body") ->
-  document.querySelectorAll(selector)
-
-{% include_relative _header.coffee %}
-{% include_relative _site_menu.coffee %}
-{% include_relative _doc_menu.coffee %}
-{% include_relative _lightbox.coffee %}
-{% include_relative _theme.coffee %}
diff --git a/site/assets/js/main.js b/site/assets/js/main.js
new file mode 100644
index 000000000..d18338eec
--- /dev/null
+++ b/site/assets/js/main.js
@@ -0,0 +1,22 @@
+---
+---
+
+if (!window.miq) { window.miq = {
+  ui: {}
+}; }
+
+miq.select = function(selector) {
+  if (selector == null) { selector = "body"; }
+  return document.querySelector(selector);
+};
+
+miq.selectAll = function(selector) {
+  if (selector == null) { selector = "body"; }
+  return document.querySelectorAll(selector);
+};
+
+{% include_relative _header.js %}
+{% include_relative _site_menu.js %}
+{% include_relative _doc_menu.js %}
+{% include_relative _lightbox.js %}
+{% include_relative _theme.js %}