@iris.interactive/handcook 2.6.18 → 2.6.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/public/scripts/components/slider/slider.component.js +18 -12
  4. package/public/styles/scss/_variables.scss +2 -2
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  # Welcome to HandCook 👨‍🍳
2
- ![Version](https://img.shields.io/badge/version-2.6.18-blue.svg?cacheSeconds=2592000)
2
+ ![Version](https://img.shields.io/badge/version-2.6.21-blue.svg?cacheSeconds=2592000)
3
3
  ![Prerequisite](https://img.shields.io/badge/node-%3E%3D%2012.14.0-blue.svg)
4
4
  [![License: UNLICENSED](https://img.shields.io/badge/License-UNLICENSED-yellow.svg)](#)
5
5
  [![Twitter: captain\_iris](https://img.shields.io/twitter/follow/captain\_iris.svg?style=social)](https://twitter.com/captain\_iris)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iris.interactive/handcook",
3
- "version": "2.6.18",
3
+ "version": "2.6.21",
4
4
  "description": "The web cooking by IRIS Interactive",
5
5
  "main": "./public/scripts/index.js",
6
6
  "scripts": {
package/public/scripts/components/slider/slider.component.js CHANGED
@@ -104,9 +104,11 @@ export class HcSlider {
104
104
  }
105
105
  if (this.slider.hasAttribute('data-hc-slider-arrows')) {
106
106
  const suffix = this.slider.getAttribute('data-hc-slider-arrows');
107
+ const prevElement = this.slider.hasAttribute('data-hc-slider-arrow-prev') ? this.slider.getAttribute('data-hc-slider-arrow-prev') : `.hc-slider-button-prev${suffix}`;
108
+ const nextElement = this.slider.hasAttribute('data-hc-slider-arrow-next') ? this.slider.getAttribute('data-hc-slider-arrow-next') : `.hc-slider-button-next${suffix}`;
107
109
  this.options['navigation'] = {
108
- nextEl: `.hc-slider-button-next${suffix}`,
109
- prevEl: `.hc-slider-button-prev${suffix}`,
110
+ prevEl: prevElement,
111
+ nextEl: nextElement,
110
112
  disabledClass: `hc-slider-button-disabled${suffix}`,
111
113
  hiddenClass: `hc-slider-button-hidden${suffix}`
112
114
  };
@@ -150,18 +152,22 @@ export class HcSlider {
150
152
  }
151
153
  if (this.options.navigation !== false) {
152
154
 
153
- const prevEl = this.slider.querySelectorAll(this.options.navigation.prevEl);
154
- if (prevEl.length === 0) {
155
- const buttonPrev = document.createElement("div");
156
- buttonPrev.classList.add(this.options.navigation.prevEl.substr(1));
157
- this.slider.appendChild(buttonPrev);
155
+ if (!this.slider.hasAttribute('data-hc-slider-arrow-prev')) {
156
+ const prevEl = this.slider.querySelectorAll(this.options.navigation.prevEl);
157
+ if (prevEl.length === 0) {
158
+ const buttonPrev = document.createElement("div");
159
+ buttonPrev.classList.add(this.options.navigation.prevEl.substr(1));
160
+ this.slider.appendChild(buttonPrev);
161
+ }
158
162
  }
159
163
 
160
- const nextEl = this.slider.querySelectorAll(this.options.navigation.nextEl);
161
- if (nextEl.length === 0) {
162
- const buttonNext = document.createElement("div");
163
- buttonNext.classList.add(this.options.navigation.nextEl.substr(1));
164
- this.slider.appendChild(buttonNext);
164
+ if (!this.slider.hasAttribute('data-hc-slider-arrow-next')) {
165
+ const nextEl = this.slider.querySelectorAll(this.options.navigation.nextEl);
166
+ if (nextEl.length === 0) {
167
+ const buttonNext = document.createElement("div");
168
+ buttonNext.classList.add(this.options.navigation.nextEl.substr(1));
169
+ this.slider.appendChild(buttonNext);
170
+ }
165
171
  }
166
172
  }
167
173
  }
package/public/styles/scss/_variables.scss CHANGED
@@ -312,7 +312,7 @@ $switch-off: var(--iris--switch--color-off);
312
312
  $highlight-color: var(--iris--highlight--color);
313
313
  $highlight-background-color: var(--iris--highlight--background-color);
314
314
  $highlight-link-color: var(--iris--highlight--color-link);
315
- $highlight-title-color: var(--iris--highlight--color-title);
315
+ $highlight-title-color: var(--iris--highlight--color-title, var(--iris--highlight--color));
316
316
  $highlight-link-color-hover: var(--iris--highlight--color-link-hover);
317
317
 
318
318
  // Single SIT highlight
@@ -413,4 +413,4 @@ $c-warning: #ff890e;
413
413
  / ================================================== */
414
414
  $c-easy: #9ccc65;
415
415
  $c-medium: #ff890e;
416
- $c-hard: #ef5350;
416
+ $c-hard: #ef5350;