stringtable-viewer.html

<link rel="import" href="../bower_components/iron-input/iron-input.html"><link rel="import" href="../bower_components/iron-signals/iron-signals.html"><dom-module id="stringtable-viewer"><template><style>
			:host {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				z-index: 3000;
				background-color: white;
				height: 140px;
			}
			iron-signals {
				height: inherit;
			}
	
			:host wrap {
				display: flex;
				height: inherit;
			}
	
			.column {
				display: flex;
				flex-direction: column;
			}
	
			.left {
				flex-grow: 1;
			}
	
			.right {
				flex-grow: 5;
				position: relative;
			}
	
			textarea {
				flex-grow: 1; 
			}
	
			#addendumpanel {
				background-color: white;
				height: 83%;
				left: 0;
		    	position: absolute;
				top: 0;
				width: 100%;
				display: flex;
			}
			
			textarea[hide], div[hide], #addendumpanel[hide] {
				display: none;
			}
			
			#questEvents {
				overflow: scroll;
				overflow-x: hidden;
			}
	
			#addendumpanel label {
				margin-right: 5px;
			}
		</style><iron-signals on-iron-signal-flow-chart-node-selected="flowChartNodeSelected"></iron-signals><wrap><div id="questEvents" class="column leftleft" on-value-changed="changeQuestEvent"><span>QuestEvents</span></div><div class="column left"><span>Selected Node: <span>{{nodeId}}</span></span> <span><label for="showDefaultText">Default Text</label> <input id="showDefaultText" type="checkbox" checked="{{showText::change}}"></span> <span><label for="showFemaleText">Female Text</label> <input id="showFemaleText" type="checkbox" checked="{{showFemaleText::change}}"></span></div><div class="column right" hide$="[[isQuest]]"><textarea id="text" hide$="[[!showText]]" value="{{defaultText::input}}" placeholder="default text"></textarea> <textarea id="femaleText" hide$="[[!showFemaleText]]" value="{{femaleText::input}}" placeholder="female text"></textarea></div><div class="column right" hide$="[[isConversation]]"><input is="iron-input" bind-value="{{title}}" placeholder="quest step title"> <textarea id="description" value="{{description::input}}" placeholder="quest step description"></textarea> <button on-click="toggleAddendums">{{showButtonText(nodeId, isHidden)}}</button><div id="addendumpanel" hide$="[[isHidden]]"><template is="dom-repeat" items="{{addendums}}"><label>{{item.id}}</label><textarea value="{{item.text}}" placeholder="quest addendum"></textarea></template></div></div></wrap></template></dom-module><script>
"use strict";
	var StringtableViewer = new Polymer({
		is: "stringtable-viewer",
	
		properties: {
			nodeid: Number,
			showText: {
				type: Boolean,
				value: true	
			},
			showFemaleText: {
				type: Boolean,
				value: true
			},

			defaultText: {
				type:	String,
				observer: 'defaultTextChanged'
			},
			femaleText: {
				type: String,
				observer: 'femaleTextChanged'
			},
			addendums: {
				type: Array,
				value: function() { return []; }
			},
			questEvents: {
				type: Array,
				value: function() { return []; }
			},
			
			isConversation: {
				type: Boolean,
				value: true
			},
			isQuest: {
				type: Boolean,
				value: false
			},
			isHidden: {
				type: Boolean,
				value: true
			},

			sourceNode: Object
		},

		flowChartNodeSelected: function(e, data, sender) {
			var skipEvents = false;
			if(this.sourceNode !== undefined && this.sourceNode.parent_ === data[0]) {
				skipEvents = true;
			}
			this.sourceNode = data[0]; // erst this, dann kann der observer oben nichts überschreiben
			this.nodeId = this.sourceNode.nodeId;
			this.defaultText = this.sourceNode.defaultText;
			this.femaleText = this.sourceNode.femaleText;
			if(this.sourceNode.type == "QuestNode" || this.sourceNode.type == "ObjectiveNode") {
			    this.title = this.sourceNode.defaultText;	
				this.description = this.sourceNode.description;
				if(skipEvents || this.questEvents.length == this.sourceNode.parent_.questEvents.length && 
						this.questEvents.every(
							function(current, index, array) { 
								return current == this.sourceNode.parent_.questEvents[index];
							}, this)) {
					// alles gleich, also mache mal nix
				} else {
					// aufräumen, kein forEach, das ist doch ne nodelist …
					for(var j = 0; j < this.questEvents.length; j++) {
						Polymer.dom(this.$.questEvents).removeChild(this.questEvents[j]);
					}
					this.questEvents = this.sourceNode.parent_.questEvents;
					for(var i = 0; i < this.questEvents.length; i++) {
						Polymer.dom(this.$.questEvents).appendChild(this.questEvents[i]);
					}
				}

				this.isQuest = true; 
				this.isConversation = false;
			} else {
				this.isQuest = false;
				this.isConversation = true;
				this.isHidden = true;
			}
			if(this.sourceNode.type == "QuestNode") {
				this.addendums = this.sourceNode.endStates;
			}
			if(this.sourceNode.type == "ObjectiveNode") {
				this.addendums = this.sourceNode.addendumIds;
			}
		},
	
		defaultTextChanged: function(new_, old) {
			this.sourceNode.defaultText = new_;
		},

		femaleTextChanged: function(new_, old) {
			this.sourceNode.femaleText = new_;
		},

		toggleAddendums: function() {
			this.isHidden = !this.isHidden;
		},

		showButtonText: function(isConversation, isHidden) {
			var word = "";
			if(this.sourceNode !== undefined) {
				if(this.sourceNode.type == "QuestNode") 
					word = " endstates";
				if(this.sourceNode.type == "ObjectiveNode")
					word = " addendums";
				if(isHidden)
					word = "show" + word;
				else
					word = "hide" + word;
			}
			return word;
		},

		changeQuestEvent: function(e, details) {
			var orginal = e.target.parentElement.parentElement.parentElement.parentElement;
			var newQuestEvent = new window[details.value]();
			newQuestEvent.$$('questevent-element').id = orginal.$$('questevent-element').id;
			newQuestEvent.$$('questevent-element').displayName = orginal.$$('questevent-element').displayName;
			for(var j = 0; j < this.questEvents.length; j++) {
				Polymer.dom(this.$.questEvents).removeChild(this.questEvents[j]);
			}
			this.splice("questEvents", this.questEvents.indexOf(orginal), 1, newQuestEvent);
			for(var i = 0; i < this.questEvents.length; i++) {
				Polymer.dom(this.$.questEvents).appendChild(this.questEvents[i]);
			}
		}
	});
</script>