Implemented Persona tab

rpg-docs/Model/Character/Characters.js

@@ -13,7 +13,6 @@ Schemas.Character = new SimpleSchema({
 	bonds:      { type: String, defaultValue: "", trim: false},
 	flaws:      { type: String, defaultValue: "", trim: false},
 	backstory:  { type: String, defaultValue: "", trim: false},
-	notes:      { type: String, defaultValue: "", trim: false},
 
 	//attributes
 	//ability scores

rpg-docs/client/views/character/persona/peronaDetailsDialog/personaDetailsDialog.html

@@ -0,0 +1,24 @@
+<template name="personaDetailsDialog">
+	<core-header-panel fit>
+		<core-toolbar hero-id="toolbar" 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-->
+			<paper-input id="nameInput" label="Name" floatinglabel value={{name}}></paper-input><br>
+			<!--Alignment-->
+			<paper-input id="alignmentInput" label="Alignment" floatinglabel value={{alignment}}></paper-input><br>
+			<!--Gender-->
+			<paper-input id="genderInput" label="Gender" floatinglabel value={{gender}}></paper-input><br>
+			<!--Race-->
+			<paper-input id="raceInput" label="Race" floatinglabel value={{race}}></paper-input><br>
+		</div>
+	</core-header-panel>
+</template>

rpg-docs/client/views/character/persona/peronaDetailsDialog/personaDetailsDialog.js

@@ -0,0 +1,41 @@
+Template.personaDetailsDialog.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.personaDetailsDialog.helpers({
+	
+});
+
+Template.personaDetailsDialog.events({
+	"change #nameInput": function(event){
+		var input = event.currentTarget.value;
+		Characters.update( this.charId, {$set: {name: input}} );
+	},
+	"change #alignmentInput": function(event){
+		var input = event.currentTarget.value;
+		Characters.update( this.charId, {$set: {alignment: input}} );
+	},
+	"change #genderInput": function(event){
+		var input = event.currentTarget.value;
+		Characters.update( this.charId, {$set: {gender: input}} );
+	},
+	"change #raceInput": function(event){
+		var input = event.currentTarget.value;
+		Characters.update( this.charId, {$set: {race: input}} );
+	}
+});

rpg-docs/client/views/character/persona/persona.css

@@ -0,0 +1,5 @@
+#persona .containerMain{
+	margin: 0;
+	padding: 16px 0 0 0;
+	white-space: pre-line;
+}

rpg-docs/client/views/character/persona/persona.html

@@ -0,0 +1,30 @@
+<template name="persona">
+	<div fit>
+		<div id="persona" class="scroll-y" fit>
+			<div class="containers">
+				{{#with characterDetails}}
+					{{#containerCardHelper this}}{{alignment}} {{gender}} {{race}}{{/containerCardHelper}}
+				{{/with}}
+				{{> containerCard characterField "description" "Description"}}
+				{{> containerCard characterField "personality" "Personality Traits"}}
+				{{> containerCard characterField "ideals" "Ideals"}}
+				{{> containerCard characterField "bonds" "Bonds"}}
+				{{> containerCard characterField "flaws" "Flaws"}}
+				{{> containerCard characterField "backstory" "Background"}}
+			</div>
+		</div>
+	</div>
+</template>
+
+<template name="containerCard">
+	{{#containerCardHelper this}}{{body}}{{/containerCardHelper}}
+</template>
+
+<template name="containerCardHelper">
+	<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
+		<div class="containerTop green white-text" hero-id="toolbar" layout horizontal center {{detailHero}}>
+			<div class="containerName title" hero-id="title" flex {{detailHero}}>{{title}}</div>
+		</div>
+		<div flex class="containerMain">{{> UI.contentBlock}}</div>
+	</paper-shadow>
+</template>

rpg-docs/client/views/character/persona/persona.js

@@ -0,0 +1,35 @@
+Template.persona.helpers({
+	characterDetails: function(){
+		var char = Characters.findOne(this._id, {fields: {name: 1, gender: 1, alignment: 1, race:1}})
+		char._id += "details";
+		char.title = char.name;
+		return char;
+	},
+	characterField: function(field, title){
+		var fieldSelector = {fields: {}};
+		fieldSelector.fields[field] = 1;
+		var char = Characters.findOne(this._id, fieldSelector);
+		console.log("body is ", char[field])
+		return {_id: char._id + field, title: title, field: field, body: char[field]};
+	}
+});
+
+Template.persona.events({
+	"tap .containerTop": function(event){
+		if(this.field){
+			var charId = Template.parentData()._id;
+			GlobalUI.setDetail({
+				template: "textDialog",
+				data:     {charId: charId, field: this.field, title: this.title},
+				heroId:   this._id
+			});
+		} else{
+			this.charId = Template.parentData()._id;
+			GlobalUI.setDetail({
+				template: "personaDetailsDialog",
+				data:     this,
+				heroId:   this._id
+			});
+		}		
+	}
+});

rpg-docs/client/views/character/persona/textDialog/textDialog.html

@@ -0,0 +1,22 @@
+<template name="textDialog">
+	<core-header-panel fit>
+		<core-toolbar hero-id="toolbar" 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>{{title}}</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">
+			<!--Description-->
+			<paper-input-decorator label={{title}} floatinglabel layout vertical>
+				<paper-autogrow-textarea>
+					<textarea id="textInput" placeholder value={{value}}></textarea>
+				</paper-autogrow-textarea>
+			</paper-input-decorator>
+		</div>
+	</core-header-panel>
+</template>

rpg-docs/client/views/character/persona/textDialog/textDialog.js

@@ -0,0 +1,36 @@
+Template.textDialog.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.textDialog.helpers({
+	value: function(){
+		var fieldSelector = {fields: {}};
+		fieldSelector.fields[this.field] = 1;
+		var char = Characters.findOne(this.charId, fieldSelector);
+		return char[this.field];
+	}
+});
+
+Template.textDialog.events({
+	"change #textInput": function(event){
+		var input = event.currentTarget.value;
+		var setter = {$set: {}};
+		setter.$set[this.field] = input;
+		Characters.update(this.charId, setter);
+	}
+});