@cocreate/fullscreen 1.12.0 → 1.12.2

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.
Files changed (4) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/package.json +1 -1
  3. package/src/index.css +7 -7
  4. package/src/index.js +76 -83
package/CHANGELOG.md CHANGED
@@ -1,3 +1,18 @@
1
+ ## [1.12.2](https://github.com/CoCreate-app/CoCreate-fullscreen/compare/v1.12.1...v1.12.2) (2025-04-11)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * css syntax ([c3614dc](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/c3614dcefc3e16952a1eb2b1d3a7ee791b125085))
7
+ * update observer observe param to type and and attributeName to attributeFilter ([c65c03e](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/c65c03e57370b3c7738ff2d8006cc5da5d3d1c83))
8
+
9
+ ## [1.12.1](https://github.com/CoCreate-app/CoCreate-fullscreen/compare/v1.12.0...v1.12.1) (2024-12-14)
10
+
11
+
12
+ ### Bug Fixes
13
+
14
+ * default target is documentElement ([df0cdd8](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/df0cdd8503d2bb3af59fb01496d551000ffd0dac))
15
+
1
16
  # [1.12.0](https://github.com/CoCreate-app/CoCreate-fullscreen/compare/v1.11.2...v1.12.0) (2024-11-04)
2
17
 
3
18
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/fullscreen",
3
- "version": "1.12.0",
3
+ "version": "1.12.2",
4
4
  "description": "Toggle any html element to view in fullscreen mode. Easy configuration and targeting using the fullscreen and target attribute.",
