mirror of
https://github.com/a2nt/meta-lightbox.git
synced 2024-10-22 17:05:53 +02:00
IMPR: React.JS embed friendly version
This commit is contained in:
Tony Air
parent
102748a913
commit
3d2cf0a214
158
src/scss/_window.scss
Executable file
158
src/scss/_window.scss
Executable 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
84
src/test-pajax.html
Executable 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
4
src/test.json
Executable file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"Title": "Test Title!",
|
||||||
|
"Content": "Test <b>HTML</b>-content with JSON response"
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user