Integration 20120813

src/css/builder.css

@@ -1563,3 +1563,88 @@ input.screenCoordinate::-webkit-inner-spin-button {
 #exportDialog .buttonStyle {
     margin: 0 0.6em;
 }
+
+#eventHandlerDialog {
+    overflow: hidden;
+    max-height: 380px;
+}
+
+#eventHandlerDialog .wrap_left {
+    position: relative;
+    width: 221px;
+    border-right: 1px solid #dededc;
+}
+
+#eventHandlerDialog .wrap_right {
+    width: 548px;
+}
+
+#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 .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: 200px;
+}
+
+#eventHandlerDialog .wrap_left .container a.emptyLink {
+    position: absolute;
+    top: 46px;
+    left: 110px;
+}
+
+#eventHandlerDialog .wrap_left .container button.emptyButton {
+    position: absolute;
+    top: 40px;
+    left: 160px;
+}
+
+#eventHandlerDialog .wrap_left .container button.doneButton {
+    position: absolute;
+    top: 250px;
+    left: 10px;
+    width: 180px;
+}
+
+#eventHandlerDialog .wrap_right .container {
+    overflow: auto;
+    resize:  none;
+    height: 600px;
+    width: 530px;
+    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;
+}

src/js/adm.js

@@ -1919,12 +1919,16 @@ 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) {
         return undefined;
+    } else {
+        generate = myType;
     }
 
     // find existing nodes with this property set

src/js/serialize.js

