@internetstiftelsen/styleguide 2.21.11 → 2.21.14-beta.0.2

package/dist/atoms/textarea/rich-text.js

@@ -137,7 +137,7 @@ function createToolbar(el, editor) {
 function getHTML(editor) {
 	var html = editor.getHTML();
 
-	return html.replace(/<li><p>/g, '<li>').replace(/<\/p><\/li>/g, '</li>');
+	return html;
 }
 
 function setupTextArea(el) {
@@ -158,6 +158,7 @@ function setupTextArea(el) {
 		},
 		onUpdate: function onUpdate(props) {
 			var html = getHTML(props.editor);
+			console.log(html);
 			el.value = html;
 			onChange(html);
 		}

package/dist/molecules/glider/glider-single.js

@@ -18,6 +18,7 @@ if (gliderElementSingle) {
 	var nextBtns = document.querySelectorAll('.js-glider-next');
 	var prevBtns = document.querySelectorAll('.js-glider-prev');
 	var siteMain = document.querySelector('#siteMain');
+	var zoomImages = document.querySelectorAll('.js-zoom');
 	var slideIndex = GliderSingle.getCurrentSlide();
 	var bounding = 0;
 
@@ -55,5 +56,13 @@ if (gliderElementSingle) {
 		});
 	}
 
+	if (zoomImages) {
+		[].forEach.call(zoomImages, function (zoomImage) {
+			zoomImage.addEventListener('click', function () {
+				zoomImage.classList.toggle('is-zoomed');
+			});
+		});
+	}
+
 	module.exports = GliderSingle;
 }

package/dist/molecules/modal/modal.js

