@cocreate/fullscreen 1.3.3 → 1.5.0

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,31 @@
1
+ # [1.5.0](https://github.com/CoCreate-app/CoCreate-fullscreen/compare/v1.4.0...v1.5.0) (2023-05-01)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * replace fontawesome with svg ([c03f3df](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/c03f3df9504b82aa65786e58ac989cda21573bbf))
7
+
8
+
9
+ ### Features
10
+
11
+ * css to show and hide icon based on true or false value from attribute fullscreen ([1874df7](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/1874df7c7d9b4bee694ed4f1c6620ade6d009bf2))
12
+
13
+ # [1.4.0](https://github.com/CoCreate-app/CoCreate-fullscreen/compare/v1.3.3...v1.4.0) (2023-04-30)
14
+
15
+
16
+ ### Bug Fixes
17
+
18
+ * add css content icon to react to fullscreen true | false attributes ([d310def](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/d310def8a5725fd544c20770fab31d8289e6089f))
19
+ * fullscreen target updated to fullscreen fullscreen-target ([9c890e5](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/9c890e5c3ef1b82c453cfd4a3c6c5c8f0262aeef))
20
+ * package-lock.json and pnpm-lock.yaml added to .gitignore ([e1be79d](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/e1be79dc524fe1d89aea87137edadbe0debf5d05))
21
+ * removed app.js ([4513f6b](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/4513f6bb38ec865218cc8d176dab6bfab15bf371))
22
+ * removed toogle fullscreen icons. now using css content ([f9840b7](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/f9840b7c626c6bc7565ca6ebcbcc94aee71be538))
23
+
24
+
25
+ ### Features
26
+
27
+ * support for target, closest, parent, next, previous attributes ([dc1bc57](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/dc1bc57548deba0e354008ecf11a87c908f1abc3))
28
+
1
29
  ## [1.3.3](https://github.com/CoCreate-app/CoCreate-fullscreen/compare/v1.3.2...v1.3.3) (2023-04-24)
2
30
 
3
31
 
package/demo/index.html CHANGED
@@ -1,63 +1,111 @@
1
1
  <!DOCTYPE html>
2
2
  <html>
3
+
3
4
  <head>
4
- <title>Full screen | CoCreateJS</title>
5
- <!-- CoCreate Favicon -->
6
- <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
7
- <link rel="stylesheet" href="index.css" type="text/css" />
5
+ <title>Full screen | CoCreateJS</title>
6
+ <!-- CoCreate Favicon -->
7
+ <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
8
+ <link rel="stylesheet" href="index.css" type="text/css" />
8
9
  <link rel="manifest" href="/manifest.json">
9
10
  </head>
11
+
10
12
  <body>
11
-
12
- <div id="page-wrapper">
13
13
 
14
- <h1>Fullscreen API Demo</h1>
14
+ <div id="page-wrapper">
15
+
16
+ <h1>Fullscreen API Demo</h1>
15
17
 
16
- <section>
17
- <h2>Only Target</h2>
18
- <button fullscreen target="#example2">With Attr Target #example2</button>
19
- <button fullscreen >WithOut Target</button>
20
- </section>
18
+ <section>
19
+ <h2>Only Target</h2>
20
+ <button fullscreen>self</button>
21
+ <button fullscreen fullscreen-target="#example2">Target #example2</button>
22
+ <button fullscreen fullscreen-closest="section">closest #example2</button>
23
+ <button fullscreen fullscreen-next="#example2">next #example2</button>
24
+ <button fullscreen fullscreen-previous="#example2">previous #example2</button>
25
+ </section>
21
26
 
22
- <section>
23
- <div id="example2" class="box ">
24
- <h2>#exemple2</h2>
27
+ <section>
28
+ <div id="example2" class="box ">
29
+ <h2>#exemple2</h2>
25
30
 
