Daniel@0
|
1 "use strict";
|
Daniel@0
|
2
|
Daniel@0
|
3 App.module("MainRegionModule", function (MainRegionModule, App, Backbone, Marionette, $, _, Logger) {
|
Daniel@0
|
4
|
Daniel@0
|
5 MainRegionModule.ConfigGridPanelView = MainRegionModule.ConfigGridChildView.extend({
|
Daniel@0
|
6
|
Daniel@0
|
7 options: {
|
Daniel@0
|
8 dimension: null, // entity | view
|
Daniel@0
|
9 configGrid: null,
|
Daniel@0
|
10 parentState: null,
|
Daniel@0
|
11 parentConfigGridView: null
|
Daniel@0
|
12 },
|
Daniel@0
|
13
|
Daniel@0
|
14 _cachedConfigGridType: null,
|
Daniel@0
|
15 _cachedConfig: null,
|
Daniel@0
|
16 _cachedBorderRadiusFixerSize: null,
|
Daniel@0
|
17
|
Daniel@0
|
18 initialize: function(options) {
|
Daniel@0
|
19 var _this = this;
|
Daniel@0
|
20 _this.options = _.defaults(options || {}, this.options);;
|
Daniel@0
|
21
|
Daniel@0
|
22 _this.listenTo(_this.options.configGrid, "change_selection", _this.renderIfParentConfigGridIsVisible);
|
Daniel@0
|
23
|
Daniel@0
|
24 // Cached attributes
|
Daniel@0
|
25 _this._cachedConfigGridType = this.options.configGrid.getType();
|
Daniel@0
|
26
|
Daniel@0
|
27 // Init border radius fixer (sits under the background and fills white space if the currently selected entity / view is near the corner)
|
Daniel@0
|
28 _this._$borderRadiusFixer = $.bem.generateElement("config-grid-panel", "border-radius-fixer");
|
Daniel@0
|
29 _this._$borderRadiusFixerContainer = $.bem.generateElement("config-grid-panel", "border-radius-fixer-container");
|
Daniel@0
|
30 _this._$borderRadiusFixerContainer.append(_this._$borderRadiusFixer);
|
Daniel@0
|
31 _this.$el.prepend(_this._$borderRadiusFixerContainer);
|
Daniel@0
|
32 _this._cachedBorderRadiusFixerSize = _this._$borderRadiusFixerContainer.width();
|
Daniel@0
|
33 _this.updateRadiusFixer(null, null);
|
Daniel@0
|
34
|
Daniel@0
|
35 // Init main area
|
Daniel@0
|
36 _this._$mainAreaWrapper = $.bem.generateElement("config-grid-panel", "main-area-wrapper");
|
Daniel@0
|
37 _this._$mainArea = $.bem.generateElement("config-grid-panel", "main-area");
|
Daniel@0
|
38 _this._$mainArea.addClass("cgpma"); // this element is also a block
|
Daniel@0
|
39 _this._$mainArea.appendTo(_this._$mainAreaWrapper);
|
Daniel@0
|
40 _this._$mainAreaWrapper.appendTo(_this.$el);
|
Daniel@0
|
41
|
Daniel@0
|
42 // Init commands
|
Daniel@0
|
43 _this._$commands = _this.$(".config-grid-panel__commands");
|
Daniel@0
|
44 _this._$commandClone = _this.$(".config-grid-panel__command_action_clone");
|
Daniel@0
|
45 _this._$commandDelete = _this.$(".config-grid-panel__command_action_delete");
|
Daniel@0
|
46 _this._$commandApply = _this.$(".config-grid-panel__command_action_apply");
|
Daniel@0
|
47 _this._$commandDiscard = _this.$(".config-grid-panel__command_action_discard");
|
Daniel@0
|
48
|
Daniel@0
|
49 // Assign functions to the commands
|
Daniel@0
|
50 _this._$commandClone.click(function() {
|
Daniel@0
|
51 if (_this._cachedConfig && _this._$commandClone.hasClass("config-grid-panel__command_state_enabled")) {
|
Daniel@0
|
52 var clonedConfig = _this._cachedConfig.clone();
|
Daniel@0
|
53 if (_this.options.dimension == "entity") {
|
Daniel@0
|
54 _this.options.configGrid.addEntityAndSelectIt(clonedConfig, _this.options.configGrid.getNextEntityNeighbour(_this._cachedConfig));
|
Daniel@0
|
55 } else {
|
Daniel@0
|
56 _this.options.configGrid.addViewAndSelectIt(clonedConfig, _this.options.configGrid.getNextViewNeighbour(_this._cachedConfig));
|
Daniel@0
|
57 }
|
Daniel@0
|
58 }
|
Daniel@0
|
59 });
|
Daniel@0
|
60 _this._$commandDelete.click(function() {
|
Daniel@0
|
61 if (_this._cachedConfig && _this._$commandDelete.hasClass("config-grid-panel__command_state_enabled")) {
|
Daniel@0
|
62 if (_this.options.dimension == "entity") {
|
Daniel@0
|
63 _this.options.configGrid.removeEntityAndSelectNeighbour(_this._cachedConfig);
|
Daniel@0
|
64 } else {
|
Daniel@0
|
65 _this.options.configGrid.removeViewAndSelectNeighbour(_this._cachedConfig);
|
Daniel@0
|
66 }
|
Daniel@0
|
67 }
|
Daniel@0
|
68 });
|
Daniel@0
|
69
|
Daniel@0
|
70 _this._$commandApply.click(function() {
|
Daniel@0
|
71 if (_this._cachedConfig && _this._$commandApply.hasClass("config-grid-panel__command_state_enabled")) {
|
Daniel@0
|
72 _this._masterBehindMainArea.cleanConfigPlannedParameterValuesAndApplyThem(_this._cachedConfig);
|
Daniel@0
|
73 }
|
Daniel@0
|
74 });
|
Daniel@0
|
75
|
Daniel@0
|
76 _this._$commandDiscard.click(function() {
|
Daniel@0
|
77 if (_this._cachedConfig && _this._$commandDiscard.hasClass("config-grid-panel__command_state_enabled")) {
|
Daniel@0
|
78 _this._cachedConfig.cancelPlannedParameterUpdates();
|
Daniel@0
|
79 }
|
Daniel@0
|
80 });
|
Daniel@0
|
81
|
Daniel@0
|
82 _this._$commandClone .attr("title", " ");
|
Daniel@0
|
83 _this._$commandDelete .attr("title", " ");
|
Daniel@0
|
84 _this._$commandApply .attr("title", " ");
|
Daniel@0
|
85 _this._$commandDiscard.attr("title", " ");
|
Daniel@0
|
86 App.TooltipModule.convertTitlesToTooltips(_this.$el);
|
Daniel@0
|
87 _this._updateTooltips();
|
Daniel@0
|
88
|
Daniel@0
|
89 _this._$commands.disableSelection();
|
Daniel@0
|
90 },
|
Daniel@0
|
91
|
Daniel@0
|
92 render: function (deep, instant) {
|
Daniel@0
|
93 var _this = this;
|
Daniel@0
|
94
|
Daniel@0
|
95 var selectedConfig = null;
|
Daniel@0
|
96 if (_this.options.dimension == "entity") {
|
Daniel@0
|
97 selectedConfig = _this.options.configGrid.getSelectedEntityConfig();
|
Daniel@0
|
98 } else {
|
Daniel@0
|
99 selectedConfig = _this.options.configGrid.getSelectedViewConfig();
|
Daniel@0
|
100 }
|
Daniel@0
|
101
|
Daniel@0
|
102 var configWasReplaced = false;
|
Daniel@0
|
103 if (_this._cachedConfig != selectedConfig) {
|
Daniel@0
|
104
|
Daniel@0
|
105 if (_this._cachedConfig) {
|
Daniel@0
|
106 _this.stopListening(_this._cachedConfig, "change", _this.renderIfParentConfigGridIsVisible);
|
Daniel@0
|
107 };
|
Daniel@0
|
108
|
Daniel@0
|
109 _this._cachedConfig = selectedConfig;
|
Daniel@0
|
110
|
Daniel@0
|
111 if (_this._cachedConfig) {
|
Daniel@0
|
112 _this.listenTo(_this._cachedConfig, "change", _this.renderIfParentConfigGridIsVisible);
|
Daniel@0
|
113 };
|
Daniel@0
|
114
|
Daniel@0
|
115 configWasReplaced = true;
|
Daniel@0
|
116 _this._updateTooltips();
|
Daniel@0
|
117 }
|
Daniel@0
|
118
|
Daniel@0
|
119 var dynamicDerivedConfigData = App.dynamicDerivedConfigDataProvider.get(_this._cachedConfig);
|
Daniel@0
|
120 if (_this._cachedDynamicDerivedConfigData != dynamicDerivedConfigData) {
|
Daniel@0
|
121 if (_this._cachedDynamicDerivedConfigData) {
|
Daniel@0
|
122 this.stopListening(_this._cachedDynamicDerivedConfigData, "change", _this.renderIfParentConfigGridIsVisible);
|
Daniel@0
|
123 }
|
Daniel@0
|
124
|
Daniel@0
|
125 _this._cachedDynamicDerivedConfigData = dynamicDerivedConfigData;
|
Daniel@0
|
126
|
Daniel@0
|
127 if (_this._cachedDynamicDerivedConfigData) {
|
Daniel@0
|
128 _this.listenTo(_this._cachedDynamicDerivedConfigData, "change", _this.renderIfParentConfigGridIsVisible);
|
Daniel@0
|
129 };
|
Daniel@0
|
130 }
|
Daniel@0
|
131
|
Daniel@0
|
132 _this._setupMainArea(deep, instant);
|
Daniel@0
|
133
|
Daniel@0
|
134 var hashForData = null;
|
Daniel@0
|
135 if (_this._cachedConfig) {
|
Daniel@0
|
136 hashForData = _this._cachedConfig.getHash()
|
Daniel@0
|
137 + _this._cachedDynamicDerivedConfigData.getHash();
|
Daniel@0
|
138 }
|
Daniel@0
|
139 if (configWasReplaced || _this._cachedHashForData !== hashForData) {
|
Daniel@0
|
140 _this._cachedHashForData = hashForData;
|
Daniel@0
|
141 if (_this._masterBehindMainArea) {
|
Daniel@0
|
142 _this._masterBehindMainArea.syncConfigGridPanelMainArea(_this, instant);
|
Daniel@0
|
143 }
|
Daniel@0
|
144 _this._renderApplyDiscardCommands(deep, instant);
|
Daniel@0
|
145 }
|
Daniel@0
|
146
|
Daniel@0
|
147 if (configWasReplaced || deep) {
|
Daniel@0
|
148 _this._renderCloneDeleteCommands(deep, instant);
|
Daniel@0
|
149 }
|
Daniel@0
|
150 },
|
Daniel@0
|
151
|
Daniel@0
|
152 updateRadiusFixer: function(selectedConfigGridOffsetStart, selectedConfigGridSize) {
|
Daniel@0
|
153 var _this = this;
|
Daniel@0
|
154 var coordinate = selectedConfigGridOffsetStart;
|
Daniel@0
|
155 var size = selectedConfigGridSize;
|
Daniel@0
|
156
|
Daniel@0
|
157 if (_.isNumber(size) && !_.isNaN(size) && size > 0) {
|
Daniel@0
|
158 if (coordinate + size <= 0) {
|
Daniel@0
|
159 coordinate = null;
|
Daniel@0
|
160 }
|
Daniel@0
|
161 if (coordinate > _this._cachedBorderRadiusFixerSize) {
|
Daniel@0
|
162 coordinate = null;
|
Daniel@0
|
163 } else if (coordinate < 0) {
|
Daniel@0
|
164 coordinate = 0;
|
Daniel@0
|
165 } else if (coordinate + size > _this._cachedBorderRadiusFixerSize) {
|
Daniel@0
|
166 size = _this._cachedBorderRadiusFixerSize - coordinate;
|
Daniel@0
|
167 }
|
Daniel@0
|
168 } else {
|
Daniel@0
|
169 coordinate = null;
|
Daniel@0
|
170 size = null;
|
Daniel@0
|
171 }
|
Daniel@0
|
172 if (coordinate !== null) {
|
Daniel@0
|
173 if (_this.options.dimension == "entity") {
|
Daniel@0
|
174 _this._$borderRadiusFixer.css({"left": coordinate, "width": size});
|
Daniel@0
|
175 } else {
|
Daniel@0
|
176 _this._$borderRadiusFixer.css({"top": coordinate, "height": size});
|
Daniel@0
|
177 }
|
Daniel@0
|
178 } else {
|
Daniel@0
|
179 if (_this.options.dimension == "entity") {
|
Daniel@0
|
180 _this._$borderRadiusFixer.css({"left": 0, "width": 0});
|
Daniel@0
|
181 } else {
|
Daniel@0
|
182 _this._$borderRadiusFixer.css({"top": 0, "height": 0});
|
Daniel@0
|
183 }
|
Daniel@0
|
184 }
|
Daniel@0
|
185 },
|
Daniel@0
|
186
|
Daniel@0
|
187 _updateTooltips: function() {
|
Daniel@0
|
188 var _this = this;
|
Daniel@0
|
189 if (! this._cachedConfig) {
|
Daniel@0
|
190 _this._$commandClone .attr("tooltip-title", "");
|
Daniel@0
|
191 _this._$commandDelete .attr("tooltip-title", "");
|
Daniel@0
|
192 _this._$commandApply .attr("tooltip-title", "");
|
Daniel@0
|
193 _this._$commandDiscard.attr("tooltip-title", "");
|
Daniel@0
|
194 } else {
|
Daniel@0
|
195 var tooltipTemplate = null;
|
Daniel@0
|
196 try {
|
Daniel@0
|
197 tooltipTemplate = Marionette.TemplateCache.get("#config-grid-panel__command-titles_" + _this._cachedConfigGridType + "_" + this._cachedConfig.getDimension() + "_" + _.str.trim(this._cachedConfig.getParameterValue("kind")));
|
Daniel@0
|
198 } catch (e) {
|
Daniel@0
|
199 tooltipTemplate = Marionette.TemplateCache.get("#config-grid-panel__command-titles_" + _this._cachedConfigGridType + "_" + this._cachedConfig.getDimension());
|
Daniel@0
|
200 }
|
Daniel@0
|
201 var tooltips = tooltipTemplate().split("|");
|
Daniel@0
|
202 _this._$commandClone .attr("tooltip-title", tooltips[0]);
|
Daniel@0
|
203 _this._$commandDelete .attr("tooltip-title", tooltips[1]);
|
Daniel@0
|
204 _this._$commandApply .attr("tooltip-title", tooltips[2]);
|
Daniel@0
|
205 _this._$commandDiscard.attr("tooltip-title", tooltips[3]);
|
Daniel@0
|
206 }
|
Daniel@0
|
207 },
|
Daniel@0
|
208
|
Daniel@0
|
209 _renderCloneDeleteCommands: function(deep, instant) {
|
Daniel@0
|
210 var _this = this;
|
Daniel@0
|
211 //var cloneEnabled = !!(_this._cachedConfig && !(_this.options.dimension == "entity" && _this._cachedConfigGridType == "recording"));
|
Daniel@0
|
212 var cloneEnabled = !! _this._cachedConfig;
|
Daniel@0
|
213 var deleteEnabled = !! _this._cachedConfig;
|
Daniel@0
|
214 _this._$commandClone .toggleClass("config-grid-panel__command_state_enabled", cloneEnabled);
|
Daniel@0
|
215 _this._$commandDelete.toggleClass("config-grid-panel__command_state_enabled", deleteEnabled);
|
Daniel@0
|
216 },
|
Daniel@0
|
217
|
Daniel@0
|
218 _renderApplyDiscardCommands: function(deep, instant) {
|
Daniel@0
|
219 var _this = this;
|
Daniel@0
|
220 var enabled = !!(_this._cachedConfig && _this._cachedConfig.hasPlannedParameterUpdates());
|
Daniel@0
|
221 _this._$commandApply .toggleClass("config-grid-panel__command_state_enabled", enabled);
|
Daniel@0
|
222 _this._$commandDiscard.toggleClass("config-grid-panel__command_state_enabled", enabled);
|
Daniel@0
|
223 },
|
Daniel@0
|
224
|
Daniel@0
|
225
|
Daniel@0
|
226
|
Daniel@0
|
227 _setupMainArea: function(deep, instant) {
|
Daniel@0
|
228 var _this = this;
|
Daniel@0
|
229
|
Daniel@0
|
230 var master = null;
|
Daniel@0
|
231 if (_this._cachedConfig) {
|
Daniel@0
|
232 master = App.RepresentationModule.getMasterForConfig(_this._cachedConfig, true);
|
Daniel@0
|
233 }
|
Daniel@0
|
234
|
Daniel@0
|
235 var configHasChanged = _this._configBehindMainArea !== _this._cachedConfig;
|
Daniel@0
|
236 var masterHasChanged = _this._masterBehindMainArea !== master;
|
Daniel@0
|
237
|
Daniel@0
|
238 if (configHasChanged || masterHasChanged) {
|
Daniel@0
|
239 if (_this._masterBehindMainArea) {
|
Daniel@0
|
240 _this._masterBehindMainArea.destroyConfigGridPanelMainArea(this);
|
Daniel@0
|
241 }
|
Daniel@0
|
242
|
Daniel@0
|
243 if (!_this._cachedConfig) {
|
Daniel@0
|
244 _this._configBehindMainArea = null;
|
Daniel@0
|
245 _this._masterBehindMainArea = null;
|
Daniel@0
|
246 _this._$mainArea.html(Backbone.Marionette.TemplateCache.get("#cgpma_" + _this._cachedConfigGridType + "_" + this.options.dimension + "__empty"));
|
Daniel@0
|
247 } else {
|
Daniel@0
|
248
|
Daniel@0
|
249 _this._configBehindMainArea = _this._cachedConfig;
|
Daniel@0
|
250 _this._masterBehindMainArea = master;
|
Daniel@0
|
251
|
Daniel@0
|
252 _this._$mainArea.empty();
|
Daniel@0
|
253 _this._$mainArea.removeData();
|
Daniel@0
|
254
|
Daniel@0
|
255 try {
|
Daniel@0
|
256 _this._$mainArea.html(Backbone.Marionette.TemplateCache.get("#cgpma_" + _this._cachedConfigGridType + "_" + this.options.dimension + "_" + master.id.split(".")[2]));
|
Daniel@0
|
257 } catch (e) {
|
Daniel@0
|
258 _this._$mainArea.html(Backbone.Marionette.TemplateCache.get("#cgpma_" + _this._cachedConfigGridType + "_" + this.options.dimension + "__unknown"));
|
Daniel@0
|
259 }
|
Daniel@0
|
260 _this._masterBehindMainArea.prepareConfigGridPanelMainArea(_this);
|
Daniel@0
|
261 }
|
Daniel@0
|
262
|
Daniel@0
|
263 var masterKind = undefined;
|
Daniel@0
|
264 if (_this._masterBehindMainArea) {
|
Daniel@0
|
265 masterKind = _this._masterBehindMainArea.id.split(".")[2];
|
Daniel@0
|
266 }
|
Daniel@0
|
267 this.$el.setMod("config-grid-panel", "master-kind", masterKind ? masterKind : false);
|
Daniel@0
|
268 }
|
Daniel@0
|
269 },
|
Daniel@0
|
270 });
|
Daniel@0
|
271 }, Logger); |