@iris.interactive/handcook 1.0.14 → 2.3.2

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 (50) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/public/index.html +39 -0
  4. package/public/mix-manifest.json +9 -0
  5. package/public/scripts/SmoothScroll.js +41 -0
  6. package/public/scripts/index.js +14 -0
  7. package/public/styles/scss/_utils.scss +0 -6
  8. package/public/styles/scss/_variables.scss +7 -0
  9. package/public/styles/scss/handcook.scss +20 -0
  10. package/public/styles/scss/mixins/_mixin-font.scss +36 -24
  11. package/public/styles/scss/mixins/_mixin-layout.scss +13 -32
  12. package/public/styles/scss/mixins/_mixin-style.scss +1 -1
  13. package/public/styles/style.css +35 -1230
  14. package/resources/assets/scripts/SmoothScroll.js +41 -0
  15. package/resources/assets/styles/_utils.scss +96 -0
  16. package/resources/assets/styles/_variables.scss +419 -0
  17. package/resources/assets/styles/handcook.scss +20 -0
  18. package/resources/assets/styles/mixins/_mixin-font.scss +43 -0
  19. package/resources/assets/styles/mixins/_mixin-layout.scss +84 -0
  20. package/resources/assets/styles/mixins/_mixin-style.scss +133 -0
  21. package/resources/index.html +39 -0
  22. package/resources/index.js +18 -0
  23. package/resources/style.scss +21 -0
  24. package/public/fonts/svgfont/etourisme/etourisme-font.eot +0 -0
  25. package/public/fonts/svgfont/etourisme/etourisme-font.svg +0 -1
  26. package/public/fonts/svgfont/etourisme/etourisme-font.ttf +0 -0
  27. package/public/fonts/svgfont/etourisme/etourisme-font.woff +0 -0
  28. package/public/fonts/svgfont/info-neige/info-neige-font.eot +0 -0
  29. package/public/fonts/svgfont/info-neige/info-neige-font.svg +0 -1
  30. package/public/fonts/svgfont/info-neige/info-neige-font.ttf +0 -0
  31. package/public/fonts/svgfont/info-neige/info-neige-font.woff +0 -0
  32. package/public/fonts/svgfont/iris-tides/iris-tides-font.eot +0 -0
  33. package/public/fonts/svgfont/iris-tides/iris-tides-font.svg +0 -1
  34. package/public/fonts/svgfont/iris-tides/iris-tides-font.ttf +0 -0
  35. package/public/fonts/svgfont/iris-tides/iris-tides-font.woff +0 -0
  36. package/public/fonts/svgfont/iris-weather/iris-weather-font.eot +0 -0
  37. package/public/fonts/svgfont/iris-weather/iris-weather-font.svg +0 -1
  38. package/public/fonts/svgfont/iris-weather/iris-weather-font.ttf +0 -0
  39. package/public/fonts/svgfont/iris-weather/iris-weather-font.woff +0 -0
  40. package/public/fonts/svgfont/theme/theme-font.eot +0 -0
  41. package/public/fonts/svgfont/theme/theme-font.svg +0 -1
  42. package/public/fonts/svgfont/theme/theme-font.ttf +0 -0
  43. package/public/fonts/svgfont/theme/theme-font.woff +0 -0
  44. package/public/styles/scss/_init.scss +0 -24
  45. package/public/styles/scss/_layout.scss +0 -213
  46. package/public/styles/scss/lib/_etourisme-font.scss +0 -55
  47. package/public/styles/scss/lib/_info-neige-font.scss +0 -36
  48. package/public/styles/scss/lib/_iris-tides-font.scss +0 -38
  49. package/public/styles/scss/lib/_iris-weather-font.scss +0 -47
  50. package/public/styles/scss/lib/_theme-font.scss +0 -135
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  # Welcome to HandCook 👨‍🍳
2
- ![Version](https://img.shields.io/badge/version-1.0.2-blue.svg?cacheSeconds=2592000)
2
+ ![Version](https://img.shields.io/badge/version-2.3.1-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": "1.0.14",
3
+ "version": "2.3.2",
4
4
  "description": "The web cooking by IRIS Interactive",
5
5
  "main": "./public/scripts/index.js",
6
6
  "scripts": {
package/public/index.html ADDED
@@ -0,0 +1,39 @@
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 Lucas ROCHE
12
+ ~ @date 27/01/2022 14:31
13
+ ~ @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
+ -->
15
+
16
+ <html>
17
+ <head>
18
+ <title>IRIStyle</title>
19
+ <script type="text/javascript">var exports = {};</script>
20
+ <script type="text/javascript" src="scripts/index.js"></script>
21
+ <link rel="stylesheet" href="styles/style.css">
22
+
23
+ </head>
24
+ <body>
25
+ <div id="step-1" style="height: 1800px; background-color: red;">
26
+ <a href="#step-2" data-trigger="wpiris-scroll">To step 2</a>
27
+ </div>
28
+ <div id="step-2" style="height: 1800px; background-color: green;">
29
+ <a href="#step-3" data-trigger="wpiris-scroll">To step 3</a>
30
+ </div>
31
+ <div id="step-3" style="height: 1800px; background-color: yellow;">
32
+ <a href="#step-1" data-trigger="wpiris-scroll">To step 1</a>
33
+ </div>
34
+ </body>
35
+ <script type="text/javascript">
36
+ const SmoothScroll = exports.SmoothScroll;
37
+ SmoothScroll( '[data-trigger="wpiris-scroll"]', 1000 );
38
+ </script>
39
+ </html>
package/public/mix-manifest.json ADDED
@@ -0,0 +1,9 @@
1
+ {
2
+ "/scripts/index.js": "/scripts/index.js",
3
+ "/styles/style.css": "/styles/style.css",
4
+ "/index.html": "/index.html",
5
+ "/styles/scss/_utils.scss": "/styles/scss/_utils.scss",
6
+ "/styles/scss/_variables.scss": "/styles/scss/_variables.scss",
7
+ "/styles/scss/handcook.scss": "/styles/scss/handcook.scss",
8
+ "/scripts/SmoothScroll.js": "/scripts/SmoothScroll.js"
9
+ }
package/public/scripts/SmoothScroll.js ADDED
@@ -0,0 +1,41 @@
1
+ const easeInCubic = function (t) { return t*t*t }
2
+
3
+ const scrollToElem = (startTime, currentTime, duration, scrollEndElemTop, startScrollOffset) => {
4
+ const runtime = currentTime - startTime;
5
+ let progress = runtime / duration;
6
+
7
+ progress = Math.min(progress, 1);
8
+
9
+ const ease = easeInCubic(progress);
10
+
11
+ window.scroll(0, startScrollOffset + (scrollEndElemTop * ease));
12
+ if(runtime < duration){
13
+ requestAnimationFrame((timestamp) => {
14
+ const currentTime = timestamp || new Date().getTime();
15
+ scrollToElem(startTime, currentTime, duration, scrollEndElemTop, startScrollOffset);
16
+ })
17
+ }
18
+ }
19
+
20
+ const SmoothScroll = (triggerAttribute, durationAnimation = 1000 ) => {
21
+ const triggerElement = document.querySelectorAll( triggerAttribute );
22
+ triggerElement.forEach( ( element, key ) => {
23
+ element.addEventListener( 'click', ( event ) => {
24
+ event.preventDefault();
25
+ const target = ( element.getAttribute( 'href' ) != '' ) ? document.querySelector( element.getAttribute( 'href' ) ) : document.querySelector( element.dataset.href );
26
+ const shift = ( element.dataset.shift !== undefined ) ? element.dataset.shift : 0;
27
+
28
+ const anim = requestAnimationFrame((timestamp) => {
29
+ const stamp = timestamp || new Date().getTime();
30
+ const start = stamp;
31
+
32
+ const startScrollOffset = window.pageYOffset;
33
+ const scrollEndElemTop = target.getBoundingClientRect().top - shift;
34
+
35
+ scrollToElem(start, stamp, durationAnimation, scrollEndElemTop, startScrollOffset);
36
+ })
37
+ } );
38
+ } );
39
+ }
40
+
41
+ export default SmoothScroll;
package/public/scripts/index.js CHANGED
@@ -62,6 +62,20 @@ var SmoothScroll = function SmoothScroll(triggerAttribute) {
62
62
 
63
63
  __webpack_require__.r(__webpack_exports__);
64
64
  /* harmony import */ var _package_script_SmoothScroll__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @package_script/SmoothScroll */ "./resources/assets/scripts/SmoothScroll.js");
65
+ /*
66
+ * IRIS Interactive
67
+ *
68
+ * NOTICE OF LICENSE
69
+ *
70
+ * This source file is no subject to a specific license
71
+ * but it belongs to the company IRIS Interactive.
72
+ * You can contact IRIS Interactive at the following
73
+ * address: contact@iris-interactive.fr
74
+ *
75
+ * @author Lucas ROCHE
76
+ * @date 27/01/2022 14:32
77
+ * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
78
+ */
65
79
 
66
80
  exports.SmoothScroll = _package_script_SmoothScroll__WEBPACK_IMPORTED_MODULE_0__["default"];
67
81
 
package/public/styles/scss/_utils.scss CHANGED
@@ -81,12 +81,6 @@
81
81
  }
82
82
  }
83
83
 
84
- /* Masquer un element
85
- /* ============================================= */
86
- .hide {
87
- display: none;
88
- }
89
-
90
84
  /* Opening
91
85
  /* ============================================= */
92
86
  .is-opened {
package/public/styles/scss/_variables.scss CHANGED
@@ -51,6 +51,13 @@ $margin-medium: 40px;
51
51
  $margin-small: 20px;
52
52
  $margin-xsmall: 20px;
53
53
 
54
+ $viewport-borders: (
55
+ "large": $margin-large,
56
+ "medium": $margin-medium,
57
+ "small": $margin-small,
58
+ "xsmall": $margin-xsmall,
59
+ );
60
+
54
61
 
55
62
  /* Breakpoint
56
63
  / ================================================== */
package/public/styles/scss/handcook.scss ADDED
@@ -0,0 +1,20 @@
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 27/01/2022 13:39
13
+ * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
+ */
15
+
16
+ @import "variables";
17
+ @import "mixins/mixin-font";
18
+ @import "mixins/mixin-layout";
19
+ @import "mixins/mixin-style";
20
+ @import "utils";
package/public/styles/scss/mixins/_mixin-font.scss CHANGED
@@ -1,31 +1,43 @@
1
- /*
2
- * Created by IRIS Interactive
3
- * User : IRIS Interactive
4
- */
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 Lucas ROCHE
12
+ * @date 28/01/2022 12:40
13
+ * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
+ */
15
+ @use "sass:math";
5
16
 
6
- /* Import
17
+ /* Font icon
7
18
  /* ============================================= */
8
- $allicons: ();
9
- $svgfont_path: '../fonts/svgfont' !default;
19
+ @mixin fi($unicode) {
20
+ content: #{'"\\' + $unicode + '"'};
21
+ font-family: "collection-font";
22
+ font-style: normal;
23
+ font-weight: 400;
24
+ font-display: block;
25
+ }
10
26
 
11
- /* Fonticon
27
+ /* Font size
12
28
  /* ============================================= */
13
- @mixin fi($name, $position : '', $plugin: 'theme') {
14
- $content: "";
15
-
16
- @each $label, $icon in map-get($allicons, '#{$plugin}') {
17
- @if $label == $name {
18
- $content: $icon;
19
- }
20
- }
21
-
22
- content: $content;
23
- font-family: '#{$plugin}-font';
29
+ @function rem-size( $size ) {
30
+ $remSize: math.div($size, 16);
31
+ @return #{$remSize}rem;
32
+ }
24
33
 
25
- @if $position == "before" {
26
- margin-right: 10px;
27
- } @else if $position == "after" {
28
- margin-left: 10px;
29
- }
34
+ @function vw-size( $size ) {
35
+ $ceil-size: math.div(math.div($container, 1px), 1 - math.div($margin-xlarge, 100%) * 2);
36
+ @return calc(#{$size} * 100 / #{$ceil-size} * 1vw);
30
37
  }
31
38
 
39
+ // Breakpoint large recalcule font-size
40
+ @function clamp-size( $min, $value, $max) {
41
+ $val: vw-size($value);
42
+ @return clamp(#{$min}, #{$val}, #{$max});
43
+ }
package/public/styles/scss/mixins/_mixin-layout.scss CHANGED
@@ -6,12 +6,23 @@
6
6
 
7
7
  /* Main gutter
8
8
  / ================================================== */
9
+ @function viewport-border($index) {
10
+ @return map_get($viewport-borders, $index);
11
+ }
12
+
13
+
14
+ /* Breakpoints
15
+ /* ============================================= */
9
16
  @mixin breakpoint($point) {
10
17
 
11
18
  @if $point == "xlarge" {
12
19
  @media screen and (min-width: #{$breakpoint-xlarge}) {
13
20
  @content;
14
21
  }
22
+ } @else if $point == "desktop" {
23
+ @media screen and (min-width: #{$breakpoint-desktop}) {
24
+ @content;
25
+ }
15
26
  } @else if $point == "large" {
16
27
  @media screen and (max-width: #{$breakpoint-large}) {
17
28
  @content;
@@ -28,10 +39,6 @@
28
39
  @media screen and (max-width: #{$breakpoint-xsmall}) {
29
40
  @content;
30
41
  }
31
- } @else if $point == "desktop" {
32
- @media screen and (min-width: #{$breakpoint-desktop}) {
33
- @content;
34
- }
35
42
  } @else {
36
43
  @media screen and (max-width: $point) {
37
44
  @content;
@@ -48,37 +55,11 @@
48
55
  flex-direction: $direction;
49
56
  }
50
57
 
51
- /* Font size
52
- /* ============================================= */
53
- @function rem-size( $size ) {
54
- $remSize: math.div($size, 16);
55
- @return #{$remSize}rem;
56
- }
57
-
58
- // TODO : n'est plus utilisé
59
- @function rem-size-ratio( $size, $ratio ) {
60
- @return calc((#{$size} / 16 * 1rem) * #{$ratio});
61
- }
62
-
63
- @function vw-size( $size ) {
64
- $ceil-size: math.div(math.div($container, 1px), 1 - math.div($margin-xlarge, 100%) * 2);
65
- @return calc(#{$size} * 100 / #{$ceil-size} * 1vw);
66
- }
67
-
68
- // Breakpoint large recalcule font-size
69
- @function clamp-size( $min, $value, $max) {
70
- $val: vw-size($value);
71
- @return clamp(#{$min}, #{$val}, #{$max});
72
- }
73
-
74
58
  /* Hover - TODO
75
59
  /* ============================================= */
76
60
  @mixin hover {
77
-
78
- .no-touchevents & {
79
- &:hover {
80
- @content;
81
- }
61
+ &:hover {
62
+ @content;
82
63
  }
83
64
  }
84
65
 
package/public/styles/scss/mixins/_mixin-style.scss CHANGED
@@ -115,7 +115,7 @@
115
115
  z-index: 1;
116
116
  pointer-events: auto;
117
117
  content: "";
118
- background-color: rgba(0, 0, 0, 0);
118
+ background-color: transparent;
119
119
  }
120
120
  }
121
121