dfm_web 4.1.2 → 5.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '051826c4f008f237cb9da917ae6f6a32765d96eaf57464cc019dbe735c9a41d7'
-  data.tar.gz: 75fc064048147e529fa7bc96b2575e9d62481ba34947361c1d5217c00bdcf077
+  metadata.gz: b17ffe796e23a13634c3e972f2f657146d101333d2a622de3ea84f95a2404e10
+  data.tar.gz: bd8e0ca6412f1ba5c403b7ebad2f54514847c67a32abd088a1da1cf15c8515f3
 SHA512:
-  metadata.gz: f45ea978fca67cc0cc32c140e81c4410b8c90e7d8d25fae2246974d18d6261d5841bd39cd6cf957d2863559a8c7800816b7b376c247f2bcc902d64a2e60e9363
-  data.tar.gz: ab770804f1663545707ef5caeecfe869b71e4a6b02373209773fc11b0c245a91e974d44484abf19f64b0c929f10ed6d8e0f9686fa5f954a0d149aeaa62d19340
+  metadata.gz: 0b90e352c7c5a6dcaf03672aa05ccf4a191ffa7831f78ffdc6053764452c8c80209fa747dda303da906544181af1c8529bab38de45b93346b89ae7ad454c388f
+  data.tar.gz: 78b5356ed2e5b259d2216f5571235c699914edea4867c526a8193dbf0e89406f3cb7ebe6ad338a803c5d58bdfa7a8c114d5ba67638029a9df67c1035eb0be0de

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(function (node) {
+    node.addEventListener('click', function () {
+      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', function (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) {
+    var 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(function (node) {
+    node.addEventListener('click', function () {
+      document.querySelectorAll('nav #nav ul.has_hamburger').forEach(function (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(function (node) {
+        node.style.display = 'inline-block';
+      });
+    } else {
+      document.querySelectorAll('nav #nav ul.has_hamburger').forEach(function (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(function (node) {
+    node.addEventListener('click', function () {
+      if (window.innerWidth < 1024) {
+        document.querySelectorAll('nav #nav ul.has_hamburger').forEach(function (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(function (node) {
+    if (node.children.length > 10) {
+      node.classList.add('crowded');
+    }
+  });
 };

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

@@ -0,0 +1,72 @@
+/* Polyfill service v3.110.1
+ * For detailed credits and licence information see https://github.com/financial-times/polyfill-service.
+ *
+ * Features requested: Element.prototype.after,NodeList.prototype.forEach
+ *
+ * - _mutation, License: CC0 (required by "Element.prototype.after")
+ * - Element.prototype.after, License: CC0
+ * - NodeList.prototype.forEach, License: CC0 */
+
+(function(self, undefined) {
+
+// _mutation
+  var _mutation = (function () { // eslint-disable-line no-unused-vars
+
+    function isNode(object) {
+      // DOM, Level2
+      if (typeof Node === 'function') {
+        return object instanceof Node;
+      }
+      // Older browsers, check if it looks like a Node instance)
+      return object &&
+        typeof object === "object" &&
+        object.nodeName &&
+        object.nodeType >= 1 &&
+        object.nodeType <= 12;
+    }
+
+    // http://dom.spec.whatwg.org/#mutation-method-macro
+    return function mutation(nodes) {
+      if (nodes.length === 1) {
+        return isNode(nodes[0]) ? nodes[0] : document.createTextNode(nodes[0] + '');
+      }
+
+      var fragment = document.createDocumentFragment();
+      for (var i = 0; i < nodes.length; i++) {
+        fragment.appendChild(isNode(nodes[i]) ? nodes[i] : document.createTextNode(nodes[i] + ''));
+
+      }
+      return fragment;
+    };
+  }());
+
+// Element.prototype.after
+  /* global _mutation */
+  Document.prototype.after = Element.prototype.after = function after() {
+    if (this.parentNode) {
+      var args = Array.prototype.slice.call(arguments),
+        viableNextSibling = this.nextSibling,
+        idx = viableNextSibling ? args.indexOf(viableNextSibling) : -1;
+
+      while (idx !== -1) {
+        viableNextSibling = viableNextSibling.nextSibling;
+        if (!viableNextSibling) {
+          break;
+        }
+        idx = args.indexOf(viableNextSibling);
+      }
+
+      this.parentNode.insertBefore(_mutation(arguments), viableNextSibling);
+    }
+  };
+
+// Not all UAs support the Text constructor.  Polyfill on the Text constructor only where it exists
+// TODO: Add a polyfill for the Text constructor, and make it a dependency of this polyfill.
+  if ("Text" in self) {
+    Text.prototype.after = Element.prototype.after;
+  }
+
+// NodeList.prototype.forEach
+  NodeList.prototype.forEach = Array.prototype.forEach;
+})
+('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});

data/app/assets/stylesheets/dfm_web/dark_mode.css

@@ -1,5 +1,7 @@
 @media (prefers-color-scheme: dark) {
 
+  /* This older declaration is still required for the scrollbar on most browsers in 2021 */
+  :root { color-scheme: dark; }
 
   html, main #main {
     background: none;
@@ -125,4 +127,17 @@
   #nav ul li:hover  {
     background-color: #b40000;
   }
+
+  /* Search Fields */
+  #nav input[type="text"] {
+    opacity: 100%;
+    background-color: #540e0b !important;
+    border-color: #f7f7f7 !important;
+  }
+  #nav input[type="text"]::placeholder {
+    color: #ccc;
+  }
+
+
+
 }

data/app/assets/stylesheets/dfm_web/nav.css

@@ -31,7 +31,7 @@ nav {
 /* TODO: Input fields don't want to vertically center */
 /* TODO: Had to eyeball it. */
 nav #nav form input[type="text"] {
-  margin: 5px auto 0 auto;
+  margin: 6px auto 0 auto;
   height: 31px;
 }
 

data/app/assets/stylesheets/dfm_web/print.css

@@ -39,17 +39,22 @@
   hr          { display: none; }
   table th,
   table td    { padding: 3px; }
+  thead       { display: table-row-group; }
 
   /* Stuff to hide */
-  /* NOTE: "display: none" breaks unrelated table printing in Chrome */
   nav, footer, .button, .no_print, input[type=submit], #notice, #alert {
     position: absolute;
     visibility: hidden;
+    display: none;
+  }
+
+  .print_only {
+    display: inherit !important;
   }
 
   /* Hide Tablesorter sorting indicators */
-  table.tablesorter thead th {
-    background-image: none;
+  table.tablesorter thead tr th {
+    background-image: none !important;
     padding-left: 3px;
   }
 
@@ -71,3 +76,8 @@
     padding: 20px;
   }
 }
+
+/* Add for content which should only show in print */
+.print_only {
+  display: none;
+}

data/app/assets/stylesheets/dfm_web/pure/visibility.css

@@ -24,55 +24,55 @@ show-for-xlarge-only
 
 /* Pure Extra Large */
 @media screen and (min-width:1280px) {
-  .show-for-xsmall-only {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-small-only  {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-medium-only {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-large-only  {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xlarge-only {visibility:visible; position: inherit;}
+  .show-for-xsmall-only {visibility:hidden;  position: absolute; display: none;}
+  .show-for-small-only  {visibility:hidden;  position: absolute; display: none;}
+  .show-for-medium-only {visibility:hidden;  position: absolute; display: none;}
+  .show-for-large-only  {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xlarge-only {visibility:visible; position: inherit;  display: inherit;}
 }
 
 /* Pure Large */
 @media screen and (max-width:1279px) {
-  .show-for-xlarge-up   {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xsmall-only {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-small-only  {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-medium-only {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-large-only  {visibility:visible; position: inherit;}
-  .show-for-xlarge-only {visibility:hidden;  position: absolute; left: -9999px;}
+  .show-for-xlarge-up   {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xsmall-only {visibility:hidden;  position: absolute; display: none;}
+  .show-for-small-only  {visibility:hidden;  position: absolute; display: none;}
+  .show-for-medium-only {visibility:hidden;  position: absolute; display: none;}
+  .show-for-large-only  {visibility:visible; position: inherit;  display: inherit;}
+  .show-for-xlarge-only {visibility:hidden;  position: absolute; display: none;}
 }
 
 /* Pure Medium (iPad Portrait) */
 @media screen and (max-width:1023px) {
-  .show-for-large-up    {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xlarge-up   {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xsmall-only {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-small-only  {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-medium-only {visibility:visible; position: inherit;}
-  .show-for-large-only  {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xlarge-only {visibility:hidden;  position: absolute; left: -9999px;}
+  .show-for-large-up    {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xlarge-up   {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xsmall-only {visibility:hidden;  position: absolute; display: none;}
+  .show-for-small-only  {visibility:hidden;  position: absolute; display: none;}
+  .show-for-medium-only {visibility:visible; position: inherit;  display: inherit;}
+  .show-for-large-only  {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xlarge-only {visibility:hidden;  position: absolute; display: none;}
 }
 
 /* Pure Small */
 @media screen and (max-width:639px) {
-  .show-for-medium-up   {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-large-up    {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xlarge-up   {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xsmall-only {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-small-only  {visibility:visible; position: inherit;}
-  .show-for-medium-only {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-large-only  {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xlarge-only {visibility:hidden;  position: absolute; left: -9999px;}
+  .show-for-medium-up   {visibility:hidden;  position: absolute; display: none;}
+  .show-for-large-up    {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xlarge-up   {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xsmall-only {visibility:hidden;  position: absolute; display: none;}
+  .show-for-small-only  {visibility:visible; position: inherit;  display: inherit;}
+  .show-for-medium-only {visibility:hidden;  position: absolute; display: none;}
+  .show-for-large-only  {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xlarge-only {visibility:hidden;  position: absolute; display: none;}
 }
 
 /* Pure Extra Small */
 @media screen and (max-width:359px) {
-  .show-for-small-up    {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-medium-up   {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-large-up    {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xlarge-up   {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xsmall-only {visibility:visible; position: inherit;}
-  .show-for-small-only  {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-medium-only {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-large-only  {visibility:hidden;  position: absolute; left: -9999px;}
-  .show-for-xlarge-only {visibility:hidden;  position: absolute; left: -9999px;}
+  .show-for-small-up    {visibility:hidden;  position: absolute; display: none;}
+  .show-for-medium-up   {visibility:hidden;  position: absolute; display: none;}
+  .show-for-large-up    {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xlarge-up   {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xsmall-only {visibility:visible; position: inherit;  display: inherit;}
+  .show-for-small-only  {visibility:hidden;  position: absolute; display: none;}
+  .show-for-medium-only {visibility:hidden;  position: absolute; display: none;}
+  .show-for-large-only  {visibility:hidden;  position: absolute; display: none;}
+  .show-for-xlarge-only {visibility:hidden;  position: absolute; display: none;}
 }

data/lib/dfm_web/version.rb

@@ -1,10 +1,13 @@
 module DfmWeb
-  VERSION = "4.1.2"
+  VERSION = "5.0.1"
 end
 
 
 # Version History
 
+# 5.0.1   Restore compatibility with Internet Explorer 11.
+# 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.
 # 4.1.0   Add dark-mode (automatic based on system dark/light mode)

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

@@ -10,16 +10,20 @@
 // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-//= require jquery2
-//= require jquery_ujs
-//= require jquery-tablesorter
+// Note: The internet_explorer require below is optional.
+//       Add if you wish to support Internet Explorer 11.
+//       It adds two polyfills used by dfm_web
+//
+//= require dfm_web/internet_explorer
 //= 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/app/views/application/news.html.erb

@@ -15,7 +15,7 @@
 <h2>Headlines</h2>
 
 <div class="panel" id="sasuke">
-  <h2>Sasuke Flips Car</h2>
+  <h2>Local Events</h2>
   <% 2.times do %>
     <%= render 'lorem' %>
   <% end %>
@@ -23,7 +23,7 @@
 
 
 <div class="panel" id="ricky">
-  <h2>Ricky Faces Jail Time</h2>
+  <h2>School Closings</h2>
   <% 3.times do %>
     <%= render 'lorem' %>
   <% end %>

data/spec/dummy/app/views/application/print.html.erb

@@ -0,0 +1,46 @@
+<h1>Printing</h1>
+
+<h3>Available Classes:</h3>
+<ul>
+  <li>
+    <code>no_print</code>
+    <ul>
+      <li>Useful for hiding forms, buttons etc.</li>
+    </ul>
+  </li>
+  <li>
+    <code>print_only</code>
+    <ul>
+      <li>Add print friendly content without affecting the screen layout.</li>
+      <li>Print-Preview this page to see an example.</li>
+    </ul>
+  </li>
+</ul>
+
+<hr>
+
+<div class="panel">
+  <h2>Normal Content</h2>
+  <ul>
+    <li>This section will show on screen and in print.</li>
+  </ul>
+</div>
+
+<div class="panel no_print">
+  <h2>No Print</h2>
+  <ul>
+    <li>class: "no_print"</li>
+    <li>This content will show on screen but will not be printed.</li>
+  </ul>
+</div>
+
+<div class="panel print_only">
+  <h2>Print Only</h2>
+  <ul>
+    <li>class: "print_only"</li>
+    <li>This content will only show in print.</li>
+  </ul>
+</div>
+
+
+

data/spec/dummy/app/views/layouts/_nav.html.erb

@@ -19,6 +19,7 @@
 
       <li><%= link_to "Mailers", "/rails/mailers/mailer/example" %></li>
       <li><%= link_to "Pure", pure_path %></li>
+      <li><%= link_to "Print", print_path %></li>
 
       <li>
         <%= link_to("Flash", '#') %>
@@ -32,8 +33,8 @@
         <%= link_to "News", news_path %>
         <ul>
           <li><%= link_to("#{Date.today.strftime("%A")}'s Weather", news_path + "#weather") %></li>
-          <li><%= link_to('Sasuke Flips Car', news_path + "#sasuke") %></li>
-          <li><%= link_to('Ricky Faces Jail Time', news_path + "#ricky") %></li>
+          <li><%= link_to('Local Events', news_path + "#sasuke") %></li>
+          <li><%= link_to('School Closings', news_path + "#ricky") %></li>
         </ul>
       </li>
 

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,9 +3,10 @@ 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'
   post 'form_submit' => 'application#form_submit'
   root 'application#index' #You can have the root of your site routed with "root"