diff --git a/components/organisms/card-hero/card-hero.css b/components/organisms/card-hero/card-hero.css
index 1a9fb24c617bf719a6265bc0f32cc62c74e8d2b2..140f3ec23d7d194920643d5960234941c9725102 100644
--- a/components/organisms/card-hero/card-hero.css
+++ b/components/organisms/card-hero/card-hero.css
@@ -1,106 +1,3 @@
-.varbase-hero-card img,
-.varbase-hero-card .drimage img {
- top: 0;
- width: 100%;
- min-height: 43.75rem;
- object-fit: cover;
-}
-
-[dir="ltr"] .varbase-hero-card img,
-[dir="ltr"] .varbase-hero-card .drimage img {
- left: 0;
-}
-
-[dir="rtl"] .varbase-hero-card img,
-[dir="rtl"] .varbase-hero-card .drimage img {
- right: 0;
-}
-
-.varbase-hero-card .media {
- top: 0;
- width: 100%;
- height: 100%;
- object-fit: cover;
-}
-
-[dir="ltr"] .varbase-hero-card .media {
- left: 0;
-}
-
-[dir="rtl"] .varbase-hero-card .media {
- right: 0;
-}
-
-.varbase-hero-card .media img,
-.varbase-hero-card .media .drimage img {
- top: 0;
- width: 100%;
- min-height: 43.75rem;
- object-fit: cover;
-}
-
-[dir="ltr"] .varbase-hero-card .media img,
-[dir="ltr"] .varbase-hero-card .media .drimage img {
- left: 0;
-}
-
-[dir="rtl"] .varbase-hero-card .media img,
-[dir="rtl"] .varbase-hero-card .media .drimage img {
- right: 0;
-}
-
-.varbase-hero-card .media video {
- top: 0;
- width: 100%;
- min-height: 43.75rem;
- object-fit: cover;
-}
-
-[dir="ltr"] .varbase-hero-card .media video {
- left: 0;
-}
-
-[dir="rtl"] .varbase-hero-card .media video {
- right: 0;
-}
-
-.varbase-hero-card .media iframe {
- position: absolute;
- object-fit: cover;
-}
-
-[dir="ltr"] .varbase-hero-card .media iframe {
- left: 0;
-}
-
-[dir="rtl"] .varbase-hero-card .media iframe {
- right: 0;
-}
-
-.varbase-hero-card .varbase-video-player.ratio {
- position: relative;
- width: 100vw;
- height: 130vh;
- top: 50%;
- padding-bottom: 0;
-}
-
-[dir="ltr"] .varbase-hero-card .varbase-video-player.ratio {
- left: 50%;
- transform: translateY(-50%) translateX(-50%);
-}
-
-[dir="rtl"] .varbase-hero-card .varbase-video-player.ratio {
- right: 50%;
- transform: translateY(-50%) translateX(50%);
-}
-
-@media screen and (min-width: 1200px) {
- .varbase-hero-card .varbase-video-player.ratio {
- height: auto;
- }
-}
-
.varbase-hero-card.hero-style-overlay {
min-height: 43.75rem;
max-height: 43.75rem;
@@ -148,6 +45,42 @@
max-width: 53rem;
}
+@media screen and (max-width: 576px) {
+ .varbase-hero-card.hero-style-overlay .hero-card-content {
+ padding-bottom: 9.375rem;
+ }
+}
+
+@media screen and (min-width: 576px) {
+ .varbase-hero-card.hero-style-overlay .hero-card-content {
+ padding: 1.88rem calc((100vw - 540px) / 2) 3.88rem;
+ }
+}
+
+@media screen and (min-width: 768px) {
+ .varbase-hero-card.hero-style-overlay .hero-card-content {
+ padding: 1.88rem calc((100vw - 720px) / 2 + .75rem) 3.88rem;
+ }
+}
+
+@media screen and (min-width: 992px) {
+ .varbase-hero-card.hero-style-overlay .hero-card-content {
+ padding: 1.88rem calc((100vw - 960px) / 2 + .75rem) 9.375rem;
+ }
+}
+
+@media screen and (min-width: 1200px) {
+ .varbase-hero-card.hero-style-overlay .hero-card-content {
+ padding: 1.88rem calc((100vw - 1140px) / 2 + .75rem) 9.375rem;
+ }
+}
+
+@media screen and (min-width: 1400px) {
+ .varbase-hero-card.hero-style-overlay .hero-card-content {
+ padding: 1.88rem calc((100vw - 1320px) / 2 + .75rem) 9.375rem;
+ }
+}
+
.varbase-hero-card.hero-style-overlay .hero-card-content .card-title {
color: #fff;
font-size: calc(1.475rem + 2.7vw);
@@ -238,40 +171,71 @@
}
}
-@media screen and (max-width: 576px) {
- .varbase-hero-card.hero-style-overlay .hero-card-content {
- padding-bottom: 9.375rem;
- }
+.varbase-hero-card.hero-style-overlay .media {
+ position: relative;
+ width: 100vw;
+ height: 130vh;
+ top: 50%;
+ padding-bottom: 0;
}
-@media screen and (min-width: 576px) {
- .varbase-hero-card.hero-style-overlay .hero-card-content {
- padding: 1.88rem calc((100vw - 540px) / 2) 3.88rem;
- }
+[dir="ltr"] .varbase-hero-card.hero-style-overlay .media {
+ left: 50%;
+ transform: translateY(-50%) translateX(-50%);
}
-@media screen and (min-width: 768px) {
- .varbase-hero-card.hero-style-overlay .hero-card-content {
- padding: 1.88rem calc((100vw - 720px) / 2 + .75rem) 3.88rem;
- }
+[dir="rtl"] .varbase-hero-card.hero-style-overlay .media {
+ right: 50%;
+ transform: translateY(-50%) translateX(50%);
}
-@media screen and (min-width: 992px) {
- .varbase-hero-card.hero-style-overlay .hero-card-content {
- padding: 1.88rem calc((100vw - 960px) / 2 + .75rem) 9.375rem;
+@media screen and (min-width: 1200px) {
+ .varbase-hero-card.hero-style-overlay .media {
+ height: auto;
}
}
-@media screen and (min-width: 1200px) {
- .varbase-hero-card.hero-style-overlay .hero-card-content {
- padding: 1.88rem calc((100vw - 1140px) / 2 + .75rem) 9.375rem;
- }
+.varbase-hero-card.hero-style-overlay .media .drimage img {
+ top: 0;
+ width: 100%;
+ min-height: 43.75rem;
+ object-fit: cover;
}
-@media screen and (min-width: 1400px) {
- .varbase-hero-card.hero-style-overlay .hero-card-content {
- padding: 1.88rem calc((100vw - 1320px) / 2 + .75rem) 9.375rem;
- }
+[dir="ltr"] .varbase-hero-card.hero-style-overlay .media .drimage img {
+ left: 0;
+}
+
+[dir="rtl"] .varbase-hero-card.hero-style-overlay .media .drimage img {
+ right: 0;
+}
+
+.varbase-hero-card.hero-style-overlay .media .varbase-video-player video {
+ top: 0;
+ width: 100%;
+ min-height: 43.75rem;
+ object-fit: cover;
+}
+
+[dir="ltr"] .varbase-hero-card.hero-style-overlay .media .varbase-video-player video {
+ left: 0;
+}
+
+[dir="rtl"] .varbase-hero-card.hero-style-overlay .media .varbase-video-player video {
+ right: 0;
+}
+
+.varbase-hero-card.hero-style-overlay .media .varbase-video-player iframe {
+ position: absolute;
+ object-fit: cover;
+}
+
+[dir="ltr"] .varbase-hero-card.hero-style-overlay .media .varbase-video-player iframe {
+ left: 0;
+}
+
+[dir="rtl"] .varbase-hero-card.hero-style-overlay .media .varbase-video-player iframe {
+ right: 0;
}
@media screen and (min-width: 768px) {
@@ -329,33 +293,77 @@
}
}
-@media screen and (min-width: 992px) {
- .varbase-hero-card.hero-style-start, .varbase-hero-card.hero-style-end {
- min-height: 43.75rem;
- max-height: 43.75rem;
- }
+.varbase-hero-card.hero-style-top .media, .varbase-hero-card.hero-style-bottom .media {
+ position: relative;
+ width: 100vw;
+ height: 130vh;
+ top: 50%;
+ padding-bottom: 0;
}
-@media screen and (min-width: 992px) {
- .varbase-hero-card.hero-style-start .hero-card-content.card-body, .varbase-hero-card.hero-style-end .hero-card-content.card-body {
- min-height: 43.75rem;
+[dir="ltr"] .varbase-hero-card.hero-style-top .media, [dir="ltr"] .varbase-hero-card.hero-style-bottom .media {
+ left: 50%;
+ transform: translateY(-50%) translateX(-50%);
+}
+
+[dir="rtl"] .varbase-hero-card.hero-style-top .media, [dir="rtl"] .varbase-hero-card.hero-style-bottom .media {
+ right: 50%;
+ transform: translateY(-50%) translateX(50%);
+}
+
+@media screen and (min-width: 1200px) {
+ .varbase-hero-card.hero-style-top .media, .varbase-hero-card.hero-style-bottom .media {
+ height: auto;
}
}
+.varbase-hero-card.hero-style-top .media .drimage img, .varbase-hero-card.hero-style-bottom .media .drimage img {
+ top: 0;
+ width: 100%;
+ min-height: 43.75rem;
+ object-fit: cover;
+}
+
+[dir="ltr"] .varbase-hero-card.hero-style-top .media .drimage img, [dir="ltr"] .varbase-hero-card.hero-style-bottom .media .drimage img {
+ left: 0;
+}
+
+[dir="rtl"] .varbase-hero-card.hero-style-top .media .drimage img, [dir="rtl"] .varbase-hero-card.hero-style-bottom .media .drimage img {
+ right: 0;
+}
+
@media screen and (min-width: 992px) {
- .varbase-hero-card.hero-style-start .card-body, .varbase-hero-card.hero-style-end .card-body {
- min-height: 43.75rem;
+ .varbase-hero-card.hero-style-top .media .drimage picture, .varbase-hero-card.hero-style-bottom .media .drimage picture {
max-height: 43.75rem;
}
}
-@media screen and (max-width: 992px) {
- .varbase-hero-card.hero-style-start .card-img, .varbase-hero-card.hero-style-end .card-img {
- overflow: hidden;
- width: 100%;
- min-height: 43.75rem;
- max-height: 43.75rem;
- }
+.varbase-hero-card.hero-style-top .media .varbase-video-player video, .varbase-hero-card.hero-style-bottom .media .varbase-video-player video {
+ top: 0;
+ width: 100%;
+ min-height: 43.75rem;
+ object-fit: cover;
+}
+
+[dir="ltr"] .varbase-hero-card.hero-style-top .media .varbase-video-player video, [dir="ltr"] .varbase-hero-card.hero-style-bottom .media .varbase-video-player video {
+ left: 0;
+}
+
+[dir="rtl"] .varbase-hero-card.hero-style-top .media .varbase-video-player video, [dir="rtl"] .varbase-hero-card.hero-style-bottom .media .varbase-video-player video {
+ right: 0;
+}
+
+.varbase-hero-card.hero-style-top .media .varbase-video-player iframe, .varbase-hero-card.hero-style-bottom .media .varbase-video-player iframe {
+ position: absolute;
+ object-fit: cover;
+}
+
+[dir="ltr"] .varbase-hero-card.hero-style-top .media .varbase-video-player iframe, [dir="ltr"] .varbase-hero-card.hero-style-bottom .media .varbase-video-player iframe {
+ left: 0;
+}
+
+[dir="rtl"] .varbase-hero-card.hero-style-top .media .varbase-video-player iframe, [dir="rtl"] .varbase-hero-card.hero-style-bottom .media .varbase-video-player iframe {
+ right: 0;
}
@media screen and (max-width: 992px) {
@@ -363,25 +371,76 @@
margin-right: 1.88rem;
margin-left: 1.88rem;
}
+
+ .varbase-hero-card.hero-style-start .card-img, .varbase-hero-card.hero-style-end .card-img {
+ overflow: hidden;
+ width: 100%;
+ }
+}
+
+.varbase-hero-card.hero-style-start .media, .varbase-hero-card.hero-style-end .media {
+ position: relative;
+ overflow: hidden;
+}
+
+.varbase-hero-card.hero-style-start .media .drimage img, .varbase-hero-card.hero-style-end .media .drimage img {
+ position: absolute;
+ width: 80vw;
+ top: 50%;
+ padding-bottom: 0;
+ object-fit: cover;
+}
+
+[dir="ltr"] .varbase-hero-card.hero-style-start .media .drimage img, [dir="ltr"] .varbase-hero-card.hero-style-end .media .drimage img {
+ left: 50%;
+ transform: translateY(-50%) translateX(-50%);
+}
+
+[dir="rtl"] .varbase-hero-card.hero-style-start .media .drimage img, [dir="rtl"] .varbase-hero-card.hero-style-end .media .drimage img {
+ right: 50%;
+ transform: translateY(-50%) translateX(50%);
+}
+
+.varbase-hero-card.hero-style-start .media .varbase-video-player, .varbase-hero-card.hero-style-end .media .varbase-video-player {
+ overflow: hidden;
+ position: static;
}
@media screen and (min-width: 992px) {
- [dir="ltr"] .varbase-hero-card.hero-style-start .card-body {
- margin-right: 9.375rem;
+ .varbase-hero-card.hero-style-start .media .varbase-video-player video, .varbase-hero-card.hero-style-end .media .varbase-video-player video {
+ position: absolute;
+ width: 80vw;
+ top: 50%;
+ padding-bottom: 0;
+ object-fit: cover;
}
- [dir="rtl"] .varbase-hero-card.hero-style-start .card-body {
- margin-left: 9.375rem;
+ [dir="ltr"] .varbase-hero-card.hero-style-start .media .varbase-video-player video, [dir="ltr"] .varbase-hero-card.hero-style-end .media .varbase-video-player video {
+ left: 20vw !important;
+ transform: translateY(-50%) translateX(-50%);
}
-}
-@media screen and (min-width: 992px) {
- [dir="ltr"] .varbase-hero-card.hero-style-end .card-body {
- margin-left: 9.375rem;
+ [dir="rtl"] .varbase-hero-card.hero-style-start .media .varbase-video-player video, [dir="rtl"] .varbase-hero-card.hero-style-end .media .varbase-video-player video {
+ right: 20vw !important;
+ transform: translateY(-50%) translateX(50%);
+ }
+
+ .varbase-hero-card.hero-style-start .media .varbase-video-player iframe, .varbase-hero-card.hero-style-end .media .varbase-video-player iframe {
+ position: absolute;
+ width: 80vw;
+ top: 50%;
+ padding-bottom: 0;
+ object-fit: cover;
+ }
+
+ [dir="ltr"] .varbase-hero-card.hero-style-start .media .varbase-video-player iframe, [dir="ltr"] .varbase-hero-card.hero-style-end .media .varbase-video-player iframe {
+ left: 50%;
+ transform: translateY(-50%) translateX(-50%);
}
- [dir="rtl"] .varbase-hero-card.hero-style-end .card-body {
- margin-right: 9.375rem;
+ [dir="rtl"] .varbase-hero-card.hero-style-start .media .varbase-video-player iframe, [dir="rtl"] .varbase-hero-card.hero-style-end .media .varbase-video-player iframe {
+ right: 50%;
+ transform: translateY(-50%) translateX(50%);
}
}
diff --git a/components/organisms/card-hero/card-hero.scss b/components/organisms/card-hero/card-hero.scss
index 89e2d471c9eec34e0fba98c992755719c998c378..2365eec4d52ddcdc867dd07f0655b43ecf083e56 100644
--- a/components/organisms/card-hero/card-hero.scss
+++ b/components/organisms/card-hero/card-hero.scss
@@ -26,63 +26,6 @@ $hero-card-max-height-lg: 43.75rem;
$hero-card-min-height-lg: 43.75rem;
.varbase-hero-card {
-
- img,
- .drimage img {
- top: 0;
- left: 0;
- width: 100%;
- min-height: $hero-card-min-height-lg;
- object-fit: cover;
- }
-
- .media {
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- object-fit: cover;
-
- img,
- .drimage img {
- top: 0;
- left: 0;
- width: 100%;
- min-height: $hero-card-min-height-lg;
- object-fit: cover;
- }
-
- video {
- top: 0;
- left: 0;
- width: 100%;
- min-height: $hero-card-min-height-lg;
- object-fit: cover;
- }
-
- iframe {
- position: absolute;
- left: 0;
- object-fit: cover;
- }
- }
-
- .varbase-video-player {
- &.ratio {
- position: relative;
- width: 100vw;
- height: 130vh;
- @media screen and (min-width: map-get($grid-breakpoints, "xl")) {
- height: auto;
- }
- top: 50%;
- left: 50%;
- transform: translateY(-50%) translateX(-50%);
- padding-bottom: 0;
- }
- }
-
-
&.hero-style-overlay {
min-height: $hero-card-min-height-lg;
@@ -115,6 +58,30 @@ $hero-card-min-height-lg: 43.75rem;
max-width: 53rem;
}
+ @media screen and (max-width: map-get($grid-breakpoints, "sm")) {
+ padding-bottom: 9.375rem;
+ }
+
+ @media screen and (min-width: map-get($grid-breakpoints, "sm")) {
+ padding: 1.88rem calc((100vw - map-get($container-max-widths, "sm"))/2) 3.88rem;
+ }
+
+ @media screen and (min-width: map-get($grid-breakpoints, "md")) {
+ padding: 1.88rem calc(((100vw - map-get($container-max-widths, "md"))/2) + $grid-gutter-width/2) 3.88rem;
+ }
+
+ @media screen and (min-width: map-get($grid-breakpoints, "lg")) {
+ padding: 1.88rem calc(((100vw - map-get($container-max-widths, "lg"))/2) + $grid-gutter-width/2) 9.375rem;
+ }
+
+ @media screen and (min-width: map-get($grid-breakpoints, "xl")) {
+ padding: 1.88rem calc(((100vw - map-get($container-max-widths, "xl"))/2) + $grid-gutter-width/2) 9.375rem;
+ }
+
+ @media screen and (min-width: map-get($grid-breakpoints, "xxl")) {
+ padding: 1.88rem calc(((100vw - map-get($container-max-widths, "xxl"))/2) + $grid-gutter-width/2) 9.375rem;
+ }
+
.card-title {
color: $hero-card-title-color;
@include font-size($hero-card-xlarge-title-font-size);
@@ -156,30 +123,41 @@ $hero-card-min-height-lg: 43.75rem;
}
- .hero-card-content {
- @media screen and (max-width: map-get($grid-breakpoints, "sm")) {
- padding-bottom: 9.375rem;
+ .media {
+ position: relative;
+ width: 100vw;
+ height: 130vh;
+ @media screen and (min-width: map-get($grid-breakpoints, "xl")) {
+ height: auto;
}
+ top: 50%;
+ left: 50%;
+ transform: translateY(-50%) translateX(-50%);
+ padding-bottom: 0;
- @media screen and (min-width: map-get($grid-breakpoints, "sm")) {
- padding: 1.88rem calc((100vw - map-get($container-max-widths, "sm"))/2) 3.88rem;
- }
-
- @media screen and (min-width: map-get($grid-breakpoints, "md")) {
- padding: 1.88rem calc(((100vw - map-get($container-max-widths, "md"))/2) + $grid-gutter-width/2) 3.88rem;
- }
-
- @media screen and (min-width: map-get($grid-breakpoints, "lg")) {
- padding: 1.88rem calc(((100vw - map-get($container-max-widths, "lg"))/2) + $grid-gutter-width/2) 9.375rem;
- }
-
- @media screen and (min-width: map-get($grid-breakpoints, "xl")) {
- padding: 1.88rem calc(((100vw - map-get($container-max-widths, "xl"))/2) + $grid-gutter-width/2) 9.375rem;
+ .drimage img {
+ top: 0;
+ left: 0;
+ width: 100%;
+ min-height: $hero-card-min-height-lg;
+ object-fit: cover;
}
+
+ .varbase-video-player {
+ video {
+ top: 0;
+ left: 0;
+ width: 100%;
+ min-height: $hero-card-min-height-lg;
+ object-fit: cover;
+ }
- @media screen and (min-width: map-get($grid-breakpoints, "xxl")) {
- padding: 1.88rem calc(((100vw - map-get($container-max-widths, "xxl"))/2) + $grid-gutter-width/2) 9.375rem;
+ iframe {
+ position: absolute;
+ left: 0;
+ object-fit: cover;
+ }
}
}
}
@@ -229,57 +207,104 @@ $hero-card-min-height-lg: 43.75rem;
max-height: $hero-card-max-height-lg;
}
}
- }
-
- &.hero-style-start,
- &.hero-style-end {
- @media screen and (min-width: map-get($grid-breakpoints, "lg")) {
- min-height: $hero-card-min-height-lg;
- max-height: $hero-card-max-height-lg;
- }
- .hero-card-content {
- &.card-body {
- @media screen and (min-width: map-get($grid-breakpoints, "lg")) {
+ .media {
+ position: relative;
+ width: 100vw;
+ height: 130vh;
+ @media screen and (min-width: map-get($grid-breakpoints, "xl")) {
+ height: auto;
+ }
+ top: 50%;
+ left: 50%;
+ transform: translateY(-50%) translateX(-50%);
+ padding-bottom: 0;
+
+ .drimage {
+ img {
+ top: 0;
+ left: 0;
+ width: 100%;
min-height: $hero-card-min-height-lg;
+ object-fit: cover;
+ }
+
+ picture {
+ @media screen and (min-width: map-get($grid-breakpoints, "lg")) {
+ max-height: $hero-card-max-height-lg;
+ }
}
}
- }
- .card-body {
- @media screen and (min-width: map-get($grid-breakpoints, "lg")) {
- min-height: $hero-card-min-height-lg;
- max-height: $hero-card-max-height-lg;
+ .varbase-video-player {
+ video {
+ top: 0;
+ left: 0;
+ width: 100%;
+ min-height: $hero-card-min-height-lg;
+ object-fit: cover;
+ }
+
+ iframe {
+ position: absolute;
+ left: 0;
+ object-fit: cover;
+ }
}
}
+ }
+ &.hero-style-start,
+ &.hero-style-end {
@media screen and (max-width: map-get($grid-breakpoints, "lg")) {
+ margin-right: 1.88rem;
+ margin-left: 1.88rem;
+
.card-img {
overflow: hidden;
width: 100%;
- min-height: $hero-card-min-height-lg;
- max-height: $hero-card-max-height-lg;
}
}
- @media screen and (max-width: map-get($grid-breakpoints, "lg")) {
- margin-right: 1.88rem;
- margin-left: 1.88rem;
- }
- }
+ .media {
+ position: relative;
+ overflow: hidden;
- &.hero-style-start {
- .card-body {
- @media screen and (min-width: map-get($grid-breakpoints, "lg")) {
- margin-right: 9.375rem;
+ .drimage img {
+ position: absolute;
+ width: 80vw;
+ top: 50%;
+ left: 50%;
+ transform: translateY(-50%) translateX(-50%);
+ padding-bottom: 0;
+ object-fit: cover;
}
- }
- }
- &.hero-style-end {
- .card-body {
- @media screen and (min-width: map-get($grid-breakpoints, "lg")) {
- margin-left: 9.375rem;
+ .varbase-video-player {
+ overflow: hidden;
+ position: static;
+
+ @media screen and (min-width: map-get($grid-breakpoints, "lg")) {
+ video {
+ position: absolute;
+ width: 80vw;
+ left: 20vw !important;
+ top: 50%;
+ transform: translateY(-50%) translateX(-50%);
+ padding-bottom: 0;
+ object-fit: cover;
+ }
+
+ iframe {
+ position: absolute;
+ width: 80vw;
+ left: 50%;
+ top: 50%;
+ transform: translateY(-50%) translateX(-50%);
+ padding-bottom: 0;
+ object-fit: cover;
+ }
+ }
}
}
}
diff --git a/components/organisms/heroslider/heroslider.css b/components/organisms/heroslider/heroslider.css
index 3bcd032c5aa52076deb4a4e8d69a6ce436810654..42cd84dcaf632e03255feb9790e8ad969d8fcfb8 100644
--- a/components/organisms/heroslider/heroslider.css
+++ b/components/organisms/heroslider/heroslider.css
@@ -147,6 +147,33 @@
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' fill='none'><path d='M17.5 0C27.165 0 35 7.83502 35 17.5C35 27.165 27.165 35 17.5 35C7.83502 35 0 27.165 0 17.5C0 7.83502 7.83502 0 17.5 0ZM9.84375 16.4062C9.23969 16.4062 8.75 16.8959 8.75 17.5C8.75 18.1041 9.23969 18.5938 9.84375 18.5938H22.5157L17.8204 23.2891C17.3932 23.7162 17.3932 24.4088 17.8204 24.8359C18.2475 25.263 18.94 25.263 19.3671 24.8359L25.9296 18.2734C26.3568 17.8463 26.3568 17.1537 25.9296 16.7266L19.3671 10.1641C18.94 9.73697 18.2475 9.73697 17.8204 10.1641C17.3932 10.5912 17.3932 11.2838 17.8204 11.7109L22.5157 16.4062H9.84375Z' fill='%230d6efd'/></svg>");
}
+@media screen and (min-width: 992px) {
+ .carousel.varbase-heroslider.hero-style-start .varbase-hero-card, .carousel.varbase-heroslider.hero-style-end .varbase-hero-card {
+ min-height: 43.75rem;
+ max-height: 43.75rem;
+ }
+}
+
+@media screen and (min-width: 992px) {
+ .carousel.varbase-heroslider.hero-style-start .varbase-hero-card .card-body,
+ .carousel.varbase-heroslider.hero-style-start .varbase-hero-card .media, .carousel.varbase-heroslider.hero-style-end .varbase-hero-card .card-body,
+ .carousel.varbase-heroslider.hero-style-end .varbase-hero-card .media {
+ min-height: 43.75rem;
+ max-height: 43.75rem;
+ }
+}
+
+@media screen and (min-width: 992px) {
+ .carousel.varbase-heroslider.hero-style-start .varbase-hero-card .card-img .ratio, .carousel.varbase-heroslider.hero-style-end .varbase-hero-card .card-img .ratio {
+ height: 81vh;
+ }
+
+ .carousel.varbase-heroslider.hero-style-start .varbase-hero-card .media iframe, .carousel.varbase-heroslider.hero-style-end .varbase-hero-card .media iframe {
+ height: 81vh;
+ width: 100vw;
+ }
+}
+
@media screen and (min-width: 992px) {
.carousel.varbase-heroslider.hero-style-start .carousel-controls {
position: absolute;
@@ -162,6 +189,14 @@
left: 9.375rem;
right: auto;
}
+
+ [dir="ltr"] .carousel.varbase-heroslider.hero-style-start .card-body {
+ margin-right: 9.375rem;
+ }
+
+ [dir="rtl"] .carousel.varbase-heroslider.hero-style-start .card-body {
+ margin-left: 9.375rem;
+ }
}
@media screen and (min-width: 992px) {
@@ -179,6 +214,14 @@
left: auto;
right: 9.375rem;
}
+
+ [dir="ltr"] .carousel.varbase-heroslider.hero-style-end .card-body {
+ margin-left: 9.375rem;
+ }
+
+ [dir="rtl"] .carousel.varbase-heroslider.hero-style-end .card-body {
+ margin-right: 9.375rem;
+ }
}
.carousel.varbase-heroslider > .view-empty {
diff --git a/components/organisms/heroslider/heroslider.js b/components/organisms/heroslider/heroslider.js
index eef574aafd2cf70bbf4015b8eef3966cf768d284..778858449ee848951d70ab77547aced569be71e6 100644
--- a/components/organisms/heroslider/heroslider.js
+++ b/components/organisms/heroslider/heroslider.js
@@ -1,66 +1,18 @@
-/**
- * @file
- * JavaScript behaviors for Varbase Hero Slider.
- */
-
-(function ($, Drupal, once) {
-
- 'use strict';
-
- /**
- * Varbase Hero Slider Pause behaviors.
- *
- * @type {Drupal~behavior}
- *
- * @prop {Drupal~behaviorAttach} attach
- * Attaches behavior for pausing or sliding.
- */
+!function($, Drupal, once) {
Drupal.behaviors.varbaseHeroSliderPause = {
- attach: function (context, settings) {
-
- // When clicking on the pause button.
- $(
- once(
- 'varbase-heroslider-pause',
- '.js-carousel-control-pause',
- context,
- ),
- )
- .on('click', (event) => {
- const target_heroslider = $($(event.currentTarget).data('bs-target'));
- target_heroslider.carousel('pause');
- });
+ attach: function(context, settings) {
+ $(once("varbase-heroslider-pause", ".js-carousel-control-pause", context)).on("click", (event => {
+ $($(event.currentTarget).data("bs-target")).carousel("pause");
+ }));
}
- };
-
- /**
- * Varbase Hero Slider integration with drimage behaviors.
- *
- * @type {Drupal~behavior}
- *
- * @prop {Drupal~behaviorAttach} attach
- * Attaches behavior for generating an image with view width and height using drimage.
- */
- Drupal.behaviors.varbaseHeroSliderDrimage = {
- attach: function (context, settings) {
-
+ }, Drupal.behaviors.varbaseHeroSliderDrimage = {
+ attach: function(context, settings) {
var timer;
-
- $(
- once(
- 'varbase-heroslider-drimage',
- '.js-varbase-heroslider',
- context,
- ),
- )
- .on('slid.bs.carousel', (event) => {
- clearTimeout(timer);
- timer = setTimeout(Drupal.drimage.init, 5, event.currentTarget);
- })
- .on('slide.bs.carousel', (event) => {
- clearTimeout(timer);
- timer = setTimeout(Drupal.drimage.init, 100, event.currentTarget);
- });
+ $(once("varbase-heroslider-drimage", ".js-varbase-heroslider", context)).on("slid.bs.carousel", (event => {
+ clearTimeout(timer), timer = setTimeout(Drupal.drimage.init, 5, event.currentTarget);
+ })).on("slide.bs.carousel", (event => {
+ clearTimeout(timer), timer = setTimeout(Drupal.drimage.init, 100, event.currentTarget);
+ }));
}
};
-})(jQuery, Drupal, once);
\ No newline at end of file
+}(jQuery, Drupal, once);
\ No newline at end of file
diff --git a/components/organisms/heroslider/heroslider.scss b/components/organisms/heroslider/heroslider.scss
index 82fba8ab752b43b9a07865899961d8ca169e93e6..a6320b5ea8379b741ff8c9b7af58c23bd7249980 100644
--- a/components/organisms/heroslider/heroslider.scss
+++ b/components/organisms/heroslider/heroslider.scss
@@ -6,6 +6,12 @@ $varbase-heroslider-min-height-xs: auto;
$varbase-heroslider-max-height-md: 43.75rem;
$varbase-heroslider-min-height-md: 43.75rem;
+$hero-card-max-height-xs: auto;
+$hero-card-min-height-xs: auto;
+
+$hero-card-max-height-lg: 43.75rem;
+$hero-card-min-height-lg: 43.75rem;
+
// Text color.
$hero-title-text-color: $white;
$hero-brief-text-color: $white;
@@ -194,6 +200,39 @@ $carousel-control-pause-icon-dark: url("data:image/svg+xml,<svg xmlns='http://ww
}
}
+ &.hero-style-start,
+ &.hero-style-end {
+ .varbase-hero-card {
+ @media screen and (min-width: map-get($grid-breakpoints, "lg")) {
+ min-height: $hero-card-min-height-lg;
+ max-height: $hero-card-max-height-lg;
+ }
+
+ .card-body,
+ .media {
+ @media screen and (min-width: map-get($grid-breakpoints, "lg")) {
+ min-height: $hero-card-min-height-lg;
+ max-height: $hero-card-max-height-lg;
+ }
+ }
+
+ @media screen and (min-width: map-get($grid-breakpoints, "lg")) {
+ .card-img {
+ .ratio {
+ height: 81vh;
+ }
+ }
+
+ .media {
+ iframe {
+ height: 81vh;
+ width: 100vw;
+ }
+ }
+ }
+ }
+ }
+
&.hero-style-start {
@media screen and (min-width: map-get($grid-breakpoints, "lg")) {
.carousel-controls {
@@ -202,6 +241,10 @@ $carousel-control-pause-icon-dark: url("data:image/svg+xml,<svg xmlns='http://ww
left: auto;
width: calc(50vw - 11.125rem);
}
+
+ .card-body {
+ margin-right: 9.375rem;
+ }
}
}
@@ -213,7 +256,13 @@ $carousel-control-pause-icon-dark: url("data:image/svg+xml,<svg xmlns='http://ww
left: 9.375rem;
width: calc(50vw - 11.125rem);
}
+
+ .card-body {
+ margin-left: 9.375rem;
+ }
}
+
+
}
&> .view-empty {
diff --git a/components/organisms/heroslider/js/oembed-frame.heroslider.vimeo.js b/components/organisms/heroslider/js/oembed-frame.heroslider.vimeo.js
index 214a161f3c1ddcbc8e3007d054a17e730978970f..56be544ab9b76d89d1a271ccc001f8a44eb71f80 100644
--- a/components/organisms/heroslider/js/oembed-frame.heroslider.vimeo.js
+++ b/components/organisms/heroslider/js/oembed-frame.heroslider.vimeo.js
@@ -1,83 +1,38 @@
-/**
- * @file
- * Behaviors of Vimeo player in the Heroslider OEmbed iframe.
- */
+const tag = document.createElement("script");
-function ready(fn) {
- if (document.readyState !== 'loading') {
- fn();
- } else if (document.addEventListener) {
- document.addEventListener('DOMContentLoaded', fn);
- } else {
- document.attachEvent('onreadystatechange', function () {
- if (document.readyState !== 'loading') {
- fn();
- }
- });
- }
-}
-
-// Load the Vimeo API library.
-const tag = document.createElement('script');
-tag.src = '//player.vimeo.com/api/player.js';
-const firstScriptTag = document.getElementsByTagName('script')[0];
-firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+tag.src = "//player.vimeo.com/api/player.js";
-ready(function () {
- const mediaIframe = document.querySelector('iframe');
- mediaIframe.setAttribute('id', 'media-oembed-iframe');
+const firstScriptTag = document.getElementsByTagName("script")[0];
- let playerConfgured = false;
- let videoLoop = false;
- let vimeoPlayer;
+var fn;
+firstScriptTag.parentNode.insertBefore(tag, firstScriptTag), fn = function() {
+ document.querySelector("iframe").setAttribute("id", "media-oembed-iframe");
+ let vimeoPlayer, playerConfgured = !1, videoLoop = !1;
function actionProcessor(evt) {
- // Manage Vimeo video.
- if (evt.data === 'play') {
+ if ("play" === evt.data) {
if (!playerConfgured) {
- const vimeoIframe = document.querySelector('iframe[src*="vimeo.com"]');
-
- const vimeoOptions = {
- background: true,
- autoplay: true,
- muted: true,
- controls: false,
+ const vimeoIframe = document.querySelector('iframe[src*="vimeo.com"]'), vimeoOptions = {
+ background: !0,
+ autoplay: !0,
+ muted: !0,
+ controls: !1
};
-
- vimeoPlayer = new window.Vimeo.Player(vimeoIframe, vimeoOptions);
- vimeoPlayer.setVolume(0);
- vimeoPlayer.setLoop(videoLoop);
- vimeoPlayer.on('ended', function () {
- window.parent.postMessage('endedVimeo', '*');
- vimeoPlayer.pause();
- });
-
- vimeoPlayer.on('play', function () {
- window.parent.postMessage('playingVimeo', '*');
- });
- playerConfgured = true;
- }
-
- vimeoPlayer.ready().then(function () {
- vimeoPlayer.getPaused().then(function (paused) {
- if (paused) {
- vimeoPlayer.play();
- }
- });
- });
- } else if (evt.data === 'pause') {
- if (playerConfgured) {
- vimeoPlayer.pause();
+ vimeoPlayer = new window.Vimeo.Player(vimeoIframe, vimeoOptions), vimeoPlayer.setVolume(0),
+ vimeoPlayer.setLoop(videoLoop), vimeoPlayer.on("ended", (function() {
+ window.parent.postMessage("endedVimeo", "*"), vimeoPlayer.pause();
+ })), vimeoPlayer.on("play", (function() {
+ window.parent.postMessage("playingVimeo", "*");
+ })), playerConfgured = !0;
}
- } else if (evt.data === 'loop') {
- videoLoop = true;
- }
- }
-
- // Setup the event listener for messaging.
- if (window.addEventListener) {
- window.addEventListener('message', actionProcessor, false);
- } else {
- window.attachEvent('onmessage', actionProcessor);
+ vimeoPlayer.ready().then((function() {
+ vimeoPlayer.getPaused().then((function(paused) {
+ paused && vimeoPlayer.play();
+ }));
+ }));
+ } else "pause" === evt.data ? playerConfgured && vimeoPlayer.pause() : "loop" === evt.data && (videoLoop = !0);
}
-});
+ window.addEventListener ? window.addEventListener("message", actionProcessor, !1) : window.attachEvent("onmessage", actionProcessor);
+}, "loading" !== document.readyState ? fn() : document.addEventListener ? document.addEventListener("DOMContentLoaded", fn) : document.attachEvent("onreadystatechange", (function() {
+ "loading" !== document.readyState && fn();
+}));
\ No newline at end of file
diff --git a/components/organisms/heroslider/js/oembed-frame.heroslider.youtube.js b/components/organisms/heroslider/js/oembed-frame.heroslider.youtube.js
index 796111c2cf3999f7d49e13b0415ab541ac8dfec0..9e6a6b9cf60473a47d076c952059e5801c5b1708 100644
--- a/components/organisms/heroslider/js/oembed-frame.heroslider.youtube.js
+++ b/components/organisms/heroslider/js/oembed-frame.heroslider.youtube.js
@@ -1,122 +1,54 @@
-/**
- * @file
- * Behaviors of Youtube player in the Heroslider OEmbed iframe.
- */
+const tag = document.createElement("script");
-function ready(fn) {
- if (document.readyState !== 'loading') {
- fn();
- } else if (document.addEventListener) {
- document.addEventListener('DOMContentLoaded', fn);
- } else {
- document.attachEvent('onreadystatechange', function () {
- if (document.readyState !== 'loading') {
- fn();
- }
- });
- }
-}
-
-const tag = document.createElement('script');
-tag.src = '//www.youtube.com/player_api';
-const firstScriptTag = document.getElementsByTagName('script')[0];
-firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+tag.src = "//www.youtube.com/player_api";
-ready(function () {
- const mediaIframe = document.querySelector('iframe');
- mediaIframe.setAttribute('id', 'media-oembed-iframe');
- mediaIframe.style.opacity = '0';
- document.body.style.backgroundColor = '#000000';
+const firstScriptTag = document.getElementsByTagName("script")[0];
- let playerConfgured = false;
- let youtubePlayer;
+var fn;
+firstScriptTag.parentNode.insertBefore(tag, firstScriptTag), fn = function() {
+ const mediaIframe = document.querySelector("iframe");
+ mediaIframe.setAttribute("id", "media-oembed-iframe"), mediaIframe.style.opacity = "0",
+ document.body.style.backgroundColor = "#000000";
+ let youtubePlayer, playerConfgured = !1;
function actionProcessor(evt) {
- // Manage Youtube video.
- if (evt.data === 'play') {
- const youtubeIframe = document.querySelector(
- 'iframe[src*="youtube.com"]',
- );
- if (youtubeIframe !== undefined && youtubeIframe.src !== undefined) {
- if (!playerConfgured) {
- let youtubeURL = String(youtubeIframe.src);
- youtubeURL = youtubeURL.replace(/autoplay=0/gi, 'autoplay=1');
- youtubeURL = youtubeURL.replace(/controls=1/gi, 'controls=0');
- youtubeURL += '&controls=0';
- youtubeURL += '&enablejsapi=1';
- youtubeURL += '&showinfo=0'; // Hide the video title.
- youtubeURL += '&modestbranding=1'; // Hide the Youtube Logo.
- youtubeURL += '&loop=1'; // Run the video in a loop.
- youtubeURL += '&fs=1'; // Hide the full screen button.
- youtubeURL += '&cc_load_policy=1'; // Hide closed captions.
- youtubeURL += '&iv_load_policy=1'; // Hide the Video Annotations.
- youtubeURL += '&volume=0';
- youtubeURL += '&rel=0';
- youtubeIframe.src = youtubeURL;
- youtubeURL = undefined;
-
- youtubePlayer = new window.YT.Player(youtubeIframe.id, {
- playerVars: {
- autoplay: 1, // Auto-play the video on load.
- controls: 0, // Show pause/play buttons in player.
- showinfo: 0, // Hide the video title.
- modestbranding: 1, // Hide the Youtube Logo.
- loop: 1, // Run the video in a loop.
- fs: 0, // Hide the full screen button.
- autohide: 0, // Hide video controls when playing.
- rel: 0, // Hide related videos.
- },
- events: {
- onReady: onPlayerReady,
- onStateChange: onPlayerStateChange,
- },
- });
-
- playerConfgured = true;
- } else if (typeof youtubePlayer.playVideo === 'function') {
- youtubePlayer.playVideo();
- }
- }
- } else if (evt.data === 'pause') {
- if (playerConfgured) {
- youtubePlayer.pauseVideo();
- youtubePlayer.isPlaying = false;
+ if ("play" === evt.data) {
+ const youtubeIframe = document.querySelector('iframe[src*="youtube.com"]');
+ if (void 0 !== youtubeIframe && void 0 !== youtubeIframe.src) if (playerConfgured) "function" == typeof youtubePlayer.playVideo && youtubePlayer.playVideo(); else {
+ let youtubeURL = String(youtubeIframe.src);
+ youtubeURL = youtubeURL.replace(/autoplay=0/gi, "autoplay=1"), youtubeURL = youtubeURL.replace(/controls=1/gi, "controls=0"),
+ youtubeURL += "&controls=0", youtubeURL += "&enablejsapi=1", youtubeURL += "&showinfo=0",
+ youtubeURL += "&modestbranding=1", youtubeURL += "&loop=1", youtubeURL += "&fs=1",
+ youtubeURL += "&cc_load_policy=1", youtubeURL += "&iv_load_policy=1", youtubeURL += "&volume=0",
+ youtubeURL += "&rel=0", youtubeIframe.src = youtubeURL, youtubeURL = void 0, youtubePlayer = new window.YT.Player(youtubeIframe.id, {
+ playerVars: {
+ autoplay: 1,
+ controls: 0,
+ showinfo: 0,
+ modestbranding: 1,
+ loop: 1,
+ fs: 0,
+ autohide: 0,
+ rel: 0
+ },
+ events: {
+ onReady: onPlayerReady,
+ onStateChange: onPlayerStateChange
+ }
+ }), playerConfgured = !0;
}
- }
+ } else "pause" === evt.data && playerConfgured && (youtubePlayer.pauseVideo(), youtubePlayer.isPlaying = !1);
}
-
function onPlayerReady(event) {
- event.target.mute();
- event.target.setVolume(0);
- event.target.playVideo();
+ event.target.mute(), event.target.setVolume(0), event.target.playVideo();
}
-
function onPlayerStateChange(event) {
- if (event.data === window.YT.PlayerState.BUFFERING) {
- mediaIframe.style.opacity = '0';
- } else {
- mediaIframe.style.opacity = '1';
- }
-
- if (event.data === window.YT.PlayerState.PLAYING) {
- youtubePlayer.isPlaying = true;
- } else {
- youtubePlayer.isPlaying = false;
- }
-
- if (event.data === window.YT.PlayerState.ENDED) {
- window.parent.postMessage('endedYoutube', '*');
- youtubePlayer.pauseVideo();
- youtubePlayer.seekTo(0);
- } else {
- window.parent.postMessage('playingYoutube', '*');
- }
- }
-
- // Setup the event listener for messaging.
- if (window.addEventListener) {
- window.addEventListener('message', actionProcessor, false);
- } else {
- window.attachEvent('onmessage', actionProcessor);
+ event.data === window.YT.PlayerState.BUFFERING ? mediaIframe.style.opacity = "0" : mediaIframe.style.opacity = "1",
+ event.data === window.YT.PlayerState.PLAYING ? youtubePlayer.isPlaying = !0 : youtubePlayer.isPlaying = !1,
+ event.data === window.YT.PlayerState.ENDED ? (window.parent.postMessage("endedYoutube", "*"),
+ youtubePlayer.pauseVideo(), youtubePlayer.seekTo(0)) : window.parent.postMessage("playingYoutube", "*");
}
-});
+ window.addEventListener ? window.addEventListener("message", actionProcessor, !1) : window.attachEvent("onmessage", actionProcessor);
+}, "loading" !== document.readyState ? fn() : document.addEventListener ? document.addEventListener("DOMContentLoaded", fn) : document.attachEvent("onreadystatechange", (function() {
+ "loading" !== document.readyState && fn();
+}));
\ No newline at end of file
diff --git a/components/organisms/heroslider/js/video.heroslider.local.js b/components/organisms/heroslider/js/video.heroslider.local.js
index 785e251f83bca25cfd78dba8c722903b2d519875..a82eda0a38524ecace6335d3702107a6d865f3d1 100644
--- a/components/organisms/heroslider/js/video.heroslider.local.js
+++ b/components/organisms/heroslider/js/video.heroslider.local.js
@@ -1,153 +1,54 @@
-/**
- * @file
- * Behaviors of heroslider for local video scripts.
- */
-
-(function ($, Drupal) {
+!function($, Drupal) {
Drupal.behaviors.varbaseHeroSliderLocalVideo = {
attach(context) {
- $(window).on('load', function () {
- const mediaSliders = $('.js-varbase-heroslider', context);
-
- // On before slide change.
- mediaSliders.on('slide.bs.carousel', function (event) {
-
- const currentSlideObject = $(this).find('.carousel-item.active');
- const nextSlideObject = $(this).find('.carousel-item:not(.active)');
- const currentVideo = currentSlideObject.find(
- '.varbase-video-player video',
- context,
- );
- const nextVideo = nextSlideObject.find(
- '.varbase-video-player video',
- context,
- );
-
- if (currentVideo.length > 0) {
- const currentPlayer = currentVideo.get(0);
- currentPlayer.pause();
- }
-
- if (nextVideo.length > 0) {
- const nextPlayer = nextVideo.get(0);
- nextPlayer.muted = true;
- nextPlayer.onpause = onPause;
- nextPlayer.onended = onFinish;
- nextPlayer.onplay = onPlayProgress;
-
- // DOMException - The play() request was interrupted.
- // https://developer.chrome.com/blog/play-request-was-interrupted
- let nextPlayPromise;
- nextPlayPromise = nextPlayer.play();
- if (nextPlayPromise && Object.keys(nextPlayPromise).length === 0 && nextPlayPromise.constructor === Object) {
- nextPlayPromise.then(_ => {
- // Automatic playback started!
- // Show playing UI.
- // We can now safely pause video...
- nextPlayer.pause();
- })
- .catch(error => {
- // Auto-play was prevented
- // Show paused UI.
- });
- }
- } else {
- mediaSliders.carousel('cycle');
- }
- },
- );
-
- // When first slide has a video (Pause the slider and play the video).
- $('js-varbase-heroslider', context).each(function () {
- const firstVideo = $(this)
- .find('.carousel-item.active')
- .find('.varbase-video-player video', context);
-
+ $(window).on("load", (function() {
+ const mediaSliders = $(".js-varbase-heroslider", context);
+ if (mediaSliders.on("slide.bs.carousel", (function(event) {
+ const currentSlideObject = $(this).find(".carousel-item.active"), nextSlideObject = $(this).find(".carousel-item:not(.active)"), currentVideo = currentSlideObject.find(".varbase-video-player video", context), nextVideo = nextSlideObject.find(".varbase-video-player video", context);
+ if (currentVideo.length > 0 && currentVideo.get(0).pause(), nextVideo.length > 0) {
+ const nextPlayer = nextVideo.get(0);
+ let nextPlayPromise;
+ nextPlayer.muted = !0, nextPlayer.onpause = onPause, nextPlayer.onended = onFinish,
+ nextPlayer.onplay = onPlayProgress, nextPlayPromise = nextPlayer.play(), nextPlayPromise && 0 === Object.keys(nextPlayPromise).length && nextPlayPromise.constructor === Object && nextPlayPromise.then((_ => {
+ nextPlayer.pause();
+ })).catch((error => {}));
+ } else mediaSliders.carousel("cycle");
+ })), $("js-varbase-heroslider", context).each((function() {
+ const firstVideo = $(this).find(".carousel-item.active").find(".varbase-video-player video", context);
if (firstVideo.length > 0) {
- mediaSliders.carousel('pause');
-
+ mediaSliders.carousel("pause");
const firstVideoPlayer = firstVideo.get(0);
- firstVideoPlayer.muted = true;
-
- // DOMException - The play() request was interrupted.
- // https://developer.chrome.com/blog/play-request-was-interrupted
let firstVideoPlayPromise;
- firstVideoPlayPromise = firstVideoPlayer.play();
- if (firstVideoPlayPromise && Object.keys(firstVideoPlayPromise).length === 0 && firstVideoPlayPromise.constructor === Object) {
- firstVideoPlayPromise.then(_ => {
- // Automatic playback started!
- // Show playing UI.
- // We can now safely pause video...
- firstVideoPlayer.pause();
- })
- .catch(error => {
- // Auto-play was prevented
- // Show paused UI.
- });
- }
-
- firstVideo.on('ended', function () {
- mediaSliders.carousel('cycle');
- });
+ firstVideoPlayer.muted = !0, firstVideoPlayPromise = firstVideoPlayer.play(), firstVideoPlayPromise && 0 === Object.keys(firstVideoPlayPromise).length && firstVideoPlayPromise.constructor === Object && firstVideoPlayPromise.then((_ => {
+ firstVideoPlayer.pause();
+ })).catch((error => {})), firstVideo.on("ended", (function() {
+ mediaSliders.carousel("cycle");
+ }));
}
- });
-
- $('.js-varbase-heroslider', context).each(function () {
- const firstVideo = $(this)
- .find('.carousel-item')
- .find('.varbase-video-player video', context);
-
+ })), $(".js-varbase-heroslider", context).each((function() {
+ const firstVideo = $(this).find(".carousel-item").find(".varbase-video-player video", context);
if (firstVideo.length > 0) {
-
const firstVideoPlayer = firstVideo.get(0);
- firstVideoPlayer.muted = true;
- firstVideoPlayer.loop = true;
-
- // DOMException - The play() request was interrupted.
- // https://developer.chrome.com/blog/play-request-was-interrupted
let firstVideoPlayPromise;
- firstVideoPlayPromise = firstVideoPlayer.play();
- if (firstVideoPlayPromise && Object.keys(firstVideoPlayPromise).length === 0 && firstVideoPlayPromise.constructor === Object) {
- firstVideoPlayPromise.then(_ => {
- // Automatic playback started!
- // Show playing UI.
- // We can now safely pause video...
- firstVideoPlayer.pause();
- })
- .catch(error => {
- // Auto-play was prevented
- // Show paused UI.
- });
- }
+ firstVideoPlayer.muted = !0, firstVideoPlayer.loop = !0, firstVideoPlayPromise = firstVideoPlayer.play(),
+ firstVideoPlayPromise && 0 === Object.keys(firstVideoPlayPromise).length && firstVideoPlayPromise.constructor === Object && firstVideoPlayPromise.then((_ => {
+ firstVideoPlayer.pause();
+ })).catch((error => {}));
}
- });
-
- // Local Video variable.
- if ($('js-varbase-heroslider .varbase-video-player video', context).length > 0) {
- const player = $('js-varbase-heroslider .varbase-video-player video', context).get(0);
-
- // When the player is ready, add listeners for pause, finish,
- // and playProgress.
- player.onpause = onPause;
- player.onended = onFinish;
- player.onplay = onPlayProgress;
+ })), $("js-varbase-heroslider .varbase-video-player video", context).length > 0) {
+ const player = $("js-varbase-heroslider .varbase-video-player video", context).get(0);
+ player.onpause = onPause, player.onended = onFinish, player.onplay = onPlayProgress;
}
-
- // Play when paused.
function onPause() {
- mediaSliders.carousel('next');
+ mediaSliders.carousel("next");
}
-
- // Play when finished.
function onFinish() {
- mediaSliders.carousel('cycle');
+ mediaSliders.carousel("cycle");
}
-
- // Pause on play progress.
function onPlayProgress() {
- mediaSliders.carousel('pause');
+ mediaSliders.carousel("pause");
}
- });
- },
+ }));
+ }
};
-})(jQuery, Drupal);
+}(jQuery, Drupal);
\ No newline at end of file
diff --git a/components/organisms/heroslider/js/video.heroslider.vimeo.js b/components/organisms/heroslider/js/video.heroslider.vimeo.js
index 5f69a425539a41b347ede73974a0a3137b91f2ea..74306e074854a273e19bb2ec0658507055ca194b 100644
--- a/components/organisms/heroslider/js/video.heroslider.vimeo.js
+++ b/components/organisms/heroslider/js/video.heroslider.vimeo.js
@@ -1,79 +1,23 @@
-/**
- * @file
- * Behaviors of Varbase heroslider for vimeo embedded videos scripts.
- */
-
-(function ($, Drupal) {
+!function($, Drupal) {
Drupal.behaviors.varbaseHeroSliderVimeoVideo = {
attach(context) {
-
- const mediaSliders = $('.js-varbase-heroslider', context);
-
- // On before slide change.
- mediaSliders.on('slide.bs.carousel',function (event) {
- const currentVideo = $(this)
- .find('.carousel-item.active', context)
- .find('.varbase-video-player iframe[src*="vimeo.com"]', context,
- );
- if (currentVideo.length > 0) {
- currentVideo.get(0).contentWindow.postMessage('pause', '*');
- }
- },
- );
-
- // On after slide change.
- mediaSliders.on('slid.bs.carousel', function (event) {
- const currentVideo = $(this)
- .find('.carousel-item.active', context)
- .find('.varbase-video-player iframe[src*="vimeo.com"]', context);
-
- if (currentVideo.length > 0) {
- currentVideo.get(0).contentWindow.postMessage('play', '*');
- } else {
- mediaSliders.carousel('cycle');
- }
- });
-
- // On first slide load.
- const firstIframeVideo = mediaSliders
- .find('.carousel-item', context)
- .first()
- .find('.varbase-video-player iframe[src*="vimeo.com"]', context);
- if (firstIframeVideo.length > 0) {
- firstIframeVideo.on('load', function () {
- if (!firstIframeVideo.hasClass('first-slide-played')) {
- mediaSliders.carousel('pause');
-
- if ($('.js-varbase-heroslider .carousel-item').length === 1) {
- firstIframeVideo.get(0).contentWindow.postMessage('loop', '*');
- }
-
- $(this).get(0).contentWindow.postMessage('play', '*');
- firstIframeVideo.addClass('first-slide-played');
- }
- });
- }
-
+ const mediaSliders = $(".js-varbase-heroslider", context);
+ mediaSliders.on("slide.bs.carousel", (function(event) {
+ const currentVideo = $(this).find(".carousel-item.active", context).find('.varbase-video-player iframe[src*="vimeo.com"]', context);
+ currentVideo.length > 0 && currentVideo.get(0).contentWindow.postMessage("pause", "*");
+ })), mediaSliders.on("slid.bs.carousel", (function(event) {
+ const currentVideo = $(this).find(".carousel-item.active", context).find('.varbase-video-player iframe[src*="vimeo.com"]', context);
+ currentVideo.length > 0 ? currentVideo.get(0).contentWindow.postMessage("play", "*") : mediaSliders.carousel("cycle");
+ }));
+ const firstIframeVideo = mediaSliders.find(".carousel-item", context).first().find('.varbase-video-player iframe[src*="vimeo.com"]', context);
function vimeoActionProcessor(e) {
- if (e.data === 'endedVimeo' || e.message === 'endedVimeo') {
- if ($('.js-varbase-heroslider .slide').length > 1) {
- // When having 2 or more slides.
- mediaSliders.carousel('next');
- } else {
- // When only having one Vimeo slide.
- firstIframeVideo.get(0).contentWindow.postMessage('play', '*');
- }
- } else if (e.data === 'playingVimeo' || e.message === 'playingVimeo') {
- mediaSliders.carousel('pause');
- }
- }
-
- // Setup the event listener for messaging.
- if (window.addEventListener) {
- window.addEventListener('message', vimeoActionProcessor, false);
- } else {
- window.attachEvent('onmessage', vimeoActionProcessor);
+ "endedVimeo" === e.data || "endedVimeo" === e.message ? $(".js-varbase-heroslider .slide").length > 1 ? mediaSliders.carousel("next") : firstIframeVideo.get(0).contentWindow.postMessage("play", "*") : "playingVimeo" !== e.data && "playingVimeo" !== e.message || mediaSliders.carousel("pause");
}
- },
+ firstIframeVideo.length > 0 && firstIframeVideo.on("load", (function() {
+ firstIframeVideo.hasClass("first-slide-played") || (mediaSliders.carousel("pause"),
+ 1 === $(".js-varbase-heroslider .carousel-item").length && firstIframeVideo.get(0).contentWindow.postMessage("loop", "*"),
+ $(this).get(0).contentWindow.postMessage("play", "*"), firstIframeVideo.addClass("first-slide-played"));
+ })), window.addEventListener ? window.addEventListener("message", vimeoActionProcessor, !1) : window.attachEvent("onmessage", vimeoActionProcessor);
+ }
};
-})(jQuery, Drupal);
+}(jQuery, Drupal);
\ No newline at end of file
diff --git a/components/organisms/heroslider/js/video.heroslider.youtube.js b/components/organisms/heroslider/js/video.heroslider.youtube.js
index 90fb95d1ca601fac9e68aab54cbdb6f92eac7c17..ce4f771e5b69503011ed5e741881de1acc39684a 100644
--- a/components/organisms/heroslider/js/video.heroslider.youtube.js
+++ b/components/organisms/heroslider/js/video.heroslider.youtube.js
@@ -1,74 +1,21 @@
-/**
- * @file
- * Behaviors of Varbase heroslider for Youtube video scripts.
- */
-
-(function ($, Drupal) {
+!function($, Drupal) {
Drupal.behaviors.varbaseHeroSliderYoutubeVideo = {
attach(context) {
-
- const mediaSliders = $('.js-varbase-heroslider', context);
-
- // On before slide change.
- mediaSliders.on('slide.bs.carousel', function (event) {
- const currentVideo = $(this)
- .find('.carousel-item.active', context)
- .find('.varbase-video-player iframe[src*="youtube.com"]', context);
-
- if (currentVideo.length > 0) {
- currentVideo.get(0).contentWindow.postMessage('pause', '*');
- }
- },
- );
-
- // On after slide change.
- mediaSliders.on('slid.bs.carousel', function (event) {
- const currentVideo = $(this)
- .find('.carousel-item.active', context)
- .find('.varbase-video-player iframe[src*="youtube.com"]', context);
-
- if (currentVideo.length > 0) {
- currentVideo.get(0).contentWindow.postMessage('play', '*');
- } else {
- mediaSliders.carousel('cycle');
- }
- });
-
- // On first slide load.
- const firstIframeVideo = $('.js-varbase-heroslider')
- .find('.carousel-item')
- .first()
- .find('.varbase-video-player iframe[src*="youtube.com"]', context);
- if (firstIframeVideo.length > 0) {
- firstIframeVideo.on('load', function () {
- mediaSliders.carousel('pause');
- $(this).get(0).contentWindow.postMessage('play', '*');
- });
- }
-
+ const mediaSliders = $(".js-varbase-heroslider", context);
+ mediaSliders.on("slide.bs.carousel", (function(event) {
+ const currentVideo = $(this).find(".carousel-item.active", context).find('.varbase-video-player iframe[src*="youtube.com"]', context);
+ currentVideo.length > 0 && currentVideo.get(0).contentWindow.postMessage("pause", "*");
+ })), mediaSliders.on("slid.bs.carousel", (function(event) {
+ const currentVideo = $(this).find(".carousel-item.active", context).find('.varbase-video-player iframe[src*="youtube.com"]', context);
+ currentVideo.length > 0 ? currentVideo.get(0).contentWindow.postMessage("play", "*") : mediaSliders.carousel("cycle");
+ }));
+ const firstIframeVideo = $(".js-varbase-heroslider").find(".carousel-item").first().find('.varbase-video-player iframe[src*="youtube.com"]', context);
function youtubeActionProcessor(e) {
- if (e.data === 'endedYoutube' || e.message === 'endedYoutube') {
- if ($('.js-varbase-heroslider').length > 1) {
- // When having 2 or more slides.
- mediaSliders.carousel('next');
- } else {
- // When only having one Youtube slide.
- firstIframeVideo.get(0).contentWindow.postMessage('play', '*');
- }
- } else if (
- e.data === 'playingYoutube' ||
- e.message === 'playingYoutube'
- ) {
- mediaSliders.carousel('pause');
- }
- }
-
- // Setup the event listener for messaging.
- if (window.addEventListener) {
- window.addEventListener('message', youtubeActionProcessor, false);
- } else {
- window.attachEvent('onmessage', youtubeActionProcessor);
+ "endedYoutube" === e.data || "endedYoutube" === e.message ? $(".js-varbase-heroslider").length > 1 ? mediaSliders.carousel("next") : firstIframeVideo.get(0).contentWindow.postMessage("play", "*") : "playingYoutube" !== e.data && "playingYoutube" !== e.message || mediaSliders.carousel("pause");
}
- },
+ firstIframeVideo.length > 0 && firstIframeVideo.on("load", (function() {
+ mediaSliders.carousel("pause"), $(this).get(0).contentWindow.postMessage("play", "*");
+ })), window.addEventListener ? window.addEventListener("message", youtubeActionProcessor, !1) : window.attachEvent("onmessage", youtubeActionProcessor);
+ }
};
-})(jQuery, Drupal);
+}(jQuery, Drupal);
\ No newline at end of file