django-spire 0.22.4__py3-none-any.whl → 0.23.0__py3-none-any.whl

django_spire/core/templates/django_spire/infinite_scroll/scroll.html

@@ -0,0 +1,152 @@
+<div
+    x-data="{
+        batch_size: 25,
+        current_page: 0,
+        endpoint: '',
+        has_next: true,
+        scroll_id: null,
+        total_count: 0,
+
+        is_loading: false,
+        loaded_count: 0,
+        loading_timer: null,
+        observer: null,
+        show_loading: false,
+
+        async init() {
+            this.scroll_id = $id('scroll');
+            this.endpoint = this.$el.dataset.endpoint || '';
+            this.batch_size = parseInt(this.$el.dataset.batchSize || '25');
+
+            await this.$nextTick();
+
+            if (this.$refs.scroll_container) {
+                this.$refs.scroll_container.scrollTop = 0;
+            }
+
+            await this.load_more();
+
+            if (this.has_next) {
+                setTimeout(() => this.setup_observer(), 500);
+            }
+        },
+
+        handle_item_mounted(event) {
+            if (event.detail.scroll_id && event.detail.scroll_id !== this.scroll_id) {
+                return;
+            }
+            this.loaded_count++;
+        },
+
+        handle_total_count_updated(event) {
+            if (event.detail.scroll_id && event.detail.scroll_id !== this.scroll_id) {
+                return;
+            }
+
+            this.total_count = event.detail.total_count;
+
+            if (event.detail.batch_size) {
+                this.batch_size = event.detail.batch_size;
+            }
+        },
+
+        async load_more() {
+            if (!this.endpoint || this.is_loading) {
+                return;
+            }
+
+            this.is_loading = true;
+
+            this.loading_timer = setTimeout(() => {
+                this.show_loading = true;
+            }, 200);
+
+            let params = new URLSearchParams({
+                page: this.current_page + 1,
+                batch_size: this.batch_size
+            });
+
+            let url = `${this.endpoint}?${params}`;
+            let view = new ViewGlue(url, {});
+
+            let previous_count = this.loaded_count;
+
+            await view.render_insert_adjacent(this.$refs.content_container, {}, 'beforeend');
+
+            let added = this.loaded_count - previous_count;
+
+            if (added > 0) {
+                this.current_page++;
+            }
+
+            if (added < this.batch_size) {
+                this.has_next = false;
+                if (this.observer) {
+                    this.observer.disconnect();
+                }
+            }
+
+            if (this.loading_timer) {
+                clearTimeout(this.loading_timer);
+                this.loading_timer = null;
+            }
+            this.is_loading = false;
+            this.show_loading = false;
+        },
+
+        setup_observer() {
+            let trigger = this.$refs.infinite_scroll_trigger;
+
+            if (!trigger) {
+                return;
+            }
+
+            this.observer = new IntersectionObserver(
+                (entries) => {
+                    entries.forEach(async entry => {
+                        if (entry.isIntersecting && this.has_next && !this.is_loading) {
+                            await this.load_more();
+                        }
+                    });
+                },
+                { root: null, rootMargin: '200px', threshold: 0.01 }
+            );
+
+            this.observer.observe(trigger);
+        },
+    }"
+    data-batch-size="{{ batch_size|default:25 }}"
+    data-endpoint="{{ endpoint }}"
+    :data-scroll-id="scroll_id"
+    @item-mounted.window="handle_item_mounted($event)"
+    @total-count-updated.window="handle_total_count_updated($event)"
+>
+    <div class="position-relative" style="height: {{ scroll_height|default:'300px' }};">
+        <div
+            class="h-100"
+            style="overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;"
+            x-ref="scroll_container"
+        >
+            <div x-ref="content_container"></div>
+
+            <div style="height: 10px;" x-ref="infinite_scroll_trigger"></div>
+        </div>
+
+        <template x-if="show_loading">
+            <div
+                class="position-absolute d-flex justify-content-center align-items-center"
+                style="top: 0; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--app-layer-one) 85%, transparent);"
+            >
+                <div class="spinner-border text-app-primary" role="status"></div>
+            </div>
+        </template>
+    </div>
+
+    <div class="row mt-3">
+        <div class="col text-start">
+            <span class="fs-7 text-app-secondary">
+                Showing <span x-text="loaded_count"></span> of <span x-text="total_count"></span> items
+            </span>
+        </div>
+    </div>
+</div>

