Generalised some dialogs
This commit is contained in:
Thaum
@@ -1,36 +1,22 @@
|
||||
<template name="containerDialog">
|
||||
{{#with container}}
|
||||
<core-header-panel fit>
|
||||
<core-toolbar hero-id="toolbar" class={{colorClass}} hero>
|
||||
<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
|
||||
<div flex hero-id="title" hero>{{name}}</div>
|
||||
<paper-icon-button id="deleteContainer"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
icon="delete"
|
||||
aria-label="Delete Feature"
|
||||
noink></paper-icon-button>
|
||||
</core-toolbar>
|
||||
<div class="detailContent">
|
||||
<!--Name and plural name-->
|
||||
<paper-input id="containerNameInput" label="Name" floatinglabel value={{name}}></paper-input>
|
||||
<!--Color-->
|
||||
{{> colorDropdown}}
|
||||
<!--Weight-->
|
||||
<paper-input-decorator label="Weight" floatinglabel>
|
||||
<input id="weightInput" type="number" value={{weight}}>
|
||||
</paper-input-decorator>
|
||||
<!--Value-->
|
||||
<paper-input-decorator label="Value" floatinglabel>
|
||||
<input id="valueInput" type="number" value={{value}}>
|
||||
</paper-input-decorator>
|
||||
<!--Description-->
|
||||
<paper-input-decorator label="Description" floatinglabel layout vertical>
|
||||
<paper-autogrow-textarea>
|
||||
<textarea id="containerDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
</paper-input-decorator>
|
||||
</div>
|
||||
</core-header-panel>
|
||||
{{#baseDialog title=name class=colorClass}}
|
||||
<!--Name and plural name-->
|
||||
<paper-input id="containerNameInput" label="Name" floatinglabel value={{name}}></paper-input>
|
||||
<!--Weight-->
|
||||
<paper-input-decorator label="Weight" floatinglabel>
|
||||
<input id="weightInput" type="number" value={{weight}}>
|
||||
</paper-input-decorator>
|
||||
<!--Value-->
|
||||
<paper-input-decorator label="Value" floatinglabel>
|
||||
<input id="valueInput" type="number" value={{value}}>
|
||||
</paper-input-decorator>
|
||||
<!--Description-->
|
||||
<paper-input-decorator label="Description" floatinglabel layout vertical>
|
||||
<paper-autogrow-textarea>
|
||||
<textarea id="containerDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
</paper-input-decorator>
|
||||
{{/baseDialog}}
|
||||
{{/with}}
|
||||
</template>
|
||||
@@ -1,31 +1,17 @@
|
||||
Template.containerDialog.rendered = function(){
|
||||
var self = this;
|
||||
//update all autogrows after they've been filled
|
||||
var pata = this.$("paper-autogrow-textarea");
|
||||
pata.each(function(index, el){
|
||||
el.update($(el).children().get(0));
|
||||
})
|
||||
//update all input fields as well
|
||||
var input = this.$("paper-input");
|
||||
input.each(function(index, el){
|
||||
el.valueChanged();
|
||||
})
|
||||
//after the dialog is built, open it
|
||||
if (!this.alreadyRendered){
|
||||
Session.set("global.ui.detailShow", true);
|
||||
this.alreadyRendered = true;
|
||||
Template.containerDialog.helpers({
|
||||
container: function(){
|
||||
return Containers.findOne(this.containerId);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Template.containerDialog.events({
|
||||
"tap #backButton": function(){
|
||||
GlobalUI.closeDetail();
|
||||
"color-change": function(event, instance){
|
||||
Containers.update(instance.data.containerId, {$set: {color: event.color}});
|
||||
},
|
||||
"tap #deleteContainer": function(){
|
||||
Containers.remove(this._id);
|
||||
GlobalUI.closeDetail();
|
||||
"tap #deleteButton": function(event, instance){
|
||||
Containers.remove(instance.data.containerId);
|
||||
GlobalUI.closeDetail()
|
||||
},
|
||||
//TODO clean up String -> num here so they don't need casting by Schema.clean
|
||||
//TODO validate input (integer, non-negative, etc) for these inputs and give validation errors
|
||||
"change #containerNameInput, input #containerNameInput": function(event){
|
||||
console.log("changed Nameinput")
|
||||
@@ -33,30 +19,15 @@ Template.containerDialog.events({
|
||||
Containers.update(this._id, {$set: {name: name}});
|
||||
},
|
||||
"change #weightInput, input #weightInput": function(event){
|
||||
var weight = Template.instance().find("#weightInput").value;
|
||||
var weight = +Template.instance().find("#weightInput").value;
|
||||
Containers.update(this._id, {$set: {weight: weight}});
|
||||
},
|
||||
"change #valueInput, input #valueInput": function(event){
|
||||
var value = Template.instance().find("#valueInput").value;
|
||||
var value = +Template.instance().find("#valueInput").value;
|
||||
Containers.update(this._id, {$set: {value: value}});
|
||||
},
|
||||
"change #containerDescriptionInput": function(event){
|
||||
var description = Template.instance().find("#containerDescriptionInput").value;
|
||||
Containers.update(this._id, {$set: {description: description}});
|
||||
},
|
||||
"core-select .colorDropdown": function(event){
|
||||
var detail = event.originalEvent.detail;
|
||||
if(!detail.isSelected) return;
|
||||
var value = detail.item.getAttribute("name");
|
||||
Containers.update(this._id, {$set: {color: value}});
|
||||
}
|
||||
});
|
||||
|
||||
Template.containerDialog.helpers({
|
||||
container: function(){
|
||||
return Containers.findOne(this.containerId);
|
||||
},
|
||||
colorClass: function(){
|
||||
return getColorClass(this.color)
|
||||
}
|
||||
});
|
||||
@@ -1,84 +1,62 @@
|
||||
<template name="itemDialog">
|
||||
{{#with item}}
|
||||
<core-header-panel fit>
|
||||
<core-toolbar hero-id="toolbar" hero class="brown white-text">
|
||||
<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
|
||||
<div flex>{{name}}</div>
|
||||
<paper-icon-button id="deleteItem"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
icon="delete"
|
||||
aria-label="Delete Feature"
|
||||
noink></paper-icon-button>
|
||||
</core-toolbar>
|
||||
<div class="detailContent">
|
||||
<!--Name and plural name-->
|
||||
<paper-input id="itemNameInput" class="fullwidth" label="Name" floatinglabel value={{name}}></paper-input>
|
||||
{{# if ne1 quantity}}<paper-input id="itemPluralInput" label="Plural Name" floatinglabel value={{plural}}></paper-input>{{/if}}
|
||||
<!--Equipped-->
|
||||
{{# if canEquip}}
|
||||
<div center horizontal layout>
|
||||
<div flex>Equipped</div>
|
||||
<paper-toggle-button id="equippedInput"
|
||||
checked={{equipped}}
|
||||
role="button"
|
||||
aria-pressed="false"
|
||||
tabindex="0"
|
||||
touch-action="pan-y">
|
||||
</paper-toggle-button>
|
||||
</div>
|
||||
{{/if}}
|
||||
<!--Quantity-->
|
||||
<paper-input-decorator label="Quantity" floatinglabel>
|
||||
<input id="quantityInput" type="number" value={{quantity}}>
|
||||
</paper-input-decorator>
|
||||
<!--Weight-->
|
||||
<paper-input-decorator label="Weight Each (lbs)" floatinglabel>
|
||||
<input id="weightInput" type="number" value={{weight}}>
|
||||
</paper-input-decorator>
|
||||
<!--Value-->
|
||||
<paper-input-decorator label="Value Each (GP)" floatinglabel>
|
||||
<input id="valueInput" type="number" value={{value}}>
|
||||
</paper-input-decorator>
|
||||
<!--Description-->
|
||||
<paper-input-decorator label="Description" floatinglabel layout vertical>
|
||||
<paper-autogrow-textarea>
|
||||
<textarea id="itemDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
</paper-input-decorator>
|
||||
<!--Container dropdown-->
|
||||
<paper-dropdown-menu id="containerDropDown" label="Container">
|
||||
<paper-dropdown layered class="dropdown">
|
||||
<core-menu class="menu" selected={{containerIndex}}>
|
||||
{{#each containers}}
|
||||
<paper-item containerId={{_id}} class="containerMenuItem">{{name}}</paper-item>
|
||||
{{/each}}
|
||||
</core-menu>
|
||||
</paper-dropdown>
|
||||
</paper-dropdown-menu>
|
||||
<!--Equipment slot dropdown-->
|
||||
<paper-dropdown-menu id="slotDropDown" label="slot">
|
||||
<paper-dropdown layered class="dropdown">
|
||||
<core-menu class="menu" selected={{equipmentSlotIndex}}>
|
||||
{{#each equipmentSlots}}
|
||||
<paper-item class="slotMenuItem" value={{value}}>{{name}}</paper-item>
|
||||
{{/each}}
|
||||
</core-menu>
|
||||
</paper-dropdown>
|
||||
</paper-dropdown-menu>
|
||||
|
||||
<!--Effects-->
|
||||
{{#if effects}}
|
||||
<hr style="margin: 16px 0 16px 0;">
|
||||
<div id="effects">
|
||||
<h2>Effects</h2>
|
||||
{{#each effects}}
|
||||
{{>effectEdit}}
|
||||
{{#baseDialog title=name class=colorClass}}
|
||||
<!--Name and plural name-->
|
||||
<paper-input id="itemNameInput" class="fullwidth" label="Name" floatinglabel value={{name}}></paper-input>
|
||||
{{# if ne1 quantity}}<paper-input id="itemPluralInput" label="Plural Name" floatinglabel value={{plural}}></paper-input>{{/if}}
|
||||
<!--Container dropdown-->
|
||||
<paper-dropdown-menu id="containerDropDown" label="Container">
|
||||
<paper-dropdown layered class="dropdown">
|
||||
<core-menu class="menu" selected={{containerIndex}}>
|
||||
{{#each containers}}
|
||||
<paper-item containerId={{_id}} class="containerMenuItem">{{name}}</paper-item>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
<paper-button id="addEffectButton" raised>Add Effect</paper-button>
|
||||
</div>
|
||||
</core-header-panel>
|
||||
</core-menu>
|
||||
</paper-dropdown>
|
||||
</paper-dropdown-menu>
|
||||
<!--Equipment slot dropdown-->
|
||||
<paper-dropdown-menu id="slotDropDown" label="slot">
|
||||
<paper-dropdown layered class="dropdown">
|
||||
<core-menu class="menu" selected={{equipmentSlotIndex}}>
|
||||
{{#each equipmentSlots}}
|
||||
<paper-item class="slotMenuItem" value={{value}}>{{name}}</paper-item>
|
||||
{{/each}}
|
||||
</core-menu>
|
||||
</paper-dropdown>
|
||||
</paper-dropdown-menu>
|
||||
<!--Equipped-->
|
||||
{{# if canEquip}}
|
||||
<div center horizontal layout>
|
||||
<div flex>Equipped</div>
|
||||
<paper-toggle-button id="equippedInput"
|
||||
checked={{equipped}}
|
||||
role="button"
|
||||
aria-pressed="false"
|
||||
tabindex="0"
|
||||
touch-action="pan-y">
|
||||
</paper-toggle-button>
|
||||
</div>
|
||||
{{/if}}
|
||||
<!--Quantity-->
|
||||
<paper-input-decorator label="Quantity" floatinglabel>
|
||||
<input id="quantityInput" type="number" value={{quantity}}>
|
||||
</paper-input-decorator>
|
||||
<!--Weight-->
|
||||
<paper-input-decorator label="Weight Each (lbs)" floatinglabel>
|
||||
<input id="weightInput" type="number" value={{weight}}>
|
||||
</paper-input-decorator>
|
||||
<!--Value-->
|
||||
<paper-input-decorator label="Value Each (GP)" floatinglabel>
|
||||
<input id="valueInput" type="number" value={{value}}>
|
||||
</paper-input-decorator>
|
||||
<!--Description-->
|
||||
<paper-input-decorator label="Description" floatinglabel layout vertical>
|
||||
<paper-autogrow-textarea>
|
||||
<textarea id="itemDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
</paper-input-decorator>
|
||||
<!--Effects-->
|
||||
{{> effectsEditList sourceId=_id charId=charId type="equipment"}}
|
||||
{{/baseDialog}}
|
||||
{{/with}}
|
||||
</template>
|
||||
@@ -1,39 +1,51 @@
|
||||
Template.itemDialog.rendered = function(){
|
||||
var self = this;
|
||||
//update all autogrows after they've been filled
|
||||
var pata = this.$("paper-autogrow-textarea");
|
||||
pata.each(function(index, el){
|
||||
el.update($(el).children().get(0));
|
||||
})
|
||||
//update all input fields as well
|
||||
var input = this.$("paper-input");
|
||||
input.each(function(index, el){
|
||||
el.valueChanged();
|
||||
})
|
||||
//after the dialog is built, open it
|
||||
if (!this.alreadyRendered){
|
||||
Session.set("global.ui.detailShow", true);
|
||||
this.alreadyRendered = true;
|
||||
var getContainers = function(charId){
|
||||
return Containers.find({charId: charId}, {sort: {name: 1, _id: 1}, fields: {name: 1}}).fetch();
|
||||
};
|
||||
|
||||
var equipmentSlots = [
|
||||
{name: "None", value: "none"},
|
||||
{name: "Held", value: "held"},
|
||||
{name: "Armor", value: "armor"},
|
||||
{name: "Head", value: "head"},
|
||||
{name: "Arms", value: "arms"},
|
||||
{name: "Hands", value: "hands"},
|
||||
{name: "Feet", value: "feet"}
|
||||
];
|
||||
|
||||
Template.itemDialog.helpers({
|
||||
item: function(){
|
||||
return Items.findOne(this.itemId);
|
||||
},
|
||||
containers: function(){
|
||||
return getContainers(this.charId);
|
||||
},
|
||||
containerIndex: function(){
|
||||
var containers = getContainers(this.charId);
|
||||
var containerIds = _.pluck(containers, "_id");
|
||||
return _.indexOf(containerIds, this.container);
|
||||
},
|
||||
equipmentSlots: function(){
|
||||
return equipmentSlots;
|
||||
},
|
||||
equipmentSlotIndex: function(){
|
||||
return _.indexOf(_.pluck(equipmentSlots, "value"), this.equipmentSlot);
|
||||
},
|
||||
canEquip: function(){
|
||||
return this.equipmentSlot !== "none";
|
||||
},
|
||||
ne1: function(num){
|
||||
return num != 1;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Template.itemDialog.events({
|
||||
"tap #backButton": function(){
|
||||
GlobalUI.closeDetail();
|
||||
"color-change": function(event, instance){
|
||||
Items.update(instance.data.itemId, {$set: {color: event.color}});
|
||||
},
|
||||
"tap #deleteItem": function(){
|
||||
Items.remove(this._id);
|
||||
GlobalUI.closeDetail();
|
||||
"tap #deleteButton": function(event, instance){
|
||||
Items.remove(instance.data.itemId);
|
||||
GlobalUI.closeDetail()
|
||||
},
|
||||
"tap #addEffectButton": function(){
|
||||
Effects.insert({
|
||||
charId: Template.currentData().charId,
|
||||
sourceId: this._id,
|
||||
operation: "add",
|
||||
type: "equipment"
|
||||
});
|
||||
},
|
||||
//TODO clean up String -> num here so they don't need casting by Schema.clean
|
||||
//TODO validate input (integer, non-negative, etc) for these inputs and give validation errors
|
||||
"change #itemNameInput, input #itemNameInput": function(event){
|
||||
console.log("changed Nameinput")
|
||||
@@ -45,15 +57,15 @@ Template.itemDialog.events({
|
||||
Items.update(this._id, {$set: {plural: plural}});
|
||||
},
|
||||
"change #quantityInput, input #quantityInput": function(event){
|
||||
var quantity = Template.instance().find("#quantityInput").value;
|
||||
var quantity = +Template.instance().find("#quantityInput").value;
|
||||
Items.update(this._id, {$set: {quantity: quantity}});
|
||||
},
|
||||
"change #weightInput, input #weightInput": function(event){
|
||||
var weight = Template.instance().find("#weightInput").value;
|
||||
var weight = +Template.instance().find("#weightInput").value;
|
||||
Items.update(this._id, {$set: {weight: weight}});
|
||||
},
|
||||
"change #valueInput, input #valueInput": function(event){
|
||||
var value = Template.instance().find("#valueInput").value;
|
||||
var value = +Template.instance().find("#valueInput").value;
|
||||
Items.update(this._id, {$set: {value: value}});
|
||||
},
|
||||
"change #itemDescriptionInput": function(event){
|
||||
@@ -77,47 +89,3 @@ Template.itemDialog.events({
|
||||
Items.update(Template.currentData().itemId, {$set: {equipmentSlot: value}});
|
||||
}
|
||||
});
|
||||
|
||||
var getContainers = function(charId){
|
||||
return Containers.find({charId: charId}, {sort: {name: 1, _id: 1}, fields: {name: 1}}).fetch();
|
||||
};
|
||||
|
||||
var equipmentSlots = [
|
||||
{name: "None", value: "none"},
|
||||
{name: "Held", value: "held"},
|
||||
{name: "Armor", value: "armor"},
|
||||
{name: "Head", value: "head"},
|
||||
{name: "Arms", value: "arms"},
|
||||
{name: "Hands", value: "hands"},
|
||||
{name: "Feet", value: "feet"}
|
||||
];
|
||||
|
||||
Template.itemDialog.helpers({
|
||||
item: function(){
|
||||
return Items.findOne(this.itemId);
|
||||
},
|
||||
effects: function(){
|
||||
var cursor = Effects.find({charId: this.charId, type: "equipment", sourceId: this._id})
|
||||
return cursor;
|
||||
},
|
||||
containers: function(){
|
||||
return getContainers(this.charId);
|
||||
},
|
||||
containerIndex: function(){
|
||||
var containers = getContainers(this.charId);
|
||||
var containerIds = _.pluck(containers, "_id");
|
||||
return _.indexOf(containerIds, this.container);
|
||||
},
|
||||
equipmentSlots: function(){
|
||||
return equipmentSlots;
|
||||
},
|
||||
equipmentSlotIndex: function(){
|
||||
return _.indexOf(_.pluck(equipmentSlots, "value"), this.equipmentSlot);
|
||||
},
|
||||
canEquip: function(){
|
||||
return this.equipmentSlot !== "none";
|
||||
},
|
||||
ne1: function(num){
|
||||
return num != 1;
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user