Skip to content

Commit c2973b4

Browse files
Bram DoppenBram Doppen
Bram Doppen
authored and
Bram Doppen
committed
Initial
0 parents  commit c2973b4

File tree

13 files changed

+7498
-0
lines changed

13 files changed

+7498
-0
lines changed

‎.gitignore‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.DS_Store
2+
node_modules
3+
4+
# local env files
5+
.env.local
6+
.env.*.local
7+
8+
# Log files
9+
npm-debug.log*
10+
yarn-debug.log*
11+
yarn-error.log*
12+
13+
# Editor directories and files
14+
.idea
15+
.vscode
16+
*.suo
17+
*.ntvs*
18+
*.njsproj
19+
*.sln
20+
*.sw?

‎README.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Perplex Lightbox
2+
Lightbox/Modal that is accessible and supports animations (CSS & GSAP)
3+
4+
## Import plugin
5+
The plugin is available as a ES-module, CommonJS-module and Universal Module (UMD)
6+
#### ESM:
7+
```js
8+
import Lightbox from '../../dist/perplex.lightbox.js';
9+
```
10+
11+
#### UMD:
12+
Load this file in your HTML:
13+
```html
14+
<script src="'../../dist/perplex.lightbox.umd.js"></script>
15+
```
16+
17+
## Usage
18+
```js
19+
var lightboxElem = document.getElementById("lightbox");
20+
var myLightbox = new Lightbox(lightboxElem);
21+
22+
-- In your event listener: --
23+
myLightbox.open();
24+
```
25+
26+
## Options
27+
### Arguments
28+
Lightbox() takes two arguments: element and options
29+
Option | Type | Default | Description
30+
------ | ---- | ------- | -----------
31+
elem | DOM Node or jQuery object | null | Lightbox container element (required).
32+
options | object | {} | Options for controlling animations.
33+
34+
#### Options-arguments (all optional)
35+
Option | Type | Default | Description
36+
------ | ---- | ------- | -----------
37+
duration | Number | 400 | Duration of the animations (in ms).
38+
staticEaseOpen | String | "cubic-bezier(0.21, 0.49, 0.1, 0.99)"" | Easing to apply on the CSS-animation when lightbox opens.
39+
staticEaseClose | String | "ease-in" | Easing to apply on the CSS-animation when lightbox closes.
40+
gsapEaseOpen | String | "expo.out" | Easing to apply on when lightbox opens.
41+
gsapEaseClose | String | "power1.in" | Easing to apply on when lightbox closes.
42+
43+
**Valid easings:**
44+
- Gsap easings: https://greensock.com/ease-visualizer/;
45+
- Static/CSS easings: every CSS-value accepted by 'transition-timing-function' is valid.
46+
47+
## Methods
48+
49+
Method | Arguments | Description
50+
------ | ----- | ---------
51+
open | none | Opens the lightbox.
52+
close | none | Closes the lightbox.
53+
addCallback | callback[function], moment[string] | Adds a callback function which will be executed at a specific 'moment' in time. Valid moments are: "onOpenBegin", "onOpenEnd", "onCloseBegin", "onCloseEnd".

