[Rebased] Show image options as datalist in property view

src/css/builder.css

@@ -866,6 +866,17 @@ body.ui-tabs.ui-widget {
     overflow-x: hidden;
     overflow-y: auto;
 }
+.propertyView .datalist .upload-button {
+    text-align: center;
+    border: 1px solid #a1a1a1;
+    line-height: 12px;
+    background-color: #fbfbfb;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
 .propertyView .datalist li {
     clear:both;
     cursor: pointer;

src/js/adm.js

@@ -253,6 +253,24 @@ ADM.addEventType("activePageChanged");
  */
 ADM.addEventType("selectionChanged");
 
+/**
+ * Event sent by the ADM object when the usage status of images change.
+ * When the active page changes, the selected widget is set to null
+ * automatically.
+ *
+ * @name ADM#imagesUpdated
+ * @event
+ * @param {Object} event Object including standard "id" and "name"
+ *                       properties, as well as a
+ *                         "usageStatus" is an object contains
+ *                                       current usage status of
+ *                                       all existing images
+ * @param {Any} data The data you supplied to the bind() call.
+ * @see ADMEventSource.bind
+ * @see ADMEventSource.unbind
+ */
+ADM.addEventType("imagesUpdated");
+
 /**
  * Gets the singleton design root.
  *

src/js/projects.js

@@ -433,6 +433,8 @@ $(function () {
                 pmUtils._projectsInfo[newPid] = {};
                 pmUtils.setProperties(newPid, properties);
                 pmUtils.setProperty(newPid, "accessDate", new Date());
+                // init resource usage status
+                $.rib.pmUtils.resourceRef = {};
 
                 if (design && (design instanceof ADMNode)) {
                     ADM.setDesignRoot(design);
@@ -534,7 +536,7 @@ $(function () {
      * @return {None}.
      */
     pmUtils.openProject = function (pid, success, error) {
-        var designPath, successHandler;
+        var designPath, successHandler, imagePath;
 
         if (!pmUtils._projectsInfo[pid]) {
             console.error("Error: Invalid pid for project when opening project");
@@ -546,6 +548,7 @@ $(function () {
             return;
         }
         designPath = pmUtils.getDesignPath(pid);
+        imagePath = pmUtils.getProjectDir(pid) + 'images/';
 
         successHandler = function (result) {
             var design, project;
@@ -556,6 +559,15 @@ $(function () {
                 pmUtils._activeProject = pid;
                 // update access time
                 pmUtils.setProperty(pid, "accessDate", new Date());
+                // init pmUtils.resourceRef, reset usage status of resources
+                $.rib.pmUtils.resourceRef = {};
+                $.rib.fsUtils.ls(imagePath, function (entries) {
+                    $.each(entries, function (i, e) {
+                        $.rib.pmUtils.resourceRef['images/'+e.name] = 0;
+                    });
+                }, function (e) {
+                    dumplog('There is no image in this project.');
+                });
                 // set the new design as design root
                 ADM.setDesignRoot(design);
                 success && success();
@@ -961,6 +973,7 @@ $(function () {
         } else {
             pmUtils.resourceRef[refPath]++;
         }
+        ADM.fireEvent('imagesUpdated', {usageStatus: pmUtils.resourceRef});
         return;
     };
 
@@ -983,8 +996,10 @@ $(function () {
                     $.rib.confirm('Unused resource: "' + entry.name +
                         '". \nWould you like to delete it from the project?', function () {
                             $.rib.fsUtils.rm(entry.fullPath);
+                            ADM.fireEvent('imagesUpdated', {usageStatus: pmUtils.resourceRef});
                         }, function () {
                             pmUtils.resourceRef[refPath] = 0;
+                            ADM.fireEvent('imagesUpdated', {usageStatus: pmUtils.resourceRef});
                         });
                 });
             }
@@ -1013,12 +1028,6 @@ $(function () {
         if (!(node instanceof ADMNode)) {
             return false;
         }
-        // if the design is Design root
-        if (node.getType() === "Design") {
-            // reset pmUtils.resourceRef
-            pmUtils.resourceRef = {};
-            upFlag = true;
-        }
         // Find all used sandbox resource nodes and the matched properties
         matched = node.findNodesByProperty($.rib.pmUtils.relativeFilter);
         for (i = 0; i < matched.length; i++) {

src/js/views/base.js

@@ -27,6 +27,7 @@
             o.selectionChanged = this._selectionChangedHandler;
             o.activePageChanged = this._activePageChangedHandler;
             o.modelUpdated = this._modelUpdatedHandler;
+            o.imagesUpdated = this._imagesUpdatedHandler;
 
             // FIXME: This should work, but $.extend of options seems to be
             //        creating a copy of the ADM, which will not containt the
@@ -94,6 +95,9 @@
                 if (o.activePageChanged) {
                     a.bind("activePageChanged", o.activePageChanged, this);
                 }
+                if (o.imagesUpdated) {
+                    a.bind("imagesUpdated", o.imagesUpdated, this);
+                }
 
                 // Since model changed, need to call our designReset hander
                 // to sync up the ADMDesign modelUpdated event handler