From 3d2cf0a2143ceb3adfbe7ce368b4958010dc5d99 Mon Sep 17 00:00:00 2001 From: Tony Air Date: Sun, 31 Jan 2021 04:01:47 +0700 Subject: [PATCH] IMPR: React.JS embed friendly version --- src/scss/_window.scss | 158 ++++++++++++++++++++++++++++++++++++++++++ src/test-pajax.html | 84 ++++++++++++++++++++++ src/test.json | 4 ++ 3 files changed, 246 insertions(+) create mode 100755 src/scss/_window.scss create mode 100755 src/test-pajax.html create mode 100755 src/test.json diff --git a/src/scss/_window.scss b/src/scss/_window.scss new file mode 100755 index 0000000..dc4b891 --- /dev/null +++ b/src/scss/_window.scss @@ -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%; + } + } +} diff --git a/src/test-pajax.html b/src/test-pajax.html new file mode 100755 index 0000000..89adc09 --- /dev/null +++ b/src/test-pajax.html @@ -0,0 +1,84 @@ +

Test HTML-content with PAJAX response

+

+ 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. +

+ +https://twitter.com/reactjs/status/964689022747475968 + +

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

diff --git a/src/test.json b/src/test.json new file mode 100755 index 0000000..0803745 --- /dev/null +++ b/src/test.json @@ -0,0 +1,4 @@ +{ + "Title": "Test Title!", + "Content": "Test HTML-content with JSON response" +}