@cocreate/fullscreen 1.12.2 → 1.12.4

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/CHANGELOG.md CHANGED
@@ -1,3 +1,20 @@
1
+ ## [1.12.4](https://github.com/CoCreate-app/CoCreate-fullscreen/compare/v1.12.3...v1.12.4) (2025-05-01)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * update [@cocreate](https://github.com/cocreate) dependencies ([6e0a5b4](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/6e0a5b4c84e1c44624671e7c881919bfcc895bc6))
7
+
8
+ ## [1.12.3](https://github.com/CoCreate-app/CoCreate-fullscreen/compare/v1.12.2...v1.12.3) (2025-04-30)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * added css-loader ([03faf0b](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/03faf0bcc78f1a90008d1e65cef9afa280bcd3fd))
14
+ * update query attributes ([bd2b321](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/bd2b32114e1b48e3b496240ace12746250d0ebfc))
15
+ * updated cocreate modules versions ([af9ab98](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/af9ab9868f61afc732c2d80c1880dcc946fba41a))
16
+ * webpack.config and devdependencies ([707b619](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/707b619481f75026e59700f39d9a797de9663676))
17
+
1
18
  ## [1.12.2](https://github.com/CoCreate-app/CoCreate-fullscreen/compare/v1.12.1...v1.12.2) (2025-04-11)
2
19
 
3
20
 
package/demo/index.html CHANGED
@@ -1,155 +1,155 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
- <head>
4
- <title>Full screen | CoCreateJS</title>
5
- <!-- CoCreate Favicon -->
6
- <link
7
- rel="icon"
8
- type="image/png"
9
- sizes="32x32"
10
- href="../assets/favicon.ico" />
11
- <link rel="stylesheet" href="index.css" type="text/css" />
12
- <link rel="manifest" href="/manifest.webmanifest" />
13
- </head>
3
+ <head>
4
+ <title>Full screen | CoCreateJS</title>
5
+ <!-- CoCreate Favicon -->
6
+ <link
7
+ rel="icon"
8
+ type="image/png"
9
+ sizes="32x32"
10
+ href="../assets/favicon.ico" />
11
+ <link rel="stylesheet" href="index.css" type="text/css" />
12
+ <link rel="manifest" href="/manifest.webmanifest" />
13
+ </head>
14
14
 
15
- <body>
16
- <div id="page-wrapper">
17
- <h1>Fullscreen API Demo</h1>
15
+ <body>
16
+ <div id="page-wrapper">
17
+ <h1>Fullscreen API Demo</h1>
18
18
 
19
- <section>
20
- <h2>Only Target</h2>
21
- <button fullscreen>self</button>
22
- <button fullscreen fullscreen-selector="#example2">
23
- Target #example2
24
- </button>
25
- <button fullscreen fullscreen-closest="section">
26
- closest #example2
27
- </button>
28
- <button fullscreen fullscreen-next="#example2">
29
- next #example2
30
- </button>
31
- <button fullscreen fullscreen-previous="#example2">
32
- previous #example2
33
- </button>
34
- </section>
19
+ <section>
20
+ <h2>Only Target</h2>
21
+ <button fullscreen>self</button>
22
+ <button fullscreen fullscreen-query="#example2">
23
+ Target #example2
24
+ </button>
25
+ <button fullscreen fullscreen-query="$closest section">
26
+ closest #example2
27
+ </button>
28
+ <button fullscreen fullscreen-query="$next #example2">
29
+ next #example2
30
+ </button>
31
+ <button fullscreen fullscreen-query="$previous #example2">
32
+ previous #example2
33
+ </button>
34
+ </section>
35
35
 
36
- <section>
37
- <div id="example2" class="box">
38
- <h2>#exemple2</h2>
36
+ <section>
37
+ <div id="example2" class="box">
38
+ <h2>#exemple2</h2>
39
39
 
40
- <p>
41
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
42
- Sed commodo tempus leo, in tristique nibh cursus vitae.
43
- Praesent vel dignissim mauris, sit amet scelerisque est.
44
- Praesent sit amet auctor dui. Duis at urna ipsum. Proin
45
- convallis orci facilisis, pellentesque metus eget,
46
- consectetur est. Donec ultricies elit id dolor
47
- fermentum, eget malesuada nunc vehicula. Duis fringilla
48
- urna eget libero luctus, id vehicula mi hendrerit.
49
- Vestibulum id ultricies dolor. In mollis, libero id
50
- venenatis pretium, libero orci luctus nisl, et rhoncus
51
- sem erat sed orci. Donec vitae volutpat orci.
52
- </p>
40
+ <p>
41
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
42
+ Sed commodo tempus leo, in tristique nibh cursus vitae.
43
+ Praesent vel dignissim mauris, sit amet scelerisque est.
44
+ Praesent sit amet auctor dui. Duis at urna ipsum. Proin
45
+ convallis orci facilisis, pellentesque metus eget,
46
+ consectetur est. Donec ultricies elit id dolor
47
+ fermentum, eget malesuada nunc vehicula. Duis fringilla
48
+ urna eget libero luctus, id vehicula mi hendrerit.
49
+ Vestibulum id ultricies dolor. In mollis, libero id
50
+ venenatis pretium, libero orci luctus nisl, et rhoncus
51
+ sem erat sed orci. Donec vitae volutpat orci.
52
+ </p>
53
53
 
