dungeonslayers/ds4
dungeonslayers/ds4
3
0
Fork 0
Code Issues 9 Pull requests 7 Projects Releases 10 Packages 1 Activity

Use BEM for item-list styling and add support for drag & drop of items (between sheets and for sorting)

Browse source
This commit is contained in:
Johannes Loher 2021-02-25 19:07:25 +01:00
parent 226156f960
commit aac4b014b0
6 changed files with 116 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/ds4.scss
View file

@ -17,7 +17,7 @@
@include meta.load-css("scss/components/combat_values"); @include meta.load-css("scss/components/combat_values");
@include meta.load-css("scss/components/description"); @include meta.load-css("scss/components/description");
@include meta.load-css("scss/components/forms"); @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/tabs");
@include meta.load-css("scss/components/talents"); @include meta.load-css("scss/components/talents");
} }

15
src/module/actor/sheets/actor-sheet.ts
View file

@ -58,12 +58,17 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
* @returns The data fed to the template of the actor sheet * @returns The data fed to the template of the actor sheet
*/ */
async getData(): Promise<ActorSheet.Data<DS4Actor>> { 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 = { const data = {
...this._addTooltipsToData(await super.getData()), ...this._addTooltipsToData(await super.getData()),
// Add the localization config to the data: // Add the localization config to the data:
config: DS4, config: DS4,
// Add the items explicitly sorted by type to the data: // Add the items explicitly sorted by type to the data:
itemsByType: this.actor.itemTypes, itemsByType,
}; };
return data; return data;
} }
@ -98,7 +103,7 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
// Update Inventory Item // Update Inventory Item
html.find(".item-edit").on("click", (ev) => { 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 id = li.data("itemId");
const item = this.actor.getOwnedItem(id); const item = this.actor.getOwnedItem(id);
if (!item) { if (!item) {
@ -112,7 +117,7 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
// Delete Inventory Item // Delete Inventory Item
html.find(".item-delete").on("click", (ev) => { 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")); this.actor.deleteOwnedItem(li.data("itemId"));
li.slideUp(200, () => this.render(false)); li.slideUp(200, () => this.render(false));
}); });
@ -155,7 +160,7 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
protected _onItemChange(ev: JQuery.ChangeEvent): void { protected _onItemChange(ev: JQuery.ChangeEvent): void {
ev.preventDefault(); ev.preventDefault();
const el: HTMLFormElement = $(ev.currentTarget).get(0); 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 item = duplicate<DS4Item, "lenient">(this.actor.getOwnedItem(id));
const property: string | undefined = $(ev.currentTarget).data("property"); const property: string | undefined = $(ev.currentTarget).data("property");
@ -224,7 +229,7 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
// unsupported: // unsupported:
else { 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);
} }
} }

84
src/scss/components/_items_list.scss → src/scss/components/_item_list.scss
View file

