Develop

html/js/modelInteraction.js

@@ -150,13 +150,23 @@ var cqhm = cqhm || {};
     cqhm.modelSettingsHandler = {
 
         initialize: function() {
-            this._$elementLabelInput = $("#model-view-element-label-input");
-            this._$elementDeleteButton = $("#model-view-element-delete-button");
+            this._detailFields.$labelInput = $("#model-view-element-label-input");
+            this._detailFields.$widthInput = $("#model-view-element-width-input");
+            this._detailFields.$heightInput = $("#model-view-element-height-input");
+            this._detailFields.$moveForwardButton = $("#model-view-element-move-forward-button");
+            this._detailFields.$moveBackwardButton = $("#model-view-element-move-backward-button");
+            this._detailFields.$deleteButton = $("#model-view-element-delete-button");
 
-            this._$elementLabelInput.prop("disabled", true);
-            this._$elementDeleteButton.prop("disabled", true);
+            // Initially, disable everything
+            $("#model-view-element-settings button, #model-view-element-settings input").prop("disabled", true);
+
+
+            // Set up the on click events for the buttons
+            this._detailFields.$deleteButton.on("click", function() {
+                if (!confirm("Are you sure you want to delete these elements?")) {
+                    return;
+                }
 
-            cqhm.modelSettingsHandler._$elementDeleteButton.on("click", function() {
                 var elementsToBeDeleted = cqhm.modelSelection.getCurrentlySelectedModels();
                 cqhm.modelSelection.clearSelection();
                 elementsToBeDeleted.forEach(function(element) {
@@ -164,6 +174,16 @@ var cqhm = cqhm || {};
                 });
             });
 
+            this._detailFields.$moveForwardButton.click(function(event) {
+                // Because we are handling an event, 'this' is the button
+                cqhm.modelSettingsHandler.moveSelectionForward();
+            });
+
+            this._detailFields.$moveBackwardButton.click(function(event) {
+                // Because we are handling an event, 'this' is the button
+                cqhm.modelSettingsHandler.moveSelectionBackward();
+            });
+
             cqhm.modelSelection.onSelectionChange($.proxy(this._updateSettingsPanel, this));
         },
 
@@ -202,37 +222,72 @@ var cqhm = cqhm || {};
             }
             var selectionSize = cqhm.modelSelection.numSelected();
 
-            if (1 == selectionSize) {
+            if (0 == selectionSize) {
+                // Nothing is selected, disable everything
+                this._detailFields.$labelInput.val("");
+                this._detailFields.$labelInput.prop("disabled", true);
+                this._detailFields.$widthInput.val("");
+                this._detailFields.$widthInput.prop("disabled", true);
+                this._detailFields.$heightInput.val("");
+                this._detailFields.$heightInput.prop("disabled", true);
+                this._detailFields.$moveForwardButton.prop("disabled", true);
+                this._detailFields.$moveBackwardButton.prop("disabled", true);
+                this._detailFields.$deleteButton.prop("disabled", true);
+
+            } else if (1 < selectionSize) {
+                // Multiple things are selected:
+                //   - disable label, width, and height
+                //   - enable bring forward, backward, and delete
+                this._detailFields.$labelInput.val("");
+                this._detailFields.$labelInput.prop("disabled", true);
+                this._detailFields.$widthInput.val("");
+                this._detailFields.$widthInput.prop("disabled", true);
+                this._detailFields.$heightInput.val("");
+                this._detailFields.$heightInput.prop("disabled", true);
+                this._detailFields.$moveForwardButton.prop("disabled", false);
+                this._detailFields.$moveBackwardButton.prop("disabled", false);
+                this._detailFields.$deleteButton.prop("disabled", false);
+
+            } else if (1 == selectionSize) {
+                // One thing is selected:
+                //   - enable move forward, backward, delete
+                //   - also enable label IFF the element has a label
+                //   - also enable width, height IFF the element has size
                 var currentSelected = cqhm.modelSelection.getCurrentlySelectedModels()[0];
+
+                var currSize = currentSelected.get("size");
+                if (undefined !== currSize) {
+                    this._detailFields.$widthInput.val(currSize.width);
+                    this._detailFields.$widthInput.prop("disabled", false);
+                    this._detailFields.$heightInput.val(currSize.height);
+                    this._detailFields.$heightInput.prop("disabled", false);
+                } else {
+                    this._detailFields.$widthInput.val("");
+                    this._detailFields.$widthInput.prop("disabled", true);
+                    this._detailFields.$heightInput.val("");
+                    this._detailFields.$heightInput.prop("disabled", true);
+                }
+
                 var selectedElemHasLabel = (undefined !== currentSelected &&
                     ("string" === typeof currentSelected.attr("text/text") ||
                      undefined !== currentSelected.prop("labels")));
                 var labelIsAllowedToChange = this._isLabelChangeAllowed(currentSelected);
 
                 if (selectedElemHasLabel && labelIsAllowedToChange) {
-                    this._$elementLabelInput.prop("disabled", false);
+                    this._detailFields.$labelInput.prop("disabled", false);
                     var collabString = dataHandler.realtime.getRtModelElementById(currentSelected.get("id"))
                         .get("label").get("english");
                     var inputBox = $("#model-view-element-label-input")[0];
                     var bindingId = dataHandler.realtime.bindCollabStringToHtmlTextElem(collabString, inputBox);
                     this._currentBindingId = bindingId;
-
                 } else {
-                    this._$elementLabelInput.val("");
-                    this._$elementLabelInput.prop("disabled", true);
+                    this._detailFields.$labelInput.val("");
+                    this._detailFields.$labelInput.prop("disabled", true);
                 }
 
-                this._$elementDeleteButton.prop("disabled", false);
-
-            } else if (1 < selectionSize) {
-                this._$elementLabelInput.val("");
-                this._$elementLabelInput.prop("disabled", true);
-                this._$elementDeleteButton.prop("disabled", false);
-
-            } else {
-                this._$elementLabelInput.val("");
-                this._$elementLabelInput.prop("disabled", true);
-                this._$elementDeleteButton.prop("disabled", true);
+                this._detailFields.$moveForwardButton.prop("disabled", false);
+                this._detailFields.$moveBackwardButton.prop("disabled", false);
+                this._detailFields.$deleteButton.prop("disabled", false);
             }
         },
 
@@ -255,8 +310,7 @@ var cqhm = cqhm || {};
             }
         },
 
-        _$elementLabelInput: null,
-        _$elementDeleteButton: null,
+        _detailFields: {},
         _currentBindingId: null,
         _labelChangeAllowTypes: [
                 "cqhm.Branch", "cqhm.Stock", "cqhm.Flow", "cqhm.Event", "cqhm.DynamicEvent",