From aac4b014b094e64e6e5b33ea044f689df5fbbc5e Mon Sep 17 00:00:00 2001
From: Johannes Loher <johannes.loher@fg4f.de>
Date: Thu, 25 Feb 2021 19:07:25 +0100
Subject: [PATCH] Use BEM for item-list styling and add support for drag & drop
 of items (between sheets and for sorting)

---
 src/ds4.scss                                  |  2 +-
 src/module/actor/sheets/actor-sheet.ts        | 15 ++--
 .../{_items_list.scss => _item_list.scss}     | 84 ++++++++++---------
 .../actor/partials/items-overview.hbs         | 84 +++++++++----------
 .../actor/partials/overview-add-button.hbs    |  2 +-
 .../actor/partials/spells-overview.hbs        | 36 ++++----
 6 files changed, 116 insertions(+), 107 deletions(-)
 rename src/scss/components/{_items_list.scss => _item_list.scss} (70%)

diff --git a/src/ds4.scss b/src/ds4.scss
index 7843d56..0f8aec2 100644
--- a/src/ds4.scss
+++ b/src/ds4.scss
@@ -17,7 +17,7 @@
     @include meta.load-css("scss/components/combat_values");
     @include meta.load-css("scss/components/description");
     @include meta.load-css("scss/components/forms");
-    @include meta.load-css("scss/components/items_list");
+    @include meta.load-css("scss/components/item_list");
     @include meta.load-css("scss/components/tabs");
     @include meta.load-css("scss/components/talents");
 }
diff --git a/src/module/actor/sheets/actor-sheet.ts b/src/module/actor/sheets/actor-sheet.ts
index de9a0e3..aee139f 100644
--- a/src/module/actor/sheets/actor-sheet.ts
+++ b/src/module/actor/sheets/actor-sheet.ts
@@ -58,12 +58,17 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
      * @returns The data fed to the template of the actor sheet
      */
     async getData(): Promise<ActorSheet.Data<DS4Actor>> {
+        const itemsByType = Object.fromEntries(
+            Object.entries(this.actor.itemTypes).map(([itemType, items]) => {
+                return [itemType, items.map((item) => item.data).sort((a, b) => (a.sort || 0) - (b.sort || 0))];
+            }),
+        );
         const data = {
             ...this._addTooltipsToData(await super.getData()),
             // Add the localization config to the data:
             config: DS4,
             // Add the items explicitly sorted by type to the data:
-            itemsByType: this.actor.itemTypes,
+            itemsByType,
         };
         return data;
     }
