dfm_web 4.1.3 → 5.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 84c4b4eb534cf9bb0709478727f1b8df399029005efc95af4b6c8cac323e3102
-  data.tar.gz: bfd380942edda06a847fe43950d1719ae74e8951eeca4f53bfefbb105d7f1f4b
+  metadata.gz: 2915e59ecbf40841b8c365cfcb3b9576fdb11b8ae89f2aa29809295a0c855b9f
+  data.tar.gz: 31d451845ab180fb9041a3cac8e6b6bee96119dd2bba293f6af0b31a5ad512b6
 SHA512:
-  metadata.gz: 5855479f64152423fd614b4d79f94624be9f3df2c78ab6b14da1881c803a063706cf636ad4177cf7096cc6eecdf7887edeb64b0d0a03748727234a2b696e8a02
-  data.tar.gz: bbac1feff266fddfc870251c612f71c0c6d1404d144f777f0cd72a728148a5ee3a81232e18b465f4f7be4f7cd408c0ca9fa5e66b891dad0a5d93a7b5cc66a9a6
+  metadata.gz: a7e71b2556f0a789000db9320a7bab82688c7c5056fc7254fdaa62418fa6a77ddbea2e72d1bf419f5c662c8e7dd147da82238f35a67d26a44103de98a0747f7c
+  data.tar.gz: 6651a20000210aa3cbc0486aa998d7d1aea2285609580db8866202fa62ba9cf9318bf70473f7826b3974e37b4f429f31788f1d10682c283b4657ae34ac27ecc5

data/app/assets/javascripts/dfm_web/dfm_web.js

@@ -1,73 +1,90 @@
 // DFM Web Javascript
-// Originally written in coffeescript, converted to JS with http://js2.coffee/
 
 // DfmWeb Namespace
 // https://robots.thoughtbot.com/module-pattern-in-javascript-and-coffeescript
 window.DfmWeb = {};
 
-// Add this method within your initialization block:
-// Vanilla:
-// $(document).on 'ready page:load', ->
-//   DfmWeb.activate_dfm_web();
+// To use the dfm_web.js code, you need to call `DfmWeb.activate_dfm_web();`
+// Here are some examples of how you might do that in your application.js
 
-// Turbolinks:
-// $(document).on 'turbolinks:load', ->
-//   DfmWeb.activate_dfm_web();
+// Rails 6 Javascript
+// document.addEventListener("DOMContentLoaded", function() { DfmWeb.activate_dfm_web(); });
 