54
- <p>
55
- Aenean mollis lorem turpis, vel pellentesque quam
56
- vestibulum sed. Fusce convallis quis tellus bibendum
57
- maximus. Nunc facilisis eros quis lacus euismod
58
- placerat. Aliquam quis tincidunt massa. Quisque eget
59
- ligula vitae nibh tempus lacinia vel sit amet eros.
60
- Pellentesque interdum erat sed consequat maximus.
61
- Phasellus at viverra massa. In tortor eros, varius
62
- facilisis ligula id, tincidunt maximus elit.
63
- Pellentesque arcu magna, laoreet mollis dignissim et,
64
- condimentum eget nibh. Quisque nec nisi a ligula
65
- volutpat tempus sit amet vitae orci. In congue tellus
66
- risus, eleifend molestie risus condimentum ac.
67
- Vestibulum scelerisque tempor mollis. Integer vulputate
68
- lorem urna, non ornare velit posuere vulputate.
69
- </p>
54
+ <p>
55
+ Aenean mollis lorem turpis, vel pellentesque quam
56
+ vestibulum sed. Fusce convallis quis tellus bibendum
57
+ maximus. Nunc facilisis eros quis lacus euismod
58
+ placerat. Aliquam quis tincidunt massa. Quisque eget
59
+ ligula vitae nibh tempus lacinia vel sit amet eros.
60
+ Pellentesque interdum erat sed consequat maximus.
61
+ Phasellus at viverra massa. In tortor eros, varius
62
+ facilisis ligula id, tincidunt maximus elit.
63
+ Pellentesque arcu magna, laoreet mollis dignissim et,
64
+ condimentum eget nibh. Quisque nec nisi a ligula
65
+ volutpat tempus sit amet vitae orci. In congue tellus
66
+ risus, eleifend molestie risus condimentum ac.
67
+ Vestibulum scelerisque tempor mollis. Integer vulputate
68
+ lorem urna, non ornare velit posuere vulputate.
69
+ </p>
70
70
 
71
- <p>
72
- Etiam massa ex, sagittis vitae lacus quis, fermentum
73
- gravida ipsum. Nullam vitae augue nec nisi congue
74
- pretium. Mauris non scelerisque nibh, non placerat
75
- nulla. Morbi a placerat lectus, eu sodales massa. Nam
76
- vitae bibendum est, sit amet imperdiet ipsum. Curabitur
77
- sagittis finibus ipsum, nec auctor justo tempus quis.
78
- Donec libero diam, pharetra ac nunc eu, ultrices dictum
79
- enim. Interdum et malesuada fames ac ante ipsum primis
80
- in faucibus. Duis viverra consequat pharetra. Donec at
81
- risus turpis. Duis finibus imperdiet ipsum ac tristique.
82
- Nunc a elementum diam, sit amet rutrum tellus. Mauris
83
- urna quam, commodo et bibendum at, sodales in odio.
84
- </p>
71
+ <p>
72
+ Etiam massa ex, sagittis vitae lacus quis, fermentum
73
+ gravida ipsum. Nullam vitae augue nec nisi congue
74
+ pretium. Mauris non scelerisque nibh, non placerat
75
+ nulla. Morbi a placerat lectus, eu sodales massa. Nam
76
+ vitae bibendum est, sit amet imperdiet ipsum. Curabitur
77
+ sagittis finibus ipsum, nec auctor justo tempus quis.
78
+ Donec libero diam, pharetra ac nunc eu, ultrices dictum
79
+ enim. Interdum et malesuada fames ac ante ipsum primis
80
+ in faucibus. Duis viverra consequat pharetra. Donec at
81
+ risus turpis. Duis finibus imperdiet ipsum ac tristique.
82
+ Nunc a elementum diam, sit amet rutrum tellus. Mauris
83
+ urna quam, commodo et bibendum at, sodales in odio.
84
+ </p>
85
85
 
86
- <p>
87
- Sed enim velit, posuere nec lacus vel, malesuada
88
- efficitur turpis. Nulla sed mauris ac elit ornare
89
- tempor. Cras facilisis varius mi sed malesuada.
90
- Vestibulum congue ipsum ac tellus hendrerit, eget cursus
91
- augue tristique. Class aptent taciti sociosqu ad litora
92
- torquent per conubia nostra, per inceptos himenaeos. In
93
- ante felis, tincidunt sed consequat vitae, scelerisque
94
- quis lacus. Nunc imperdiet augue ac elit sodales, eget
95
- ultrices ipsum ultricies. Vestibulum lacinia odio quis
96
- velit commodo eleifend. Nullam justo turpis, fermentum a
97
- laoreet sed, ultrices in metus. Phasellus efficitur
98
- consectetur eros, at sagittis leo tincidunt sagittis.
99
- Duis maximus nibh lobortis, viverra nibh id, interdum
100
- odio. Sed non ullamcorper dolor, sed ultrices magna. Ut
101
- ac sem dignissim, sodales magna eget, tincidunt lectus.
102
- </p>
86
+ <p>
87
+ Sed enim velit, posuere nec lacus vel, malesuada
88
+ efficitur turpis. Nulla sed mauris ac elit ornare
89
+ tempor. Cras facilisis varius mi sed malesuada.
90
+ Vestibulum congue ipsum ac tellus hendrerit, eget cursus
91
+ augue tristique. Class aptent taciti sociosqu ad litora
92
+ torquent per conubia nostra, per inceptos himenaeos. In
93
+ ante felis, tincidunt sed consequat vitae, scelerisque
94
+ quis lacus. Nunc imperdiet augue ac elit sodales, eget
95
+ ultrices ipsum ultricies. Vestibulum lacinia odio quis
96
+ velit commodo eleifend. Nullam justo turpis, fermentum a
97
+ laoreet sed, ultrices in metus. Phasellus efficitur
98
+ consectetur eros, at sagittis leo tincidunt sagittis.
99
+ Duis maximus nibh lobortis, viverra nibh id, interdum
100
+ odio. Sed non ullamcorper dolor, sed ultrices magna. Ut
101
+ ac sem dignissim, sodales magna eget, tincidunt lectus.
102
+ </p>
103
103
 
