@dkvz/img-lightbox 1.0.0 → 1.1.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.
- package/README.md +0 -16
- package/dist/example_preview.6877a52a.jpg +0 -0
- package/dist/index.html +45 -0
- package/dist/shadow.aa007e53.js +899 -0
- package/dist/shadow.aa007e53.js.map +1 -0
- package/dist/up_/up_/assets/example.jpg +0 -0
- package/package.json +1 -1
- package/src/shadow/img-lightbox.js +12 -4
- package/dist/img-lightbox.js +0 -198
- package/dist/img-lightbox.js.map +0 -1
- package/dist/img-lightbox.mjs +0 -187
- package/dist/img-lightbox.mjs.map +0 -1
package/README.md
CHANGED
|
@@ -147,22 +147,6 @@ if (event.altKey)
|
|
|
147
147
|
## Resources and copyright notices
|
|
148
148
|
- The hourglass icon has been modified from the GPL-licensed file here: https://fr.wikipedia.org/wiki/Fichier:Circle-icons-hourglass.svg
|
|
149
149
|
|
|
150
|
-
## Upgrade to parcel 2
|
|
151
|
-
The doc: https://parceljs.org/migration/parcel-1/
|
|
152
|
-
|
|
153
|
-
I removed all of these deps:
|
|
154
|
-
```
|
|
155
|
-
"parcel-bundler": "^1.12.4",
|
|
156
|
-
"parcel-plugin-clean-dist": "0.0.6",
|
|
157
|
-
"parcel-plugin-url-loader": "^1.3.1",
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
Then added the latest parcel through npm install.
|
|
161
|
-
|
|
162
|
-
I need to add a manual wipe of the dist folder before the build commands, doing a quick rimraf for now.
|
|
163
|
-
|
|
164
|
-
I also had to change how the loading SVG gets inlined. It's now imported as a string.
|
|
165
|
-
|
|
166
150
|
## TODO
|
|
167
151
|
- [ ] Test on all browsers
|
|
168
152
|
- [ ] Write tests - Probably going to need jsdom
|
|
Binary file
|
package/dist/index.html
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Test page for the img-lightbox component</title><style>* {
|
|
2
|
+
box-sizing: border-box;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
body {
|
|
6
|
+
font-family: sans-serif;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
img-lightbox {
|
|
10
|
+
background-color: #333;
|
|
11
|
+
border: 1px solid #333;
|
|
12
|
+
display: inline-block;
|
|
13
|
+
box-shadow: 0 0 4px #0009;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
img-lightbox a, img-lightbox img {
|
|
17
|
+
max-width: 200px;
|
|
18
|
+
display: block;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
img-lightbox:active, img-lightbox:focus {
|
|
22
|
+
outline: 2px solid #00008b;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.big-div {
|
|
26
|
+
background-color: silver;
|
|
27
|
+
height: 250vh;
|
|
28
|
+
}
|
|
29
|
+
</style></head><body><h1>Test page</h1>
|
|
30
|
+
<p>The image should still show and link to the full version with JS disabled.</p>
|
|
31
|
+
|
|
32
|
+
<img-lightbox>
|
|
33
|
+
<a href="/up_/up_/assets/example.jpg" target="_blank" rel="noopener noreferrer">
|
|
34
|
+
<img src="/example_preview.6877a52a.jpg" alt="Some cute cat">
|
|
35
|
+
</a>
|
|
36
|
+
</img-lightbox>
|
|
37
|
+
|
|
38
|
+
<p>I'm adding a big div below to have a scrolling page.</p>
|
|
39
|
+
|
|
40
|
+
<div class="big-div">
|
|
41
|
+
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<script type="module" src="/shadow.aa007e53.js"></script>
|
|
45
|
+
</body></html>
|