tonyair/meta-lightbox
1
0
Fork 0
mirror of https://github.com/a2nt/meta-lightbox.git synced 2024-10-22 17:05:53 +02:00
Code Issues Projects Releases Wiki Activity

IMPR: React.JS embed friendly version

Browse Source
This commit is contained in:
Tony Air 2021-01-31 04:01:47 +07:00
parent 102748a913
commit 3d2cf0a214
3 changed files with 246 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
src/scss/_window.scss Executable file
View File

@ -0,0 +1,158 @@
@import '_variables';
$module_name: 'meta-MetaWindow';
.sr-only {
@include sr-only();
}
.#{$module_name} {
// lightbox inner elements
.meta-spinner_embed,
.meta-spinner,
.meta-error {
display: none;
align-items: center;
justify-content: center;
z-index: 2;
text-align: center;
}
.meta-spinner_embed,
.meta-spinner {
@include spinner_style();
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.meta-spinner_embed {
display: flex;
}
&-overlay {
background: $meta-overlay-bg;
display: none;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
align-items: center;
justify-content: center;
// meta states
&__open {
display: flex;
}
&__loading {
.meta-spinner {
display: flex;
}
}
&__error {
.meta-content {
justify-content: center;
}
.meta-error {
display: flex;
}
}
}
.meta-close {
font-size: $meta-close-size;
color: $meta-close-color;
text-shadow: $meta-close-hover-shadow 0 0 0.25em;
position: absolute;
top: 0;
right: 0;
padding: 0.5em 0.651em;
border: 0;
background: none;
z-index: 2;
@include hover-focus() {
color: $meta-close-hover-color;
background: $meta-close-hover-bg;
text-shadow: none;
}
}
.meta-content {
position: relative;
width: 90%;
height: 90%;
display: flex;
flex-direction: column;
}
.meta-wrap {
max-height: 100%;
max-width: 100%;
width: 100%;
overflow: auto;
img {
max-width: 100%;
max-height: 100%;
}
}
// Lightbox types
&__text {
.meta-close {
background: $meta-text-wrapper-bg;
}
.meta-content {
background: $meta-text-wrapper-bg;
color: $meta-text-wrapper-color;
padding: $meta-text-wrapper-padding-height
$meta-text-wrapper-padding-width;
padding-right: 0;
}
.meta-wrap {
padding-right: $meta-text-wrapper-padding-width;
}
}
&__image,
&__video {
.typography,
.meta-wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-height: 100%;
max-width: 100%;
min-height: 100%;
}
}
&__video,
&__embed {
@include responsive-ratio($meta-video-width, $meta-video-height, true);
a[rel='nofollow noreferrer noopener'] {
color: $meta-embed-loading-failed-color;
font-size: $meta-embed-loading-failed-size;
font-weight: $meta-embed-loading-failed-weight;
&:before {
content: 'Unable to load. Please follow the provided link: ';
display: block;
}
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}

84
src/test-pajax.html Executable file
View File

@ -0,0 +1,84 @@
<h2>Test <b>HTML</b>-content with PAJAX response</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</p>
https://twitter.com/reactjs/status/964689022747475968
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</p>

4
src/test.json Executable file
View File

@ -0,0 +1,4 @@
{
"Title": "Test Title!",
"Content": "Test <b>HTML</b>-content with JSON response"
}