104
- <p>
105
- Morbi congue, enim et tempor consequat, dolor turpis
106
- commodo mi, vitae tempus velit neque et augue. Proin
107
- eget commodo tortor. In a tortor sagittis, posuere leo
108
- at, volutpat sapien. Maecenas sed euismod odio.
109
- Pellentesque lobortis tellus at congue pharetra.
110
- Curabitur at felis arcu. Pellentesque scelerisque dui
111
- sed euismod vehicula. In fermentum bibendum libero.
112
- Pellentesque malesuada elementum elit. Quisque a urna a
113
- nibh feugiat imperdiet.
114
- </p>
104
+ <p>
105
+ Morbi congue, enim et tempor consequat, dolor turpis
106
+ commodo mi, vitae tempus velit neque et augue. Proin
107
+ eget commodo tortor. In a tortor sagittis, posuere leo
108
+ at, volutpat sapien. Maecenas sed euismod odio.
109
+ Pellentesque lobortis tellus at congue pharetra.
110
+ Curabitur at felis arcu. Pellentesque scelerisque dui
111
+ sed euismod vehicula. In fermentum bibendum libero.
112
+ Pellentesque malesuada elementum elit. Quisque a urna a
113
+ nibh feugiat imperdiet.
114
+ </p>
115
115
 
116
- <p>
117
- Sed enim velit, posuere nec lacus vel, malesuada
118
- efficitur turpis. Nulla sed mauris ac elit ornare
119
- tempor. Cras facilisis varius mi sed malesuada.
120
- Vestibulum congue ipsum ac tellus hendrerit, eget cursus
121
- augue tristique. Class aptent taciti sociosqu ad litora
122
- torquent per conubia nostra, per inceptos himenaeos. In
123
- ante felis, tincidunt sed consequat vitae, scelerisque
124
- quis lacus. Nunc imperdiet augue ac elit sodales, eget
125
- ultrices ipsum ultricies. Vestibulum lacinia odio quis
126
- velit commodo eleifend. Nullam justo turpis, fermentum a
127
- laoreet sed, ultrices in metus. Phasellus efficitur
128
- consectetur eros, at sagittis leo tincidunt sagittis.
129
- Duis maximus nibh lobortis, viverra nibh id, interdum
130
- odio. Sed non ullamcorper dolor, sed ultrices magna. Ut
131
- ac sem dignissim, sodales magna eget, tincidunt lectus.
132
- </p>
116
+ <p>
117
+ Sed enim velit, posuere nec lacus vel, malesuada
118
+ efficitur turpis. Nulla sed mauris ac elit ornare
119
+ tempor. Cras facilisis varius mi sed malesuada.
120
+ Vestibulum congue ipsum ac tellus hendrerit, eget cursus
121
+ augue tristique. Class aptent taciti sociosqu ad litora
122
+ torquent per conubia nostra, per inceptos himenaeos. In
123
+ ante felis, tincidunt sed consequat vitae, scelerisque
124
+ quis lacus. Nunc imperdiet augue ac elit sodales, eget
125
+ ultrices ipsum ultricies. Vestibulum lacinia odio quis
126
+ velit commodo eleifend. Nullam justo turpis, fermentum a
127
+ laoreet sed, ultrices in metus. Phasellus efficitur
128
+ consectetur eros, at sagittis leo tincidunt sagittis.
129
+ Duis maximus nibh lobortis, viverra nibh id, interdum
130
+ odio. Sed non ullamcorper dolor, sed ultrices magna. Ut
131
+ ac sem dignissim, sodales magna eget, tincidunt lectus.
132
+ </p>
133
133
 
134
- <p>
135
- Morbi congue, enim et tempor consequat, dolor turpis
136
- commodo mi, vitae tempus velit neque et augue. Proin
137
- eget commodo tortor. In a tortor sagittis, posuere leo
138
- at, volutpat sapien. Maecenas sed euismod odio.
139
- Pellentesque lobortis tellus at congue pharetra.
140
- Curabitur at felis arcu. Pellentesque scelerisque dui
141
- sed euismod vehicula. In fermentum bibendum libero.
142
- Pellentesque malesuada elementum elit. Quisque a urna a
143
- nibh feugiat imperdiet.
144
- </p>
134
+ <p>
135
+ Morbi congue, enim et tempor consequat, dolor turpis
136
+ commodo mi, vitae tempus velit neque et augue. Proin
137
+ eget commodo tortor. In a tortor sagittis, posuere leo
138
+ at, volutpat sapien. Maecenas sed euismod odio.
139
+ Pellentesque lobortis tellus at congue pharetra.
140
+ Curabitur at felis arcu. Pellentesque scelerisque dui
141
+ sed euismod vehicula. In fermentum bibendum libero.
142
+ Pellentesque malesuada elementum elit. Quisque a urna a
143
+ nibh feugiat imperdiet.
144
+ </p>
145
145
 
146
- <button class="fs-exit-page-button">Exit</button>
147
- </div>
148
- </section>
149
- </div>
146
+ <button class="fs-exit-page-button">Exit</button>
147
+ </div>
148
+ </section>
149
+ </div>
150
150
 
151
- <!--<script src="../dist/CoCreate-fullscreen.js"></script>-->
152
- <!-- <script src="../../../CoCreateJS/dist/CoCreate.js"></script> -->
153
- <script src="https://CoCreate.app/dist/CoCreate.js"></script>
154
- </body>
151
+ <!--<script src="../dist/CoCreate-fullscreen.js"></script>-->
152
+ <!-- <script src="../../../CoCreateJS/dist/CoCreate.js"></script> -->
153
+ <script src="https://CoCreate.app/dist/CoCreate.js"></script>
154
+ </body>
155
155
  </html>
