Generalised some dialogs
This commit is contained in:
Thaum
@@ -1,89 +1,75 @@
|
||||
<template name="spellDialog">
|
||||
{{#with spell}}
|
||||
<core-header-panel fit class="spellDialog">
|
||||
<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="deleteSpell"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
icon="delete"
|
||||
aria-label="Delete Feature"
|
||||
noink></paper-icon-button>
|
||||
</core-toolbar>
|
||||
<div class="detailContent">
|
||||
<!--Name-->
|
||||
<div horizontal layout>
|
||||
<paper-input id="spellNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
|
||||
<!--Color-->
|
||||
{{> colorDropdown}}<br>
|
||||
</div>
|
||||
<!--List dropdown-->
|
||||
<paper-dropdown-menu id="listDropdown" label="Spell List">
|
||||
<paper-dropdown layered class="dropdown">
|
||||
<core-menu class="menu" selected={{listId}}>
|
||||
{{#each spellLists}}
|
||||
<paper-item name={{_id}} class="containerMenuItem">{{name}}</paper-item>
|
||||
{{/each}}
|
||||
</core-menu>
|
||||
</paper-dropdown>
|
||||
</paper-dropdown-menu>
|
||||
<!--Level-->
|
||||
<paper-dropdown-menu id="levelDropdown" label="Level">
|
||||
<paper-dropdown layered class="dropdown">
|
||||
<core-menu class="menu" selected={{level}}>
|
||||
{{#each spellLevels}}
|
||||
<paper-item name={{level}} class="containerMenuItem">{{name}}</paper-item>
|
||||
{{/each}}
|
||||
</core-menu>
|
||||
</paper-dropdown>
|
||||
</paper-dropdown-menu>
|
||||
<!--School-->
|
||||
<paper-dropdown-menu id="schoolDropdown" label="School">
|
||||
<paper-dropdown layered class="dropdown">
|
||||
<core-menu class="menu" selected={{school}}>
|
||||
{{#each magicSchools}}
|
||||
<paper-item name={{this}} class="containerMenuItem">{{this}}</paper-item>
|
||||
{{/each}}
|
||||
</core-menu>
|
||||
</paper-dropdown>
|
||||
</paper-dropdown-menu>
|
||||
<!--Prepared-->
|
||||
<paper-dropdown-menu id="preparedDropdown" label="School">
|
||||
<paper-dropdown layered class="dropdown">
|
||||
<core-menu class="menu" selected={{prepared}}>
|
||||
{{#each preparedOptions}}
|
||||
<paper-item name={{value}} class="containerMenuItem">{{name}}</paper-item>
|
||||
{{/each}}
|
||||
</core-menu>
|
||||
</paper-dropdown>
|
||||
</paper-dropdown-menu>
|
||||
<!--Components-->
|
||||
<div horizontal layout center wrap>
|
||||
<div>Verbal:</div>
|
||||
<paper-checkbox id="verbalCheckbox" checked={{components.verbal}}></paper-checkbox>
|
||||
<div>Somatic:</div>
|
||||
<paper-checkbox id="somaticCheckbox" checked={{components.somatic}}></paper-checkbox>
|
||||
<div>Concentration:</div>
|
||||
<paper-checkbox id="concentrationCheckbox" checked={{components.concentration}}></paper-checkbox>
|
||||
<!--Ritual-->
|
||||
<div>Ritual: </div>
|
||||
<paper-checkbox id="ritualCheckbox" checked={{ritual}}></paper-checkbox>
|
||||
</div>
|
||||
<paper-input id="materialInput" class="fullwidth" label="Material Components" floatinglabel value={{components.material}} flex></paper-input>
|
||||
<!--Casting Time-->
|
||||
<paper-input id="castingTimeInput" class="fullwidth" label="Casting Time" floatinglabel value={{castingTime}} flex></paper-input>
|
||||
<!--Range-->
|
||||
<paper-input id="rangeInput" class="fullwidth" label="Range" floatinglabel value={{range}} flex></paper-input>
|
||||
<!--Duration-->
|
||||
<paper-input id="durationInput" class="fullwidth" label="Duration" floatinglabel value={{duration}} flex></paper-input>
|
||||
<!--Description-->
|
||||
<paper-input-decorator label="Description" floatinglabel layout vertical>
|
||||
<paper-autogrow-textarea>
|
||||
<textarea id="descriptionInput" placeholder value={{description}}></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
</paper-input-decorator>
|
||||
{{#baseDialog title=name class=colorClass}}
|
||||
<!--Name-->
|
||||
<div horizontal layout>
|
||||
<paper-input id="spellNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
|
||||
</div>
|
||||
</core-header-panel>
|
||||
<!--List dropdown-->
|
||||
<paper-dropdown-menu id="listDropdown" label="Spell List">
|
||||
<paper-dropdown layered class="dropdown">
|
||||
<core-menu class="menu" selected={{listId}}>
|
||||
{{#each spellLists}}
|
||||
<paper-item name={{_id}} class="containerMenuItem">{{name}}</paper-item>
|
||||
{{/each}}
|
||||
</core-menu>
|
||||
</paper-dropdown>
|
||||
</paper-dropdown-menu>
|
||||
<!--Level-->
|
||||
<paper-dropdown-menu id="levelDropdown" label="Level">
|
||||
<paper-dropdown layered class="dropdown">
|
||||
<core-menu class="menu" selected={{level}}>
|
||||
{{#each spellLevels}}
|
||||
<paper-item name={{level}} class="containerMenuItem">{{name}}</paper-item>
|
||||
{{/each}}
|
||||
</core-menu>
|
||||
</paper-dropdown>
|
||||
</paper-dropdown-menu>
|
||||
<!--School-->
|
||||
<paper-dropdown-menu id="schoolDropdown" label="School">
|
||||
<paper-dropdown layered class="dropdown">
|
||||
<core-menu class="menu" selected={{school}}>
|
||||
{{#each magicSchools}}
|
||||
<paper-item name={{this}} class="containerMenuItem">{{this}}</paper-item>
|
||||
{{/each}}
|
||||
</core-menu>
|
||||
</paper-dropdown>
|
||||
</paper-dropdown-menu>
|
||||
<!--Prepared-->
|
||||
<paper-dropdown-menu id="preparedDropdown" label="School">
|
||||
<paper-dropdown layered class="dropdown">
|
||||
<core-menu class="menu" selected={{prepared}}>
|
||||
{{#each preparedOptions}}
|
||||
<paper-item name={{value}} class="containerMenuItem">{{name}}</paper-item>
|
||||
{{/each}}
|
||||
</core-menu>
|
||||
</paper-dropdown>
|
||||
</paper-dropdown-menu>
|
||||
<!--Components-->
|
||||
<div horizontal layout center wrap>
|
||||
<div>Verbal:</div>
|
||||
<paper-checkbox id="verbalCheckbox" checked={{components.verbal}}></paper-checkbox>
|
||||
<div>Somatic:</div>
|
||||
<paper-checkbox id="somaticCheckbox" checked={{components.somatic}}></paper-checkbox>
|
||||
<div>Concentration:</div>
|
||||
<paper-checkbox id="concentrationCheckbox" checked={{components.concentration}}></paper-checkbox>
|
||||
<!--Ritual-->
|
||||
<div>Ritual: </div>
|
||||
<paper-checkbox id="ritualCheckbox" checked={{ritual}}></paper-checkbox>
|
||||
</div>
|
||||
<paper-input id="materialInput" class="fullwidth" label="Material Components" floatinglabel value={{components.material}} flex></paper-input>
|
||||
<!--Casting Time-->
|
||||
<paper-input id="castingTimeInput" class="fullwidth" label="Casting Time" floatinglabel value={{castingTime}} flex></paper-input>
|
||||
<!--Range-->
|
||||
<paper-input id="rangeInput" class="fullwidth" label="Range" floatinglabel value={{range}} flex></paper-input>
|
||||
<!--Duration-->
|
||||
<paper-input id="durationInput" class="fullwidth" label="Duration" floatinglabel value={{duration}} flex></paper-input>
|
||||
<!--Description-->
|
||||
<paper-input-decorator label="Description" floatinglabel layout vertical>
|
||||
<paper-autogrow-textarea>
|
||||
<textarea id="descriptionInput" placeholder value={{description}}></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
</paper-input-decorator>
|
||||
{{/baseDialog}}
|
||||
{{/with}}
|
||||
</template>
|
||||
@@ -11,35 +11,36 @@ var spellLevels = [
|
||||
{ name: "Level 9", level: 9 },
|
||||
];
|
||||
|
||||
Template.spellDialog.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.spellDialog.helpers({
|
||||
spell: function(){
|
||||
return Spells.findOne(this.spellId);
|
||||
},
|
||||
spellLists: function(){
|
||||
return SpellLists.find({charId: this.charId}, {fields: {name: 1}});
|
||||
},
|
||||
magicSchools: function(){
|
||||
return magicSchools;
|
||||
},
|
||||
spellLevels: function(){
|
||||
return spellLevels;
|
||||
},
|
||||
preparedOptions: function(){
|
||||
return [
|
||||
{name: "Prepared", value: "prepared"},
|
||||
{name: "Unprepared", value: "unprepared"},
|
||||
{name: "Always Prepared", value: "always"}
|
||||
];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Template.spellDialog.events({
|
||||
"tap #backButton": function(){
|
||||
GlobalUI.closeDetail();
|
||||
"color-change": function(event, instance){
|
||||
Spells.update(instance.data.spellId, {$set: {color: event.color}});
|
||||
},
|
||||
"tap #deleteSpell": function(){
|
||||
Spells.remove(this._id);
|
||||
GlobalUI.closeDetail();
|
||||
"tap #deleteButton": function(event, instance){
|
||||
Spells.remove(instance.data.spellId);
|
||||
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 #spellNameInput, input #spellNameInput": function(event){
|
||||
var value = event.currentTarget.value
|
||||
Spells.update(this._id, {$set: {name: value}});
|
||||
@@ -92,13 +93,6 @@ Template.spellDialog.events({
|
||||
if(value == this.school) return;
|
||||
Spells.update(this._id, {$set: {prepared: value}});
|
||||
},
|
||||
"core-select .colorDropdown": function(event){
|
||||
var detail = event.originalEvent.detail;
|
||||
if(!detail.isSelected) return;
|
||||
var value = detail.item.getAttribute("name");
|
||||
if(value == this.color) return;
|
||||
Spells.update(this._id, {$set: {color: value}});
|
||||
},
|
||||
"change #verbalCheckbox": function(event){
|
||||
var value = event.currentTarget.checked;
|
||||
Spells.update(this._id, {$set: {"components.verbal": value}});
|
||||
@@ -116,28 +110,3 @@ Template.spellDialog.events({
|
||||
Spells.update(this._id, {$set: {"ritual": value}});
|
||||
},
|
||||
});
|
||||
|
||||
Template.spellDialog.helpers({
|
||||
spell: function(){
|
||||
return Spells.findOne(this.spellId);
|
||||
},
|
||||
colorClass: function(){
|
||||
return getColorClass(this.color)
|
||||
},
|
||||
spellLists: function(){
|
||||
return SpellLists.find({charId: this.charId}, {fields: {name: 1}});
|
||||
},
|
||||
magicSchools: function(){
|
||||
return magicSchools;
|
||||
},
|
||||
spellLevels: function(){
|
||||
return spellLevels;
|
||||
},
|
||||
preparedOptions: function(){
|
||||
return [
|
||||
{name: "Prepared", value: "prepared"},
|
||||
{name: "Unprepared", value: "unprepared"},
|
||||
{name: "Always Prepared", value: "always"}
|
||||
];
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user