From 4a0acfba10fc213c39868380cfebdf1bb4c7e4c7 Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Tue, 22 Oct 2024 13:20:02 +0200 Subject: [PATCH 1/5] add click event listener in zen mode button --- app/components/primer/open_project/zen_mode_button.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/app/components/primer/open_project/zen_mode_button.ts b/app/components/primer/open_project/zen_mode_button.ts index 89f8447893..15da84f56e 100644 --- a/app/components/primer/open_project/zen_mode_button.ts +++ b/app/components/primer/open_project/zen_mode_button.ts @@ -5,6 +5,17 @@ class ZenModeButtonElement extends HTMLElement { @target button: HTMLElement inZenMode = false + // eslint-disable-next-line custom-elements/no-constructor + constructor() { + super() + this.button.addEventListener('click', this.triggerZenMode.bind(this)) + } + + triggerZenMode() { + const event = new CustomEvent('toggleZenMode') + window.dispatchEvent(event) + } + private deactivateZenMode() { this.inZenMode = false this.button.setAttribute('aria-pressed', 'false') From 054c17d491ed7236602fc0260121dd2a49c8da1e Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Tue, 22 Oct 2024 13:26:27 +0200 Subject: [PATCH 2/5] pass state of zen mode in event --- app/components/primer/open_project/zen_mode_button.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/app/components/primer/open_project/zen_mode_button.ts b/app/components/primer/open_project/zen_mode_button.ts index 15da84f56e..077a89e0b0 100644 --- a/app/components/primer/open_project/zen_mode_button.ts +++ b/app/components/primer/open_project/zen_mode_button.ts @@ -12,7 +12,13 @@ class ZenModeButtonElement extends HTMLElement { } triggerZenMode() { - const event = new CustomEvent('toggleZenMode') + // Create a new custom event + const event = new CustomEvent('toggleZenMode', { + detail: { + active: !this.inZenMode, + }, + }) + // Dispatch the custom event window.dispatchEvent(event) } From 4e2d051f0ed93a95a690468184987caeebd4246d Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad <62008897+bsatarnejad@users.noreply.github.com> Date: Tue, 22 Oct 2024 15:14:36 +0200 Subject: [PATCH 3/5] add changeset --- .changeset/three-cooks-ring.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/three-cooks-ring.md diff --git a/.changeset/three-cooks-ring.md b/.changeset/three-cooks-ring.md new file mode 100644 index 0000000000..9cc447d1fb --- /dev/null +++ b/.changeset/three-cooks-ring.md @@ -0,0 +1,5 @@ +--- +"@openproject/primer-view-components": patch +--- + +[58256] Add a click event listener for the button so we can listen to this event and make whatever changes that we want From b9e04163d7f42f7ea753d89cb9f98184cdefd07e Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Wed, 23 Oct 2024 14:24:14 +0200 Subject: [PATCH 4/5] remove constructor and call the event in click method --- .../primer/open_project/zen_mode_button.ts | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/app/components/primer/open_project/zen_mode_button.ts b/app/components/primer/open_project/zen_mode_button.ts index 077a89e0b0..da064f14c4 100644 --- a/app/components/primer/open_project/zen_mode_button.ts +++ b/app/components/primer/open_project/zen_mode_button.ts @@ -5,21 +5,15 @@ class ZenModeButtonElement extends HTMLElement { @target button: HTMLElement inZenMode = false - // eslint-disable-next-line custom-elements/no-constructor - constructor() { - super() - this.button.addEventListener('click', this.triggerZenMode.bind(this)) - } - - triggerZenMode() { + isZenModeActivated() { // Create a new custom event const event = new CustomEvent('toggleZenMode', { detail: { - active: !this.inZenMode, + active: this.inZenMode, }, }) // Dispatch the custom event - window.dispatchEvent(event) + this.button.dispatchEvent(event) } private deactivateZenMode() { @@ -44,6 +38,7 @@ class ZenModeButtonElement extends HTMLElement { } else { this.activateZenMode() } + this.isZenModeActivated() } } From 2cc6cb769bd2669b216e883b4ab4e00b159fa35d Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Thu, 24 Oct 2024 11:06:23 +0200 Subject: [PATCH 5/5] change method name and dispatch event form window --- app/components/primer/open_project/zen_mode_button.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/components/primer/open_project/zen_mode_button.ts b/app/components/primer/open_project/zen_mode_button.ts index da064f14c4..0f0bb548bc 100644 --- a/app/components/primer/open_project/zen_mode_button.ts +++ b/app/components/primer/open_project/zen_mode_button.ts @@ -5,15 +5,15 @@ class ZenModeButtonElement extends HTMLElement { @target button: HTMLElement inZenMode = false - isZenModeActivated() { + dispatchZenModeStatus() { // Create a new custom event - const event = new CustomEvent('toggleZenMode', { + const event = new CustomEvent('zenModeToggled', { detail: { active: this.inZenMode, }, }) // Dispatch the custom event - this.button.dispatchEvent(event) + window.dispatchEvent(event) } private deactivateZenMode() { @@ -38,7 +38,7 @@ class ZenModeButtonElement extends HTMLElement { } else { this.activateZenMode() } - this.isZenModeActivated() + this.dispatchZenModeStatus() } }