From 4312b0e664ad915fff7ebac3af9dc10fc90b609d Mon Sep 17 00:00:00 2001 From: Ben Purinton Date: Thu, 28 May 2026 16:58:12 -0700 Subject: [PATCH] compact JS widget approach --- README.md | 10 +-- app/assets/javascripts/dev_toolbar/index.js | 76 ++++++++++++++++++- app/assets/javascripts/dev_toolbar/toolbar.js | 24 ------ app/assets/stylesheets/dev_toolbar.css | 41 ---------- config/importmap.rb | 1 + lib/dev_toolbar/engine.rb | 13 ++-- 6 files changed, 86 insertions(+), 79 deletions(-) delete mode 100644 app/assets/javascripts/dev_toolbar/toolbar.js delete mode 100644 app/assets/stylesheets/dev_toolbar.css create mode 100644 config/importmap.rb diff --git a/README.md b/README.md index f0bca1a..1277d1c 100644 --- a/README.md +++ b/README.md @@ -36,15 +36,13 @@ end ``` Include the JavaScript: -```rb -# config/importmap.rb -pin "dev_toolbar", to: "dev_toolbar/index.js" -pin "dev_toolbar/toolbar", to: "dev_toolbar/toolbar.js" - -# app/javascripts/application.js +```js +// app/javascript/application.js import "dev_toolbar" ``` +The importmap pin is added automatically by the engine. + These routes will now appear on every page in your app while in development. ## Updating the gem diff --git a/app/assets/javascripts/dev_toolbar/index.js b/app/assets/javascripts/dev_toolbar/index.js index 9c27a5f..d9fefdc 100644 --- a/app/assets/javascripts/dev_toolbar/index.js +++ b/app/assets/javascripts/dev_toolbar/index.js @@ -1,4 +1,75 @@ -import Toolbar from "dev_toolbar/toolbar" +const STYLES = ` + #dev-toolbar { + position: fixed; + right: 0; + top: 50vh; + transform: translateY(-50%); + background-color: #f0f0f0; + border: 1px solid #ccc; + z-index: 1000; + display: flex; + flex-direction: column; + align-items: center; + font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; + color: #808080; + } + + #dev-toolbar-toggle { + all: unset; + font-size: 2em; + border: none; + cursor: pointer; + line-height: 1.5; + padding: 0 10px; + text-decoration: none; + } + + #dev-toolbar-links { + display: flex; + flex-direction: column; + } + + .dev-toolbar-link { + padding: 5px 10px; + border-bottom: 1px #f0f0f0 solid; + color: #808080; + text-decoration: none; + background-color: white; + } + + #dev-toolbar-links.hidden { + display: none; + } +` + +function injectStyles() { + if (document.getElementById("dev-toolbar-styles")) return + const style = document.createElement("style") + style.id = "dev-toolbar-styles" + style.textContent = STYLES + document.head.appendChild(style) +} + +function renderToolbar() { + const configuration = document.querySelector("meta[name=dev_toolbar_config]") + const defined_links = JSON.parse(configuration.content) + let toolbar_links = `` + for (let index = 0; index < defined_links.length; index++) { + const link = defined_links[index]; + toolbar_links += `${link.name}` + } + const toolbar_html = ` +
+
+ +
+ +
+ ` + document.body.insertAdjacentHTML('beforeend', toolbar_html) +} function waitForElementToExist(selector) { return new Promise(resolve => { @@ -21,8 +92,9 @@ function waitForElementToExist(selector) { } document.addEventListener("turbo:load", function() { + injectStyles(); if (!document.getElementById("dev-toolbar")) { - Toolbar.render(); + renderToolbar(); } waitForElementToExist("#dev-toolbar-toggle").then( () => { document.getElementById("dev-toolbar-toggle").addEventListener("click", function() { diff --git a/app/assets/javascripts/dev_toolbar/toolbar.js b/app/assets/javascripts/dev_toolbar/toolbar.js deleted file mode 100644 index 619726b..0000000 --- a/app/assets/javascripts/dev_toolbar/toolbar.js +++ /dev/null @@ -1,24 +0,0 @@ -export default class Toolbar { - static render() { - const configuration = document.querySelector("meta[name=dev_toolbar_config]") - const defined_links = JSON.parse(configuration.content) - let toolbar_links = `` - for (let index = 0; index < defined_links.length; index++) { - const link = defined_links[index]; - toolbar_links += `${link.name}` - } - const toolbar_html = ` -
-
- -
- -
- ` - document.body.insertAdjacentHTML('beforeend', toolbar_html) - } - -} -export { Toolbar } diff --git a/app/assets/stylesheets/dev_toolbar.css b/app/assets/stylesheets/dev_toolbar.css deleted file mode 100644 index a110d10..0000000 --- a/app/assets/stylesheets/dev_toolbar.css +++ /dev/null @@ -1,41 +0,0 @@ -#dev-toolbar { - position: fixed; - right: 0; - top: 50vh; - transform: translateY(-50%); - background-color: #f0f0f0; - border: 1px solid #ccc; - z-index: 1000; - display: flex; - flex-direction: column; - align-items: center; - font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; - color: #808080; -} - -#dev-toolbar-toggle { - all: unset; - font-size: 2em; - border: none; - cursor: pointer; - line-height: 1.5; - padding: 0 10px; - text-decoration: none; -} - -#dev-toolbar-links { - display: flex; - flex-direction: column; -} - -.dev-toolbar-link { - padding: 5px 10px; - border-bottom: 1px #f0f0f0 solid; - color: #808080; - text-decoration: none; - background-color: white; -} - -#dev-toolbar-links.hidden { - display: none; -} diff --git a/config/importmap.rb b/config/importmap.rb new file mode 100644 index 0000000..a29624b --- /dev/null +++ b/config/importmap.rb @@ -0,0 +1 @@ +pin "dev_toolbar", to: "dev_toolbar/index.js" diff --git a/lib/dev_toolbar/engine.rb b/lib/dev_toolbar/engine.rb index 4703ef2..01713c4 100644 --- a/lib/dev_toolbar/engine.rb +++ b/lib/dev_toolbar/engine.rb @@ -2,15 +2,10 @@ module DevToolbar class Engine < ::Rails::Engine isolate_namespace DevToolbar - config.assets.paths << root.join("app/assets/stylesheets") - initializer "dev_toolbar.assets_precompile", group: :all do |app| # Only configure asset precompilation if Sprockets is available if defined?(Sprockets) && app.config.respond_to?(:assets) - app.config.assets.precompile += [ - "dev_toolbar/toolbar.js", - "dev_toolbar/index.js", - ] + app.config.assets.precompile += ["dev_toolbar/index.js"] end end @@ -21,6 +16,12 @@ class Engine < ::Rails::Engine root: "#{root}/app/" end + initializer "dev_toolbar.importmap", before: "importmap" do |app| + if defined?(Importmap) + app.config.importmap.paths << root.join("config/importmap.rb") + end + end + initializer "dev_toolbar.add_routes", after: :add_routing_paths do |app| app.routes.append do get "/erd", to: "dev_toolbar/erd#show"