Replaced effects in-line editing with edit dialogs

Closes #41
2017-05-10 16:39:36 +02:00
parent b591c66dd5
commit e7bcc2224c
14 changed files with 287 additions and 90 deletions
--- a/rpg-docs/client/views/character/effects/effectEdit/effectEdit.css
+++ b/rpg-docs/client/views/character/effects/effectEdit/effectEdit.css
@@ -13,3 +13,13 @@
 .effectEdit .deleteEffect {
 	flex-shrink: 0;
 }
+
+.effectEdit .effect-table-view {
+	align-self: center;
+	color: #757575;
+	color: rgba(0,0,0,0.54);
+}
+
+.effectEdit .iron-selected {
+	color: #ad2a1f;
+}
--- a/rpg-docs/client/views/character/effects/effectEdit/effectEdit.html
+++ b/rpg-docs/client/views/character/effects/effectEdit/effectEdit.html
@@ -1,45 +1,53 @@
 <template name="effectEdit">
-	<div class="effectEdit layout horizontal center">
-		<paper-dropdown-menu label="Stat" class="statDropDown" dynamic-align>
-			<dicecloud-selector class="statMenu dropdown-content" selected={{stat}} selectable="paper-item">
-				{{#each statGroups}}
-					<div style="font-weight: bold; margin-top: 16px; padding-left: 8px;">
-						{{this}}
-					</div>
-					{{#each stats}}
-						<paper-item name={{stat}}>{{name}}</paper-item>
-					{{/each}}
-				{{/each}}
-			</dicecloud-selector>
-		</paper-dropdown-menu>
-		{{#if operations}}
-			<paper-dropdown-menu class="operationDropDown" label="Operation" dynamic-align>
-				<dicecloud-selector class="dropdown-content operationMenu" selected={{operation}}>
-					{{#each operations}}
-						<paper-item name={{operation}}>{{name}}</paper-item>
+	{{#with effect}}
+	{{#baseEditDialog hideColor=true title="Effect"}}
+		<div class="fit layout vertical effectEdit" style="padding: 24px;">
+			<table class="paper-font-display1 effect-table-view">
+				<tr>
+					{{> effectView}}
+				</tr>
+			</table>
+			<hr class="vertMargin" style="width: 100%;">
+			{{#if showEffectValueInput}}
+				<paper-input class="effectValueInput"
+							 label="Value"
+							 floatinglabel
+							 value={{effectValue}}>
+				</paper-input>
+			{{else}}
+				<div style="height: 62px;"></div>
+			{{/if}}
+			<div class="effectEdit layout horizontal flex">
+				<dicecloud-selector class="statMenu flex" selected={{stat}} selectable="paper-item" style="height: 100%; overflow-y: auto;">
+					{{#each statGroups}}
+						<div style="font-weight: bold; margin-top: 16px; padding-left: 8px;">
+							{{this}}
+						</div>
+						{{#each stats}}
+							<paper-item name={{stat}}>{{name}}</paper-item>
+						{{/each}}
 					{{/each}}
 				</dicecloud-selector>
-			</paper-dropdown-menu>
-		{{/if}}
-		{{#if effectValueTemplate}}
-			{{> Template.dynamic template=effectValueTemplate}}
-		{{else}}
-			<div class="flex"></div>
-		{{/if}}
-		<paper-icon-button class="deleteEffect"
-						   icon="delete">
-		</paper-icon-button>
-		<br>
-	</div>
-</template>
-
-<template name="regularEffectValue">
-	<paper-input class="effectValueInput flex"
-				 label="Value"
-				 floatinglabel
-				 value={{effectValue}}
-				 style="flex-basis: 100px;">
-	</paper-input>
+				{{#if operations}}
+					<dicecloud-selector class="operationMenu flex" selected={{operation}}  style="height: 100%; overflow-y: auto;">
+						{{#each operations}}
+							<paper-item name={{operation}}>{{name}}</paper-item>
+						{{/each}}
+					</dicecloud-selector>
+				{{else}} {{#if showMultiplierOperations}}
+					<dicecloud-selector class="multiplierMenu flex"
+							   selected={{value}}>
+						<paper-item name="0.5">Resistance</paper-item>
+						<paper-item name="2">Vulnerability</paper-item>
+						<paper-item name="0">Immunity</paper-item>
+					</dicecloud-selector>
+				{{else}}
+					<div class="flex" style="height: 100%;"></div>
+				{{/if}} {{/if}}
+			</div>
+		</div>
+	{{/baseEditDialog}}
+	{{/with}}
 </template>

 <template name="multiplierEffectValue">
@@ -51,5 +59,4 @@
 				<paper-item name="0">Immunity</paper-item>
 			</dicecloud-selector>
 	</paper-dropdown-menu>
-	<div class="flex"></div>
 </template>
--- a/rpg-docs/client/views/character/effects/effectEdit/effectEdit.js
+++ b/rpg-docs/client/views/character/effects/effectEdit/effectEdit.js
@@ -97,7 +97,19 @@ var skillOperations = [
 	{name: "Conditional Benefit", operation: "conditional"},
 ];

+Template.effectEdit.onRendered(function(){
+	_.defer(() => {
+		const statElement = this.find(".statMenu .iron-selected");
+		statElement && statElement.scrollIntoView();
+		const opElement = this.find(".operationMenu .iron-selected");
+		opElement && opElement.scrollIntoView();
+	});
+});
+
 Template.effectEdit.helpers({
+	effect: function(){
+		return Effects.findOne(this.id);
+	},
 	statGroups: function(){
 		return statGroupNames;
 	},
@@ -115,46 +127,77 @@ Template.effectEdit.helpers({
 			return attributeOperations;
 		}
 	},
-	effectValueTemplate: function(){
-		//resistance/vulnerability template
+	showMultiplierOperations: function(){
+		var stat = statsDict[this.stat];
+		return stat && stat.group === "Weakness/Resistance"
+	},
+	showEffectValueInput: function(){
 		var stat = statsDict[this.stat];
 		var group = stat && stat.group;
-		if (group === "Weakness/Resistance") return "multiplierEffectValue";
-
+		if (
+			group === "Weakness/Resistance"
+		) return false;
 		var op = this.operation;
-		if (!op) return null;
-		//operations that don't need templates
-		if (op === "advantage" || op === "disadvantage" || op === "fail") return null;
-
-		//default template
-		return "regularEffectValue";
+		if (
+			!op ||
+			op === "advantage" ||
+			op === "disadvantage" ||
+			op === "fail"
+		) return false;
+		return true;
 	},
-});
-
-Template.regularEffectValue.helpers({
 	effectValue: function(){
 		return this.calculation || this.value;
-	}
+	},
 });

 Template.effectEdit.events({
-	"click .deleteEffect": function(event){
-		Effects.softRemoveNode(this._id);
-		GlobalUI.deletedToast(this._id, "Effects", "Effect");
+	"click #deleteButton": function(event, instance){
+		Effects.softRemoveNode(instance.data.id);
+		GlobalUI.deletedToast(instance.data.id, "Effects", "Effect");
+		popDialogStack();
 	},
-	"iron-select .statDropDown": function(event){
+	"iron-select .statMenu": function(event){
 		var detail = event.originalEvent.detail;
 		var statName = detail.item.getAttribute("name");
 		if (statName == this.stat) return;
-		Effects.update(this._id, {$set: {stat: statName}});
+		var setter = {stat: statName};
+		var group = Blaze.getData(detail.item).group;
+		var effect = Effects.findOne(this._id);
+		if (group === "Saving Throws" || group === "Skills"){
+			// Skills must have a valid skill operation
+			if (!_.contains(
+				_.map(skillOperations, ao => ao.operation),
+				effect.operation
+			)){
+				setter.operation = "add";
+			}
+		} else if (group !== "Weakness/Resistance"){
+			// Attributes must have a valid attribute operation
+			if (!_.contains(
+				_.map(attributeOperations, ao => ao.operation),
+				effect.operation
+			)){
+				setter.operation = "base";
+			}
+		} else {
+			// Weakness/Resistance must have a mul operation and value
+			if (effect.operation !== "mul"){
+				setter.operation = "mul";
+			}
+			if (!_.contains([0, 0.5, 2], effect.value)){
+				setter.value = 0.5;
+			}
+		}
+		Effects.update(this._id, {$set: setter});
 	},
-	"iron-select .operationDropDown": function(event){
+	"iron-select .operationMenu": function(event){
 		var detail = event.originalEvent.detail;
 		var opName = detail.item.getAttribute("name");
 		if (opName == this.operation) return;
 		Effects.update(this._id, {$set: {operation: opName}});
 	},
-	"iron-select .damageMultiplierDropDown": function(event){
+	"iron-select .multiplierMenu": function(event){
 		var detail = event.originalEvent.detail;
 		var value = +detail.item.getAttribute("name");
 		if (value == this.value) return;
@@ -164,15 +207,25 @@ Template.effectEdit.events({
 			operation: "mul",
 		}});
 	},
-	"change .effectValueInput": function(event){
+	"change .effectValueInput, input .effectValueInput":
+	_.debounce(function(event){
 		var value = event.currentTarget.value;
-		var numValue = +value;
+		var numValue = value === "" ? NaN : +value;
 		if (_.isFinite(numValue)){
 			if (this.value === numValue) return;
-			Effects.update(this._id, {$set: {value: numValue, calculation: ""}});
+			Effects.update(this._id, {
+				$set: {value: numValue},
+				$unset: {calculation: ""},
+			});
 		} else if (_.isString(value)){
 			if (this.calculation === value) return;
-			Effects.update(this._id, {$set: {value: "", calculation: value}});
+			Effects.update(this._id, {
+				$set: {calculation: value},
+				$unset: {value: ""},
+			}, {
+				removeEmptyStrings: false,
+				trimStrings: false,
+			});
 		}
-	},
+	}, 400),
 });