@iris.interactive/handcook 2.10.32 → 2.10.33

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