‎demo/dist/bundle.umd.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/dist/bundle.umd.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/index.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<html>
2+
3+
<head>
4+
<title>PerplexLightbox Demo</title>
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
6+
<link rel="icon" href="/" />
7+
<link rel="stylesheet" href="./src/style.css" />
8+
</head>
9+
10+
<body>
11+
<div class="pplx-lightbox__container js-lightbox" role="dialog" aria-modal="true" aria-labelledby="Modal X" aria-describedby="Extra information about X">
12+
<div class="pplx-lightbox__scroll-container">
13+
<section class="pplx-lightbox__item js-lightboxElem">
14+
<button type="button" class="pplx-lightbox__close js-lightboxClose">
15+
<span class="vh">Close</span>
16+
<svg xmlns="http://www.w3.org/2000/svg" style="fill: currentColor; width: 1.6rem; height: 1.6rem;" viewBox="0 0 40 40">
17+
<path d="M29.9,27.9l-7.9-8l7.8-7.8c0.5-0.5,0.5-1.3,0-1.8l-0.2-0.2c-0.5-0.5-1.3-0.5-1.8,0L20,17.9l-7.9-7.8c-0.5-0.5-1.3-0.5-1.8,0l-0.2,0.2c-0.5,0.5-0.5,1.3,0,1.8l7.9,7.8l-8,8c-0.4,0.5-0.4,1.3,0,1.8l0.2,0.2c0.5,0.5,1.3,0.5,1.8,0l8-8l7.9,8c0.4,0.5,1.2,0.5,1.8,0l0.2-0.2C30.4,29.2,30.4,28.4,29.9,27.9z"/>
18+
</svg>
19+
</button>
20+
<header class="pplx-lightbox__header l-item l-item--xs">
21+
<h3>Qui igitur convenit ab alia voluptate.</h3>
22+
<p>Nihil opus est exemplis hoc facere longius. Sit sane ista voluptas.</p>
23+
</header>
24+
<article class="pplx-lightbox__content l-item l-item--sm">
25+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qui igitur convenit ab alia voluptate dicere naturam proficisci, in alia summum bonum ponere? Quid ergo? Facit enim ille duo seiuncta ultima bonorum, quae ut essent vera, coniungi debuerunt; Ergo hoc quidem apparet, nos ad agendum esse natos. Illud dico, ea, quae dicat, praeclare inter se cohaerere. Duo Reges: constructio interrete. Sed haec quidem liberius ab eo dicuntur et saepius. Haec bene dicuntur, nec ego repugno, sed inter sese ipsa pugnant. Quare conare, quaeso. </p>
26+
27+
<p>Quamquam id quidem, infinitum est in hac urbe; Mihi enim satis est, ipsis non satis. Ne discipulum abducam, times. Nihil opus est exemplis hoc facere longius. Sit sane ista voluptas. Sed erat aequius Triarium aliquid de dissensione nostra iudicare. Dolere malum est: in crucem qui agitur, beatus esse non potest. In qua si nihil est praeter rationem, sit in una virtute finis bonorum; Atqui reperies, inquit, in hoc quidem pertinacem; Quae in controversiam veniunt, de iis, si placet, disseramus. </p>
28+
29+
<form>
30+
<label for="question-1">Question</label>
31+
<input id="question-1" placeholder="Answer">
32+
<button type="submit">Send</button>
33+
</form>
34+
35+
<p>Animi enim quoque dolores percipiet omnibus partibus maiores quam corporis. Fatebuntur Stoici haec omnia dicta esse praeclare, neque eam causam Zenoni desciscendi fuisse. Etenim nec iustitia nec amicitia esse omnino poterunt, nisi ipsae per se expetuntur. Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Quod cum ille dixisset et satis disputatum videretur, in oppidum ad Pomponium perreximus omnes. Ut in geometria, prima si dederis, danda sunt omnia. Verba tu fingas et ea dicas, quae non sentias? Itaque contra est, ac dicitis; </p>
36+
</article>
37+
</section>
38+
</div>
39+
<div class="pplx-lightbox__background"></div>
40+
</div>
41+
42+
<button class="js-triggerBox">Open lightbox</button>
43+
44+
<script
45+
src="https://code.jquery.com/jquery-3.4.1.js"
46+
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
47+
crossorigin="anonymous"></script>
48+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.js"></script>
49+
50+
<script src="dist/bundle.umd.js"></script>
51+
</body>
52+
53+
</html>

‎demo/src/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Lightbox from '../../dist/perplex.lightbox';
2+
3+
var lightboxElem = $(".js-lightbox");
4+
var myLightbox = new Lightbox(lightboxElem);
5+
6+
window.PerplexLightbox = Lightbox;
7+
8+
$(".js-triggerBox").on("click", function() {
9+
myLightbox.open();
10+
});