26
- <p>
27
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tempus leo, in tristique nibh cursus vitae. Praesent vel dignissim mauris, sit amet scelerisque est. Praesent sit amet auctor dui. Duis at urna ipsum. Proin convallis orci facilisis, pellentesque metus eget, consectetur est. Donec ultricies elit id dolor fermentum, eget malesuada nunc vehicula. Duis fringilla urna eget libero luctus, id vehicula mi hendrerit. Vestibulum id ultricies dolor. In mollis, libero id venenatis pretium, libero orci luctus nisl, et rhoncus sem erat sed orci. Donec vitae volutpat orci.
28
- </p>
31
+ <p>
32
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tempus leo, in tristique nibh
33
+ cursus vitae. Praesent vel dignissim mauris, sit amet scelerisque est. Praesent sit amet auctor dui.
34
+ Duis at urna ipsum. Proin convallis orci facilisis, pellentesque metus eget, consectetur est. Donec
35
+ ultricies elit id dolor fermentum, eget malesuada nunc vehicula. Duis fringilla urna eget libero
36
+ luctus, id vehicula mi hendrerit. Vestibulum id ultricies dolor. In mollis, libero id venenatis
37
+ pretium, libero orci luctus nisl, et rhoncus sem erat sed orci. Donec vitae volutpat orci.
38
+ </p>
29
39
 
30
- <p>
31
- Aenean mollis lorem turpis, vel pellentesque quam vestibulum sed. Fusce convallis quis tellus bibendum maximus. Nunc facilisis eros quis lacus euismod placerat. Aliquam quis tincidunt massa. Quisque eget ligula vitae nibh tempus lacinia vel sit amet eros. Pellentesque interdum erat sed consequat maximus. Phasellus at viverra massa. In tortor eros, varius facilisis ligula id, tincidunt maximus elit. Pellentesque arcu magna, laoreet mollis dignissim et, condimentum eget nibh. Quisque nec nisi a ligula volutpat tempus sit amet vitae orci. In congue tellus risus, eleifend molestie risus condimentum ac. Vestibulum scelerisque tempor mollis. Integer vulputate lorem urna, non ornare velit posuere vulputate.
32
- </p>
40
+ <p>
41
+ Aenean mollis lorem turpis, vel pellentesque quam vestibulum sed. Fusce convallis quis tellus
42
+ bibendum maximus. Nunc facilisis eros quis lacus euismod placerat. Aliquam quis tincidunt massa.
43
+ Quisque eget ligula vitae nibh tempus lacinia vel sit amet eros. Pellentesque interdum erat sed
44
+ consequat maximus. Phasellus at viverra massa. In tortor eros, varius facilisis ligula id, tincidunt
45
+ maximus elit. Pellentesque arcu magna, laoreet mollis dignissim et, condimentum eget nibh. Quisque
46
+ nec nisi a ligula volutpat tempus sit amet vitae orci. In congue tellus risus, eleifend molestie
47
+ risus condimentum ac. Vestibulum scelerisque tempor mollis. Integer vulputate lorem urna, non ornare
48
+ velit posuere vulputate.
49
+ </p>
33
50
 
34
- <p>
35
- Etiam massa ex, sagittis vitae lacus quis, fermentum gravida ipsum. Nullam vitae augue nec nisi congue pretium. Mauris non scelerisque nibh, non placerat nulla. Morbi a placerat lectus, eu sodales massa. Nam vitae bibendum est, sit amet imperdiet ipsum. Curabitur sagittis finibus ipsum, nec auctor justo tempus quis. Donec libero diam, pharetra ac nunc eu, ultrices dictum enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis viverra consequat pharetra. Donec at risus turpis. Duis finibus imperdiet ipsum ac tristique. Nunc a elementum diam, sit amet rutrum tellus. Mauris urna quam, commodo et bibendum at, sodales in odio.
36
- </p>
51
+ <p>
52
+ Etiam massa ex, sagittis vitae lacus quis, fermentum gravida ipsum. Nullam vitae augue nec nisi
53
+ congue pretium. Mauris non scelerisque nibh, non placerat nulla. Morbi a placerat lectus, eu sodales
54
+ massa. Nam vitae bibendum est, sit amet imperdiet ipsum. Curabitur sagittis finibus ipsum, nec
55
+ auctor justo tempus quis. Donec libero diam, pharetra ac nunc eu, ultrices dictum enim. Interdum et
56
+ malesuada fames ac ante ipsum primis in faucibus. Duis viverra consequat pharetra. Donec at risus
57
+ turpis. Duis finibus imperdiet ipsum ac tristique. Nunc a elementum diam, sit amet rutrum tellus.
58
+ Mauris urna quam, commodo et bibendum at, sodales in odio.
59
+ </p>
37
60
 