django_spire/core/templates/django_spire/item/infinite_scroll_item.html

@@ -0,0 +1,33 @@
+{% if forloop.first %}
+    <div
+        x-data="{
+            init() {
+                let scroll_container = this.$el.closest('[data-scroll-id]');
+                let scroll_id = scroll_container ? scroll_container.dataset.scrollId : null;
+
+                this.$dispatch('total-count-updated', {
+                    batch_size: {{ batch_size|default:25 }},
+                    scroll_id: scroll_id,
+                    total_count: {{ total_count|default:0 }}
+                });
+            }
+        }"
+    ></div>
+{% endif %}
+
+<div
+    class="border-bottom mb-3 pb-3 {% block item_class %}{% endblock %}"
+    x-data="{
+        init() {
+            let scroll_container = this.$el.closest('[data-scroll-id]');
+            let scroll_id = scroll_container ? scroll_container.dataset.scrollId : null;
+
+            this.$dispatch('item-mounted', {
+                item_element: this.$el,
+                scroll_id: scroll_id
+            });
+        }
+    }"
+>
+    {% block item_content %}{% endblock %}
+</div>

django_spire/core/templates/django_spire/lazy_tab/element/lazy_tab_section_element.html

@@ -0,0 +1,19 @@
+<section
+    role="tabpanel"
+    x-cloak
+    x-init="$dispatch('register-section', { el: $el })"
+    x-show="is_section_selected($el)"
+>
+    <div x-ref="content">
+        {% block lazy_tab_section_loading %}
+            <div
+                class="align-items-center d-flex justify-content-center py-5"
+                x-show="is_section_loading($el)"
+            >
+                <div class="spinner-border text-app-primary" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            </div>
+        {% endblock %}
+    </div>
+</section>

django_spire/core/templates/django_spire/lazy_tab/element/lazy_tab_trigger_element.html

@@ -0,0 +1,15 @@
+<li>
+    <button
+        @click="select($el)"
+        @focus="select($el)"
+        :aria-selected="is_trigger_selected($el)"
+        class="bg-transparent h-100 mb-1 position-relative px-3"
+        :class="is_trigger_selected($el) ? 'tab-item text-app-default-link-color' : 'text-app-secondary'"
+        role="tab"
+        style="border: none;"
+        type="button"
+        x-init="$dispatch('register-trigger', { el: $el, endpoint: '{{ endpoint|default:'' }}' })"
+    >
+        {{ trigger_title }}
+    </button>
+</li>

django_spire/core/templates/django_spire/lazy_tab/lazy_tab.html

