modeling app structure after todomvc es6

Author: eivers88

assets/js/app/controller.js

@@ -0,0 +1,14 @@
+export default class Controller {
+  /**
+   * @param  {!Store} store A Store instance
+   * @param  {!View} view A View instance
+   */
+  constructor(store, view) {
+
+    this.store = store;
+    this.view = view;
+
+    console.log(this)
+
+  }
+}

assets/js/app/dom.js

@@ -0,0 +1,18 @@
+// Returns a function, that, as long as it continues to be invoked, will not
+// be triggered. The function will be called after it stops being called for
+// N milliseconds. If `immediate` is passed, trigger the function on the
+// leading edge, instead of the trailing.
+export function debounce(func, wait, immediate) {
+  let timeout;
+  return function() {
+    let context = this, args = arguments;
+    let later = function() {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    let callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+}

assets/js/app/dropbox.js

@@ -1,23 +1,21 @@
-// import dom from './dom';
-import dropbox from './dropbox';
-import debounce from './utilities/debounce';
+import Store from './store';
+import View from './view';
+import Controller from './controller';
 
-let app = {
+/**
+ * App structure inspired by https://github.com/tastejs/todomvc/tree/gh-pages/examples/vanilla-es6
+ * */
 
-  loadInProgress: false,
-  prefix:'',
-  padding:0,
-  path:'',
+let app = {
 
   start: function () {
 
     console.log('app started');
 
-    dropbox.init();
+    let store = new Store('responsive-css-sprite-generator');
+    let view = new View();
 
-    window.addEventListener('resize', debounce(() => {
-      console.log('resize');
-    }, 250));
+    new Controller(store, view);
 
   }
 

assets/js/app/helpers.js

@@ -0,0 +1,23 @@
+export default class Store {
+  /**
+   * @param {!string} name Database name
+   * @param {function()} [callback] Called when the Store is ready
+   */
+  constructor(name, callback) {
+
+    // TODO: Hook up local storage
+
+    this.id = 0;
+    this.blocks = [];
+    this.loaded = 0;
+    this.loadInProgress = false;
+    this.prefix = '';
+    this.padding = 0;
+    this.path = '';
+
+    if(callback){
+      callback();
+    }
+
+  }
+}

assets/js/app/index.js

@@ -0,0 +1,27 @@
+let instance = null;
+
+export default class View {
+
+  constructor() {
+
+    if(!instance) {
+      instance = this;
+    } else {
+      return instance;
+    }
+
+    this.fileInput = document.getElementById("fileElem");
+    this.fileList = document.getElementById("fileList");
+    this.listItems = document.createElement('ul');
+    this.prefix = document.getElementById("prefix");
+    this.padding = document.getElementById("padding");
+    this.path = document.getElementById("path");
+    this.canvas = document.getElementById("canvas");
+    this.css = document.getElementById("css");
+    this.dimensions = document.getElementById("dimensions");
+    this.dropbox = document.getElementById("dropbox");
+    this.fileList.appendChild(this.listItems);
+
+  }
+
+}