38
- <p>
39
- Sed enim velit, posuere nec lacus vel, malesuada efficitur turpis. Nulla sed mauris ac elit ornare tempor. Cras facilisis varius mi sed malesuada. Vestibulum congue ipsum ac tellus hendrerit, eget cursus augue tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ante felis, tincidunt sed consequat vitae, scelerisque quis lacus. Nunc imperdiet augue ac elit sodales, eget ultrices ipsum ultricies. Vestibulum lacinia odio quis velit commodo eleifend. Nullam justo turpis, fermentum a laoreet sed, ultrices in metus. Phasellus efficitur consectetur eros, at sagittis leo tincidunt sagittis. Duis maximus nibh lobortis, viverra nibh id, interdum odio. Sed non ullamcorper dolor, sed ultrices magna. Ut ac sem dignissim, sodales magna eget, tincidunt lectus.
40
- </p>
61
+ <p>
62
+ Sed enim velit, posuere nec lacus vel, malesuada efficitur turpis. Nulla sed mauris ac elit ornare
63
+ tempor. Cras facilisis varius mi sed malesuada. Vestibulum congue ipsum ac tellus hendrerit, eget
64
+ cursus augue tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
65
+ inceptos himenaeos. In ante felis, tincidunt sed consequat vitae, scelerisque quis lacus. Nunc
66
+ imperdiet augue ac elit sodales, eget ultrices ipsum ultricies. Vestibulum lacinia odio quis velit
67
+ commodo eleifend. Nullam justo turpis, fermentum a laoreet sed, ultrices in metus. Phasellus
68
+ efficitur consectetur eros, at sagittis leo tincidunt sagittis. Duis maximus nibh lobortis, viverra
69
+ nibh id, interdum odio. Sed non ullamcorper dolor, sed ultrices magna. Ut ac sem dignissim, sodales
70
+ magna eget, tincidunt lectus.
71
+ </p>
41
72
 
42
- <p>
43
- Morbi congue, enim et tempor consequat, dolor turpis commodo mi, vitae tempus velit neque et augue. Proin eget commodo tortor. In a tortor sagittis, posuere leo at, volutpat sapien. Maecenas sed euismod odio. Pellentesque lobortis tellus at congue pharetra. Curabitur at felis arcu. Pellentesque scelerisque dui sed euismod vehicula. In fermentum bibendum libero. Pellentesque malesuada elementum elit. Quisque a urna a nibh feugiat imperdiet.
44
- </p>
73
+ <p>
74
+ Morbi congue, enim et tempor consequat, dolor turpis commodo mi, vitae tempus velit neque et augue.
75
+ Proin eget commodo tortor. In a tortor sagittis, posuere leo at, volutpat sapien. Maecenas sed
76
+ euismod odio. Pellentesque lobortis tellus at congue pharetra. Curabitur at felis arcu. Pellentesque
77
+ scelerisque dui sed euismod vehicula. In fermentum bibendum libero. Pellentesque malesuada elementum
78
+ elit. Quisque a urna a nibh feugiat imperdiet.
79
+ </p>
45
80
 
46
- <p>
47
- Sed enim velit, posuere nec lacus vel, malesuada efficitur turpis. Nulla sed mauris ac elit ornare tempor. Cras facilisis varius mi sed malesuada. Vestibulum congue ipsum ac tellus hendrerit, eget cursus augue tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ante felis, tincidunt sed consequat vitae, scelerisque quis lacus. Nunc imperdiet augue ac elit sodales, eget ultrices ipsum ultricies. Vestibulum lacinia odio quis velit commodo eleifend. Nullam justo turpis, fermentum a laoreet sed, ultrices in metus. Phasellus efficitur consectetur eros, at sagittis leo tincidunt sagittis. Duis maximus nibh lobortis, viverra nibh id, interdum odio. Sed non ullamcorper dolor, sed ultrices magna. Ut ac sem dignissim, sodales magna eget, tincidunt lectus.
48
- </p>
81
+ <p>
82
+ Sed enim velit, posuere nec lacus vel, malesuada efficitur turpis. Nulla sed mauris ac elit ornare
83
+ tempor. Cras facilisis varius mi sed malesuada. Vestibulum congue ipsum ac tellus hendrerit, eget
84
+ cursus augue tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
85
+ inceptos himenaeos. In ante felis, tincidunt sed consequat vitae, scelerisque quis lacus. Nunc
86
+ imperdiet augue ac elit sodales, eget ultrices ipsum ultricies. Vestibulum lacinia odio quis velit
87
+ commodo eleifend. Nullam justo turpis, fermentum a laoreet sed, ultrices in metus. Phasellus
88
+ efficitur consectetur eros, at sagittis leo tincidunt sagittis. Duis maximus nibh lobortis, viverra
89
+ nibh id, interdum odio. Sed non ullamcorper dolor, sed ultrices magna. Ut ac sem dignissim, sodales
90
+ magna eget, tincidunt lectus.
91
+ </p>
49
92
 
