dfm_web 5.0.3 → 8.0.0

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

@@ -3,10 +3,11 @@
   color: white;
   margin: 70px 25px -70px 25px;        /* Space for the NAV, and min side margin */
   display: block;
-  pointer-events: none;
   background: none;
 }
 
+#notice[hidden], #alert[hidden] { display: none; }
+
 /* Similar to #main */
 #notice>div, #alert>div {
   margin: 0 auto;               /* Centered with max width */
@@ -20,12 +21,13 @@
 }
 
 
-/* HTML-free close button */
-#notice > div:before, #alert > div:before {
+#notice .dfm_flash_close, #alert .dfm_flash_close {
   float: right;
-  content: "\00d7";
+  border: 0;
+  border-radius: 0;
+  color: inherit;
+  font: inherit;
   cursor: pointer;
-  pointer-events: auto;
   padding: 0 6px 3px 6px;
   background-color: rgba(255,255,255,.2);
   transition: background-color .3s;
@@ -34,11 +36,16 @@
 
 
 /* Hover the close button to add visual cue */
-#notice:hover:after, #alert:hover:after {
+#notice .dfm_flash_close:hover, #alert .dfm_flash_close:hover {
   background-color: rgba(0,0,0,.2);
   transition: background-color 0s;
 }
 
 
 /* Hide Rails scaffold notice bars */
+.dfm_flash_close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
 main #main p#notice { display: none; }

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

@@ -29,6 +29,10 @@
   html {
     background-image: none;
   }
+
+  html::before {
+    display: none;
+  }
 }
 
 
@@ -60,4 +64,8 @@
     display: block;
   }
 
+  nav #nav ul.has_hamburger.is_open {
+    display: inline-block;
+  }
+
 }

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

@@ -81,7 +81,8 @@ nav #nav form input[type="text"] {
   width: 190px;
 }
 
-#nav ul li:hover > ul {
+#nav ul li:hover > ul,
+#nav ul li:focus-within > ul {
   visibility: visible;
 }
 
@@ -181,6 +182,11 @@ nav > #nav > ul.right {
 }
 
 #nav #hamburger {
+  appearance: none;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  cursor: pointer;
   display: none;
   position: absolute;
   margin: 9px;
@@ -197,6 +203,11 @@ nav > #nav > ul.right {
 }
 
 /* If a menu is really long, Javascript will add "crowded" class to it. */
+#nav a:focus-visible, #nav #hamburger:focus-visible {
+  outline: 2px solid white;
+  outline-offset: -2px;
+}
+
 #nav ul.crowded a {
   font-size: 15px;
   padding: 6px 10px;

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

