@iris.interactive/handcook 2.9.32 → 2.9.33

package/README.md

@@ -1,5 +1,5 @@
 # Welcome to HandCook 👨‍🍳
-![Version](https://img.shields.io/badge/version-2.9.32-blue.svg?cacheSeconds=2592000)
+![Version](https://img.shields.io/badge/version-2.9.33-blue.svg?cacheSeconds=2592000)
 ![Prerequisite](https://img.shields.io/badge/node-%3E%3D%2012.14.0-blue.svg)
 [![License: UNLICENSED](https://img.shields.io/badge/License-UNLICENSED-yellow.svg)](#)
 [![Twitter: captain\_iris](https://img.shields.io/twitter/follow/captain\_iris.svg?style=social)](https://twitter.com/captain\_iris)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iris.interactive/handcook",
-  "version": "2.9.32",
+  "version": "2.9.33",
   "description": "The web cooking by IRIS Interactive",
   "main": "./public/scripts/index.js",
   "scripts": {

package/public/index.html

@@ -150,7 +150,7 @@
                 </ul>
             </nav>
         </aside>
-        <section data-hc-scrollspy="#scrollspy-nav" data-hc-scroll-reveal-parent>
+        <section data-hc-scrollspy="#scrollspy-nav">
             <article id="scroll-smooth">
                 <div class="navbar"
                      style="position: sticky; top: 0; height: 50px; display: flex; align-items: center; gap: 40px; background-color: #fff; padding: 0 20px;" id="scroll-smooth-nav">

package/public/scripts/components/scroll-reveal/scroll-reveal.component.js

@@ -15,6 +15,7 @@
 
 import ScrollReveal from 'scrollreveal'
 import ElementEnum from "../../enumerators/element.enum";
+import './scroll-reveal.component.scss';
 
 export class HcScrollReveal {
 
@@ -49,7 +50,13 @@ export class HcScrollReveal {
 				origin = parent.getAttribute('data-hc-scroll-reveal-origin');
 			}
 
-			ScrollReveal().reveal(parent.children, {
+			Array.prototype.forEach.call(parent.children, child => {
+				if (!child.hasAttribute('data-hc-noscroll-reveal')) {
+					child.setAttribute('data-hc-scroll-reveal-child', '');
+				}
+			});
+
+			ScrollReveal().reveal('[data-hc-scroll-reveal-child]', {
 				distance: distance,
 				delay: delay,
 				duration: duration,

package/public/scripts/components/scroll-reveal/scroll-reveal.component.scss

@@ -1,174 +1,5 @@
-/**
- * Settings
- */
-
-$scroll-reveal-animation-duration: 0.4s !default;
-$scroll-reveal-animation-delay: 0s !default;
-$scroll-reveal-slide-offset: 20% !default;
-$scroll-reveal-zoom-in-scale: 0.5 !default;
-$scroll-reveal-zoom-out-scale: 1.1 !default;
-$scroll-reveal-flip-rotate: 91deg !default;
-
-/**
- * Easings
- */
-
-$scroll-reveal-easings: (
-    linear: linear,
-    ease: ease,
-    ease-in: ease-in,
-    ease-out: ease-out,
-    ease-in-out: ease-in-out,
-
-    ease-in-cubic: cubic-bezier(.55, .055, .675, .19),
-    ease-out-cubic: cubic-bezier(.215, .61, .355, 1),
-    ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1),
-
-    ease-in-circ: cubic-bezier(.6, .04, .98, .335),
-    ease-out-circ: cubic-bezier(.075, .82, .165, 1),
-    ease-in-out-circ: cubic-bezier(.785, .135, .15, .86),
-
-    ease-in-expo: cubic-bezier(.95, .05, .795, .035),
-    ease-out-expo: cubic-bezier(.19, 1, .22, 1),
-    ease-in-out-expo: cubic-bezier(1, 0, 0, 1),
-
-    ease-in-quad: cubic-bezier(.55, .085, .68, .53),
-    ease-out-quad: cubic-bezier(.25, .46, .45, .94),
-    ease-in-out-quad: cubic-bezier(.455, .03, .515, .955),
-
-    ease-in-quart: cubic-bezier(.895, .03, .685, .22),
-    ease-out-quart: cubic-bezier(.165, .84, .44, 1),
-    ease-in-out-quart: cubic-bezier(.77, 0, .175, 1),
-
-    ease-in-quint: cubic-bezier(.755, .05, .855, .06),
-    ease-out-quint: cubic-bezier(.23, 1, .32, 1),
-    ease-in-out-quint: cubic-bezier(.86, 0, .07, 1),
-
-    ease-in-sine: cubic-bezier(.47, 0, .745, .715),
-    ease-out-sine: cubic-bezier(.39, .575, .565, 1),
-    ease-in-out-sine: cubic-bezier(.445, .05, .55, .95),
-
-    ease-in-back: cubic-bezier(.6, -.28, .735, .045),
-    ease-out-back: cubic-bezier(.175, .885, .32, 1.275),
-    ease-in-out-back: cubic-bezier(.68, -.55, .265, 1.55)
-);
-
-/**
- * Core
- */
-
+//Scroll reveal
+[data-hc-scroll-reveal-child],
 [data-hc-scroll-reveal] {
-    transition-duration: $scroll-reveal-animation-duration;
-    transition-delay: $scroll-reveal-animation-delay;
-    transition-duration: var(--hc-scroll-revea-duration, $scroll-reveal-animation-duration);
-    transition-delay: var(--hc-scroll-reveal-delay, $scroll-reveal-animation-delay);
-    transition-timing-function: var(--hc-scroll-revea-easing, map-get($scroll-reveal-easings, 'ease'));
-}
-
-@for $i from 4 through 40 {
-    [data-hc-scroll-reveal][data-hc-scroll-reveal-duration='#{$i * 50}'] {
-        transition-duration: #{$i * 0.05}s;
-    }
-}
-
-@for $i from 1 through 20 {
-    [data-hc-scroll-reveal][data-hc-scroll-reveal-delay='#{$i * 50}'] {
-        transition-delay: #{$i * 0.05}s;
-    }
-}
-
-@each $key, $value in $scroll-reveal-easings {
-    [data-hc-scroll-reveal][data-hc-scroll-reveal-easing='#{$key}'] {
-        transition-timing-function: $value;
-    }
-}
-
-/**
- * Animations
- */
-
-// Fade
-[data-hc-scroll-reveal|='fade'] {
-    opacity: 0;
-    transition-property: opacity;
-}
-
-[data-hc-scroll-reveal|='fade'].scroll-reveal-animate,
-body.sal-disabled [data-hc-scroll-reveal|='fade'] {
-    opacity: 1;
-}
-
-// Slide
-[data-hc-scroll-reveal|='slide'] {
-    opacity: 0;
-    transition-property: opacity, transform;
-}
-
-[data-hc-scroll-reveal='slide-up'] {
-    transform: translateY($scroll-reveal-slide-offset);
-}
-
-[data-hc-scroll-reveal='slide-down'] {
-    transform: translateY(-$scroll-reveal-slide-offset);
-}
-
-[data-hc-scroll-reveal='slide-left'] {
-    transform: translateX($scroll-reveal-slide-offset);
-}
-
-[data-hc-scroll-reveal='slide-right'] {
-    transform: translateX(-$scroll-reveal-slide-offset);
-}
-
-[data-hc-scroll-reveal|='slide'].scroll-reveal-animate,
-body.sal-disabled [data-hc-scroll-reveal|='slide'] {
-    opacity: 1;
-    transform: none;
-}
-
-// Zoom
-[data-hc-scroll-reveal|='zoom'] {
-    opacity: 0;
-    transition-property: opacity, transform;
-}
-
-[data-hc-scroll-reveal='zoom-in'] {
-    transform: scale($scroll-reveal-zoom-in-scale);
-}
-
-[data-hc-scroll-reveal='zoom-out'] {
-    transform: scale($scroll-reveal-zoom-out-scale);
-}
-
-[data-hc-scroll-reveal|='zoom'].scroll-reveal-animate,
-body.sal-disabled [data-hc-scroll-reveal|='zoom'] {
-    opacity: 1;
-    transform: none;
-}
-
-// Flip
-[data-hc-scroll-reveal|='flip'] {
-    backface-visibility: hidden;
-    transition-property: transform;
-}
-
-[data-hc-scroll-reveal='flip-left'] {
-    transform: perspective(2000px) rotateY(-$scroll-reveal-flip-rotate);
-}
-
-[data-hc-scroll-reveal='flip-right'] {
-    transform: perspective(2000px) rotateY($scroll-reveal-flip-rotate);
-}
-
-[data-hc-scroll-reveal='flip-up'] {
-    transform: perspective(2000px) rotateX(-$scroll-reveal-flip-rotate);
-}
-
-[data-hc-scroll-reveal='flip-down'] {
-    transform: perspective(2000px) rotateX($scroll-reveal-flip-rotate);
-}
-
-[data-hc-scroll-reveal|='flip'].scroll-reveal-animate,
-body.sal-disabled [data-hc-scroll-reveal|='flip'] {
-    transform: none;
+    visibility: hidden;
 }