[FileIO] Handler Sandbox URL for uploaded image files

src/js/serialize.js

@@ -56,13 +56,30 @@ var DEBUG = true,
         };
     },
 
+    getPropertyDomAttribute = function (node, propName, newValue) {
+        var attrName, attrMap, attrValue, propValue;
+        attrName = BWidget.getPropertyHTMLAttribute(node.getType(), propName);
+        propValue = newValue || node.getProperty(propName);
+        attrValue = propValue;
+        if (typeof attrName  === "object") {
+            attrMap = attrName;
+            attrName = attrMap.name;
+            if (typeof attrMap.value  === "function")
+                attrValue = attrMap.value(propValue);
+            else
+                attrValue = attrMap.value[propValue];
+        }
+        return {"name": attrName,
+                "value": attrValue};
+    },
+
     serializeADMNodeToDOM = function (node, domParent) {
         var uid, type, pid, selector,
             parentSelector = 'body',
             parentNode = null,
             template, props, id,
             selMap = {},  // maps selectors to attribute maps
-            attrName, attrValue, propValue, propDefault,
+            attrObject, propValue, propDefault,
             widget, regEx, wrapper, domNodes;
 
         // Check for valid node
@@ -127,22 +144,14 @@ var DEBUG = true,
         // Apply any special ADMNode properties to the template before we
         // create the DOM Element instance
         for (var p in props) {
-            propValue = attrValue = node.getProperty(p);
+            propValue = node.getProperty(p);
 
             switch (p) {
             case "type":
                 break;
             default:
-                attrName = BWidget.getPropertyHTMLAttribute(type, p);
-                if (typeof attrName  === "object") {
-                    var attrMap = attrName;
-                    attrName = attrMap.name;
-                    if (typeof attrMap.value  === "function")
-                        attrValue = attrMap.value(propValue);
-                    else
-                        attrValue = attrMap.value[propValue];
-                }
-                if (attrName) {
+                attrObject = getPropertyDomAttribute(node, p);
+                if (attrObject.name) {
                     propDefault = BWidget.getPropertyDefault(type, p);
 
                     if (propValue !== propDefault ||
@@ -159,7 +168,7 @@ var DEBUG = true,
                         }
 
                         // add attribute mapping to corresponding selector
-                        selMap[selector][attrName] = attrValue;
+                        selMap[selector][attrObject.name] = attrObject.value;
                     }
                 }
                 break;
@@ -684,30 +693,49 @@ $(function() {
             files.push(iconPath);
         }
         ribFile && zip.add(projName + ".json", ribFile);
-        resultHTML = generateHTML();
+        resultHTML = generateHTML(null, function (admNode, domNode){
+            scanSandboxFiles(admNode, function (property, relativePath, urlPath) {
+                // Add the image file to the needed list
+                files.push({
+                    "src":urlPath,
+                    "dst":relativePath});
+            })
+        });
         resultHTML && zip.add("index.html", resultHTML.html);
         // projName now is the whole package name
         projName = projName + '.' + type;
 
         i = 0;
         files.forEach(function (file, index) {
+            var req, srcPath, dstPath;
             // We have to do ajax request not using jquery as we can't get "arraybuffer" response from jquery
             var req = window.ActiveXObject ? new window.ActiveXObject( "Microsoft.XMLHTTP" ): new XMLHttpRequest();
+            req = window.ActiveXObject ? new window.ActiveXObject( "Microsoft.XMLHTTP" ): new XMLHttpRequest();
+            if ((typeof file === "object") && file.dst && file.src) {
+                srcPath = file.src;
+                dstPath = file.dst;
+            } else if(typeof file === "string") {
+                srcPath = file;
+                dstPath = file;
+            } else {
+                console.error("Envalid path for exported Zip.");
+                return;
+            }
             req.onload = function() {
                 var uIntArray = new Uint8Array(this.response);
                 var charArray = new Array(uIntArray.length);
                 for (var j = 0; j < uIntArray.length; j ++) {
                     charArray[j] = String.fromCharCode(uIntArray[j]);
                 }
-                zip.add(file, btoa(charArray.join('')), {base64:true});
+                zip.add(dstPath, btoa(charArray.join('')), {base64:true});
                 if (i === files.length - 1){
                     var content = zip.generate(true);
                     exportFile(projName, content, true);
                 }
                 i++;
             }
             try {
-                req.open("GET", file, true);
+                req.open("GET", srcPath, true);
                 req.responseType = 'arraybuffer';
             } catch (e) {
                 alert(e);
@@ -739,7 +767,36 @@ $(function() {
         return;
     }
 
+    function scanSandboxFiles (admNode, handler) {
+        var props, p, value, urlPath, pType, projectDir, attrObject,
+            relativeRule, innerFiles = [];
+        if (!($.rib.fsUtils.fs && $.rib.pmUtils && $.rib.pmUtils.getActive())) {
+            return;
+        }
+        relativeRule = /^[\w\-_]+(\/[\w\-_]+)*\.?[\w]+$/i;
+        props = admNode.getProperties();
+        projectDir = $.rib.pmUtils.ProjectDir + "/" + $.rib.pmUtils.getActive() + "/";
+        for (p in props) {
+            value = props[p];
+            pType = BWidget.getPropertyType(admNode.getType(), p);
+            if (pType === "url-uploadable" && relativeRule.test(value)) {
+                urlPath = $.rib.fsUtils.pathToUrl(projectDir + value.replace(/^\//, ""));
+                handler && handler(p, value, urlPath);
+            }
+        }
+        return;
+    };
+
     /***************** export functions out *********************/
+    $.rib.useSandboxUrl = function (admNode, domNode) {
+        scanSandboxFiles(admNode, function (property, relativePath, urlPath) {
+            var attrObject = getPropertyDomAttribute(admNode, property, urlPath);
+            // Set the new value for the domNode
+            if (attrObject && attrObject.name && attrObject.value) {
+                $(domNode).attr(attrObject.name, attrObject.value);
+            }
+        })
+    };
     // Export serialization functions into $.rib namespace
     $.rib.ADMToJSONObj = ADMToJSONObj;
     $.rib.JSONToProj = JSONToProj;

src/js/views/layout.js

@@ -408,6 +408,16 @@
             // these lines.
             $(domNode).removeAttr('disabled');
             $(domNode).children().removeAttr('disabled');
+
+            // Set default src for empty image to make them show up
+            // TODO: This case may need to improve, such as we can show a box
+            // with "empty image" message to notice the user
+            if ((admNode.getType() === "Image") && (!admNode.getProperty('src'))) {
+                if ($(domNode).is('img')) {
+                    $(domNode).attr('src', "src/css/images/widgets/tizen_image.svg");
+                }
+            }
+            $.rib.useSandboxUrl(admNode, domNode);
         }
     });
 })(jQuery);

src/js/views/live.js

@@ -314,7 +314,7 @@
                 });
                 liveDoc = widget.options.contentDocument[0];
                 liveDoc.open();
-                liveDoc.writeln(generateHTML().html);
+                liveDoc.writeln(generateHTML(ADM.getDesignRoot(), $.rib.useSandboxUrl).html);
                 liveDoc.close();
             }
         },

src/js/views/property.js

@@ -174,7 +174,7 @@
                                 target = $(this).prev("input:text");
                                 saveDir = $.rib.pmUtils.ProjectDir + "/" + $.rib.pmUtils.getActive() + "/images/";
                                 $.rib.fsUtils.uploadAndSave("image", saveDir, $(this).parent(), function (file) {
-                                    target.val(file.toURL());
+                                    target.val("images/" + file.name);
                                     target.trigger('change');
                                 });
                             })

src/js/widgets.js

@@ -662,7 +662,7 @@ var BWidgetRegistry = {
         properties: {
             src: {
                 type: "url-uploadable",
-                defaultValue: "src/css/images/widgets/tizen_image.svg",
+                defaultValue: "",
                 htmlAttribute: "src",
                 forceAttribute: true
             },