Generalised some dialogs

This commit is contained in:
Thaum
2015-02-27 06:14:34 +00:00
parent 56f8e95d81
commit 040d5a514b
50 changed files with 532 additions and 954 deletions

View File

@@ -1,32 +1,20 @@
<template name="experienceDialog">
{{#with experience}}
<core-header-panel fit class="experienceDialog">
<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="deleteExperience"
role="button"
tabindex="0"
icon="delete"
aria-label="Delete Feature"
noink></paper-icon-button>
</core-toolbar>
<div class="detailContent">
<div horizontal layout>
<!--Name-->
<paper-input id="experienceNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
<!--Value-->
<paper-input-decorator label="Value" floatinglabel>
<input id="valueInput" type="number" value={{value}}>
</paper-input-decorator>
</div>
<!--Description-->
<paper-input-decorator label="Description" floatinglabel layout vertical>
<paper-autogrow-textarea>
<textarea id="experienceDescriptionInput" placeholder value={{description}}></textarea>
</paper-autogrow-textarea>
{{#baseDialog title=name class=colorClass hideColor="true"}}
<div horizontal layout>
<!--Name-->
<paper-input id="experienceNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
<!--Value-->
<paper-input-decorator label="Value" floatinglabel>
<input id="valueInput" type="number" value={{value}}>
</paper-input-decorator>
</div>
</core-header-panel>
<!--Description-->
<paper-input-decorator label="Description" floatinglabel layout vertical>
<paper-autogrow-textarea>
<textarea id="experienceDescriptionInput" placeholder value={{description}}></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
{{/baseDialog}}
{{/with}}
</template>

View File

@@ -1,38 +1,15 @@
Template.experienceDialog.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.experienceDialog.events({
"tap #backButton": function(){
GlobalUI.closeDetail();
"tap #deleteButton": function(event, instance){
Experiences.remove(instance.data.experienceId);
GlobalUI.closeDetail()
},
"tap #deleteExperience": function(){
Experiences.remove(this._id);
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 #experienceNameInput, input #experienceNameInput": function(event){
var value = event.currentTarget.value
Experiences.update(this._id, {$set: {name: value}});
},
"change #valueInput": function(event){
var value = event.currentTarget.value
var value = +event.currentTarget.value
Experiences.update(this._id, {$set: {value: value}});
},
"change #experienceDescriptionInput": function(event){

View File

@@ -1,32 +1,10 @@
<template name="levelDialog">
{{#with level}}
<core-header-panel fit>
<core-toolbar class="grey white-text" hero-id="toolbar" hero>
<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="deleteLevel"
role="button"
tabindex="0"
icon="delete"
aria-label="Delete Level"
noink></paper-icon-button>
</core-toolbar>
<div class="detailContent">
<!--Level-->
<paper-input id="levelValueInput" label="Level" floatinglabel value={{value}}></paper-input>
{{#if effects}}
<hr style="margin: 16px 0 16px 0;">
<div id="effects">
<h2>Effects</h2>
{{#each effects}}
{{>effectEdit}}
{{/each}}
</div>
{{/if}}
<div layout horizontal end-justified>
<paper-button id="addEffectButton" raised>Add Effect</paper-button>
</div>
</div>
</core-header-panel>
{{#baseDialog title=name class=colorClass hideColor="true"}}
<!--Level-->
<paper-input id="levelValueInput" label="Level" floatinglabel value={{value}}></paper-input>
<!--Effects-->
{{> effectsEditList sourceId=_id charId=charId type="level"}}
{{/baseDialog}}
{{/with}}
</template>

View File

@@ -1,38 +1,8 @@
Template.levelDialog.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.levelDialog.events({
"tap #backButton": function(){
"tap #deleteButton": function(event, instance){
Levels.remove(instance.data.levelId);
GlobalUI.closeDetail()
},
"tap #deleteLevel": function(){
Levels.remove(this._id);
GlobalUI.closeDetail()
},
"tap #addEffectButton": function(){
Effects.insert({
charId: this.charId,
sourceId: this._id,
operation: "add",
type: "level"
});
},
"change #levelValueInput": function(event){
var value = event.currentTarget.value;
Levels.update(this._id, {$set: {value: value}});
@@ -42,8 +12,5 @@ Template.levelDialog.events({
Template.levelDialog.helpers({
level: function(){
return Levels.findOne(this.levelId);
},
effects: function(){
return Effects.find({sourceId: this._id, type: "level"});
}
});

View File

@@ -1,30 +1,16 @@
<template name="noteDialog">
{{#with note}}
<core-header-panel fit class="noteDialog">
<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="deleteNote"
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="noteNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
<!--Color-->
{{> colorDropdown}}<br>
</div>
<!--Description-->
<paper-input-decorator label="Description" floatinglabel layout vertical>
<paper-autogrow-textarea>
<textarea id="noteDescriptionInput" placeholder value={{description}}></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
{{#baseDialog title=name class=colorClass}}
<!--Name-->
<div horizontal layout>
<paper-input id="noteNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
</div>
</core-header-panel>
<!--Description-->
<paper-input-decorator label="Description" floatinglabel layout vertical>
<paper-autogrow-textarea>
<textarea id="noteDescriptionInput" placeholder value={{description}}></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
{{/baseDialog}}
{{/with}}
</template>

View File

@@ -1,32 +1,11 @@
Template.noteDialog.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.noteDialog.events({
"tap #backButton": function(){
GlobalUI.closeDetail();
"color-change": function(event, instance){
Notes.update(instance.data.noteId, {$set: {color: event.color}});
},
"tap #deleteNote": function(){
Notes.remove(this._id);
GlobalUI.closeDetail();
"tap #deleteButton": function(event, instance){
Notes.remove(instance.data.noteId);
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 #noteNameInput, input #noteNameInput": function(event){
var value = event.currentTarget.value
Notes.update(this._id, {$set: {name: value}});
@@ -34,12 +13,6 @@ Template.noteDialog.events({
"change #noteDescriptionInput": function(event){
var value = event.currentTarget.value
Notes.update(this._id, {$set: {description: value}});
},
"core-select .colorDropdown": function(event){
var detail = event.originalEvent.detail;
if(!detail.isSelected) return;
var value = detail.item.getAttribute("name");
Notes.update(this._id, {$set: {color: value}});
}
});

View File

@@ -1,23 +1,6 @@
<template name="raceDialog">
<core-header-panel fit>
<core-toolbar class="grey white-text" hero-id="toolbar" hero>
<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
<div flex>{{race}}</div>
</core-toolbar>
<div class="detailContent">
<paper-input id="raceInput" label="Race" floatinglabel value={{race}}></paper-input>
{{#if effects}}
<hr style="margin: 16px 0 16px 0;">
<div id="effects">
<h2>Effects</h2>
{{#each effects}}
{{>effectEdit}}
{{/each}}
</div>
{{/if}}
<div layout horizontal end-justified>
<paper-button id="addEffectButton" raised>Add Effect</paper-button>
</div>
</div>
</core-header-panel>
{{#baseDialog title="Race" class=colorClass hideColor="true" hideDelete="true"}}
<paper-input id="raceInput" label="Race" floatinglabel value={{race}}></paper-input>
{{> effectsEditList sourceId=_id charId=charId type="racial"}}
{{/baseDialog}}
</template>

View File

@@ -1,33 +1,4 @@
Template.raceDialog.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.raceDialog.events({
"tap #backButton": function(){
GlobalUI.closeDetail()
},
"tap #addEffectButton": function(){
Effects.insert({
charId: this.charId,
operation: "add",
type: "racial"
});
},
"change #raceInput": function(event){
var value = event.currentTarget.value;
Characters.update(this.charId, {$set: {race: value}});
@@ -35,9 +6,6 @@ Template.raceDialog.events({
});
Template.raceDialog.helpers({
effects: function(){
return Effects.find({charId: this.charId, type: "racial"});
},
race: function(){
var char = Characters.findOne(this.charId, {fields: {race: 1}});
return char && char.race;