@iris.interactive/handcook 2.10.30 → 2.10.31

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 (3) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/public/scripts/components/slider/slider.component.js +26 -11
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  # Welcome to HandCook 👨‍🍳
2
- ![Version](https://img.shields.io/badge/version-2.10.30-blue.svg?cacheSeconds=2592000)
2
+ ![Version](https://img.shields.io/badge/version-2.10.31-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.10.30",
3
+ "version": "2.10.31",
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
@@ -83,8 +83,8 @@ export class HcSlider {
83
83
  ];
84
84
 
85
85
  breakpointKeyConfig.map(config => {
86
- let defaultVal = this.slider.getAttribute(`data-hc-slider-${config.hcKey}`);
87
- if (defaultVal !== null) {
86
+ let defaultVal = this.slider.getAttribute(`data-hc-slider-${config.hcKey}`);
87
+ if (defaultVal !== null) {
88
88
  if ( config.callback === 'parseReverseBool' ) {
89
89
  defaultVal = defaultVal !== 'true';
90
90
  }
@@ -94,8 +94,8 @@ export class HcSlider {
94
94
  if ( config.callback === 'parseFloat' ) {
95
95
  defaultVal = parseFloat(defaultVal);
96
96
  }
97
- this.options[config.libKey] = defaultVal;
98
- }
97
+ this.options[config.libKey] = defaultVal;
98
+ }
99
99
  });
100
100
 
101
101
  this.breakpoints.forEach(breakpoint => {
@@ -143,11 +143,14 @@ export class HcSlider {
143
143
  }
144
144
  if (this.slider.hasAttribute('data-hc-slider-arrows')) {
145
145
  const suffix = this.slider.getAttribute('data-hc-slider-arrows');
146
+ const wrapperElement = this.slider.hasAttribute('data-hc-slider-arrows-wrapper') ? '.hc-slider-buttons' : null;
146
147
  const prevElement = this.slider.hasAttribute('data-hc-slider-arrow-prev') ? this.slider.getAttribute('data-hc-slider-arrow-prev') : `.hc-slider-button-prev${suffix}`;
147
148
  const nextElement = this.slider.hasAttribute('data-hc-slider-arrow-next') ? this.slider.getAttribute('data-hc-slider-arrow-next') : `.hc-slider-button-next${suffix}`;
149
+
148
150
  this.options['navigation'] = {
149
151
  prevEl: prevElement,
150
152
  nextEl: nextElement,
153
+ wrapperEl: wrapperElement,
151
154
  disabledClass: `hc-slider-button-disabled${suffix}`,
152
155
  hiddenClass: `hc-slider-button-hidden${suffix}`
153
156
  };
@@ -199,18 +202,30 @@ export class HcSlider {
199
202
  }
200
203
  if (this.options.navigation !== false) {
201
204
 
202
- if (!this.slider.hasAttribute('data-hc-slider-arrow-prev')) {
203
- const prevEl = this.slider.querySelectorAll(this.options.navigation.prevEl);
204
- if (prevEl.length === 0) {
205
+ const prevEl = this.slider.querySelectorAll(this.options.navigation.prevEl);
206
+ const nextEl = this.slider.querySelectorAll(this.options.navigation.nextEl);
207
+
208
+ if (this.slider.hasAttribute('data-hc-slider-arrows-wrapper') && prevEl.length === 0 && nextEl.length === 0) {
209
+ const buttonsWrapper = document.createElement("div");
210
+ const buttonPrev = document.createElement("div");
211
+ const buttonNext = document.createElement("div");
212
+
213
+ buttonPrev.classList.add(this.options.navigation.prevEl.substr(1));
214
+ buttonNext.classList.add(this.options.navigation.nextEl.substr(1));
215
+ buttonsWrapper.classList.add(this.options.navigation.wrapperEl.substr(1));
216
+
217
+ buttonsWrapper.appendChild(buttonPrev);
218
+ buttonsWrapper.appendChild(buttonNext);
219
+
220
+ this.slider.appendChild(buttonsWrapper);
221
+ } else {
222
+ if (!this.slider.hasAttribute('data-hc-slider-arrow-prev') && prevEl.length === 0) {
205
223
  const buttonPrev = document.createElement("div");
206
224
  buttonPrev.classList.add(this.options.navigation.prevEl.substr(1));
207
225
  this.slider.appendChild(buttonPrev);
208
226
  }
209
- }
210
227
 
211
- if (!this.slider.hasAttribute('data-hc-slider-arrow-next')) {
212
- const nextEl = this.slider.querySelectorAll(this.options.navigation.nextEl);
213
- if (nextEl.length === 0) {
228
+ if (!this.slider.hasAttribute('data-hc-slider-arrow-next') && nextEl.length === 0) {
214
229
  const buttonNext = document.createElement("div");
215
230
  buttonNext.classList.add(this.options.navigation.nextEl.substr(1));
216
231
  this.slider.appendChild(buttonNext);