Create menubar web component

alchemy_cms.gemspec

@@ -56,6 +56,7 @@ Gem::Specification.new do |gem|
 
   gem.add_development_dependency "capybara", ["~> 3.0"]
   gem.add_development_dependency "capybara-screenshot", ["~> 1.0"]
+  gem.add_development_dependency "capybara-shadowdom", ["~> 0.3"]
   gem.add_development_dependency "factory_bot_rails", ["~> 6.0"]
   gem.add_development_dependency "puma", ["~> 6.0"]
   gem.add_development_dependency "rails-controller-testing", ["~> 1.0"]

app/assets/config/alchemy_manifest.js

@@ -2,7 +2,6 @@
 //= link alchemy/admin/all.js
 //= link alchemy/preview.js
 //= link alchemy/menubar.css
-//= link alchemy/menubar.js
 //= link alchemy/print.css
 //= link alchemy/welcome.css
 //= link tinymce/plugins/alchemy_link/plugin.min.js

app/assets/stylesheets/alchemy/menubar.scss

@@ -32,13 +32,13 @@
   }
 
   &:after {
-    content: '';
+    content: "";
     width: 24px;
     height: 24px;
     position: absolute;
     right: 10px;
     top: 50%;
-    background: image-url('alchemy/icon-white.svg') 1px 1px no-repeat;
+    background: image-url("alchemy/icon-white.svg") 1px 1px no-repeat;
     background-size: 24px 24px;
     transform: translateY(-50%);
   }
@@ -57,7 +57,8 @@
       list-style-type: none;
       text-align: center;
 
-      a, button {
+      a,
+      button {
         @include button-defaults(
           $background-color: $main-menu-bg-color,
           $hover-color: $blue,
@@ -70,10 +71,10 @@
         );
         width: 100%;
         text-decoration: none !important;
-        text-transform: none;
-        font-family: $default-font-family;
 
-        &:after { display: none }
+        &:after {
+          display: none;
+        }
       }
     }
   }

app/javascript/menubar.js

@@ -0,0 +1,10 @@
+class Menubar extends HTMLElement {
+  constructor() {
+    super()
+    const template = this.querySelector("template")
+    const attachedShadowRoot = this.attachShadow({ mode: "open" })
+    attachedShadowRoot.appendChild(template.content.cloneNode(true))
+  }
+}
+
+customElements.define("alchemy-menubar", Menubar)

app/views/alchemy/_menubar.html.erb

@@ -1,16 +1,20 @@
 <% if !@preview_mode && @page && can?(:edit_content, @page) %>
-  <div id="alchemy_menubar" style="display: none" data-turbo="false">
-    <ul>
-      <li><%= link_to Alchemy.t(:to_alchemy), alchemy.admin_dashboard_url %></li>
-      <li><%= link_to Alchemy.t(:edit_page), alchemy.edit_admin_page_url(@page) %></li>
-      <li>
-        <%= form_tag Alchemy.logout_path, method: Alchemy.logout_method do %>
-          <%= button_tag Alchemy.t(:logout) %>
-        <% end %>
-      </li>
-    </ul>
-  </div>
+  <alchemy-menubar>
+    <template>
+      <%= stylesheet_link_tag("alchemy/menubar") %>
+      <div id="alchemy_menubar" data-turbo="false">
+        <ul>
+          <li><%= link_to Alchemy.t(:to_alchemy), alchemy.admin_dashboard_url %></li>
+          <li><%= link_to Alchemy.t(:edit_page), alchemy.edit_admin_page_url(@page) %></li>
+          <li>
+            <%= form_tag Alchemy.logout_path, method: Alchemy.logout_method do %>
+              <%= button_tag Alchemy.t(:logout) %>
+            <% end %>
+          </li>
+        </ul>
+      </div>
+    </template>
+  </alchemy-menubar>
 
-  <%= stylesheet_link_tag("alchemy/menubar") %>
-  <%= javascript_include_tag('alchemy/menubar') %>
+  <%= javascript_include_tag('menubar', type: "module") %>
 <% end %>

spec/features/page_feature_spec.rb

@@ -68,63 +68,65 @@
     context "rendering for guest users" do
       it "is prohibited" do
         visit "/#{public_page.urlname}"
-        within("body") { expect(page).not_to have_selector("#alchemy_menubar") }
+        within("body") { expect(page).not_to have_selector("alchemy-menubar") }
       end
     end
 
     context "rendering for members" do
       it "is prohibited" do
         authorize_user(build(:alchemy_dummy_user))
         visit "/#{public_page.urlname}"
-        within("body") { expect(page).not_to have_selector("#alchemy_menubar") }
+        within("body") { expect(page).not_to have_selector("alchemy-menubar") }
       end
     end
 
     context "rendering for authors" do
       it "is allowed" do
         authorize_user(:as_author)
         visit "/#{public_page.urlname}"
-        within("body") { expect(page).to have_selector("#alchemy_menubar") }
+        within("body") { expect(page).to have_selector("alchemy-menubar") }
       end
     end
 
     context "rendering for editors" do
       it "is allowed" do
         authorize_user(:as_editor)
         visit "/#{public_page.urlname}"
-        within("body") { expect(page).to have_selector("#alchemy_menubar") }
+        within("body") { expect(page).to have_selector("alchemy-menubar") }
       end
     end
 
     context "rendering for admins" do
       it "is allowed" do
         authorize_user(:as_admin)
         visit "/#{public_page.urlname}"
-        within("body") { expect(page).to have_selector("#alchemy_menubar") }
+        within("body") { expect(page).to have_selector("alchemy-menubar") }
       end
     end
 
-    context "contains" do
+    context "contains", js: true do
+      let(:host) { "#{page.server.host}:#{page.server.port}" }
+
       before do
         authorize_user(:as_admin)
         visit "/#{public_page.urlname}"
       end
 
       it "a link to the admin area" do
-        within("#alchemy_menubar") do
-          expect(page).to have_selector("li a[href='#{alchemy.admin_dashboard_url(host: Capybara.current_host)}']")
+        within find("alchemy-menubar").shadow_root do
+          expect(page).to have_selector("li a[href='#{alchemy.admin_dashboard_url(host: host)}']")
         end
       end
 
       it "a link to edit the current page" do
-        within("#alchemy_menubar") do
+        within find("alchemy-menubar").shadow_root do
           expect(page).to \
-            have_selector("li a[href='#{alchemy.edit_admin_page_url(public_page, host: Capybara.current_host)}']")
+            have_selector("li a[href='#{alchemy.edit_admin_page_url(public_page, host: host)}']")
         end
       end
 
       it "a form and button to logout of alchemy" do
-        within("#alchemy_menubar") do
+        within find("alchemy-menubar").shadow_root do
           expect(page).to \
             have_selector("li form[action='#{Alchemy.logout_path}'][method='post']")
           expect(page).to \

spec/rails_helper.rb

@@ -9,6 +9,7 @@
 
 require "capybara/rails"
 require "capybara-screenshot/rspec"
+require "capybara/shadowdom"
 require "rails-controller-testing"
 require "rspec-activemodel-mocks"
 require "rspec/rails"