@supersoniks/concorde 3.1.33 → 3.1.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "3.1.33",
+  "version": "3.1.35",
   "license": "MIT",
   "type": "module",
   "main": "",

package/src/core/components/functional/queue/queue.ts

@@ -1,4 +1,4 @@
-import { html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import { map } from "lit/directives/map.js";
@@ -62,6 +62,7 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
     }
     this.filterPublisher?.offInternalMutation(this.updateFilteredContent);
     // reset internal state
+
     this.props = null;
     this.limit = 5;
     this.offset = 0;
@@ -77,6 +78,8 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
   static instanceCounter = 0;
   instanceId = 0;
   localStorage = "disabled";
+
+
   async connectedCallback() {
     this.instanceId = Queue.instanceCounter++;
     this.localStorage = this.getAttribute("localStorage") || this.localStorage;
@@ -181,6 +184,23 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
     this.isFirstRequest = false;
   };
 
+  protected updated(_changedProperties: PropertyValues): void {
+    
+    if(Math.abs(this.scrollX - window.scrollX) > 10 || Math.abs(this.scrollY - window.scrollY) > 10){
+      window.scrollTo(this.scrollX, this.scrollY);
+    }
+    //Hack pour éviter que le scroll ne retourne en haut si safari
+    window.requestAnimationFrame(() => {      
+      if(Math.abs(this.scrollX - window.scrollX) > 10 || Math.abs(this.scrollY - window.scrollY) > 10){
+        window.scrollTo(this.scrollX, this.scrollY);
+      }
+    });
+
+    super.updated(_changedProperties);
+  }
+
+
+
   /**
    * Cette expression est utilisée comme modèle par le composant Queue pour renseigngner le dataProvider de la [liste](./?path=/docs/core-components-functional-list-list--basic) créée.
    * * l'expression *$offset* est alors remplacée par le numéro de l'élément à partir duquel démarrer
@@ -280,15 +300,27 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
     ];
     newProps.resultCount = this.resultCount;
     newProps.lastFetchedData = e?.detail.fetchedData || {};
+
     this.props = newProps;
     this.lastRequestTime = new Date().getTime();
   }
+
+  scrollY = 0;
+  scrollX = 0;
+
   render() {
-    if (!Array.isArray(this.props)) return nothing;
+    if (!Array.isArray(this.props)){
+      return nothing;
+    }
+
+    this.scrollX = window.scrollX;
+    this.scrollY = window.scrollY;
+
     let lazyload = !this.noLazyload;
     if (this.props.length == 1) {
       lazyload = false;
     }
+    this.style.display = "block";
     return html`
       ${map(this.props, (item, index) => {
         const templates =

package/src/core/mixins/Subscriber.ts

@@ -4,7 +4,7 @@ import HTML from "@supersoniks/concorde/core/utils/HTML";
 import Objects from "@supersoniks/concorde/core/utils/Objects";
 import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
 import { LitElement, PropertyValues } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import WordingDirective from "../directives/Wording";
 import {
   PublisherInterface,
@@ -33,6 +33,7 @@ export interface SubscriberInterface<PropsType = CoreJSType> {
   defferedDebug: boolean | null;
   displayContents: boolean;
   shadowRoot?: ShadowRoot;
+  shouldRenderLazy: boolean;
   dispatchEvent(event: Event): void;
   setAttribute(name: string, value: string): void;
   addEventListener(
@@ -166,6 +167,8 @@ const Subscriber = <
       }
       this.requestUpdate();
     }
+
+   
     protected updated(_changedProperties: PropertyValues): void {
       super.updated(_changedProperties);
       const ref = this.shadowRoot || this;
@@ -180,6 +183,7 @@ const Subscriber = <
       if (display) this.style.display = display;
       else this.style.removeProperty("display");
     }
+    @state() shouldRenderLazy = true;
     connectedCallback() {
       SubscriberElement.instanceCounter++;
       if (this.hasAttribute("lazyRendering")) {
@@ -193,11 +197,11 @@ const Subscriber = <
         const iObserver = new IntersectionObserver((entries) => {
           for (const e of entries) {
             if (firstView && e.isIntersecting) {
-              this.addDebugger();
               firstView = false;
-              this.initWording();
-              this.initPublisher();
               iObserver.disconnect();
+              this.initWording();
+              this.shouldRenderLazy = false;
+              this.startPublisher();
               break;
             }
           }
@@ -205,10 +209,13 @@ const Subscriber = <
         iObserver.observe(this);
       } else {
         this.initWording();
-        this.initPublisher();
-        this.addDebugger();
+        this.shouldRenderLazy = false;
       }
+      
+      this.initPublisher();
+      this.addDebugger();
       super.connectedCallback();
+
     }
 
     disconnectedCallback() {
@@ -336,6 +343,8 @@ const Subscriber = <
       this.props = v;
     };
 
+  
+
     initPublisher() {
       if (!document) return;
       if (this.publisher) {
@@ -372,6 +381,14 @@ const Subscriber = <
         }
         this.publisher = pub;
       }
+      if(this.hasAttribute("lazyRendering")) {
+        return;
+      }
+      else{
+        this.startPublisher();
+      }
+    }
+    startPublisher() {
       if (this.publisher) {
         if (this._props) {
           this.publisher.set(this._props);