@@ -98,7 +103,7 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
 
         // Update Inventory Item
         html.find(".item-edit").on("click", (ev) => {
-            const li = $(ev.currentTarget).parents(".item-row");
+            const li = $(ev.currentTarget).parents(".item");
             const id = li.data("itemId");
             const item = this.actor.getOwnedItem(id);
             if (!item) {
@@ -112,7 +117,7 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
 
         // Delete Inventory Item
         html.find(".item-delete").on("click", (ev) => {
-            const li = $(ev.currentTarget).parents(".item-row");
+            const li = $(ev.currentTarget).parents(".item");
             this.actor.deleteOwnedItem(li.data("itemId"));
             li.slideUp(200, () => this.render(false));
         });
@@ -155,7 +160,7 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
     protected _onItemChange(ev: JQuery.ChangeEvent): void {
         ev.preventDefault();
         const el: HTMLFormElement = $(ev.currentTarget).get(0);
-        const id = $(ev.currentTarget).parents(".item-row").data("itemId");
+        const id = $(ev.currentTarget).parents(".item").data("itemId");
         const item = duplicate<DS4Item, "lenient">(this.actor.getOwnedItem(id));
         const property: string | undefined = $(ev.currentTarget).data("property");
 
@@ -224,7 +229,7 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
 
         // unsupported:
         else {
-            throw TypeError("Binding of item property to this type of HTML element not supported; given: " + el);
+            throw new TypeError("Binding of item property to this type of HTML element not supported; given: " + el);
         }
     }
 
diff --git a/src/scss/components/_items_list.scss b/src/scss/components/_item_list.scss
similarity index 70%
rename from src/scss/components/_items_list.scss
rename to src/scss/components/_item_list.scss
index 6706a32..75fcbe3 100644
--- a/src/scss/components/_items_list.scss
+++ b/src/scss/components/_item_list.scss
@@ -1,41 +1,48 @@
 @use "../utils/mixins";
 @use "../utils/variables";
 
-.items-list {
+.ds4-item-list {
     $row-height: 1.75em;
+
     display: grid;
     grid-column-gap: 0.5em;
     grid-row-gap: 0.2em;
     align-items: center;
-    &.weapon {
-        grid-template-columns: $row-height $row-height 3ch 3fr $row-height 1fr 3ch 5fr 4ch;
-    }
-    &.armor {
-        grid-template-columns: $row-height $row-height 3ch 3fr 1fr 1fr 3ch 5fr 4ch;
-    }
-    &.shield {
-        grid-template-columns: $row-height $row-height 3ch 3fr 3ch 5fr 4ch;
-    }
-    &.equipment {
-        grid-template-columns: $row-height $row-height 3ch 3fr 10ch 5fr 4ch;
-    }
-    &.loot {
-        grid-template-columns: $row-height 3ch 3fr 10ch 5fr 4ch;
-    }
-    &.spell {
-        grid-template-columns: $row-height $row-height 2fr $row-height 1fr 1fr 1fr 1fr 4ch;
-    }
 
     margin: 7px 0;
     padding: 0;
     overflow-y: auto;
 
-    .item-row {
-        display: contents;
+    transition: all 0.5s;
 
-        &.item-header {
+    @include mixins.mark-invalid-or-disabled-input;
+
+    &--weapon {
+        grid-template-columns: $row-height $row-height 3ch 3fr $row-height 1fr 3ch 5fr 4ch;
+    }
+    &--armor {
+        grid-template-columns: $row-height $row-height 3ch 3fr 1fr 1fr 3ch 5fr 4ch;
+    }
+    &--shield {
+        grid-template-columns: $row-height $row-height 3ch 3fr 3ch 5fr 4ch;
+    }
+    &--equipment {
+        grid-template-columns: $row-height $row-height 3ch 3fr 10ch 5fr 4ch;
+    }
+    &--loot {
+        grid-template-columns: $row-height 3ch 3fr 10ch 5fr 4ch;
+    }
+    &--spell {
+        grid-template-columns: $row-height $row-height 2fr $row-height 1fr 1fr 1fr 1fr 4ch;
+    }
+
+    &__row {
+        grid-column: 1/-1;
+        display: grid;
+        grid-template-columns: subgrid;
+
+        &--header {
             font-weight: bold;
-            display: contents;
         }
 
         > * {
@@ -43,29 +50,26 @@
             line-height: $row-height;
             white-space: nowrap;
         }
+    }
 
-        .item-image {
-            background-repeat: no-repeat;
-            background-size: 100%;
-            background-position: center;
-        }
-
-        input {
-            border: 0;
-            padding: 0;
-            background-color: transparent;
-        }
-
-        input[type="checkbox"] {
+    &__editable {
+        border: 0;
+        padding: 0;
+        background-color: transparent;
+        &--checkbox {
             width: 100%;
             height: 100%;
             margin: 0px;
         }
-
-        @include mixins.mark-invalid-or-disabled-input;
     }
 
-    .item-description {
+    &__image {
+        background-repeat: no-repeat;
+        background-size: 100%;
+        background-position: center;
+    }
+
+    &__description {
         overflow: hidden;
         text-overflow: ellipsis;
         :not(:first-child) {
@@ -80,7 +84,7 @@
     }
 }
 
-.items-list-title {
+.ds4-item-list-title {
     margin-top: 1em;
     margin-bottom: 0;
     padding-left: 1em;
diff --git a/src/templates/actor/partials/items-overview.hbs b/src/templates/actor/partials/items-overview.hbs
index 704cb49..b5e48e9 100644
--- a/src/templates/actor/partials/items-overview.hbs
+++ b/src/templates/actor/partials/items-overview.hbs
@@ -31,17 +31,17 @@
 !-- @param partial-block: hand over custom children in the partial block.
 --}}
 {{#*inline "itemListHeader" }}
-<li class="item-row item-header">
+<li class="ds4-item-list__row ds4-item-list__row--header">
     {{!-- equipped --}}
     {{#if (ne dataType 'loot')}}
     <div title="{{localize 'DS4.ItemEquipped'}}">{{localize 'DS4.ItemEquippedAbbr'}}</div>
     {{/if}}
     {{!-- image --}}
-    <div class="item-image"></div>
+    <div></div>
     {{!-- amount --}}
-    <div class="item-num-val" title="{{localize 'DS4.Quantity'}}">#</div>
+    <div title="{{localize 'DS4.Quantity'}}">#</div>
     {{!-- name --}}
-    <div class="item-name">{{localize 'DS4.ItemName'}}</div>
+    <div>{{localize 'DS4.ItemName'}}</div>
     {{!-- item type specifics --}}
     {{> @partial-block }}
     {{!-- description --}}
@@ -62,25 +62,25 @@
 !-- @param partial-block: hand over custom children in the partial block.
 --}}
 {{#*inline "itemListEntry"}}
-<li class="item-row" data-item-id="{{item._id}}">
+<li class="ds4-item-list__row item" data-item-id="{{item._id}}">
     {{!-- equipped --}}
-    {{#if (ne item.data.type 'loot')}}
-    <input class="item-change" type="checkbox" {{checked item.data.data.equipped}} data-dtype="Boolean"
-        data-property="data.equipped" title="{{localize 'DS4.ItemEquipped'}}">
+    {{#if (ne item.type 'loot')}}
+    <input class="ds4-item-list__editable ds4-item-list__editable--checkbox" type="checkbox" {{checked
+        item.data.equipped}} data-dtype="Boolean" data-property="data.equipped" title="{{localize 'DS4.ItemEquipped'}}">
     {{/if}}
     {{!-- image --}}
-    <div class="item-image" style="background-image: url('{{item.img}}')" title="{{item.name}}"></div>
+    <div class="ds4-item-list__image" style="background-image: url('{{item.img}}')" title="{{item.name}}"></div>
     {{!-- amount --}}
-    <input class="item-num-val item-change" type="number" min="0" step="1" value="{{item.data.data.quantity}}"
+    <input class="ds4-item-list__editable" type="number" min="0" step="1" value="{{item.data.quantity}}"
         data-dtype="Number" data-property="data.quantity" title="{{localize 'DS4.Quantity'}}" />
     {{!-- name --}}
-    <input class="item-name item-change" type="text" value="{{item.name}}" data-dtype="String" data-property="name"
-        title="{{htmlToPlainText item.data.data.description}}" />
+    <input class="ds4-item-list__editable" type="text" value="{{item.name}}" data-dtype="String" data-property="name"
+        title="{{htmlToPlainText item.data.description}}" />
     {{!-- item type specifics --}}
     {{> @partial-block}}
     {{!-- description --}}
-    <div class="item-description" title="{{htmlToPlainText item.data.data.description}}">
-        {{{item.data.data.description}}}</div>
+    <div class="ds4-item-list__description" title="{{htmlToPlainText item.data.description}}">
+        {{{item.data.description}}}</div>
     {{!-- control buttons --}}
     {{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}
 </li>
@@ -90,51 +90,51 @@
 {{!-- ======================================================================== --}}
 
 {{!-- WEAPONS --}}
-<h4 class="items-list-title">{{localize 'DS4.ItemTypeWeaponPlural'}}</h4>
+<h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeWeaponPlural'}}</h4>
 {{#> ifHasItemOfType itemsArray=itemsByType.weapon dataType='weapon' }}
-<ol class="items-list weapon">
+<ol class="ds4-item-list ds4-item-list--weapon item-list">
     {{#> itemListHeader dataType='weapon'}}
-    <div class="item-image" title="{{localize 'DS4.AttackType'}}">{{localize 'DS4.AttackTypeAbbr'}}</div>
-    <div class="item-num-val" title="{{localize 'DS4.WeaponBonus'}}">
+    <div class="ds4-item-list__image" title="{{localize 'DS4.AttackType'}}">{{localize 'DS4.AttackTypeAbbr'}}</div>
+    <div title="{{localize 'DS4.WeaponBonus'}}">
         {{localize 'DS4.WeaponBonusAbbr'}}
     </div>
-    <div class="item-num-val" title="{{localize 'DS4.OpponentDefense'}}">
+    <div title="{{localize 'DS4.OpponentDefense'}}">
         {{localize 'DS4.OpponentDefenseAbbr'}}
     </div>
     {{/itemListHeader}}
     {{#each itemsByType.weapon as |item id|}}
     {{#> itemListEntry item=item}}
-    <div class="item-image"
-        style="background-image: url('{{lookup ../../config.icons.attackTypes  item.data.data.attackType}}')"
-        title="{{lookup ../../config.i18n.attackTypes  item.data.data.attackType}}">
+    <div class="ds4-item-list__image"
+        style="background-image: url('{{lookup ../../config.icons.attackTypes  item.data.attackType}}')"
+        title="{{lookup ../../config.i18n.attackTypes  item.data.attackType}}">
     </div>
-    <div class="item-num-val">{{ item.data.data.weaponBonus}}</div>
-    <div class="item-num-val">{{ item.data.data.opponentDefense}}</div>
+    <div>{{ item.data.weaponBonus}}</div>
+    <div>{{ item.data.opponentDefense}}</div>
     {{/itemListEntry}}
     {{/each}}
 </ol>
 {{/ifHasItemOfType}}
 
 {{!-- ARMOR --}}
-<h4 class="items-list-title">{{localize 'DS4.ItemTypeArmorPlural'}}</h4>
+<h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeArmorPlural'}}</h4>
 {{#> ifHasItemOfType itemsArray=itemsByType.armor dataType='armor' }}
-<ol class="items-list armor">
+<ol class="ds4-item-list ds4-item-list--armor item-list">
     {{#> itemListHeader dataType='armor'}}
     <div title="{{localize 'DS4.ArmorMaterialType'}}">{{localize 'DS4.ArmorMaterialTypeAbbr'}}</div>
     <div title="{{localize 'DS4.ArmorType'}}">{{localize 'DS4.ArmorTypeAbbr'}}</div>
-    <div class="item-num-val" title="{{localize 'DS4.ArmorValue'}}">
+    <div title="{{localize 'DS4.ArmorValue'}}">
         {{localize 'DS4.ArmorValueAbbr'}}
     </div>
     {{/itemListHeader}}
     {{#each itemsByType.armor as |item id|}}
     {{#> itemListEntry item=item }}
-    <div title="{{lookup ../../config.i18n.armorMaterialTypes  item.data.data.armorMaterialType}}">
-        {{lookup ../../config.i18n.armorMaterialTypesAbbr item.data.data.armorMaterialType}}
+    <div title="{{lookup ../../config.i18n.armorMaterialTypes  item.data.armorMaterialType}}">
+        {{lookup ../../config.i18n.armorMaterialTypesAbbr item.data.armorMaterialType}}
     </div>
-    <div title="{{lookup ../../config.i18n.armorTypes  item.data.data.armorType}}">
-        {{lookup ../../config.i18n.armorTypesAbbr item.data.data.armorType}}
+    <div title="{{lookup ../../config.i18n.armorTypes  item.data.armorType}}">
+        {{lookup ../../config.i18n.armorTypesAbbr item.data.armorType}}
     </div>
-    <div class="item-num-val">{{ item.data.data.armorValue}}</div>
+    <div>{{ item.data.armorValue}}</div>
     {{/itemListEntry}}
     {{/each}}
 </ol>
@@ -142,17 +142,17 @@
 
 
 {{!-- SHIELD --}}
-<h4 class="items-list-title">{{localize 'DS4.ItemTypeShieldPlural'}}</h4>
+<h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeShieldPlural'}}</h4>
 {{#> ifHasItemOfType itemsArray=itemsByType.shield dataType='shield' }}
-<ol class="items-list shield">
+<ol class="ds4-item-list ds4-item-list--shield item-list">
     {{#> itemListHeader dataType='shield' }}
-    <div class="item-num-val" title="{{localize 'DS4.ArmorValue'}}">
+    <div title="{{localize 'DS4.ArmorValue'}}">
         {{localize 'DS4.ArmorValueAbbr'}}
     </div>
     {{/itemListHeader}}
     {{#each itemsByType.shield as |item id|}}
     {{#> itemListEntry item=item }}
-    <div class="item-num-val">{{item.data.data.armorValue}}</div>
+    <div>{{item.data.armorValue}}</div>
     {{/itemListEntry}}
     {{/each}}
 </ol>
@@ -160,15 +160,15 @@
 
 {{!-- EQUIPMENT --}}
 
-<h4 class="items-list-title">{{localize 'DS4.ItemTypeEquipmentPlural'}}</h4>
+<h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeEquipmentPlural'}}</h4>
 {{#> ifHasItemOfType itemsArray=itemsByType.equipment dataType='equipment' }}
-<ol class="items-list equipment">
+<ol class="ds4-item-list ds4-item-list--equipment item-list">
     {{#> itemListHeader dataType='equipment'}}
     <div>{{localize 'DS4.StorageLocation'}}</div>
     {{/itemListHeader}}
     {{#each itemsByType.equipment as |item id|}}
     {{#> itemListEntry item=item }}
-    <input class="item-change" type="text" value="{{item.data.data.storageLocation}}" data-dtype="String"
+    <input class="ds4-item-list__editable" type="text" value="{{item.data.storageLocation}}" data-dtype="String"
         data-property="data.storageLocation" title="{{localize 'DS4.StorageLocation'}}">
     {{/itemListEntry}}
     {{/each}}
@@ -176,15 +176,15 @@
 {{/ifHasItemOfType}}
 
 {{!-- LOOT --}}
-<h4 class="items-list-title">{{localize 'DS4.ItemTypeLootPlural'}}</h4>
+<h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeLootPlural'}}</h4>
 {{#> ifHasItemOfType itemsArray=itemsByType.loot dataType='loot' }}
-<ol class="items-list loot">
+<ol class="ds4-item-list ds4-item-list--loot item-list">
     {{#> itemListHeader dataType='loot'}}
     <div>{{localize 'DS4.StorageLocation'}}</div>
     {{/itemListHeader}}
     {{#each itemsByType.loot as |item id|}}
     {{#> itemListEntry item=item }}
-    <input class="item-change" type="text" value="{{item.data.data.storageLocation}}" data-dtype="String"
+    <input class="ds4-item-list__editable" type="text" value="{{item.data.storageLocation}}" data-dtype="String"
         data-property="data.storageLocation" title="{{localize 'DS4.StorageLocation'}}">
     {{/itemListEntry}}
     {{/each}}
diff --git a/src/templates/actor/partials/overview-add-button.hbs b/src/templates/actor/partials/overview-add-button.hbs
index 86e5d77..c0e7d18 100644
--- a/src/templates/actor/partials/overview-add-button.hbs
+++ b/src/templates/actor/partials/overview-add-button.hbs
@@ -8,4 +8,4 @@
         <i class="fas fa-plus"></i>
         {{localize "DS4.UserInteractionAddItem"}}
     </a>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/templates/actor/partials/spells-overview.hbs b/src/templates/actor/partials/spells-overview.hbs
index e10b34d..bb97076 100644
--- a/src/templates/actor/partials/spells-overview.hbs
+++ b/src/templates/actor/partials/spells-overview.hbs
@@ -10,7 +10,7 @@
 !-- @param unitAbbrs: mapping of allowed unitDatum.unit values to unit abbreviation
 --}}
 {{#*inline "unit"}}
-<div class="unit-data-pair item-num-val" title="{{localize localizationString}} [{{lookup unitNames unitDatum.unit}}]">
+<div title="{{localize localizationString}} [{{lookup unitNames unitDatum.unit}}]">
     {{#if unitDatum.value }}
     {{unitDatum.value}}&thinsp;{{lookup unitAbbrs unitDatum.unit}}
     {{else}}-{{/if}}
@@ -36,44 +36,44 @@ localizationString=localizationString}}
 
 
 <div class="tab spells" data-group="primary" data-tab="spells">
-    <ol class="items-list spell">
-        <li class="item-row item-header">
+    <ol class="ds4-item-list ds4-item-list--spell item-list">
+        <li class="ds4-item-list__row ds4-item-list__row--header">
             {{!-- equipped --}}
             <div title="{{localize 'DS4.ItemEquipped'}}">{{localize 'DS4.ItemEquippedAbbr'}}</div>
             {{!-- image --}}
-            <div class="item-image"></div>
+            <div></div>
             {{!-- name --}}
-            <div class="item-name">{{localize 'DS4.ItemName'}}</div>
+            <div>{{localize 'DS4.ItemName'}}</div>
             {{!-- spell type --}}
-            <div class="item-image" title="{{localize 'DS4.SpellType'}}">{{localize 'DS4.SpellTypeAbbr'}}</div>
+            <div title="{{localize 'DS4.SpellType'}}">{{localize 'DS4.SpellTypeAbbr'}}</div>
             {{!-- spell bonus --}}
-            <div class="item-num-val" title="{{localize 'DS4.SpellBonus'}}">{{localize 'DS4.SpellBonusAbbr'}}</div>
+            <div title="{{localize 'DS4.SpellBonus'}}">{{localize 'DS4.SpellBonusAbbr'}}</div>
             {{!-- max. distance --}}
-            <div class="item-num-val" title="{{localize 'DS4.SpellMaxDistance'}}"><i class="fas fa-ruler"></i></div>
+            <div title="{{localize 'DS4.SpellMaxDistance'}}"><i class="fas fa-ruler"></i></div>
             {{!-- duration --}}
-            <div class="item-num-val" title="{{localize 'DS4.SpellDuration'}}"><i class="far fa-clock"></i></div>
+            <div title="{{localize 'DS4.SpellDuration'}}"><i class="far fa-clock"></i></div>
             {{!-- cooldown duration --}}
-            <div class="item-num-val" title="{{localize 'DS4.SpellCooldownDuration'}}"><i
-                    class="fas fa-hourglass-half"></i></div>
+            <div title="{{localize 'DS4.SpellCooldownDuration'}}"><i class="fas fa-hourglass-half"></i></div>
             {{!-- control buttons placeholder --}}
             <div></div>
         </li>
         {{#each itemsByType.spell as |item id|}}
-        <li class="item-row" data-item-id="{{item._id}}">
-            <input class="item-change" type="checkbox" {{checked item.data.data.equipped}} data-dtype="Boolean"
-                data-property="data.equipped" title="{{localize 'DS4.ItemEquipped'}}">
+        <li class="ds4-item-list__row item" data-item-id="{{item._id}}">
+            <input class="ds4-item-list__editable ds4-item-list__editable--checkbox" type="checkbox" {{checked
+                item.data.data.equipped}} data-dtype="Boolean" data-property="data.equipped"
+                title="{{localize 'DS4.ItemEquipped'}}">
             {{!-- image --}}
-            <div class="item-image" style="background-image: url('{{item.img}}')" title="{{item.name}}"></div>
+            <div class="ds4-item-list__image" style="background-image: url('{{item.img}}')" title="{{item.name}}"></div>
             {{!-- name --}}
-            <input class="item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
+            <input class="ds4-item-list__editable" type="text" value="{{item.name}}" data-dtype="String"
                 data-property="name" title="{{htmlToPlainText item.data.data.description}}" />
             {{!-- spell type --}}
-            <div class="item-image"
+            <div class="ds4-item-list__image"
                 style="background-image: url('{{lookup ../config.icons.spellTypes item.data.data.spellType}}')"
                 title="{{lookup ../config.i18n.spellTypes item.data.data.spellType}}">
             </div>
             {{!-- spell bonus --}}
-            <input class="item-num-val item-change" type="text" data-dtype="String" data-property="data.bonus"
+            <input class="ds4-item-list__editable" type="text" data-dtype="String" data-property="data.bonus"
                 value="{{item.data.data.bonus}}" title="{{localize 'DS4.SpellBonus'}}" />
             {{!-- max. distance --}}
             {{> distanceUnit localizationString='DS4.SpellMaxDistance' unitDatum=item.data.data.maxDistance