@iris.interactive/handcook 2.6.22 → 2.6.25

package/README.md

@@ -1,5 +1,5 @@
 # Welcome to HandCook 👨‍🍳
-![Version](https://img.shields.io/badge/version-2.6.22-blue.svg?cacheSeconds=2592000)
+![Version](https://img.shields.io/badge/version-2.6.24-blue.svg?cacheSeconds=2592000)
 ![Prerequisite](https://img.shields.io/badge/node-%3E%3D%2012.14.0-blue.svg)
 [![License: UNLICENSED](https://img.shields.io/badge/License-UNLICENSED-yellow.svg)](#)
 [![Twitter: captain\_iris](https://img.shields.io/twitter/follow/captain\_iris.svg?style=social)](https://twitter.com/captain\_iris)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iris.interactive/handcook",
-  "version": "2.6.22",
+  "version": "2.6.25",
   "description": "The web cooking by IRIS Interactive",
   "main": "./public/scripts/index.js",
   "scripts": {

package/public/scripts/components/lightbox/lightbox.component.js

@@ -21,16 +21,19 @@ export class HcLightbox {
 
 	instance;
 
-	constructor(elements = ElementEnum.lightbox) {
-		Fancybox.bind(elements,{
-			groupAll: true
-		});
+	constructor(elements = ElementEnum.lightbox, options = {}) {
+		if ( elements === ElementEnum.lightbox ) {
+			Object.assign(options, {
+				groupAttr: ElementEnum.lightboxAttr
+			});
+		}
+		Fancybox.bind(elements,options);
 		this.instance = Fancybox.getInstance();
 	}
 }
 
-const hc_lightbox = function (trigger) {
-	return new HcLightbox(trigger);
+const hc_lightbox = function (trigger = ElementEnum.lightbox, options = {}) {
+	return new HcLightbox(trigger, options);
 }
 
 export default hc_lightbox;

package/public/scripts/components/slider/slider.component.js

@@ -25,15 +25,15 @@ export class HcSlider {
 
 	breakpoints = [{
 		name: "medium",
-		value: 650
+		value: 651
 	},
 		{
 			name: "large",
-			value: 1000
+			value: 1001
 		},
 		{
 			name: "xlarge",
-			value: 1453
+			value: 1454
 		}];
 
 	// Options

package/public/scripts/enumerators/element.enum.js

@@ -18,7 +18,8 @@ export default class ElementEnum {
 	static popover = '[data-hc-popover]';
 	static scrollSmooth = '[data-hc-smooth-scroll]';
 	static modal = '[data-hc-modal]';
-	static lightbox = '[data-hc-lightbox]';
+	static lightboxAttr = 'data-hc-lightbox';
+	static lightbox = `[${ElementEnum.lightboxAttr}]`;
 	static dropdown = '[data-hc-dropdown]';
 	static collapse = '[data-hc-collapse]';
 	static collapseItem = '[data-hc-collapse-item]';

package/public/styles/scss/_variables.scss

@@ -317,6 +317,7 @@ $highlight-link-color-hover: var(--iris--highlight--color-link-hover);
 
 // Single SIT highlight
 $detail-sit-highlight-color: var(--iris--detail-sit-highlight--color);
+$detail-sit-highlight-color-title: var(--iris--detail-sit-highlight--color-title, var(--iris--detail-sit-highlight--color));
 $detail-sit-highlight-background-color: var(--iris--detail-sit-highlight--background-color);
 $detail-sit-highlight-link-color: var(--iris--detail-sit-highlight--color-link);
 $detail-sit-highlight-link-color-hover: var(--iris--detail-sit-highlight--color-link-hover);
@@ -334,6 +335,7 @@ $stratefull-content-width: var(--iris--stratefull--content-width);
 
 // Brochures form
 $brochure-form-color: var(--iris--brochure-form--color);
+$brochure-form-color-title: var(--iris--brochure-form--color-title, var(--iris--brochure-form--color));
 $brochure-form-background-color: var(--iris--brochure-form--background-color);
 $brochure-form-link-color: var(--iris--brochure-form--color-link);
 $brochure-form-link-color-hover: var(--iris--brochure-form--color-link-hover);
@@ -345,6 +347,7 @@ $brochure-form-field-color: var(--iris--brochure-form-field--color);
 
 // Alternative content
 $alternative-content-color: var(--iris--alternative-content--color);
+$alternative-content-color-title: var(--iris--alternative-content--color-title, var(--iris--alternative-content--color));
 $alternative-content-background-color: var(--iris--alternative-content--background-color);
 $alternative-content-link-color: var(--iris--alternative-content--color-link);
 $alternative-content-link-color-hover: var(--iris--alternative-content--color-link-hover);
@@ -352,6 +355,7 @@ $alternative-content-link-color-hover: var(--iris--alternative-content--color-li
 
 // Relative content
 $relative-content-color: var(--iris--relative-content--color);
+$relative-content-color-title: var(--iris--relative-content--color-title, var(--iris--relative-content--color));
 $relative-content-background-color: var(--iris--relative-content--background-color);
 $relative-content-link-color: var(--iris--relative-content--color-link);
 $relative-content-link-color-hover: var(--iris--relative-content--color-link-hover);
@@ -359,13 +363,23 @@ $relative-content-link-color-hover: var(--iris--relative-content--color-link-hov
 
 // Video highlight
 $video-highlight-color: var(--iris--video-highlight--color);
+$video-highlight-color-title: var(--iris--video-highlight--color-title, var(--iris--video-highlight--color));
 $video-highlight-background-color: var(--iris--video-highlight--background-color);
 $video-highlight-link-color: var(--iris--video-highlight--color-link);
 $video-highlight-link-color-hover: var(--iris--video-highlight--color-link-hover);
 
 
+// Webcam
+$webcam-highlight-color: var(--iris--webcam-highlight--color);
+$webcam-highlight-color-title: var(--iris--webcam-highlight--color-title, var(--iris--webcam-highlight--color));
+$webcam-highlight-background-color: var(--iris--webcam-highlight--background-color);
+$webcam-highlight-link-color: var(--iris--webcam-highlight--color-link);
+$webcam-highlight-link-color-hover: var(--iris--webcam-highlight--color-link-hover);
+
+
 // Authors
 $authors-color: var(--iris--authors--color);
+$authors-color-title: var(--iris--authors--color-title, var(--iris--authors--color));
 $authors-background-color: var(--iris--authors--background-color);
 $authors-link-color: var(--iris--authors--color-link);
 $authors-link-color-hover: var(--iris--authors--color-link-hover);
@@ -373,20 +387,23 @@ $authors-link-color-hover: var(--iris--authors--color-link-hover);
 
 // Ma Plage
 $ma-plage-color: var(--iris--ma-plage--color);
+$ma-plage-color-title: var(--iris--ma-plage--color-title, var(--iris--ma-plage--color));
 $ma-plage-background-color: var(--iris--ma-plage--background-color);
 $ma-plage-link-color: var(--iris--ma-plage--color-link);
 $ma-plage-link-color-hover: var(--iris--ma-plage--color-link-hover);
 
 
 // Tides
-$tides-background-color: var(--iris--tides--background-color);
 $tides-color: var(--iris--tides--color);
+$tides-color-title: var(--iris--tides--color-title, var(--iris--tides--color));
+$tides-background-color: var(--iris--tides--background-color);
 $tides-link-color: var(--iris--tides--color-link);
 $tides-link-color-hover: var(--iris--tides--color-link-hover);
 
 
 // Snow
 $snow-color: var(--iris--snow--color);
+$snow-color-title: var(--iris--snow--color-title, var(--iris--snow--color));
 $snow-background-color: var(--iris--snow--background-color);
 $snow-link-color: var(--iris--snow--color-link);
 $snow-link-color-hover: var(--iris--snow--color-link-hover);
@@ -394,12 +411,14 @@ $snow-link-color-hover: var(--iris--snow--color-link-hover);
 
 // How to come
 $how-to-come-color: var(--iris--how-to-come--color);
+$how-to-come-color-title: var(--iris--how-to-come--color-title, var(--iris--how-to-come--color));
 $how-to-come-background-color: var(--iris--how-to-come--background-color);
 $how-to-come-link-color: var(--iris--how-to-come--color-link);
 $how-to-come-link-color-hover: var(--iris--how-to-come--color-link-hover);
 
 // Trip
 $trip-color: var(--iris--trip--color);
+$trip-color-title: var(--iris--trip--color-title, var(--iris--trip--color));
 $trip-background-color: var(--iris--trip--background-color);
 $trip-link-color: var(--iris--trip--color-link);
 $trip-link-color-hover: var(--iris--trip--color-link-hover);
@@ -414,4 +433,4 @@ $c-warning: #ff890e;
 / ================================================== */
 $c-easy: #9ccc65;
 $c-medium: #ff890e;
-$c-hard: #ef5350;
+$c-hard: #ef5350;