package/docs/index.html CHANGED
@@ -1,184 +1,184 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1" />
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
7
7
 
8
- <meta
9
- name="description"
10
- content="A simple HTML5 and pure javascript component. Easy configuration using HTML5 attributes or Javscript api and highly styleable." />
11
- <meta
12
- name="keywords"
13
- content="helper classes, utility classes, css framework, css library, inline style classes" />
14
- <meta name="robots" content="index,follow" />
15
- <meta
16
- property="og:image"
17
- content="https://cdn.cocreate.app/docs/fullscreen.png" />
8
+ <meta
9
+ name="description"
10
+ content="A simple HTML5 and pure javascript component. Easy configuration using HTML5 attributes or Javscript api and highly styleable." />
11
+ <meta
12
+ name="keywords"
13
+ content="helper classes, utility classes, css framework, css library, inline style classes" />
14
+ <meta name="robots" content="index,follow" />
15
+ <meta
16
+ property="og:image"
17
+ content="https://cdn.cocreate.app/docs/fullscreen.png" />
18
18
 
19
- <title>CoCreate-fullscreen Documentation | CoCreateJS</title>
19
+ <title>CoCreate-fullscreen Documentation | CoCreateJS</title>
20
20
 
21
- <!-- CoCreate Favicon -->
22
- <link
23
- rel="icon"
24
- type="image/png"
25
- sizes="32x32"
26
- href="https://cocreate.app/images/favicon.ico" />
27
- <link
28
- rel="stylesheet"
29
- href="../index.css"
30
- array="files"
31
- object="60888216117c640e7596303f"
32
- key="src"
33
- type="text/css"
34
- save="true" />
35
- <link rel="manifest" href="/manifest.webmanifest" />
36
- </head>
21
+ <!-- CoCreate Favicon -->
22
+ <link
23
+ rel="icon"
24
+ type="image/png"
25
+ sizes="32x32"
26
+ href="https://cocreate.app/images/favicon.ico" />
27
+ <link
28
+ rel="stylesheet"
29
+ href="../index.css"
30
+ array="files"
31
+ object="60888216117c640e7596303f"
32
+ key="src"
33
+ type="text/css"
34
+ save="true" />
35
+ <link rel="manifest" href="/manifest.webmanifest" />
36
+ </head>
37
37
 
38
- <body>
39
- <!-- Navbar -->
40
- <nav
41
- class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px"
42
- content_id="content"
43
- scroll="sticky-nav,"
44
- scroll-up="5"
45
- scroll-down="5"
46
- path="../"
47
- src="../components/navbar.html"></nav>
48
- <sidenav
49
- id="menuL"
50
- class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
51
- resizable
52
- resize-selector="[content_id='content']"
53
- resize-property="margin-left"
54
- resize-value="width">
55
- <menu
56
- array="files"
57
- object="603717b07de7fb350ae9fec8"
58
- key="src"></menu>
59
- <div resize="right"></div>
60
- </sidenav>
61
- <main
62
- class="padding-top:15px padding:15px@lg@xl"
63
- content_id="content"
64
- id="cocreate-fullscreen">
65
- <div
66
- class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
67
- <div class="display:flex align-items:center">
68
- <h2>CoCreate-fullscreen</h2>
69
- </div>
70
- <div
71
- class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
72
- <div
73
- class="display:flex align-items:center transition:0.3s padding-left:10px"
74
- share-network="true"
75
- share-text="Toggle any html element to view in fullscreen mode. Easy configuration and targeting using the fullscreen and target attribute."
76
- share-title="CoCreate Fullscreen"
77
- share-height="600"
78
- share-width="700"
79
- share-media="https://cdn.cocreate.app/docs/fullscreen.png"
80
- hover="display:block!important"
81
- hover-selector=".social-networks">
82
- <div class="display:none social-networks">
83
- <a
84
- class="margin-right:15px"
85
- share-network="twitter"
86
- title="Share on twitter"
87
- ><i src="/assets/svg/twitter.svg"></i
88
- ></a>
89
- <a
90
- class="margin-right:15px"
91
- share-network="facebook"
92
- title="Share on Facebook"
93
- ><i src="/assets/svg/facebook.svg"></i
94
- ></a>
95
- <a
96
- class="margin-right:15px"
97
- share-network="instagram"
98
- title="Share on instagram"
99
- ><i src="/assets/svg/instagram.svg"></i
100
- ></a>
101
- </div>
102
- <a
103
- class="margin-right:15px"
104
- share-network="share"
105
- title="Share on share"
106
- ><i src="/assets/svg/share-alt.svg"></i
107
- ></a>
108
- </div>
109
- <a
110
- class="margin-right:15px"
111
- share-network="share"
112
- title="Share on share"
113
- ><i src="/assets/svg/share-alt.svg"></i
114
- ></a>
115
- </div>
116
- <a
117
- href="https://github.com/CoCreate-app/CoCreate-fullscreen"
118
- target="_blank"
119
- class="margin-right:15px"
120
- ><i src="/assets/svg/github.svg"></i
121
- ></a>
122
- </div>
38
+ <body>
39
+ <!-- Navbar -->
40
+ <nav
41
+ class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px"
42
+ content_id="content"
43
+ scroll="sticky-nav,"
44
+ scroll-up="5"
45
+ scroll-down="5"
46
+ path="../"
47
+ src="../components/navbar.html"></nav>
48
+ <sidenav
49
+ id="menuL"
50
+ class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
51
+ resizable
52
+ resize-query="[content_id='content']"
53
+ resize-property="margin-left"
54
+ resize-value="width">
55
+ <menu
56
+ array="files"
57
+ object="603717b07de7fb350ae9fec8"
58
+ key="src"></menu>
59
+ <div resize="right"></div>
60
+ </sidenav>
61
+ <main
62
+ class="padding-top:15px padding:15px@lg@xl"
63
+ content_id="content"
64
+ id="cocreate-fullscreen">
65
+ <div
66
+ class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
67
+ <div class="display:flex align-items:center">
68
+ <h2>CoCreate-fullscreen</h2>
69
+ </div>
70
+ <div
71
+ class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
72
+ <div
73
+ class="display:flex align-items:center transition:0.3s padding-left:10px"
74
+ share-network="true"
75
+ share-text="Toggle any html element to view in fullscreen mode. Easy configuration and targeting using the fullscreen and target attribute."
76
+ share-title="CoCreate Fullscreen"
77
+ share-height="600"
78
+ share-width="700"
79
+ share-media="https://cdn.cocreate.app/docs/fullscreen.png"
80
+ hover="display:block!important"
81
+ hover-query=".social-networks">
82
+ <div class="display:none social-networks">
83
+ <a
84
+ class="margin-right:15px"
85
+ share-network="twitter"
86
+ title="Share on twitter"
87
+ ><i src="/assets/svg/twitter.svg"></i
88
+ ></a>
89
+ <a
90
+ class="margin-right:15px"
91
+ share-network="facebook"
92
+ title="Share on Facebook"
93
+ ><i src="/assets/svg/facebook.svg"></i
94
+ ></a>
95
+ <a
96
+ class="margin-right:15px"
97
+ share-network="instagram"
98
+ title="Share on instagram"
99
+ ><i src="/assets/svg/instagram.svg"></i
100
+ ></a>
101
+ </div>
102
+ <a
103
+ class="margin-right:15px"
104
+ share-network="share"
105
+ title="Share on share"
106
+ ><i src="/assets/svg/share-alt.svg"></i
107
+ ></a>
108
+ </div>
109
+ <a
110
+ class="margin-right:15px"
111
+ share-network="share"
112
+ title="Share on share"
113
+ ><i src="/assets/svg/share-alt.svg"></i
114
+ ></a>
115
+ </div>
116
+ <a
117
+ href="https://github.com/CoCreate-app/CoCreate-fullscreen"
118
+ target="_blank"
119
+ class="margin-right:15px"
120
+ ><i src="/assets/svg/github.svg"></i
121
+ ></a>
122
+ </div>
123
123
 
