cleanup and fixed dir string

examples/dropbox/static/js/app.js

@@ -276,7 +276,7 @@ var DropboxPlugin = (function () {
 
       // for each file in the directory, create a list item element
       var elems = files.map(function (file, i) {
-        var icon = file.isFolder ? 'Folder' : 'File';
+        var icon = file.isFolder ? 'folder' : 'file';
         return '<li data-type="' + icon + '" data-name="' + file.name + '"><span>' + icon + ' : </span><span> ' + file.name + '</span></li>';
       });
 
@@ -284,27 +284,32 @@ var DropboxPlugin = (function () {
       this._target.innerHTML = elems.sort().join('');
 
       if (this.currentDir.length > 1) {
-        var back = document.createElement('LI');
-        back.setAttribute('data-type', 'back');
-        back.innerHTML = '<span>...</span>';
-        this._target.appendChild(back);
+        var _parent = document.createElement('LI');
+        _parent.setAttribute('data-type', 'parent');
+        _parent.innerHTML = '<span>...</span>';
+        this._target.appendChild(_parent);
       }
 
       // add an onClick to each list item
       var fileElems = this._target.querySelectorAll('li');
+
       Array.prototype.forEach.call(fileElems, function (element) {
         var type = element.getAttribute('data-type');
-        if (type === 'File') {
-          element.addEventListener('click', function (e) {
+
+        if (type === 'file') {
+          element.addEventListener('click', function () {
             _this2.files.push(element.getAttribute('data-name'));
+            console.dir('files: ' + _this2.files);
           });
         } else {
-          element.addEventListener('dblclick', function (e) {
-            console.log(type);
-            console.log(_this2.currentDir.split('/').slice(0, length - 2));
-            console.log(_this2.currentDir.split('/').slice(0, length - 2).join('/'));
+          element.addEventListener('dblclick', function () {
             var length = _this2.currentDir.split('/').length;
-            _this2.currentDir = type === 'Folder' ? '' + _this2.currentDir + element.getAttribute('data-name') + '/' : _this2.currentDir.split('/').slice(0, length - 2).join('/');
+
+            if (type === 'folder') {
+              _this2.currentDir = '' + _this2.currentDir + element.getAttribute('data-name') + '/';
+            } else if (type === 'parent') {
+              _this2.currentDir = _this2.currentDir.split('/').slice(0, length - 2).join('/') + '/';
+            }
             console.log(_this2.currentDir);
             _this2.getDirectory();
           });

src/plugins/Dropbox.js

@@ -42,7 +42,7 @@ class DropboxPlugin {
   render(files) {
     // for each file in the directory, create a list item element
     const elems = files.map((file, i) => {
-      const icon = (file.isFolder) ? 'Folder' : 'File'
+      const icon = (file.isFolder) ? 'folder' : 'file'
       return `<li data-type="${icon}" data-name="${file.name}"><span>${icon} : </span><span> ${file.name}</span></li>`
     })
 
@@ -50,29 +50,32 @@ class DropboxPlugin {
     this._target.innerHTML = elems.sort().join('');
 
     if (this.currentDir.length > 1) {
-      const back = document.createElement('LI');
-      back.setAttribute('data-type', 'back');
-      back.innerHTML = '<span>...</span>';
-      this._target.appendChild(back);
+      const parent = document.createElement('LI');
+      parent.setAttribute('data-type', 'parent');
+      parent.innerHTML = '<span>...</span>';
+      this._target.appendChild(parent);
     }
 
     // add an onClick to each list item
     const fileElems = this._target.querySelectorAll('li');
+
     Array.prototype.forEach.call(fileElems, element => {
-      var type = element.getAttribute('data-type');
-      if (type === 'File') {
-        element.addEventListener('click', e => {
+      const type = element.getAttribute('data-type');
+
+      if (type === 'file') {
+        element.addEventListener('click', () => {
           this.files.push(element.getAttribute('data-name'));
+          console.dir(`files: ${this.files}`);
         });
       } else {
-        element.addEventListener('dblclick', e => {
-          console.log(type);
-          console.log(this.currentDir.split('/').slice(0, length - 2))
-          console.log(this.currentDir.split('/').slice(0, length - 2).join('/'));
+        element.addEventListener('dblclick', () => {
           const length = this.currentDir.split('/').length;
-          this.currentDir = (type === 'Folder') ?
-            `${this.currentDir}${element.getAttribute('data-name')}/` :
-              this.currentDir.split('/').slice(0, length - 2).join('/')
+
+          if (type === 'folder') {
+            this.currentDir = `${this.currentDir}${element.getAttribute('data-name')}/`;
+          } else if (type === 'parent') {
+            this.currentDir = `${this.currentDir.split('/').slice(0, length - 2).join('/')}/`
+          }
           console.log(this.currentDir);
           this.getDirectory();
         })