‎demo/src/style.css‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
.pplx-lightbox__container {
2+
position: fixed;
3+
top: 0;
4+
right: 0;
5+
bottom: 0;
6+
left: 0;
7+
width: 100%;
8+
height: 100%;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
z-index: 999;
13+
opacity: 0;
14+
display: none;
15+
}
16+
17+
@keyframes containerShow {
18+
from {
19+
opacity: 0;
20+
}
21+
to {
22+
opacity: 1;
23+
}
24+
}
25+
@keyframes containerHide {
26+
from {
27+
opacity: 1;
28+
}
29+
to {
30+
opacity: 0;
31+
}
32+
}
33+
@keyframes itemShow {
34+
from {
35+
opacity: 0;
36+
transform: scale(0.9);
37+
}
38+
to {
39+
opacity: 1;
40+
transform: scale(1);
41+
}
42+
}
43+
@keyframes itemHide {
44+
from {
45+
opacity: 1;
46+
transform: scale(1);
47+
}
48+
to {
49+
opacity: 0;
50+
transform: scale(0.95);
51+
}
52+
}
53+
.pplx-lightbox__scroll-container {
54+
position: relative;
55+
overflow: auto;
56+
-webkit-overflow-scrolling: touch;
57+
z-index: 10;
58+
width: 100%;
59+
height: 100%;
60+
}
61+
.pplx-lightbox__item {
62+
position: relative;
63+
max-width: 560px;
64+
width: 100%;
65+
background: #fff;
66+
color: #000;
67+
border-radius: 10px;
68+
margin: 70px auto 60px;
69+
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
70+
}
71+
.pplx-lightbox__header {
72+
background: linear-gradient(50deg, #fa7a00 25%, #e10057);
73+
color: #fff;
74+
padding: 40px 80px 20px;
75+
border-radius: 10px 10px 0 0;
76+
position: relative;
77+
top: -10px;
78+
}
79+
.pplx-lightbox__header + article {
80+
padding-top: 40px;
81+
}
82+
@media (min-width: 48em) {
83+
.pplx-lightbox__header {
84+
display: flex;
85+
flex-direction: column;
86+
justify-content: flex-end;
87+
}
88+
}
89+
@media (max-width: 47.999em) {
90+
.pplx-lightbox__header {
91+
padding-left: 60px;
92+
padding-right: 60px;
93+
}
94+
}
95+
.pplx-lightbox__content {
96+
padding: 70px 80px 60px;
97+
}
98+
@media (max-width: 47.999em) {
99+
.pplx-lightbox__content {
100+
padding-left: 60px;
101+
padding-right: 60px;
102+
}
103+
}
104+
.pplx-lightbox__close {
105+
position: absolute;
106+
top: 20px;
107+
right: 20px;
108+
bottom: auto;
109+
left: auto;
110+
width: 40px;
111+
height: 40px;
112+
border-radius: 50%;
113+
background: #2d1d3f;
114+
z-index: 10;
115+
color: #fff;
116+
display: flex;
117+
justify-content: center;
118+
align-items: center;
119+
border: 0;
120+
transition: all 0.2s ease-in-out;
121+
}
122+
.pplx-lightbox__close > * {
123+
transition: all 0.2s ease-in-out;
124+
}
125+
.pplx-lightbox__close:hover,
126+
.pplx-lightbox__close:focus {
127+
background: rgba(45, 29, 63, 0.5);
128+
}
129+
.pplx-lightbox__close:hover > *,
130+
.pplx-lightbox__close:focus > * {
131+
transform: scale(1.1);
132+
}
133+
.pplx-lightbox__background {
134+
position: absolute;
135+
top: 0;
136+
right: 0;
137+
bottom: 0;
138+
left: 0;
139+
background: rgba(0, 0, 0, 0.8);
140+
}
141+
142+
.vh {
143+
position: absolute !important;
144+
height: 1px !important;
145+
width: 1px !important;
146+
overflow: hidden !important;
147+
clip: rect(1px,1px,1px,1px) !important;
148+
}

0 commit comments

Comments
 (0)