124
- <h1
125
- class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">
126
- Toggle any html element to view in fullscreen mode. Easy
127
- configuration and targeting using the fullscreen and target
128
- attribute.
129
- </h1>
130
- <div id="fullscreen-section" class="display:flex flex-wrap:wrap">
131
- <div
132
- class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
133
- <div
134
- id="fullscreen-install"
135
- class="border-bottom:1px_solid_lightgrey"
136
- scroll
137
- scroll-intersect="color:dodgerblue"
138
- scroll-selector="#fullscreen-install-section">
139
- <span
140
- class="display:flex align-items:center width:fit-content"
141
- hover="display:block!important"
142
- hover-selector="[href='#fullscreen-install']">
143
- <h2 class="padding:5px_0px">Install</h2>
144
- <a
145
- class="margin-left:10px display:none"
146
- href="#fullscreen-install"
147
- ><i src="/assets/svg/link.svg"></i
148
- ></a>
149
- </span>
150
- </div>
151
- <pre><code class="language-bash">npm i @cocreate/fullscreen</code></pre>
152
- <p class="padding:10px_0px line-height:1.5">
153
- Or you can use cdn link:
154
- </p>
155
- <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/fullscreen/latest/CoCreate-fullscreen.min.js&lt;/script&gt;</code></pre>
124
+ <h1
125
+ class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">
126
+ Toggle any html element to view in fullscreen mode. Easy
127
+ configuration and targeting using the fullscreen and target
128
+ attribute.
129
+ </h1>
130
+ <div id="fullscreen-section" class="display:flex flex-wrap:wrap">
131
+ <div
132
+ class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
133
+ <div
134
+ id="fullscreen-install"
135
+ class="border-bottom:1px_solid_lightgrey"
136
+ scroll
137
+ scroll-intersect="color:dodgerblue"
138
+ scroll-query="#fullscreen-install-section">
139
+ <span
140
+ class="display:flex align-items:center width:fit-content"
141
+ hover="display:block!important"
142
+ hover-query="[href='#fullscreen-install']">
143
+ <h2 class="padding:5px_0px">Install</h2>
144
+ <a
145
+ class="margin-left:10px display:none"
146
+ href="#fullscreen-install"
147
+ ><i src="/assets/svg/link.svg"></i
148
+ ></a>
149
+ </span>
150
+ </div>
151
+ <pre><code class="language-bash">npm i @cocreate/fullscreen</code></pre>
152
+ <p class="padding:10px_0px line-height:1.5">
153
+ Or you can use cdn link:
154
+ </p>
155
+ <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/fullscreen/latest/CoCreate-fullscreen.min.js&lt;/script&gt;</code></pre>
156
156
 
