@iris.interactive/handcook 7.1.2-beta → 7.1.4-beta

package/README.md

@@ -1,5 +1,5 @@
 # Welcome to HandCook 👨‍🍳
-![Version](https://img.shields.io/badge/version-7.1.2-beta-blue.svg?cacheSeconds=2592000)
+![Version](https://img.shields.io/badge/version-7.1.4-beta-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/mix-manifest.json

@@ -30,6 +30,7 @@
     "/public/scripts/components/scroll-reveal/scroll-reveal.component.js": "/public/scripts/components/scroll-reveal/scroll-reveal.component.js",
     "/public/scripts/components/scroll-reveal/scroll-reveal.component.scss": "/public/scripts/components/scroll-reveal/scroll-reveal.component.scss",
     "/public/scripts/components/scrollspy/scrollspy.component.js": "/public/scripts/components/scrollspy/scrollspy.component.js",
+    "/public/scripts/components/share/share.component.js": "/public/scripts/components/share/share.component.js",
     "/public/scripts/components/slider/slider.component.js": "/public/scripts/components/slider/slider.component.js",
     "/public/scripts/components/smooth-scroll/smooth-scroll.component.js": "/public/scripts/components/smooth-scroll/smooth-scroll.component.js",
     "/public/scripts/components/tab/tab.component.js": "/public/scripts/components/tab/tab.component.js",
@@ -37,10 +38,15 @@
     "/public/scripts/components/toggle/toggle.component.js": "/public/scripts/components/toggle/toggle.component.js",
     "/public/scripts/components/tooltip/tooltip.component.js": "/public/scripts/components/tooltip/tooltip.component.js",
     "/public/scripts/enumerators/element.enum.js": "/public/scripts/enumerators/element.enum.js",
+    "/public/scripts/enumerators/share.enum.js": "/public/scripts/enumerators/share.enum.js",
     "/public/scripts/enumerators/smooth-scroll.enum.js": "/public/scripts/enumerators/smooth-scroll.enum.js",
     "/public/scripts/enumerators/tooltip.enum.js": "/public/scripts/enumerators/tooltip.enum.js",
     "/public/scripts/handcook.js": "/public/scripts/handcook.js",
     "/public/scripts/index.js.LICENSE.txt": "/public/scripts/index.js.LICENSE.txt",
+    "/public/scripts/support/cookie.support.js": "/public/scripts/support/cookie.support.js",
+    "/public/scripts/support/hash.support.js": "/public/scripts/support/hash.support.js",
+    "/public/scripts/support/toggle-html.support.js": "/public/scripts/support/toggle-html.support.js",
+    "/public/scripts/support/wrap-select.support.js": "/public/scripts/support/wrap-select.support.js",
     "/public/styles/scss/_utils.scss": "/public/styles/scss/_utils.scss",
     "/public/styles/scss/_variables.scss": "/public/styles/scss/_variables.scss",
     "/public/styles/scss/handcook.scss": "/public/styles/scss/handcook.scss",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iris.interactive/handcook",
-  "version": "7.1.2-beta",
+  "version": "7.1.4-beta",
   "description": "The web cooking by IRIS Interactive",
   "main": "./public/scripts/index.js",
   "scripts": {
@@ -32,8 +32,8 @@
     "sass-loader": "11.1.1"
   },
   "dependencies": {
-    "@nats-io/nats-core": "^3.0.0-27",
     "@fancyapps/ui": "^4.0.22",
+    "@nats-io/nats-core": "^3.0.0-27",
     "bootstrap": "^5.1.3",
     "swiper": "8.0.6",
     "tippy.js": "^6.3.7",

package/public/scripts/components/share/share.component.js

@@ -0,0 +1,51 @@
+import ShareEnum from "../../enumerators/share.enum";
+
+export default class ShareComponent {
+
+    constructor() {
+    }
+
+    static manageDisplayOfShareButtons() {
+
+        if (navigator.share && window.matchMedia('(max-width: 1024px)').matches) {
+            $(ShareEnum.shareMobile).removeClass('hidden');
+            $(ShareEnum.shareDesktop).addClass('hidden');
+        } else {
+            $(ShareEnum.shareMobile).addClass('hidden');
+            $(ShareEnum.shareDesktop).removeClass('hidden');
+        }
+    }
+
+    static sharePage() {
+        let shareButton = $('[data-share="mobile"]');
+
+        shareButton.on('click', event => {
+            event.preventDefault();
+
+            if (navigator.share) {
+                navigator.share({
+                    title: document.title,
+                    url: window.location.href
+                })
+            } else {
+                // fallback
+            }
+        });
+    }
+
+    static shareOnWhatsappWeb() {
+
+        $(ShareEnum.shareWhatsappService).on('click', function (e) {
+            e.preventDefault();
+            window.open('https://web.whatsapp.com/send?text='+$(location).attr('href'), '_blank');
+        })
+    }
+
+    static shareOnMessengerWeb() {
+
+        $(ShareEnum.shareMessengerService).on('click', function (e) {
+            e.preventDefault();
+            window.open('http://www.facebook.com/dialog/send?app_id=702473707947207&link='+$(location).attr('href')+'&redirect_uri='+$(location).attr('href'), '_blank');
+        })
+    }
+}

package/public/scripts/components/slider/slider.component.js

@@ -193,21 +193,31 @@ export class HcSlider {
     buildDom() {
         // Si le DOM n'est pas créé correctement, on le fait
         if (this.slider.querySelectorAll('.swiper-wrapper').length === 0) {
-            // On recupère les slide items (element de DOM enfant de premier niveau)
-            // et on leur ajoute la classe des slide item
-            const items = [].slice.call(this.slider.children);
-            items.forEach(item => {
-                item.classList.add('swiper-slide');
-                item.setAttribute('aria-roledescription', 'slide');
-            });
+            // On récupère les enfants de slider
+            const items = Array.from(this.slider.children);
 
-            // On ajoute la classe swiper a notre slider,
-            // on crée la div wrapper et on insére les slider item dedans
-            const wrapperElement = document.createElement("div");
-            wrapperElement.classList.add("swiper-wrapper");
+            // On crée l'élément <ul> qui va contenir les <li>
+            const wrapperElement = document.createElement("ul");
+            wrapperElement.classList.add("not-list-style", "swiper-wrapper");
+
+            // On transforme chaque enfant en <li>, en leur appliquant les classes et attributs, puis on les ajoute au <ul>
             items.forEach(item => {
-                wrapperElement.appendChild(item);
+                // Créer un nouvel élément <li>
+                const newItem = document.createElement("li");
+
+                // Copier les classes et attributs de l'ancien élément
+                newItem.classList.add(...item.classList, "swiper-slide");
+                newItem.setAttribute("aria-roledescription", "slide");
+
+                // Copier le contenu de l'ancien élément dans le nouveau
+                newItem.innerHTML = item.innerHTML;
+
+                // Ajouter le nouvel élément <li> au <ul>
+                wrapperElement.appendChild(newItem);
             });
+
+            // On vide le slider et on insère le wrapper <ul> contenant les <li>
+            this.slider.innerHTML = "";
             this.slider.appendChild(wrapperElement);
 
             // On ajout les différentes div utile en fonction des options passées
@@ -294,6 +304,17 @@ export class HcSlider {
 
                     this.slider.dispatchEvent(this.initEvent);
                 },
+                afterInit: (swiper) => {
+                    
+                    //Remove tabindex
+                    if (this.slider.hasAttribute('data-hc-slider-disable-arrows-focus')) {
+                        swiper.$el.find('.hc-slider-buttons > *').removeAttr('tabindex');
+                    }
+
+                    if (this.slider.hasAttribute('data-hc-slider-disable-pagination-focus')) {
+                        swiper.$el.find('.hc-slider-pagination > *').removeAttr('tabindex');
+                    }
+                },
                 slideChangeTransitionEnd: (swiper) => {
 
                     // slide item
@@ -304,6 +325,15 @@ export class HcSlider {
                     swiper.$el.find('.swiper-slide-active').addClass('hc-slider-slide-active');
                     swiper.$el.find('.swiper-slide-next').addClass('hc-slider-slide-next');
                     swiper.$el.find('.swiper-slide-prev').addClass('hc-slider-slide-prev');
+
+                    //Remove tabindex
+                    if (this.slider.hasAttribute('data-hc-slider-disable-arrows-focus')) {
+                        swiper.$el.find('.hc-slider-buttons > *').removeAttr('tabindex');
+                    }
+
+                    if (this.slider.hasAttribute('data-hc-slider-disable-pagination-focus')) {
+                        swiper.$el.find('.hc-slider-pagination > *').removeAttr('tabindex');
+                    }
                 }
             },
             breakpoints: {}

package/public/scripts/enumerators/share.enum.js

@@ -0,0 +1,6 @@
+export default class ShareEnum {
+	static shareDesktop = '[data-share="desktop"]';
+	static shareMobile = '[data-share="mobile"]';
+	static shareWhatsappService = '[data-share-service="whatsapp"]';
+	static shareMessengerService = '[data-share-service="messenger"]';
+}

package/public/scripts/support/cookie.support.js

@@ -0,0 +1,22 @@
+export function getCookie(cname) {
+    let name = cname + "=";
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+    for(let i = 0; i <ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return "";
+}
+
+export function setCookie(cname, cvalue, exdays) {
+    const d = new Date();
+    d.setTime(d.getTime() + (exdays*24*60*60*1000));
+    let expires = "expires="+ d.toUTCString();
+    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+}

package/public/scripts/support/hash.support.js

@@ -0,0 +1,11 @@
+String.prototype.hashCode = function() {
+    var hash = 0, i, chr;
+    if (this.length === 0) return hash;
+    for (i = 0; i < this.length; i++) {
+        chr   = this.charCodeAt(i);
+        hash  = ((hash << 5) - hash) + chr;
+        hash |= 0; // Convert to 32bit integer
+    }
+    return hash;
+};
+

package/public/scripts/support/toggle-html.support.js

@@ -0,0 +1,5 @@
+jQuery.fn.extend({
+    toggleHtml: function (a, b) {
+        return this.html(this.html() == b ? a : b);
+    }
+});

package/public/scripts/support/wrap-select.support.js

@@ -0,0 +1,3 @@
+export default function wrapSelect() {
+    $('select:not([class*="lightpick"])').parent().not('.form__select').children('select').wrap('<div class="form__select"></div>');
+}

package/public/styles/scss/_utils.scss

@@ -157,4 +157,10 @@
     &--center {
         align-items: center;
     }
+}
+
+/* Foucs style
+/* ============================================= */
+.not-focus-style:focus {
+    outline: none !important;
 }

package/public/styles/scss/mixins/_mixin-layout.scss

@@ -58,15 +58,15 @@
 /* Hover
 /* ============================================= */
 @mixin hover {
-    body.iris-hover & {
+    @media (hover: hover) and (pointer: fine) {
         &:hover {
             @content;
         }
     }
 }
 
-@mixin hover-focus() {
-    body.iris-hover & {
+@mixin hover-focus {
+    @media (hover: hover) and (pointer: fine) {
         &:hover,
         &:focus {
             @content;
@@ -74,8 +74,8 @@
     }
 }
 
-@mixin hover-focus-active() {
-    body.iris-hover & {
+@mixin hover-focus-active {
+    @media (hover: hover) and (pointer: fine) {
         &:hover,
         &:focus,
         &:active {
@@ -84,8 +84,8 @@
     }
 }
 
-@mixin hover-focus-visited() {
-    body.iris-hover & {
+@mixin hover-focus-visited {
+    @media (hover: hover) and (pointer: fine) {
         &:hover,
         &:focus,
         &:visited {

package/public/styles/style.css

@@ -25,4 +25,4 @@
  * @author      Lucas ROCHE
  * @date        28/01/2022 07:41
  * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
- */.stretched-link:before{background-color:transparent;bottom:0;content:"";left:0;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 5px 10px 0}.list-flex>:last-child{margin-right:0}@keyframes loader{to{transform:rotate(1turn)}}@keyframes fade{0%{opacity:0}to{opacity:1}}.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;gap:5px}.text-icon--start{align-items:flex-start}.hover-item img{transition:.2s ease;will-change:transform}.hover-item:hover img{transform:scale(1.02)}.is-open{color:#009e55}.soon-close{color:#ff890e}.is-close{color:#f33}.fi--color:before,.fi-color:after{color:var(--iris--icon--color)}.font-size-xsmall{font-size:var(--iris--global--font-size-xsmall--rem)}.font-size-small{font-size:var(--iris--global--font-size-small--rem)}.font-size-regular{font-size:var(--iris--global--font-size-regular--rem)}@media screen and (max-width:650px){.font-size-regular{font-size:var(--iris--global--font-size-regular--small--rem)}}.font-size-large{font-size:var(--iris--global--font-size-large--rem)}@media screen and (max-width:650px){.font-size-large{font-size:var(--iris--global--font-size-large--small--rem)}}.font-size-xlarge{font-size:var(--iris--global--font-size-extra-large--rem)}@media screen and (max-width:650px){.font-size-xlarge{font-size:var(--iris--global--font-size-extra-large--small--rem)}}.align-items--bottom,.align-items--end{align-items:flex-end}.align-items--start,.align-items--top{align-items:flex-start}.align-items--center{align-items:center}
+ */.stretched-link:before{background-color:transparent;bottom:0;content:"";left:0;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 5px 10px 0}.list-flex>:last-child{margin-right:0}@keyframes loader{to{transform:rotate(1turn)}}@keyframes fade{0%{opacity:0}to{opacity:1}}.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;gap:5px}.text-icon--start{align-items:flex-start}.hover-item img{transition:.2s ease;will-change:transform}.hover-item:hover img{transform:scale(1.02)}.is-open{color:#009e55}.soon-close{color:#ff890e}.is-close{color:#f33}.fi--color:before,.fi-color:after{color:var(--iris--icon--color)}.font-size-xsmall{font-size:var(--iris--global--font-size-xsmall--rem)}.font-size-small{font-size:var(--iris--global--font-size-small--rem)}.font-size-regular{font-size:var(--iris--global--font-size-regular--rem)}@media screen and (max-width:650px){.font-size-regular{font-size:var(--iris--global--font-size-regular--small--rem)}}.font-size-large{font-size:var(--iris--global--font-size-large--rem)}@media screen and (max-width:650px){.font-size-large{font-size:var(--iris--global--font-size-large--small--rem)}}.font-size-xlarge{font-size:var(--iris--global--font-size-extra-large--rem)}@media screen and (max-width:650px){.font-size-xlarge{font-size:var(--iris--global--font-size-extra-large--small--rem)}}.align-items--bottom,.align-items--end{align-items:flex-end}.align-items--start,.align-items--top{align-items:flex-start}.align-items--center{align-items:center}.not-focus-style:focus{outline:none!important}