Integration 20120823

src/css/builder.css

@@ -1344,6 +1344,11 @@ div.propertyItems label[for|=id] {
     font-weight: bold;
 }
 
+.titleBar input {
+    width: 150px;
+    margin: 3px;
+}
+
 .openButton {
     background-image: url("images/openButton_up.png");
     background-repeat: no-repeat;
@@ -1555,3 +1560,118 @@ input.screenCoordinate::-webkit-inner-spin-button {
 #exportDialog .buttonStyle {
     margin: 0 0.6em;
 }
+
+#eventHandlerDialog {
+    overflow: hidden;
+}
+
+#eventHandlerDialog .title {
+    position: relative;
+    height: 52px;
+    background-color: #E4E5DF;
+}
+
+#eventHandlerDialog .title > label {
+    position: absolute;
+    left: 10px;
+    top: 16px;
+    font-size : 13px;
+    color: #4d4d4d;
+    font-family: OpenSans-SB;
+    font-weight: 600; /* semi-bold */
+}
+
+
+#eventHandlerDialog .wrap_left {
+    position: relative;
+    width: 230px;
+    border-right: 1px solid #dededc;
+}
+
+#eventHandlerDialog .wrap_left .container {
+    position: absolute;
+    width: 100%;
+    margin: 10px;
+}
+
+
+#eventHandlerDialog .wrap_left .container * {
+    display: inline-block;
+}
+
+#eventHandlerDialog .wrap_left .container select {
+    position: absolute;
+    top: 10px;
+    left: 0px;
+    width: 270px;
+}
+
+#eventHandlerDialog .wrap_left .container fieldset {
+    position: absolute;
+    top: 40px;
+    width: 244px;
+    height: 370px;
+    overflow: auto;
+}
+
+#eventHandlerDialog .wrap_left .container fieldset ul {
+    margin: 0px;
+}
+
+#eventHandlerDialog .wrap_left .container fieldset li {
+    display: block;
+    padding: 8px 8px 8px 8px;
+    margin-left: -36px;
+    width: 200px;
+    height: 34px;
+    border: 8px transparent;
+    border-bottom: 1px solid #CCC;
+}
+
+#eventHandlerDialog .wrap_left .container fieldset li.ui-selected {
+    background-color: #4AE57B;
+}
+
+#eventHandlerDialog .wrap_left .container fieldset li > a.link {
+    padding-top: 8px;
+    width: 160px;
+    height: 34px;
+}
+
+#eventHandlerDialog .wrap_left .container fieldset a.ui-button  {
+    margin-top: 0px;
+    float: right;
+}
+
+#eventHandlerDialog .wrap_left .container button.doneButton {
+    position: absolute;
+    top: 440px;
+    left: 46px;
+    width: 180px;
+}
+
+#eventHandlerDialog .wrap_right {
+    width: 630px;
+}
+
+#eventHandlerDialog .wrap_right .container {
+    overflow: auto;
+    resize:  none;
+    height: 600px;
+    width: 98%;
+    margin: 6px;
+}
+
+#eventHandlerDialog .wrap_right .container .CodeMirror {
+    margin: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -moz-box-shadow:    inset 0 0 4px #000000;
+    -webkit-box-shadow: inset 0 0 4px #000000;
+    box-shadow:         inset 0 0 4px #000000;
+    height: 470px;
+}
+
+#eventHandlerDialog .wrap_right .container .CodeMirror .CodeMirror-scroll {
+    height: 464px;
+}

src/js/adm.js

@@ -253,6 +253,22 @@ ADM.addEventType("activePageChanged");
  */
 ADM.addEventType("selectionChanged");
 
