Ability Score filters + restyling
parent
549fa19a4c
commit
855cdcdc1b
|
@ -92,7 +92,7 @@ export class CompendiumBrowserVueApplication extends Application {
|
|||
// Reactivate the listeners if we need to.
|
||||
if (!this.vueListenersActive) {
|
||||
setTimeout(() => {
|
||||
this.activateVueListeners($(this.form), true);
|
||||
this.activateVueListeners(true);
|
||||
}, 150);
|
||||
}
|
||||
return;
|
||||
|
@ -112,7 +112,7 @@ export class CompendiumBrowserVueApplication extends Application {
|
|||
this.vueRoot = this.vueApp.mount(`[data-appid="${this.appId}"] .compendium-browser-mount`);
|
||||
// @todo Find a better solution than a timeout.
|
||||
setTimeout(() => {
|
||||
this.activateVueListeners($(this.form), false);
|
||||
this.activateVueListeners();
|
||||
}, 150);
|
||||
}
|
||||
|
||||
|
@ -142,37 +142,14 @@ export class CompendiumBrowserVueApplication extends Application {
|
|||
|
||||
/**
|
||||
* Activate additional listeners on the rendered Vue app.
|
||||
* @param {jQuery} html
|
||||
*/
|
||||
activateVueListeners(html, repeat = false) {
|
||||
if (!this.options.editable) {
|
||||
html.find("input,select,textarea").attr("disabled", true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (html.find(".archmage-v2-vue").length > 0) {
|
||||
activateVueListeners(repeat = false) {
|
||||
this.vueListenersActive = true;
|
||||
}
|
||||
|
||||
// Place one-time executions after this line.
|
||||
if (repeat) return;
|
||||
|
||||
// Input listeners.
|
||||
let inputs = '.section input[type="text"], .section input[type="number"]';
|
||||
html.on("focus", inputs, (event) => this._onFocus(event));
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle focus events.
|
||||
*
|
||||
* @param {*} event
|
||||
*/
|
||||
_onFocus(event) {
|
||||
let target = event.currentTarget;
|
||||
setTimeout(function () {
|
||||
if (target == document.activeElement) {
|
||||
$(target).trigger("select");
|
||||
}
|
||||
}, 100);
|
||||
this.element.find(".filtercontainer h3").click(async (ev) => await $(ev.target.nextElementSibling).toggle(100));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -60,17 +60,10 @@
|
|||
}
|
||||
}
|
||||
.control-area {
|
||||
position: sticky;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
flex: 2;
|
||||
button {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 2px;
|
||||
}
|
||||
.controls {
|
||||
overflow: hidden auto;
|
||||
.filtercontainer {
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 5px;
|
||||
|
@ -126,6 +119,18 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
footer {
|
||||
flex: 0;
|
||||
padding: 1rem 0 3px;
|
||||
}
|
||||
button {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
.list-area {
|
||||
position: sticky;
|
||||
height: 100%;
|
||||
|
@ -134,17 +139,11 @@
|
|||
flex: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.browser {
|
||||
height: 100%;
|
||||
overflow-y: hidden !important;
|
||||
.window-content {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
||||
ul {
|
||||
float: right;
|
||||
display: block;
|
||||
min-width: 335px;
|
||||
// min-width: 335px;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
@ -153,6 +152,10 @@
|
|||
display: none;
|
||||
}
|
||||
li {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
@ -178,6 +181,13 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.browser {
|
||||
height: 100%;
|
||||
overflow-y: hidden !important;
|
||||
.window-content {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
.spacer {
|
||||
display: inline-block;
|
||||
min-width: 5px;
|
||||
|
@ -328,6 +338,14 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.npc-line {
|
||||
.npc-name {
|
||||
text-shadow: 0 0 8px var(--color-shadow-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.settings {
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div class="npc-browser browser flexrow">
|
||||
<section class="control-area">
|
||||
<section class="control-area flexcol">
|
||||
<div class="controls">
|
||||
<div class="filtercontainer">
|
||||
<!-- Name filter. -->
|
||||
<div class="filter">
|
||||
|
@ -16,13 +17,11 @@
|
|||
</select>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<!-- Reset. -->
|
||||
<button type="reset" @click="resetFilters()">{{ game.i18n.localize('Reset Filters') }}</button>
|
||||
</div>
|
||||
|
||||
<div class="filtercontainer">
|
||||
<h3>{{ game.i18n.localize('General') }}</h3>
|
||||
<div class="filters">
|
||||
<!-- Level range slider. -->
|
||||
<div class="filter">
|
||||
<label class="unit-title" for="compendiumBrowser.level">{{ game.i18n.localize('Challenge Rating') }}</label>
|
||||
|
@ -73,7 +72,27 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filtercontainer">
|
||||
<h3>{{ game.i18n.localize('Ability Scores') }}</h3>
|
||||
<div class="filters">
|
||||
<div v-for="(ability, key) in abilities" class="filter">
|
||||
<label class="unit-title" for="compendiumBrowser.str">{{ ability.label }}</label>
|
||||
<div class="level-range flexrow">
|
||||
<div class="level-label"><span>{{ ability.range[0] }}</span><span v-if="ability.range[0] !== ability.range[1]"> - {{ ability.range[1] }}</span></div>
|
||||
<div class="level-input slider-wrapper flexrow">
|
||||
<Slider v-model="abilities[key].range" :min="1" :max="30" :tooltips="false"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<!-- Reset. -->
|
||||
<button type="reset" @click="resetFilters()">{{ game.i18n.localize('Reset Filters') }}</button>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<div class="list-area flexcol">
|
||||
|
@ -89,9 +108,7 @@
|
|||
</div>
|
||||
<div class="npc-line">
|
||||
<!-- First row is the title. -->
|
||||
<div class="npc-name">
|
||||
<a>[{{ game.dnd5e.utils.formatCR(entry.system.details.cr) }}] {{ entry.name }}</a>
|
||||
</div>
|
||||
<div class="npc-name">[{{ game.dnd5e.utils.formatCR(entry.system.details.cr) }}] {{ entry.name }}</div>
|
||||
<!-- Second row is supplemental info. -->
|
||||
<div class="npc-tags flexrow">
|
||||
<div class="numbers flexrow">
|
||||
|
@ -147,6 +164,8 @@ export default {
|
|||
}
|
||||
},
|
||||
data() {
|
||||
const abilities = {};
|
||||
Object.entries(CONFIG.DND5E.abilities).forEach(([k, v]) => abilities[k] = { label: v.label, range: [1, 30] });
|
||||
return {
|
||||
// Props used for infinite scroll and pagination.
|
||||
observer: null,
|
||||
|
@ -171,6 +190,7 @@ export default {
|
|||
// Mixed decimals and ints aren't supported by the slider, so
|
||||
// just use 0 for all CRs below 1.
|
||||
crRange: [0, 30],
|
||||
abilities,
|
||||
legact: '',
|
||||
legres: '',
|
||||
size: [],
|
||||
|
@ -267,6 +287,14 @@ export default {
|
|||
result = result.filter(entry => this.creatureType.includes(entry.system.details.type.value));
|
||||
}
|
||||
|
||||
Object.entries(this.abilities)
|
||||
.forEach(([k, v]) => {
|
||||
result = result.filter((entry) =>
|
||||
Number(entry.system.abilities[k].value) >= v.range[0] &&
|
||||
Number(entry.system.abilities[k].value) <= v.range[1]
|
||||
)
|
||||
});
|
||||
|
||||
// Reflow pager.
|
||||
if (result.length > this.pager.perPage) {
|
||||
this.pager.totalRows = result.length;
|
||||
|
|
Loading…
Reference in New Issue