@@ -0,0 +1,157 @@
+<div
+    x-data="{
+        loaded_tabs: new Set(),
+        loading_tabs: new Set(),
+        sections: [],
+        selected_tab: 1,
+        tab_id: '{{ tab_id|default:'' }}',
+        triggers: [],
+        use_url_params: {{ tab_id|yesno:'true,false' }},
+
+        init() {
+            if (!this.tab_id) {
+                this.tab_id = this.$id('lazy-tab');
+            }
+
+            if (this.use_url_params) {
+                let url_tab = this.get_url_param();
+
+                if (url_tab) {
+                    this.selected_tab = url_tab;
+                }
+            }
+        },
+
+        register_trigger(detail) {
+            this.triggers.push({
+                el: detail.el,
+                endpoint: detail.endpoint || null
+            });
+        },
+
+        register_section(detail) {
+            this.sections.push({
+                el: detail.el,
+                content_el: detail.el.firstElementChild
+            });
+
+            if (this.triggers.length === this.sections.length && !this.is_loaded(this.selected_tab)) {
+                this.$nextTick(() => this.load_tab_content(this.selected_tab));
+            }
+        },
+
+        select(el) {
+            let tab_number = this.get_trigger_index(el);
+            this.selected_tab = tab_number;
+
+            if (this.use_url_params) {
+                this.update_url(tab_number);
+            }
+
+            this.load_tab_content(tab_number);
+
+            this.$dispatch('tab-changed', {
+                tab_id: this.tab_id,
+                tab_number: tab_number
+            });
+        },
+
+        get_trigger_index(el) {
+            let index = this.triggers.findIndex(t => t.el === el);
+            return index + 1;
+        },
+
+        get_section_index(el) {
+            let index = this.sections.findIndex(s => s.el === el);
+            return index + 1;
+        },
+
+        is_trigger_selected(el) {
+            return this.selected_tab === this.get_trigger_index(el);
+        },
+
+        is_section_selected(el) {
+            return this.selected_tab === this.get_section_index(el);
+        },
+
+        is_loaded(tab_number) {
+            return this.loaded_tabs.has(tab_number);
+        },
+
+        is_loading(tab_number) {
+            return this.loading_tabs.has(tab_number);
+        },
+
+        is_section_loading(el) {
+            return this.loading_tabs.has(this.get_section_index(el));
+        },
+
+        async load_tab_content(tab_number) {
+            if (this.is_loaded(tab_number) || this.is_loading(tab_number)) {
+                return;
+            }
+
+            let trigger = this.triggers[tab_number - 1];
+            let section = this.sections[tab_number - 1];
+
+            if (!trigger || !trigger.endpoint || !section) {
+                this.loaded_tabs.add(tab_number);
+                return;
+            }
+
+            this.loading_tabs.add(tab_number);
+
+            toggle_loading_overlay();
+
+            let view = new ViewGlue(trigger.endpoint);
+            await view.render_inner(section.content_el);
+
+            this.loading_tabs.delete(tab_number);
+            this.loaded_tabs.add(tab_number);
+
+            toggle_loading_overlay();
+        },
+
+        get_url_param() {
+            let url = new URL(window.location);
+            let value = url.searchParams.get(this.tab_id);
+            let parsed = parseInt(value, 10);
+
+            if (!isNaN(parsed) && parsed > 0) {
+                return parsed;
+            }
+
+            return null;
+        },
+
+        update_url(tab_number) {
+            let url = new URL(window.location);
+            url.searchParams.set(this.tab_id, tab_number);
+            window.history.replaceState({}, '', url);
+        }
+    }"
+    @register-section="register_section($event.detail)"
+    @register-trigger="register_trigger($event.detail)"
+>
+    <ul
+        @keydown.end.prevent.stop="$focus.last()"
+        @keydown.home.prevent.stop="$focus.first()"
+        @keydown.left.prevent.stop="$focus.wrap().prev()"
+        @keydown.page-down.prevent.stop="$focus.last()"
+        @keydown.page-up.prevent.stop="$focus.first()"
+        @keydown.right.prevent.stop="$focus.wrap().next()"
+        class="border-1 border-bottom d-flex list-unstyled"
+        role="tablist"
+    >
+        {% block tab_trigger %}
+        {% endblock %}
+    </ul>
+
+    {% block tab_function %}
+    {% endblock %}
+
+    <div>
+        {% block tab_section %}
+        {% endblock %}
+    </div>
+</div>

django_spire/core/templates/django_spire/page/infinite_scroll_list_page.html

@@ -0,0 +1,7 @@
+{% extends 'django_spire/page/full_page.html' %}
+
+{% block full_page_content %}
+    {% block infinite_scroll_container %}
+        {% include 'django_spire/container/infinite_scroll_container.html' %}
+    {% endblock %}
+{% endblock %}