diff --git a/gulp/tasks/javascript.js b/gulp/tasks/javascript.js
index faeb2cda..49cd2b28 100755
--- a/gulp/tasks/javascript.js
+++ b/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
diff --git a/src/js/app.js b/src/js/app.js
index c8e7b3a1..57f0aba5 100755
--- a/src/js/app.js
+++ b/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();
}
diff --git a/src/js/features/artboard/artboard-add.js b/src/js/features/artboard/artboard-add.js
index a4f4313e..b892b51d 100644
--- a/src/js/features/artboard/artboard-add.js
+++ b/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.");
}
-
}
\ No newline at end of file
diff --git a/src/js/features/artboard/artboard-delete.js b/src/js/features/artboard/artboard-delete.js
new file mode 100644
index 00000000..57548388
--- /dev/null
+++ b/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");
+ }
+}
\ No newline at end of file
diff --git a/src/js/features/artboard/artboard-dimensions.js b/src/js/features/artboard/artboard-dimensions.js
index fc0262b7..1a9079fb 100644
--- a/src/js/features/artboard/artboard-dimensions.js
+++ b/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;
}
}
\ No newline at end of file
diff --git a/src/js/features/artboard/artboard-resize.js b/src/js/features/artboard/artboard-resize.js
index fc900544..a232ad99 100644
--- a/src/js/features/artboard/artboard-resize.js
+++ b/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();
}
});
}
diff --git a/src/js/features/settings/settings-artboardSizes.js b/src/js/features/settings/settings-artboardSizes.js
new file mode 100644
index 00000000..5c54ef5d
--- /dev/null
+++ b/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());
+ }
+
+}
\ No newline at end of file
diff --git a/src/js/features/settings/settings.js b/src/js/features/settings/settings.js
index 937af8ae..748061aa 100644
--- a/src/js/features/settings/settings.js
+++ b/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
//
diff --git a/src/js/features/toolbar/toolbar-recent-urls.js b/src/js/features/toolbar/toolbar-recent-urls.js
index c3805082..2b3ff882 100644
--- a/src/js/features/toolbar/toolbar-recent-urls.js
+++ b/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')) || [];
diff --git a/src/pages/index.hbs b/src/pages/index.hbs
index c976cd95..c13b4f27 100755
--- a/src/pages/index.hbs
+++ b/src/pages/index.hbs
@@ -51,8 +51,8 @@
Settings
Experimental
-
-
+
+
diff --git a/src/partials/artboard.hbs b/src/partials/artboard.hbs
index 73b4f205..75db1ca4 100644
--- a/src/partials/artboard.hbs
+++ b/src/partials/artboard.hbs
@@ -2,6 +2,7 @@
W: {{width}}
H: {{height}}
+
diff --git a/src/scss/partials/_app-settings.scss b/src/scss/partials/_app-settings.scss
index ac6de983..9fc20607 100644
--- a/src/scss/partials/_app-settings.scss
+++ b/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;