openproject-primer_view_components 0.48.1 → 0.48.2

data/app/components/primer/open_project/zen_mode_button.d.ts

@@ -1,9 +1,13 @@
 declare class ZenModeButtonElement extends HTMLElement {
     button: HTMLElement;
     inZenMode: boolean;
+    constructor();
+    disconnectedCallback(): void;
+    fullscreenChangeEventHandler(): void;
     dispatchZenModeStatus(): void;
     private deactivateZenMode;
     private activateZenMode;
+    changeButtonState(inZenMode: boolean): void;
     performAction(): void;
 }
 declare global {

data/app/components/primer/open_project/zen_mode_button.js

@@ -6,9 +6,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { controller, target } from '@github/catalyst';
 let ZenModeButtonElement = class ZenModeButtonElement extends HTMLElement {
+    // eslint-disable-next-line custom-elements/no-constructor
     constructor() {
-        super(...arguments);
+        super();
         this.inZenMode = false;
+        document.addEventListener('fullscreenchange', this.fullscreenChangeEventHandler.bind(this));
+    }
+    disconnectedCallback() {
+        document.removeEventListener('fullscreenchange', this.fullscreenChangeEventHandler.bind(this));
+    }
+    fullscreenChangeEventHandler() {
+        this.changeButtonState(!this.inZenMode);
+        this.dispatchZenModeStatus();
     }
     dispatchZenModeStatus() {
         // Create a new custom event
@@ -21,19 +30,19 @@ let ZenModeButtonElement = class ZenModeButtonElement extends HTMLElement {
         window.dispatchEvent(event);
     }
     deactivateZenMode() {
-        this.inZenMode = false;
-        this.button.setAttribute('aria-pressed', 'false');
         if (document.exitFullscreen) {
             void document.exitFullscreen();
         }
     }
     activateZenMode() {
-        this.inZenMode = true;
-        this.button.setAttribute('aria-pressed', 'true');
         if (document.documentElement.requestFullscreen) {
             void document.documentElement.requestFullscreen();
         }
     }
+    changeButtonState(inZenMode) {
+        this.inZenMode = inZenMode;
+        this.button.setAttribute('aria-pressed', inZenMode.toString());
+    }
     performAction() {
         if (this.inZenMode) {
             this.deactivateZenMode();
@@ -41,7 +50,6 @@ let ZenModeButtonElement = class ZenModeButtonElement extends HTMLElement {
         else {
             this.activateZenMode();
         }
-        this.dispatchZenModeStatus();
     }
 };
 __decorate([

data/app/components/primer/open_project/zen_mode_button.ts

@@ -5,6 +5,20 @@ class ZenModeButtonElement extends HTMLElement {
   @target button: HTMLElement
   inZenMode = false
 
+  // eslint-disable-next-line custom-elements/no-constructor
+  constructor() {
+    super()
+    document.addEventListener('fullscreenchange', this.fullscreenChangeEventHandler.bind(this))
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('fullscreenchange', this.fullscreenChangeEventHandler.bind(this))
+  }
+
+  fullscreenChangeEventHandler() {
+    this.changeButtonState(!this.inZenMode)
+    this.dispatchZenModeStatus()
+  }
   dispatchZenModeStatus() {
     // Create a new custom event
     const event = new CustomEvent('zenModeToggled', {
@@ -17,20 +31,20 @@ class ZenModeButtonElement extends HTMLElement {
   }
 
   private deactivateZenMode() {
-    this.inZenMode = false
-    this.button.setAttribute('aria-pressed', 'false')
     if (document.exitFullscreen) {
       void document.exitFullscreen()
     }
   }
 
   private activateZenMode() {
-    this.inZenMode = true
-    this.button.setAttribute('aria-pressed', 'true')
     if (document.documentElement.requestFullscreen) {
       void document.documentElement.requestFullscreen()
     }
   }
+  public changeButtonState(inZenMode: boolean) {
+    this.inZenMode = inZenMode
+    this.button.setAttribute('aria-pressed', inZenMode.toString())
+  }
 
   public performAction() {
     if (this.inZenMode) {
@@ -38,7 +52,6 @@ class ZenModeButtonElement extends HTMLElement {
     } else {
       this.activateZenMode()
     }
-    this.dispatchZenModeStatus()
   }
 }
 

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 48
-      PATCH = 1
+      PATCH = 2
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.48.1
+  version: 0.48.2
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-10-24 00:00:00.000000000 Z
+date: 2024-10-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview