Updated journal page to Polymer 1

rpg-docs/client/views/character/journal/classDialog/classDialog.html

@@ -1,8 +1,8 @@
 <template name="classDialog">
 	{{#with class}}
 		{{#baseDialog title=name class=colorClass startEditing=../startEditing}}
-			<div layout vertical center>
-				<div class="display2">
+			<div class="layout vertical center">
+				<div class="paper-font-display2">
 					{{level}}
 				</div>
 				<div>
@@ -14,12 +14,12 @@
 			{{> proficiencyViewList charId=charId parentId=_id}}
 		{{else}}
 			<!--Name-->
-			<paper-input id="classNameInput" label="Class Name" floatinglabel value={{name}}></paper-input>
+			<paper-input id="classNameInput" label="Class Name" value={{name}}></paper-input>
 			<!--Level-->
-			<paper-input id="levelValueInput" label="Level" floatinglabel value={{level}}></paper-input>
+			<paper-input id="levelValueInput" label="Level" value={{level}}></paper-input>
 			<!--Effects-->
 			{{> effectsEditList parentId=_id parentCollection="Classes" charId=charId}}
 			{{> proficiencyEditList parentId=_id parentCollection="Classes" charId=charId}}
 		{{/baseDialog}}
 	{{/with}}
-</template>
+</template>

rpg-docs/client/views/character/journal/classDialog/classDialog.js

@@ -1,28 +1,35 @@
-Template.classDialog.onRendered(function(){
-	updatePolymerInputs(this);
-});
-
-Template.classDialog.events({
-	"color-change": function(event, instance){
-		Classes.update(instance.data.classId, {$set: {color: event.color}});
-	},
-	"tap #deleteButton": function(event, instance){
-		Classes.softRemoveNode(instance.data.classId);
-		GlobalUI.deletedToast(instance.data.classId, "Classes", "Class");
-		GlobalUI.closeDetail();
-	},
-	"change #classNameInput": function(event){
-		var value = event.currentTarget.value;
-		Classes.update(this._id, {$set: {name: value}});
-	},
-	"change #levelValueInput": function(event){
-		var value = event.currentTarget.value;
-		Classes.update(this._id, {$set: {level: value}});
-	},
-});
+const debounce = (f) => _.debounce(f, 300);
 
 Template.classDialog.helpers({
 	class: function(){
 		return Classes.findOne(this.classId);
 	}
 });
+
+Template.classDialog.events({
+	"color-change": function(event, instance){
+		Classes.update(instance.data.classId, {$set: {color: event.color}});
+	},
+	"click #deleteButton": function(event, instance){
+		Classes.softRemoveNode(instance.data.classId);
+		GlobalUI.deletedToast(instance.data.classId, "Classes", "Class");
+		popDialogStack();
+	},
+	"input #classNameInput, change #classNameInput": debounce(function(event){
+		var value = event.currentTarget.value;
+		Classes.update(this._id, {
+			$set: {name: value}
+		}, {
+			removeEmptyStrings: false,
+			trimStrings: false,
+		});
+	}),
+	"input #levelValueInput, change #levelValueInput": debounce(function(event){
+		var value = event.currentTarget.value;
+		Classes.update(this._id, {
+			$set: {level: value}
+		}, {
+			removeEmptyStrings: false,
+		});
+	}),
+});

rpg-docs/client/views/character/journal/experienceDialog/experienceDialog.html

@@ -1,7 +1,7 @@
 <template name="experienceDialog">
 	{{#with experience}}
 		{{#baseDialog title=name class=color hideColor="true" startEditing=../startEditing}}
-			<div horizontal layout center-justified class= "display2">
+			<div  class="horizontal layout center-justified paper-font-display2">
 				{{value}}
 			</div>
 			{{#if description}}
@@ -15,18 +15,12 @@
 </template>
 
 <template name="experienceEdit">
-	<div horizontal layout>
+	<div class="horizontal layout">
 		<!--Name-->
-		<paper-input id="experienceNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
+		<paper-input id="experienceNameInput" label="Name" value={{name}} class="flex"></paper-input>
 		<!--Value-->
-		<paper-input-decorator label="Value" floatinglabel>
-			<input id="valueInput" type="number" value={{value}}>
-		</paper-input-decorator>
+		<paper-input id="valueInput" type="number" value={{value}} label="Value"></paper-input>
 	</div>
 	<!--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>
+	<paper-textarea id="experienceDescriptionInput" label="Description" value={{description}}></paper-textarea>
 </template>

rpg-docs/client/views/character/journal/experienceDialog/experienceDialog.js

@@ -1,7 +1,3 @@
-Template.experienceEdit.onRendered(function(){
-	updatePolymerInputs(this);
-});
-
 Template.experienceDialog.helpers({
 	experience: function(){
 		Experiences.findOne(this.experienceId);
@@ -20,21 +16,40 @@ Template.experienceDialog.events({
 			instance.data.experienceId,
 			"Experiences", "Experience"
 		);
-		GlobalUI.closeDetail();
+		popDialogStack();
 	},
 });
 
+const debounce = (f) => _.debounce(f, 300);
+
 Template.experienceEdit.events({
-	"change #experienceNameInput": function(event){
+	"input #experienceNameInput, change #experienceNameInput":
+	debounce(function(event){
 		var value = event.currentTarget.value;
-		Experiences.update(this._id, {$set: {name: value}});
-	},
-	"change #valueInput": function(event){
+		Experiences.update(this._id, {
+			$set: {name: value}
+		}, {
+			removeEmptyStrings: false,
+			trimStrings: false,
+		});
+	}),
+	"input #valueInput, change #valueInput":
+	debounce(function(event){
 		var value = +event.currentTarget.value;
-		Experiences.update(this._id, {$set: {value: value}});
-	},
-	"change #experienceDescriptionInput": function(event){
+		Experiences.update(this._id, {
+			$set: {value: value}
+		}, {
+			removeEmptyStrings: false,
+		});
+	}),
+	"input #experienceDescriptionInput":
+	debounce(function(event){
 		var value = event.currentTarget.value;
-		Experiences.update(this._id, {$set: {description: value}});
-	},
+		Experiences.update(this._id, {
+			$set: {description: value}
+		}, {
+			removeEmptyStrings: false,
+			trimStrings: false,
+		});
+	}),
 });

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

@@ -1,108 +1,91 @@
 <template name="journal">
-	<div fit>
-		<div id="journal" class="scroll-y" fit>
-			<div class="column-container">
-				<!--Experience Table-->
-				<div><paper-material class="card experiencesCard"
-							  hero-id="main" {{detailHero}}>
-					<div class="top white subhead"
-						 hero-id="toolbar" {{detailHero}}
-						 layout horizontal center>
-						<div flex>Experience</div>
-						<div >{{characterCalculate "experience" _id}} XP</div>
-						<paper-icon-button class="black54" id="addXP" icon="add"
-										   disabled={{#unless canEditCharacter _id}}true{{/unless}}></paper-icon-button>
-					</div>
-					<div class="bottom list">
-						{{#each experiences}}
-							<div class="item-slot">
-								<div class="item experience"
-									 hero-id="main" {{detailHero}}
-									 layout horizontal center>
-									<div flex>{{name}}</div>
-									<div class="xpValue">{{value}}</div>
-								</div>
-							</div>
-						{{/each}}
-					</div>
-					{{#if moreExperiencesOrCollapse}}
-						<div layout horizontal center end-justified>
-							<paper-button id="moreExperiences"
-										  disabled={{notMoreExperiences}}>
-								Load More
-							</paper-button>
-							<paper-button id="lessExperiences"
-										  disabled={{cantCollapse}}>
-								Collapse
-							</paper-button>
-						</div>
-					{{/if}}
-				</paper-material></div>
-				<!--Class Table-->
-				<div><paper-material class="card"
-							  hero-id="main" {{detailHero}}>
-					<div class="white top"
-						 hero-id="toolbar" {{detailHero}}
-						 layout horizontal center>
-						<div flex>
-							<div class="containerName subhead">
-								Level {{characterCalculate "level" _id}}
-							</div>
-							{{#if nextLevelXP}}
-								<div class="caption">
-									Next Level: {{nextLevelXP}}XP
-								</div>
-							{{/if}}
-						</div>
-						<paper-icon-button class="black54"
-										   id="addClassButton"
-										   icon="add"
-										   disabled={{#unless canEditCharacter _id}}true{{/unless}}>
-						</paper-icon-button>
-					</div>
-					<div class="bottom list">
-						<div class="item-slot">
-							<div class="item race"
-								 hero-id="main" {{detailHero "race" _id}}
-								 layout horizontal center>
-								{{race}}
-							</div>
-						</div>
-						{{#each classes}}
-							<div class="item-slot">
-								<div class="item class"
-									 hero-id="main" {{detailHero}}
-									 layout horizontal center>
-									{{name}}&nbsp;{{level}}
-								</div>
-							</div>
-						{{/each}}
-					</div>
-				</paper-material></div>
-				<!--Notes-->
-				{{#each notes}}
-				<div>
-					<paper-material class="card"  hero-id="main" {{detailHero}}>
-						<div class="top {{colorClass}} noteTop subhead"
-							 hero-id="toolbar" {{detailHero}}
-							 layout horizontal center>
-							{{name}}
-						</div>
-						<div class="bottom">{{#markdown}}{{description}}{{/markdown}}</div>
-					</paper-material>
+	<div class="column-container  animation-slider">
+		<!--Experience Table-->
+		<div>
+			<paper-material class="card experiencesCard">
+				<div class="top white subhead layout horizontal center">
+					<div class="flex">Experience</div>
+					<div>{{characterCalculate "experience" _id}} XP</div>
+					<paper-icon-button class="black54" id="addXP" icon="add"
+									   disabled={{#unless canEditCharacter _id}}true{{/unless}}></paper-icon-button>
 				</div>
-				{{/each}}
-			</div>
-			<div class="fab-buffer"></div>
+				<div class="bottom list">
+					{{#each experiences}}
+						<div class="item-slot">
+							<div class="item experience layout horizontal center" data-id={{_id}}>
+								<div class="flex">{{name}}</div>
+								<div class="xpValue">{{value}}</div>
+							</div>
+						</div>
+					{{/each}}
+				</div>
+				{{#if moreExperiencesOrCollapse}}
+					<div class="layout horizontal center end-justified">
+						<paper-button id="moreExperiences" disabled={{notMoreExperiences}}>
+							Load More
+						</paper-button>
+						<paper-button id="lessExperiences" disabled={{cantCollapse}}>
+							Collapse
+						</paper-button>
+					</div>
+				{{/if}}
+			</paper-material>
 		</div>
+		<!--Class Table-->
+		<div>
+			<paper-material class="card">
+				<div class="white top layout horizontal center">
+					<div class="flex">
+						<div class="containerName paper-font-subhead">
+							Level {{characterCalculate "level" _id}}
+						</div>
+						{{#if nextLevelXP}}
+							<div class="paper-font-caption">
+								Next Level: {{nextLevelXP}}XP
+							</div>
+						{{/if}}
+					</div>
+					<paper-icon-button class="black54"
+									   id="addClassButton"
+									   icon="add"
+									   disabled={{#unless canEditCharacter _id}}true{{/unless}}>
+					</paper-icon-button>
+				</div>
+				<div class="bottom list">
+					<div class="item-slot">
+						<div class="item race layout horizontal center">
+							{{race}}
+						</div>
+					</div>
+					{{#each classes}}
+						<div class="item-slot">
+							<div class="item class layout horizontal center" data-id={{_id}}>
+								{{name}}&nbsp;{{level}}
+							</div>
+						</div>
+					{{/each}}
+				</div>
+			</paper-material>
+		</div>
+		<!--Notes-->
+		{{#each notes}}
+			<div>
+				<paper-material class="card note" data-id={{_id}}>
+					<div class="top {{colorClass}} noteTop paper-font-subhead layout horizontal center">
+						{{name}}
+					</div>
+					<div class="bottom">
+						{{#markdown}}{{evaluateShortString charId description}}{{/markdown}}
+					</div>
+				</paper-material>
+			</div>
+		{{/each}}
 	</div>
+	<div class="fab-buffer"></div>
 	{{#if canEditCharacter _id}}
-	<paper-fab id="addNote"
+		<paper-fab id="addNote"
 				   class="floatyButton"
 				   icon="add"
-				   title="Add"
-				   role="button"
-				   tabindex="0"
-				   hero-id="main"></paper-fab>
+				   title="Add"></paper-fab>
 	{{/if}}
 </template>

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

@@ -53,101 +53,93 @@ Template.journal.helpers({
 });
 
 Template.journal.events({
-	"tap .noteTop": function(event){
-		GlobalUI.setDetail({
+	"click .noteTop": function(event){
+		pushDialogStack({
 			template: "noteDialog",
 			data:     {noteId: this._id, charId: this.charId},
-			heroId:   this._id,
+			element:  event.currentTarget.parentElement,
 		});
 	},
-	"tap .experience": function(event){
-		GlobalUI.setDetail({
+	"click .experience": function(event){
+		pushDialogStack({
 			template: "experienceDialog",
 			data: {experienceId: this._id, charId: this.charId},
-			heroId: this._id,
+			element: event.currentTarget,
 		});
 	},
-	"tap .class": function(event){
-		GlobalUI.setDetail({
+	"click .class": function(event){
+		pushDialogStack({
 			template: "classDialog",
 			data: {classId: this._id, charId: this.charId},
-			heroId: this._id,
+			element: event.currentTarget,
 		});
 	},
-	"tap .race": function(event){
-		GlobalUI.setDetail({
+	"click .race": function(event){
+		pushDialogStack({
 			template: "raceDialog",
 			data: {charId: this._id},
-			heroId: this._id + "race",
+			element: event.currentTarget,
 		});
 	},
-	"tap #addNote": function(event){
+	"click #addNote": function(event, instance){
 		var charId = this._id;
-		Notes.insert({
+		var noteId = Notes.insert({
 			name: "New Note",
 			charId: charId,
-		}, function(error, id){
-			if (!error){
-				GlobalUI.setDetail({
-					template: "noteDialog",
-					data:     {noteId: id, charId: charId, startEditing: true},
-					heroId:   id,
-				});
-			}
+		});
+		pushDialogStack({
+			template: "noteDialog",
+			data:     {noteId: noteId, charId: charId, startEditing: true},
+			element:  event.currentTarget,
+			returnElement: () => instance.find(`.note[data-id='${noteId}']`),
 		});
 	},
-	"tap #addXP": function(event){
+	"click #addXP": function(event, instance){
 		var charId = this._id;
-		Experiences.insert({
+		var expId = Experiences.insert({
 			charId: charId
-		}, function(error, id){
-			if (!error){
-				GlobalUI.setDetail({
-					template: "experienceDialog",
-					data: {experienceId: id, charId: charId, startEditing: true},
-					heroId: id,
-				});
-			}
+		});
+		pushDialogStack({
+			template: "experienceDialog",
+			data: {experienceId: expId, charId: charId, startEditing: true},
+			element: event.currentTarget,
+			returnElement: () => instance.find(`.experience[data-id='${expId}']`),
 		});
 	},
-	"tap #addClassButton":function(event){
+	"click #addClassButton":function(event, instance){
 		var charId = this._id;
-		Classes.insert({
+		var classId = Classes.insert({
 			charId: charId,
 			name: "new Class",
 			level: 1,
-		}, function(error, id){
-			if (!error){
-				GlobalUI.setDetail({
-					template: "classDialog",
-					data: {classId: id, charId: charId, startEditing: true},
-					heroId: id,
-				});
-			}
+		});
+		pushDialogStack({
+			template: "classDialog",
+			data: {classId: classId, charId: charId, startEditing: true},
+			element: event.currentTarget,
+			returnElement: () => instance.find(`.class[data-id='${classId}']`),
 		});
 	},
-	"tap #moreExperiences": function(event){
-		var inst = Template.instance();
-		inst.experiencesLimit.set(
-			inst.experiencesLimit.get() +
+	"click #moreExperiences": function(event, instance){
+		instance.experiencesLimit.set(
+			instance.experiencesLimit.get() +
 			(this.settings && this.settings.experiencesInc || 10)
 		);
 	},
-	"tap #lessExperiences": function(event){
-		var inst = Template.instance();
-		inst.experiencesLimit.set(
+	"click #lessExperiences": function(event, instance){
+		instance.experiencesLimit.set(
 			this.settings && this.settings.experiencesInc || 10
 		);
-		//scroll to the top of the div
-		inst.$(".scroll-y").animate({
+		// Scroll to the top of the div
+		instance.$(".scroll-y").animate({
 			scrollTop: (
-				inst.$(".scroll-y").scrollTop() +
-				inst.$(".experiencesCard").position().top -
+				instance.$(".scroll-y").scrollTop() +
+				instance.$(".experiencesCard").position().top -
 				8
 			)
 		}, 300);
-		//HACK giggle the columns :( to workaround chrome bug that stops .containers height from updating
-		var cs = inst.$(".containers").removeClass("containers");
+		// HACK jiggle the columns :( to workaround chrome bug that stops .containers height from updating
+		var cs = instance.$(".containers").removeClass("containers");
 		_.defer(function(){cs.addClass("containers");});
 	},
 });

rpg-docs/client/views/character/journal/noteDialog/noteDialog.html

@@ -1,7 +1,7 @@
 <template name="noteDialog">
 	{{#with note}}
 		{{#baseDialog title=name class=colorClass startEditing=../startEditing}}
-			<div>{{#markdown}}{{description}}{{/markdown}}</div>
+			<div>{{#markdown}}{{evaluateString charId description}}{{/markdown}}</div>
 		{{else}}
 			{{> noteDialogEdit}}
 		{{/baseDialog}}
@@ -10,21 +10,13 @@
 
 <template name="noteDialogEdit">
 	<!--Name-->
-	<div horizontal layout>
+	<div class="horizontal layout">
 		<paper-input id="noteNameInput"
 					 label="Name"
-					 floatinglabel
 					 value={{name}}
-					 flex>
+					 class="flex">
 		</paper-input>
 	</div>
 	<!--Description, formatting this nicely breaks it, leave it as is-->
-	<paper-input-decorator label="Description"
-						   floatinglabel
-						   layout vertical>
-		<paper-autogrow-textarea>
-			<textarea id="noteDescriptionInput"
-					  value={{description}}></textarea>
-		</paper-autogrow-textarea>
-	</paper-input-decorator>
-</template>
+	<paper-textarea id="noteDescriptionInput" label="Description" value={{description}}></paper-textarea>
+</template>

rpg-docs/client/views/character/journal/noteDialog/noteDialog.js

@@ -11,21 +11,36 @@ Template.noteDialog.events({
 	"tap #deleteButton": function(event, instance){
 		Notes.softRemove(instance.data.noteId);
 		GlobalUI.deletedToast(instance.data.noteId, "Notes", "Note");
-		GlobalUI.closeDetail();
+		popDialogStack();
 	},
 });
 
-Template.noteDialogEdit.onRendered(function(){
-	updatePolymerInputs(this);
-});
+const debounce = (f) => _.debounce(f, 300);
 
 Template.noteDialogEdit.events({
-	"change #noteNameInput, input #noteNameInput": function(event){
+	"change #noteNameInput, input #noteNameInput": debounce(function(event){
+		const input = event.currentTarget;
+		var name = input.value;
+		if (!name){
+			input.invalid = true;
+			input.errorMessage = "Name is required";
+		} else {
+			input.invalid = false;
+			Notes.update(this._id, {
+				$set: {name: name}
+			}, {
+				removeEmptyStrings: false,
+				trimStrings: false,
+			});
+		}
+	}),
+	"input #noteDescriptionInput": debounce(function(event){
 		var value = event.currentTarget.value;
-		Notes.update(this._id, {$set: {name: value}});
-	},
-	"change #noteDescriptionInput": function(event){
-		var value = event.currentTarget.value;
-		Notes.update(this._id, {$set: {description: value}});
-	},
+		Notes.update(this._id, {
+			$set: {description: value}
+		}, {
+			removeEmptyStrings: false,
+			trimStrings: false,
+		});
+	}),
 });

rpg-docs/client/views/character/journal/raceDialog/raceDialog.html

@@ -1,13 +1,13 @@
 <template name="raceDialog">
 	{{#baseDialog title="Race" class=color hideColor="true" hideDelete="true" startEditing=startEditing}}
-		<div horizontal layout center-justified class= "display2">
+		<div class="horizontal layout center-justified paper-font-display2">
 			{{race}}
 		</div>
 		{{> effectsViewList charId=charId parentId=charId parentGroup="racial"}}
 		{{> proficiencyViewList charId=charId parentId=charId parentGroup="racial"}}
 	{{else}}
-		<paper-input id="raceInput" label="Race" floatinglabel value={{race}}></paper-input>
+		<paper-input id="raceInput" label="Race" value={{race}}></paper-input>
 		{{> effectsEditList parentId=charId parentCollection="Characters" charId=charId parentGroup="racial"}}
 		{{> proficiencyEditList parentId=charId parentCollection="Characters" charId=charId parentGroup="racial"}}
 	{{/baseDialog}}
-</template>
+</template>

rpg-docs/client/views/character/journal/raceDialog/raceDialog.js

@@ -1,12 +1,13 @@
-Template.raceDialog.onRendered(function(){
-	updatePolymerInputs(this);
-});
-
 Template.raceDialog.events({
-	"change #raceInput": function(event){
+	"input #raceInput, change #raceInput": _.debounce(function(event){
 		var value = event.currentTarget.value;
-		Characters.update(this.charId, {$set: {race: value}});
-	}
+		Characters.update(this.charId, {
+			$set: {race: value}
+		}, {
+			removeEmptyStrings: false,
+			trimStrings: false,
+		});
+	}, 300),
 });
 
 Template.raceDialog.helpers({