@@ -5,6 +5,10 @@
 }
 
 @media print and (color) {
+  html::before {
+    display: none;
+  }
+
   * {
     /* Prevent browsers from discarding the majority of color info */
     -webkit-print-color-adjust: exact;

data/app/assets/stylesheets/dfm_web/{style.css.erb → style.css}

@@ -12,7 +12,7 @@ UW GRAY FOOTER TEXT HOVER	$uw-gray-footer-text-hover	#f9f9f9	Used for links in f
 */
 
 html, .pure-g, .pure-g [class *= "pure-u"] {
-  font-family: 'Red Hat Text', 'Verlag', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: 'Red Hat Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 /* html tag should really only have background styles */
@@ -20,7 +20,7 @@ html {
   font-size: 0.88em;
   color: black;
   background-color: #f7f7f7;
-  background-image: url(<%= asset_path 'dfm_web/terrace-chair.png' %>), url(<%= asset_path 'dfm_web/defective_monitor.png' %>);
+  /* Embedded background images are defined in style_background.css. */
   background-size: cover;
   background-attachment: fixed;
 }

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

@@ -0,0 +1,51 @@
+/* Vector UW Terrace Chair: responsive.
+   The rays are transparent cutouts in a translucent gray layer. */
+html {
+  min-height: 100%;
+  isolation: isolate;
+  background-image:
+    radial-gradient(ellipse 95% 95% at 75% 50%, rgb(255 255 255 / 3%) 0%, rgb(255 255 255 / 2%) 35%, transparent 75%, rgb(0 0 0 / 2%) 100%),
+    radial-gradient(ellipse 45% 45% at 80% 55%, rgb(255 255 255 / 1.5%), transparent),
+    linear-gradient(155deg, transparent 40%, rgb(255 255 255 / 1%) 75%, transparent);
+}
+
+html::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  aspect-ratio: 1920 / 1159;
+  min-height: 100vh;
+  pointer-events: none;
+  z-index: -1;
+  clip-path: shape(evenodd
+    from 0% 0%, line to 100% 0%, line to 100% 100%, line to 0% 100%, close,
+    move to 59.7% 100%, curve by -2.5% -19.1% with -.5% -6.5% / -1.6% -12.8%, curve by -2.2% -7.3% with -.1% -.6% / -.9% -6.9%, curve by -.7% 9.5% with -1.2% 1.9% / -.6% 8.5%, curve by 1% 16.9% with .1% 1.6% / .4% 14.6%, close,
+    move to 49% 99.9%, curve by 1% -17.1% with .3% -5.1% / .2% -12.2%, curve by -.8% -9.3% with 0% -.1% / .6% -8.8%, curve by -3.8% 19.5% with -2.6% 3.4% / -3.3% 15.6%, curve by -.7% 6.9% with -.3% 2.3% / -1.7% 5.2%, close,
+    move to 71.9% 99.9%, curve by -7.6% -22.2% with -2.4% -7.6% / -4.8% -14.9%, curve by -3.9% -7.2% with -.9% -2.2% / -2.1% -6.5%, curve by 1% 8.9% with -1.1% 1.3% / .9% 8.4%, curve by 5.5% 20.4% with 3.5% 14.1% / 1.7% 7.3%, close,
+    move to 37.4% 100%, curve by 5.8% -21.7% with 1.2% -1.7% / 5.1% -18.9%, curve by .5% -7.6% with .2% -.9% / 1.9% -7.2%, curve by -4.2% 8.5% with -1.8% 1.5% / -3.3% 6.1%, curve by -7% 20.9% with -5.2% 14.5% / -2.8% 7.5%, close,
+    move to 88.7% 99.9%, curve by -14.5% -24.3% with -4.6% -8.6% / -9.5% -16.5%, curve by -8.6% -10.6% with -2.5% -3.5% / -5.4% -8.7%, curve by 1.7% 7.3% with -2.1% 0% / 1.7% 7.2%, curve by 15.8% 27.6% with 4.7% 9.5% / 10% 20%, close,
+    move to 21.4% 99.9%, curve by 14.2% -24.4% with 5% -7.8% / 9.7% -15.9%, curve by 3.7% -10.5% with .4% -.9% / 5% -8.5%, curve by -7.2% 7.9% with -2.5% .1% / -5.5% 5.6%, curve by -16.4% 27% with -5.8% 8.5% / -11.3% 17.4%, close,
+    move to 100% 81.2%, curve by -21.5% -18.7% with -6.9% -7.1% / -14.1% -13.1%, curve by -9.7% -5.4% with -3.2% -2.1% / -6.3% -4.6%, curve by .3% 2.7% with -1.1% .5% / -.1% 1.8%, curve by 4.5% 5.3% with 2.1% 2.9% / .6% 1%, curve by 26.3% 21.8% with 8.5% 8.4% / 17.2% 15.8%, close,
+    move to 0% 89%, curve by 23.1% -16.4% with 7.8% -.9% / 16.5% -10.8%, curve by 9.4% -9.3% with 7.4% -7% / 4.3% -3.8%, curve by 2.8% -6.1% with .5% -.5% / 5.3% -5.4%, curve by -15.2% 9.8% with -5.2% 1.1% / -10.7% 6.3%, curve by -20.1% 19.6% with -6.9% 5.8% / -14.1% 11.4%, close,
+    move to 99.9% 53.1%, curve by -21.9% -5.3% with -7.3% -2.3% / -14.5% -4.1%, curve by -5.7% -.3% with -3.7% -.4% / -1.8% -.3%, curve by -2% 2% with -.6% .1% / -3% 0%, curve by 29.6% 10.2% with 8.5% 7.7% / 20.2% 8.8%, close,
+    move to 0% 60.3%, curve by 33.6% -10.4% with 11.2% -1.1% / 23.2% -3.5%, curve by -1.6% -2.4% with 1.7% -2% / -.6% -2.2%, curve by -9.2% .8% with -5.1% 0% / -2% -.1%, curve by -22.8% 6.6% with -7.2% 1.5% / -16% 1.8%, close,
+    move to 100% 28.1%, curve by -21.3% 5.7% with -7.2% 1.5% / -14.2% 3.3%, curve by -5.6% 6.6% with -2% .9% / -13.4% 5.6%, curve by 21.2% -3.9% with 7.1% -.2% / 14.2% -1.7%, curve by 5.7% -1.9% with 1.7% 1.6% / 4.1% -.2%, close,
+    move to 0% 33.1%, curve by 31.2% 7.3% with 10.2% 4% / 20.7% 7%, curve by 2.8% -.7% with 2.4% -.4% / 1.5% .1%, curve by -6.3% -5% with 1.2% -2.6% / -6.2% -5%, curve by -27.8% -7.2% with -9.2% -3.5% / -18.4% -6.1%, close,
+    move to 100% .9%, curve by -25.3% 20.7% with -8.8% 5.5% / -17.2% 12.8%, curve by -5.3% 6.1% with -4.4% 4.8% / -2.6% 2.7%, curve by -.7% 2.9% with -.4% .7% / -1.7% 2.2%, curve by 8.7% -4.5% with 3% 0% / 6.1% -2.7%, curve by 22.6% -19.5% with 7.8% -5.9% / 15.3% -12.2%, close,
+    move to 75.6% 0%, curve by -9.6% 18.3% with -3.4% 5.9% / -6.6% 11.8%, curve by -.5% 4.6% with -.4% 1% / -2.1% 4.5%, curve by 16.3% -22.8% with 6.3% -5% / 11.4% -14.8%, close,
+    move to 63.5% 0%, curve by -3% 12.8% with -2.2% 8.4% / -1.2% 4.2%, curve by -.1% 4.5% with -.2% 1.2% / -.8% 3.4%, curve by 7.5% -17.3% with 3.3% -1.8% / 6% -12.9%, close,
+    move to 54.6% 0%, curve by -.2% 11.1% with -.3% 6.9% / -.2% 3.2%, curve by .9% 3.2% with .1% 1.4% / 0% 3%, curve by 3% -14.3% with 2% -2.3% / 2.5% -11%, close,
+    move to 46.1% 0%, curve by 1.8% 11.1% with 1% 7.2% / .4% 3.5%, curve by 1.4% 3.2% with .3% 1% / .6% 3.2%, curve by .3% -14.3% with 1.3% -2% / 1.1% -12.2%, close,
+    move to 36.4% 0%, curve by 2% 5.9% with .4% 2.5% / 0% .4%, curve by 5.3% 11.4% with .9% 2.4% / 3.1% 10%, curve by 0% -5% with 1.1% -.4% / 0% -4.8%, curve by -2.9% -12.3% with -1.8% -8.3% / -.8% -4.2%, close,
+    move to 22.6% 0%, curve by 4.5% 7.4% with .4% 3.6% / 0% .2%, curve by 12.2% 15.5% with 3% 4.6% / 7.8% 14.7%, curve by -1.9% -6.9% with 1.2% -1.5% / -1.1% -4.8%, curve by -8.5% -16% with -5% -10.1% / -2.2% -4.7%, close,
+    move to 0% 0%, curve by 10% 12.3% with -.1% 4.4% / 9.5% 11.8%, curve by 25.7% 18.4% with 7.6% 6.7% / 16.8% 17.3%, curve by -2.8% -5.6% with 1.4% -.9% / -1.7% -4.1%, curve by -6% -6.2% with -3.3% -3.7% / -1.3% -1.5%, curve by -24.1% -18.9% with -7.8% -7.1% / -15.7% -13.9%, close
+  );
+}
+
+@supports (clip-path: shape(from 0% 0%, line to 100% 0%, close)) {
+  html::before {
+    background: rgb(211 211 211 / 16.1%);
+  }
+}

data/app/helpers/dfm_web_helper.rb

@@ -1,5 +1,15 @@
 module DfmWebHelper
 
+  def dfm_web_asset_tags
+    nonce = content_security_policy_nonce
+    safe_join([
+      stylesheet_link_tag("dfm_web/dfm_web", nonce: nonce,
+        "data-turbo-track" => "reload", "data-dfm-web" => "stylesheet"),
+      javascript_include_tag("dfm_web/dfm_web", defer: true, nonce: nonce,
+        "data-turbo-track" => "reload", "data-dfm-web" => "script")
+    ], "\n")
+  end
+
   # Extract the host application's name and titlecase it.
   # Should `titlecase` incorrectly capitalize your app, add it
   # as an acronym in your inflections.rb

data/app/views/layouts/_flash.html.erb

@@ -1,3 +1,11 @@
 <div style="clear:both"><!-- For smooth animation --></div>
-<%= content_tag(:div, content_tag(:div, sanitize(flash[:notice])), id: :notice) if flash[:notice] %>
-<%= content_tag(:div, content_tag(:div, sanitize(flash[:alert])),  id: :alert)  if flash[:alert]  %>
+<% [:notice, :alert].each do |kind| %>
+	<% if flash[kind] %>
+		<div id="<%= kind %>" role="<%= kind == :alert ? 'alert' : 'status' %>">
+			<div>
+				<button type="button" class="dfm_flash_close" data-dfm-dismiss aria-label="Dismiss <%= kind %>">&times;</button>
+				<%= sanitize(flash[kind]) %>
+			</div>
+		</div>
+	<% end %>
+<% end %>

data/lib/dfm_web/auto_assets.rb

@@ -0,0 +1,73 @@
+require "active_support/concern"
+require "nokogiri"
+require "uri"
+
+module DfmWeb
+  module AutoAssets
+    extend ActiveSupport::Concern
+
+    included do
+      class_attribute :dfm_web_auto_include_assets, default: true
+      after_action :include_dfm_web_assets
+    end
+
+    private
+
+    def include_dfm_web_assets
+      return unless Rails.application.config.dfm_web.auto_include_assets && dfm_web_auto_include_assets
+      return if request.head? || response.committed? || response.headers["Content-Disposition"]
+      return unless response.successful? && response.media_type == "text/html"
+      return if defined?(ActionController::Live) && is_a?(ActionController::Live)
+
+      parts = response_body
+      return unless parts.is_a?(String) || (parts.is_a?(Array) && parts.all? { |part| part.is_a?(String) })
+
+      body = Array(parts).join
+      return unless body.match?(/\A(?:\s*<!--.*?-->)*\s*<!doctype\s+html\b[^>]*>\s*<html\b[^>]*>\s*<head\b/im)
+
+      document = parse_dfm_web_document(body)
+      return unless document && document.errors.empty?
+
+      head = document.at_css("html > head")
+      return unless head
+
+      tags = Nokogiri::HTML5.fragment(view_context.dfm_web_asset_tags).element_children
+      changed = false
+      tags.each do |tag|
+        attribute = tag.name == "link" ? "href" : "src"
+        selector = tag.name == "link" ? "link[rel~='stylesheet']" : "script[src]"
+        next if document.css(selector).any? { |existing| same_dfm_web_asset?(existing, tag, attribute) }
+
+        anchor = tag.name == "link" ? head.at_css("link[rel~='stylesheet'], style") : nil
+        if anchor
+          anchor.add_previous_sibling(tag)
+        else
+          head.add_child(tag)
+        end
+        changed = true
+      end
+      return unless changed
+
+      self.response_body = document.to_html
+      %w[Content-Length ETag Last-Modified].each { |header| response.headers.delete(header) }
+    end
+
+    def parse_dfm_web_document(body)
+      Nokogiri::HTML5.parse(body, nil, response.charset || "UTF-8")
+    rescue ArgumentError, Nokogiri::XML::SyntaxError => error
+      Rails.logger.warn("DFM asset inclusion skipped: #{error.message}")
+      nil
+    end
+
+    def same_dfm_web_asset?(existing, tag, attribute)
+      existing["data-dfm-web"] == tag["data-dfm-web"] ||
+        dfm_web_asset_url_path(existing[attribute]) == dfm_web_asset_url_path(tag[attribute])
+    end
+
+    def dfm_web_asset_url_path(value)
+      URI.parse(value.to_s).path
+    rescue URI::InvalidURIError
+      value
+    end
+  end
+end

data/lib/dfm_web/css_bundle.rb

@@ -0,0 +1,29 @@
+module DfmWeb
+  module CssBundle
+    SOURCES = %w[
+      fonts/redhat pure/pure pure/grids-responsive pure/visibility pure/gutter
+      layout flash nav nav_colors style_background style forms tables
+      layout_media dark_mode print
+    ].freeze
+
+    ROOT = File.expand_path("../..", __dir__)
+    DIRECTORY = File.join(ROOT, "app/assets/stylesheets/dfm_web")
+    TARGET = File.join(DIRECTORY, "dfm_web.css")
+
+    def self.content
+      header = "/* Generated by rake dfm_web:assets:build. Edit the source stylesheets, not this file. */\n"
+      stylesheets = SOURCES.map { |name| File.read(File.join(DIRECTORY, "#{name}.css")) }
+      debug = ".debug { box-shadow: 0 0 1px red, 0 0 2px black; }\n" \
+        ".debug-all, .debug-all * { box-shadow: 0 0 1px white, 0 0 2px black; }\n"
+      header + stylesheets.join("\n") + "\n" + debug
+    end
+
+    def self.write
+      File.write(TARGET, content)
+    end
+
+    def self.check!
+      raise "CSS bundle is stale; run rake dfm_web:assets:build" unless File.read(TARGET) == content
+    end
+  end
+end

data/lib/dfm_web/engine.rb

@@ -1,9 +1,9 @@
 module DfmWeb
   class Engine < ::Rails::Engine
-    begin
-      Engine.config.assets.precompile += %w( dfm_web/* )
-    rescue
-      nil
+    initializer "dfm_web.assets" do |app|
+      if defined?(Sprockets::Railtie) && app.config.assets.precompile
+        app.config.assets.precompile += %w[dfm_web/*]
+      end
     end
   end
 end

data/lib/dfm_web/railtie.rb

@@ -1,11 +1,21 @@
 # http://stackoverflow.com/questions/5791211/how-do-i-extract-rails-view-helpers-into-a-gem
 
 require File.dirname(__FILE__) + "/../../app/helpers/dfm_web_helper"
+require_relative "auto_assets"
 
 module DfmWeb
   class Railtie < Rails::Railtie
+    config.dfm_web = ActiveSupport::OrderedOptions.new
+    config.dfm_web.auto_include_assets = true
+
     initializer "dfm_web_helper" do
       ActiveSupport.on_load( :action_view ){ include DfmWebHelper }
     end
+
+    initializer "dfm_web.auto_assets" do
+      ActiveSupport.on_load(:action_controller_base) do
+        include DfmWeb::AutoAssets
+      end
+    end
   end
 end

data/lib/dfm_web/version.rb

@@ -1,10 +1,12 @@
 module DfmWeb
-  VERSION = "5.0.3"
+  VERSION = "8.0.0"
 end
 
 
 # Version History
 
+# 8.0.0   Rails 8+, Propshaft/Sprockets, readable plain assets, automatic startup/inclusion, and accessible controls. Removed IE support.
+# 5.0.4   Removed verlag font from the font-family list as no one should be using it.  Font itself was never present.
 # 5.0.2   Scale the new font to 88% to match the old one and use black instead of dark gray for the base.
 # 5.0.2   Added RedHat font now used by UW Madison as the official marketing font.
 # 5.0.1   Restore compatibility with Internet Explorer 11.