diff --git a/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss b/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
index 8eb6dbb1f891b00fe818e5e0a096d3333f01f2bf..1f10430030af9b2ec2291dd6429d756a1f438366 100644
--- a/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
+++ b/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
@@ -3,7 +3,6 @@
@use '../../../01-core' as *;
-/* stylelint-disable-next-line selector-no-qualifying-type */
// constraining sections of the theme with the site-container
.uw-highlighted,
.block-page-title-block,
@@ -66,7 +65,7 @@ form {
}
.description {
- font-size: gesso-font-size(-2);
+ font-size: var(--font-size-000);
font-style: italic;
}
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index 6c6b79ffb776f5f9f2911c86308029c9f1ebe247..001bddeb6e0b27efcf0d44f1843ea72cf30d2c0e 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -17,6 +17,7 @@
@forward 'icon/icon';
@forward 'icon/icon--button/icon--button';
@forward 'image/image';
+@forward 'image-gallery/image-gallery';
@forward 'menu/menu';
@forward 'message/message';
@forward 'menu/menu--header/menu--header';
diff --git a/src/patterns/04-components/banners/_banners.scss b/src/patterns/04-components/banners/_banners.scss
index 061d1668bee678efe52ba14ced2a263533a73258..b7d650d1cb1874de7d31f850cfd847a33cd893e6 100644
--- a/src/patterns/04-components/banners/_banners.scss
+++ b/src/patterns/04-components/banners/_banners.scss
@@ -18,14 +18,14 @@
&.banner-single {
.uw-owl-nav__banner-control-wrap {
- display:none;
+ display: none;
}
}
}
&[data-autoplay="0"] {
.uw-owl-nav__banner-control-wrap {
- display:none;
+ display: none;
}
}
@@ -37,7 +37,6 @@
order: 4;
position: absolute;
z-index: var(--layer-content);
-
.uw-owl-nav__banner-control {
@include button-reset();
box-sizing: border-box;
@@ -46,9 +45,8 @@
overflow: hidden;
position: relative;
width: var(--size-4);
-
&.uw-play{
- display:none;
+ display: none;
}
.uw-icon{
@@ -56,7 +54,6 @@
height: var(--size-4);
width: var(--size-4);
}
-
}
}
@@ -71,14 +68,11 @@
background: var(--gray-5);
border-bottom: 1px solid var(--gray-5);
display: flex;
-
&.disabled {
display: none;
}
-
gap: var(--size-xs);
order: 3;
-
.owl-dot {
@include button-reset();
background-color: var(--gray-2);
@@ -87,7 +81,6 @@
margin: 0;
padding: 0;
width: 100%;
-
&:hover,
&:focus {
background-color: var(--gray-5);
@@ -103,11 +96,9 @@
// Replace with display: flex; when theming
// other banners.styles.
display: none;
-
&.disabled {
display: none;
}
-
flex-flow: column;
opacity: 0;
position: absolute;
@@ -115,16 +106,14 @@
transition: opacity 350ms ease-in-out 250ms;
width: 100% !important;
z-index: 1;
-
.owl-prev,
.owl-next {
@include button-reset();
- background: rgba(0,0,0,0.5);
+ background: rgba(0, 0, 0, 0.5);
height: var(--size-13);
- position:absolute;
+ position: absolute;
vertical-align: middle !important;
width: var(--size-6);
-
&::after {
display: block;
font-family: var(--font-system);
@@ -135,7 +124,6 @@
.owl-prev {
align-self: flex-start;
padding-left: var(--size-2) !important;
-
&::after {
content: "\2039";
}
@@ -145,7 +133,6 @@
align-self: flex-end;
padding-left: var(--size-2) !important;
right: 0;
-
&::after {
content: "\203A";
}
@@ -182,12 +169,20 @@
}
&.banner-single{
.uw-owl-nav__banner-control-wrap {
- display:none;
+ display: none;
}
}
}
}
}
+ .card__banner:target ~ .card__banner:last-of-type,
+ .card__banner {
+ display: inherit;
+ }
+ .card__banner:last-of-type,
+ .card__banner:target {
+ display: inherit;
+ }
}
.uw-owl-nav__dots-js {
@@ -197,7 +192,6 @@
display: flex;
gap: var(--size-xs);
order: 3;
-
.owl-dot {
@include button-reset();
background-color: var(--gray-2);
@@ -206,7 +200,6 @@
margin: 0;
padding: 0;
width: 100%;
-
&:hover,
&:focus {
background-color: var(--gray-5);
@@ -224,23 +217,9 @@
display: none;
}
- &.js {
- .card__banner:target ~ .card__banner:last-of-type,
- .card__banner {
- display: inherit;
- }
- }
-
/* :last-child works, but .page:last-child will not */
.card__banner:last-of-type,
.card__banner:target {
display: block;
}
-
- &.js {
- .card__banner:last-of-type,
- .card__banner:target {
- display: inherit;
- }
- }
}
diff --git a/src/patterns/04-components/card/card--banner/_card--banner.scss b/src/patterns/04-components/card/card--banner/_card--banner.scss
index 59f7b25b504c7cd172a339db680c94b420e51c61..a2f07e28fe55b3d4ffa7f542b365093e7c13e401 100644
--- a/src/patterns/04-components/card/card--banner/_card--banner.scss
+++ b/src/patterns/04-components/card/card--banner/_card--banner.scss
@@ -16,7 +16,6 @@
}
a {
text-decoration: none;
-
.card__banner--title {
color: var(--uw-gold);
}
@@ -24,14 +23,12 @@
.card__banner--sub-title {
color: var(--uw-white) !important;
}
-
&:hover,
&:focus {
.card__banner--title {
color: var(--uw-gold);
- text-decoration:underline;
+ text-decoration: underline;
}
-
.card__banner--sub-title {
color: var(--uw-white) !important;
text-decoration: underline;
@@ -44,12 +41,10 @@
.owl-prev,
.owl-next {
color: var(--uw-gold) !important;
-
&:hover,
&:focus {
background: var(--uw-gold) !important;
color: var(--uw-black) !important;
-
}
}
}
@@ -60,22 +55,20 @@
}
.uw-owl-nav__banner-control {
- background:var(--uw-black) !important;
- border:1px solid var(--uw-gold) !important;
-
+ background: var(--uw-black) !important;
+ border: var(size-xs) solid var(--uw-gold) !important;
.uw-play-svg {
- fill:var(--uw-gold);
+ fill: var(--uw-gold);
}
.uw-pause-svg {
- fill:var(--uw-gold);
+ fill: var(--uw-gold);
}
&:hover,
&:focus {
background: var(--uw-gold) !important;
border: var(--size-xs) solid var(--uw-black) !important;
-
.uw-play-svg{
fill: var(--uw-black);
}
@@ -86,34 +79,30 @@
}
}
}
-
@else if $faculty == org-stp or $faculty == org-stj or $faculty == org-ren or $faculty == org-cgc {
-
.card__banner{
.card__banner--title {
- color:var(--uw-white);
+ color: var(--uw-white);
}
.card__banner--sub-title {
- color:var(--uw-white);
+ color: var(--uw-white);
}
a {
.card__banner--title {
- color:var(--uw-white);
-
+ color: var(--uw-white);
}
.card__banner--sub-title {
- color:var(--uw-white);
+ color: var(--uw-white);
}
&:hover,
&:focus {
.card__banner--title {
- color:var(--uw-white);
+ color: var(--uw-white);
text-decoration: underline;
-
}
.card__banner--sub-title {
- color:var(--uw-white);
+ color: var(--uw-white);
text-decoration: underline;
}
}
@@ -146,7 +135,7 @@
&:hover,
&:focus {
background: var(--#{$colour}-primary) !important;
- border: 1px solid var(--#{$colour}-light) !important;
+ border: var(--size-xs) solid var(--#{$colour}-light) !important;
.uw-play-svg {
fill: var(--#{$colour}-light) !important;
@@ -162,11 +151,10 @@
}
}
@else {
- .card__banner{
+ .card__banner{
.card__banner--title {
color: var(--#{$colour}-1);
}
-
.card__banner--sub-title {
color: var(--#{$colour}-1);
}
@@ -187,7 +175,7 @@
}
.card__banner--sub-title {
- color:var(--#{$colour}-1);
+ color: var(--#{$colour}-1);
text-decoration: underline;
}
}
@@ -208,7 +196,6 @@
.uw-owl-nav__banner-control {
background: var(--uw-white) !important;
border: var(--size-xs) solid var(--#{$colour}-primary) !important;
-
.uw-play-svg {
fill: var(--#{$colour}-primary) !important;
}
@@ -221,7 +208,6 @@
&:focus{
background: var(--#{$colour}-primary) !important;
border: var(--size-xs) solid var(--#{$colour}-1) !important;
-
.uw-play-svg {
fill: var(--#{$colour}-1) !important;
}
@@ -233,26 +219,17 @@
}
.card__banner--caption{
- background: var(--#{$colour}-primary);
+ background: var(--#{$colour}-primary);
}
}
}
}
-.card__banner {
- .card__body {
- padding: inherit;
- }
- .card__image {
- margin: 0;
- }
-}
-
.card__banner--image {
- background: var(--uw-black);
- margin-bottom: 0;
- padding: 0;
- position: relative;
+ background: var(--uw-black);
+ margin-bottom: 0;
+ padding: 0;
+ position: relative;
}
.card__banner--caption {
@@ -264,7 +241,6 @@
position: relative;
text-align: center;
width: 100%;
-
strong{
font-weight: 400;
}
@@ -281,7 +257,6 @@
padding: 0 var(--size-1);
text-align: center;
width: auto;
-
@media(min-width: $screen-md) {
font-size: var(--font-size-6);
}
@@ -291,7 +266,6 @@
display: block;
font-family: var(--font-book);
font-size: var(--font-size-00);
-
@media(min-width: $screen-md) {
font-size: var(--font-size-0);
}
@@ -300,9 +274,14 @@
}
.card__banner {
+ .card__body {
+ padding: inherit;
+ }
+ .card__image {
+ margin: 0;
+ }
a {
background: var(--uw-black);
-
.card__banner--media {
margin-bottom: 0;
opacity: 1;
@@ -323,11 +302,6 @@
}
}
}
-
- .card__body {
- padding:inherit;
- }
-
.uw-picture__fallback{
background: var(--uw-black);
display: block;
diff --git a/src/patterns/04-components/image-gallery/_image-gallery.scss b/src/patterns/04-components/image-gallery/_image-gallery.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ac2dabae5b6eb745c4762798d05103b6f4c8de04
--- /dev/null
+++ b/src/patterns/04-components/image-gallery/_image-gallery.scss
@@ -0,0 +1,382 @@
+// @file
+// Styles for Image gallery.
+
+@use '../../01-core' as *;
+
+$size-small: 3;
+$size-medium: 4;
+$size-large: 4;
+$size-xlarge: 7;
+.uw-ig {
+ &--slider {
+ //
+ }
+ &--grid {
+ //.uw-ig__wrapper {
+ // align-items: baseline;
+ // display: grid;
+ // grid-gap: 1rem;
+ // grid-template-columns: repeat(2, 1fr);
+ // @include small {
+ // grid-template-columns: repeat($size-small, 1fr);
+ // }
+ // @include medium {
+ // grid-template-columns: repeat($size-medium, 1fr);
+ // .layout--uw-2-col &,
+ // .layout--uw-3-col &,
+ // .layout--uw-4-col &,
+ // .layout--uw-5-col & {
+ // grid-template-columns: repeat($size-small, 1fr);
+ // }
+ // }
+ // @include large {
+ // grid-template-columns: repeat($size-large, 1fr);
+ // .uw-contained-width--narrow &,
+ // .layout--uw-2-col &,
+ // .layout--uw-3-col &,
+ // .layout--uw-4-col &,
+ // .layout--uw-5-col & {
+ // grid-template-columns: repeat($size-small, 1fr);
+ // }
+ // }
+ // @include xl {
+ // .uw-full-width.layout--uw-1-col & {
+ // grid-template-columns: repeat($size-xlarge, 1fr);
+ // }
+ //
+ // }
+ //}
+
+ .uw-ig__wrapper {
+ align-items: flex-start;
+ display: flex;
+ flex-flow: row wrap;
+ gap: var(--size-2);
+ justify-content: space-between;
+
+ @media(min-width: $screen-sm) {
+ //
+ }
+ @media(min-width: $screen-md) {
+ //
+ .layout--uw-2-col &,
+ .layout--uw-3-col &,
+ .layout--uw-4-col &,
+ .layout--uw-5-col & {
+ //
+ }
+ }
+ @media(min-width: $screen-lg) {
+ .uw-contained-width--narrow &,
+ .layout--uw-2-col &,
+ .layout--uw-3-col &,
+ .layout--uw-4-col &,
+ .layout--uw-5-col & {
+ //
+ }
+ }
+ @media(min-width: $screen-xl) {
+ .uw-full-width.layout--uw-1-col & {
+ //
+ }
+ }
+ .uw-ig__item{
+ flex: 1 0 auto;
+ width: 32%;
+ }
+ }
+ }
+ &--masonry {
+ .uw-ig__wrapper {
+ @media(min-width: $screen-md) {
+ grid-template-columns: repeat($size-medium, 1fr);
+ height: 100%;
+ > div {
+ //Grid Structure
+ &:nth-child(#{$size-medium}n + 1) {
+ grid-column: span 2;
+ grid-row: span 2;
+ }
+
+ &:nth-child(2) {
+ grid-column: span 3;
+ grid-row: span 3;
+ }
+
+ &:nth-child(4) {
+ grid-column: span 1;
+ grid-row: span 2;
+ }
+ }
+ // Inside narrow width section or multiple
+ // column layout, make columns 3"
+ .uw-contained-width--narrow &,
+ .layout--uw-2-col &,
+ .layout--uw-3-col &,
+ .layout--uw-4-col &,
+ .layout--uw-5-col & {
+ grid-template-columns: repeat($size-small, 1fr);
+
+ > div {
+ &:nth-child(#{$size-small}n + 1) {
+ grid-column: span 1;
+ grid-row: span 1;
+ }
+ }
+ }
+ }
+ @media(min-width: $screen-xl) {
+ .uw-full-width.layout--uw-1-col & {
+ grid-template-columns: repeat($size-xlarge, 1fr);
+ }
+ > div {
+ //&:nth-child(#{$size-xlarge}n + 1) {
+ // grid-column: span 2;
+ // grid-row: span 2;
+ //}
+ //
+ //&:nth-child(2) {
+ // grid-column: span 3;
+ // grid-row: span 3;
+ //}
+ //&:nth-child(3) {
+ // grid-column: span 1;
+ // grid-row: span 2;
+ //}
+ //&:nth-child(4) {
+ // grid-column: span 2;
+ // grid-row: span 2;
+ //}
+ //&:nth-child(5) {
+ // grid-column: span 1;
+ // grid-row: span 1;
+ //}
+ //&:nth-child(6) {
+ // grid-column: span 2;
+ // grid-row: span 2;
+ //}
+ }
+ }
+ }
+ }
+ &__image{
+ min-height: 200px;
+ position: relative;
+ width: 100%;
+ a {
+ background: var(--uw-black);
+ box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
+ display: block;
+ height: 100%;
+ left: 0;
+ overflow: hidden;
+ top: 0;
+ transition: all ease 250ms;
+ transition-delay: 0s;
+ transition-duration: 0.2s;
+ transition-property: color, background-color, border-color, opacity;
+ transition-timing-function: linear;
+ width: 100%;
+ img {
+ display: block;
+ object-fit: contain;
+ opacity: 1;
+ width: 100%;
+ }
+ &:hover,
+ &:focus{
+ background: var(--uw-black);
+ img {
+ min-height: 100%;
+ object-fit: contain;
+ opacity: 0.6;
+ transition: all ease 250ms;
+ width: 100%;
+ }
+ }
+ }
+ }
+}
+//
+// lightbox
+//
+[id^="uw-lightbox-"] {
+ &.openLightBox{
+ opacity: 1 !important;
+ }
+ .uw-lightbox{
+ &__prev-next{
+ display: flex;
+ flex-flow: column;
+ opacity: 0;
+ position: absolute;
+ top: calc(50% - 6rem);
+ transition: opacity 250ms ease-in-out 250ms;
+ width: 100% !important;
+ z-index: 1000;
+ }
+ &__prev,
+ &__next{
+ @include button-reset();
+ background: var(--uw-gold);
+ height: 6.5rem;
+ position: absolute;
+ vertical-align: middle !important;
+ width: 3rem;
+ &:hover,
+ &:focus{
+ background: var(--uw-black);
+
+ &::after{
+ color: var(--uw-gold);
+ }
+ }
+ &::after{
+ color: var(--uw-black);
+ display: block;
+ font-family: var(--font-system);
+ font-size: var(--font-size-12);
+ }
+ }
+ &__prev{
+ align-self: flex-start;
+ padding-left: var(--size-2) !important;
+ &::after{
+ content: "\2039";
+ }
+ }
+ &__next{
+ align-self: flex-end;
+ padding-left: var(--size-2) !important;
+ right: 0;
+ &::after{
+ content: "\203A";
+ }
+ }
+ }
+ &:target {
+ opacity: 1;
+ pointer-events: inherit;
+ z-index: 100;
+ .uw-lightbox__content{
+ opacity: 1;
+ transition: opacity 250ms ease-in-out 125ms;
+ img,
+ picture{
+ display: block;
+ }
+ &:hover{
+ .uw-lightbox{
+ &__prev-next{
+ opacity: 1;
+ transition: opacity 250ms ease-in-out;
+ }
+ }
+ }
+ }
+ }
+ align-items: center;
+ background-color: rgba(0, 0, 0, 0.95);
+ display: flex;
+ height: 100vh;
+ justify-content: center;
+ left: 0;
+ opacity: 0;
+ pointer-events: none;
+ position: fixed;
+ top: 0;
+ width: 100vw;
+ .uw-lightbox__content {
+ border: var(--size-xs) solid var(--gray-7);
+ color: var(--uw-white) !important;
+ opacity: 0;
+ position: relative;
+ transition: opacity 250ms ease-in-out 125ms;
+ img,
+ picture{
+ display: none;
+ }
+ &:hover > .uw-lightbox__close {
+ opacity: 1;
+ transform: scale(1, 1);
+ }
+
+ &:hover > .uw-lightbox__title {
+ opacity: 1;
+ transform: translateY(0); //Fix extra line at end
+ &::after{
+ opacity: 1;
+ }
+ }
+ > * {
+ transition: all 250ms ease-in-out;
+ }
+ }
+ .uw-lightbox__title {
+ bottom: 0;
+ display: block;
+ margin: 0;
+ opacity: 0;
+ padding: var(--size-2);
+ position: absolute;
+ transform: translateY(50%);
+ width: 100%;
+ &::after {
+ background-color: rgba(0, 0, 0, 0.8);
+ bottom: 0;
+ content: ' ';
+ height: 100%;
+ left: 0;
+ opacity: 0;
+ position: absolute;
+ transform-origin: bottom;
+ transition: all 250ms ease-in-out 250ms;
+ width: 100%;
+ }
+ }
+ .uw-lightbox__caption{
+ color: var(--uw-white);
+ font-family: var(--font-system);
+ position: relative;
+ z-index: var(--layer-overlay);
+ }
+ img {
+ display: block;
+ margin: 0;
+ max-height: 90vh;
+ max-width: 100%;
+ padding: 0;
+ }
+ .uw-lightbox__count{
+ color: var(--uw-white) !important;
+ display: flex;
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-0);
+ padding: var(--size-05) var(--size-1);
+ position: absolute;
+ right: 0;
+ top: 0.125rem;
+ z-index: var(--layer-overlay);
+ }
+ .uw-lightbox__close {
+ align-items: center;
+ background-color: rgba(0, 0, 0, 0.8);
+ color: var(--uw-white) !important;
+ display: flex;
+ font-family: var(--font-systembold);
+ font-size: var(--font-size-2);
+ height: var(--size-4);
+ justify-content: center;
+ opacity: 0;
+ position: absolute;
+ right: 0;
+ text-decoration: none;
+ top: 0;
+ transform: scale(0, 0);
+ transform-origin: right top;
+ width: var(--size-4);
+ &::after {
+ content: "X";
+ }
+ }
+}
diff --git a/src/patterns/04-components/image-gallery/image-gallery.js b/src/patterns/04-components/image-gallery/image-gallery.js
new file mode 100644
index 0000000000000000000000000000000000000000..86d2eedb4935968aa06f1d26bfe37f44b8012d61
--- /dev/null
+++ b/src/patterns/04-components/image-gallery/image-gallery.js
@@ -0,0 +1,134 @@
+/**
+ * @file
+ */
+
+(function ($, Drupal) {
+ 'use strict';
+ Drupal.behaviors.imagegallery = {
+ attach: function () {
+
+ $(document).ready(function () {
+
+ // Step through each FF on the page.
+ $('.uw-ig').each(function () {
+
+ // Get the id to reference the individual FF.
+ // Need this to ensure that if more than one FF on the page,
+ // that all FFs get the carousel added.
+ var id = '#uw-ig-' + $(this).data('id');
+ var imagesNum = $(this).data('images-num') || 1;
+ var navStyle = $(this).data('nav') || 'both';
+
+ // Create owl carouse config first.
+ var carousel = {
+ loop: true,
+ dots: true,
+ nav: true,
+ navContainerClass: 'uw-owl-nav',
+ navText:[
+ 'prev',
+ 'next'
+ ],
+ margin: 10,
+ responsiveClass: true,
+ responsive: {
+ 0: {
+ items: 1
+ },
+ 600: {
+ items: imagesNum
+ },
+ 1000: {
+ items: imagesNum
+ }
+ }
+ };
+
+ if (navStyle === 'pagination') {
+ carousel.nav = false;
+ }
+ else if (navStyle === 'navigation') {
+ carousel.dots = false;
+ }
+
+ // Add the carousel to the FF using the id.
+ $(id + ' .owl-carousel').owlCarousel(carousel);
+
+ // Lightbox enchancements
+ $('.uw-lightbox__open').on('click', function () {
+ $(id + ' .uw-lightbox').addClass('openLightBox');
+ $('html').addClass('no-scroll');
+
+ });
+ // Lightbox close
+ $(id + ' .uw-lightbox__close').on('click', function () {
+ $('.uw-lightbox').removeClass('openLightBox');
+ $('html').removeClass('no-scroll');
+ });
+ // If next is clicked
+ $(id + ' .uw-lightbox__next').on('click', function () {
+ if (!$(id + ' .uw-lightbox').hasClass('openLightBox')) {
+ $(id + ' .uw-lightbox').addClass('openLightBox');
+ }
+ });
+ // If prev is clicked
+ $(id + ' .uw-lightbox__prev').on('click', function () {
+ if (!$(id + ' .uw-lightbox').hasClass('openLightBox')) {
+ $(id + ' .uw-lightbox').addClass('openLightBox');
+ }
+ });
+
+ /**
+ * Javascript for click,
+ * Faking a click for esc
+ * @returns {boolean} clicked.
+ */
+ function fakeClick() {
+ //use url to build the fake anchor id
+ var url = window.location.href;
+ //Regex to replace the text
+ // "lightbox" with "ig" a
+ // and trim last "-###".
+ var galleryAnchor = url
+ .substring(url.lastIndexOf('/') + 1)
+ .replace( /(?:^|\W)lightbox(?:$|\W)/, '-ig-')
+ .replace(/-\d+$/, '');
+ // Create the fake element
+ var escFake = document.createElement('a');
+
+ var linkText = document.createTextNode('fake click');
+
+ escFake.appendChild(linkText);
+ escFake.title = 'my title text';
+ escFake.href = galleryAnchor;
+ escFake.classList = 'uw-lightbox__close off-screen';
+
+ // Append the fake button
+ document.body.appendChild(escFake);
+ //Click the button
+ escFake.click();
+ // Remove no scroll
+ $('html').removeClass('no-scroll');
+ // Remove open class
+ $('.uw-lightbox').removeClass('openLightBox');
+ // Remove the fake button
+ document.body.removeChild(escFake);
+
+ }
+ // Attach the keyup event to Escape tp close
+ $(document).on('keyup', function (evt) {
+ if (evt.keyCode === 27) {
+ fakeClick();
+ }
+ });
+ // If click in outside lightbox div then close
+ $(document).click( function (evt) {
+ if ($(evt.target).is( $('.uw-lightbox.openLightBox'))) {
+ fakeClick();
+ }
+ });
+ });
+ });
+ }
+ };
+})(jQuery, Drupal);
diff --git a/src/patterns/04-components/image-gallery/image-gallery.twig b/src/patterns/04-components/image-gallery/image-gallery.twig
new file mode 100644
index 0000000000000000000000000000000000000000..7ca27a266c1ce860d84310e21924ad185b13d3da
--- /dev/null
+++ b/src/patterns/04-components/image-gallery/image-gallery.twig
@@ -0,0 +1,150 @@
+{% set modifier_classes = 'uw-ig--' ~ type %}
+
+ <div id="uw-ig-{{ images.id }}" class="uw-ig {{ modifier_classes }}" data-id="{{ images.id }}" data-images-num="{{ display_images }}" data-nav="{{ nav }}">
+ <div class="uw-ig__wrapper">
+ {% if type == NULL or type == 'slider' %}
+
+ {% embed '@layouts/carousel/carousel.twig' %}
+
+ {% block content %}
+ {% for index, image in images.images %}
+ <div class="uw-ig__item">
+ <div class="uw_ig__image">
+ <a class="uw-lightbox__open" href="#uw-lightbox-{{ images.id }}-{{ index }}">
+
+ {% include '@components/responsive-image/responsive-image.twig' with {
+ 'sources': image.image.sources,
+ 'img_element': image.image.img_element['#uri'],
+ 'alt': image.image.alt
+ } %}
+
+ </a>
+ </div>
+ {% if image.caption %}
+ <div class="uw_ig__caption">
+ {% include '@components/caption/caption.twig' with {
+ 'caption': image.caption
+ } %}
+ </div>
+ {% endif %}
+ </div>
+
+ {% endfor %}
+
+ {% endblock %}
+
+ {% endembed %}
+ {# lightbox #}
+
+ {% for index, image in images.images %}
+ <div class="uw-lightbox" id="uw-lightbox-{{ images.id }}-{{ index }}">
+ <div class="uw-lightbox__content">
+
+ <img src="{{ image.original }}" alt="{{ image.image.alt }}">
+
+ <div class="uw-lightbox__title">
+
+ <div class="uw-lightbox__count">
+ <span>{{ loop.index }} / {{ loop.length }}</span>
+ </div>
+
+ {% if image.caption %}
+ <div class="uw-lightbox__caption">{{ image.caption }}</div>
+ {% endif %}
+ </div>
+
+ <a class="uw-lightbox__close" href="#uw-ig-{{ image_gallery.images.id }}"></a>
+
+ {% set numItems = loop.length - "1" %}
+ {% if index == 0 %}
+ {% set prevIndex = numItems %}
+ {% set nextIndex = index + "1" %}
+ {% elseif index == numItems %}
+ {% set nextIndex = 0 %}
+ {% set prevIndex = index - "1" %}
+ {% else %}
+ {% set prevIndex = index - "1" %}
+ {% set nextIndex = index + "1" %}
+ {% endif %}
+
+ <div class="uw-lightbox__prev-next">
+ <a class="uw-lightbox__prev" href="#uw-lightbox-{{ images.id }}-{{ prevIndex }}"></a>
+ <a class="uw-lightbox__next" href="#uw-lightbox-{{ images.id }}-{{ nextIndex }}"></a>
+ </div>
+ </div>
+ </div>
+ {% endfor %}
+
+ {% else %}
+
+ {% for images in image_gallery.images %}
+
+ {% for index, image in images %}
+ <div class="uw-ig__item">
+ <div class="uw-ig__image">
+ <a class="uw-lightbox__open" href="#uw-lightbox-{{image_gallery.images.id }}-{{ index }}">
+ <img src="{{ image.image.thumbnail }}" alt="{{ image.image.alt }}" />
+ </a>
+
+ {% if image.caption %}
+ <div class="uw_ig__caption">
+ {% include '@components/caption/caption.twig' with {
+ 'caption': image.caption
+ } %}
+ </div>
+ {% endif %}
+
+ </div>
+ </div>
+ {% endfor %}
+ {% endfor %}
+
+ {# lightbox #}
+ {% for images in image_gallery.images %}
+
+ {% for index, image in images %}
+ <div class="uw-lightbox" id="uw-lightbox-{{ image_gallery.images.id }}-{{ index }}">
+ <div class="uw-lightbox__content">
+ <img src="{{ image.image.original }}" alt="{{ image.alt }}">
+
+ <div class="uw-lightbox__title">
+ <div class="uw-lightbox__count">
+ <span>{{ loop.index }} / {{ loop.length }}</span>
+ </div>
+ {% if image.caption %}
+ <div class="uw-lightbox__caption">{{ image.caption }}</div>
+ {% endif %}
+ </div>
+
+ <a class="uw-lightbox__close" href="#uw-ig-{{ image_gallery.images.id }}"></a>
+
+ {% set numItems = loop.length - "1" %}
+ {% if index == 0 %}
+ {% set prevIndex = numItems %}
+ {% set nextIndex = index + "1" %}
+ {% elseif index == numItems %}
+ {% set nextIndex = 0 %}
+ {% set prevIndex = index - "1" %}
+ {% else %}
+ {% set prevIndex = index - "1" %}
+ {% set nextIndex = index + "1" %}
+ {% endif %}
+
+ <div class="uw-lightbox__prev-next">
+ <a class="uw-lightbox__prev" href="#uw-lightbox-{{ image_gallery.images.id }}-{{ prevIndex }}"></a>
+ <a class="uw-lightbox__next" href="#uw-lightbox-{{image_gallery.images.id }}-{{ nextIndex }}"></a>
+ </div>
+ </div>
+ </div>
+ {% endfor %}
+ {% endfor %}
+ </div>
+ {% endif %}
+
+ </div>
+ </div>
+
+
+
+
+
diff --git a/src/patterns/04-components/image-gallery/image-gallery.yml b/src/patterns/04-components/image-gallery/image-gallery.yml
new file mode 100644
index 0000000000000000000000000000000000000000..41a32b6b448f3c6fe81277d132dcb268104c2f70
--- /dev/null
+++ b/src/patterns/04-components/image-gallery/image-gallery.yml
@@ -0,0 +1,45 @@
+images:
+ id: 'someid'
+ images:
+ -
+ image:
+ sources:
+ - srcset: '../../../../source/images/president/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative text'
+ caption: 'UW President'
+ -
+ image:
+ sources:
+ - srcset: '../../../../source/images/president/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative text'
+ caption: 'UW President'