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: allow to load js and css independatally to custoize _variables

Browse Source
This commit is contained in:
Tony Air 2021-04-02 15:36:27 +07:00
parent c8451c56fe
commit 4542f586ac
5 changed files with 228 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/report.html vendored
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>@a2nt/meta-lightbox-react [24 Feb 2021 at 20:22]</title>
<title>@a2nt/meta-lightbox-react [24 Feb 2021 at 20:24]</title>
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
<script>

2
src/js/_index.js Executable file
View File

@ -0,0 +1,2 @@
import styles from '../scss/_window.scss';
import './app';

1
src/js/_window.jsx
View File

@ -4,7 +4,6 @@
import Events from './_events';
import { Component } from 'react';
import styles from '../scss/_window.scss';
import Embed, { defaultProviders } from 'react-tiny-oembed';

10
src/scss/_variables.scss
View File

@ -6,7 +6,7 @@ $body-color: $clr-black !default;
$grid-gutter-width: 2rem !default;
$grid-gutter-height: 2rem !default;
$meta-overlay-bg: transparentize($clr-grey-600, 0.2) !default;
$meta-overlay-bg: transparentize($clr-black, 0.2) !default;
$meta-text-wrapper-bg: $body-bg !default;
$meta-text-wrapper-color: $body-color !default;
@ -15,10 +15,12 @@ $meta-text-wrapper-padding-height: $grid-gutter-height/2 !default;
$meta-nav-size: 2rem !default;
$meta-nav-arrows-size: 2.5rem !default;
$meta-nav-color: $clr-grey-900 !default;
$meta-nav-color: $clr-white !default;
$meta-nav-hover-color: $clr-blue-grey-50 !default;
$meta-nav-hover-bg: $clr-blue !default;
$meta-nav-hover-shadow: $clr-white !default;
$meta-nav-hover-bg: none !default;
$meta-nav-hover-shadow: $clr-black !default;
$meta-nav-hover-transform: scale(1.5) !default;
$meta-nav-close-hover-transform: rotate(-180deg) !default;
$meta-nav-padding: 0.25rem 0.5rem !default;

400
src/scss/_window.scss
View File

@ -3,207 +3,245 @@
$module_name: 'meta-MetaWindow';
.sr-only {
@include sr-only();
@include sr-only();
}
.#{$module_name} {
position: fixed;
position: fixed;
// lightbox inner elements
.meta-spinner_embed,
.meta-spinner,
.meta-error {
display: none;
align-items: center;
justify-content: center;
z-index: 2;
text-align: center;
}
// 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();
.meta-spinner_embed,
.meta-spinner {
@include spinner_style();
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.meta-spinner_embed {
display: flex;
}
.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;
z-index: 98;
&-overlay {
background: $meta-overlay-bg;
display: none;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
align-items: center;
justify-content: center;
z-index: 98;
// meta states
&__open {
display: flex;
}
// meta states
&__open {
display: flex;
}
&__loading {
.meta-spinner {
display: flex;
}
}
&__error {
.meta-content {
justify-content: center;
}
.meta-error {
display: flex;
}
}
}
&__loading {
.meta-spinner {
display: flex;
}
}
// navs
.meta-nav {
font-size: $meta-nav-size;
color: $meta-nav-color;
text-shadow: $meta-nav-hover-shadow 0 0 0.25em;
border: 0;
background: none;
z-index: 2;
&__error {
.meta-content {
justify-content: center;
}
@include hover-focus() {
color: $meta-nav-hover-color;
background: $meta-nav-hover-bg;
text-shadow: none;
text-decoration: none;
}
}
.meta-error {
display: flex;
}
}
}
.meta-nav-arrow {
position: absolute;
bottom: 0;
top: auto;
display: flex;
justify-content: center;
align-items: center;
font-size: $meta-nav-arrows-size;
padding: $meta-nav-padding;
z-index: 2;
// navs
.meta-nav {
font-size: $meta-nav-size;
color: $meta-nav-color;
text-shadow: $meta-nav-hover-shadow 0 0 0.25em;
border: 0;
background: none;
z-index: 2;
@media (min-width: map-get($grid-breakpoints, 'lg')) {
top: 0;
bottom: 0;
}
&__next {
right: 0;
}
&__prev {
left: 0;
}
@media (min-width: map-get($grid-breakpoints, 'lg')) {
&__next {
right: -($meta-nav-arrows-size + 0.5);
}
&__prev {
left: -($meta-nav-arrows-size + 0.5);
}
}
}
@include hover-focus() {
color: $meta-nav-color;
}
.meta-close {
position: absolute;
top: -3rem;
right: 0;
width: 1.25em;
@media (min-width: map-get($grid-breakpoints, 'lg')) {
top: -($meta-nav-arrows-size + 0.5);
right: -($meta-nav-arrows-size + 0.5);
}
}
&:hover {
color: $meta-nav-hover-color;
background: $meta-nav-hover-bg;
text-shadow: none;
text-decoration: none;
}
.meta-content {
position: relative;
width: 100%;
height: 80%;
display: flex;
flex-direction: column;
z-index: 1;
@media (min-width: map-get($grid-breakpoints, 'lg')) {
width: 90%;
height: 90%;
width: calc(90% - 3rem);
height: calc(90% - 3rem);
}
}
}
.meta-wrap {
max-height: 100%;
max-width: 100%;
width: 100%;
overflow: auto;
word-break: break-word;
img {
max-width: 100%;
max-height: 100%;
}
}
.meta-nav-arrow {
position: absolute;
bottom: 0;
top: auto;
display: flex;
justify-content: center;
align-items: center;
font-size: $meta-nav-arrows-size;
padding: $meta-nav-padding;
z-index: 2;
// Lightbox types
@include hover-focus() {
&__text {
.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%;
img {
margin: 0;
}
}
}
&__video,
&__embed {
@include responsive-ratio($meta-video-width, $meta-video-height, true);
.fa,
.fas,
.far,
.fab {
transform: $meta-nav-hover-transform;
}
}
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;
@media (min-width: map-get($grid-breakpoints, 'lg')) {
top: 0;
bottom: 0;
}
&:before {
content: 'Unable to load. Please follow the provided link: ';
display: block;
}
}
&__next {
right: 0;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
&__prev {
left: 0;
}
@media (min-width: map-get($grid-breakpoints, 'lg')) {
&__next {
right: -($meta-nav-arrows-size + 0.5);
}
&__prev {
left: -($meta-nav-arrows-size + 0.5);
}
}
}
.meta-close {
position: absolute;
top: -3rem;
right: 0;
width: 1.25em;
&:hover {
.fa,
.fas,
.far,
.fab {
transform: $meta-nav-close-hover-transform;
}
}
@media (min-width: map-get($grid-breakpoints, 'lg')) {
top: -($meta-nav-arrows-size + 0.5);
right: -($meta-nav-arrows-size + 0.5);
}
}
.meta-content {
position: relative;
width: 100%;
height: 80%;
display: flex;
flex-direction: column;
z-index: 1;
@media (min-width: map-get($grid-breakpoints, 'lg')) {
width: 90%;
height: 90%;
width: calc(90% - 3rem);
height: calc(90% - 3rem);
}
}
.meta-wrap {
max-height: 100%;
max-width: 100%;
width: 100%;
overflow: auto;
word-break: break-word;
img {
max-width: 100%;
max-height: 100%;
}
}
// Lightbox types
&__text {
.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%;
img {
margin: 0;
}
}
}
&__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%;
}
}
}