@@ -218,7 +218,7 @@ function display() {
  * Dispatch the next modal in queue.
  */
 function dispatch() {
-	if (active || !queue.length) {
+	if (!modal || active || !queue.length) {
 		return;
 	}
 
@@ -298,6 +298,10 @@ function createModal() {
 	document.body.appendChild(modal);
 
 	modalClose.addEventListener('click', close);
+
+	setTimeout(function () {
+		dispatch();
+	}, 1);
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.21.11",
+	"version": "2.21.14-beta.0.2",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/atoms/textarea/rich-text.js

@@ -131,9 +131,7 @@ function createToolbar(el, editor) {
 function getHTML(editor) {
 	const html = editor.getHTML();
 
-	return html
-		.replace(/<li><p>/g, '<li>')
-		.replace(/<\/p><\/li>/g, '</li>');
+	return html;
 }
 
 export function setupTextArea(el, onChange = () => {}) {
@@ -155,6 +153,7 @@ export function setupTextArea(el, onChange = () => {}) {
 		},
 		onUpdate(props) {
 			const html = getHTML(props.editor);
+			console.log(html);
 			el.value = html;
 			onChange(html);
 		},

package/src/molecules/glider/_glider.scss

@@ -26,7 +26,7 @@
 	position: relative;
 	margin: 0 auto;
 	overflow: hidden;
-	transform: translateZ(0);
+	//transform: translateZ(0);
 	backface-visibility: hidden;
 	-webkit-overflow-scrolling: touch;
 	-ms-overflow-style: none;
@@ -56,7 +56,7 @@
 	width: 100%;
 	margin: 0;
 	padding: 0;
-	transform: translateZ(0);
+	//transform: translateZ(0);
 }
 
 .glider-slide {
@@ -122,6 +122,45 @@
 
 		@include e(media) {
 
+			&:not([class*='overlay']) {
+				cursor: zoom-in;
+				transition: all 0.15s ease-out;
+
+				img {
+					transition: all 0.25s ease-out;
+				}
+
+				// Image zooming
+				&.is-zoomed {
+					cursor: zoom-out !important;
+					position: fixed;
+					left: 0;
+					right: 0;
+					top: 0;
+					bottom: 0;
+					z-index: z_index(foreground);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					background-color: rgba($color-cyberspace, 0.8);
+					flex-direction: column;
+
+					img {
+						cursor: zoom-out;
+						max-width: 100%;
+						max-height: 100vh;
+						padding: rhythm(1);
+						height: auto;
+					}
+
+					figcaption {
+						color: $color-snow;
+						padding-left: rhythm(1);
+						padding-right: rhythm(1);
+					}
+				}
+			}
+
 			figcaption {
 				margin-top: rhythm(1);
 			}

package/src/molecules/glider/glider--single.hbs

@@ -22,8 +22,8 @@
 					</div>
 					<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-1-ImageContainer">
 						<div class="wp-block-image" data-responsive="xs:slide-1-ImageContainerMobile,lg:slide-1-ImageContainer">
-							<figure class="size-large glider-slide__media">
-								<img src="/assets/images/hero.jpg" alt="kursbild">
+							<figure class="size-large glider-slide__media js-zoom">
+								<img src="/assets/images/hero.jpg" alt="kursbild" class="u-border-radius">
 							</figure>
 						</div>
 					</div>
@@ -48,7 +48,7 @@
 					</div>
 					<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-2-ImageContainer">
 						<div class="wp-block-image" data-responsive="xs:slide-2-ImageContainerMobile,lg:slide-2-ImageContainer">
-							<figure class="size-large glider-slide__media">
+							<figure class="size-large glider-slide__media js-zoom">
 								<figcaption class="u-m-b-1">Exempel på bluffmejl</figcaption>
 								<img src="/assets/images/bluffmejl.png" alt="kursbild" class="u-border-radius">
 							</figure>
@@ -109,7 +109,7 @@
 					</div>
 					<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-4-ImageContainer">
 						<div class="wp-block-image" data-responsive="xs:slide-4-ImageContainerMobile,lg:slide-4-ImageContainer">
-							<figure class="size-large glider-slide__media">
+							<figure class="size-large glider-slide__media js-zoom">
 								<img src="/assets/images/ALX_0876.jpg" alt="kursbild" class="u-border-radius">
 							</figure>
 						</div>

package/src/molecules/glider/glider-single.js

@@ -12,6 +12,7 @@ if (gliderElementSingle) {
 	const nextBtns = document.querySelectorAll('.js-glider-next');
 	const prevBtns = document.querySelectorAll('.js-glider-prev');
 	const siteMain = document.querySelector('#siteMain');
+	const zoomImages = document.querySelectorAll('.js-zoom');
 	let slideIndex = GliderSingle.getCurrentSlide();
 	let bounding = 0;
 
@@ -49,5 +50,13 @@ if (gliderElementSingle) {
 		});
 	}
 
+	if (zoomImages) {
+		[].forEach.call(zoomImages, (zoomImage) => {
+			zoomImage.addEventListener('click', () => {
+				zoomImage.classList.toggle('is-zoomed');
+			});
+		});
+	}
+
 	module.exports = GliderSingle;
 }

package/src/molecules/modal/modal.js

@@ -195,7 +195,7 @@ function display() {
  * Dispatch the next modal in queue.
  */
 function dispatch() {
-	if (active || !queue.length) {
+	if (!modal || active || !queue.length) {
 		return;
 	}
 
@@ -286,6 +286,10 @@ function createModal() {
 	document.body.appendChild(modal);
 
 	modalClose.addEventListener('click', close);
+
+	setTimeout(() => {
+		dispatch();
+	}, 1);
 }
 
 /**

package/src/organisms/footer/_footer.scss

@@ -143,11 +143,9 @@ $footer-font-size: 18px; // To ensure all footers on all sites have the same fon
 
 			@include bp-only(md) {
 				border-bottom: 0;
-				border-right: 1px solid $color-black;
 			}
 
 			@include bp-up(xl) {
-				border-right: 1px solid $color-black;
 				border-bottom: 0;
 				padding: rhythm(4) rhythm(3) rhythm(3) rhythm(6);
 			}
@@ -156,7 +154,12 @@ $footer-font-size: 18px; // To ensure all footers on all sites have the same fon
 		@include e(address2) {
 			padding: rhythm(3);
 
+			@include bp-only(md) {
+				border-left: 1px solid $color-black;
+			}
+
 			@include bp-up(xl) {
+				border-left: 1px solid $color-black;
 				padding-left: rhythm(6);
 				padding-top: rhythm(4);
 			}