50
- <p>
51
- Morbi congue, enim et tempor consequat, dolor turpis commodo mi, vitae tempus velit neque et augue. Proin eget commodo tortor. In a tortor sagittis, posuere leo at, volutpat sapien. Maecenas sed euismod odio. Pellentesque lobortis tellus at congue pharetra. Curabitur at felis arcu. Pellentesque scelerisque dui sed euismod vehicula. In fermentum bibendum libero. Pellentesque malesuada elementum elit. Quisque a urna a nibh feugiat imperdiet.
52
- </p>
93
+ <p>
94
+ Morbi congue, enim et tempor consequat, dolor turpis commodo mi, vitae tempus velit neque et augue.
95
+ Proin eget commodo tortor. In a tortor sagittis, posuere leo at, volutpat sapien. Maecenas sed
96
+ euismod odio. Pellentesque lobortis tellus at congue pharetra. Curabitur at felis arcu. Pellentesque
97
+ scelerisque dui sed euismod vehicula. In fermentum bibendum libero. Pellentesque malesuada elementum
98
+ elit. Quisque a urna a nibh feugiat imperdiet.
99
+ </p>
53
100
 
54
- <button class="fs-exit-page-button" >Exit</button>
101
+ <button class="fs-exit-page-button">Exit</button>
102
+ </div>
103
+ </section>
55
104
  </div>
56
- </section>
57
- </div>
58
105
 
59
-
106
+
60
107
  <!--<script src="../dist/CoCreate-fullscreen.js"></script>-->
61
- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
108
+ <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
62
109
  </body>
110
+
63
111
  </html>
package/docs/index.html CHANGED
@@ -35,15 +35,15 @@
35
35
  <div class="display:flex align-items:center transition:0.3s padding-left:10px" share-network="true" share-text="Toggle any html element to view in fullscreen mode. Easy configuration and targeting using the fullscreen and target attribute."
36
36
  share-title="CoCreate Fullscreen" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/fullscreen.png" hover="display:block!important" hover-target=".social-networks">
37
37
  <div class="display:none social-networks">
38
- <a class="margin-right:15px" share-network='twitter' title="Share on twitter"><i class="fab fa-twitter"></i></a>
39
- <a class="margin-right:15px" share-network='facebook' title="Share on Facebook"><i class="fab fa-facebook"></i></a>
40
- <a class="margin-right:15px" share-network='instagram' title="Share on instagram"><i class="fab fa-instagram"></i></a>
38
+ <a class="margin-right:15px" share-network='twitter' title="Share on twitter"><i class="height:20px fill:#505050" src="/assets/svg/twitter.svg"></i></a>
39
+ <a class="margin-right:15px" share-network='facebook' title="Share on Facebook"><i class="height:20px fill:#505050" src="/assets/svg/facebook.svg"></i></a>
40
+ <a class="margin-right:15px" share-network='instagram' title="Share on instagram"><i class="height:20px fill:#505050" src="/assets/svg/instagram.svg"></i></a>
41
41
  </div>
42
- <a class="margin-right:15px" share-network='share' title="Share on share"><i class="fas fa-share-alt"></i></a>
42
+ <a class="margin-right:15px" share-network='share' title="Share on share"><i class="height:20px fill:#505050" src="/assets/svg/share-alt.svg"></i></a>
43
43
  </div>
44
- <a class="margin-right:15px" share-network='share' title="Share on share"><i class="fas fa-share-alt"></i></a>
44
+ <a class="margin-right:15px" share-network='share' title="Share on share"><i class="height:20px fill:#505050" src="/assets/svg/share-alt.svg"></i></a>
45
45
  </div>
46
- <a href="https://github.com/CoCreate-app/CoCreate-fullscreen" target="_blank" class="margin-right:15px"><i class="fab fa-github"></i></a>
46
+ <a href="https://github.com/CoCreate-app/CoCreate-fullscreen" target="_blank" class="margin-right:15px"><i class="height:20px fill:#505050" src="/assets/svg/github.svg"></i></a>
47
47
  </div>
