Swapped dropdown box for full character list

This commit is contained in:
Stefan Zermatten
2017-09-07 14:36:45 +02:00
parent b43ee08d75
commit ef0deb20aa
5 changed files with 118 additions and 39 deletions

View File

@@ -1,36 +1,20 @@
<!-- data is the CustomBuff -->
<template name="applyBuffDialog">
<div class="fit layout vertical">
<div class="flex">
<app-header fixed effects="waterfall">
<app-toolbar>
Apply Buff
</app-toolbar>
</app-header>
<div class="form flex">
<paper-dropdown-menu class=flex label="Target" style="flex-basis: 150px; max-width: 200px;">
<dicecloud-selector selected="default" class="dropdown-content target-dropdown">
{{#if canApplyToSelf}}
<paper-item name="default" style="width: 150px;">
Self
</paper-item>
{{else}}
<paper-item name="default" style="width: 150px;">
Choose a character
</paper-item>
{{/if}}
{{#each character in writableCharacters}}
<paper-item name="{{character._id}}">
{{character.name}}
</paper-item>
{{/each}}
</dicecloud-selector>
</paper-dropdown-menu>
<div class="fit layout vertical applyBuffDialog">
<app-header fixed effects="waterfall">
<app-toolbar>
Apply Buff
</app-toolbar>
</app-header>
<div class="flex layout horizontal" style="height:100%">
<div class="flex" style="margin-right: 16px; height: 100%; max-width: 240px; overflow-y: auto;">
{{> characterPicker selfId=buff.charId includeSelf=canApplyToSelf writableOnly=true}}
</div>
<div class="flex buff-description" style="height: 100%; overflow-y: auto">
<hr style="margin: 16px 0 16px 0;">
{{#if buff.description}}
<div>{{#markdown}}{{evaluateString buff.charId buff.description}}{{/markdown}}</div>
<hr style="margin: 16px 0 16px 0;">
<div>{{#markdown}}{{evaluateString buff.charId buff.description}}{{/markdown}}</div>
<hr style="margin: 16px 0 16px 0;">
{{/if}}
{{> effectsViewList charId=buff.charId parentId=buff._id}}
{{> proficiencyViewList charId=buff.charId parentId=buff._id}}

View File

@@ -9,19 +9,10 @@ Template.applyBuffDialog.helpers({
canApplyToSelf: function() {
return this.buff.target !== "others"; //i.e. it is "self" or "both"
},
writableCharacters: function() {
var returnArray = [];
Characters.find({_id: {$ne: this.buff.charId}}).forEach(function(char){ //we look through all characters we have access to
if (canEditCharacter(char._id)) {
returnArray.push(char);
}
});
return returnArray;
},
});
Template.applyBuffDialog.events({
"iron-select .target-dropdown": function(event){
"iron-select .characterPicker": function(event){
var detail = event.originalEvent.detail;
var value = detail.item.getAttribute("name");
Template.instance().selectedTarget.set(value);

View File

@@ -0,0 +1,17 @@
.characterPicker .character-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.characterPicker .partyHead {
font-weight: 500;
}
.characterPicker .partyHead iron-icon {
transition: transform 0.3s ease;
}
.characterPicker .partyHead iron-icon.open {
transform: rotate(90deg);
}

View File

@@ -0,0 +1,34 @@
<template name="characterPicker">
<dicecloud-selector class="characterPicker" selected={{selected}} selectable="paper-item" style="height: 100%; overflow-y: auto;">
{{#if selfId}}{{#if includeSelf}}
<paper-item class="short clickable" name={{selfId}}>
<div class="character-name">
Self
</div>
</paper-item>
{{/if}}{{/if}}
{{#each charactersWithNoParty}}
<paper-item class="short clickable" name={{_id}}>
<div class="character-name">
{{name}}
</div>
</paper-item>
{{/each}}
{{#each parties}}
<div class="paper-font-subhead partyHead clickable">
<iron-icon icon="chevron-right" class="{{#if isOpen _id}}open{{/if}}">
</iron-icon>
{{name}}
</div>
<iron-collapse opened={{isOpen _id}}>
{{#each charactersInParty}}
<paper-item class="short clickable" name={{_id}}>
<div class="character-name">
{{name}}
</div>
</paper-item>
{{/each}}
</iron-collapse>
{{/each}}
</dicecloud-selector>
</template>

View File

@@ -0,0 +1,53 @@
Template.characterPicker.onCreated(function() {
this.subscribe("characterList");
this.openedParties = new ReactiveVar(new Set());
});
Template.characterPicker.helpers({
parties() {
return Parties.find(
{owner: Meteor.userId()},
{sort: {name: 1}},
);
},
charactersInParty() {
var userId = Meteor.userId();
var selector = {
_id: {$in: this.characters, $ne: this.selfId},
$or: [{readers: userId}, {writers: userId}, {owner: userId}],
};
if (this.writableOnly) {
selector.$or = [{writers: userId}, {owner: userId}];
}
return Characters.find(selector,{sort: {name: 1}});
},
charactersWithNoParty() {
var userId = Meteor.userId();
var charArrays = Parties.find({owner: userId}).map(p => p.characters);
var partyChars = _.uniq(_.flatten(charArrays));
var selector = {
_id: {$nin: partyChars, $ne: this.selfId},
$or: [{readers: userId}, {writers: userId}, {owner: userId}],
};
if (this.writableOnly) {
selector.$or = [{writers: userId}, {owner: userId}];
}
return Characters.find(selector, {sort: {name: 1}});
},
isOpen(id) {
var openedParties = Template.instance().openedParties.get();
return openedParties.has(id);
},
});
Template.characterPicker.events({
"click .partyHead": function(event, instance){
var openedParties = instance.openedParties.get();
if (openedParties.has(this._id)){
openedParties.delete(this._id);
} else {
openedParties.add(this._id);
}
instance.openedParties.set(openedParties);
},
});