@cocreate/fullscreen 1.4.0 → 1.5.1

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 (6) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/demo/index.html +1 -1
  3. package/docs/index.html +15 -15
  4. package/package.json +1 -1
  5. package/src/index.css +10 -8
  6. package/src/index.js +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,22 @@
1
+ ## [1.5.1](https://github.com/CoCreate-app/CoCreate-fullscreen/compare/v1.5.0...v1.5.1) (2023-05-01)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * update manifest.json to manifest.webmanifest ([ba6e258](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/ba6e25839cc86b79a2dc1d8cfdaf7d43d64933a6))
7
+
8
+ # [1.5.0](https://github.com/CoCreate-app/CoCreate-fullscreen/compare/v1.4.0...v1.5.0) (2023-05-01)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * replace fontawesome with svg ([c03f3df](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/c03f3df9504b82aa65786e58ac989cda21573bbf))
14
+
15
+
16
+ ### Features
17
+
18
+ * 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))
19
+
1
20
  # [1.4.0](https://github.com/CoCreate-app/CoCreate-fullscreen/compare/v1.3.3...v1.4.0) (2023-04-30)
2
21
 
3
22
 
package/demo/index.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <!-- CoCreate Favicon -->
7
7
  <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
8
8
  <link rel="stylesheet" href="index.css" type="text/css" />
9
- <link rel="manifest" href="/manifest.json">
9
+ <link rel="manifest" href="/manifest.webmanifest">
10
10
  </head>
11
11
 
12
12
  <body>
package/docs/index.html CHANGED
@@ -16,7 +16,7 @@
16
16
  <!-- CoCreate Favicon -->
17
17
  <link rel="icon" type="image/png" sizes="32x32" href="https://cocreate.app/images/favicon.ico">
18
18
  <link rel="stylesheet" href="/docs/index.css" collection="files" document_id="60888216117c640e7596303f" name="src" type="text/css" save="true" />
19
- <link rel="manifest" href="/manifest.json">
19
+ <link rel="manifest" href="/manifest.webmanifest">
20
20
  </head>
21
21
 
22
22
  <body>
@@ -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="">
@@ -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,10 +130,10 @@
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>
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
137
  <a class="margin-right:5px" fullscreen fullscreen-target="#playground"></a>
138
138
  </div>
139
139
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/fullscreen",
3
- "version": "1.4.0",
3
+ "version": "1.5.1",
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,11 +1,13 @@
1
- a[fullscreen]:before {
2
- font-family: 'Font Awesome 5 Free';
3
- content: "\f065";
4
- font-weight: 900;
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
5
9
  }
6
10
 
7
- a[fullscreen=true]:before {
8
- font-family: 'Font Awesome 5 Free';
9
- content: "\f066";
10
- font-weight: 900;
11
+ :not(:root):fullscreen::backdrop {
12
+ background: none;
11
13
  }
package/src/index.js CHANGED
@@ -23,7 +23,7 @@ function initElements(elements) {
23
23
  const fullscreenNext = element.getAttribute('fullscreen-next');
24
24
  const fullscreenPrevious = element.getAttribute('fullscreen-previous');
25
25
 
26
- let target = element;
26
+ let target = document.body;
27
27
  if (fullscreenTarget)
28
28
  target = document.querySelector(fullscreenTarget)
29
29
  else if (fullscreenClosest)