48
48
  </div>
49
49
  <h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">Toggle any html element to view in fullscreen mode. Easy configuration and targeting using the fullscreen and target attribute.</h1>
@@ -52,7 +52,7 @@
52
52
  <div id="fullscreen-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#fullscreen-install-section">
53
53
  <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#fullscreen-install"]'>
54
54
  <h2 class="padding:5px_0px">Install</h2>
55
- <a class="margin-left:10px display:none" href="#fullscreen-install"><i class="fas fa-link"></i></a>
55
+ <a class="margin-left:10px display:none" href="#fullscreen-install"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
56
56
  </span>
57
57
  </div>
58
58
  <pre><code class="language-bash">npm i @cocreate/fullscreen</code></pre>
@@ -62,7 +62,7 @@
62
62
  <div id="fullscreen-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#fullscreen-usage-section">
63
63
  <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#fullscreen-usage"]'>
64
64
  <h2 class="padding:5px_0px">Usage</h2>
65
- <a class="margin-left:10px display:none" href="#fullscreen-usage"><i class="fas fa-link"></i></a>
65
+ <a class="margin-left:10px display:none" href="#fullscreen-usage"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
66
66
  </span>
67
67
  </div>
68
68
  <div class="">
@@ -78,7 +78,7 @@
78
78
  &lt;/style&gt;
79
79
  &lt;section&gt;
80
80
  &lt;h2&gt;Only Target&lt;/h2&gt;
81
- &lt;button fullscreen target=&quot;#example2&quot;&gt;With Attr Target&lt;/button&gt;
81
+ &lt;button fullscreen fullscreen-target=&quot;#example2&quot;&gt;With Attr Target&lt;/button&gt;
82
82
  &lt;button fullscreen &gt;WithOut Target&lt;/button&gt;
83
83
  &lt;/section&gt;
84
84
  &lt;section&gt;
@@ -97,7 +97,7 @@
97
97
  <div id="fullscreen-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#fullscreen-attributes-section">
98
98
  <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#fullscreen-attributes"]'>
99
99
  <h2 class="padding:5px_0px">Attributes</h2>
100
- <a class="margin-left:10px display:none" href="#fullscreen-attributes"><i class="fas fa-link"></i></a>
100
+ <a class="margin-left:10px display:none" href="#fullscreen-attributes"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
101
101
  </span>
102
102
  </div>
103
103
  <ul class="list-style-type:none ">
@@ -113,7 +113,7 @@
113
113
  <div id="fullscreen-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#fullscreen-demo-section">
114
114
  <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#fullscreen-demo"]'>
115
115
  <h2 class="padding:5px_0px">Demo</h2>
116
- <a class="margin-left:10px display:none" href="#fullscreen-demo"><i class="fas fa-link"></i></a>
116
+ <a class="margin-left:10px display:none" href="#fullscreen-demo"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
117
117
  </span>
118
118
  </div>
119
119
  <div class="position:sticky top:0 padding:15px_0px height:100vh">
@@ -130,11 +130,11 @@
130
130
  </div>
131
131
 
132
132
  <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
133
- <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-target="#demo-code"><i class="far fa-eye"></i></a>
134
- <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-target="#demo-code"><i class="fas fa-eye-slash"></i></a>
135
- <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i class="fa fa-code"></i></a>
136
- <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="fas fa-code"></i></a>
137
- <a class="margin-right:5px" fullscreen target="#playground"><i class="fas fa-expand"></i></a>
133
+ <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-target="#demo-code"><i class="height:18px fill:#505050" src="/assets/svg/eye.svg"></i></a>
134
+ <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-target="#demo-code"><i class="height:20px fill:#505050" src="/assets/svg/eye-slash.svg"></i></a>
135
+ <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i class="height:20px fill:#505050" src="/assets/svg/code.svg"></i></a>
136
+ <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="display:flex height:18px fill:#505050" src="/assets/svg/code.svg"></i></a>
137
+ <a class="margin-right:5px" fullscreen fullscreen-target="#playground"></a>
138
138
  </div>
139
139
 
140
140
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/fullscreen",
3
- "version": "1.3.3",
3
+ "version": "1.5.0",
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",
@@ -59,6 +59,7 @@
59
59
  "webpack-log": "^3.0.1"
60
60
  },
61
61
  "dependencies": {
62
- "@cocreate/docs": "^1.7.1"
62
+ "@cocreate/docs": "^1.7.1",
63
+ "@cocreate/observer": "^1.7.1"
63
64
  }
