@iris.interactive/handcook 2.10.31 → 2.10.32

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 (5) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/public/scripts/components/slider/slider.component.js +18 -28
  4. package/public/styles/scss/_variables.scss +1 -3
  5. package/public/styles/scss/mixins/_mixin-style.scss +1 -3
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  # Welcome to HandCook 👨‍🍳
2
- ![Version](https://img.shields.io/badge/version-2.10.31-blue.svg?cacheSeconds=2592000)
2
+ ![Version](https://img.shields.io/badge/version-2.10.32-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.31",
3
+ "version": "2.10.32",
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
@@ -39,18 +39,21 @@ export class HcSlider {
39
39
  // Options
40
40
  options = {};
41
41
 
42
+ // Events
43
+ initEvent;
44
+
42
45
  /**
43
46
  * @param elements
44
47
  */
45
48
  constructor(elements = ElementEnum.slider) {
46
- this.initOptions();
47
49
  document.querySelectorAll(elements).forEach(element => {
50
+ this.initEvent = new Event("init.hc.slider");
51
+ this.initOptions();
48
52
  this.slider = element;
49
53
  this.setOptions();
50
54
  this.buildDom();
51
55
  const instance = new Swiper(element, this.options);
52
56
  this.instances.push(instance);
53
- this.initOptions();
54
57
  });
55
58
  }
56
59
 
@@ -83,8 +86,8 @@ export class HcSlider {
83
86
  ];
84
87
 
85
88
  breakpointKeyConfig.map(config => {
86
- let defaultVal = this.slider.getAttribute(`data-hc-slider-${config.hcKey}`);
87
- if (defaultVal !== null) {
89
+ let defaultVal = this.slider.getAttribute(`data-hc-slider-${config.hcKey}`);
90
+ if (defaultVal !== null) {
88
91
  if ( config.callback === 'parseReverseBool' ) {
89
92
  defaultVal = defaultVal !== 'true';
90
93
  }
@@ -94,8 +97,8 @@ export class HcSlider {
94
97
  if ( config.callback === 'parseFloat' ) {
95
98
  defaultVal = parseFloat(defaultVal);
96
99
  }
97
- this.options[config.libKey] = defaultVal;
98
- }
100
+ this.options[config.libKey] = defaultVal;
101
+ }
99
102
  });
100
103
 
101
104
  this.breakpoints.forEach(breakpoint => {
@@ -143,14 +146,11 @@ export class HcSlider {
143
146
  }
144
147
  if (this.slider.hasAttribute('data-hc-slider-arrows')) {
145
148
  const suffix = this.slider.getAttribute('data-hc-slider-arrows');
146
- const wrapperElement = this.slider.hasAttribute('data-hc-slider-arrows-wrapper') ? '.hc-slider-buttons' : null;
147
149
  const prevElement = this.slider.hasAttribute('data-hc-slider-arrow-prev') ? this.slider.getAttribute('data-hc-slider-arrow-prev') : `.hc-slider-button-prev${suffix}`;
148
150
  const nextElement = this.slider.hasAttribute('data-hc-slider-arrow-next') ? this.slider.getAttribute('data-hc-slider-arrow-next') : `.hc-slider-button-next${suffix}`;
149
-
150
151
  this.options['navigation'] = {
151
152
  prevEl: prevElement,
152
153
  nextEl: nextElement,
153
- wrapperEl: wrapperElement,
154
154
  disabledClass: `hc-slider-button-disabled${suffix}`,
155
155
  hiddenClass: `hc-slider-button-hidden${suffix}`
156
156
  };
@@ -202,30 +202,18 @@ export class HcSlider {
202
202
  }
203
203
  if (this.options.navigation !== false) {
204
204
 
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
+ if (!this.slider.hasAttribute('data-hc-slider-arrow-prev')) {
206
+ const prevEl = this.slider.querySelectorAll(this.options.navigation.prevEl);
207
+ if (prevEl.length === 0) {
223
208
  const buttonPrev = document.createElement("div");
224
209
  buttonPrev.classList.add(this.options.navigation.prevEl.substr(1));
225
210
  this.slider.appendChild(buttonPrev);
226
211
  }
212
+ }
227
213
 
228
- if (!this.slider.hasAttribute('data-hc-slider-arrow-next') && nextEl.length === 0) {
214
+ if (!this.slider.hasAttribute('data-hc-slider-arrow-next')) {
215
+ const nextEl = this.slider.querySelectorAll(this.options.navigation.nextEl);
216
+ if (nextEl.length === 0) {
229
217
  const buttonNext = document.createElement("div");
230
218
  buttonNext.classList.add(this.options.navigation.nextEl.substr(1));
231
219
  this.slider.appendChild(buttonNext);
@@ -261,6 +249,8 @@ export class HcSlider {
261
249
  if (swiper.isLocked) {
262
250
  swiper.$el.addClass('hc-slider-lock');
263
251
  }
252
+
253
+ this.slider.dispatchEvent(this.initEvent);
264
254
  },
265
255
  slideChangeTransitionEnd: (swiper) => {
266
256
 
package/public/styles/scss/_variables.scss CHANGED
@@ -327,9 +327,7 @@ $button-background-color: var(--iris--button--background-color);
327
327
  $button-color-hover: var(--iris--button--color-hover);
328
328
  $button-background-color-hover: var(--iris--button--background-color-hover, none);
329
329
  $button-background-image: var(--iris--button--background-image, none);
330
- $button-gradient-background-image-size: var(--iris--button--background-size, var(--iris--global--gradient-background-size, (200% 100%)));
331
- $button-gradient-background-image-position: var(--iris--button--background-position, initial);
332
- $button-gradient-background-image-position-hover: var(--iris--button--background-position-hover, (bottom right, top right));
330
+ $button-gradient-background-image-size: var(--iris--global--gradient-background-size, (200% 100%));
333
331
  $button-border: var(--iris--button--border, none);
334
332
  $button-border-hover: var(--iris--button--border-hover, none);
335
333
  $button-background-color--force: var(--iris--button--border-color, $button-background-color);
package/public/styles/scss/mixins/_mixin-style.scss CHANGED
@@ -153,7 +153,6 @@
153
153
  background-color: $button-background-color;
154
154
  background-image: $button-background-image;
155
155
  background-size: $button-gradient-background-image-size;
156
- background-position: $button-gradient-background-image-position;
157
156
  border: $button-border;
158
157
  word-break: normal;
159
158
  @include transition;
@@ -177,7 +176,6 @@
177
176
  background-color: $button-background-color;
178
177
  background-image: $button-background-image;
179
178
  background-size: $button-gradient-background-image-size;
180
- background-position: $button-gradient-background-image-position;
181
179
  border: $button-border;
182
180
  }
183
181
 
@@ -185,7 +183,7 @@
185
183
  color: $button-color-hover;
186
184
  background-color: $button-background-color-hover;
187
185
  border: $button-border-hover;
188
- background-position: $button-gradient-background-image-position-hover;
186
+ background-position: bottom right, top right;
189
187
 
190
188
  &:before {
191
189
  color: $button-color-hover;