@@ -462,49 +462,67 @@ $(function () {
             if (props[i].hasOwnProperty('key')) {
                 el = el + props[i].key;
             }
-            // If need to use sandbox url
-            if (useSandboxUrl && props[i].inSandbox) {
-                el = el + '="' + toSandboxUrl(props[i].value) + '"';
-            } else if (props[i].hasOwnProperty('value')) {
-                el = el + '="' + props[i].value + '"';
-            }
-            if (props[i].hasOwnProperty('content')) {
-                el = el + ' content="' + props[i].content + '"';
+            if (props[i].hasOwnProperty('value') && props[i].value) {
+                // Skip empty or invalid header properties
+                if ((typeof props[i].value !== 'string') || (props[i].value.length <= 0)) {
+                    continue;
+                }
+                // If need to use sandbox url
+                if (useSandboxUrl && props[i].inSandbox) {
+                    el = el + '="' + toSandboxUrl(props[i].value) + '"';
+                } else {
+                    el = el + '="' + props[i].value + '"';
+                }
+                if (props[i].hasOwnProperty('content')) {
+                    el = el + ' content="' + props[i].content + '"';
+                }
+                el = el + '>';
+                headers.push(el);
             }
-            el = el + '>';
-            headers.push(el);
         }
         props = designRoot.getProperty('libs');
         for (i in props) {
             // Skip design only header properties
             if (props[i].hasOwnProperty('designOnly') && props[i].designOnly) {
                 continue;
             }
-            el = '<script ';
-            // If need to use sandbox url
-            if (useSandboxUrl && props[i].inSandbox) {
-                el = el + 'src="' + toSandboxUrl(props[i].value) + '"';
-            } else if (props[i].hasOwnProperty('value')) {
-                el = el + 'src="' + props[i].value + '"';
+            if (props[i].hasOwnProperty('value') && props[i].value) {
+                // Skip empty or invalid header properties
+                if ((typeof props[i].value !== 'string') || (props[i].value.length <= 0)) {
+                    continue;
+                }
+                el = '<script ';
+                // If need to use sandbox url
+                if (useSandboxUrl && props[i].inSandbox) {
+                    el = el + 'src="' + toSandboxUrl(props[i].value) + '"';
+                } else {
+                    el = el + 'src="' + props[i].value + '"';
+                }
+                el = el + '></script>';
+                headers.push(el);
             }
-            el = el + '></script>';
-            headers.push(el);
         }
         props = designRoot.getProperty('css');
         for (i in props) {
             // Skip design only header properties
             if (props[i].hasOwnProperty('designOnly') && props[i].designOnly) {
                 continue;
             }
-            el = '<link ';
-            // If need to use sandbox url
-            if (useSandboxUrl && props[i].inSandbox) {
-                el = el + 'href="' + toSandboxUrl(props[i].value) + '"';
-            } else if (props[i].hasOwnProperty('value')) {
-                el = el + 'href="' + props[i].value + '"';
+            if (props[i].hasOwnProperty('value') && props[i].value) {
+                // Skip empty or invalid header properties
+                if ((typeof props[i].value !== 'string') || (props[i].value.length <= 0)) {
+                    continue;
+                }
+                el = '<link ';
+                // If need to use sandbox url
+                if (useSandboxUrl && props[i].inSandbox) {
+                    el = el + 'href="' + toSandboxUrl(props[i].value) + '"';
+                } else {
+                    el = el + 'href="' + props[i].value + '"';
+                }
+                el = el + ' rel="stylesheet">';
+                headers.push(el);
             }
-            el = el + ' rel="stylesheet">';
-            headers.push(el);
         }
         return headers;
     }
@@ -620,9 +638,12 @@ $(function () {
                 if (headers[header].hasOwnProperty('designOnly') && headers[header].designOnly) {
                     continue;
                 }
+                if (!headers[header].value) {
+                    continue;
+                }
                 if (headers[header].inSandbox) {
                     files.push({
-                        'src': toSandboxUrl(headers[header].Value),
+                        'src': toSandboxUrl(headers[header].value),
                         'dst': headers[header].value
                     });
                 } else {
@@ -747,7 +768,85 @@ $(function () {
         return $.rib.fsUtils.pathToUrl(fullPath);
     }
 
-    /***************** export functions out *********************/
+    /**
+     * Update header file in current design, such as css, js file.
+     * This function's logic: try to replace the oldFile with newFile
+     * in design headers, but if the oldFile in not in the list, then
+     * just insert the newFile, or if the newFile is not specified or
+     * it has already in the list, then just remove the oldFile.
+     *
+     * @param {String} type Type of the specified header.
+     * @param {String} oldFile Sandbox path of the old file to be updated.
+     * @param {String} newFile Sandbox path of the new file.
+     * Notes: filePath If the file is in project directory, relative path should
+     *        be used. A path beginning with '/' will be considered as absolut
+     *        path in sandbox.
+     *
+     * @return {None}
+     */
+
+    function updateHeaderFile(type, oldFile, newFile) {
+        var property, array, design, i,
+            oldIndex = -1, newIndex = -1,
+            propertyMap = {
+                css: 'css',
+                js: 'libs'
+            };
+        if ((newFile === oldFile) || (!oldFile && !newFile)) {
+            return;
+        }
+        property = propertyMap[type];
+        if (!property) {
+            dumplog('warning: No header:' + type + 'in design.');
+        }
+        design = ADM.getDesignRoot();
+        array = $.merge([], design.getProperty(property));
+        for (i = 0; i < array.length; i++) {
+            if (!array[i].inSandbox) {
+                continue;
+            } else {
+                if (oldFile && (array[i].value === oldFile)) {
+                    oldIndex = i;
+                    if ((!newFile) && (newIndex >= 0)) {
+                        break;
+                    }
+                }
+                if (newFile && (array[i].value === newFile)) {
+                    newIndex = i;
+                    if ((!oldIndex) && (oldIndex >= 0)) {
+                        break;
+                    }
+                }
+            }
+        }
+        // The oldFile in headers list.
+        if (oldIndex >= 0) {
+            // Update case: need to insert new file and it's not
+            // in the list, then delete old one, insert the new one.
+            if (newFile && newIndex === -1) {
+                array.splice(oldIndex, 1, {
+                    inSandbox: true,
+                    value: newFile
+                });
+            } else {
+            // Remove case: just delete the old one if don't need to insert.
+                array.splice(oldIndex, 1);
+            }
+            // set the new array back
+            design.setProperty(property, array);
+        } else if (newFile && (oldIndex === -1) && (newIndex === -1)) {
+            // Add case: need to insert new one, and old one and new one
+            // are both not list, then we just add the new one.
+            array.push({
+                inSandbox: true,
+                value: newFile
+            });
+            // set the new array back
+            design.setProperty(property, array);
+        }
+        return;
+    }
+
     /**
      * Add custom file to current active project.
      * It will save the content in project folder. If the parent directy of
@@ -761,7 +860,7 @@ $(function () {
      *
      * @return {None}
      */
-    $.rib.addCustomFile = function (filePath, type, contents, success, error) {
+    function addCustomFile(filePath, type, contents, success, error) {
         var destPath, addToDesign, projectDir;
         projectDir = $.rib.pmUtils.getProjectDir();
         // If it is relative path, then add the project folder path
@@ -770,47 +869,21 @@ $(function () {
         } else {
             destPath = filePath;
         }
-        addToDesign = function (type, value) {
-            var design, array, property, propertyMap, i, temp;
-            propertyMap = {
-                css: 'css',
-                js: 'libs'
-            };
-            design = ADM.getDesignRoot();
-            property = propertyMap[type];
-            temp = $.extend(true, {}, {
-                property: property,
-                value: design.getProperty(property)
-            });
-            array = temp.value;
-            for (i = 0; i < array.length; i++) {
-                // If the value is in headers, then just return.
-                if (JSON.stringify(array[i]) === JSON.stringify(value)) {
-                    return;
-                }
-            }
-            // If the value is not in array, then push the value in the list
-            array.push(value);
-            // set the new array back
-            design.setProperty(property, array);
-            return;
-        };
         // Write contents to sandbox
         $.rib.fsUtils.write(destPath, contents, function (newFile) {
-            var headerValue = {
-                'inSandbox': true,
-                'value': filePath
-            };
-            addToDesign(type, headerValue);
+            updateHeaderFile(type, null, filePath);
             success && success(newFile);
         }, error);
-    };
+    }
 
+    /***************** export functions out *********************/
     // Export serialization functions into $.rib namespace
     $.rib.generateHTML = generateHTML;
     $.rib.serializeADMSubtreeToDOM = serializeADMSubtreeToDOM;
     $.rib.ADMToJSONObj = ADMToJSONObj;
     $.rib.JSONToProj = JSONToProj;
     $.rib.getDesignHeaders = getDesignHeaders;
     $.rib.exportPackage = exportPackage;
+    $.rib.updateHeaderFile = updateHeaderFile;
+    $.rib.addCustomFile = addCustomFile;
 });