64
65
  }
package/src/index.css ADDED
@@ -0,0 +1,13 @@
1
+ a[fullscreen] i:last-child {
2
+ display: none
3
+ }
4
+ a[fullscreen=true] i:first-child {
5
+ display: none
6
+ }
7
+ a[fullscreen=true] i:last-child {
8
+ display: unset
9
+ }
10
+
11
+ :not(:root):fullscreen::backdrop {
12
+ background: none;
13
+ }
package/src/index.js CHANGED
@@ -1,96 +1,114 @@
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
- */
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 './index.css';
7
9
 
8
- var requestFullscreen = function (ele) {
9
- if (!document.fullscreenElement){
10
- if (ele.requestFullscreen) {
11
- ele.requestFullscreen();
12
- } else if (ele.webkitRequestFullscreen) {
13
- ele.webkitRequestFullscreen();
14
- } else if (ele.mozRequestFullScreen) {
15
- ele.mozRequestFullScreen();
16
- } else if (ele.msRequestFullscreen) {
17
- ele.msRequestFullscreen();
18
- } else {
19
- console.log('Fullscreen API is not supported.');
20
- }
10
+ function init() {
11
+ let elements = document.querySelectorAll('[fullscreen]');
12
+ initElements(elements)
13
+ }
14
+
15
+ function initElements(elements) {
16
+ for (let element of elements) {
17
+ element.addEventListener("click", function (event) {
18
+ let isFullscreen = element.getAttribute('fullscreen')
19
+ if (!isFullscreen || isFullscreen === 'false') {
20
+ const fullscreenTarget = element.getAttribute('fullscreen-target');
21
+ const fullscreenClosest = element.getAttribute('fullscreen-closest');
22
+ const fullscreenParent = element.getAttribute('fullscreen-parent');
23
+ const fullscreenNext = element.getAttribute('fullscreen-next');
24
+ const fullscreenPrevious = element.getAttribute('fullscreen-previous');
25
+
26
+ let target = document.body;
27
+ if (fullscreenTarget)
28
+ target = document.querySelector(fullscreenTarget)
29
+ else if (fullscreenClosest)
30
+ target = element.closest(fullscreenClosest)
31
+ else if (fullscreenParent)
32
+ target = element.parentElement.querySelector(fullscreenParent)
33
+ else if (fullscreenNext)
34
+ target = element.nextElementSibling.querySelector(fullscreenNext)
35
+ else if (fullscreenPrevious)
36
+ target = element.previousElementSibling.querySelector(fullscreenPrevious)
37
+ if (target) {
38
+ element.setAttribute('fullscreen', true)
39
+ requestFullscreen(target);
40
+ }
41
+ } else {
42
+ element.setAttribute('fullscreen', false)
43
+ exitFullscreen();
44
+ }
45
+ });
21
46
  }
22
- };
47
+ }
23
48
 
24
- var exitFullscreen = function (item) {
25
- if (document.fullscreenElement){
26
- if (document.exitFullscreen) {
27
- document.exitFullscreen();
28
- } else if (document.webkitExitFullscreen) {
29
- document.webkitExitFullscreen();
30
- } else if (document.mozCancelFullScreen) {
31
- document.mozCancelFullScreen();
32
- } else if (document.msExitFullscreen) {
33
- document.msExitFullscreen();
34
- } else {
35
- console.log('Fullscreen API is not supported.');
49
+ document.addEventListener('fullscreenchange', (event) => {
50
+ if (document.fullscreenElement == null) {
51
+ let elements = document.querySelectorAll('[fullscreen="true"]');
52
+ elements.forEach(elem => {
53
+ elem.setAttribute('fullscreen', false)
54
+ });
36
55
  }
37
- //FullscreenItem(item)
38
- }
39
- };
40
56
 
41
- var FullscreenItem = function (item) {
42
- //item = event.target;
43
- var target = item.getAttribute("target") == null ? document.documentElement : document.querySelector(item.getAttribute("target"))
44
- //console.log('target => ',target)
45
- requestFullscreen(target);
46
- }
47
-
48
- Boolean.parse = function (str) {
49
- switch (str.toLowerCase ()) {
50
- case "true":
51
- return true;
52
- case "false":
53
- return false;
54
- default:
55
- return false;
56
- //throw new Error ("Boolean.parse: Cannot convert string to boolean.");
57
- }
57
+ });
58
+
59
+ function requestFullscreen(element) {
60
+ if (!document.fullscreenElement) {
61
+ if (element.requestFullscreen) {
62
+ element.requestFullscreen();
63
+ } else if (element.webkitRequestFullscreen) {
64
+ element.webkitRequestFullscreen();
65
+ } else if (element.mozRequestFullScreen) {
66
+ element.mozRequestFullScreen();
67
+ } else if (element.msRequestFullscreen) {
68
+ element.msRequestFullscreen();
69
+ } else {
70
+ console.log('Fullscreen API is not supported.');
71
+ }
72
+ }
58
73
  };
59
-
60
- let list_fs_target_button = document.querySelectorAll('[fullscreen]');
61
-
62
- document.addEventListener('fullscreenchange', (event) => {
63
- //list_fs_target_button_true = document.querySelectorAll('[fullscreen="true"]');
64
- let list_fs_target_button_true = document.querySelectorAll('[fullscreen="true"]');
65
- list_fs_target_button_true.forEach(elem =>{
66
- //elem.dataset['fullscreen'] = document.fullscreenElement!=null
67
- console.log("evetn ",document.fullscreenElement)
68
- if (document.fullscreenElement==null){
69
- console.log("LOG fullscreen")
70
- elem.setAttribute('fullscreen', false)
74
+
75
+ function exitFullscreen() {
76
+ if (document.fullscreenElement) {
77
+ if (document.exitFullscreen) {
78
+ document.exitFullscreen();
79
+ } else if (document.webkitExitFullscreen) {
80
+ document.webkitExitFullscreen();
81
+ } else if (document.mozCancelFullScreen) {
82
+ document.mozCancelFullScreen();
83
+ } else if (document.msExitFullscreen) {
84
+ document.msExitFullscreen();
85
+ } else {
86
+ console.log('Fullscreen API is not supported.');
71
87
  }
72
- });
88
+ }
89
+ };
90
+
91
+
92
+ observer.init({
93
+ name: 'CoCreateFullscreen',
94
+ observe: ['addedNodes'],
95
+ target: '[fullscreen]',
96
+ callback: mutation =>
97
+ initElements([mutation.target])
73
98
  });
74
-
75
- for (let item of list_fs_target_button) {
76
- item.addEventListener("click", function(event) {
77
- console.log("primero ",item.dataset['fullscreen'])
78
- if (document.fullscreenElement==null)
79
- item.setAttribute('fullscreen', false)
80
- var action = typeof item.dataset['fullscreen'] != 'undefined' ? Boolean.parse(item.dataset['fullscreen']) : false
81
- console.log("action ",action)
82
- /*list_fs_target_button.forEach(elem =>{
83
- elem.dataset['fullscreen'] = !action
84
- })*/
85
- item.dataset['fullscreen'] = !action
86
- console.log("primero ",item.dataset['fullscreen'])
87
- if (!action){
88
- FullscreenItem(item)
89
- }
90
- else{
91
- exitFullscreen(item);
92
- }
93
- });
94
- }
95
99
 
96
- export default {requestFullscreen, exitFullscreen}
100
+ observer.init({
101
+ name: 'CoCreateFullscreen',
102
+ observe: ['attributes'],
103
+ attributeName: ['fullscreen'],
104
+ target: '[fullscreen]',
105
+ callback: mutation => {
106
+ if (mutation.oldValue === null)
107
+ initElements([mutation.target])
108
+ }
109
+ });
110
+
111
+
112
+ init()
113
+
114
+ export default { requestFullscreen, exitFullscreen }
package/app.js DELETED
@@ -1,20 +0,0 @@
1
- const upload_s3 = require('../../CoCreate-tools/upload_s3');
2
- const minify_files = require('../../CoCreate-tools/minify_js');
3
-
4
- const pkg = require('./package.json');
5
- const name = pkg.name;
6
-
7
- const folderOutput = './dist/'
8
- const fileOutput = folderOutput + name + '.min.js'
9
- const src = 'src/';
10
- console.log("Compiling and minifying...")
11
-
12
- const cocreate_files = [
13
- './'+src+name+'.js',
14
- ]
15
-
16
- minify_files(cocreate_files,fileOutput)
17
- /// Upload to S3
18
- upload_s3(fileOutput);
19
- /// Upload to S3 src
20
- upload_s3('./'+src+name+'.js');