@cocreate/fullscreen 1.5.5 → 1.5.6

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,11 @@
1
+ ## [1.5.6](https://github.com/CoCreate-app/CoCreate-fullscreen/compare/v1.5.5...v1.5.6) (2023-06-02)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * format demo html ([f3e8f11](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/f3e8f117c7db8931ef09f268e52d7a63387ff310))
7
+ * Update dependencies versions for [@cocreate](https://github.com/cocreate) libraries ([d1b21d9](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/d1b21d9785c30baef500695b55480140672def8d))
8
+
1
9
  ## [1.5.5](https://github.com/CoCreate-app/CoCreate-fullscreen/compare/v1.5.4...v1.5.5) (2023-05-21)
2
10
 
3
11
 
package/demo/index.html CHANGED
@@ -1,111 +1,154 @@
1
1
  <!DOCTYPE html>
2
- <html>
3
-
4
- <head>
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" />
9
- <link rel="manifest" href="/manifest.webmanifest">
10
- </head>
11
-
12
- <body>
13
-
14
- <div id="page-wrapper">
15
-
16
- <h1>Fullscreen API Demo</h1>
17
-
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>
26
-
27
- <section>
28
- <div id="example2" class="box ">
29
- <h2>#exemple2</h2>
30
-
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>
39
-
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>
50
-
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>
60
-
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>
72
-
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>
80
-
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>
92
-
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>
100
-
101
- <button class="fs-exit-page-button">Exit</button>
102
- </div>
103
- </section>
104
- </div>
105
-
106
-
107
- <!--<script src="../dist/CoCreate-fullscreen.js"></script>-->
108
- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
109
- </body>
110
-
111
- </html>
2
+ <html lang="en">
3
+ <head>
4
+ <title>Full screen | CoCreateJS</title>
5
+ <!-- CoCreate Favicon -->
6
+ <link
7
+ rel="icon"
8
+ href="https://cdn.cocreate.app/favicon.ico"
9
+ type="image/ico"
10
+ sizes="16x16" />
11
+ <link rel="stylesheet" href="index.css" type="text/css" />
12
+ <link rel="manifest" href="/manifest.webmanifest" />
13
+ </head>
14
+
15
+ <body>
16
+ <div id="page-wrapper">
17
+ <h1>Fullscreen API Demo</h1>
18
+
19
+ <section>
20
+ <h2>Only Target</h2>
21
+ <button fullscreen>self</button>
22
+ <button fullscreen fullscreen-target="#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>
35
+
36
+ <section>
37
+ <div id="example2" class="box">
38
+ <h2>#exemple2</h2>
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>
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>
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>
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>
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>
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>
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>
145
+
146
+ <button class="fs-exit-page-button">Exit</button>
147
+ </div>
148
+ </section>
149
+ </div>
150
+
151
+ <!--<script src="../dist/CoCreate-fullscreen.js"></script>-->
152
+ <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
153
+ </body>
154
+ </html>
package/docs/index.html CHANGED
@@ -1,75 +1,200 @@
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
7
 
4
- <head>
5
- <meta charset="utf-8">
6
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
- <meta name="viewport" content="width=device-width, initial-scale=1">
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
18
 
9
- <meta name="description" content="A simple HTML5 and pure javascript component. Easy configuration using HTML5 attributes or Javscript api and highly styleable." />
10
- <meta name="keywords" content="helper classes, utility classes, css framework, css library, inline style classes" />
11
- <meta name="robots" content="index,follow" />
12
- <meta property="og:image" content="https://cdn.cocreate.app/docs/fullscreen.png">
19
+ <title>CoCreate-fullscreen Documentation | CoCreateJS</title>
13
20
 
14
- <title>CoCreate-fullscreen Documentation | CoCreateJS </title>
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="/docs/index.css"
30
+ collection="files"
31
+ document_id="60888216117c640e7596303f"
32
+ name="src"
33
+ type="text/css"
34
+ save="true" />
35
+ <link rel="manifest" href="/manifest.webmanifest" />
36
+ </head>
15
37
 
16
- <!-- CoCreate Favicon -->
17
- <link rel="icon" type="image/png" sizes="32x32" href="https://cocreate.app/images/favicon.ico">
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.webmanifest">
20
- </head>
21
-
22
- <body>
23
- <nav class="nav display:flex align-items:center left:0px background:whitesmoke padding-top:10px padding-bottom:10px" content_id="content" scroll="sticky-nav,hide-nav" scroll-up="10" scroll-down="10" collection="files" document_id="60395ef42b3ac232657040fd" name="src">
24
- </nav>
25
- <sidenav id="menuL" class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl" resizable resize-target="[content_id='content']" resize-property="margin-left" resize-value="width">
26
- <menu collection="files" document_id="603717b07de7fb350ae9fec8" name="src"></menu>
27
- <div resize="right"></div>
28
- </sidenav>
29
- <main class="padding-top:15px padding:15px@lg@xl" content_id="content" id="cocreate-fullscreen">
30
- <div class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
31
- <div class="display:flex align-items:center">
32
- <h2>CoCreate-fullscreen</h2>
33
- </div>
34
- <div class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
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
- 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
- <div class="display:none social-networks">
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>
38
+ <body>
39
+ <nav
40
+ class="nav display:flex align-items:center left:0px background:whitesmoke padding-top:10px padding-bottom:10px"
41
+ content_id="content"
42
+ scroll="sticky-nav,hide-nav"
43
+ scroll-up="10"
44
+ scroll-down="10"
45
+ collection="files"
46
+ document_id="60395ef42b3ac232657040fd"
47
+ name="src"></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-target="[content_id='content']"
53
+ resize-property="margin-left"
54
+ resize-value="width">
55
+ <menu
56
+ collection="files"
57
+ document_id="603717b07de7fb350ae9fec8"
58
+ name="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-target=".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
88
+ class="height:20px fill:#505050"
89
+ src="/assets/svg/twitter.svg"></i
90
+ ></a>
91
+ <a
92
+ class="margin-right:15px"
93
+ share-network="facebook"
94
+ title="Share on Facebook"
95
+ ><i
96
+ class="height:20px fill:#505050"
97
+ src="/assets/svg/facebook.svg"></i
98
+ ></a>
99
+ <a
100
+ class="margin-right:15px"
101
+ share-network="instagram"
102
+ title="Share on instagram"
103
+ ><i
104
+ class="height:20px fill:#505050"
105
+ src="/assets/svg/instagram.svg"></i
106
+ ></a>
107
+ </div>
108
+ <a
109
+ class="margin-right:15px"
110
+ share-network="share"
111
+ title="Share on share"
112
+ ><i
113
+ class="height:20px fill:#505050"
114
+ src="/assets/svg/share-alt.svg"></i
115
+ ></a>
41
116
  </div>
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>
117
+ <a
118
+ class="margin-right:15px"
119
+ share-network="share"
120
+ title="Share on share"
121
+ ><i
122
+ class="height:20px fill:#505050"
123
+ src="/assets/svg/share-alt.svg"></i
124
+ ></a>
43
125
  </div>
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>
126
+ <a
127
+ href="https://github.com/CoCreate-app/CoCreate-fullscreen"
128
+ target="_blank"
129
+ class="margin-right:15px"
130
+ ><i
131
+ class="height:20px fill:#505050"
132
+ src="/assets/svg/github.svg"></i
133
+ ></a>
45
134
  </div>
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
- </div>
48
- </div>
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>
50
- <div id="fullscreen-section" class="display:flex flex-wrap:wrap">
51
- <div class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
52
- <div id="fullscreen-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#fullscreen-install-section">
53
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#fullscreen-install"]'>
135
+
136
+ <h1
137
+ class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">
138
+ Toggle any html element to view in fullscreen mode. Easy
139
+ configuration and targeting using the fullscreen and target
140
+ attribute.
141
+ </h1>
142
+ <div id="fullscreen-section" class="display:flex flex-wrap:wrap">
143
+ <div
144
+ class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
145
+ <div
146
+ id="fullscreen-install"
147
+ class="border-bottom:1px_solid_lightgrey"
148
+ scroll
149
+ scroll-intersect="color:dodgerblue"
150
+ scroll-target="#fullscreen-install-section">
151
+ <span
152
+ class="display:flex align-items:center width:fit-content"
153
+ hover="display:block!important"
154
+ hover-target="[href='#fullscreen-install']">
54
155
  <h2 class="padding:5px_0px">Install</h2>
55
- <a class="margin-left:10px display:none" href="#fullscreen-install"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
156
+ <a
157
+ class="margin-left:10px display:none"
158
+ href="#fullscreen-install"
159
+ ><i
160
+ class="height:20px fill:#505050"
161
+ src="/assets/svg/link.svg"></i
162
+ ></a>
56
163
  </span>
57
- </div>
58
- <pre><code class="language-bash">npm i @cocreate/fullscreen</code></pre>
59
- <p class="padding:10px_0px line-height:1.5">Or you can use cdn link:</p>
60
- <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/fullscreen/latest/CoCreate-fullscreen.min.js&lt;/script&gt;</code></pre>
164
+ </div>
165
+ <pre><code class="language-bash">npm i @cocreate/fullscreen</code></pre>
166
+ <p class="padding:10px_0px line-height:1.5">
167
+ Or you can use cdn link:
168
+ </p>
169
+ <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/fullscreen/latest/CoCreate-fullscreen.min.js&lt;/script&gt;</code></pre>
61
170
 
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
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#fullscreen-usage"]'>
171
+ <div
172
+ id="fullscreen-usage"
173
+ class="margin-top:80px border-bottom:1px_solid_lightgrey"
174
+ scroll
175
+ scroll-intersect="color:dodgerblue"
176
+ scroll-target="#fullscreen-usage-section">
177
+ <span
178
+ class="display:flex align-items:center width:fit-content"
179
+ hover="display:block!important"
180
+ hover-target="[href='#fullscreen-usage']">
64
181
  <h2 class="padding:5px_0px">Usage</h2>
65
- <a class="margin-left:10px display:none" href="#fullscreen-usage"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
182
+ <a
183
+ class="margin-left:10px display:none"
184
+ href="#fullscreen-usage"
185
+ ><i
186
+ class="height:20px fill:#505050"
187
+ src="/assets/svg/link.svg"></i
188
+ ></a>
66
189
  </span>
67
- </div>
68
- <div class="">
69
- <p class="padding:10px_0px line-height:1.5">This is fullscreen usage</p>
190
+ </div>
191
+ <div class="">
192
+ <p class="padding:10px_0px line-height:1.5">
193
+ This is fullscreen usage
194
+ </p>
70
195
 
71
- <div class="flex-grow:1 min-width:300px width:100%">
72
- <pre>
196
+ <div class="flex-grow:1 min-width:300px width:100%">
197
+ <pre>
73
198
  <code class="language-js">
74
199
  &lt;style type=&quot;text/css&quot;&gt;
75
200
  #example2{
@@ -91,63 +216,158 @@
91
216
  &lt;/section&gt;
92
217
  </code>
93
218
  </pre>
219
+ </div>
220
+ <p class="padding:10px_0px line-height:1.5">
221
+ This is fullscreen usage
222
+ </p>
94
223
  </div>
95
- <p class="padding:10px_0px line-height:1.5">This is fullscreen usage</p>
96
- </div>
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
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#fullscreen-attributes"]'>
224
+ <div
225
+ id="fullscreen-attributes"
226
+ class="margin-top:80px border-bottom:1px_solid_lightgrey"
227
+ scroll
228
+ scroll-intersect="color:dodgerblue"
229
+ scroll-target="#fullscreen-attributes-section">
230
+ <span
231
+ class="display:flex align-items:center width:fit-content"
232
+ hover="display:block!important"
233
+ hover-target="[href='#fullscreen-attributes']">
99
234
  <h2 class="padding:5px_0px">Attributes</h2>
100
- <a class="margin-left:10px display:none" href="#fullscreen-attributes"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
235
+ <a
236
+ class="margin-left:10px display:none"
237
+ href="#fullscreen-attributes"
238
+ ><i
239
+ class="height:20px fill:#505050"
240
+ src="/assets/svg/link.svg"></i
241
+ ></a>
101
242
  </span>
243
+ </div>
244
+ <ul class="list-style-type:none">
245
+ <li
246
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
247
+ <h4>
248
+ <span>fullscreen</span>
249
+ <span class="cocreate-badge success"
250
+ >boolean</span
251
+ >
252
+ <span class="cocreate-badge danger"
253
+ >required</span
254
+ >
255
+ </h4>
256
+ <p>true</p>
257
+ </li>
258
+ </ul>
102
259
  </div>
103
- <ul class="list-style-type:none ">
104
- <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
105
- <h4><span>fullscreen</span> <span class="cocreate-badge success">boolean</span> <span class="cocreate-badge danger">required</span></h4>
106
- <p>true</p>
107
- </li>
108
- </ul>
109
- </div>
110
260
 
111
- <div class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
112
- <!-- SandBox -->
113
- <div id="fullscreen-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#fullscreen-demo-section">
114
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#fullscreen-demo"]'>
261
+ <div
262
+ class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
263
+ <!-- SandBox -->
264
+ <div
265
+ id="fullscreen-demo"
266
+ class="border-bottom:1px_solid_lightgrey"
267
+ scroll
268
+ scroll-intersect="color:dodgerblue"
269
+ scroll-target="#fullscreen-demo-section">
270
+ <span
271
+ class="display:flex align-items:center width:fit-content"
272
+ hover="display:block!important"
273
+ hover-target="[href='#fullscreen-demo']">
115
274
  <h2 class="padding:5px_0px">Demo</h2>
116
- <a class="margin-left:10px display:none" href="#fullscreen-demo"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
275
+ <a
276
+ class="margin-left:10px display:none"
277
+ href="#fullscreen-demo"
278
+ ><i
279
+ class="height:20px fill:#505050"
280
+ src="/assets/svg/link.svg"></i
281
+ ></a>
117
282
  </span>
118
- </div>
119
- <div class="position:sticky top:0 padding:15px_0px height:100vh">
283
+ </div>
284
+ <div
285
+ class="position:sticky top:0 padding:15px_0px height:100vh">
120
286
  <!-- SandBox -->
121
- <div class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px" id="playground">
122
-
123
- <div id="demo-code" resizable class="position:relative height:50%">
124
- <textarea type="code" lang="html" collection="demos" document_id="" name="demo" save="false" id="demo" class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
125
- <div resize="bottom" class="background:lightgrey"></div>
287
+ <div
288
+ class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
289
+ id="playground">
290
+ <div
291
+ id="demo-code"
292
+ resizable
293
+ class="position:relative height:50%">
294
+ <textarea
295
+ type="code"
296
+ lang="html"
297
+ collection="demos"
298
+ document_id=""
299
+ name="demo"
300
+ save="false"
301
+ id="demo"
302
+ class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
303
+ <div
304
+ resize="bottom"
305
+ class="background:lightgrey"></div>
126
306
  </div>
127
-
128
- <div id="demo-preview" class="position:relative overflow:auto background-color:white">
129
- <div class="demopreview" class="padding:20px"></div>
307
+
308
+ <div
309
+ id="demo-preview"
310
+ class="position:relative overflow:auto background-color:white">
311
+ <div class="demopreview padding:20px"></div>
130
312
  </div>
131
-
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="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>
313
+
314
+ <div
315
+ class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
316
+ <a
317
+ class="margin-right:10px"
318
+ id="eye"
319
+ show="#eye-slash"
320
+ hide="#eye, #demo-preview"
321
+ toggle="code-height"
322
+ toggle-target="#demo-code"
323
+ ><i
324
+ class="height:18px fill:#505050"
325
+ src="/assets/svg/eye.svg"></i
326
+ ></a>
327
+ <a
328
+ class="margin-right:10px"
329
+ hidden
330
+ id="eye-slash"
331
+ show="#eye, #demo-preview"
332
+ hide="#eye-slash"
333
+ toggle="code-height"
334
+ toggle-target="#demo-code"
335
+ ><i
336
+ class="height:20px fill:#505050"
337
+ src="/assets/svg/eye-slash.svg"></i
338
+ ></a>
339
+ <a
340
+ class="margin-right:10px"
341
+ id="code"
342
+ show="#code-slash"
343
+ hide="#code, #demo-code"
344
+ ><i
345
+ class="height:20px fill:#505050"
346
+ src="/assets/svg/code.svg"></i
347
+ ></a>
348
+ <a
349
+ class="margin-right:10px"
350
+ hidden
351
+ id="code-slash"
352
+ show="#code, #demo-code"
353
+ hide="#code-slash"
354
+ ><i
355
+ class="display:flex height:18px fill:#505050"
356
+ src="/assets/svg/code.svg"></i
357
+ ></a>
358
+ <a
359
+ class="margin-right:5px"
360
+ fullscreen
361
+ fullscreen-target="#playground"></a>
138
362
  </div>
139
-
140
363
  </div>
141
364
  <!-- End SandBox -->
365
+ </div>
142
366
  </div>
143
367
  </div>
368
+ </main>
144
369
 
145
- </div>
146
- </div>
147
-
148
-
149
- <script src="./apikey.js"></script>
370
+ <script src="./apikey.js"></script>
150
371
  <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
151
- </body>
152
-
372
+ </body>
153
373
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/fullscreen",
3
- "version": "1.5.5",
3
+ "version": "1.5.6",
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,7 +59,7 @@
59
59
  "webpack-log": "^3.0.1"
60
60
  },
61
61
  "dependencies": {
62
- "@cocreate/docs": "^1.7.12",
63
- "@cocreate/observer": "^1.7.9"
62
+ "@cocreate/docs": "^1.7.13",
63
+ "@cocreate/observer": "^1.8.0"
64
64
  }
65
65
  }