157
- <div
158
- id="fullscreen-usage"
159
- class="margin-top:80px border-bottom:1px_solid_lightgrey"
160
- scroll
161
- scroll-intersect="color:dodgerblue"
162
- scroll-selector="#fullscreen-usage-section">
163
- <span
164
- class="display:flex align-items:center width:fit-content"
165
- hover="display:block!important"
166
- hover-selector="[href='#fullscreen-usage']">
167
- <h2 class="padding:5px_0px">Usage</h2>
168
- <a
169
- class="margin-left:10px display:none"
170
- href="#fullscreen-usage"
171
- ><i src="/assets/svg/link.svg"></i
172
- ></a>
173
- </span>
174
- </div>
175
- <div class="">
176
- <p class="padding:10px_0px line-height:1.5">
177
- This is fullscreen usage
178
- </p>
157
+ <div
158
+ id="fullscreen-usage"
159
+ class="margin-top:80px border-bottom:1px_solid_lightgrey"
160
+ scroll
161
+ scroll-intersect="color:dodgerblue"
162
+ scroll-query="#fullscreen-usage-section">
163
+ <span
164
+ class="display:flex align-items:center width:fit-content"
165
+ hover="display:block!important"
166
+ hover-query="[href='#fullscreen-usage']">
167
+ <h2 class="padding:5px_0px">Usage</h2>
168
+ <a
169
+ class="margin-left:10px display:none"
170
+ href="#fullscreen-usage"
171
+ ><i src="/assets/svg/link.svg"></i
172
+ ></a>
173
+ </span>
174
+ </div>
175
+ <div class="">
176
+ <p class="padding:10px_0px line-height:1.5">
177
+ This is fullscreen usage
178
+ </p>
179
179
 
180
- <div class="flex-grow:1 min-width:300px width:100%">
181
- <pre>
180
+ <div class="flex-grow:1 min-width:300px width:100%">
181
+ <pre>
182
182
  <code class="language-js">
183
183
  &lt;style type=&quot;text/css&quot;&gt;
184
184
  #example2{
@@ -200,149 +200,149 @@
200
200
  &lt;/section&gt;
201
201
  </code>
202
202
  </pre>
203
- </div>
204
- <p class="padding:10px_0px line-height:1.5">
205
- This is fullscreen usage
206
- </p>
207
- </div>
208
- <div
209
- id="fullscreen-attributes"
210
- class="margin-top:80px border-bottom:1px_solid_lightgrey"
211
- scroll
212
- scroll-intersect="color:dodgerblue"
213
- scroll-selector="#fullscreen-attributes-section">
214
- <span
215
- class="display:flex align-items:center width:fit-content"
216
- hover="display:block!important"
217
- hover-selector="[href='#fullscreen-attributes']">
218
- <h2 class="padding:5px_0px">Attributes</h2>
219
- <a
220
- class="margin-left:10px display:none"
221
- href="#fullscreen-attributes"
222
- ><i src="/assets/svg/link.svg"></i
223
- ></a>
224
- </span>
225
- </div>
226
- <ul class="list-style-type:none">
227
- <li
228
- class="padding:15px_0px border-bottom:1px_solid_lightgrey">
229
- <h4>
230
- <span>fullscreen</span>
231
- <span class="cocreate-badge success"
232
- >boolean</span
233
- >
234
- <span class="cocreate-badge danger"
235
- >required</span
236
- >
237
- </h4>
238
- <p>true</p>
239
- </li>
240
- </ul>
241
- </div>
203
+ </div>
204
+ <p class="padding:10px_0px line-height:1.5">
205
+ This is fullscreen usage
206
+ </p>
207
+ </div>
208
+ <div
209
+ id="fullscreen-attributes"
210
+ class="margin-top:80px border-bottom:1px_solid_lightgrey"
211
+ scroll
212
+ scroll-intersect="color:dodgerblue"
213
+ scroll-query="#fullscreen-attributes-section">
214
+ <span
215
+ class="display:flex align-items:center width:fit-content"
216
+ hover="display:block!important"
217
+ hover-query="[href='#fullscreen-attributes']">
218
+ <h2 class="padding:5px_0px">Attributes</h2>
219
+ <a
220
+ class="margin-left:10px display:none"
221
+ href="#fullscreen-attributes"
222
+ ><i src="/assets/svg/link.svg"></i
223
+ ></a>
224
+ </span>
225
+ </div>
226
+ <ul class="list-style-type:none">
227
+ <li
228
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
229
+ <h4>
230
+ <span>fullscreen</span>
231
+ <span class="cocreate-badge success"
232
+ >boolean</span
233
+ >
234
+ <span class="cocreate-badge danger"
235
+ >required</span
236
+ >
237
+ </h4>
238
+ <p>true</p>
239
+ </li>
240
+ </ul>
241
+ </div>
242
242
 
243
- <div
244
- class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
245
- <!-- SandBox -->
246
- <div
247
- id="fullscreen-demo"
248
- class="border-bottom:1px_solid_lightgrey"
249
- scroll
250
- scroll-intersect="color:dodgerblue"
251
- scroll-selector="#fullscreen-demo-section">
252
- <span
253
- class="display:flex align-items:center width:fit-content"
254
- hover="display:block!important"
255
- hover-selector="[href='#fullscreen-demo']">
256
- <h2 class="padding:5px_0px">Demo</h2>
257
- <a
258
- class="margin-left:10px display:none"
259
- href="#fullscreen-demo"
260
- ><i src="/assets/svg/link.svg"></i
261
- ></a>
262
- </span>
263
- </div>
264
- <div
265
- class="position:sticky top:0 padding:15px_0px height:100vh">
266
- <!-- SandBox -->
267
- <div
268
- class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
269
- id="playground">
270
- <div
271
- id="demo-code"
272
- resizable
273
- class="position:relative height:50%">
274
- <textarea
275
- type="code"
276
- lang="html"
277
- array="demos"
278
- object=""
279
- key="demo"
280
- save="false"
281
- id="demo"
282
- class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
283
- <div
284
- resize="bottom"
285
- class="background:lightgrey"></div>
286
- </div>
243
+ <div
244
+ class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
245
+ <!-- SandBox -->
246
+ <div
247
+ id="fullscreen-demo"
248
+ class="border-bottom:1px_solid_lightgrey"
249
+ scroll
250
+ scroll-intersect="color:dodgerblue"
251
+ scroll-query="#fullscreen-demo-section">
252
+ <span
253
+ class="display:flex align-items:center width:fit-content"
254
+ hover="display:block!important"
255
+ hover-query="[href='#fullscreen-demo']">
256
+ <h2 class="padding:5px_0px">Demo</h2>
257
+ <a
258
+ class="margin-left:10px display:none"
259
+ href="#fullscreen-demo"
260
+ ><i src="/assets/svg/link.svg"></i
261
+ ></a>
262
+ </span>
263
+ </div>
264
+ <div
265
+ class="position:sticky top:0 padding:15px_0px height:100vh">
266
+ <!-- SandBox -->
267
+ <div
268
+ class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
269
+ id="playground">
270
+ <div
271
+ id="demo-code"
272
+ resizable
273
+ class="position:relative height:50%">
274
+ <textarea
275
+ type="code"
276
+ lang="html"
277
+ array="demos"
278
+ object=""
279
+ key="demo"
280
+ save="false"
281
+ id="demo"
282
+ class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
283
+ <div
284
+ resize="bottom"
285
+ class="background:lightgrey"></div>
286
+ </div>
287
287
 
