data binding for owned item properties
Additions: - now also text, number, and range input fields of owned items can be bound to HTML (input) elements of the char sheet Changes: - moved prototype handle for checkboxes to own function - replaced some static HTML elements in item list with input fields - item-num-val HTML elements (e.g. item quantity) now have a max-width
This commit is contained in:
Gesina Schwalbe
parent
5d83e26e81
commit
d8423ce364
3 changed files with 100 additions and 33 deletions
|
|
@ -16,10 +16,12 @@
|
|||
<div class="item-name flex3">{{localize 'DS4.ItemName'}}</div>
|
||||
<div title="{{localize 'DS4.AttackType'}}">{{localize 'DS4.AttackTypeAbbr'}}</div> {{!-- SPECIFIC --}}
|
||||
<div class="flexrow flex15">
|
||||
<div class="item-num-val" title="{{localize 'DS4.WeaponBonus'}}">{{localize 'DS4.WeaponBonusAbbr'}}
|
||||
<div class="item-num-val" title="{{localize 'DS4.WeaponBonus'}}">
|
||||
{{localize 'DS4.WeaponBonusAbbr'}}
|
||||
</div> {{!-- SPECIFIC --}}
|
||||
<div class="item-num-val" title="{{localize 'DS4.OpponentDefense'}}">
|
||||
{{localize 'DS4.OpponentDefenseAbbr'}}
|
||||
</div> {{!-- SPECIFIC --}}
|
||||
<div class="item-num-val" title="{{localize 'DS4.OpponentDefense'}}">{{localize
|
||||
'DS4.OpponentDefenseAbbr'}}</div> {{!-- SPECIFIC --}}
|
||||
</div>
|
||||
<div class="flex4">{{localize 'DS4.Description'}}</div>
|
||||
{{!-- add button --}}
|
||||
|
|
@ -34,18 +36,19 @@
|
|||
<li class="item flexrow" data-item-id="{{item._id}}">
|
||||
<div class="flexrow flex15">
|
||||
{{!-- equipped? --}}
|
||||
{{#if itemData.equipped}}<i class="fas fa-check-square item-equip"></i>
|
||||
{{else}}<i class="far fa-square item-equip"></i>
|
||||
{{/if}} {{!--SPECIFIC --}}
|
||||
<input class="item-change" type="checkbox" {{checked itemData.equipped}} data-dtype="Boolean"
|
||||
data-property="data.equipped" title="{{localize 'DS4.ItemEquipped'}}"> {{!--SPECIFIC --}}
|
||||
{{!-- image --}}
|
||||
<div class="item-image">
|
||||
<img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
|
||||
</div>
|
||||
{{!-- amount --}}
|
||||
<div class="item-num-val">{{itemData.quantity}}</div>
|
||||
<input type="number" class="item-num-val item-change" value="{{itemData.quantity}}" data-dtype="Number"
|
||||
data-property="data.quantity" title="{{localize 'DS4.Quantity'}}">
|
||||
</div>
|
||||
{{!-- name --}}
|
||||
<h4 class="item-name flex3">{{item.name}}</h4>
|
||||
<input type="text" class="item-name flex3 item-change" value="{{item.name}}" data-dtype="String"
|
||||
data-property="name" title="{{localize 'DS4.ItemName'}}">
|
||||
{{!-- item specifics --}}
|
||||
<div>
|
||||
<img src="{{lookup ../../config.attackTypesIcons itemData.attackType}}"
|
||||
|
|
@ -96,18 +99,19 @@
|
|||
<li class="item flexrow" data-item-id="{{item._id}}">
|
||||
<div class="flexrow flex15">
|
||||
{{!-- equipped? --}}
|
||||
{{#if itemData.equipped}}<i class="fas fa-check-square item-equip"></i>
|
||||
{{else}}<i class="far fa-square item-equip"></i>
|
||||
{{/if}} {{!--SPECIFIC --}}
|
||||
<input class="item-change" type="checkbox" {{checked itemData.equipped}} data-dtype="Boolean"
|
||||
data-property="data.equipped" title="{{localize 'DS4.ItemEquipped'}}"> {{!--SPECIFIC --}}
|
||||
{{!-- image --}}
|
||||
<div class="item-image">
|
||||
<img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
|
||||
</div>
|
||||
{{!-- amount --}}
|
||||
<div class="item-num-val">{{itemData.quantity}}</div>
|
||||
<input type="number" class="item-num-val item-change" value="{{itemData.quantity}}" data-dtype="Number"
|
||||
data-property="data.quantity" title="{{localize 'DS4.Quantity'}}">
|
||||
</div>
|
||||
{{!-- name --}}
|
||||
<h4 class="item-name flex3">{{item.name}}</h4>
|
||||
<input type="text" class="item-name flex3 item-change" value="{{item.name}}" data-dtype="String"
|
||||
data-property="name" title="{{localize 'DS4.ItemName'}}">
|
||||
{{!-- item specifics --}}
|
||||
<div title="{{lookup ../../config.armorMaterialTypes itemData.armorMaterialType}}">
|
||||
{{lookup ../../config.armorMaterialTypesAbbr itemData.armorMaterialType}}
|
||||
|
|
@ -154,18 +158,19 @@
|
|||
<li class="item flexrow" data-item-id="{{item._id}}">
|
||||
<div class="flexrow flex15">
|
||||
{{!-- equipped? --}}
|
||||
{{#if itemData.equipped}}<i class="fas fa-check-square item-equip"></i>
|
||||
{{else}}<i class="far fa-square item-equip"></i>
|
||||
{{/if}} {{!--SPECIFIC --}}
|
||||
<input class="item-change" type="checkbox" {{checked itemData.equipped}} data-dtype="Boolean"
|
||||
data-property="data.equipped" title="{{localize 'DS4.ItemEquipped'}}"> {{!--SPECIFIC --}}
|
||||
{{!-- image --}}
|
||||
<div class="item-image">
|
||||
<img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
|
||||
</div>
|
||||
{{!-- amount --}}
|
||||
<div class="item-num-val">{{itemData.quantity}}</div>
|
||||
<input type="number" class="item-num-val item-change" value="{{itemData.quantity}}" data-dtype="Number"
|
||||
data-property="data.quantity" title="{{localize 'DS4.Quantity'}}">
|
||||
</div>
|
||||
{{!-- name --}}
|
||||
<h4 class="item-name flex3">{{item.name}}</h4>
|
||||
<input type="text" class="item-name flex3 item-change" value="{{item.name}}" data-dtype="String"
|
||||
data-property="name" title="{{localize 'DS4.ItemName'}}">
|
||||
{{!-- item specifics --}}
|
||||
<div class="flex05 item-num-val">{{itemData.armorValue}}</div> {{!-- SPECIFIC --}}
|
||||
{{!-- description --}}
|
||||
|
|
@ -204,20 +209,22 @@
|
|||
<li class="item flexrow" data-item-id="{{item._id}}">
|
||||
<div class="flexrow flex15">
|
||||
{{!-- equipped? --}}
|
||||
{{#if itemData.equipped}}<i class="fas fa-check-square item-equip"></i>
|
||||
{{else}}<i class="far fa-square item-equip"></i>
|
||||
{{/if}} {{!--SPECIFIC --}}
|
||||
<input class="item-change" type="checkbox" {{checked itemData.equipped}} data-dtype="Boolean"
|
||||
data-property="data.equipped" title="{{localize 'DS4.ItemEquipped'}}"> {{!--SPECIFIC --}}
|
||||
{{!-- image --}}
|
||||
<div class="item-image">
|
||||
<img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
|
||||
</div>
|
||||
{{!-- amount --}}
|
||||
<div class="item-num-val">{{itemData.quantity}}</div>
|
||||
<input type="number" class="item-num-val item-change" value="{{itemData.quantity}}" data-dtype="Number"
|
||||
data-property="data.quantity" title="{{localize 'DS4.Quantity'}}">
|
||||
</div>
|
||||
{{!-- name --}}
|
||||
<h4 class="item-name flex3">{{item.name}}</h4>
|
||||
<input type="text" class="item-name flex3 item-change" value="{{item.name}}" data-dtype="String"
|
||||
data-property="name" title="{{localize 'DS4.ItemName'}}">
|
||||
{{!-- storage location --}}
|
||||
<div class="flex2">{{{itemData.storageLocation}}}</div> {{!-- SPECIFIC --}}
|
||||
<input type="text" class="flex2 item-change" value="{{itemData.storageLocation}}" data-dtype="String"
|
||||
data-property="data.storageLocation" title="{{localize 'DS4.StorageLocation'}}"> {{!-- SPECIFIC --}}
|
||||
{{!-- description --}}
|
||||
<div class="flex4 item-description">{{{itemData.description}}}</div>
|
||||
{{!-- edit & delete buttons --}}
|
||||
|
|
@ -257,12 +264,15 @@
|
|||
<img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
|
||||
</div>
|
||||
{{!-- amount --}}
|
||||
<div class="item-num-val">{{itemData.quantity}}</div>
|
||||
<input type="number" class="item-num-val item-change" value="{{itemData.quantity}}" data-dtype="Number"
|
||||
data-property="data.quantity" title="{{localize 'DS4.Quantity'}}">
|
||||
</div>
|
||||
{{!-- name --}}
|
||||
<h4 class="item-name flex3">{{item.name}}</h4>
|
||||
<input type="text" class="item-name flex3 item-change" value="{{item.name}}" data-dtype="String"
|
||||
data-property="name" title="{{localize 'DS4.ItemName'}}">
|
||||
{{!-- storage location --}}
|
||||
<div class="flex2">{{{itemData.storageLocation}}}</div> {{!-- SPECIFIC --}}
|
||||
<input type="text" class="flex2 item-change" value="{{itemData.storageLocation}}" data-dtype="String"
|
||||
data-property="data.storageLocation" title="{{localize 'DS4.StorageLocation'}}"> {{!-- SPECIFIC --}}
|
||||
{{!-- description --}}
|
||||
<div class="flex4 item-description">{{{itemData.description}}}</div>
|
||||
{{!-- edit & delete buttons --}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue