@openproject/primer-view-components 0.48.1 → 0.48.2-rc.70f892e5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/assets/javascripts/app/components/primer/open_project/zen_mode_button.d.ts +4 -0
- package/app/assets/javascripts/primer_view_components.js +1 -1
- package/app/assets/javascripts/primer_view_components.js.map +1 -1
- package/app/components/primer/open_project/zen_mode_button.d.ts +4 -0
- package/app/components/primer/open_project/zen_mode_button.js +14 -6
- package/package.json +1 -1
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
declare class ZenModeButtonElement extends HTMLElement {
|
|
2
2
|
button: HTMLElement;
|
|
3
3
|
inZenMode: boolean;
|
|
4
|
+
constructor();
|
|
5
|
+
disconnectedCallback(): void;
|
|
6
|
+
fullscreenChangeEventHandler(): void;
|
|
4
7
|
dispatchZenModeStatus(): void;
|
|
5
8
|
private deactivateZenMode;
|
|
6
9
|
private activateZenMode;
|
|
10
|
+
changeButtonState(inZenMode: boolean): void;
|
|
7
11
|
performAction(): void;
|
|
8
12
|
}
|
|
9
13
|
declare global {
|
|
@@ -6,9 +6,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { controller, target } from '@github/catalyst';
|
|
8
8
|
let ZenModeButtonElement = class ZenModeButtonElement extends HTMLElement {
|
|
9
|
+
// eslint-disable-next-line custom-elements/no-constructor
|
|
9
10
|
constructor() {
|
|
10
|
-
super(
|
|
11
|
+
super();
|
|
11
12
|
this.inZenMode = false;
|
|
13
|
+
document.addEventListener('fullscreenchange', this.fullscreenChangeEventHandler.bind(this));
|
|
14
|
+
}
|
|
15
|
+
disconnectedCallback() {
|
|
16
|
+
document.removeEventListener('fullscreenchange', this.fullscreenChangeEventHandler.bind(this));
|
|
17
|
+
}
|
|
18
|
+
fullscreenChangeEventHandler() {
|
|
19
|
+
this.changeButtonState(!this.inZenMode);
|
|
20
|
+
this.dispatchZenModeStatus();
|
|
12
21
|
}
|
|
13
22
|
dispatchZenModeStatus() {
|
|
14
23
|
// Create a new custom event
|
|
@@ -21,19 +30,19 @@ let ZenModeButtonElement = class ZenModeButtonElement extends HTMLElement {
|
|
|
21
30
|
window.dispatchEvent(event);
|
|
22
31
|
}
|
|
23
32
|
deactivateZenMode() {
|
|
24
|
-
this.inZenMode = false;
|
|
25
|
-
this.button.setAttribute('aria-pressed', 'false');
|
|
26
33
|
if (document.exitFullscreen) {
|
|
27
34
|
void document.exitFullscreen();
|
|
28
35
|
}
|
|
29
36
|
}
|
|
30
37
|
activateZenMode() {
|
|
31
|
-
this.inZenMode = true;
|
|
32
|
-
this.button.setAttribute('aria-pressed', 'true');
|
|
33
38
|
if (document.documentElement.requestFullscreen) {
|
|
34
39
|
void document.documentElement.requestFullscreen();
|
|
35
40
|
}
|
|
36
41
|
}
|
|
42
|
+
changeButtonState(inZenMode) {
|
|
43
|
+
this.inZenMode = inZenMode;
|
|
44
|
+
this.button.setAttribute('aria-pressed', inZenMode.toString());
|
|
45
|
+
}
|
|
37
46
|
performAction() {
|
|
38
47
|
if (this.inZenMode) {
|
|
39
48
|
this.deactivateZenMode();
|
|
@@ -41,7 +50,6 @@ let ZenModeButtonElement = class ZenModeButtonElement extends HTMLElement {
|
|
|
41
50
|
else {
|
|
42
51
|
this.activateZenMode();
|
|
43
52
|
}
|
|
44
|
-
this.dispatchZenModeStatus();
|
|
45
53
|
}
|
|
46
54
|
};
|
|
47
55
|
__decorate([
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openproject/primer-view-components",
|
|
3
|
-
"version": "0.48.
|
|
3
|
+
"version": "0.48.2-rc.70f892e5",
|
|
4
4
|
"description": "ViewComponents of the Primer Design System for OpenProject",
|
|
5
5
|
"main": "app/assets/javascripts/primer_view_components.js",
|
|
6
6
|
"module": "app/components/primer/primer.js",
|