288
- <div
289
- id="demo-preview"
290
- class="position:relative overflow:auto background-color:white">
291
- <div class="demopreview padding:20px"></div>
292
- </div>
288
+ <div
289
+ id="demo-preview"
290
+ class="position:relative overflow:auto background-color:white">
291
+ <div class="demopreview padding:20px"></div>
292
+ </div>
293
293
 
294
- <div
295
- class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
296
- <a
297
- class="margin-right:10px"
298
- id="eye"
299
- show="#eye-slash"
300
- hide="#eye, #demo-preview"
301
- toggle="code-height"
302
- toggle-selector="#demo-code"
303
- ><i
304
- class="height:18px"
305
- src="/assets/svg/eye.svg"></i
306
- ></a>
307
- <a
308
- class="margin-right:10px"
309
- hidden
310
- id="eye-slash"
311
- show="#eye, #demo-preview"
312
- hide="#eye-slash"
313
- toggle="code-height"
314
- toggle-selector="#demo-code"
315
- ><i src="/assets/svg/eye-slash.svg"></i
316
- ></a>
317
- <a
318
- class="margin-right:10px"
319
- id="code"
320
- show="#code-slash"
321
- hide="#code, #demo-code"
322
- ><i src="/assets/svg/code.svg"></i
323
- ></a>
324
- <a
325
- class="margin-right:10px"
326
- hidden
327
- id="code-slash"
328
- show="#code, #demo-code"
329
- hide="#code-slash"
330
- ><i
331
- class="height:18px"
332
- src="/assets/svg/code.svg"></i
333
- ></a>
334
- <a
335
- class="margin-right:5px"
336
- fullscreen
337
- fullscreen-selector="#playground"></a>
338
- </div>
339
- </div>
340
- <!-- End SandBox -->
341
- </div>
342
- </div>
343
- </div>
344
- </main>
294
+ <div
295
+ class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
296
+ <a
297
+ class="margin-right:10px"
298
+ id="eye"
299
+ show="#eye-slash"
300
+ hide="#eye, #demo-preview"
301
+ toggle="code-height"
302
+ toggle-query="#demo-code"
303
+ ><i
304
+ class="height:18px"
305
+ src="/assets/svg/eye.svg"></i
306
+ ></a>
307
+ <a
308
+ class="margin-right:10px"
309
+ hidden
310
+ id="eye-slash"
311
+ show="#eye, #demo-preview"
312
+ hide="#eye-slash"
313
+ toggle="code-height"
314
+ toggle-query="#demo-code"
315
+ ><i src="/assets/svg/eye-slash.svg"></i
316
+ ></a>
317
+ <a
318
+ class="margin-right:10px"
319
+ id="code"
320
+ show="#code-slash"
321
+ hide="#code, #demo-code"
322
+ ><i src="/assets/svg/code.svg"></i
323
+ ></a>
324
+ <a
325
+ class="margin-right:10px"
326
+ hidden
327
+ id="code-slash"
328
+ show="#code, #demo-code"
329
+ hide="#code-slash"
330
+ ><i
331
+ class="height:18px"
332
+ src="/assets/svg/code.svg"></i
333
+ ></a>
334
+ <a
335
+ class="margin-right:5px"
336
+ fullscreen
337
+ fullscreen-query="#playground"></a>
338
+ </div>
339
+ </div>
340
+ <!-- End SandBox -->
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </main>
345
345
 
346
- <script src="https://CoCreate.app/dist/CoCreate.js"></script>
347
- </body>
346
+ <script src="https://CoCreate.app/dist/CoCreate.js"></script>
347
+ </body>
348
348
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/fullscreen",
3
- "version": "1.12.2",
3
+ "version": "1.12.4",
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",
@@ -45,20 +45,16 @@
45
45
  },
46
46
  "main": "./src/index.js",
47
47
  "devDependencies": {
48
- "@babel/core": "^7.9.6",
49
- "@babel/preset-env": "^7.9.6",
50
- "babel-loader": "^8.1.0",
51
- "clean-webpack-plugin": "^3.0.0",
52
- "file-loader": "^6.2.0",
48
+ "css-loader": "^5.1.3",
49
+ "esbuild": "^0.25.2",
50
+ "esbuild-loader": "^4.3.0",
53
51
  "mini-css-extract-plugin": "^1.5.0",
54
- "style-loader": "^3.3.1",
55
- "terser-webpack-plugin": "^5.1.1",
56
52
  "webpack": "^5.24.4",
57
53
  "webpack-cli": "^4.5.0",
58
54
  "webpack-log": "^3.0.1"
59
55
  },
