@iris.interactive/handcook 2.6.15 → 2.6.16

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 (7) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/public/index.html +20 -0
  4. package/public/scripts/components/slider/slider.component.js +18 -12
  5. package/public/scripts/handcook.js +1 -39
  6. package/public/styles/scss/style.css +2 -161
  7. package/public/styles/style.css +1 -166
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  # Welcome to HandCook 👨‍🍳
2
- ![Version](https://img.shields.io/badge/version-2.6.15-blue.svg?cacheSeconds=2592000)
2
+ ![Version](https://img.shields.io/badge/version-2.6.16-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.15",
3
+ "version": "2.6.16",
4
4
  "description": "The web cooking by IRIS Interactive",
5
5
  "main": "./public/scripts/index.js",
6
6
  "scripts": {
package/public/index.html CHANGED
@@ -375,6 +375,26 @@
375
375
  <img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
376
376
  </div>
377
377
  </div>
378
+ <div style="position: relative">
379
+ <div data-hc-slider data-hc-slider-arrows data-hc-slider-arrow-prev=".button-prev-test">
380
+ <div>
381
+ <img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
382
+ </div>
383
+ <div>
384
+ <img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
385
+ </div>
386
+ <div>
387
+ <img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
388
+ </div>
389
+ <div>
390
+ <img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
391
+ </div>
392
+ <div>
393
+ <img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
394
+ </div>
395
+ </div>
396
+ <a href="#" class="button-prev-test">Bouton precedent de test</a>
397
+ </div>
378
398
  </div>
379
399
  </div>
380
400
  </article>
package/public/scripts/components/slider/slider.component.js CHANGED
@@ -103,9 +103,11 @@ export class HcSlider {
103
103
  }
104
104
  if (this.slider.hasAttribute('data-hc-slider-arrows')) {
105
105
  const suffix = this.slider.getAttribute('data-hc-slider-arrows');
106
+ const prevElement = this.slider.hasAttribute('data-hc-slider-arrow-prev') ? this.slider.getAttribute('data-hc-slider-arrow-prev') : `.hc-slider-button-prev${suffix}`;
107
+ const nextElement = this.slider.hasAttribute('data-hc-slider-arrow-next') ? this.slider.getAttribute('data-hc-slider-arrow-next') : `.hc-slider-button-next${suffix}`;
106
108
  this.options['navigation'] = {
107
- nextEl: `.hc-slider-button-next${suffix}`,
108
- prevEl: `.hc-slider-button-prev${suffix}`,
109
+ prevEl: prevElement,
110
+ nextEl: nextElement,
109
111
  disabledClass: `hc-slider-button-disabled${suffix}`,
110
112
  hiddenClass: `hc-slider-button-hidden${suffix}`
111
113
  };
@@ -142,18 +144,22 @@ export class HcSlider {
142
144
  }
143
145
  if (this.options.navigation !== false) {
144
146
 
145
- const prevEl = this.slider.querySelectorAll(this.options.navigation.prevEl);
146
- if (prevEl.length === 0) {
147
- const buttonPrev = document.createElement("div");
148
- buttonPrev.classList.add(this.options.navigation.prevEl.substr(1));
149
- this.slider.appendChild(buttonPrev);
147
+ if (!this.slider.hasAttribute('data-hc-slider-arrow-prev')) {
148
+ const prevEl = this.slider.querySelectorAll(this.options.navigation.prevEl);
149
+ if (prevEl.length === 0) {
150
+ const buttonPrev = document.createElement("div");
151
+ buttonPrev.classList.add(this.options.navigation.prevEl.substr(1));
152
+ this.slider.appendChild(buttonPrev);
153
+ }
150
154
  }
151
155
 
152
- const nextEl = this.slider.querySelectorAll(this.options.navigation.nextEl);
153
- if (nextEl.length === 0) {
154
- const buttonNext = document.createElement("div");
155
- buttonNext.classList.add(this.options.navigation.nextEl.substr(1));
156
- this.slider.appendChild(buttonNext);
156
+ if (!this.slider.hasAttribute('data-hc-slider-arrow-next')) {
157
+ const nextEl = this.slider.querySelectorAll(this.options.navigation.nextEl);
158
+ if (nextEl.length === 0) {
159
+ const buttonNext = document.createElement("div");
160
+ buttonNext.classList.add(this.options.navigation.nextEl.substr(1));
161
+ this.slider.appendChild(buttonNext);
162
+ }
157
163
  }
158
164
  }
159
165
  }
package/public/scripts/handcook.js CHANGED
@@ -1,39 +1 @@
1
- /*
2
- * IRIS Interactive
3
- *
4
- * NOTICE OF LICENSE
5
- *
6
- * This source file is no subject to a specific license
7
- * but it belongs to the company IRIS Interactive.
8
- * You can contact IRIS Interactive at the following
9
- * address: contact@iris-interactive.fr
10
- *
11
- * @author Fabien SERRA
12
- * @date 25/02/2022 12:04
13
- * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
- */
15
-
16
- import hc_tooltip from '@package_script/components/tooltip/tooltip.component';
17
- import hc_smooth_scroll from "@package_script/components/smooth-scroll/smooth-scroll.component";
18
- import hc_modal from "@package_script/components/modal/modal.component";
19
- import hc_lightbox from "@package_script/components/lightbox/lightbox.component";
20
- import hc_dropdown from "@package_script/components/dropdown/dropdown.component";
21
- import hc_collapse from "@package_script/components/collapse/collapse.component";
22
- import hc_lazyload from "@package_script/components/lazyload/lazyload.component";
23
- import hc_tab from "@package_script/components/tab/tab.component";
24
- import hc_toggle from "@package_script/components/toggle/toggle.component";
25
- import hc_slider from "@package_script/components/slider/slider.component";
26
-
27
- const Handcook = {
28
- hc_tooltip,
29
- hc_smooth_scroll,
30
- hc_modal,
31
- hc_lightbox,
32
- hc_dropdown,
33
- hc_collapse,
34
- hc_lazyload,
35
- hc_tab,
36
- hc_toggle,
37
- hc_slider,
38
- }
39
- export default Handcook;
1
+ import hc_tooltip from"@package_script/components/tooltip/tooltip.component";import hc_smooth_scroll from"@package_script/components/smooth-scroll/smooth-scroll.component";import hc_modal from"@package_script/components/modal/modal.component";import hc_lightbox from"@package_script/components/lightbox/lightbox.component";import hc_dropdown from"@package_script/components/dropdown/dropdown.component";import hc_collapse from"@package_script/components/collapse/collapse.component";import hc_lazyload from"@package_script/components/lazyload/lazyload.component";import hc_tab from"@package_script/components/tab/tab.component";import hc_toggle from"@package_script/components/toggle/toggle.component";import hc_slider from"@package_script/components/slider/slider.component";const Handcook={hc_tooltip:hc_tooltip,hc_smooth_scroll:hc_smooth_scroll,hc_modal:hc_modal,hc_lightbox:hc_lightbox,hc_dropdown:hc_dropdown,hc_collapse:hc_collapse,hc_lazyload:hc_lazyload,hc_tab:hc_tab,hc_toggle:hc_toggle,hc_slider:hc_slider};export default Handcook;
package/public/styles/scss/style.css CHANGED
@@ -11,68 +11,7 @@
11
11
  * @author Lucas ROCHE
12
12
  * @date 27/01/2022 14:32
13
13
  * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
- */
15
- /*
16
- * Created by IRIS Interactive
17
- * User : IRIS Interactive
18
- */
19
- /* Layout
20
- / ================================================== */
21
- /* Gutter
22
- / ================================================== */
23
- /* Margin
24
- / ================================================== */
25
- /* Margin
26
- / ================================================== */
27
- /* Breakpoint
28
- / ================================================== */
29
- /* Global
30
- / ================================================== */
31
- /* Notifications
32
- / ================================================== */
33
- /* Difficulty
34
- / ================================================== */
35
- /*
36
- * Created by IRIS Interactive
37
- * User : IRIS Interactive
38
- */
39
- /* Main gutter
40
- / ================================================== */
41
- /* Breakpoints
42
- /* ============================================= */
43
- /* display flex
44
- /* ============================================= */
45
- /* Hover - TODO
46
- /* ============================================= */
47
- /* Touch
48
- /* ============================================= */
49
- /* Clear
50
- /* ============================================= */
51
- /*
52
- * Created by IRIS Interactive
53
- * User : IRIS Interactive
54
- */
55
- /* Transition
56
- /* ============================================= */
57
- /* Hover
58
- /* ============================================= */
59
- /* Ellipsis
60
- /* ============================================= */
61
- /* Adaptive height block
62
- /* ============================================= */
63
- /* Line clamp
64
- /* ============================================= */
65
- /* Object fit
66
- /* ============================================= */
67
- /* Linear Gradient
68
- /* ============================================= */
69
- /* fit-content
70
- /* ============================================= */
71
- /* stretched-link
72
- /* ============================================= */
73
- /* sr-only
74
- /* ============================================= */
75
- /*!
14
+ *//*!
76
15
  * IRIS Interactive
77
16
  *
78
17
  * NOTICE OF LICENSE
@@ -85,102 +24,4 @@
85
24
  * @author Lucas ROCHE
86
25
  * @date 28/01/2022 07:41
87
26
  * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
88
- */
89
- /* Font icon
90
- /* ============================================= */
91
- /* Font size
92
- /* ============================================= */
93
- /*
94
- * Created by IRIS Interactive
95
- * User : IRIS Interactive
96
- */
97
- /* Utils classes
98
- /* ============================================= */
99
- .stretched-link:before {
100
- position: absolute;
101
- top: 0;
102
- right: 0;
103
- bottom: 0;
104
- left: 0;
105
- z-index: 1;
106
- pointer-events: auto;
107
- content: "";
108
- background-color: transparent;
109
- }
110
-
111
- /* ============================================= */
112
- .list-flex {
113
- display: flex;
114
- flex-wrap: wrap;
115
- margin-bottom: 0;
116
- }
117
- .list-flex > * {
118
- list-style-type: none;
119
- margin: 0 10px 10px 0;
120
- }
121
- .list-flex > *:last-child {
122
- margin-right: 0;
123
- }
124
-
125
- /* Animations
126
- /* ============================================= */
127
- @-webkit-keyframes loader {
128
- 100% {
129
- transform: rotate(360deg);
130
- }
131
- }
132
- @keyframes loader {
133
- 100% {
134
- transform: rotate(360deg);
135
- }
136
- }
137
- /* Sr-only
138
- /* ============================================= */
139
- .sr-only {
140
- clip: rect(0, 0, 0, 0);
141
- border-width: 0;
142
- height: 1px;
143
- margin: -1px;
144
- overflow: hidden;
145
- padding: 0;
146
- position: absolute;
147
- white-space: nowrap;
148
- width: 1px;
149
- }
150
-
151
- /* Text with icon before
152
- /* ============================================= */
153
- .text-icon {
154
- display: inline-flex;
155
- align-items: center;
156
- }
157
- .text-icon:before {
158
- margin-right: 5px;
159
- }
160
- .text-icon:after {
161
- margin-left: 5px;
162
- }
163
-
164
- /* Block with img animated on hover
165
- /* ============================================= */
166
- .hover-item img {
167
- transition: 0.2s ease;
168
- will-change: transform;
169
- }
170
- .hover-item:hover img {
171
- transform: scale(1.02);
172
- }
173
-
174
- /* Opening
175
- /* ============================================= */
176
- .is-opened {
177
- color: #009e55;
178
- }
179
-
180
- .soon-closed {
181
- color: #ff890e;
182
- }
183
-
184
- .is-closed {
185
- color: #f33;
186
- }
27
+ */.stretched-link:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:auto;content:"";background-color:transparent}.list-flex{display:flex;flex-wrap:wrap;margin-bottom:0}.list-flex>*{list-style-type:none;margin:0 10px 10px 0}.list-flex>:last-child{margin-right:0}@-webkit-keyframes loader{100%{transform:rotate(360deg)}}@keyframes loader{100%{transform:rotate(360deg)}}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.text-icon{display:inline-flex;align-items:center}.text-icon:before{margin-right:5px}.text-icon:after{margin-left:5px}.hover-item img{transition:.2s ease;will-change:transform}.hover-item:hover img{transform:scale(1.02)}.is-opened{color:#009e55}.soon-closed{color:#ff890e}.is-closed{color:#f33}
package/public/styles/style.css CHANGED
@@ -12,66 +12,6 @@
12
12
  * @date 27/01/2022 14:32
13
13
  * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
14
  */
15
- /*
16
- * Created by IRIS Interactive
17
- * User : IRIS Interactive
18
- */
19
- /* Layout
20
- / ================================================== */
21
- /* Gutter
22
- / ================================================== */
23
- /* Margin
24
- / ================================================== */
25
- /* Margin
26
- / ================================================== */
27
- /* Breakpoint
28
- / ================================================== */
29
- /* Global
30
- / ================================================== */
31
- /* Notifications
32
- / ================================================== */
33
- /* Difficulty
34
- / ================================================== */
35
- /*
36
- * Created by IRIS Interactive
37
- * User : IRIS Interactive
38
- */
39
- /* Main gutter
40
- / ================================================== */
41
- /* Breakpoints
42
- /* ============================================= */
43
- /* display flex
44
- /* ============================================= */
45
- /* Hover
46
- /* ============================================= */
47
- /* Touch
48
- /* ============================================= */
49
- /* Clear
50
- /* ============================================= */
51
- /*
52
- * Created by IRIS Interactive
53
- * User : IRIS Interactive
54
- */
55
- /* Transition
56
- /* ============================================= */
57
- /* Animate
58
- /* ============================================= */
59
- /* Ellipsis
60
- /* ============================================= */
61
- /* Adaptive height block
62
- /* ============================================= */
63
- /* Line clamp
64
- /* ============================================= */
65
- /* Object fit
66
- /* ============================================= */
67
- /* Linear Gradient
68
- /* ============================================= */
69
- /* fit-content
70
- /* ============================================= */
71
- /* stretched-link
72
- /* ============================================= */
73
- /* sr-only
74
- /* ============================================= */
75
15
  /*!
76
16
  * IRIS Interactive
77
17
  *
@@ -85,109 +25,4 @@
85
25
  * @author Lucas ROCHE
86
26
  * @date 28/01/2022 07:41
87
27
  * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
88
- */
89
- /* Font icon
90
- /* ============================================= */
91
- /* Font size
92
- /* ============================================= */
93
- /*
94
- * Created by IRIS Interactive
95
- * User : IRIS Interactive
96
- */
97
- /* Utils classes
98
- /* ============================================= */
99
- .stretched-link:before {
100
- position: absolute;
101
- top: 0;
102
- right: 0;
103
- bottom: 0;
104
- left: 0;
105
- z-index: 1;
106
- pointer-events: auto;
107
- content: "";
108
- background-color: transparent;
109
- }
110
-
111
- /* ============================================= */
112
- .list-flex {
113
- display: flex;
114
- flex-wrap: wrap;
115
- margin-bottom: 0;
116
- }
117
- .list-flex > * {
118
- list-style-type: none;
119
- margin: 0 10px 10px 0;
120
- }
121
- .list-flex > *:last-child {
122
- margin-right: 0;
123
- }
124
-
125
- /* Animations
126
- /* ============================================= */
127
- @-webkit-keyframes loader {
128
- 100% {
129
- transform: rotate(360deg);
130
- }
131
- }
132
- @keyframes loader {
133
- 100% {
134
- transform: rotate(360deg);
135
- }
136
- }
137
- /* Sr-only
138
- /* ============================================= */
139
- .sr-only {
140
- clip: rect(0, 0, 0, 0);
141
- border-width: 0;
142
- height: 1px;
143
- margin: -1px;
144
- overflow: hidden;
145
- padding: 0;
146
- position: absolute;
147
- white-space: nowrap;
148
- width: 1px;
149
- }
150
-
151
- /* Text with icon before
152
- /* ============================================= */
153
- .text-icon {
154
- display: inline-flex;
155
- align-items: center;
156
- }
157
- .text-icon:before {
158
- margin-right: 5px;
159
- }
160
- .text-icon:after {
161
- margin-left: 5px;
162
- }
163
-
164
- /* Block with img animated on hover
165
- /* ============================================= */
166
- .hover-item img {
167
- transition: 0.2s ease;
168
- will-change: transform;
169
- }
170
- .hover-item:hover img {
171
- transform: scale(1.02);
172
- }
173
-
174
- /* Opening
175
- /* ============================================= */
176
- .is-opened {
177
- color: #009e55;
178
- }
179
-
180
- .soon-closed {
181
- color: #ff890e;
182
- }
183
-
184
- .is-closed {
185
- color: #f33;
186
- }
187
-
188
- /* Font
189
- /* ============================================= */
190
- .fi--color:before,
191
- .fi-color:after {
192
- color: var(--iris--icon--color);
193
- }
28
+ */.stretched-link:before{background-color:transparent;bottom:0;content:"";left:0;pointer-events:auto;position:absolute;right:0;top:0;z-index:1}.list-flex{display:flex;flex-wrap:wrap;margin-bottom:0}.list-flex>*{list-style-type:none;margin:0 10px 10px 0}.list-flex>:last-child{margin-right:0}@-webkit-keyframes loader{to{transform:rotate(1turn)}}@keyframes loader{to{transform:rotate(1turn)}}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.text-icon{align-items:center;display:inline-flex}.text-icon:before{margin-right:5px}.text-icon:after{margin-left:5px}.hover-item img{transition:.2s ease;will-change:transform}.hover-item:hover img{transform:scale(1.02)}.is-opened{color:#009e55}.soon-closed{color:#ff890e}.is-closed{color:#f33}.fi--color:before,.fi-color:after{color:var(--iris--icon--color)}