From ae80e5bc6e1bbd85aca41275ffd57ae0bc2e7240 Mon Sep 17 00:00:00 2001 From: Ross Kaffenberger Date: Mon, 23 Dec 2024 09:21:51 -0500 Subject: [PATCH] Forward ruby enumeration demo params with dark mode A bit convoluted here, but continuing down this path of keeping the demo JS in a separate repo: we want to request an iframe URL with query params with color scheme choices. Dark mode is not kept on the server at the moment, so I use a Stimulus controller to set the final turbo frame url on the frontend which is later converted to the appropriate iframe url on the backend. Send query params from Ruby to JS to Ruby to JS!!! --- ...-understand-ruby-lazy-enumerator.html.mdrb | 6 ++--- .../examples/ruby_enumerations_controller.rb | 5 +++- app/javascript/controllers/darkmode.js | 7 +++++ .../controllers/demos/ruby-enumeration.js | 27 +++++++++++++++++++ app/javascript/controllers/index.js | 4 +++ app/views/components/demo/ruby_enumeration.rb | 4 +-- 6 files changed, 46 insertions(+), 7 deletions(-) create mode 100644 app/javascript/controllers/demos/ruby-enumeration.js diff --git a/app/content/pages/articles/simple-trick-to-understand-ruby-lazy-enumerator.html.mdrb b/app/content/pages/articles/simple-trick-to-understand-ruby-lazy-enumerator.html.mdrb index 21ae9056..decd712c 100644 --- a/app/content/pages/articles/simple-trick-to-understand-ruby-lazy-enumerator.html.mdrb +++ b/app/content/pages/articles/simple-trick-to-understand-ruby-lazy-enumerator.html.mdrb @@ -13,21 +13,21 @@ tags: Below is how I visualize how Ruby normally processes a chain of methods on an enumerable object. -<%= turbo_frame_tag [:ruby, :enumeration, :eager], src: examples_ruby_enumeration_path(demo_type: "eager") do %> +<%= turbo_frame_tag [:ruby, :enumeration, :eager], data: { "controller" => "demo-ruby-enumeration", "demo-ruby-enumeration-url-value" => examples_ruby_enumeration_url(demo_type: "eager") } do %>
<%= image_tag "articles/simple-trick-to-understand-ruby-lazy-enumerator/loading.gif" %>
<% end %> Now visualize how enumeration changes when using `.lazy` enumeration. -<%= turbo_frame_tag [:ruby, :enumeration, :lazy], src: examples_ruby_enumeration_path(demo_type: "lazy") do %> +<%= turbo_frame_tag [:ruby, :enumeration, :lazy], data: { "controller" => "demo-ruby-enumeration", "demo-ruby-enumeration-url-value" => examples_ruby_enumeration_url(demo_type: "lazy") } do %>
<%= image_tag "articles/simple-trick-to-understand-ruby-lazy-enumerator/loading.gif" %>
<% end %> Here’s the demo again with some controls to play with the speed and style of enumeration: -<%= turbo_frame_tag [:ruby, :enumeration, :combined], src: examples_ruby_enumeration_path(demo_type: "combined") do %> +<%= turbo_frame_tag [:ruby, :enumeration, :combined], data: { "controller" => "demo-ruby-enumeration", "demo-ruby-enumeration-url-value" => examples_ruby_enumeration_url(demo_type: "combined") } do %>
<%= image_tag "articles/simple-trick-to-understand-ruby-lazy-enumerator/loading.gif" %>
<% end %> diff --git a/app/controllers/examples/ruby_enumerations_controller.rb b/app/controllers/examples/ruby_enumerations_controller.rb index 94d2d9b0..2f5517f2 100644 --- a/app/controllers/examples/ruby_enumerations_controller.rb +++ b/app/controllers/examples/ruby_enumerations_controller.rb @@ -7,8 +7,11 @@ class RubyEnumerationsController < ApplicationController def show render Demo::RubyEnumeration.new( demo_type: params[:demo_type], - background: @color_scheme.weight_50.hex + is_dark_mode: requesting_dark_mode?, + background: (@color_scheme.weight_50.hex unless requesting_dark_mode?) ) end + + def requesting_dark_mode? = params[:is_dark_mode] == "true" end end diff --git a/app/javascript/controllers/darkmode.js b/app/javascript/controllers/darkmode.js index 27372d08..05fa1e56 100644 --- a/app/javascript/controllers/darkmode.js +++ b/app/javascript/controllers/darkmode.js @@ -12,6 +12,9 @@ const SYSTEM = 'system'; const modes = [DARK, LIGHT, SYSTEM]; let mode = SYSTEM; +export const isDarkMode = () => + document.documentElement.classList.contains(DARK); + const broadcastDark = () => { mode = DARK; document.documentElement.classList.add(DARK); @@ -79,16 +82,20 @@ export default class extends Controller { case DARK: broadcastDark(); storeTheme(DARK); + this.dispatch(DARK); break; case LIGHT: broadcastLight(); storeTheme(LIGHT); + this.dispatch(LIGHT); break; case SYSTEM: if (prefersColorTheme(DARK)) { broadcastSystem(DARK); + this.dispatch(DARK); } else { broadcastSystem(LIGHT); + this.dispatch(LIGHT); } removeTheme(); break; diff --git a/app/javascript/controllers/demos/ruby-enumeration.js b/app/javascript/controllers/demos/ruby-enumeration.js new file mode 100644 index 00000000..e0041029 --- /dev/null +++ b/app/javascript/controllers/demos/ruby-enumeration.js @@ -0,0 +1,27 @@ +import { Controller } from '@hotwired/stimulus'; + +import { debug } from '../../utils'; +import { isDarkMode } from '../darkmode'; + +const console = debug('app:javascript:controllers:demos:ruby-enumeration'); + +export default class extends Controller { + static values = { + url: String, + }; + + connect() { + console.log('connect'); + + const turboFrame = this.element; + const url = new URL(this.urlValue); + + // Determine if the page is in Dark Mode + url.searchParams.append('is_dark_mode', isDarkMode()); + + console.log('url', url.toString()); + + // Set the src attribute of the Turbo Frame element + turboFrame.src = url.toString(); + } +} diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index d65c3ae4..216b280e 100644 --- a/app/javascript/controllers/index.js +++ b/app/javascript/controllers/index.js @@ -32,6 +32,8 @@ import SnippetTweet from './snippets/tweet'; import SearchCombobox from './searches/combobox'; import SearchListbox from './searches/listbox'; +import RubyEnumerationDemo from './demos/ruby-enumeration'; + application.register('clipboard-copy', ClipboardCopy); application.register('current-page', CurrentPage); application.register('darkmode', Darkmode); @@ -59,3 +61,5 @@ application.register('snippet-tweet', SnippetTweet); application.register('search-combobox', SearchCombobox); application.register('search-listbox', SearchListbox); + +application.register('demo-ruby-enumeration', RubyEnumerationDemo); diff --git a/app/views/components/demo/ruby_enumeration.rb b/app/views/components/demo/ruby_enumeration.rb index 05aee96d..22bb524c 100644 --- a/app/views/components/demo/ruby_enumeration.rb +++ b/app/views/components/demo/ruby_enumeration.rb @@ -30,9 +30,7 @@ def base_uri FOCUSED_DEMO_TYPES = %w[eager lazy].freeze def iframe_src uri = base_uri - if focused_demo_type? - uri.query_values = (uri.query_values || {}).merge(query).transform_keys { |k| k.to_s.camelize(:lower) } - end + uri.query_values = (uri.query_values || {}).merge(query).transform_keys { |k| k.to_s.camelize(:lower) } uri.to_s end