5
5
  "keywords": [
6
6
  "fullscreen",
package/src/index.css CHANGED
@@ -1,13 +1,13 @@
1
- a[fullscreen] i:last-child {
2
- display: none
1
+ [fullscreen] i:last-child {
2
+ display: none;
3
3
  }
4
- a[fullscreen=true] i:first-child {
5
- display: none
4
+ [fullscreen="true"] i:first-child {
5
+ display: none;
6
6
  }
7
- a[fullscreen=true] i:last-child {
8
- display: unset
7
+ [fullscreen="true"] i:last-child {
8
+ display: unset;
9
9
  }
10
10
 
11
11
  :not(:root):fullscreen::backdrop {
12
- background: none;
12
+ background: none;
13
13
  }
package/src/index.js CHANGED
@@ -1,106 +1,99 @@
1
1
  /*!
2
- * https://cocreate.app
3
- * https://github.com/CoCreate-app/Fullscreen_Toggle
4
- * Released under the MIT license
5
- * https://github.com/CoCreate-app/Fullscreen_Toggle/blob/master/LICENSE
6
- */
7
- import observer from '@cocreate/observer';
8
- import { queryElements } from '@cocreate/utils';
9
- import './index.css';
2
+ * https://cocreate.app
3
+ * https://github.com/CoCreate-app/Fullscreen_Toggle
4
+ * Released under the MIT license
5
+ * https://github.com/CoCreate-app/Fullscreen_Toggle/blob/master/LICENSE
6
+ */
7
+ import observer from "@cocreate/observer";
8
+ import { queryElements } from "@cocreate/utils";
9
+ import "./index.css";
10
10
 
11
11
  function init() {
12
- let elements = document.querySelectorAll('[fullscreen]');
13
- initElements(elements)
12
+ let elements = document.querySelectorAll("[fullscreen]");
13
+ initElements(elements);
14
14
  }
15
15
 
16
16
  function initElements(elements) {
17
- for (let element of elements) {
18
- element.addEventListener("click", function (event) {
19
- let isFullscreen = element.getAttribute('fullscreen')
20
- if (!isFullscreen || isFullscreen === 'false') {
21
- let target = queryElements({ element, prefix: 'fullscreen' })
17
+ for (let element of elements) {
18
+ element.addEventListener("click", function (event) {
19
+ let isFullscreen = element.getAttribute("fullscreen");
20
+ if (!isFullscreen || isFullscreen === "false") {
21
+ let target = queryElements({ element, prefix: "fullscreen" });
22
22
 
23
- // TODO: support array?
24
- if (target === false)
25
- target = document.body
26
- else
27
- target = target[0]
23
+ // TODO: support array?
24
+ if (target === false) target = document.documentElement;
25
+ else target = target[0];
28
26
 
29
- if (target) {
30
- element.setAttribute('fullscreen', true)
31
- requestFullscreen(target);
32
- }
33
- } else {
34
- element.setAttribute('fullscreen', false)
35
- exitFullscreen();
36
- }
37
- });
38
- }
27
+ if (target) {
28
+ element.setAttribute("fullscreen", true);
29
+ requestFullscreen(target);
30
+ }
31
+ } else {
32
+ element.setAttribute("fullscreen", false);
33
+ exitFullscreen();
34
+ }
35
+ });
36
+ }
39
37
  }
40
38
 
41
- document.addEventListener('fullscreenchange', (event) => {
42
- if (document.fullscreenElement == null) {
43
- let elements = document.querySelectorAll('[fullscreen="true"]');
44
- elements.forEach(elem => {
45
- elem.setAttribute('fullscreen', false)
46
- });
47
- }
48
-
39
+ document.addEventListener("fullscreenchange", (event) => {
40
+ if (document.fullscreenElement == null) {
41
+ let elements = document.querySelectorAll('[fullscreen="true"]');
42
+ elements.forEach((elem) => {
43
+ elem.setAttribute("fullscreen", false);
44
+ });
45
+ }
49
46
  });
50
47
 
51
48
  function requestFullscreen(element) {
52
- if (!document.fullscreenElement) {
53
- if (element.requestFullscreen) {
54
- element.requestFullscreen();
55
- } else if (element.webkitRequestFullscreen) {
56
- element.webkitRequestFullscreen();
57
- } else if (element.mozRequestFullScreen) {
58
- element.mozRequestFullScreen();
59
- } else if (element.msRequestFullscreen) {
60
- element.msRequestFullscreen();
61
- } else {
62
- console.log('Fullscreen API is not supported.');
63
- }
64
- }
65
- };
49
+ if (!document.fullscreenElement) {
50
+ if (element.requestFullscreen) {
51
+ element.requestFullscreen();
52
+ } else if (element.webkitRequestFullscreen) {
53
+ element.webkitRequestFullscreen();
54
+ } else if (element.mozRequestFullScreen) {
55
+ element.mozRequestFullScreen();
56
+ } else if (element.msRequestFullscreen) {
57
+ element.msRequestFullscreen();
58
+ } else {
59
+ console.log("Fullscreen API is not supported.");
60
+ }
61
+ }
62
+ }
66
63
 
67
64
  function exitFullscreen() {
68
- if (document.fullscreenElement) {
69
- if (document.exitFullscreen) {
70
- document.exitFullscreen();
71
- } else if (document.webkitExitFullscreen) {
72
- document.webkitExitFullscreen();
73
- } else if (document.mozCancelFullScreen) {
74
- document.mozCancelFullScreen();
75
- } else if (document.msExitFullscreen) {
76
- document.msExitFullscreen();
77
- } else {
78
- console.log('Fullscreen API is not supported.');
79
- }
80
- }
81
- };
82
-
65
+ if (document.fullscreenElement) {
66
+ if (document.exitFullscreen) {
67
+ document.exitFullscreen();
68
+ } else if (document.webkitExitFullscreen) {
69
+ document.webkitExitFullscreen();
70
+ } else if (document.mozCancelFullScreen) {
71
+ document.mozCancelFullScreen();
72
+ } else if (document.msExitFullscreen) {
73
+ document.msExitFullscreen();
74
+ } else {
75
+ console.log("Fullscreen API is not supported.");
76
+ }
77
+ }
78
+ }
83
79
 
84
80
  observer.init({
85
- name: 'CoCreateFullscreen',
86
- observe: ['addedNodes'],
87
- selector: '[fullscreen]',
88
- callback: mutation =>
89
- initElements([mutation.target])
81
+ name: "CoCreateFullscreen",
82
+ types: ["addedNodes"],
83
+ selector: "[fullscreen]",
84
+ callback: (mutation) => initElements([mutation.target])
90
85
  });
91
86
 
92
87
  observer.init({
93
- name: 'CoCreateFullscreen',
94
- observe: ['attributes'],
95
- attributeName: ['fullscreen'],
96
- selector: '[fullscreen]',
97
- callback: mutation => {
98
- if (mutation.oldValue === null)
99
- initElements([mutation.target])
100
- }
88
+ name: "CoCreateFullscreen",
89
+ types: ["attributes"],
90
+ attributeFilter: ["fullscreen"],
91
+ selector: "[fullscreen]",
92
+ callback: (mutation) => {
93
+ if (mutation.oldValue === null) initElements([mutation.target]);
94
+ }
101
95
  });
102
96
 
97
+ init();
103
98
 
104
- init()
105
-
106
- export default { requestFullscreen, exitFullscreen }
99
+ export default { requestFullscreen, exitFullscreen };