From d03b52a163302a32b6417947c9b49131dd681b84 Mon Sep 17 00:00:00 2001 From: Cillian O'Ruanaidh Date: Fri, 4 Feb 2022 11:47:38 +0000 Subject: [PATCH] Revert "Replace inline JS for toggling order cycle advanced settings with StimulusJs controller" This reverts commit 67ae2e72f31f50ebf94e48d904a72e5b746e88d9. --- .../_order_cycle_top_buttons.html.haml | 16 +++- app/views/spree/layouts/_admin_body.html.haml | 2 +- .../controllers/toggle_controller.js | 15 +--- .../stimulus/toggle_controller_test.js | 83 ++----------------- 4 files changed, 23 insertions(+), 93 deletions(-) diff --git a/app/views/admin/order_cycles/_order_cycle_top_buttons.html.haml b/app/views/admin/order_cycles/_order_cycle_top_buttons.html.haml index 08bbb2c70d..86ca6b2ae4 100644 --- a/app/views/admin/order_cycles/_order_cycle_top_buttons.html.haml +++ b/app/views/admin/order_cycles/_order_cycle_top_buttons.html.haml @@ -1,9 +1,19 @@ -- content_for :wrapper_data_controllers, "toggle" - content_for :page_actions do + :javascript + function toggleSettings(){ + if( $('#advanced_settings').is(":visible") ){ + $('button#toggle_settings i').switchClass("icon-chevron-up","icon-chevron-down") + } + else { + $('button#toggle_settings i').switchClass("icon-chevron-down","icon-chevron-up") + } + $("#advanced_settings").slideToggle() + } + %li - %button#toggle_settings{ "data-action": "toggle#toggle" } + %button#toggle_settings{ onClick: 'toggleSettings()' } = t('.advanced_settings') %i.icon-chevron-down -#advanced_settings{ "data-toggle-target": "content", style: "display: none" } +#advanced_settings{ hidden: true } = render partial: "/admin/order_cycles/advanced_settings" diff --git a/app/views/spree/layouts/_admin_body.html.haml b/app/views/spree/layouts/_admin_body.html.haml index 68b02110ce..bc380b803c 100644 --- a/app/views/spree/layouts/_admin_body.html.haml +++ b/app/views/spree/layouts/_admin_body.html.haml @@ -2,7 +2,7 @@ = render "layouts/i18n_script" = yield :stripe_js -#wrapper{ data: { hook: '', controller: (yield :wrapper_data_controllers) } } +#wrapper{ data: { hook: '' } } .flash-container - if flash[:error] .flash.error= flash[:error] diff --git a/app/webpacker/controllers/toggle_controller.js b/app/webpacker/controllers/toggle_controller.js index 0084e10d76..de87ad095d 100644 --- a/app/webpacker/controllers/toggle_controller.js +++ b/app/webpacker/controllers/toggle_controller.js @@ -4,22 +4,9 @@ export default class extends Controller { static targets = ["content"]; toggle(event) { - event.stopImmediatePropagation() const input = event.currentTarget; - const chevron = input.querySelector(".icon-chevron-down, .icon-chevron-up") - const toggleViaSingleElement = !input.dataset.toggleShow; - - if(chevron) { - chevron.classList.toggle("icon-chevron-down"); - chevron.classList.toggle("icon-chevron-up"); - } - this.contentTargets.forEach((t) => { - if(toggleViaSingleElement) { - t.style.display = t.style.display === "none" ? "block" : "none"; - } else { - t.style.display = input.dataset.toggleShow === "true" ? "block" : "none"; - } + t.style.display = input.dataset.toggleShow === "true" ? "block" : "none"; }); } } diff --git a/spec/javascripts/stimulus/toggle_controller_test.js b/spec/javascripts/stimulus/toggle_controller_test.js index 94f2727fc1..7dcd527e16 100644 --- a/spec/javascripts/stimulus/toggle_controller_test.js +++ b/spec/javascripts/stimulus/toggle_controller_test.js @@ -9,17 +9,9 @@ describe("ToggleController", () => { describe("#toggle", () => { beforeEach(() => { document.body.innerHTML = `
- - - - -
- visible content -
- `; @@ -27,73 +19,14 @@ describe("ToggleController", () => { application.register("toggle", toggle_controller); }); - it("toggling a button which shows and hides content switches the visibility of content", () => { - const button = document.getElementById("toggle"); - const invisibleContent = document.getElementById("invisible-content"); - const visibleContent = document.getElementById("visible-content"); - expect(invisibleContent.style.display).toBe("none"); - expect(visibleContent.style.display).toBe("block"); + it("toggle the content", () => { + const button = document.getElementById("button"); + const content = document.getElementById("content"); + expect(content.style.display).toBe(""); button.click(); - expect(invisibleContent.style.display).toBe("block"); - expect(visibleContent.style.display).toBe("none"); - }); - - it("toggling a button with 'data-toggle-show=true' shows invisible content", () => { - const button = document.getElementById("toggle-show"); - const invisibleContent = document.getElementById("invisible-content"); - expect(invisibleContent.style.display).toBe("none"); - - button.click(); - - expect(invisibleContent.style.display).toBe("block"); - }); - - it("toggling a button with 'data-toggle-show=true' doesn't hide visible content", () => { - const button = document.getElementById("toggle-show"); - const visibleContent = document.getElementById("visible-content"); - expect(visibleContent.style.display).toBe("block"); - - button.click(); - - expect(visibleContent.style.display).toBe("block"); - }); - - it("toggling a button with 'data-toggle-show=false' hides visible content", () => { - const button = document.getElementById("toggle-hide"); - const visibleContent = document.getElementById("visible-content"); - expect(visibleContent.style.display).toBe("block"); - - button.click(); - - expect(visibleContent.style.display).toBe("none"); - }); - - it("toggling a button with 'data-toggle-show=false' doesn't show invisible content", () => { - const button = document.getElementById("toggle-hide"); - const invisibleContent = document.getElementById("invisible-content"); - expect(invisibleContent.style.display).toBe("none"); - - button.click(); - - expect(invisibleContent.style.display).toBe("none"); - }); - - it("toggling a button with a chevron icon switches the visibility of content and the direction of the icon", () => { - const buttonA = document.getElementById("toggle-with-chevron"); - const chevron = buttonA.querySelector("i"); - const invisibleContent = document.getElementById("invisible-content"); - const visibleContent = document.getElementById("visible-content"); - expect(invisibleContent.style.display).toBe("none"); - expect(visibleContent.style.display).toBe("block"); - expect(chevron.className).toBe("icon-chevron-down"); - - buttonA.click(); - - expect(invisibleContent.style.display).toBe("block"); - expect(visibleContent.style.display).toBe("none"); - expect(chevron.className).toBe("icon-chevron-up"); + expect(content.style.display).toBe("block"); }); }); });