From f8cb98f43e1b107f224c30721a48eb3bf701c997 Mon Sep 17 00:00:00 2001 From: cyrillefr Date: Tue, 6 Feb 2024 17:02:23 +0100 Subject: [PATCH] Replace remote_toggle with method inside generic controller - put former remote toggle ctrller toggle method in new toggleAdvancedSettings in more generic toggle ctrller - modified acordingly the 2 associated views - put former test code in more generic ctrller test file - deleted now useless ctrller + test files --- .../order_cycles/_advanced_settings.html.haml | 4 +- .../_order_cycle_top_buttons.html.haml | 6 +- .../controllers/remote_toggle_controller.js | 16 ----- .../controllers/toggle_control_controller.js | 14 ++++- .../stimulus/remote_toggle_controller_test.js | 59 ------------------- .../toggle_control_controller_test.js | 45 ++++++++++++++ 6 files changed, 62 insertions(+), 82 deletions(-) delete mode 100644 app/webpacker/controllers/remote_toggle_controller.js delete mode 100644 spec/javascripts/stimulus/remote_toggle_controller_test.js diff --git a/app/views/admin/order_cycles/_advanced_settings.html.haml b/app/views/admin/order_cycles/_advanced_settings.html.haml index 455329b68c..6c04ce73b9 100644 --- a/app/views/admin/order_cycles/_advanced_settings.html.haml +++ b/app/views/admin/order_cycles/_advanced_settings.html.haml @@ -22,7 +22,7 @@ .omega.eight.columns = f.check_box :automatic_notifications - .row{ "data-controller": "remote-toggle", "data-remote-toggle-selector-value": "#advanced_settings" } + .row{ "data-controller": "toggle-control", "data-toggle-control-selector-value": "#advanced_settings" } .sixteen.columns.alpha.omega.text-center %input{ type: 'submit', value: t('.save_reload') } - %a{ href: "#", "data-action": "click->remote-toggle#toggle" }= t(:close) + %a{ href: "#", "data-action": "click->toggle-control#toggleAdvancedSettings" }= t(:close) 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 2cc89117b0..8d5cd0d6ed 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,8 +1,8 @@ - content_for :page_actions do - %li{ "data-controller": "remote-toggle", "data-remote-toggle-selector-value": "#advanced_settings" } - %button#toggle_settings{ "data-action": "click->remote-toggle#toggle" } + %li{ "data-controller": "toggle-control", "data-toggle-control-selector-value": "#advanced_settings" } + %button#toggle_settings{ "data-action": "click->toggle-control#toggleAdvancedSettings" } = t('.advanced_settings') - %i.icon-chevron-down{ "data-remote-toggle-target": "chevron" } + %i.icon-chevron-down{ "data-toggle-control-target": "chevron" } #advanced_settings{ style: "display: none" } = render partial: "/admin/order_cycles/advanced_settings" diff --git a/app/webpacker/controllers/remote_toggle_controller.js b/app/webpacker/controllers/remote_toggle_controller.js deleted file mode 100644 index ad6944f837..0000000000 --- a/app/webpacker/controllers/remote_toggle_controller.js +++ /dev/null @@ -1,16 +0,0 @@ -import { Controller } from "stimulus"; - -export default class extends Controller { - static targets = ["chevron"]; - static values = { selector: String }; - - toggle(event) { - if (this.hasChevronTarget) { - this.chevronTarget.classList.toggle("icon-chevron-down"); - this.chevronTarget.classList.toggle("icon-chevron-up"); - } - - const element = document.querySelector(this.selectorValue); - element.style.display = element.style.display === "none" ? "block" : "none"; - } -} diff --git a/app/webpacker/controllers/toggle_control_controller.js b/app/webpacker/controllers/toggle_control_controller.js index d1e4a4692c..7ba2bdb85d 100644 --- a/app/webpacker/controllers/toggle_control_controller.js +++ b/app/webpacker/controllers/toggle_control_controller.js @@ -1,7 +1,8 @@ import { Controller } from "stimulus"; export default class extends Controller { - static targets = ["control", "content"]; + static targets = ["control", "content", "chevron"]; + static values = { selector: String }; disableIfPresent(event) { const input = event.currentTarget; @@ -32,7 +33,16 @@ export default class extends Controller { t.style.display = input.dataset.toggleShow === "true" ? "block" : "none"; }); } - //todo: can toggleDisplay with optional chevron-target replace RemoteToggleController? + + toggleAdvancedSettings(event) { + if (this.hasChevronTarget) { + this.chevronTarget.classList.toggle("icon-chevron-down"); + this.chevronTarget.classList.toggle("icon-chevron-up"); + } + + const element = document.querySelector(this.selectorValue); + element.style.display = element.style.display === "none" ? "block" : "none"; + } // private diff --git a/spec/javascripts/stimulus/remote_toggle_controller_test.js b/spec/javascripts/stimulus/remote_toggle_controller_test.js deleted file mode 100644 index 507ce3827d..0000000000 --- a/spec/javascripts/stimulus/remote_toggle_controller_test.js +++ /dev/null @@ -1,59 +0,0 @@ -/** - * @jest-environment jsdom - */ - -import { Application } from "stimulus"; -import remote_toggle_controller from "../../../app/webpacker/controllers/remote_toggle_controller"; - -describe("RemoteToggleController", () => { - beforeAll(() => { - const application = Application.start(); - application.register("remote-toggle", remote_toggle_controller); - }); - - describe("#toggle", () => { - beforeEach(() => { - document.body.innerHTML = ` -
- - -
-
...
- `; - }); - - it("clicking a toggle switches the visibility of the :data-remote-toggle-selector element", () => { - const button = document.getElementById("remote-toggle"); - const content = document.getElementById("content"); - expect(content.style.display).toBe(""); - - button.click(); - - expect(content.style.display).toBe("none"); - - button.click(); - - expect(content.style.display).toBe("block"); - }); - - it("clicking a toggle with a chevron icon switches the visibility of content and the direction of the icon", () => { - const button = document.getElementById("remote-toggle-with-chevron"); - const chevron = button.querySelector("i"); - const content = document.getElementById("content"); - expect(content.style.display).toBe(""); - expect(chevron.className).toBe("icon-chevron-down"); - - button.click(); - - expect(content.style.display).toBe("none"); - expect(chevron.className).toBe("icon-chevron-up"); - - button.click(); - - expect(content.style.display).toBe("block"); - expect(chevron.className).toBe("icon-chevron-down"); - }); - }); -}); diff --git a/spec/javascripts/stimulus/toggle_control_controller_test.js b/spec/javascripts/stimulus/toggle_control_controller_test.js index 40a63f947a..412ec9e7ee 100644 --- a/spec/javascripts/stimulus/toggle_control_controller_test.js +++ b/spec/javascripts/stimulus/toggle_control_controller_test.js @@ -108,4 +108,49 @@ describe("ToggleControlController", () => { expect(content.style.display).toBe("block"); }); }); + describe("#toggleAdvancedSettings", () => { + beforeEach(() => { + document.body.innerHTML = ` +
+ + +
+
...
+ `; + }); + + it("clicking a toggle switches the visibility of the :data-remote-toggle-selector element", () => { + const button = document.getElementById("remote-toggle"); + const content = document.getElementById("content"); + expect(content.style.display).toBe(""); + + button.click(); + + expect(content.style.display).toBe("none"); + + button.click(); + + expect(content.style.display).toBe("block"); + }); + + it("clicking a toggle with a chevron icon switches the visibility of content and the direction of the icon", () => { + const button = document.getElementById("remote-toggle-with-chevron"); + const chevron = button.querySelector("i"); + const content = document.getElementById("content"); + expect(content.style.display).toBe(""); + expect(chevron.className).toBe("icon-chevron-down"); + + button.click(); + + expect(content.style.display).toBe("none"); + expect(chevron.className).toBe("icon-chevron-up"); + + button.click(); + + expect(content.style.display).toBe("block"); + expect(chevron.className).toBe("icon-chevron-down"); + }); + }); });