+/**
+ * Event sent by the ADM object when the theme of design
+ * changed. After this event happened, the theme of all widget
+ * will be changed to "default".
+ *
+ * @name ADM#themeChanged
+ * @event
+ * @param {Object} event Object including standard "id" and "name"
+ *                       properties.
+ *
+ * @param {Any} data The data you supplied to the bind() call.
+ * @see ADMEventSource.bind
+ * @see ADMEventSource.unbind
+ */
+ADM.addEventType("themeChanged");
+
 /**
  * Gets the singleton design root.
  *
@@ -463,6 +479,53 @@ ADM.setSelected = function (nodeRef) {
     return false;
 };
 
+/**
+ * Set theme of all widgets. Sends a "themeChanged" event if the
+ * theme of current project actually changes.
+ */
+ADM.setTheme = function () {
+    var design, setNodeTheme, isSwatchExist;
+
+    design = ADM.getDesignRoot();
+    isSwatchExist = function (swatch, type) {
+       var swatches = BWidget.getPropertyOptions(type)['theme'];
+       //check whether swatch is in swatcher list of current theme
+       if (jQuery.inArray(swatch, swatches) >= 0) {
+           return true;
+       }
+       return false;
+    }
+    setNodeTheme = function (admNode) {
+        var i, type, children;
+        if (admNode instanceof ADMNode) {
+            type = admNode.getType();
+            // Firstly we get theme property of node. If original swatch
+            // of theme can be found from current theme, we do nothing.
+            // Otherwise, we set property value as default
+            if (BWidget.propertyExists(type, 'theme') &&
+                !isSwatchExist(admNode.getProperty('theme'), type)){
+                admNode.setProperty('theme', 'default');
+            }
+
+            children = admNode.getChildren();
+            if (children.length > 0) {
+                for (i = 0; i < children.length; i++) {
+                    setNodeTheme(children[i]);
+                }
+            }
+        } else {
+            console.warn("warning: children of ADMNode must be ADMNode");
+        }
+    };
+
+    design.suppressEvents(true);
+    // set theme value of all nodes as default
+    setNodeTheme(design);
+    design.suppressEvents(false);
+    // send themeChanged event to notify all views to update
+    ADM.fireEvent('themeChanged');
+}
+
 /**
  * Initiates an atomic transaction from the user's point of view, that may
  * involve more than one change to the the ADM. The initial usage is when the
@@ -1960,11 +2023,15 @@ ADMNode.prototype.foreach = function (func) {
  * @param {String} The name of the property.
  * @return {String} The generated property value.
  */
-ADMNode.prototype.generateUniqueProperty = function (property) {
+ADMNode.prototype.generateUniqueProperty = function (property, force) {
     var generate, design, myType, length, i, genLength, max, num, existing = [];
     myType = this.getType();
     generate = BWidget.getPropertyAutoGenerate(myType, property);
-    if (!generate) {
+    // If force argument is set, then set the generate as myType and continue
+    // to run.
+    if (!generate && force) {
+        generate = myType.toLowerCase();
+    } else if (!generate) {
         return undefined;
     }
 
@@ -2230,8 +2297,17 @@ ADMNode.prototype.isPropertyExplicit = function (property) {
  *                  relevant info for performing an undo of this operation.
  */
 ADMNode.prototype.setProperty = function (property, value, data, raw) {
-    var orig, func, changed, type, rval = { }, defaultValue;
-    type = BWidget.getPropertyType(this.getType(), property);
+    var orig, func, changed, rval = { }, defaultValue, eventName, node,
+        oldValue, cfm, node = this,
+        type = BWidget.getPropertyType(this.getType(), property);
+
+    // Test the node have event handlers
+    function haveEventHandlers() {
+        return !$.isEmptyObject(node.getMatchingProperties(
+            {'type': 'event', 'value': new RegExp('.+')}
+        ));
+    } 
+
     if (!type) {
         console.error("Error: attempted to set non-existent property: " +
                     property);
@@ -2266,6 +2342,19 @@ ADMNode.prototype.setProperty = function (property, value, data, raw) {
             console.error("Error: page id cannot be null");
             return rval;
         }
+
+        // When widget that have event handlers, after user make the ID
+        // property be blank, then popup a confirm dialog.
+        if (value === "" && haveEventHandlers()) {
+            oldValue = this.getProperty(property);
+            cfm = confirm(
+                'All event handlers of this widget will stop working and can\'t be exported if the ID property is empty. Are you sure you want to set the ID property to empty?'
+            );
+            if (!cfm) {
+                // Restore to old value.
+                return rval;
+            };
+        }
     }
 
     // test for deep equality efficiently
@@ -2300,6 +2389,14 @@ ADMNode.prototype.setProperty = function (property, value, data, raw) {
                             { type: "propertyChanged", node: this,
                               property: property, oldValue: orig,
                               newValue: value });
+
+        // Event handler saving after ID/event property changed.
+        if (property == 'id') {
+            if (haveEventHandlers())
+                $.rib.saveEventHandlers();
+        } else if (type == 'event') {
+            $.rib.saveEventHandlers();
+        }
         rval.result = true;
     }
     return rval;

src/js/composer.js

@@ -432,6 +432,15 @@ $(function() {
                         delegateNode.addClass('delegation');
                         delegateNode.attr('data-uid', $(node).attr('data-uid'));
                     }
+                    if (admNode.isSelected() && !admNode.instanceOf('Page')) {
+                        $(node).removeClass('ui-selected')
+                            .removeClass('ui-selecting')
+                            .removeClass('ui-unselecting');
+
+                        $(delegateNode).removeClass('ui-unselecting')
+                            .removeClass('ui-selecting')
+                            .addClass('ui-selected');
+                    }
                 }
 
                 // Configure "select" handler
@@ -898,6 +907,10 @@ $(function() {
         $(foo).focus();
         $(bar).blur();
 
-        adm.setSelected((item?$(item).attr('data-uid'):item));
+        if (item) {
+            adm.setSelected($(item).attr('data-uid'));
+        } else {
+            adm.setSelected(adm.getActivePage());
+        }
     }
 });