@ -1,41 +1,48 @@
@use "../utils/mixins"; @use "../utils/mixins";
@use "../utils/variables"; @use "../utils/variables";
.items-list { .ds4-item-list {
$row-height: 1.75em; $row-height: 1.75em;
display: grid; display: grid;
grid-column-gap: 0.5em; grid-column-gap: 0.5em;
grid-row-gap: 0.2em; grid-row-gap: 0.2em;
align-items: center; 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; margin: 7px 0;
padding: 0; padding: 0;
overflow-y: auto; overflow-y: auto;
.item-row { transition: all 0.5s;
display: contents;
&.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; font-weight: bold;
display: contents;
} }
> * { > * {
@ -43,29 +50,26 @@
line-height: $row-height; line-height: $row-height;
white-space: nowrap; white-space: nowrap;
} }
}
.item-image { &__editable {
background-repeat: no-repeat; border: 0;
background-size: 100%; padding: 0;
background-position: center; background-color: transparent;
} &--checkbox {
input {
border: 0;
padding: 0;
background-color: transparent;
}
input[type="checkbox"] {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0px; 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; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
:not(:first-child) { :not(:first-child) {
@ -80,7 +84,7 @@
} }
} }
.items-list-title { .ds4-item-list-title {
margin-top: 1em; margin-top: 1em;
margin-bottom: 0; margin-bottom: 0;
padding-left: 1em; padding-left: 1em;

84
src/templates/actor/partials/items-overview.hbs
View file

@ -31,17 +31,17 @@
!-- @param partial-block: hand over custom children in the partial block. !-- @param partial-block: hand over custom children in the partial block.
--}} --}}
{{#*inline "itemListHeader" }} {{#*inline "itemListHeader" }}
<li class="item-row item-header"> <li class="ds4-item-list__row ds4-item-list__row--header">
{{!-- equipped --}} {{!-- equipped --}}
{{#if (ne dataType 'loot')}} {{#if (ne dataType 'loot')}}
<div title="{{localize 'DS4.ItemEquipped'}}">{{localize 'DS4.ItemEquippedAbbr'}}</div> <div title="{{localize 'DS4.ItemEquipped'}}">{{localize 'DS4.ItemEquippedAbbr'}}</div>
{{/if}} {{/if}}
{{!-- image --}} {{!-- image --}}
<div class="item-image"></div> <div></div>
{{!-- amount --}} {{!-- amount --}}
<div class="item-num-val" title="{{localize 'DS4.Quantity'}}">#</div> <div title="{{localize 'DS4.Quantity'}}">#</div>
{{!-- name --}} {{!-- name --}}
<div class="item-name">{{localize 'DS4.ItemName'}}</div> <div>{{localize 'DS4.ItemName'}}</div>
{{!-- item type specifics --}} {{!-- item type specifics --}}
{{> @partial-block }} {{> @partial-block }}
{{!-- description --}} {{!-- description --}}
@ -62,25 +62,25 @@
!-- @param partial-block: hand over custom children in the partial block. !-- @param partial-block: hand over custom children in the partial block.
--}} --}}
{{#*inline "itemListEntry"}} {{#*inline "itemListEntry"}}
<li class="item-row" data-item-id="{{item._id}}"> <li class="ds4-item-list__row item" data-item-id="{{item._id}}">
{{!-- equipped --}} {{!-- equipped --}}
{{#if (ne item.data.type 'loot')}} {{#if (ne item.type 'loot')}}
<input class="item-change" type="checkbox" {{checked item.data.data.equipped}} data-dtype="Boolean" <input class="ds4-item-list__editable ds4-item-list__editable--checkbox" type="checkbox" {{checked
data-property="data.equipped" title="{{localize 'DS4.ItemEquipped'}}"> item.data.equipped}} data-dtype="Boolean" data-property="data.equipped" title="{{localize 'DS4.ItemEquipped'}}">
{{/if}} {{/if}}
{{!-- image --}} {{!-- 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 --}} {{!-- 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'}}" /> data-dtype="Number" data-property="data.quantity" title="{{localize 'DS4.Quantity'}}" />
{{!-- name --}} {{!-- name --}}
<input class="item-name item-change" type="text" value="{{item.name}}" data-dtype="String" data-property="name" <input class="ds4-item-list__editable" type="text" value="{{item.name}}" data-dtype="String" data-property="name"
title="{{htmlToPlainText item.data.data.description}}" /> title="{{htmlToPlainText item.data.description}}" />
{{!-- item type specifics --}} {{!-- item type specifics --}}
{{> @partial-block}} {{> @partial-block}}
{{!-- description --}} {{!-- description --}}
<div class="item-description" title="{{htmlToPlainText item.data.data.description}}"> <div class="ds4-item-list__description" title="{{htmlToPlainText item.data.description}}">
{{{item.data.data.description}}}</div> {{{item.data.description}}}</div>
{{!-- control buttons --}} {{!-- control buttons --}}
{{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }} {{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}
</li> </li>
@ -90,51 +90,51 @@
{{!-- ======================================================================== --}} {{!-- ======================================================================== --}}
{{!-- WEAPONS --}} {{!-- 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' }} {{#> 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'}} {{#> itemListHeader dataType='weapon'}}
<div class="item-image" title="{{localize 'DS4.AttackType'}}">{{localize 'DS4.AttackTypeAbbr'}}</div> <div class="ds4-item-list__image" title="{{localize 'DS4.AttackType'}}">{{localize 'DS4.AttackTypeAbbr'}}</div>
<div class="item-num-val" title="{{localize 'DS4.WeaponBonus'}}"> <div title="{{localize 'DS4.WeaponBonus'}}">
{{localize 'DS4.WeaponBonusAbbr'}} {{localize 'DS4.WeaponBonusAbbr'}}
</div> </div>
<div class="item-num-val" title="{{localize 'DS4.OpponentDefense'}}"> <div title="{{localize 'DS4.OpponentDefense'}}">
{{localize 'DS4.OpponentDefenseAbbr'}} {{localize 'DS4.OpponentDefenseAbbr'}}
</div> </div>
{{/itemListHeader}} {{/itemListHeader}}
{{#each itemsByType.weapon as |item id|}} {{#each itemsByType.weapon as |item id|}}
{{#> itemListEntry item=item}} {{#> itemListEntry item=item}}
<div class="item-image" <div class="ds4-item-list__image"
style="background-image: url('{{lookup ../../config.icons.attackTypes item.data.data.attackType}}')" style="background-image: url('{{lookup ../../config.icons.attackTypes item.data.attackType}}')"
title="{{lookup ../../config.i18n.attackTypes item.data.data.attackType}}"> title="{{lookup ../../config.i18n.attackTypes item.data.attackType}}">
</div> </div>
<div class="item-num-val">{{ item.data.data.weaponBonus}}</div> <div>{{ item.data.weaponBonus}}</div>
<div class="item-num-val">{{ item.data.data.opponentDefense}}</div> <div>{{ item.data.opponentDefense}}</div>
{{/itemListEntry}} {{/itemListEntry}}
{{/each}} {{/each}}
</ol> </ol>
{{/ifHasItemOfType}} {{/ifHasItemOfType}}
{{!-- ARMOR --}} {{!-- 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' }} {{#> 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'}} {{#> itemListHeader dataType='armor'}}
<div title="{{localize 'DS4.ArmorMaterialType'}}">{{localize 'DS4.ArmorMaterialTypeAbbr'}}</div> <div title="{{localize 'DS4.ArmorMaterialType'}}">{{localize 'DS4.ArmorMaterialTypeAbbr'}}</div>
<div title="{{localize 'DS4.ArmorType'}}">{{localize 'DS4.ArmorTypeAbbr'}}</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'}} {{localize 'DS4.ArmorValueAbbr'}}
</div> </div>
{{/itemListHeader}} {{/itemListHeader}}
{{#each itemsByType.armor as |item id|}} {{#each itemsByType.armor as |item id|}}
{{#> itemListEntry item=item }} {{#> itemListEntry item=item }}
<div title="{{lookup ../../config.i18n.armorMaterialTypes item.data.data.armorMaterialType}}"> <div title="{{lookup ../../config.i18n.armorMaterialTypes item.data.armorMaterialType}}">
{{lookup ../../config.i18n.armorMaterialTypesAbbr item.data.data.armorMaterialType}} {{lookup ../../config.i18n.armorMaterialTypesAbbr item.data.armorMaterialType}}
</div> </div>
<div title="{{lookup ../../config.i18n.armorTypes item.data.data.armorType}}"> <div title="{{lookup ../../config.i18n.armorTypes item.data.armorType}}">
{{lookup ../../config.i18n.armorTypesAbbr item.data.data.armorType}} {{lookup ../../config.i18n.armorTypesAbbr item.data.armorType}}
</div> </div>
<div class="item-num-val">{{ item.data.data.armorValue}}</div> <div>{{ item.data.armorValue}}</div>
{{/itemListEntry}} {{/itemListEntry}}
{{/each}} {{/each}}
</ol> </ol>
@ -142,17 +142,17 @@
{{!-- SHIELD --}} {{!-- 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' }} {{#> 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' }} {{#> itemListHeader dataType='shield' }}
<div class="item-num-val" title="{{localize 'DS4.ArmorValue'}}"> <div title="{{localize 'DS4.ArmorValue'}}">
{{localize 'DS4.ArmorValueAbbr'}} {{localize 'DS4.ArmorValueAbbr'}}
</div> </div>
{{/itemListHeader}} {{/itemListHeader}}
{{#each itemsByType.shield as |item id|}} {{#each itemsByType.shield as |item id|}}
{{#> itemListEntry item=item }} {{#> itemListEntry item=item }}
<div class="item-num-val">{{item.data.data.armorValue}}</div> <div>{{item.data.armorValue}}</div>
{{/itemListEntry}} {{/itemListEntry}}
{{/each}} {{/each}}
</ol> </ol>
@ -160,15 +160,15 @@
{{!-- EQUIPMENT --}} {{!-- 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' }} {{#> 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'}} {{#> itemListHeader dataType='equipment'}}
<div>{{localize 'DS4.StorageLocation'}}</div> <div>{{localize 'DS4.StorageLocation'}}</div>
{{/itemListHeader}} {{/itemListHeader}}
{{#each itemsByType.equipment as |item id|}} {{#each itemsByType.equipment as |item id|}}
{{#> itemListEntry item=item }} {{#> 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'}}"> data-property="data.storageLocation" title="{{localize 'DS4.StorageLocation'}}">
{{/itemListEntry}} {{/itemListEntry}}
{{/each}} {{/each}}
@ -176,15 +176,15 @@
{{/ifHasItemOfType}} {{/ifHasItemOfType}}
{{!-- LOOT --}} {{!-- 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' }} {{#> 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'}} {{#> itemListHeader dataType='loot'}}
<div>{{localize 'DS4.StorageLocation'}}</div> <div>{{localize 'DS4.StorageLocation'}}</div>
{{/itemListHeader}} {{/itemListHeader}}
{{#each itemsByType.loot as |item id|}} {{#each itemsByType.loot as |item id|}}
{{#> itemListEntry item=item }} {{#> 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'}}"> data-property="data.storageLocation" title="{{localize 'DS4.StorageLocation'}}">
{{/itemListEntry}} {{/itemListEntry}}
{{/each}} {{/each}}

2
src/templates/actor/partials/overview-add-button.hbs
View file

@ -8,4 +8,4 @@
<i class="fas fa-plus"></i> <i class="fas fa-plus"></i>
{{localize "DS4.UserInteractionAddItem"}} {{localize "DS4.UserInteractionAddItem"}}
</a> </a>
</div> </div>

36
src/templates/actor/partials/spells-overview.hbs
View file

@ -10,7 +10,7 @@
!-- @param unitAbbrs: mapping of allowed unitDatum.unit values to unit abbreviation !-- @param unitAbbrs: mapping of allowed unitDatum.unit values to unit abbreviation
--}} --}}
{{#*inline "unit"}} {{#*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 }} {{#if unitDatum.value }}
{{unitDatum.value}}&thinsp;{{lookup unitAbbrs unitDatum.unit}} {{unitDatum.value}}&thinsp;{{lookup unitAbbrs unitDatum.unit}}
{{else}}-{{/if}} {{else}}-{{/if}}
@ -36,44 +36,44 @@ localizationString=localizationString}}
<div class="tab spells" data-group="primary" data-tab="spells"> <div class="tab spells" data-group="primary" data-tab="spells">
<ol class="items-list spell"> <ol class="ds4-item-list ds4-item-list--spell item-list">
<li class="item-row item-header"> <li class="ds4-item-list__row ds4-item-list__row--header">
{{!-- equipped --}} {{!-- equipped --}}
<div title="{{localize 'DS4.ItemEquipped'}}">{{localize 'DS4.ItemEquippedAbbr'}}</div> <div title="{{localize 'DS4.ItemEquipped'}}">{{localize 'DS4.ItemEquippedAbbr'}}</div>
{{!-- image --}} {{!-- image --}}
<div class="item-image"></div> <div></div>
{{!-- name --}} {{!-- name --}}
<div class="item-name">{{localize 'DS4.ItemName'}}</div> <div>{{localize 'DS4.ItemName'}}</div>
{{!-- spell type --}} {{!-- 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 --}} {{!-- 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 --}} {{!-- 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 --}} {{!-- 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 --}} {{!-- cooldown duration --}}
<div class="item-num-val" title="{{localize 'DS4.SpellCooldownDuration'}}"><i <div title="{{localize 'DS4.SpellCooldownDuration'}}"><i class="fas fa-hourglass-half"></i></div>
class="fas fa-hourglass-half"></i></div>
{{!-- control buttons placeholder --}} {{!-- control buttons placeholder --}}
<div></div> <div></div>
</li> </li>
{{#each itemsByType.spell as |item id|}} {{#each itemsByType.spell as |item id|}}
<li class="item-row" data-item-id="{{item._id}}"> <li class="ds4-item-list__row item" data-item-id="{{item._id}}">
<input class="item-change" type="checkbox" {{checked item.data.data.equipped}} data-dtype="Boolean" <input class="ds4-item-list__editable ds4-item-list__editable--checkbox" type="checkbox" {{checked
data-property="data.equipped" title="{{localize 'DS4.ItemEquipped'}}"> item.data.data.equipped}} data-dtype="Boolean" data-property="data.equipped"
title="{{localize 'DS4.ItemEquipped'}}">
{{!-- image --}} {{!-- 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 --}} {{!-- 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}}" /> data-property="name" title="{{htmlToPlainText item.data.data.description}}" />
{{!-- spell type --}} {{!-- spell type --}}
<div class="item-image" <div class="ds4-item-list__image"
style="background-image: url('{{lookup ../config.icons.spellTypes item.data.data.spellType}}')" style="background-image: url('{{lookup ../config.icons.spellTypes item.data.data.spellType}}')"
title="{{lookup ../config.i18n.spellTypes item.data.data.spellType}}"> title="{{lookup ../config.i18n.spellTypes item.data.data.spellType}}">
</div> </div>
{{!-- spell bonus --}} {{!-- 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'}}" /> value="{{item.data.data.bonus}}" title="{{localize 'DS4.SpellBonus'}}" />
{{!-- max. distance --}} {{!-- max. distance --}}
{{> distanceUnit localizationString='DS4.SpellMaxDistance' unitDatum=item.data.data.maxDistance {{> distanceUnit localizationString='DS4.SpellMaxDistance' unitDatum=item.data.data.maxDistance