Attach event handlers based on HTML data attributes

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Next Release
 
+- Under the hood: apply Handlebars template listeners with `data-on-*` HTML attributes rather than classes ([#608](https://github.com/ben/foundry-ironsworn/pull/608))
 - Under the hood: Remove the old `tables.db` (superceded by `ironsworn-oracles.db`) and all remaining references to it ([#614](https://github.com/ben/foundry-ironsworn/pull/614))
 - Add a loading spinner for the asset browser ([#618](https://github.com/ben/foundry-ironsworn/pull/618))
 

src/module/actor/sheets/compactsheet.ts

@@ -23,14 +23,14 @@ export class IronswornCompactCharacterSheet extends ActorSheet {
     super.activateListeners(html)
 
     html
-      .find('.ironsworn__stat__roll')
-      .on('click', (e) => this._onStatRoll.call(this, e))
+      .find('[data-on-click="rollStat"]')
+      .on('click', (e) => this._rollStat.call(this, e))
     html
-      .find('.ironsworn__resource__adjust')
-      .on('click', (e) => this._resourceAdjust.call(this, e))
+      .find('[data-on-click="adjustResource"]')
+      .on('click', (e) => this._adjustResource.call(this, e))
     html
-      .find('.ironsworn__momentum__burn')
-      .on('click', (e) => this._momentumBurn.call(this, e))
+      .find('[data-on-click="burnMomentum"]')
+      .on('click', (e) => this._burnMomentum.call(this, e))
   }
 
   _getHeaderButtons() {
@@ -60,7 +60,7 @@ export class IronswornCompactCharacterSheet extends ActorSheet {
     this.actor.moveSheet.render(true, { focus: true })
   }
 
-  async _onStatRoll(ev: JQuery.ClickEvent) {
+  async _rollStat(ev: JQuery.ClickEvent) {
     ev.preventDefault()
 
     const el = ev.currentTarget
@@ -75,7 +75,7 @@ export class IronswornCompactCharacterSheet extends ActorSheet {
     }
   }
 
-  _resourceAdjust(ev: JQuery.ClickEvent) {
+  _adjustResource(ev: JQuery.ClickEvent) {
     ev.preventDefault()
 
     const amt = parseInt(ev.currentTarget.dataset.amt || '0')
@@ -95,7 +95,7 @@ export class IronswornCompactCharacterSheet extends ActorSheet {
     }
   }
 
-  _momentumBurn(ev: JQuery.ClickEvent) {
+  _burnMomentum(ev: JQuery.ClickEvent) {
     ev.preventDefault()
 
     if (this.actor.type === 'character') {

src/module/applications/createActorDialog.ts

@@ -46,29 +46,29 @@ export class CreateActorDialog extends FormApplication<CreateActorDialogOptions>
     super.activateListeners(html)
 
     html
-      .find('.ironsworn__character__create')
-      .on('click', (ev) => this._characterCreate.call(this, ev))
+      .find('[data-on-click="createCharacter"]')
+      .on('click', (ev) => this._createCharacter.call(this, ev))
     html
-      .find('.ironsworn__shared__create')
-      .on('click', (ev) => this._sharedCreate.call(this, ev))
+      .find('[data-on-click="createShared"]')
+      .on('click', (ev) => this._createShared.call(this, ev))
     html
-      .find('.ironsworn__site__create')
-      .on('click', (ev) => this._siteCreate.call(this, ev))
+      .find('[data-on-click="createSite"]')
+      .on('click', (ev) => this._createSite.call(this, ev))
     html
-      .find('.ironsworn__foe__create')
-      .on('click', (ev) => this._foeCreate.call(this, ev))
+      .find('[data-on-click="createFoe"]')
+      .on('click', (ev) => this._createFoe.call(this, ev))
     html
-      .find('.ironsworn__sfcharacter__create')
-      .on('click', (ev) => this._sfcharacterCreate.call(this, ev))
+      .find('[data-on-click="createSfcharacter"]')
+      .on('click', (ev) => this._createSfcharacter.call(this, ev))
     html
-      .find('.ironsworn__sfship__create')
-      .on('click', (ev) => this._sfshipCreate.call(this, ev))
+      .find('[data-on-click="createStarship"]')
+      .on('click', (ev) => this._createStarship.call(this, ev))
     html
-      .find('.ironsworn__sflocation__create')
-      .on('click', (ev) => this._sfLocationCreate.call(this, ev))
+      .find('[data-on-click="createSflocation"]')
+      .on('click', (ev) => this._createSflocation.call(this, ev))
   }
 
-  async _characterCreate(ev: JQuery.ClickEvent) {
+  async _createCharacter(ev: JQuery.ClickEvent) {
     ev.preventDefault()
 
     // Roll an Ironlander name
@@ -83,7 +83,7 @@ export class CreateActorDialog extends FormApplication<CreateActorDialogOptions>
     )
   }
 
-  async _sharedCreate(ev: JQuery.ClickEvent) {
+  async _createShared(ev: JQuery.ClickEvent) {
     ev.preventDefault()
     this._createWithFolder(
       CONFIG.Actor.typeLabels['shared'],
@@ -92,7 +92,7 @@ export class CreateActorDialog extends FormApplication<CreateActorDialogOptions>
     )
   }
 
-  async _siteCreate(ev: JQuery.ClickEvent) {
+  async _createSite(ev: JQuery.ClickEvent) {
     ev.preventDefault()
     this._createWithFolder(
       CONFIG.Actor.typeLabels['site'],
@@ -101,7 +101,7 @@ export class CreateActorDialog extends FormApplication<CreateActorDialogOptions>
     )
   }
 
-  async _foeCreate(ev: JQuery.ClickEvent) {
+  async _createFoe(ev: JQuery.ClickEvent) {
     ev.preventDefault()
     this._createWithFolder(
       CONFIG.Actor.typeLabels['foe'],
@@ -110,7 +110,7 @@ export class CreateActorDialog extends FormApplication<CreateActorDialogOptions>
     )
   }
 
-  async _sfcharacterCreate(ev: JQuery.ClickEvent) {
+  async _createSfcharacter(ev: JQuery.ClickEvent) {
     ev.preventDefault()
 
     const name = await this._randomStarforgedName()
@@ -123,7 +123,7 @@ export class CreateActorDialog extends FormApplication<CreateActorDialogOptions>
     )
   }
 
-  async _sfshipCreate(ev: JQuery.ClickEvent) {
+  async _createStarship(ev: JQuery.ClickEvent) {
     ev.preventDefault()
     this._createWithFolder(
       CONFIG.Actor.typeLabels['starship'],
@@ -132,7 +132,7 @@ export class CreateActorDialog extends FormApplication<CreateActorDialogOptions>
     )
   }
 
-  async _sfLocationCreate(ev: JQuery.ClickEvent) {
+  async _createSflocation(ev: JQuery.ClickEvent) {
     ev.preventDefault()
     this._createWithFolder(
       CONFIG.Actor.typeLabels['location'],

src/module/applications/firstStartDialog.ts

@@ -30,10 +30,12 @@ export class FirstStartDialog extends FormApplication<FormApplicationOptions> {
 
   activateListeners(html: JQuery) {
     super.activateListeners(html)
-    html.find('.ironsworn__save').on('click', (ev) => this._save.call(this, ev))
+    html
+      .find('[data-on-click="saveSettings"]')
+      .on('click', (ev) => this._saveSettings.call(this, ev))
   }
 
-  async _save(ev: JQuery.ClickEvent) {
+  async _saveSettings(ev: JQuery.ClickEvent) {
     ev.preventDefault()
 
     const setValues = this.element.find('form').serializeArray()

src/module/applications/worldTruthsDialog.ts

@@ -56,18 +56,18 @@ export class WorldTruthsDialog extends FormApplication<FormApplicationOptions> {
     super.activateListeners(html)
 
     html
-      .find('.ironsworn__custom__truth')
-      .on('focus', (ev) => this._customTruthFocus.call(this, ev))
+      .find('[data-on-focus="selectTruthOption"]')
+      .on('focus', (ev) => this._selectTruthOption.call(this, ev))
     html
-      .find('.ironsworn__save__truths')
-      .on('click', (ev) => this._save.call(this, ev))
+      .find('[data-on-click="saveTruths"]')
+      .on('click', (ev) => this._saveTruths.call(this, ev))
   }
 
-  _customTruthFocus(ev: JQuery.FocusEvent) {
+  _selectTruthOption(ev: JQuery.FocusEvent) {
     $(ev.currentTarget).siblings('input').prop('checked', true)
   }
 
-  async _save(ev: JQuery.ClickEvent) {
+  async _saveTruths(ev: JQuery.ClickEvent) {
     ev.preventDefault()
 
     // Get elements that are checked

src/module/chat/cards.ts

@@ -1,7 +1,6 @@
 import { compact, flatten } from 'lodash'
 import { SFMoveDataPropertiesData } from '../item/itemtypes'
 import { IronswornItem } from '../item/item'
-import { cachedDocumentsForPack } from '../features/pack-cache'
 import { IronswornRollMessage, OracleRollMessage } from '../rolls'
 import { ChallengeResolutionDialog } from '../rolls/challenge-resolution-dialog'
 import { getFoundryTableByDfId } from '../dataforged'
@@ -66,27 +65,24 @@ export class IronswornChatCard {
     html
       .find('a.oracle-category-link')
       .on('click', (ev) => this._oracleNavigate.call(this, ev))
+    // FIXME: the classes in these selectors below don't appear in new messages, but they're provided so that recent chat messages have coverage. Remove them in April 2023.
     html
-      .find('.burn-momentum')
+      .find(
+        '[data-on-click="burnMomentum"], .burn-momentum, .burn-momentum-sf, .ironsworn-roll-burn-momentum'
+      )
       .on('click', (ev) => this._burnMomentum.call(this, ev))
     html
-      .find('.burn-momentum-sf')
-      .on('click', (ev) => this._burnMomentum.call(this, ev))
-    html
-      .find('.ironsworn-roll-burn-momentum')
-      .on('click', (ev) => this._burnMomentum.call(this, ev))
-    html
-      .find('.oracle-roll .oracle-reroll')
-      .on('click', (ev) => this._oracleReroll.call(this, ev))
+      .find('[data-on-click="rerollOracle"], .oracle-roll .oracle-reroll')
+      .on('click', (ev) => this._rerollOracle.call(this, ev))
     html
-      .find('.copy-result')
-      .on('click', (ev) => this._oracleResultCopy.call(this, ev))
+      .find('[data-on-click="copyOracleResult"], .copy-result')
+      .on('click', (ev) => this._copyOracleResult.call(this, ev))
     html
-      .find('.ironsworn-roll-resolve')
-      .on('click', (ev) => this._resolveChallenge.call(this, ev))
+      .find('[data-on-click="resolveChallengeDice"], .ironsworn-roll-resolve')
+      .on('click', (ev) => this._resolveChallengeDice.call(this, ev))
     html
-      .find('.starforged__oracle__roll')
-      .on('click', (ev) => this._oracleRoll.call(this, ev))
+      .find('[data-on-click="rollOracle"], .starforged__oracle__roll')
+      .on('click', (ev) => this._rollOracle.call(this, ev))
   }
 
   async _moveNavigate(ev: JQuery.ClickEvent) {
@@ -122,14 +118,14 @@ export class IronswornChatCard {
     return irmsg?.burnMomentum()
   }
 
-  async _resolveChallenge(ev: JQuery.ClickEvent) {
+  async _resolveChallengeDice(ev: JQuery.ClickEvent) {
     ev.preventDefault()
 
     const msgId = $(ev.target).parents('.chat-message').data('message-id')
     ChallengeResolutionDialog.showForMessage(msgId)
   }
 
-  async _oracleReroll(ev: JQuery.ClickEvent) {
+  async _rerollOracle(ev: JQuery.ClickEvent) {
     ev.preventDefault()
 
     const msgId = $(ev.target).parents('.chat-message').data('message-id')
@@ -138,7 +134,7 @@ export class IronswornChatCard {
     return orm?.createOrUpdate()
   }
 
-  async _oracleRoll(ev: JQuery.ClickEvent) {
+  async _rollOracle(ev: JQuery.ClickEvent) {
     ev.preventDefault()
     const { tableid } = ev.currentTarget.dataset
     const sfPack = game.packs.get('foundry-ironsworn.starforgedoracles')
@@ -154,7 +150,7 @@ export class IronswornChatCard {
     msg.createOrUpdate()
   }
 
-  async _oracleResultCopy(ev: JQuery.ClickEvent) {
+  async _copyOracleResult(ev: JQuery.ClickEvent) {
     const { result } = ev.currentTarget.dataset
     await navigator.clipboard.writeText(result)
     const icon = $(ev.currentTarget).find('i.fas')

src/module/item/asset/assetsheet.ts

@@ -13,35 +13,35 @@ export class AssetSheet extends IronswornItemSheet {
     if (!this.options.editable) return
 
     html
-      .find('.ironsworn__ability__enable')
-      .on('click', (ev) => this._abilityToggle.call(this, ev))
+      .find('[data-on-click="toggleAbility"]')
+      .on('click', (ev) => this._toggleAbility.call(this, ev))
     html
-      .find('.ironsworn__option__enable')
-      .on('click', (ev) => this._optionToggle.call(this, ev))
+      .find('[data-on-click="toggleOption"]')
+      .on('click', (ev) => this._toggleOption.call(this, ev))
     html
-      .find('.ironsworn__option__name')
+      .find('[data-on-blur="updateOptionName"]')
       .on('blur', (ev) => this._updateOptionName.call(this, ev))
     html
-      .find('.ironsworn__option__delete')
-      .on('click', (ev) => this._optionDelete.call(this, ev))
+      .find('[data-on-click="deleteOption"]')
+      .on('click', (ev) => this._deleteOption.call(this, ev))
     html
-      .find('.ironsworn__option__add')
-      .on('click', (ev) => this._optionAdd.call(this, ev))
+      .find('[data-on-click="addOption"]')
+      .on('click', (ev) => this._addOption.call(this, ev))
     html
-      .find('.ironsworn__field__add')
+      .find('[data-on-click="addField"]')
       .on('click', (ev) => this._addField.call(this, ev))
     html
-      .find('.ironsworn__field__label')
+      .find('[data-on-blur="updateFieldLabel"]')
       .on('blur', (ev) => this._updateFieldLabel.call(this, ev))
     html
-      .find('.ironsworn__field__value')
+      .find('[data-on-blur="updateFieldValue"]')
       .on('blur', (ev) => this._updateFieldValue.call(this, ev))
     html
-      .find('.ironsworn__field__delete')
+      .find('[data-on-click="deleteField"]')
       .on('click', (ev) => this._deleteField.call(this, ev))
     html
-      .find('.ironsworn__asset__delete')
-      .on('click', (ev) => this.assetDelete.call(this, ev))
+      .find('[data-on-click="deleteAsset"]')
+      .on('click', (ev) => this._deleteAsset.call(this, ev))
 
     attachInlineRollListeners(html, { actor: this.actor || undefined })
   }
@@ -70,7 +70,7 @@ export class AssetSheet extends IronswornItemSheet {
     this.item.setFlag('foundry-ironsworn', 'edit-mode', !currentValue)
   }
 
-  _abilityToggle(ev: JQuery.ClickEvent) {
+  _toggleAbility(ev: JQuery.ClickEvent) {
     ev.preventDefault()
 
     const { idx } = ev.currentTarget.dataset
@@ -79,7 +79,7 @@ export class AssetSheet extends IronswornItemSheet {
     this.item.update({ system: { abilities } })
   }
 
-  _optionToggle(ev: JQuery.ClickEvent) {
+  _toggleOption(ev: JQuery.ClickEvent) {
     ev.preventDefault()
 
     const { idx } = ev.currentTarget.dataset
@@ -99,7 +99,7 @@ export class AssetSheet extends IronswornItemSheet {
     this.item.update({ system: { exclusiveOptions } })
   }
 
-  _optionAdd(ev: JQuery.ClickEvent) {
+  _addOption(ev: JQuery.ClickEvent) {
     ev.preventDefault()
 
     const exclusiveOptions = Object.values(
@@ -109,7 +109,7 @@ export class AssetSheet extends IronswornItemSheet {
     this.item.update({ system: { exclusiveOptions } })
   }
 
-  _optionDelete(ev: JQuery.ClickEvent) {
+  _deleteOption(ev: JQuery.ClickEvent) {
     ev.preventDefault()
 
     const { idx } = ev.currentTarget.dataset
@@ -153,7 +153,7 @@ export class AssetSheet extends IronswornItemSheet {
     this.item.update({ system: { fields } })
   }
 
-  assetDelete(ev: JQuery.ClickEvent) {
+  _deleteAsset(ev: JQuery.ClickEvent) {
     ev.preventDefault()
 
     Dialog.confirm({