Merge branch 'dev' into 'dev'

Smaller bug fixes to compendium and minor feature for multiselect

See merge request teaml5r/l5r5e!36

system/scripts/hooks.js

@@ -276,9 +276,10 @@ export default class HooksL5r5e {
             const unofficialContent = game.settings.get(CONFIG.l5r5e.namespace, "compendium-unofficial-content-for-players");
             const unavailableSourceForPlayers = game.settings.get(CONFIG.l5r5e.namespace, "all-compendium-references")
             .filter((element) => {
-                return CONFIG.l5r5e.sourceReference[element]
+                if(CONFIG.l5r5e.sourceReference[element]) {
-                    ? !officialContent.includes(element)
+                    return officialContent.length > 0 ? !officialContent.includes(element) : false;
-                    : unofficialContent.includes(element);
+                }
+                return unofficialContent.length > 0 ? !unofficialContent.includes(element) : false;
             });
 
             // Create the function that will hide/show elements based on various factors
@@ -442,17 +443,18 @@ export default class HooksL5r5e {
 
                 // If gm add a extra button to easily filter the content to see the same stuff as a player
                 if(game.user.isGM) {
-                    const buttonHTML = `<button type="button" class="gm" data-tooltip="${game.i18n.localize('l5r5e.multiselect.player_filter_tooltip')}">`
+                    if(unavailableSourceForPlayers.length > 0) {
+                        const buttonHTML = `<button type="button" class="gm" data-tooltip="${game.i18n.localize('l5r5e.multiselect.player_filter_tooltip')}">`
                         + game.i18n.localize('l5r5e.multiselect.player_filter_label')
                         + '</button>'
 
-                    $(buttonHTML).appendTo($(header).find("l5r5e-multi-select")).click(function() {
+                        const filterPlayerView = game.settings.get(CONFIG.l5r5e.namespace, "all-compendium-references")
-                        const filter = game.settings.get(CONFIG.l5r5e.namespace, "all-compendium-references").filter((reference) => {
+                            .filter((item) => !unavailableSourceForPlayers.includes(item))
-                            return !unavailableSourceForPlayers.includes(reference);
+                            .filter((item) => sources_in_this_compendium.has(item));
-                        })
+                        $(buttonHTML).appendTo($(header).find("l5r5e-multi-select")).click(function() {
-
+                            header.find("l5r5e-multi-select")[0].value = filterPlayerView;
-                        header.find("l5r5e-multi-select")[0].value = filter.filter((element) => element !== "");
+                        });
-                    });
+                    }
                 }
             }
 

system/scripts/items/base-item-sheet.js

@@ -74,7 +74,7 @@ export class BaseItemSheetL5r5e extends ItemSheet {
      */
     async _updateObject(event, formData) {
         // If we have an official source then store the id instead
-        if(event.currentTarget?.name === "system.source_reference.source") {
+        if(event.type == 'submit' || event.currentTarget?.name === "system.source_reference.source") {
             Object.entries(CONFIG.l5r5e.sourceReference).forEach(([id, value]) => {
                 if(game.i18n.localize(value.label) === formData["system.source_reference.source"]) {
                     formData["system.source_reference.source"] = id;

system/scripts/misc/l5r5e-multiselect.js

@@ -103,6 +103,19 @@ export class L5r5eHtmlMultiSelectElement extends AbstractMultiSelectElement {
         });
         this.#tags.replaceChildren(...tags);
 
+        // Figure out if we are overflowing the tag div.
+        if($(this.#tags).css("max-height")) {
+            const numericMaxHeight = parseInt($(this.#tags).css("max-height"), 10);
+            if(numericMaxHeight) {
+                if($(this.#tags).prop("scrollHeight") > numericMaxHeight) {
+                    this.#tags.classList.add("overflowing");
+                }
+                else {
+                    this.#tags.classList.remove("overflowing");
+                }
+            }
+        }
+
         // Disable selected options
         for (const option of this.#select) {
             if (this._value.has(option.value)) {
@@ -126,6 +139,22 @@ export class L5r5eHtmlMultiSelectElement extends AbstractMultiSelectElement {
         this.#select.addEventListener("change", this.#onChangeSelect.bind(this));
         this.#clearAll.addEventListener("click", this.#onClickClearAll.bind(this));
         this.#tags.addEventListener("click", this.#onClickTag.bind(this));
+
+        this.#tags.addEventListener("mouseleave", this.#onMouseLeave.bind(this));
+    }
+
+    #onMouseLeave(event) {
+        // Figure out if we are overflowing the tag div.
+        if($(this.#tags).css("max-height")) {
+            const numericMaxHeight = parseInt($(this.#tags).css("max-height"), 10);
+
+            if($(this.#tags).prop("scrollHeight") > numericMaxHeight) {
+                this.#tags.classList.add("overflowing");
+            }
+            else {
+                this.#tags.classList.remove("overflowing");
+            }
+        }
     }
 
     /* -------------------------------------------- */

system/styles/scss/ui.scss

@@ -726,6 +726,9 @@ button {
         select {
             background: rgba(255, 255, 245, 0.8); // same as the header-search in compendium popout
         }
+        .input-element-tags {
+            max-height: 100px;
+        }
     }
 }
 
@@ -990,6 +993,21 @@ l5r5e-multi-select {
     .input-element-tags {
         grid-column-start: 1;
         grid-column-end: span 3;
+
+        max-height: fit-content; // use value in px to limit the initial size of the tags list, but expandable when hovering over
+        overflow: hidden;
+
+        &.overflowing {
+            // Apply mask-image with linear gradient fade-out effect
+            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
+        
+            // Transition for smooth height change and mask removal
+            transition: height 0.3s ease, mask-image 0.3s ease;
+        }
+        &.overflowing:hover {
+            max-height: fit-content;
+            mask-image: none;
+        }
     }
     select {
         grid-row: 1;