1 /**
  2  * Creates a new InspectorView.
  3  * 
  4  * @constructor
  5  */
  6 mindmaps.InspectorView = function() {
  7 	var self = this;
  8 	var $content = $("#template-inspector").tmpl();
  9 	var $sizeDecreaseButton = $("#inspector-button-font-size-decrease",
 10 			$content);
 11 	var $sizeIncreaseButton = $("#inspector-button-font-size-increase",
 12 			$content);
 13 	var $boldCheckbox = $("#inspector-checkbox-font-bold", $content);
 14 	var $italicCheckbox = $("#inspector-checkbox-font-italic", $content);
 15 	var $underlineCheckbox = $("#inspector-checkbox-font-underline", $content);
 16 	var $applyToAllButton = $("#inspector-button-apply-all", $content);
 17 	var branchColorPicker = $("#inspector-branch-color-picker", $content);
 18 	var fontColorPicker = $("#inspector-font-color-picker", $content);
 19 	var $allButtons = [ $sizeDecreaseButton, $sizeIncreaseButton,
 20 			$boldCheckbox, $italicCheckbox, $underlineCheckbox,
 21 			$applyToAllButton ];
 22 	var $allColorpickers = [ branchColorPicker, fontColorPicker ];
 23 
 24 	/**
 25 	 * Returns a jquery object.
 26 	 * 
 27 	 * @returns {jQuery}
 28 	 */
 29 	this.getContent = function() {
 30 		return $content;
 31 	};
 32 
 33 	/**
 34 	 * Sets the enabled state of all controls.
 35 	 * 
 36 	 * @param {Boolean} enabled
 37 	 */
 38 	this.setControlsEnabled = function(enabled) {
 39 		var state = enabled ? "enable" : "disable";
 40 		$allButtons.forEach(function($button) {
 41 			$button.button(state);
 42 		});
 43 
 44 		$allColorpickers.forEach(function($colorpicker) {
 45 			$colorpicker.miniColors("disabled", !enabled);
 46 		});
 47 	};
 48 
 49 	/**
 50 	 * Sets the checked state of the bold font option.
 51 	 * 
 52 	 * @param {Boolean} checked
 53 	 */
 54 	this.setBoldCheckboxState = function(checked) {
 55 		$boldCheckbox.prop("checked", checked).button("refresh");
 56 	};
 57 
 58 	/**
 59 	 * Sets the checked state of the italic font option.
 60 	 * 
 61 	 * @param {Boolean} checked
 62 	 */
 63 	this.setItalicCheckboxState = function(checked) {
 64 		$italicCheckbox.prop("checked", checked).button("refresh");
 65 	};
 66 
 67 	/**
 68 	 * Sets the checked state of the underline font option.
 69 	 * 
 70 	 * @param {Boolean} checked
 71 	 */
 72 	this.setUnderlineCheckboxState = function(checked) {
 73 		$underlineCheckbox.prop("checked", checked).button("refresh");
 74 	};
 75 
 76 	/**
 77 	 * Sets the color of the branch color picker.
 78 	 * 
 79 	 * @param {String} color
 80 	 */
 81 	this.setBranchColorPickerColor = function(color) {
 82 		branchColorPicker.miniColors("value", color);
 83 	};
 84 
 85 	/**
 86 	 * Sets the color of the font color picker.
 87 	 * 
 88 	 * @param {String} color
 89 	 */
 90 	this.setFontColorPickerColor = function(color) {
 91 		fontColorPicker.miniColors("value", color);
 92 	};
 93 
 94 	/**
 95 	 * Initialise
 96 	 */
 97 	this.init = function() {
 98 		$(".buttonset", $content).buttonset();
 99 		$applyToAllButton.button();
100 
101 		$sizeDecreaseButton.click(function() {
102 			if (self.fontSizeDecreaseButtonClicked) {
103 				self.fontSizeDecreaseButtonClicked();
104 			}
105 		});
106 
107 		$sizeIncreaseButton.click(function() {
108 			if (self.fontSizeIncreaseButtonClicked) {
109 				self.fontSizeIncreaseButtonClicked();
110 			}
111 		});
112 
113 		$boldCheckbox.click(function() {
114 			if (self.fontBoldCheckboxClicked) {
115 				var checked = $(this).prop("checked");
116 				self.fontBoldCheckboxClicked(checked);
117 			}
118 		});
119 
120 		$italicCheckbox.click(function() {
121 			if (self.fontItalicCheckboxClicked) {
122 				var checked = $(this).prop("checked");
123 				self.fontItalicCheckboxClicked(checked);
124 			}
125 		});
126 
127 		$underlineCheckbox.click(function() {
128 			if (self.fontUnderlineCheckboxClicked) {
129 				var checked = $(this).prop("checked");
130 				self.fontUnderlineCheckboxClicked(checked);
131 			}
132 		});
133 
134 		branchColorPicker.miniColors({
135 			hide : function(hex) {
136 				// dont emit event if picker was hidden due to disable
137 				if (this.attr('disabled')) {
138 					return;
139 				}
140 
141 				console.log("branch", hex);
142 				if (self.branchColorPicked) {
143 					self.branchColorPicked(hex);
144 				}
145 			}
146 		});
147 
148 		fontColorPicker.miniColors({
149 			hide : function(hex) {
150 				// dont emit event if picker was hidden due to disable
151 				if (this.attr('disabled')) {
152 					return;
153 				}
154 				console.log("font", hex);
155 				if (self.fontColorPicked) {
156 					self.fontColorPicked(hex);
157 				}
158 			}
159 		});
160 
161 		$applyToAllButton.click(function() {
162 			if (self.applyStylesToChildrenButtonClicked) {
163 				self.applyStylesToChildrenButtonClicked();
164 			}
165 		});
166 	};
167 };
168 
169 /**
170  * Creates a new InspectorPresenter. This presenter manages basic node
171  * attributes like font settings and branch color.
172  * 
173  * @constructor
174  * @param {mindmaps.EventBus} eventBus
175  * @param {mindmaps.MindMapModel} mindmapModel
176  * @param {mindmaps.InspectorView} view
177  */
178 mindmaps.InspectorPresenter = function(eventBus, mindmapModel, view) {
179 	var self = this;
180 
181 	/**
182 	 * View callbacks: React to user input and execute appropiate action.
183 	 */
184 
185 	view.fontSizeDecreaseButtonClicked = function() {
186 		var action = new mindmaps.action.DecreaseNodeFontSizeAction(
187 				mindmapModel.selectedNode);
188 		mindmapModel.executeAction(action);
189 	};
190 
191 	view.fontSizeIncreaseButtonClicked = function() {
192 		var action = new mindmaps.action.IncreaseNodeFontSizeAction(
193 				mindmapModel.selectedNode);
194 		mindmapModel.executeAction(action);
195 	};
196 
197 	view.fontBoldCheckboxClicked = function(checked) {
198 		var action = new mindmaps.action.SetFontWeightAction(
199 				mindmapModel.selectedNode, checked);
200 		mindmapModel.executeAction(action);
201 	};
202 
203 	view.fontItalicCheckboxClicked = function(checked) {
204 		var action = new mindmaps.action.SetFontStyleAction(
205 				mindmapModel.selectedNode, checked);
206 		mindmapModel.executeAction(action);
207 	};
208 
209 	view.fontUnderlineCheckboxClicked = function(checked) {
210 		var action = new mindmaps.action.SetFontDecorationAction(
211 				mindmapModel.selectedNode, checked);
212 		mindmapModel.executeAction(action);
213 	};
214 
215 	view.branchColorPicked = function(color) {
216 		var action = new mindmaps.action.SetBranchColorAction(
217 				mindmapModel.selectedNode, color);
218 		mindmapModel.executeAction(action);
219 	};
220 
221 	view.fontColorPicked = function(color) {
222 		var action = new mindmaps.action.SetFontColorAction(
223 				mindmapModel.selectedNode, color);
224 		mindmapModel.executeAction(action);
225 	};
226 
227 	/**
228 	 * Update view on font events.
229 	 */
230 	eventBus.subscribe(mindmaps.Event.NODE_FONT_CHANGED, function(node) {
231 		if (mindmapModel.selectedNode === node) {
232 			updateView(node);
233 		}
234 	});
235 
236 	eventBus.subscribe(mindmaps.Event.NODE_BRANCH_COLOR_CHANGED,
237 			function(node) {
238 				if (mindmapModel.selectedNode === node) {
239 					updateView(node);
240 				}
241 			});
242 
243 	eventBus.subscribe(mindmaps.Event.NODE_SELECTED, function(node) {
244 		updateView(node);
245 	});
246 
247 	/**
248 	 * Enable controls when a document has been opened.
249 	 */
250 	eventBus.subscribe(mindmaps.Event.DOCUMENT_OPENED, function() {
251 		view.setControlsEnabled(true);
252 	});
253 
254 	/**
255 	 * Disable controls when document was closed.
256 	 */
257 	eventBus.subscribe(mindmaps.Event.DOCUMENT_CLOSED, function() {
258 		view.setControlsEnabled(false);
259 	});
260 
261 	/**
262 	 * Sets the view params to match the node's attributes.
263 	 * 
264 	 * @param {mindmaps.Node} node
265 	 */
266 	function updateView(node) {
267 		var font = node.text.font;
268 		view.setBoldCheckboxState(font.weight === "bold");
269 		view.setItalicCheckboxState(font.style === "italic");
270 		view.setUnderlineCheckboxState(font.decoration === "underline");
271 		view.setFontColorPickerColor(font.color);
272 		view.setBranchColorPickerColor(node.branchColor);
273 	}
274 
275 	this.go = function() {
276 		view.init();
277 	};
278 };