Ability Score filters + restyling
Matheus Clemente
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) {
|
||||
this.vueListenersActive = true;
|
||||
}
|
||||
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,10 +60,69 @@
|
|||
}
|
||||
}
|
||||
.control-area {
|
||||
position: sticky;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
flex: 2;
|
||||
.controls {
|
||||
overflow: hidden auto;
|
||||
.filtercontainer {
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 2px;
|
||||
h3 {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
dl {
|
||||
margin: 5px 0;
|
||||
}
|
||||
div {
|
||||
margin: 5px 0;
|
||||
}
|
||||
dt {
|
||||
display: inline-block;
|
||||
width: 40%;
|
||||
padding-left: 5px;
|
||||
}
|
||||
dd {
|
||||
display: inline-block;
|
||||
width: 58%;
|
||||
margin-left: 0;
|
||||
select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.multiselect {
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 3px;
|
||||
vertical-align: middle;
|
||||
line-height: 32px;
|
||||
margin: 2px 0;
|
||||
label {
|
||||
padding: 5px;
|
||||
}
|
||||
input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.small-input {
|
||||
width: calc(100% - 44px);
|
||||
height: 27px;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #444;
|
||||
border-radius: 3px;
|
||||
padding: 0 3px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.small-select {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
footer {
|
||||
flex: 0;
|
||||
padding: 1rem 0 3px;
|
||||
}
|
||||
button {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #bbb;
|
||||
|
|
@ -71,60 +130,6 @@
|
|||
margin-top: 5px;
|
||||
padding: 2px;
|
||||
}
|
||||
.filtercontainer {
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 2px;
|
||||
h3 {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
dl {
|
||||
margin: 5px 0;
|
||||
}
|
||||
div {
|
||||
margin: 5px 0;
|
||||
}
|
||||
dt {
|
||||
display: inline-block;
|
||||
width: 40%;
|
||||
padding-left: 5px;
|
||||
}
|
||||
dd {
|
||||
display: inline-block;
|
||||
width: 58%;
|
||||
margin-left: 0;
|
||||
select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.multiselect {
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 3px;
|
||||
vertical-align: middle;
|
||||
line-height: 32px;
|
||||
margin: 2px 0;
|
||||
label {
|
||||
padding: 5px;
|
||||
}
|
||||
input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.small-input {
|
||||
width: calc(100% - 44px);
|
||||
height: 27px;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #444;
|
||||
border-radius: 3px;
|
||||
padding: 0 3px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.small-select {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-area {
|
||||
position: sticky;
|
||||
|
|
@ -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,79 +1,98 @@
|
|||
<template>
|
||||
<div class="npc-browser browser flexrow">
|
||||
<section class="control-area">
|
||||
<div class="filtercontainer">
|
||||
<!-- Name filter. -->
|
||||
<div class="filter">
|
||||
<input type="text" name="compendiumBrowser.name" v-model="name" :placeholder="game.i18n.localize('Name')" />
|
||||
<section class="control-area flexcol">
|
||||
<div class="controls">
|
||||
<div class="filtercontainer">
|
||||
<!-- Name filter. -->
|
||||
<div class="filter">
|
||||
<input type="text" name="compendiumBrowser.name" v-model="name" :placeholder="game.i18n.localize('Name')" />
|
||||
</div>
|
||||
|
||||
<!-- Sort -->
|
||||
<dl class="sorter">
|
||||
<dt>{{ game.i18n.localize('Sort by:') }}</dt>
|
||||
<dd>
|
||||
<select class="sort" name="sortorder" v-model="sortBy">
|
||||
<option v-for="(option, index) in sortOptions" :key="index" :value="option.value">{{ option.label }}</option>
|
||||
</select>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<!-- Sort -->
|
||||
<dl class="sorter">
|
||||
<dt>{{ game.i18n.localize('Sort by:') }}</dt>
|
||||
<dd>
|
||||
<select class="sort" name="sortorder" v-model="sortBy">
|
||||
<option v-for="(option, index) in sortOptions" :key="index" :value="option.value">{{ option.label }}</option>
|
||||
</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>
|
||||
<!-- Level range slider. -->
|
||||
<div class="filter">
|
||||
<label class="unit-title" for="compendiumBrowser.level">{{ game.i18n.localize('Challenge Rating') }}</label>
|
||||
<div class="level-range flexrow">
|
||||
<div class="level-label"><span>{{ crRange[0] }}</span><span v-if="crRange[0] !== crRange[1]"> - {{ crRange[1] }}</span></div>
|
||||
<div class="level-input slider-wrapper flexrow">
|
||||
<Slider v-model="crRange" :min="0" :max="30" :tooltips="false"/>
|
||||
<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>
|
||||
<div class="level-range flexrow">
|
||||
<div class="level-label"><span>{{ crRange[0] }}</span><span v-if="crRange[0] !== crRange[1]"> - {{ crRange[1] }}</span></div>
|
||||
<div class="level-input slider-wrapper flexrow">
|
||||
<Slider v-model="crRange" :min="0" :max="30" :tooltips="false"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Size filter. -->
|
||||
<div class="filter">
|
||||
<label class="unit-title" for="compendiumBrowser.size">{{ game.i18n.localize('Size') }}</label>
|
||||
<Multiselect
|
||||
v-model="size"
|
||||
mode="tags"
|
||||
:searchable="false"
|
||||
:create-option="false"
|
||||
:options="getOptions(CONFIG.DND5E.actorSizes)"
|
||||
/>
|
||||
</div>
|
||||
<div class="filter">
|
||||
<label class="unit-title" for="compendiumBrowser.legact">{{ game.i18n.localize('Legendary Actions') }}</label>
|
||||
<Multiselect
|
||||
v-model="legact"
|
||||
:searchable="false"
|
||||
:create-option="false"
|
||||
:options="getOptions(yesNo)"
|
||||
/>
|
||||
</div>
|
||||
<div class="filter">
|
||||
<label class="unit-title" for="compendiumBrowser.legres">{{ game.i18n.localize('Legendary Resistances') }}</label>
|
||||
<Multiselect
|
||||
v-model="legres"
|
||||
:searchable="false"
|
||||
:create-option="false"
|
||||
:options="getOptions(yesNo)"
|
||||
/>
|
||||
</div>
|
||||
<div class="filter">
|
||||
<label class="unit-title" for="compendiumBrowser.creatureType">{{ game.i18n.localize('Creature Type') }}</label>
|
||||
<Multiselect
|
||||
v-model="creatureType"
|
||||
mode="tags"
|
||||
:searchable="false"
|
||||
:create-option="false"
|
||||
:options="getOptions(CONFIG.DND5E.creatureTypes)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Size filter. -->
|
||||
<div class="filter">
|
||||
<label class="unit-title" for="compendiumBrowser.size">{{ game.i18n.localize('Size') }}</label>
|
||||
<Multiselect
|
||||
v-model="size"
|
||||
mode="tags"
|
||||
:searchable="false"
|
||||
:create-option="false"
|
||||
:options="getOptions(CONFIG.DND5E.actorSizes)"
|
||||
/>
|
||||
</div>
|
||||
<div class="filter">
|
||||
<label class="unit-title" for="compendiumBrowser.legact">{{ game.i18n.localize('Legendary Actions') }}</label>
|
||||
<Multiselect
|
||||
v-model="legact"
|
||||
:searchable="false"
|
||||
:create-option="false"
|
||||
:options="getOptions(yesNo)"
|
||||
/>
|
||||
</div>
|
||||
<div class="filter">
|
||||
<label class="unit-title" for="compendiumBrowser.legres">{{ game.i18n.localize('Legendary Resistances') }}</label>
|
||||
<Multiselect
|
||||
v-model="legres"
|
||||
:searchable="false"
|
||||
:create-option="false"
|
||||
:options="getOptions(yesNo)"
|
||||
/>
|
||||
</div>
|
||||
<div class="filter">
|
||||
<label class="unit-title" for="compendiumBrowser.creatureType">{{ game.i18n.localize('Creature Type') }}</label>
|
||||
<Multiselect
|
||||
v-model="creatureType"
|
||||
mode="tags"
|
||||
:searchable="false"
|
||||
:create-option="false"
|
||||
:options="getOptions(CONFIG.DND5E.creatureTypes)"
|
||||
/>
|
||||
|
||||
<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