openproject-primer_view_components 0.48.0 → 0.48.2

data/app/components/primer/open_project/page_header/title.rb

@@ -11,7 +11,7 @@ module Primer
         HEADING_TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
         HEADING_TAG_FALLBACK = :h1
 
-        renders_one :editable_form, lambda { |model: nil, update_path:, cancel_path:, input_name: :title, method: :put, label: I18n.t(:label_title), placeholder: I18n.t(:label_title), **system_arguments|
+        renders_one :editable_form, lambda { |model: false, update_path:, cancel_path:, input_name: :title, method: :put, label: I18n.t(:label_title), placeholder: I18n.t(:label_title), **system_arguments|
           primer_form_with(
             model: model,
             method: method,

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

@@ -1,8 +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,24 +6,43 @@ 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
+        const event = new CustomEvent('zenModeToggled', {
+            detail: {
+                active: this.inZenMode,
+            },
+        });
+        // Dispatch the custom event
+        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();

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

@@ -5,21 +5,46 @@ 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', {
+      detail: {
+        active: this.inZenMode,
+      },
+    })
+    // Dispatch the custom event
+    window.dispatchEvent(event)
+  }
+
   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) {

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 48
-      PATCH = 0
+      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.0
+  version: 0.48.2
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-10-08 00:00:00.000000000 Z
+date: 2024-10-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview