Complete the PortalLogosView

- Ensure empty acknowledgmentsLogos aren't serialized
- Add a remove button to the ImageEdit view

Relates to issue #1006 and #1004

src/js/models/portals/PortalModel.js

@@ -624,15 +624,23 @@ define(["jquery",
 
                 _.each(acknowledgmentsLogos, function(imageModel) {
 
-                  var ackLogosSerialized = imageModel.updateDOM();
+                  // Don't serialize empty imageModels
+                  if(
+                    imageModel.get("identifier") ||
+                    imageModel.get("label") ||
+                    imageModel.get("associatedURL")
+                  ){
 
-                  // Insert new node at correct position
-                  var insertAfter = model.getXMLPosition(portalNode, "acknowledgmentsLogo");
-                  if(insertAfter){
-                    insertAfter.after(ackLogosSerialized);
-                  }
-                  else {
-                    portalNode.append(ackLogosSerialized);
+                    var ackLogosSerialized = imageModel.updateDOM();
+
+                    // Insert new node at correct position
+                    var insertAfter = model.getXMLPosition(portalNode, "acknowledgmentsLogo");
+                    if(insertAfter){
+                      insertAfter.after(ackLogosSerialized);
+                    }
+                    else {
+                      portalNode.append(ackLogosSerialized);
+                    }
                   }
                 })
               };
@@ -1398,6 +1406,18 @@ define(["jquery",
               }
             },
 
+            /**
+             * removeAcknowledgementLogo - remove a portalImage model from the
+             * acknowledgementLogos array.
+             *
+             * @param  {portalImage} portalImage the portalImage model to remove
+             */
+            removeAcknowledgementLogo: function(portalImage){
+              var ackLogos = _.clone(this.get("acknowledgmentsLogos"));
+              ackLogos.splice( $.inArray(portalImage, ackLogos), 1);
+              this.set({acknowledgmentsLogos: ackLogos});
+            },
+
             /**
             * Saves a reference to this Portal on the MetacatUI global object
             */

src/js/templates/imageEdit.html

@@ -11,3 +11,6 @@ <h5><%=urlLabel%></h5>
     <input type="text" placeholder="URL" class="basic-text" value="<%=urlText%>" data-category="associatedURL"/>
   </div>
 <% } %>
+<% if(removeButton){ %>
+<i class="icon-remove remove icon" title="Remove"></i>
+<% } %>

src/js/views/ImageEditView.js

@@ -83,6 +83,12 @@ function(_, $, Backbone, PortalImage, ImageUploaderView, Template){
      */
     imageTagName: "div",
 
+    /**
+     * Whether or not a remove button should be shown.
+     * @type {boolean}
+     */
+    imageTagName: false,
+
     /**
     * References to templates for this view. HTML files are converted to Underscore.js templates
     */
@@ -106,6 +112,7 @@ function(_, $, Backbone, PortalImage, ImageUploaderView, Template){
     * @property {string} options.nameLabel - Gets set as ImageEditView.nameLabel
     * @property {string} options.urlLabel - Gets set as ImageEditView.urlLabel
     * @property {string}  options.imageTagName - Gets set as ImageUploaderView.imageTagName
+    * @property {string}  options.removeButton - Gets set as ImageUploaderView.removeButton
     */
     initialize: function(options){
 
@@ -118,7 +125,8 @@ function(_, $, Backbone, PortalImage, ImageUploaderView, Template){
           this.imageHeight              = options.imageHeight;
           this.nameLabel                = options.nameLabel;
           this.urlLabel                 = options.urlLabel;
-          this.imageTagName                  = options.imageTagName;
+          this.imageTagName             = options.imageTagName;
+          this.removeButton             = options.removeButton;
         }
 
         if(!this.model){
@@ -142,27 +150,32 @@ function(_, $, Backbone, PortalImage, ImageUploaderView, Template){
 
         //Insert the template for this view
         this.$el.html(this.template({
-          nameLabel: this.nameLabel,
-          urlLabel:  this.urlLabel,
-          nameText: this.model.get("label"),
-          urlText: this.model.get("associatedURL")
+          nameLabel:    this.nameLabel,
+          urlLabel:     this.urlLabel,
+          nameText:     this.model.get("label"),
+          urlText:      this.model.get("associatedURL"),
+          removeButton: this.removeButton
         }));
 
         // Create an ImageUploaderView and insert into this view
         var uploader = new ImageUploaderView({
-          height: this.imageHeight,
-          width: this.imageWidth,
-          url: this.model.get("imageURL"),
+          height:             this.imageHeight,
+          width:              this.imageWidth,
+          url:                this.model.get("imageURL"),
           uploadInstructions: this.imageUploadInstructions,
-          imageTagName : this.imageTagName
+          imageTagName:       this.imageTagName
         });
 
         this.$(this.imageUploaderContainer).append(uploader.el);
         uploader.render();
 
         // Remove validation error messages, if there are any, when image added
         this.stopListening(uploader, "imageAdded");
-        this.listenTo(uploader, "imageAdded", this.removeValidation);
+        this.listenTo(uploader, "imageAdded", function(){
+          this.removeValidation();
+          // For the parent view
+          this.trigger("imageAdded", view.el);
+        });
 
         // Update the portal image model when the image is successfully uploaded
         this.stopListening(uploader, "imageUploaded");
@@ -174,7 +187,7 @@ function(_, $, Backbone, PortalImage, ImageUploaderView, Template){
         });
 
       } catch (e) {
-        console.log("image edit view not rendered, error message: " + e);
+        console.log("ImageEdit view not rendered, error message: " + e);
       }
 
     },

src/js/views/portals/editor/PortEditorLogosView.js

@@ -39,6 +39,8 @@ function(_, $, Backbone, PortalImage, ImageEdit){
     * @type {Object}
     */
     events: {
+      "click .edit-image .remove"         : "removeAckLogo",
+      "keyup .edit-image.new .basic-text" : "handleNewInput"
     },
 
     /**
@@ -60,48 +62,128 @@ function(_, $, Backbone, PortalImage, ImageEdit){
     */
     render: function(){
 
-      if(!this.model.get("acknowledgmentsLogos") || !this.model.get("acknowledgmentsLogos").length){
-        this.model.set("acknowledgmentsLogos", Array(1).fill(new PortalImage({ nodeName: "acknowledgmentsLogo" })));
+      var savedLogos = this.model.get("acknowledgmentsLogos"),
+          newLogo = new PortalImage({ nodeName: "acknowledgmentsLogo" });
+
+      // If there are no acknowledgmentsLogos yet, then set a new empty logo for
+      // the user to enter information into
+      if( !savedLogos || !savedLogos.length){
+        this.model.set( "acknowledgmentsLogos", [newLogo]);
+      // If there are already logos, add a new blank logo to the end of the list.
+      // Note that empty logos won't get serialized
+      } else {
+        savedLogos.push(newLogo);
+        this.model.set("acknowledgmentsLogos", savedLogos);
       }
 
       // Iterate over each logo in the PortalModel and render an ImageView
       _.each(this.model.get("acknowledgmentsLogos"), function(portalImage){
 
-        var imageEdit = new ImageEdit({
-          model: portalImage,
-          imageUploadInstructions: "Drag & drop a logo here or click to upload",
-          imageWidth: 100,
-          imageHeight: 100,
-          nameLabel: "Name",
-          urlLabel: "URL",
-          imageTagName: "img"
-        });
-
-        $(this.el).append(imageEdit.el);
-        imageEdit.render();
-        $(this.el).find(".basic-text").data({ model: portalImage });
+        this.renderAckLogoInput(portalImage);
+
       }, this);
 
       // TODO: add a new blank image edit each time an acknowledgmentsLogo is added
 
     },
 
+
+    /**
+     * renderAckLogoInput - description
+     *
+     * @param  {type} portalImage description
+     * @return {type}             description
+     */
+    renderAckLogoInput: function(portalImage){
+
+      // Check if this is a new, empty acknowledgmentsLogo
+      var isNew = !portalImage.get("identifier") &&
+                  !portalImage.get("associatedURL") &&
+                  !portalImage.get("label");
+
+      var imageEdit = new ImageEdit({
+        model: portalImage,
+        imageUploadInstructions: "Drag & drop a partner logo here or click to upload",
+        imageWidth: 100,
+        imageHeight: 100,
+        nameLabel: "Name",
+        urlLabel: "URL",
+        imageTagName: "img",
+        removeButton: true
+      });
+      $(this.el).append(imageEdit.el);
+      imageEdit.render();
+
+      // When user adds a file, this imageEdit is no longer new
+      this.listenToOnce(imageEdit, "imageAdded", this.handleNewInput);
+
+      // For updaing the field on user input
+      $(imageEdit.el).find(".basic-text").data({ model: portalImage });
+      // For removing the imageModel when user clicks 'remove'
+      $(imageEdit.el).data({ model: portalImage });
+
+      if(isNew){
+        $(imageEdit.el).addClass("new");
+        // Don't allow users to remove the new portalImage -
+        // it's the only place to add an acknowledgmentsLogo.
+        $(imageEdit.el).find(".remove.icon").hide();
+      }
+
+    },
+
     /**
      * removeAckLogo - removes an acknowledgmentsLogo
      *
      * @param  {type} ackLogo description
      */
-    removeAckLogo: function(ackLogo){
-      // TODO
+    removeAckLogo: function(e){
+
+      if(!e.target || !$(e.target).parent().data("model")){
+        return
+      }
+
+      // Remove the model
+      var portalImage = $(e.target).parent().data("model");
+      this.model.removeAcknowledgementLogo(portalImage);
+
+      // Remove the div
+      $(e.target).parent().animate({width: "0px", overflow: "hidden"}, {
+        duration: 250,
+        complete: function(){
+          this.remove();
+        }
+      });
+
     },
 
     /**
-     * addNewAckLogo - adds another input for an acknowledgmentsLogo
+     * handleNewInput - Called when a user enters any input into a new ImageEdit
+     * view. It removed the "new" class, shows the "remove" button, and adds a new
+     * ImageEdit with a blank PortalImage model.
      *
-     * @param  {type} ackLogo description
+     * @param  {object} eOrEl either the keyup event when user enters text into a
+     * imageEdit input, OR the actual imageEdit element passed from imageEdit
+     * view when the user adds an image.
      */
-    addNewAckLogo: function(ackLogo){
-      // TODO
+    handleNewInput: function(eOrEl){
+
+      var imageEditEl   = eOrEl.target ?
+                          $(eOrEl.target).closest(".edit-image.new") :
+                          $(eOrEl),
+          currentLogos  = this.model.get("acknowledgmentsLogos"),
+          newLogo       = new PortalImage({ nodeName: "acknowledgmentsLogo" });
+
+      // Remove the new class
+      imageEditEl.closest(".edit-image.new").removeClass("new");
+      imageEditEl.find(".remove.icon").show();
+
+      // Add a new blank portalImage
+      currentLogos.push(newLogo);
+      this.model.set("acknowledgmentsLogos", currentLogos);
+
+      // Show the new EditImage view
+      this.renderAckLogoInput(newLogo);
+
     }
 
   });

src/js/views/portals/editor/PortEditorMdSectionView.js

@@ -151,7 +151,8 @@ function(_, $, Backbone, PortalSectionModel, PortalImage, PortEditorSectionView,
           imageHeight: 500,
           nameLabel: false,
           urlLabel: false,
-          imageTagName: "div"
+          imageTagName: "div",
+          removeButton: false
         });
         this.$(this.imageUploaderContainer).append(this.sectionImageUploader.el);
         this.sectionImageUploader.render();

src/js/views/portals/editor/PortalEditorView.js

@@ -380,7 +380,8 @@ function(_, $, Backbone, Portal, PortalImage, Filters, EditorView, SignInView,
           imageHeight: 100,
           nameLabel: false,
           urlLabel: false,
-          imageTagName: "img"
+          imageTagName: "img",
+          removeButton: false
         });
         this.$(this.portEditLogoContainer).append(this.logoUploader.el);
         this.logoUploader.render();