Tidying + added NPM standard script

package.json

@@ -12,7 +12,8 @@
   "scripts": {
     "start": "kill -9 $(lsof -i TCP:8000 | grep LISTEN | awk '{print $2}') & gulp & nw dist",
     "build": "gulp app",
-    "deploy": "gulp release"
+    "deploy": "gulp release",
+    "tidy": "standard 'src/js/features/**/*.js'"
   },
   "bugs": {
     "url": "https://github.com/nwittwer/shift/issues"

src/js/features/artboard/artboard-resize.js

@@ -17,7 +17,8 @@ export function init (element) {
   // TODO: After adding a new artboard, that artboard isn't able to resize
   // this is because the $('.artboard') is a cached DOM element
 
-  element.resizable({
+  // TODO: Change 'artboard' to dynamic element
+  artboard.resizable({
     handleSelector: '> .handle__bottom',
     resizeWidthFrom: 'right',
     touchActionNone: true,

src/js/features/artboard/artboard.js

@@ -1,38 +1,56 @@
 // Required
 import { app } from '../../index'
+const $ = require('jquery')
 
 // Features
 import * as artboardDimensions from '../artboard/artboard-dimensions'
 import * as artboardListeners from '../artboard/artboard-listeners'
 import * as artboardResize from '../artboard/artboard-resize'
 import * as artboardAdd from '../artboard/artboard-add'
-const $ = require('jquery')
 
 export default class Artboard {
-  constructor (width, height) {
-    this.$el = $('.artboard') // TODO: Make this a specific object
-
-    this.width = width
-    this.height = height
+  constructor (element) {
+    this.$el = $('.artboard'); // TODO: Make this dynamic (relies on jQuery)
+    this.artboardsList = []; // Stores all the DOM elements (artboards)
 
     // Enable resizing on artboards
     artboardResize.init(this.$el)
 
     // Update all the artboard dimensions
     artboardDimensions.updateDimensions(this.$el)
-
+
+    // Attach eventListeners
+    artboardListeners.init()
+
     // TODO: First new button
     // this.createFirstNewButton();
+  }
 
-    // Attach eventListeners
-    artboardListeners.init()
+  static createArtboard(width, height) {
+    const element = document.createElement('li');
+    element.textContent = "something"
+    return element;
+  }
+
+  update() {
+    // Clear the existing element
+    // while (this.$el.length > -1) {
+    //   $(this.$el).remove();
+    // }
+
+    // Generate all the artboards
+    $(this).append(Artboard.createArtboard)
   }
 
   // TODO: Feature add()
+  add() {
+
+  }
 }
 
 // Usage:
-// var artboard = new Artboard();
+// const element = document.getElementById("artboards")
+// let artboard = new Artboard(element);
 // artboard.add("before", this, 500, 800);
 
 // function init() {

src/js/index.js

@@ -12,4 +12,6 @@ console.log(app);
 
 // Create artboards
 require('../js/features/artboard/artboard');
-app.artboards = new Artboard();
+app.artboards = new Artboard('.artboard');
+console.log(app.artboards.update());
+// app.artboards.add("before", this, 500, 800);