@iris.interactive/handcook 2.10.29 → 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 (5) 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
  4. package/public/styles/scss/_variables.scss +3 -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.29-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.29",
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);
package/public/styles/scss/_variables.scss CHANGED
@@ -327,7 +327,9 @@ $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--global--gradient-background-size, (200% 100%));
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));
331
333
  $button-border: var(--iris--button--border, none);
332
334
  $button-border-hover: var(--iris--button--border-hover, none);
333
335
  $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;