fixed template add list item

Author: eivers88

assets/js/app/controller.js

@@ -19,18 +19,23 @@ export default class Controller {
   }
 
   addImages (files) {
-    console.log(files);
+    // TODO: Add a flag indicating file loads are currently in progress
 
     for(let i = 0; i < files.length; i++) {
       this.view.addListItem({
-        id: i, // TODO: Make real id
+        id: this.store.getNewId(),
         src: window.URL.createObjectURL(files[i]),
-        name: files[i].name.substring(0, files[i].name.indexOf('.'))
+        name: files[i].name.substring(0, files[i].name.indexOf('.')),
+        onLoadSuccess: this.onLoadSuccess.bind(this)
       });
     }
 
-    // TODO: bind on image load
+  }
 
+  onLoadSuccess (candidate) {
+    console.log(candidate);
+    // TODO: Check if all images have finished loading
+    // TODO: Pass on to our texture packer
   }
 
   updateSettingsValues (settings) {

assets/js/app/store.js

@@ -42,6 +42,12 @@ export default class Store {
 
   }
 
+  getNewId () {
+    let newId = this.id;
+    this.id++;
+    return newId;
+  }
+
   getSettings () {
     return this.settings;
   }

assets/js/app/templates.js

@@ -1,12 +1,32 @@
-const parser = new DOMParser();
-
 export default class Template {
   listItem(item) {
-    let xmlString = `<li data-id="${item.id}">` +
-      `<img src="${item.src}" height="60" />` +
-      `<span>${item.name}</span>` +
-      `<div class="remove"></div>` +
-      `</li>`;
-    return parser.parseFromString(xmlString, "text/xml").querySelector('li');
+
+    let li = document.createElement('li');
+    let img = document.createElement('img');
+    let info = document.createElement('span');
+    let remove = document.createElement('div');
+
+    li.setAttribute('data-id', item.id);
+
+    img.src = item.src;
+    img.height = 60;
+    img.onload = function() {
+      window.URL.revokeObjectURL(item.src);
+      item.onLoadSuccess({
+        img: this,
+        name: item.name,
+        id: item.id
+      });
+    };
+
+    li.appendChild(img);
+    info.innerHTML = item.name;
+    li.appendChild(info);
+
+    remove.classList.add('remove');
+    li.appendChild(remove);
+
+    return li;
+
   }
 }