<div class="expanded-carousel-container">
<div class="expanded-carousel">
<button class="sideways-button sideways-button--previous sideways-button--is-invisible has-shadow">
<div class="sideways-button__label">
<span class="sideways-button__label__text"></span>
</div>
<div class="sideways-button__arrow">
<svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
</svg>
</div>
</button>
<div class="expanded-carousel__slide has-shadow" data-slide-title="Slide 1">
<button class="expanded-carousel__fullscreen">
<svg class="expanded-carousel__close" viewbox="0 0 24 24" width="24">
<path id="plus" d="M10.9 4.57h2V20h-2zM4.18 11.28h5.79v2H4.18zM13.83 11.28h5.79v2h-5.79z"/>
</svg>
</button>
<div class="expanded-carousel__slide__header">
<div class="expanded-carousel__content">
<h2 class="heading heading--medium">Slide 1</h2>
<div class="expanded-carousel__card">
<div class="expanded-carousel__content__inner">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non nemo at voluptate. Consequuntur odio quos maiores assumenda, voluptatem commodi ut saepe ipsa vitae fugit incidunt laborum praesentium placeat ratione expedita?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non nemo at voluptate. Consequuntur odio quos maiores assumenda, voluptatem commodi ut saepe ipsa vitae fugit incidunt laborum praesentium placeat ratione expedita?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non nemo at voluptate. Consequuntur odio quos maiores assumenda, voluptatem commodi ut saepe ipsa vitae fugit incidunt laborum praesentium placeat ratione expedita?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non nemo at voluptate. Consequuntur odio quos maiores assumenda, voluptatem commodi ut saepe ipsa vitae fugit incidunt laborum praesentium placeat ratione expedita?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non nemo at voluptate. Consequuntur odio quos maiores assumenda, voluptatem commodi ut saepe ipsa vitae fugit incidunt laborum praesentium placeat ratione expedita?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non nemo at voluptate. Consequuntur odio quos maiores assumenda, voluptatem commodi ut saepe ipsa vitae fugit incidunt laborum praesentium placeat ratione expedita?</p>
</div>
<div class="expanded-carousel__indices">
<a href="#" class="cta cta--link">
<span class="cta__label">Slide 2
<svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
</svg>
</span>
</a>
<a href="#" class="cta cta--link">
<span class="cta__label">Slide 3
<svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
</svg>
</span>
</a>
</div>
</div>
<button class="expanded-carousel__expand">
Read more
<svg class="expanded-carousel__plus" viewbox="0 0 24 24" width="24">
<path id="plus"
d="M10.9 4.57h2V20h-2zM4.18 11.28h5.79v2H4.18zM13.83 11.28h5.79v2h-5.79z"/>
</svg>
</button>
</div>~
</div>
</div>
<div class="expanded-carousel__slide has-shadow" data-slide-title="Slide 2">
<button class="expanded-carousel__fullscreen">
<svg class="expanded-carousel__close" viewbox="0 0 24 24" width="24">
<path id="plus" d="M10.9 4.57h2V20h-2zM4.18 11.28h5.79v2H4.18zM13.83 11.28h5.79v2h-5.79z"/>
</svg>
</button>
<div class="expanded-carousel__slide__header">
<div class="expanded-carousel__image" style="background-image: url('https://picsum.photos/1200/450/?random');"></div>
<div class="expanded-carousel__content">
<h2 class="heading heading--medium">Slide 2</h2>
<div class="expanded-carousel__card">
<div class="expanded-carousel__content__inner">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non nemo at voluptate. Consequuntur odio quos maiores assumenda, voluptatem commodi ut saepe ipsa vitae fugit incidunt laborum praesentium placeat ratione expedita?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non nemo at voluptate. Consequuntur odio quos maiores assumenda, voluptatem commodi ut saepe ipsa vitae fugit incidunt laborum praesentium placeat ratione expedita?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non nemo at voluptate. Consequuntur odio quos maiores assumenda, voluptatem commodi ut saepe ipsa vitae fugit incidunt laborum praesentium placeat ratione expedita?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non nemo at voluptate. Consequuntur odio quos maiores assumenda, voluptatem commodi ut saepe ipsa vitae fugit incidunt laborum praesentium placeat ratione expedita?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non nemo at voluptate. Consequuntur odio quos maiores assumenda, voluptatem commodi ut saepe ipsa vitae fugit incidunt laborum praesentium placeat ratione expedita?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non nemo at voluptate. Consequuntur odio quos maiores assumenda, voluptatem commodi ut saepe ipsa vitae fugit incidunt laborum praesentium placeat ratione expedita?</p>
</div>
</div>
<button class="expanded-carousel__expand expanded-carousel__expand--visible">
Read more
<svg class="expanded-carousel__plus" viewbox="0 0 24 24" width="24">
<path id="plus"
d="M10.9 4.57h2V20h-2zM4.18 11.28h5.79v2H4.18zM13.83 11.28h5.79v2h-5.79z"/>
</svg>
</button>
</div>~
</div>
<div id="carousel-expander-2" class="expanded-carousel__slide__expanded">
<div class="blocksbuilder">
<div class="block">
<div class="generic-wysiwyg">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi.
Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p><img class="size-full" src="/img/Ipsen-Pharma-Biotech-042016-144.jpg">
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada
tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<p><img class="size-full" src="/img/Ipsen-Pharma-Biotech-042016-144.jpg"></p>
</div>
</div>
<div class="block">
<div class="accordion" id="accordion" role="presentation">
<div id="question-#1-lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit" class="accordion__item has-shadow">
<div class="accordion__item-header" role="heading">
<button class="accordion__toggle" aria-expanded="false" aria-controls="panel-677798339-0" id="heading-677798339-0" type="button">
<h3 class="heading heading--small">Question #1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h3>
<svg id="accordion__toggle-trigger-677798339-0" class="accordion__toggle-trigger" viewbox="0 0 24 24" width="24">
<path id="plus-677798339-0" d="M10.9 4.57h2V20h-2zM4.18 11.28h5.79v2H4.18zM13.83 11.28h5.79v2h-5.79z"/>
<path id="minus-677798339-0" d="M4.18 11.28h15.43v2H4.18z"/>
</svg>
</button>
</div>
<div class="accordion__item-content" id="panel-677798339-0" role="region" aria-labelledby="heading-677798339-0" aria-hidden="true">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Ipsen is a leading biopharmaceutical group dedicated to improving lives
through innovative medicines in oncology , neuroscience and rare diseases.</p>
</div>
</div>
<div id="question-#2-lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit" class="accordion__item has-shadow">
<div class="accordion__item-header" role="heading">
<button class="accordion__toggle" aria-expanded="false" aria-controls="panel-677798339-1" id="heading-677798339-1" type="button">
<h3 class="heading heading--small">Question #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h3>
<svg id="accordion__toggle-trigger-677798339-1" class="accordion__toggle-trigger" viewbox="0 0 24 24" width="24">
<path id="plus-677798339-1" d="M10.9 4.57h2V20h-2zM4.18 11.28h5.79v2H4.18zM13.83 11.28h5.79v2h-5.79z"/>
<path id="minus-677798339-1" d="M4.18 11.28h15.43v2H4.18z"/>
</svg>
</button>
</div>
<div class="accordion__item-content" id="panel-677798339-1" role="region" aria-labelledby="heading-677798339-1" aria-hidden="true">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Ipsen is a leading biopharmaceutical group dedicated to improving lives
through innovative medicines in oncology , neuroscience and rare diseases.</p>
</div>
</div>
<div id="question-#3-lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit" class="accordion__item has-shadow">
<div class="accordion__item-header" role="heading">
<button class="accordion__toggle" aria-expanded="false" aria-controls="panel-677798339-2" id="heading-677798339-2" type="button">
<h3 class="heading heading--small">Question #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h3>
<svg id="accordion__toggle-trigger-677798339-2" class="accordion__toggle-trigger" viewbox="0 0 24 24" width="24">
<path id="plus-677798339-2" d="M10.9 4.57h2V20h-2zM4.18 11.28h5.79v2H4.18zM13.83 11.28h5.79v2h-5.79z"/>
<path id="minus-677798339-2" d="M4.18 11.28h15.43v2H4.18z"/>
</svg>
</button>
</div>
<div class="accordion__item-content" id="panel-677798339-2" role="region" aria-labelledby="heading-677798339-2" aria-hidden="true">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Ipsen is a leading biopharmaceutical group dedicated to improving lives
through innovative medicines in oncology , neuroscience and rare diseases.</p>
</div>
</div>
<div id="question-#4-lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit" class="accordion__item has-shadow">
<div class="accordion__item-header" role="heading">
<button class="accordion__toggle" aria-expanded="false" aria-controls="panel-677798339-3" id="heading-677798339-3" type="button">
<h3 class="heading heading--small">Question #4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h3>
<svg id="accordion__toggle-trigger-677798339-3" class="accordion__toggle-trigger" viewbox="0 0 24 24" width="24">
<path id="plus-677798339-3" d="M10.9 4.57h2V20h-2zM4.18 11.28h5.79v2H4.18zM13.83 11.28h5.79v2h-5.79z"/>
<path id="minus-677798339-3" d="M4.18 11.28h15.43v2H4.18z"/>
</svg>
</button>
</div>
<div class="accordion__item-content" id="panel-677798339-3" role="region" aria-labelledby="heading-677798339-3" aria-hidden="true">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Ipsen is a leading biopharmaceutical group dedicated to improving lives
through innovative medicines in oncology , neuroscience and rare diseases.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="expanded-carousel__slide has-shadow" data-slide-title="Slide 3">
<button class="expanded-carousel__fullscreen">
<svg class="expanded-carousel__close" viewbox="0 0 24 24" width="24">
<path id="plus" d="M10.9 4.57h2V20h-2zM4.18 11.28h5.79v2H4.18zM13.83 11.28h5.79v2h-5.79z"/>
</svg>
</button>
<div class="expanded-carousel__slide__header">
<div class="expanded-carousel__content">
<h2 class="heading heading--medium">Slide 3</h2>
<div class="expanded-carousel__card">
<div class="expanded-carousel__content__inner">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non nemo at voluptate. Consequuntur odio quos maiores assumenda, voluptatem commodi ut saepe ipsa vitae fugit incidunt laborum praesentium placeat ratione expedita?</p>
</div>
</div>
<button class="expanded-carousel__expand">
Read more
<svg class="expanded-carousel__plus" viewbox="0 0 24 24" width="24">
<path id="plus"
d="M10.9 4.57h2V20h-2zM4.18 11.28h5.79v2H4.18zM13.83 11.28h5.79v2h-5.79z"/>
</svg>
</button>
</div>~
</div>
</div>
<button class="sideways-button sideways-button--next sideways-button--is-invisible has-shadow">
<div class="sideways-button__label">
<span class="sideways-button__label__text">Slide 2</span>
</div>
<div class="sideways-button__arrow">
<svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
</svg>
</div>
</button>
</div>
</div>
/* @expanded-carousel */
@import '~flickity/css/flickity.css';
@include flickity-buttons();
.expanded-carousel-container {
background-image: url('data:image/svg+xml;utf8,<svg width="60" height="100" xmlns="http://www.w3.org/2000/svg"><path fill="#B2B2B2" d="M58 0h2v5h-2z" fill-rule="evenodd"/></svg>');
width: 100%;
background-color: white;
background-position: center center;
padding: $large-spacing 0;
overflow: hidden;
&--is-fullscreen {
min-height: 100vh;
position: fixed;
z-index: 350;
top: 0;
left: 0;
}
}
.expanded-carousel {
position: relative;
max-width: 1024px;
margin: 0 auto;
padding: $large-spacing 0;
&__fullscreen {
position: absolute;
right: 0;
top: 0;
z-index: 10;
@media (max-width: $medium-screen) {
right: 3rem;
top: 1rem;
}
// .is-fullscreen & {
// position: sticky;
// left: 100%;
// }
}
&:focus {
outline: none!important;
}
&.is-fullscreen {
position: absolute;
left: 0;
top: 120px;
width: 100%;
height: calc(100% - 120px);
background: transparent;
max-width: 100vw;
}
.flickity-viewport {
overflow: visible;
transition: height 0.2s;
}
&__slide {
.is-fullscreen & {
box-shadow: 1px 1px 1px transparent !important;
max-width: 1024px;
margin-right: 50vw;
overflow: scroll;
-ms-overflow-style: none;
max-height: 100%;
background-color: transparent;
// @media (min-width: $medium-screen) {
// max-height: 100vh;
// }
}
position: relative;
transition: height 0.3s;
width: 100%;
margin-right: 50vw;
background-color: white;
transition: box-shadow 0.3s;
min-height: 441px;
&__header {
display: block;
height: 441px;
max-height: 441px;
display: flex;
flex-direction: column;
transition: 0.3s;
@media (min-width: 768px) {
flex-direction: row;
}
.is-fullscreen & {
min-height: 400%;
max-height:1999px;
height: 100%;
}
}
&__expanded {
display: none;
.generic-wysiwyg {
padding: $large-spacing;
background: $white;
@media (max-width: $medium-screen) {
padding: $large-spacing 4rem;
}
}
.accordion {
padding: $large-spacing;
@media (max-width: $medium-screen) {
padding: $large-spacing 4rem;
}
}
.is-fullscreen & {
display: block;
padding-bottom: 120px;
}
// .block {
// &:last-child {
// margin-bottom: 120px;
// }
// }
}
&:first-child {
.expanded-carousel__slide__header {
height: 100%;
max-height: none;
min-height: 441px;
}
.expanded-carousel__image {
height: auto;
align-self: stretch;
}
@media (max-width: $medium-screen) {
.expanded-carousel__card {
flex-direction: column;
}
.expanded-carousel__indices {
margin-top: 2rem;
}
}
.expanded-carousel__content {
&:after {
display: none;
}
}
}
}
&__image {
height: 100%;
min-height: 124px;
background-position: center center;
background-size: cover;
flex:1;
z-index: 10;
@media (max-width: 767px) {
padding-bottom: 60%;
}
@media (min-width: 768px) {
width: 30%;
max-width: 292px;
height: 441px;
}
}
&__card {
display: flex;
max-height: 100%;
.is-fullscreen & {
max-height: none;
}
@media (max-width: $medium-screen) {
// flex-direction: column;
}
}
&__content {
padding: $large-spacing;
overflow: hidden;
flex: 2;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
@media (max-width: $medium-screen) {
padding: $large-spacing 4rem;
h2 {
width: 95%;
}
}
&::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 4rem;
width: 100%;
z-index: 1;
background-image: linear-gradient(to bottom, rgba(#fff, 0.2), #fff);
@media (max-width: $medium-screen) {
background-image: linear-gradient(to bottom, rgba(#fff, 0.8), #fff);
}
}
.is-fullscreen & {
background-color: white;
overflow: visible;
&::after {
opacity: 0;
}
}
&__inner {
flex: 1;
overflow: hidden;
height: 100%;
position: relative;
.is-fullscreen & {
max-height: none;
}
}
}
&__indices {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
max-width: 162px;
margin-left: .75rem;
.cta {
&--secondary {
margin-top: auto;
@include poly-margin-bottom--large;
margin-right: 2em;
}
&__label {
justify-content: space-between;
}
}
}
&__close {
margin: 1em;
transform: scale(0) rotate(45deg);
opacity: 0;
transition: 0.3s;
pointer-events: none;
.is-fullscreen & {
transform: scale(1) rotate(-45deg);
opacity: 1;
pointer-events: all;
}
@include themify($themes) {
path {
fill: themed('ctaColor');
}
}
}
&__expand {
position: absolute;
bottom: 0;
right: 0;
padding: 0 1em;
color: white;
display: none;
height: 50px;
line-height: 50px;
transition: 0.3s;
z-index: 2;
align-items: center;
&--visible {
display: flex;
}
svg {
fill: white;
margin-left: 0.75rem;
}
.is-fullscreen & {
opacity: 0;
pointer-events: none;
}
@include themify($themes) {
background-color: themed('ctaColor');
}
}
.flickity-page-dots {
width: 100%;
padding-bottom: $large-spacing;
text-align: center;
position: relative;
.dot {
margin: 0 $base-spacing 0 0;
position: relative;
@include themify($themes) {
background-color: themed('ctaColor');
}
&::before, &::after {
position: absolute;
top: 50%;
left: 50%;
margin: -18px 0 0 -18px;
width: 36px;
height: 36px;
border-radius: 50%;
content: '';
opacity: 0;
pointer-events: none;
}
&::before,
&::after {
@include themify($themes) {
box-shadow: 0 0 0 2px themed('ctaColor');
}
}
&.is-selected::before {
animation: anim-pulse-1 4s forwards;
}
&.is-selected::after {
animation: anim-pulse-2 4s forwards;
}
}
}
}
.sideways-button {
position: absolute;
width: 50px;
height: 441px;
display: flex;
flex-direction: column;
text-decoration: none;
background: white;
z-index: 20;
transition: opacity 0.3s;
// @media (min-width: $medium-screen) {
// top: calc(#{$carousel-height} + (#{$base-spacing} / 2));
// }
// @media (min-width: $monster-screen) {
// top: calc(#{$carousel-height} + (#{$large-spacing} / 2));
// }
&.is-open {
// top: 50%;
// margin-top: calc(#{$carousel-height} / 2 + #{$small-spacing});
// @media (min-width: $medium-screen) {
// margin-top: calc(#{$carousel-height} / 2 + #{$base-spacing});
// }
// @media (min-width: $monster-screen) {
// margin-top: calc(#{$carousel-height} / 2 + #{$large-spacing});
// }
}
&--previous {
left: -5rem;
.is-fullscreen & {
left: 0;
transform: translateY(1.5rem);
@media (min-width: $medium-screen) {
left: 2em;
}
}
}
&--next {
right: -5rem;
.is-fullscreen & {
right: 0;
transform: translateY(1.5rem);
@media (min-width: $medium-screen) {
right: 2em;
}
}
}
&--is-invisible {
opacity: 0;
}
&__label {
position: absolute;
width: calc(441px - 100px);
transform: translateX(-50%) translateY(-50px) rotate(-90deg);
top: 50%;
left: 50%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #1d537d;
font-family: "Biryani";
font-weight: 900;
font-size: 14px;
@include themify($themes) {
color: themed('ctaGradient');
}
&__text{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: calc(441px - 100px);
text-align: center;
}
}
&__arrow {
margin-top: auto;
height: 50px;
background-color: #155ff2;
display: flex;
align-items: center;
justify-content: center;
color: white;
svg {
fill: white;
width: 50%;
}
@include themify($themes) {
background-color: themed('ctaColor');
}
.sideways-button--previous & {
transform: rotate(180deg);
}
}
}
.flickity-enabled.is-fullscreen .flickity-page-dots {
bottom: 10px;
}
.flickity-enabled.is-fullscreen .flickity-page-dots .dot {
background: white;
}
/* prevent page scrolling when flickity is fullscreen */
html.is-flickity-fullscreen {
overflow: hidden;
}
/* ---- flickity-fullscreen-button ---- */
.flickity-fullscreen-button {
display: block;
right: 10px;
top: 10px;
width: 24px;
height: 24px;
border-radius: 4px;
}
/* right-to-left */
.flickity-rtl .flickity-fullscreen-button {
right: auto;
left: 10px;
}
.flickity-fullscreen-button-exit { display: none; }
.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit { display: block; }
.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view { display: none; }
.flickity-fullscreen-button .flickity-button-icon {
position: absolute;
width: 16px;
height: 16px;
left: 4px;
top: 4px;
}
import $ from 'jQuery'
var jQueryBridget = require('jquery-bridget')
import Flickity from 'flickity-fullscreen'
jQueryBridget( 'flickity', Flickity, $ )
$(document).ready(function () {
if ($('.expanded-carousel').length) {
var $carousel = $('.expanded-carousel')
var mastheadHeight = $('.masthead').outerHeight() + 60
console.log('mastheadHeight : ' + mastheadHeight)
$carousel.flickity({
cellSelector: '.expanded-carousel__slide',
prevNextButtons: false,
adaptiveHeight: true,
pageDots: true,
dragThreshold: 30
})
$('.expanded-carousel__slide:not(:first-child) .expanded-carousel__card').each(function() {
var $this = $(this)
var $carouselSlideContent = $this.find('.expanded-carousel__content__inner')
var hardHeight = 309;
if ( $this.innerHeight() < $carouselSlideContent.innerHeight() ) {
$this.addClass('expandable').parent().find('.expanded-carousel__expand').addClass('expanded-carousel__expand--visible')
}
if ($('body').hasClass('browser--ie11')) {
if ( hardHeight < $carouselSlideContent.innerHeight() ) {
$this.addClass('expandable').parent().find('.expanded-carousel__expand').addClass('expanded-carousel__expand--visible')
}
}
})
$('.expanded-carousel__fullscreen, .expanded-carousel__expand').on('click', function() {
$( this ).closest('.expanded-carousel').flickity('toggleFullscreen').flickity('resize')
setTimeout(function(){ $carousel.delay().flickity('resize')}, 300)
})
$('.sideways-button--previous').on('click', function(e) {
e.stopPropagation()
e.stopImmediatePropagation()
$( this ).closest('.expanded-carousel').flickity('previous')
})
$('.sideways-button--next').on('click', function(e) {
e.stopPropagation()
e.stopImmediatePropagation()
$( this ).closest('.expanded-carousel').flickity('next')
})
$('.expanded-carousel').each(function() {
var $thisCarousel = $(this)
$thisCarousel.data('flickity').on( 'change', function( event, index ) {
var selectedIndex = $(this)[0].selectedIndex
var totalCells = $(this)[0].cells
var nextLabel = $thisCarousel.find('.expanded-carousel__slide').eq(selectedIndex + 1).data('slide-title')
var prevLabel = $thisCarousel.find('.expanded-carousel__slide').eq(selectedIndex - 1).data('slide-title')
var nextButton = $thisCarousel.find('.sideways-button--next')
var prevButton = $thisCarousel.find('.sideways-button--previous')
var offset = $thisCarousel.offset().top
nextButton.find('.sideways-button__label__text').html(nextLabel)
prevButton.find('.sideways-button__label__text').html(prevLabel)
$(this).closest('.expanded-carousel').flickity('toggleFullscreen').flickity('resize')
$('html, body').animate({
scrollTop: offset - mastheadHeight
}, 200);
var lastCellIndex = totalCells.length - 1
// console.log(selectedIndex + " / " + lastCellIndex)
if (selectedIndex == 0) {
prevButton.addClass('sideways-button--is-invisible');
$thisCarousel.flickity('exitFullscreen')
} else if (selectedIndex == lastCellIndex) {
prevButton.removeClass('sideways-button--is-invisible');
nextButton.addClass('sideways-button--is-invisible');
} else {
prevButton.removeClass('sideways-button--is-invisible');
nextButton.removeClass('sideways-button--is-invisible');
}
})
$thisCarousel.data('flickity').on( 'fullscreenChange', function( event, isFullscreen ) {
$thisCarousel.closest('.expanded-carousel-container').toggleClass('expanded-carousel-container--is-fullscreen')
})
$thisCarousel.find('.expanded-carousel__indices').on( 'click', 'a', function(event) {
event.preventDefault()
var index = $(this).index()
var select = index + 1
// console.log('Clicked the link for slide number: ' + select)
$thisCarousel.flickity( 'select', select )
})
})
}
})
<?php
$items = array(
'key' => 'expanding_carousel',
'label' => 'Expanded Carousel',
'title' => 'Expanded Carousel',
'name' => 'expanding-carousel',
'type' => 'group',
'sub_fields' => array(
array (
'key' => 'expanding_carousel_section_label',
'label' => 'Section Label',
'name' => 'blocklabel',
'type' => 'text',
'instructions' => __('This label appears in in-page navigation and within the content of some blocks, overriding the title.', 'ipsen-master'),
),
array(
'key' => 'hide_block',
'label' => 'Hide this block from anchor links',
'name' => 'hide_block',
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => '',
'ui_off_text' => '',
),
array(
'key' => 'expanding_carousel_slides',
'label' => 'Slides',
'name' => 'slides', // the 'name' value has to match the variable passed to the twig file
'type' => 'repeater',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'collapsed' => '',
'min' => 0,
'max' => 0,
'layout' => 'row',
'button_label' => 'Add Slide',
'sub_fields' => array(
array(
'key' => 'expanding_carousel_slide_title',
'label' => 'Slide Title',
'name' => 'title', // the 'name' value for each field has to match the variable in the Twig file.
'type' => 'text',
'instructions' => '',
'required' => 1,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'default_value' => '',
'placeholder' => '',
'prepend' => '',
'append' => '',
'maxlength' => '',
),
array(
'key' => 'expanding_carousel_slide_content',
'label' => 'Item Content',
'name' => 'content', // the 'name' value for each field has to match the variable in the Twig file.
'type' => 'wysiwyg',
'instructions' => '',
'required' => 1,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'default_value' => '',
'placeholder' => '',
'maxlength' => '',
'rows' => '',
),
array (
'key' => 'expanding_carousel_slide_image',
'label' => 'Card Image',
'name' => 'image',
'type' => 'image',
'return_format' => 'url',
),
array (
'key' => 'expanding_carousel_slide_flex',
'label' => __('Expandable Content', 'ipsen-master'),
'name' => 'blocks',
'type' => 'flexible_content',
'instructions' => __('Place longer pieces of content here.', 'ipsen-master'),
'wrapper' => array (
'width' => '',
'class' => '',
'id' => '',
),
'button_label' => 'Add Block',
'min' => '',
'max' => '',
'layouts' => array(
array (
'key' => 'expanding_carousel_slide_wysiwyg_content_block',
'label' => 'Editorial',
'name' => 'generic-wysiwyg',
'type' => 'repeater',
'sub_fields' => array (
array (
'key' => 'expanding_carousel_slide_wysiwyg_content_block_content',
'label' => __('Content', 'ipsen-master'),
'name' => 'content',
'type' => 'wysiwyg',
'tabs' => 'visual',
// 'toolbar' => 'basic',
'media_upload' => 1,
),
),
'row_min' => 0,
'row_limit' => '',
'layout' => 'row',
),
array (
'key' => 'expanding_carousel_slide_accordion',
'label' => 'Accordion',
'name' => 'generic-accordion', //defines the Twig file you're using
'type' => 'repeater',
'sub_fields' => array (
array(
'key' => 'aexpanding_carousel_slide_accordion_accordions',
'label' => 'Accordions',
'name' => 'accordions', // has to match the variable in the Twig file.
'layout' => 'block',
'type' => 'repeater',
'button_label' => 'Add Accordion',
'sub_fields' => array (
array(
'key' => 'accordionHeader',
'label' => 'Heading',
'name' => 'accordionHeader',
'type' => 'text',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'default_value' => '',
'placeholder' => '',
'prepend' => '',
'append' => '',
'maxlength' => '',
),
array(
'key' => 'accordionContent',
'label' => 'Content',
'name' => 'accordionContent',
'type' => 'wysiwyg',
'tabs' => 'visual',
'media_upload' => 1,
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
),
),
),
),
'row_min' => 0,
'row_limit' => '',
),
),
),
),
)
)
);
array_push($_SESSION["blocks"], $items); //<---- this is needed so that it shows on the Add Block