@internetstiftelsen/styleguide 2.21.18 → 2.21.19

package/dist/assets/js/responsivePosition.js

@@ -10,6 +10,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var breakpoints = {
 	xs: 0,
+	smxs: 469,
 	sm: 576,
 	md: 769,
 	lg: 961,

package/dist/components.js

@@ -44,7 +44,7 @@ require('./assets/js/youtube');
 
 require('./molecules/glider/glider');
 
-require('./molecules/glider/glider-single');
+require('./molecules/glider/glider-course');
 
 require('./atoms/timeline/anchorScroll');
 

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

@@ -0,0 +1,68 @@
+'use strict';
+
+var _gliderJs = require('glider-js');
+
+var _gliderJs2 = _interopRequireDefault(_gliderJs);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var gliderElementSingle = document.querySelector('.js-glider-course');
+
+if (gliderElementSingle) {
+	var GliderSingle = new _gliderJs2.default(gliderElementSingle, {
+		scrollLock: true,
+		slidesToShow: 1,
+		slidesToScroll: 1
+	});
+
+	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.zoom');
+	var slideIndex = GliderSingle.getCurrentSlide();
+	var bounding = 0;
+
+	var scrollTop = function scrollTop() {
+		siteMain.scrollIntoView();
+	};
+
+	if (nextBtns) {
+		[].forEach.call(nextBtns, function (nextBtn) {
+			nextBtn.addEventListener('click', function () {
+				GliderSingle.scrollItem(slideIndex += 1, true);
+
+				if (siteMain) {
+					bounding = siteMain.getBoundingClientRect();
+					if (bounding.top < 0) {
+						scrollTop();
+					}
+				}
+			});
+		});
+	}
+
+	if (prevBtns) {
+		[].forEach.call(prevBtns, function (prevBtn) {
+			prevBtn.addEventListener('click', function () {
+				GliderSingle.scrollItem(slideIndex -= 1, true);
+
+				if (siteMain) {
+					bounding = siteMain.getBoundingClientRect();
+					if (bounding.top < 0) {
+						scrollTop();
+					}
+				}
+			});
+		});
+	}
+
+	if (zoomImages) {
+		[].forEach.call(zoomImages, function (zoomImage) {
+			zoomImage.addEventListener('click', function () {
+				zoomImage.classList.toggle('is-zoomed');
+			});
+		});
+	}
+
+	module.exports = GliderSingle;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.21.18",
+	"version": "2.21.19",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/assets/js/responsivePosition.js

@@ -2,6 +2,7 @@ import throttle from 'lodash.throttle';
 
 const breakpoints = {
 	xs: 0,
+	smxs: 469,
 	sm: 576,
 	md: 769,
 	lg: 961,

package/src/components.js

@@ -20,7 +20,7 @@ import './organisms/podcast/podcast';
 import './assets/js/responsivePosition';
 import './assets/js/youtube';
 import './molecules/glider/glider';
-import './molecules/glider/glider-single';
+import './molecules/glider/glider-course';
 import './atoms/timeline/anchorScroll';
 import './molecules/timeline-navigation/timeline-navigation';
 import './molecules/context-menu/context-menu';

package/src/configurations/_wordpress.scss

@@ -334,3 +334,8 @@ div.aligncenter {
 		border-radius: $border-radius;
 	}
 }
+
+.wp-block-embed-youtube {
+	border-radius: $border-radius;
+	overflow: hidden;
+}

package/src/molecules/glider/_glider.scss

@@ -12,7 +12,7 @@
 	padding-left: rhythm(8);
 }
 
-.glider-contain-single {
+.glider-contain-course {
 	display: flex;
 	position: relative;
 	align-items: center;
@@ -250,18 +250,18 @@
 	}
 }
 
-.glider-single-prev,
-.glider-single-next {
+.glider-course-prev,
+.glider-course-next {
 	&.disabled {
 		display: none;
 
-		+ .glider-single-finish {
+		+ .glider-course-finish {
 			display: inline-flex;
 		}
 	}
 }
 
-.glider-single-finish {
+.glider-course-finish {
 	display: none;
 }
 

package/src/molecules/glider/{glider--single.hbs → glider--course.hbs}

@@ -1,7 +1,7 @@
 <div class="wrapper">
-	<div class="glider-contain-single">
-		<div class="glider{{#if single}} js-glider-single{{else}} js-glider{{/if}}">
-			<div class="glider-slide glider-slide--single">
+	<div class="glider-contain-course">
+		<div class="glider{{#if single}} js-glider-course{{else}} js-glider{{/if}}">
+			<div class="glider-slide glider-slide--course">
 				<div class="row flex-column-reverse flex-lg-row">
 					<div class="grid-18 grid-lg-8">
 						<div class="u-m-b-2">
@@ -17,7 +17,7 @@
 						<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
 						<div id="slide-1-ImageContainerMobile"></div>
 						<nav class="glider-slide__navigation">
-							{{> @button el="button" button_type="button" icon="arrow-forwards" additional_classes="a-button--jade-light glider-single-next js-glider-next" text="Starta kursen"}}
+							{{> @button el="button" button_type="button" icon="arrow-forwards" additional_classes="a-button--jade-light glider-course-next js-glider-next" text="Starta kursen"}}
 						</nav>
 					</div>
 					<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-1-ImageContainer">
@@ -29,7 +29,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="glider-slide glider-slide--single">
+			<div class="glider-slide glider-slide--course">
 				<div class="row flex-column-reverse flex-lg-row">
 					<div class="grid-18 grid-lg-8">
 						<div class="u-m-b-2">
@@ -42,8 +42,8 @@
 						<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
 						<div id="slide-2-ImageContainerMobile"></div>
 						<nav class="glider-slide__navigation">
-							{{> @button el="button" button_type="button" icon="arrow-backwards" additional_classes="a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-single-prev js-glider-prev" text="Gå bakåt"}}
-							{{> @button el="button" button_type="button" icon="arrow-forwards" additional_classes="a-button--peacock-light glider-single-next js-glider-next" text="Gå framåt" }}
+							{{> @button el="button" button_type="button" icon="arrow-backwards" additional_classes="a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-course-prev js-glider-prev" text="Gå bakåt"}}
+							{{> @button el="button" button_type="button" icon="arrow-forwards" additional_classes="a-button--peacock-light glider-course-next js-glider-next" text="Gå framåt" }}
 						</nav>
 					</div>
 					<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-2-ImageContainer">
@@ -56,7 +56,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="glider-slide glider-slide--single">
+			<div class="glider-slide glider-slide--course">
 				<div class="row flex-column-reverse flex-lg-row">
 					<div class="grid-18 grid-lg-8">
 						<div class="u-m-b-2">
@@ -68,8 +68,8 @@
 						<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
 						<div id="slide-3-ImageContainerMobile"></div>
 						<nav class="glider-slide__navigation">
-							{{> @button el="button" button_type="button" icon="arrow-backwards" additional_classes="a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-single-prev js-glider-prev" text="Gå bakåt"}}
-							{{> @button el="button" button_type="button" icon="arrow-forwards" additional_classes="a-button--peacock-light glider-single-next js-glider-next" text="Gå framåt"}}
+							{{> @button el="button" button_type="button" icon="arrow-backwards" additional_classes="a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-course-prev js-glider-prev" text="Gå bakåt"}}
+							{{> @button el="button" button_type="button" icon="arrow-forwards" additional_classes="a-button--peacock-light glider-course-next js-glider-next" text="Gå framåt"}}
 						</nav>
 					</div>
 					<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-3-ImageContainer">
@@ -89,7 +89,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="glider-slide glider-slide--single">
+			<div class="glider-slide glider-slide--course">
 				<div class="row flex-column-reverse flex-lg-row">
 					<div class="grid-18 grid-lg-8">
 						<div class="u-m-b-2">
@@ -103,7 +103,7 @@
 
 						{{> @rating additional_classes='u-m-b-2'}}
 						<nav class="glider-slide__navigation">
-							{{> @button el="button" button_type="button" icon="arrow-backwards" additional_classes="a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-single-prev js-glider-prev" text="Gå bakåt"}}
+							{{> @button el="button" button_type="button" icon="arrow-backwards" additional_classes="a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-course-prev js-glider-prev" text="Gå bakåt"}}
 							{{> @button el="a" url="#" additional_classes="a-button--jade-light" icon="check" text="Avsluta kursen"}}
 						</nav>
 					</div>

package/src/molecules/glider/{glider-single.js → glider-course.js}

@@ -1,6 +1,6 @@
 import Glider from 'glider-js';
 
-const gliderElementSingle = document.querySelector('.js-glider-single');
+const gliderElementSingle = document.querySelector('.js-glider-course');
 
 if (gliderElementSingle) {
 	const GliderSingle = new Glider(gliderElementSingle, {

package/src/molecules/glider/glider.config.js

@@ -12,7 +12,7 @@ module.exports = {
 			}
 		},
 		{
-			name: 'Single',
+			name: 'Course',
 			status: 'wip',
 			context: {
 				single: true

package/src/pages/responsive-position/responsive-position.hbs

@@ -1,6 +1,7 @@
 <form class="wrapper">
 	<div id="location1" style="background: #aae3d9; padding: 40px">
-		<div data-responsive="xs:location1,lg:location2">I am text</div>
+		<div data-responsive="xs:location1,smxs:location2,lg:location3">I am text</div>
 	</div>
 	<div id="location2" style="background: #fcccb1; padding: 40px"></div>
+	<div id="location3" style="background: #ffe696; padding: 40px"></div>
 </form>