Drop coffeescript

Author: Fryguy

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"

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

site/assets/js/_banner.coffee

@@ -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();
+    });
+  }
+});

site/assets/js/_doc_menu.coffee

@@ -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);
+  }
+});

site/assets/js/_doc_menu.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');
+});

site/assets/js/_header.coffee

@@ -0,0 +1 @@
+$(document).ready(() => $('[data-behavior="off_canvas-toggle"]').on('click', () => $('body').toggleClass('off_canvas-visible')));