Generalised some dialogs
This commit is contained in:
@@ -1,56 +1,31 @@
|
||||
<template name="featureDialog">
|
||||
{{#with feature}}
|
||||
<core-header-panel fit>
|
||||
<core-toolbar class={{colorClass}} 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="deleteFeature"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
icon="delete"
|
||||
aria-label="Delete Feature"
|
||||
noink></paper-icon-button>
|
||||
</core-toolbar>
|
||||
<div class="detailContent">
|
||||
<!--name-->
|
||||
<paper-input id="featureNameInput" label="Name" floatinglabel value={{name}}></paper-input>
|
||||
<!--color-->
|
||||
{{> colorDropdown}}
|
||||
<hr style="margin: 16px 0 16px 0;">
|
||||
<!--description-->
|
||||
<paper-input-decorator label="Description" floatinglabel layout vertical>
|
||||
<paper-autogrow-textarea>
|
||||
<textarea id="featureDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
</paper-input-decorator>
|
||||
<hr style="margin: 16px 0 16px 0;">
|
||||
<div layout horizontal center style="height: 60px;">
|
||||
<div class="caption">Limit Uses</div>
|
||||
<paper-toggle-button id="limitUseCheck"
|
||||
checked={{usesSet}}
|
||||
role="button"
|
||||
aria-pressed="false"
|
||||
tabindex="0"
|
||||
touch-action="pan-y"
|
||||
style="margin-left: 8px; margin-right:8px;">
|
||||
</paper-toggle-button>
|
||||
{{#if usesSet}}
|
||||
<paper-input id="usesInput" label="Uses" floatinglabel value={{uses}}></paper-input>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if effects}}
|
||||
<hr style="margin: 16px 0 16px 0;">
|
||||
<div id="effects">
|
||||
<h2>Effects</h2>
|
||||
{{#each effects}}
|
||||
{{>effectEdit}}
|
||||
{{/each}}
|
||||
</div>
|
||||
{{#baseDialog title=name class=colorClass}}
|
||||
<!--name-->
|
||||
<paper-input id="featureNameInput" label="Name" floatinglabel value={{name}}></paper-input>
|
||||
<hr style="margin: 16px 0 16px 0;">
|
||||
<!--description-->
|
||||
<paper-input-decorator label="Description" floatinglabel layout vertical>
|
||||
<paper-autogrow-textarea>
|
||||
<textarea id="featureDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
</paper-input-decorator>
|
||||
<hr style="margin: 16px 0 16px 0;">
|
||||
<div layout horizontal center style="height: 60px;">
|
||||
<div class="caption">Limit Uses</div>
|
||||
<paper-toggle-button id="limitUseCheck"
|
||||
checked={{usesSet}}
|
||||
role="button"
|
||||
aria-pressed="false"
|
||||
tabindex="0"
|
||||
touch-action="pan-y"
|
||||
style="margin-left: 8px; margin-right:8px;">
|
||||
</paper-toggle-button>
|
||||
{{#if usesSet}}
|
||||
<paper-input id="usesInput" label="Uses" floatinglabel value={{uses}}></paper-input>
|
||||
{{/if}}
|
||||
<div layout horizontal end-justified>
|
||||
<paper-button id="addEffectButton" raised>Add Effect</paper-button>
|
||||
</div>
|
||||
</div>
|
||||
</core-header-panel>
|
||||
{{> effectsEditList sourceId=_id charId=charId type="feature"}}
|
||||
{{/baseDialog}}
|
||||
{{/with}}
|
||||
</template>
|
||||
@@ -1,38 +1,11 @@
|
||||
Template.featureDialog.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.featureDialog.events({
|
||||
"tap #backButton": function(){
|
||||
GlobalUI.closeDetail()
|
||||
"color-change": function(event, instance){
|
||||
Features.update(instance.data.featureId, {$set: {color: event.color}});
|
||||
},
|
||||
"tap #deleteFeature": function(){
|
||||
Features.remove(this._id);
|
||||
"tap #deleteButton": function(event, instance){
|
||||
Features.remove(instance.data.featureId);
|
||||
GlobalUI.closeDetail()
|
||||
},
|
||||
"tap #addEffectButton": function(){
|
||||
Effects.insert({
|
||||
charId: Template.currentData().charId,
|
||||
sourceId: this._id,
|
||||
operation: "add",
|
||||
type: "feature"
|
||||
});
|
||||
},
|
||||
"change #featureNameInput": function(event){
|
||||
var name = Template.instance().find("#featureNameInput").value;
|
||||
Features.update(this._id, {$set: {name: name}});
|
||||
@@ -54,12 +27,6 @@ Template.featureDialog.events({
|
||||
var value = event.target.value;
|
||||
var featureId = this._id;
|
||||
Features.update(featureId, {$set: {uses: value}});
|
||||
},
|
||||
"core-select .colorDropdown": function(event){
|
||||
var detail = event.originalEvent.detail;
|
||||
if(!detail.isSelected) return;
|
||||
var value = detail.item.getAttribute("name");
|
||||
Features.update(this._id, {$set: {color: value}});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -67,10 +34,6 @@ Template.featureDialog.helpers({
|
||||
feature: function(){
|
||||
return Features.findOne(this.featureId);
|
||||
},
|
||||
effects: function(){
|
||||
var cursor = Effects.find({sourceId: this._id, type: "feature"})
|
||||
return cursor;
|
||||
},
|
||||
usesSet: function(){
|
||||
return _.isString(this.uses);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user