V0.1.0

gulp/tasks/javascript.js

@@ -110,7 +110,6 @@ gulp.task('javascript:main', function() {
     CONFIG.SRC + 'js/required/**/!(jquery-3.2.1)*.js', // all the other required scripts
     CONFIG.SRC + 'js/plugins/**/*.js', // Any 3rd-party plugins
     CONFIG.SRC + 'js/app-variables.js', // Setup any variables, namespaces, etc.
-    CONFIG.SRC + 'js/app-variables.js', // Setup any variables, namespaces, etc.
 
     // GUI
     CONFIG.SRC + 'js/features/gui/gui.js',
@@ -120,6 +119,7 @@ gulp.task('javascript:main', function() {
     CONFIG.SRC + 'js/features/toolbar/**/*.js',
 
     // App Settings
+    CONFIG.SRC + 'js/features/settings/settings.js',
     CONFIG.SRC + 'js/features/settings/**/*.js',
 
     // Artboard

src/js/app.js

@@ -3,6 +3,7 @@ app.init = function () {
 	console.log('screens.init()');
 
 	// Load each component here:
+	app.settings.init();
 	app.toolbar.init();
 	app.artboard.init();
 }  

src/js/features/artboard/artboard-add.js

@@ -1,19 +1,74 @@
-app.artboard.add = function (placement, event) {
-    // Usage:
-    // app.artboard.add(before||after, $el)
+// Usage:
+// app.artboard.add(before||after, $el, width, height, fn)
+app.artboard.add = function (placement, event, width, height, fn) {
 
-    // Find element's parent artbaord container
-    var this_artboard = $(event.target).parent(artboard);
-    // console.log(event, $(event.target));
-    // console.log(this_artboard);
+    // "new" or "additional"
+    // Helps switch between .prepend/.append, and .before/.after
+    var needsNewDOMElement = false;
 
-    if (placement && event) {
-        // if before
+    // Which artboard?
+    var this_artboard;
+
+    if (fn === "fromEmpty") {
+        needsNewDOMElement = true;
+        this_artboard = $(artboards);
+        console.log('from empty');
+    }
+
+    if (event && event !== null) {
+        // Find element's parent artbaord container
+        this_artboard = $(event.target).parent(artboard);
+        // console.log(event, $(event.target));
+        // console.log(this_artboard);
+    }
+
+    // If a width or height is set, pass it
+    // into the artboard size
+    function returnWidthHeight() {
+        console.log(width, height);
+
+        if (height == undefined && width == undefined) {
+            // Do nothing...
+        } else {
+            if (height && width == undefined) {
+                height = height + "px";
+                return height;
+            } else if (width && height == undefined) {
+                width = width + "px";
+                return width;
+            } else if (height && width) {
+                width = width;
+                height = height;
+
+                console.log("Created artboard with width: " + width + "px and height: " + height + "px");
+
+                var obj = {width: width, height: height};
+                return obj;
+            }
+        }
+
+    }
+
+    if (placement) {
         if (placement == "before") {
-            this_artboard.before(Hbs.templates.artboard());
+
+            if (needsNewDOMElement == true) {
+                this_artboard.append(Hbs.templates.artboard(returnWidthHeight()));
+            } else {
+                this_artboard.before(Hbs.templates.artboard(returnWidthHeight()));
+            }
+
+            console.log(returnWidthHeight());
             console.log('Added artboard before', this_artboard);
         } else if (placement == "after") {
-            this_artboard.after(Hbs.templates.artboard());
+
+            if (needsNewDOMElement == true) {
+                this_artboard.append(Hbs.templates.artboard(returnWidthHeight()));
+            } else {
+                this_artboard.after(Hbs.templates.artboard(returnWidthHeight()));
+            }
+
+            console.log(returnWidthHeight());
             console.log('Added artboard after');
         }
 
@@ -24,8 +79,10 @@ app.artboard.add = function (placement, event) {
         // Add the + button before all items
         app.artboard.createFirstNewButton();
 
+        // Save the latest artboard sizes to localStorage
+        app.settings.artboardSizes.updateLocalStorage();
+
     } else {
         console.log("Please pass in the `placement` (before or after) and the event.");
     }
-
 }

src/js/features/artboard/artboard-delete.js

@@ -0,0 +1,15 @@
+app.artboard.delete = function (event) {
+    if (event) {
+        if (artboard.length > 1) {
+            var $el = $(event.target).closest(artboard);
+            $el.remove();
+
+            // Save the latest artboard sizes to localStorage
+            app.settings.artboardSizes.updateLocalStorage();
+        } else {
+            alert('Sorry, you must have at least one artboard.')
+        }
+    } else {
+        console.log("No event received");
+    }
+}

src/js/features/artboard/artboard-dimensions.js

@@ -8,9 +8,13 @@ app.artboard.dimensions = {
         app.artboard.dimensions.update(artboard)
     },
 
-    // On resize =>
+    /**
+     * Function: Resize
+     * @param  {} $el
+     * @param  {} width
+     * @param  {} height
+     */
     update: function ($el, width, height) {
-
         if ( width || height ) {
             var height_container = $el.closest(artboard).find('.artboard__height');
                 var width_container = $el.closest(artboard).find('.artboard__width');
@@ -47,7 +51,22 @@ app.artboard.dimensions = {
 
             });
         }
+    },
+
+    return: function() {
+        var obj = [];
+
+        $.each( $(".artboard"), function () {
+            var width;
+            var height;
+
+            width = $(this).width();
+            height = $(this).height();
+
+            obj.push({width, height});
+        });
 
+        return obj;
     }
 
 }

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

@@ -27,7 +27,6 @@ app.artboard.resize = {
             artboard = $(".artboard");
             console.log(artboard);
 
-
             artboard.resizable({
                 handleSelector: "> .handle__bottom",
                 resizeWidthFrom: 'right',
@@ -57,6 +56,9 @@ app.artboard.resize = {
                     $el.css("cursor", "");
                     // Override all other elements
                     $('body').css("cursor", "");
+
+                    // Save the latest artboard sizes to localStorage
+                    app.settings.artboardSizes.updateLocalStorage();
                 }
             });
         }

src/js/features/settings/settings-artboardSizes.js

@@ -0,0 +1,116 @@
+// 1. check/read localstorage
+// when you open it
+// 2. add/update localstorage
+// when you change a size
+app.settings.artboardSizes = {
+    localStorageKey: "artboardSizes",
+    localStorageObject: [],
+
+    init: function () {
+        app.settings.artboardSizes.firstLoad();
+    },
+
+    firstLoad: function () {
+        // Initial check if there's existing data
+        // If so, show it
+        // If not, create some
+        app.settings.artboardSizes.readLocalStorage();
+    },
+
+    /**
+     * Read the localStorage
+     * If nothing exists, create the key with the current artboard sizes
+     */
+    readLocalStorage: function () {
+        // Return the localStorage
+        if (localStorage[this.localStorageKey] == null || !localStorage[this.localStorageKey]) {
+            // Nothing is defined!
+            console.log('Undefined');
+            app.settings.artboardSizes.createLocalStorage();
+        } else {
+            // It's defined!
+            // Use the saved sizes
+            console.log('It exists');
+            app.settings.artboardSizes.restorePreviousFromLocalStorage();
+        }
+    },
+
+    // Update our local variable
+    updateLocalStorageObject: function () {
+        if (localStorage.getItem(this.localStorageKey)) {
+            this.localStorageObject = JSON.parse(localStorage.getItem(this.localStorageKey));
+            return this.localStorageObject;
+        } else {
+            console.log('No local storage exists')
+        }
+    },
+
+    /**
+     * Initializes the localStorage definition
+     */
+    createLocalStorage: function () {
+        // No localStorage exists!
+        // Lets setup an object with the current artboard sizes
+        this.localStorageObject.push(app.artboard.dimensions.return());
+
+        // Now create a new key and save to it
+        localStorage.setItem(this.localStorageKey, JSON.stringify(this.localStorageObject));
+
+        // Update our local variable
+        app.settings.artboardSizes.updateLocalStorageObject();
+
+        // Add to LocalStorage
+        console.log('Added to localstorage: ', app.settings.artboardSizes.updateLocalStorageObject());
+    },
+
+    /**
+     * Restores the artboard sizes from the existing localStorage data
+     */
+    restorePreviousFromLocalStorage: function () {
+        // Update our local variable
+        app.settings.artboardSizes.updateLocalStorageObject();
+
+        // Remove the initial frames, and load the old ones
+        $(artboards).empty();
+
+        // Now create the artboards from the last save state
+        var object = app.settings.artboardSizes.localStorageObject[0];
+
+        for (var key in object) {
+            if (object.hasOwnProperty(key)) {
+                var instance = object[key];
+                app.artboard.add("after", null, instance.width, instance.height, "fromEmpty");
+                console.log(key, instance);
+            }
+        }
+    },
+
+    /**
+     * Updates the existing localStorage definition with the sizes of the current artboards
+     */
+    updateLocalStorage: function () {
+        console.log(this.localStorageObject.length);
+
+        // Add to existing
+        if (this.localStorageObject.length >= 1 && this.localStorageObject.length !== null) {
+            // localStorage key exists!
+            // Clear the existing object
+            this.localStorageObject = [];
+
+            // Lets setup an object with the current artboard sizes
+            this.localStorageObject.push(app.artboard.dimensions.return());
+
+            // Now update the localStorage, with only one save state
+            localStorage.setItem(this.localStorageKey, JSON.stringify(this.localStorageObject));
+
+            // Update our local variable
+            app.settings.artboardSizes.updateLocalStorageObject();
+        } else {
+            console.log('issue');
+        }
+
+        // Add to LocalStorage
+        console.log('Added to localstorage: ', app.settings.artboardSizes.updateLocalStorageObject());
+    }
+
+}

src/js/features/settings/settings.js

@@ -1,3 +1,13 @@
+app.settings = {
+    init: function() {
+        // Start the artboard sizes
+        app.settings.artboardSizes.init();
+    },
+
+    firstLoad: function() {
+    }
+}
+
 //
 // Custom menubar
 //

src/js/features/toolbar/toolbar-recent-urls.js

@@ -1,3 +1,4 @@
+// @TODO:Refactor these global variables
 var $recent_url_container = $("#toolbar__recentURLs");
 var recentURLs = JSON.parse(localStorage.getItem('recentURLs')) || [];
 

src/pages/index.hbs

@@ -51,8 +51,8 @@
         <h1>Settings</h1>
         <span>Experimental</span>
         <div class="form__group">
-          <input type="checkbox" name="settings__x-frame-origins">
-          <label for="settings__x-frame-origins">Get around X-Frame-Origin (WebView)</label>
+          <input type="checkbox" name="settings__allow-x-frame-origins">
+          <label for="settings__allow-x-frame-origins">Disable X-Frame-Origin (WebView)</label>
         </div>
       </div>
     </div>

src/partials/artboard.hbs

@@ -2,6 +2,7 @@
     <div class="artboard__top">
         <div>W: <span class="artboard__width">{{width}}</span></div>
         <div>H: <span class="artboard__height">{{height}}</span></div>
+        <button class="artboard__delete-button" onclick="app.artboard.delete(event)">Delete</button>
     </div>
     <div class="artboard__keypoints"></div>
     <div class="artboard__content">

src/scss/partials/_app-settings.scss

@@ -40,7 +40,7 @@
         position: relative;
         z-index: 1;
         height: 1rem;
-            width: 1rem;
+        width: 1rem;
 
         &:before {
             content: "";
@@ -50,12 +50,29 @@
             width: 100%;
         }
 
+        &:hover:before {
+            border: 1px solid darken(#c5c5c5, 20%);
+        }
+
         &:checked:before {
             border: 1px solid $accent-color;
             background: $accent-color;
         }
 
-        & + label {
+        &:checked:after {
+            content: '';
+            display: block;
+            position: absolute;
+            top: 2px;
+            left: 6px;
+            width: 4px;
+            height: 8px;
+            border: solid white;
+            border-width: 0 2px 2px 0;
+            transform: rotate(45deg);
+        }
+
+        &+label {
             margin-left: 10px;
             vertical-align: middle;
             font-size: 1rem;