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 };