diff --git a/static/js/base.js b/static/js/base.js index 6eae6ef..88a6164 100644 --- a/static/js/base.js +++ b/static/js/base.js @@ -112,10 +112,30 @@ const $$ = selector => Array.from(document.querySelector(selector)); }); } - // On DOMContentLoaded, initialize theme toggling and form processing. + /** + * Process all elements with the 'marquee' class. + * For each element, if its content is overflowing (using isElementOverflowing), + * wrap its innerHTML within a tag and remove the 'marquee' class. + */ + function processMarqueeElements() { + document.querySelectorAll('.marquee-calc').forEach(element => { + console.log(element.innerHTML, element.offsetWidth, element.scrollWidth); + if (element.offsetWidth >= 148 || element.offsetWidth < element.scrollWidth) { + element.innerHTML = '' + element.innerHTML + ''; + } + + element.classList.remove('marquee-calc'); + }); + } + + // Expose processMarqueeElements to be available for AJAX-loaded partial updates. + window.processMarqueeElements = processMarqueeElements; + + // On DOMContentLoaded, initialize theme toggling, form processing, and marquee wrapping. document.addEventListener("DOMContentLoaded", () => { initThemeToggle(); initCardMultiselectHandling(); + processMarqueeElements(); }); // On pageshow, only reset multiselect state if the page was loaded from bfcache. diff --git a/theme/templates/account/dashboard.html b/theme/templates/account/dashboard.html index 7f2874e..17841c9 100644 --- a/theme/templates/account/dashboard.html +++ b/theme/templates/account/dashboard.html @@ -203,6 +203,7 @@ .then(html => { this.$el.innerHTML = html; this.init(); + window.processMarqueeElements && window.processMarqueeElements(); }); }, init() { diff --git a/theme/templates/cards/card_detail.html b/theme/templates/cards/card_detail.html index 53c3310..625e05a 100644 --- a/theme/templates/cards/card_detail.html +++ b/theme/templates/cards/card_detail.html @@ -20,7 +20,10 @@ document.activeElement.blur(); fetch(`{% url 'cards:card_trade_offer_have_list' card.pk %}?order=` + this.order + '&page=' + this.page) .then(response => response.text()) - .then(html => { this.$refs.offerList.innerHTML = html; }); + .then(html => { + this.$refs.offerList.innerHTML = html; + window.processMarqueeElements && window.processMarqueeElements(); + }); } }" x-init="loadOffers()" @@ -60,7 +63,10 @@ loadOffers() { fetch(`{% url 'cards:card_trade_offer_want_list' card.pk %}?order=` + this.order + '&page=' + this.page) .then(response => response.text()) - .then(html => { this.$refs.offerList.innerHTML = html; }); + .then(html => { + this.$refs.offerList.innerHTML = html; + window.processMarqueeElements && window.processMarqueeElements(); + }); } }" x-init="loadOffers()" diff --git a/theme/templates/cards/card_list.html b/theme/templates/cards/card_list.html index c9326b0..61ac17a 100644 --- a/theme/templates/cards/card_list.html +++ b/theme/templates/cards/card_list.html @@ -12,7 +12,10 @@ let url = window.location.pathname + '?order=' + this.order + '&group_by=' + groupParam + '&page=' + this.page; fetch(url, { headers: { 'x-requested-with': 'XMLHttpRequest' } }) .then(response => response.text()) - .then(html => { this.$refs.cardList.innerHTML = html; }); + .then(html => { + this.$refs.cardList.innerHTML = html; + window.processMarqueeElements && window.processMarqueeElements(); + }); } }" x-on:change-page.window="page = $event.detail.page; loadCards()"> diff --git a/theme/templates/home/home.html b/theme/templates/home/home.html index 905018f..5097f03 100644 --- a/theme/templates/home/home.html +++ b/theme/templates/home/home.html @@ -92,48 +92,15 @@
Featured Offers
- - - - {% endcache %}
diff --git a/theme/templates/trades/trade_offer_all_list.html b/theme/templates/trades/trade_offer_all_list.html index 42d6b71..cf35a71 100644 --- a/theme/templates/trades/trade_offer_all_list.html +++ b/theme/templates/trades/trade_offer_all_list.html @@ -13,7 +13,10 @@ url.search = params.toString(); fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }}) .then(response => response.text()) - .then(html => { this.$refs.offersContainer.innerHTML = html; }); + .then(html => { + this.$refs.offersContainer.innerHTML = html; + window.processMarqueeElements && window.processMarqueeElements(); + }); } }" x-on:change-page.window="page = $event.detail.page; loadOffers()"> diff --git a/theme/templatetags/card_badge.html b/theme/templatetags/card_badge.html index fb479e1..2be9372 100644 --- a/theme/templatetags/card_badge.html +++ b/theme/templatetags/card_badge.html @@ -1,7 +1,7 @@ {% if not expanded %}
-
{{ name }}
+
{{ name }}
{{ cardset }}
{% if quantity != None %}
{{ quantity }}
{% endif %} @@ -10,10 +10,9 @@ {% else %}
-
{{ name }}
+
{{ name }}
{{ rarity }}
{{ cardset }}
- {% if quantity != None %}
{{ quantity }}
{% endif %}
{% endif %} \ No newline at end of file