60
56
  "dependencies": {
61
- "@cocreate/observer": "^1.16.1",
62
- "@cocreate/utils": "^1.33.7"
57
+ "@cocreate/observer": "^1.18.1",
58
+ "@cocreate/utils": "^1.39.0"
63
59
  }
64
60
  }
package/src/index.js CHANGED
@@ -18,11 +18,15 @@ function initElements(elements) {
18
18
  element.addEventListener("click", function (event) {
19
19
  let isFullscreen = element.getAttribute("fullscreen");
20
20
  if (!isFullscreen || isFullscreen === "false") {
21
- let target = queryElements({ element, prefix: "fullscreen" });
21
+ let target = document.documentElement;
22
22
 
23
23
  // TODO: support array?
24
- if (target === false) target = document.documentElement;
25
- else target = target[0];
24
+ if (element.hasAttribute("fullscreen-query")) {
25
+ target = queryElements({
26
+ element,
27
+ prefix: "fullscreen"
28
+ })[0];
29
+ }
26
30
 
27
31
  if (target) {
28
32
  element.setAttribute("fullscreen", true);
package/webpack.config.js CHANGED
@@ -1,90 +1,65 @@
1
- const path = require("path")
2
- const TerserPlugin = require("terser-webpack-plugin")
3
- const MiniCssExtractPlugin = require("mini-css-extract-plugin")
4
- const { CleanWebpackPlugin } = require("clean-webpack-plugin")
5
-
6
- module.exports = (env, argv) => {
7
- let isProduction = false
8
- if (argv.mode === 'production')
9
- isProduction = true
10
-
11
- const config = {
12
- entry: {
13
- "CoCreate-fullscreen": "./src/index.js",
14
- },
15
- output: {
16
- path: path.resolve(__dirname, "dist"),
17
- filename: isProduction ? "[name].min.js" : "[name].js",
18
- libraryTarget: "umd",
19
- libraryExport: "default",
20
- library: ["CoCreate", "fullscreen"],
21
- globalObject: "this",
22
- },
23
-
24
- plugins: [
25
- new CleanWebpackPlugin(),
26
- new MiniCssExtractPlugin({
27
- filename: "[name].css",
28
- }),
29
- ],
30
- // Default mode for Webpack is production.
31
- // Depending on mode Webpack will apply different things
32
- // on final bundle. For now we don't need production's JavaScript
33
- // minifying and other thing so let's set mode to development
34
- mode: isProduction ? "production" : "development",
35
- module: {
36
- rules: [
37
- {
38
- test: /.js$/,
39
- exclude: /(node_modules)/,
40
- use: {
41
- loader: "babel-loader",
42
- options: {
43
- plugins: ["@babel/plugin-transform-modules-commonjs"],
44
- },
45
- },
46
- },
47
- {
48
- test: /.css$/i,
49
- use: [
50
- { loader: "style-loader", options: { injectType: "linkTag" } },
51
- "file-loader",
52
- ],
53
- },
54
- ],
55
- },
56
-
57
- // add source map
58
- ...(isProduction ? {} : { devtool: "eval-source-map" }),
59
-
60
- optimization: {
61
- minimize: true,
62
- minimizer: [
63
- new TerserPlugin({
64
- extractComments: true,
65
- // cache: true,
66
- parallel: true,
67
- // sourceMap: true, // Must be set to true if using source-maps in production
68
- terserOptions: {
69
- // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
70
- // extractComments: 'all',
71
- compress: {
72
- drop_console: true,
73
- },
74
- },
75
- }),
76
- ],
77
- splitChunks: {
78
- chunks: "all",
79
- minSize: 200,
80
- // maxSize: 99999,
81
- //minChunks: 1,
82
-
83
- cacheGroups: {
84
- defaultVendors: false,
85
- },
86
- },
87
- },
88
- }
89
- return config
90
- }
1
+ const path = require("path");
2
+ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
3
+ const { EsbuildPlugin } = require("esbuild-loader");
4
+ const { FileUploader } = require("@cocreate/webpack");
5
+
6
+ module.exports = async (env, argv) => {
7
+ const isProduction = argv && argv.mode === "production";
8
+ const config = {
9
+ entry: {
10
+ "CoCreate-fullscreen": "./src/index.js"
11
+ },
12
+ output: {
13
+ path: path.resolve(__dirname, "dist"),
14
+ filename: isProduction ? "[name].min.js" : "[name].js",
15
+ libraryExport: "default",
16
+ library: ["CoCreate", "fullscreen"],
17
+ clean: true
18
+ },
19
+ plugins: [
20
+ new MiniCssExtractPlugin({
21
+ filename: isProduction ? "[name].min.css" : "[name].css"
22
+ }),
23
+ new FileUploader(env, argv)
24
+ ],
25
+ mode: isProduction ? "production" : "development",
26
+ devtool: isProduction ? "source-map" : "eval-source-map",
27
+ module: {
28
+ rules: [
29
+ {
30
+ test: /.js$/,
31
+ exclude: /node_modules/,
32
+ use: {
33
+ loader: "esbuild-loader",
34
+ options: {
35
+ loader: "js",
36
+ target: "es2017"
37
+ }
38
+ }
39
+ },
40
+ {
41
+ test: /.css$/i,
42
+ use: [MiniCssExtractPlugin.loader, "css-loader"]
43
+ }
44
+ ]
45
+ },
46
+ optimization: {
47
+ minimize: isProduction,
48
+ minimizer: [
49
+ new EsbuildPlugin({
50
+ target: "es2017",
51
+ css: true
52
+ })
53
+ ],
54
+ splitChunks: {
55
+ cacheGroups: {
56
+ defaultVendors: false
57
+ }
58
+ }
59
+ },
60
+ performance: {
61
+ hints: isProduction ? "warning" : false
62
+ }
63
+ };
64
+ return config;
65
+ };