-DfmWeb.activate_dfm_web = function() {
+// Rails 7 Javascript + Turbo (esbuild in my test)
+// document.addEventListener("turbo:load", function() { DfmWeb.activate_dfm_web(); })
+
+// Rails 6 jQuery
+// $(document).on('ready page:load', function() { DfmWeb.activate_dfm_web(); });
+
+// Rails 6 jQuery + Turbolinks
+// $(document).on('turbolinks:load', function() { DfmWeb.activate_dfm_web(); });
 
-    // Hide the #notice and #alert messages by clicking the [X] or pressing escape key
-    // stop(true) removes any pending animations.
-    // This allows you to have an autohide in your app without breaking the click / ESC action.
-    // Example: $('#notice').delay(5000).slideUp('slow')
-    $('#notice, #alert').click(function() {
-        $(this).stop(true);
-        return $(this).animate({
-            height: 'toggle'
-        }, 300);
+
+DfmWeb.activate_dfm_web = function() {
+  // Hide the #notice and #alert messages by clicking the [X] or pressing escape key
+  document.querySelectorAll('#notice, #alert').forEach((node) => {
+    node.addEventListener('click', () => {
+      node.style.display = 'none';
     });
-    $(document).keyup(function(e) {
-        if (e.keyCode === 27) {
-            $('#notice, #alert').stop(true);
-            return $('#notice, #alert').animate({
-                height: 'toggle'
-            }, 300);
-        }
+
+    // If either ID exists, close by pressing Escape
+    document.addEventListener('keyup', (key) => {
+      if (key.code == 'Escape') {
+        node.style.display = 'none';
+      }
     });
+  });
 
-    // NAV BAR
-    //
-    // Insert the Hamburger if there are menu 2+ items
-    // Add "has_hamburger" class to the ul so CSS can know which way to show it.
-    if ($('#nav ul.right li').length > 1) {
-        $('ul.right').after('<div id="hamburger"></div>');
-        $('ul.right').addClass('has_hamburger');
-    }
+  // NAV BAR
+  //
+  // Insert the Hamburger if there are menu 2+ items
+  // Add "has_hamburger" class to the ul so CSS can know which way to show it.
+  if (document.querySelectorAll('#nav ul.right>li').length > 1) {
+    const hamburger = document.createElement('div');
+    hamburger.setAttribute('id', 'hamburger');
+    document.querySelector('#nav ul.right').after(hamburger);
+    document.querySelector('ul.right').classList.add('has_hamburger');
+  }
 
-    // Show the Mobile Menu on Hamburger Click
-    $('nav #hamburger').click(function() {
-        return $("nav #nav ul.has_hamburger").toggle();
+  // Show the Mobile Menu on Hamburger Click
+  document.querySelectorAll('nav #hamburger').forEach((node) => {
+    node.addEventListener('click', () => {
+      document.querySelectorAll('nav #nav ul.has_hamburger').forEach((node) => {
+        node.style.display = node.style.display === 'inline-block' ? 'none' : 'inline-block';
+      });
     });
+  });
 
-    // If you've toggled the Mobile menu it breaks larger sizes.  Reset on resize.
-    window.onresize = function() {
-        if (window.innerWidth > 1023) {
-            return $("nav #nav ul.has_hamburger").css('display', 'inline-block');
-        } else {
-            return $("nav #nav ul.has_hamburger").css('display', 'none');
-        }
-    };
 
-    // iPads don't have :hover, so hide the menu if the user clicks anything in <main>
-    $('main').click(function() {
-        if (window.innerWidth <= 1023) {
-            return $("nav #nav ul.has_hamburger").css('display', 'none');
-        }
-    });
-    // Deal with Really long menus
-    return $("#nav > ul > li > ul").each(function() {
-        if ($(this).children('li').length > 10) {
-            return $(this).addClass('crowded');
-        }
+  // If you've toggled the Mobile menu it breaks larger sizes.  Reset on resize.
+  window.onresize = function() {
+    if (window.innerWidth >= 1024) {
+      document.querySelectorAll('nav #nav ul.has_hamburger').forEach((node) => {
+        node.style.display = 'inline-block';
+      });
+    } else {
+      document.querySelectorAll('nav #nav ul.has_hamburger').forEach((node) => {
+        node.style.display = 'none';
+      });
+    }
+  };
+
+  // iPads don't have :hover, so hide the menu if the user clicks anything in <main>
+  document.querySelectorAll('main').forEach((node) => {
+    node.addEventListener('click', () => {
+      if (window.innerWidth < 1024) {
+        document.querySelectorAll('nav #nav ul.has_hamburger').forEach((node) => {
+          node.style.display = 'none';
+        });
+      }
     });
+  });
+
+  // Deal with Really long menus
+  // Add "crowded" class to make them more compact.
+  document.querySelectorAll('#nav > ul > li > ul').forEach((node) => {
+    if (node.children.length > 10) {
+      node.classList.add('crowded');
+    }
+  });
 };

data/lib/dfm_web/version.rb

@@ -1,10 +1,11 @@
 module DfmWeb
-  VERSION = "4.1.3"
+  VERSION = "5.0.0"
 end
 
 
 # Version History
 
+# 5.0.0   Remove jQuery as a requirement and update README etc for Rails 7.
 # 4.1.3   Accessibility and Print media improvements. Added /print demo to Dummy app.
 # 4.1.2   Add example theme-colors to dummy & Update NAV CSS. Added a nav search box.
 # 4.1.1   Remove alpha channel on option/select background as it's unsupported in Windows.

data/spec/dummy/app/assets/javascripts/application.js

@@ -10,16 +10,15 @@
 // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-//= require jquery2
-//= require jquery_ujs
-//= require jquery-tablesorter
 //= require dfm_web/dfm_web
 //= require_self
 
-// See dfm_web/dfm_web.js.coffee for information
-$(document).on('ready page:load', function() {
+// See dfm_web/dfm_web.js for information
+document.addEventListener("DOMContentLoaded",function() {
     DfmWeb.activate_dfm_web();
-    $("#window_width").html(window.innerWidth);
-    window.addEventListener('resize', () => {$("#window_width").html(window.innerWidth);} );
-    $('.tablesorter').tablesorter({widgets: ['zebra']})
+    document.getElementById("window_width").innerHTML = window.innerWidth;
+})
+
+window.addEventListener("resize", function() {
+    document.getElementById("window_width").innerHTML = window.innerWidth;
 });

data/spec/dummy/app/controllers/application_controller.rb

@@ -18,12 +18,12 @@ class ApplicationController < ActionController::Base
   def pure
   end
 
-  def notice
+  def notice_example
     flash[:notice] = "This is a notice message.<br>It can be <i>long</i> and include <b>basic</b> HTML."
     redirect_to root_url
   end
 
-  def alert
+  def alert_example
     flash[:alert] = "This is an alert message"
     redirect_to root_url
   end

data/spec/dummy/config/application.rb

@@ -5,8 +5,6 @@ require "action_controller/railtie"
 require "action_mailer/railtie"
 require "action_view/railtie"
 require "sprockets/railtie"
-require 'jquery-rails'
-require 'jquery-tablesorter'
 
 
 Bundler.require(*Rails.groups)

data/spec/dummy/config/routes.rb

@@ -3,8 +3,8 @@ Rails.application.routes.draw do
   # See how all your routes lay out with "rake routes".
 
 
-  get 'alert'  => 'application#alert'
-  get 'notice' => 'application#notice'
+  get 'alert'  => 'application#alert_example'
+  get 'notice' => 'application#notice_example'
   get 'news'   => 'application#news'
   get 'print'  => 'application#print'
   get 'pure'   => 'application#pure'