@vandenberghinc/volt 1.1.5 → 1.1.7

package/frontend/src/ui/scroller.ts

@@ -4,8 +4,9 @@
  */
 
 // Imports.
-import { Elements, VElementTagMap } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VElementTagMap, AppendType } from "../elements/module.js"
 import { Utils } from "../modules/utils.js"
+import { AnyElement } from "./any_element.js";
 import { Span } from "./span"
 import { VStack, VStackElement } from "./stack"
 
@@ -19,10 +20,9 @@ interface ScrollCallbackItem {
 
 // Scroller.
 // - Warning: Setting padding on element attribute "content" may cause undefined behaviour.
-@Elements.register
-export class ScrollerElement extends VElementTagMap.div {
-
-    static default_style = {
+@Elements.create({
+    name: "ScrollerElement",
+    default_style: {
         "position": "relative", // is required for attribute "track" 
         "margin": "0px",
         "padding": "0px",
@@ -39,7 +39,9 @@ export class ScrollerElement extends VElementTagMap.div {
         "content-visibility": "auto", // improve rendering.
         // "align-content": "flex-start", // align items at start, do not stretch / space when inside HStack.
         // "align-items": "flex-start", // align items at start, do not stretch / space when inside HStack.
-    };
+    },
+})
+export class ScrollerElement extends VElementTagMap.div {
 
     // @ts-expect-error
     public content: VStackElement;
@@ -60,7 +62,7 @@ export class ScrollerElement extends VElementTagMap.div {
     public _fadeout_timeout: any;
 
     // Constructor.
-    constructor(...children: any[]) {
+    constructor(...children: AppendType[]) {
         
         // Initialize base class.
         super({
@@ -340,7 +342,7 @@ export class ScrollerElement extends VElementTagMap.div {
     }
 
     // By default append items to the content.
-    append(...children: any): this {
+    append(...children: AppendType[]): this {
         this.content.append(...children);
         return this;
     }
@@ -608,287 +610,287 @@ declare module './any_element.d.ts' { interface AnyElementMap { ScrollerElement:
         @description: The elements children.
         @type: array[Node]
  */
-@Elements.register
-export class VirtualScrollerElement extends ScrollerElement {
-
-    public _v_children: any[];
-    public top_diff: number;
-    public scroll_top_value: number;
-    public _last_v_children: number;
-    public visible_container: VStackElement;
-    public height_measurer: any;
-    
-    // Constructor.
-    constructor(...children: any[]) {
-        
-        // Initialize base class.
-        super();
-        this._init_derived({ derived: VirtualScrollerElement, })
-
-        // Virtual children.
-        this._v_children = [];
-
-        // Attributes.
-        this.top_diff = 0;
-        this.scroll_top_value = 0;
-        this._last_v_children = 0;
-
-        // Append children.
-        this.append(...children);
-
-        // The visible container with the scroll dimensions and positioned children inside.
-        this.visible_container = VStack()
-            .position("relative")
-            .overflow_x("visible")
-            .overflow_y("hidden")
-            .styles({
-                "content-visibility": "auto",
-            })
-        this.content.append(this.visible_container)
-
-        // The height measurer.
-        this.height_measurer = Span()
-            .visibility("hidden")
-        this.content.append(this.height_measurer)
-
-        // Render.
-        this.render();
-
-        // Set scroll event listener.
-        // @todo set_scroll_top_without event wont work with this new scroll event.
-        this.content.addEventListener("scroll", () => this.render())
-
-    }
-
-    // Set default since it inherits HStackElement.
-    set_default(): this {
-        return super.set_default(VirtualScrollerElement);
-    }
-
-    // Replace overflow.
-    overflow(): string;
-    overflow(value: string): this;
-    overflow(value?: string): string | this {
-        if (value == null) {
-            return this.content.overflow();
-        }
-        this.content.overflow(value);
-        this.visible_container.overflow_x(value.split(" ")[0]);
-        return this;
-    }
-    overflow_x(): string;
-    overflow_x(value: string): this;
-    overflow_x(value?: string): string | this {
-        if (value == null) {
-            return this.content.overflow_x();
-        }
-        this.content.overflow_x(value);
-        this.visible_container.overflow_x(value);
-        return this;
-    }
-    // keep overflow y on this.visible_container always hidden otherwise it may mess with expanding this.content and cause an infinite scroll event.
-
-    // Set remove children to content.
-    remove_children(): this {
-        this._v_children = [];
-        this.visible_container.min_height(0);
-        this.visible_container.max_height(0);
-        this.visible_container.inner_html("");
-        return this;
-    }
-
-    // Render the visible content.
-    render(): this {
-        // Do not use a clearTimeout setTimout structure cause that will cause some elements to be appended too late on a very fast sroll.
-
-        // Get scroll direction.
-        const last_scroll_top = this.scroll_top_value;
-        this.scroll_top_value = this.content.scrollTop;
-        const last_v_children = this._last_v_children;
-        this._last_v_children = this._v_children.length;
-        let scrolling_down = true;
-        if (this.scroll_top_value > last_scroll_top) {
-            scrolling_down = true;
-        } else if (this.scroll_top_value < last_scroll_top) {
-            scrolling_down = false;
-        }
-        // Disable forced behaviour because when height edits are made it should also be updated, but this is easily forgotten by the user.
-        // else if (!forced && this.last_v_children == last_v_children) {
-        //     return null; // horizontal scroll.
-        // }
-
-        // Get the start and end y.
-        const start_y = this.content.scrollTop;
-        const end_y = start_y + this.content.offsetHeight + this.top_diff;
-
-        // Iterate.
-        let is_first = true;
-        let is_visible = false; 
-        let total_height = 0;
-        let visible_height = 0;
-        this._v_children.iterate((child) => {
-
-            // Child vars.
-            const height = child.v_height !== undefined ? child.v_height : this.get_height(child);
-            if (height == 0) {
-                return null; // no fixed height or no height.
-            }
-            const child_start_y = total_height;
-            const child_end_y = total_height + height; // Adjust as needed
-            total_height += height;
-
-            // First item.
-            if (is_first && child_end_y >= start_y) {
-                child.transform(`translateY(${child_start_y}px)`); // also update when still visible but height changes may have been made to an element.
-                visible_height += height;
-                is_first = false;
-                is_visible = true;
-                if (!child.rendered) {
-                    if (scrolling_down) {
-                        this.visible_container.appendChild(child);
-                    } else {
-                        this.visible_container.insertBefore(child, this.visible_container.firstChild);
-                    }
-                    child.rendered = true;
-                }
-            }
-
-            // Last visible element.
-            else if (is_visible && child_start_y >= end_y) {
-                child.transform(`translateY(${child_start_y - visible_height}px)`); // also update when still visible but height changes may have been made to an element.
-                visible_height += height;
-                is_visible = false;
-                if (!child.rendered) {
-                    if (scrolling_down) {
-                        this.visible_container.appendChild(child);
-                    } else {
-                        this.visible_container.insertBefore(child, this.visible_container.firstChild);
-                    }
-                    child.rendered = true;
-                }
-            }
-
-            // Visible elements.
-            else if (is_visible) {
-                child.transform(`translateY(${child_start_y - visible_height}px)`); // also update when still visible but height changes may have been made to an element.
-                visible_height += height;
-                if (!child.rendered) {
-                    if (scrolling_down) {
-                        this.visible_container.appendChild(child);
-                    } else {
-                        this.visible_container.insertBefore(child, this.visible_container.firstChild);
-                    }
-                    child.rendered = true;
-                }
-            }
-
-            // Invisible elements.
-            else if (child.rendered) {
-                child.remove();
-                child.rendered = false;
-            }
-        })
-
-        // Set scroll dimension.
-        this.visible_container.min_height(total_height);
-        this.visible_container.max_height(total_height);
-
-        // Return this.
-        return this;
-    }
-
-    // Update heights.
-    update_heights(): this {
-        this._v_children.iterate((child) => {
-            child.v_height = this.get_height(child, false);
-        })
-        return this;
-    }
-
-    // Update height of a certain child.
-    update_height(child: any): this {
-        child.v_height = this.get_height(child, false);
-        return this;
-    }
-
-    // Get the height of an element.
-    get_height(element, fixed = true): number {
-        let height;
-
-        // Get fixed height.
-        if (fixed) {
-            height = parseFloat(element.style.height);
-            if (isNaN(height)) {
-                console.error("Every element in the virtual scroller must have a fixed height, ignoring element: " + element);
-                element.style.display = "none";
-                return 0;
-            }
-        }
-
-        // Append to document and get height.
-        // Does not require fixed heights but is slow.
-        else {
-            element.rendered = false; // set rendered to false because this will remove the child from this.visible_container when it was rendered.
-            this.height_measurer.appendChild(element);
-            height = element.offsetHeight;
-            this.height_measurer.removeChild(element);
-        }
-
-        // Add margin.
-        const margin_top = parseFloat(element.style.marginTop);
-        if (!isNaN(margin_top)) {
-            height += margin_top;
-        }
-        const margin_bottom = parseFloat(element.style.marginBottom);
-        if (!isNaN(margin_bottom)) {
-            height += margin_bottom;
-        }
-
-        // Handler.
-        return height;
-    }
-
-    // Custom append function.
-    append(...children: any[]): this {
-        for (let i = 0; i < children.length; i++) {
-            const child = children[i];
-            if (child != null) {
-
-                // VWeb element.
-                if (child.element_type != null) {
-                    if (
-                        child.element_type == "ForEach" ||
-                        child.element_type == "If" ||
-                        child.element_type == "IfDeviceWith"
-                    ) {
-                        child.append_children_to(this);
-                    } else {
-                        this._v_children.push(child);
-                    }
-                }
-
-                // Execute function.
-                else if (Utils.is_func(child)) {
-                    this.append(child());
-                }
-
-                // Node element.
-                else if (child instanceof Node) {
-                    this._v_children.push(child);
-                }
-
-                // Append text.
-                else if (Utils.is_string(child)) {
-                    this._v_children.push(document.createTextNode(child));   
-                }
-            }
-        }
-        return this;
-    }
-}
-export const VirtualScroller = Elements.wrapper(VirtualScrollerElement);
-export const NullVirtualScroller = Elements.create_null(VirtualScrollerElement);
-declare module './any_element.d.ts' { interface AnyElementMap { VirtualScrollerElement: VirtualScrollerElement }}
+// @Elements.register
+// export class VirtualScrollerElement extends (ScrollerElement as any as VElementBaseSignature) {
+
+//     public _v_children: any[];
+//     public top_diff: number;
+//     public scroll_top_value: number;
+//     public _last_v_children: number;
+//     public visible_container: VStackElement;
+//     public height_measurer: any;
+
+//     // Constructor.
+//     constructor(...children: AppendType[]) {
+
+//         // Initialize base class.
+//         super();
+//         this._init_derived({ derived: VirtualScrollerElement, })
+
+//         // Virtual children.
+//         this._v_children = [];
+
+//         // Attributes.
+//         this.top_diff = 0;
+//         this.scroll_top_value = 0;
+//         this._last_v_children = 0;
+
+//         // Append children.
+//         this.append(...children);
+
+//         // The visible container with the scroll dimensions and positioned children inside.
+//         this.visible_container = VStack()
+//             .position("relative")
+//             .overflow_x("visible")
+//             .overflow_y("hidden")
+//             .styles({
+//                 "content-visibility": "auto",
+//             })
+//         this.content.append(this.visible_container)
+
+//         // The height measurer.
+//         this.height_measurer = Span()
+//             .visibility("hidden")
+//         this.content.append(this.height_measurer)
+
+//         // Render.
+//         this.render();
+
+//         // Set scroll event listener.
+//         // @todo set_scroll_top_without event wont work with this new scroll event.
+//         this.content.addEventListener("scroll", () => this.render())
+
+//     }
+
+//     // Set default since it inherits HStackElement.
+//     set_default(): this {
+//         return super.set_default(VirtualScrollerElement);
+//     }
+
+//     // Replace overflow.
+//     overflow(): string;
+//     overflow(value: string): this;
+//     overflow(value?: string): string | this {
+//         if (value == null) {
+//             return this.content.overflow();
+//         }
+//         this.content.overflow(value);
+//         this.visible_container.overflow_x(value.split(" ")[0]);
+//         return this;
+//     }
+//     overflow_x(): string;
+//     overflow_x(value: string): this;
+//     overflow_x(value?: string): string | this {
+//         if (value == null) {
+//             return this.content.overflow_x();
+//         }
+//         this.content.overflow_x(value);
+//         this.visible_container.overflow_x(value);
+//         return this;
+//     }
+//     // keep overflow y on this.visible_container always hidden otherwise it may mess with expanding this.content and cause an infinite scroll event.
+
+//     // Set remove children to content.
+//     remove_children(): this {
+//         this._v_children = [];
+//         this.visible_container.min_height(0);
+//         this.visible_container.max_height(0);
+//         this.visible_container.inner_html("");
+//         return this;
+//     }
+
+//     // Render the visible content.
+//     render(): this {
+//         // Do not use a clearTimeout setTimout structure cause that will cause some elements to be appended too late on a very fast sroll.
+
+//         // Get scroll direction.
+//         const last_scroll_top = this.scroll_top_value;
+//         this.scroll_top_value = this.content.scrollTop;
+//         const last_v_children = this._last_v_children;
+//         this._last_v_children = this._v_children.length;
+//         let scrolling_down = true;
+//         if (this.scroll_top_value > last_scroll_top) {
+//             scrolling_down = true;
+//         } else if (this.scroll_top_value < last_scroll_top) {
+//             scrolling_down = false;
+//         }
+//         // Disable forced behaviour because when height edits are made it should also be updated, but this is easily forgotten by the user.
+//         // else if (!forced && this.last_v_children == last_v_children) {
+//         //     return null; // horizontal scroll.
+//         // }
+
+//         // Get the start and end y.
+//         const start_y = this.content.scrollTop;
+//         const end_y = start_y + this.content.offsetHeight + this.top_diff;
+
+//         // Iterate.
+//         let is_first = true;
+//         let is_visible = false; 
+//         let total_height = 0;
+//         let visible_height = 0;
+//         this._v_children.iterate((child) => {
+
+//             // Child vars.
+//             const height = child.v_height !== undefined ? child.v_height : this.get_height(child);
+//             if (height == 0) {
+//                 return null; // no fixed height or no height.
+//             }
+//             const child_start_y = total_height;
+//             const child_end_y = total_height + height; // Adjust as needed
+//             total_height += height;
+
+//             // First item.
+//             if (is_first && child_end_y >= start_y) {
+//                 child.transform(`translateY(${child_start_y}px)`); // also update when still visible but height changes may have been made to an element.
+//                 visible_height += height;
+//                 is_first = false;
+//                 is_visible = true;
+//                 if (!child.rendered) {
+//                     if (scrolling_down) {
+//                         this.visible_container.appendChild(child);
+//                     } else {
+//                         this.visible_container.insertBefore(child, this.visible_container.firstChild);
+//                     }
+//                     child.rendered = true;
+//                 }
+//             }
+
+//             // Last visible element.
+//             else if (is_visible && child_start_y >= end_y) {
+//                 child.transform(`translateY(${child_start_y - visible_height}px)`); // also update when still visible but height changes may have been made to an element.
+//                 visible_height += height;
+//                 is_visible = false;
+//                 if (!child.rendered) {
+//                     if (scrolling_down) {
+//                         this.visible_container.appendChild(child);
+//                     } else {
+//                         this.visible_container.insertBefore(child, this.visible_container.firstChild);
+//                     }
+//                     child.rendered = true;
+//                 }
+//             }
+
+//             // Visible elements.
+//             else if (is_visible) {
+//                 child.transform(`translateY(${child_start_y - visible_height}px)`); // also update when still visible but height changes may have been made to an element.
+//                 visible_height += height;
+//                 if (!child.rendered) {
+//                     if (scrolling_down) {
+//                         this.visible_container.appendChild(child);
+//                     } else {
+//                         this.visible_container.insertBefore(child, this.visible_container.firstChild);
+//                     }
+//                     child.rendered = true;
+//                 }
+//             }
+
+//             // Invisible elements.
+//             else if (child.rendered) {
+//                 child.remove();
+//                 child.rendered = false;
+//             }
+//         })
+
+//         // Set scroll dimension.
+//         this.visible_container.min_height(total_height);
+//         this.visible_container.max_height(total_height);
+
+//         // Return this.
+//         return this;
+//     }
+
+//     // Update heights.
+//     update_heights(): this {
+//         this._v_children.iterate((child) => {
+//             child.v_height = this.get_height(child, false);
+//         })
+//         return this;
+//     }
+
+//     // Update height of a certain child.
+//     update_height(child: any): this {
+//         child.v_height = this.get_height(child, false);
+//         return this;
+//     }
+
+//     // Get the height of an element.
+//     get_height(element, fixed = true): number {
+//         let height;
+
+//         // Get fixed height.
+//         if (fixed) {
+//             height = parseFloat(element.style.height);
+//             if (isNaN(height)) {
+//                 console.error("Every element in the virtual scroller must have a fixed height, ignoring element: " + element);
+//                 element.style.display = "none";
+//                 return 0;
+//             }
+//         }
+
+//         // Append to document and get height.
+//         // Does not require fixed heights but is slow.
+//         else {
+//             element.rendered = false; // set rendered to false because this will remove the child from this.visible_container when it was rendered.
+//             this.height_measurer.appendChild(element);
+//             height = element.offsetHeight;
+//             this.height_measurer.removeChild(element);
+//         }
+
+//         // Add margin.
+//         const margin_top = parseFloat(element.style.marginTop);
+//         if (!isNaN(margin_top)) {
+//             height += margin_top;
+//         }
+//         const margin_bottom = parseFloat(element.style.marginBottom);
+//         if (!isNaN(margin_bottom)) {
+//             height += margin_bottom;
+//         }
+
+//         // Handler.
+//         return height;
+//     }
+
+//     // Custom append function.
+//     append(...children: AppendType[]): this {
+//         for (let i = 0; i < children.length; i++) {
+//             const child = children[i];
+//             if (child != null) {
+
+//                 // VWeb element.
+//                 if (child.element_name != null) {
+//                     if (
+//                         child.element_name == "ForEachElement" ||
+//                         child.element_name == "IfElement" ||
+//                         child.element_name == "IfDeviceWithElement"
+//                     ) {
+//                         child.append_children_to(this);
+//                     } else {
+//                         this._v_children.push(child);
+//                     }
+//                 }
+
+//                 // Execute function.
+//                 else if (Utils.is_func(child)) {
+//                     this.append(child());
+//                 }
+
+//                 // Node element.
+//                 else if (child instanceof Node) {
+//                     this._v_children.push(child);
+//                 }
+
+//                 // Append text.
+//                 else if (Utils.is_string(child)) {
+//                     this._v_children.push(document.createTextNode(child));   
+//                 }
+//             }
+//         }
+//         return this;
+//     }
+// }
+// export const VirtualScroller = Elements.wrapper(VirtualScrollerElement);
+// export const NullVirtualScroller = Elements.create_null(VirtualScrollerElement);
+// declare module './any_element.d.ts' { interface AnyElementMap { VirtualScrollerElement: VirtualScrollerElement }}
 
 /*  @docs:
     @nav: Frontend
@@ -901,13 +903,19 @@ declare module './any_element.d.ts' { interface AnyElementMap { VirtualScrollerE
 
         This class is still experimental.
  */
-@Elements.register
-export class SnapScrollerElement extends VStackElement {
-    constructor(...children: any[]) {
+@Elements.create({
+    name: "SnapScrollerElement",
+})
+export class SnapScrollerElement extends (VStackElement as any as VElementBaseSignature) {
+
+    // Constructor.
+    constructor(...children: VElement[]) {
 
         // Base.
         super();
-        this._init_derived({ derived: SnapScrollerElement, })
+        this._init({
+            derived: SnapScrollerElement,
+        })
 
         // Style.
         this.overflow_y("scroll");
@@ -918,7 +926,8 @@ export class SnapScrollerElement extends VStackElement {
     }
 
     // Append.
-    append(...children: any[]): this {
+    // @ts-ignore base type accepts more input types, this one only accepts velements
+    append(...children: AnyElement[]): this {
         for (let i = 0; i < children.length; i++) {
             const win = children[i];
             if (win == null) { continue; }