last commit: 2014-03-04

Bryce Johnson · Bryce Johnson · commit d93cbf7fe244 · 2014-03-04T14:54:30.000-05:00
diff --git a/css/build/prefixed/style.css b/css/build/prefixed/style.css
@@ -347,11 +347,18 @@ table {
 /*** FLEXBOX ****/
 /* Layout rules divide the page into sections, such as 'header', 'footer', 'sidebar' and 'main content'. Layouts hold one or more modules together. This is the time to use ID's and to set width, float, and height properties. Generally, a layout style only has a single selector: a single ID or class name.  */
 .container {
-  margin: 4em auto; }
+  min-height: 500px;
+  float: right; }
 
 label {
   display: block; }
 
+input {
+  width: 50px; }
+
+.flex-item {
+  border-radius: 5px; }
+
 /*  
 
 %font1 {
diff --git a/css/build/style.css b/css/build/style.css
@@ -347,11 +347,18 @@ table {
 /*** FLEXBOX ****/
 /* Layout rules divide the page into sections, such as 'header', 'footer', 'sidebar' and 'main content'. Layouts hold one or more modules together. This is the time to use ID's and to set width, float, and height properties. Generally, a layout style only has a single selector: a single ID or class name.  */
 .container {
-  margin: 4em auto; }
+  min-height: 500px;
+  float: right; }
 
 label {
   display: block; }
 
+input {
+  width: 50px; }
+
+.flex-item {
+  border-radius: 5px; }
+
 /*  
 
 %font1 {
diff --git a/gruntfile.js b/gruntfile.js
@@ -76,6 +76,7 @@ module.exports = function(grunt) {
 	grunt.loadNpmTasks('grunt-contrib-sass');
 	grunt.loadNpmTasks('grunt-typescript');
 	grunt.loadNpmTasks('grunt-shell');
+	grunt.loadNpmTasks('grunt-karma');
 
 	// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
 	grunt
diff --git a/index.html b/index.html
@@ -16,11 +16,12 @@
             $(function() {
 
               var flexboxApp = new flexbox.view.FlexContainer();
-              console.log(flexboxApp);
               ko.applyBindings(flexboxApp);
-
-
+				console.log(flexboxApp);
+ 				
             });
+            
+           
         </script>
 
     </head>
@@ -53,6 +54,17 @@
 
 </div>
 
+<div data-bind="visible:true"class="item-defaults">
+<h2>item defaults</h2>
+<button data-bind="click:resetItemProps, text:defaultBtnText">reset item defaults</button>
+<label for="">flex-grow: <input type="text" data-bind="value:iPropsDefault.flexGrow"></label>
+<label for="">flex-shrink: <input type="text" data-bind="value:iPropsDefault.flexShrink"></label>
+<label for="">flex-basis<input type="text" data-bind="value:iPropsDefault.flexBasis"></label>
+<label for="">align-self: <select type="text" data-bind="options:alignSelfOptions, value:iPropsDefault.alignSelf"></select></label>
+
+
+
+</div>
 
 <div class="code-box">
 	<code>
@@ -72,11 +84,11 @@
 		<code>
 		<pre>
 .flex-items-default {
-	flex-grow: <span data-bind="text:iPropsCurrent.flexGrow"></span>
-	flex-shrink: <span data-bind="text:iPropsCurrent.flexShrink"></span>
-	flex-basis: <span data-bind="text:iPropsCurrent.flexBasis"></span>
-	order: <span data-bind="text:iPropsCurrent.order"></span>
-	align-self: <span data-bind="text:iPropsCurrent.alignSelf"></span>
+	flex-grow: <span data-bind="text:iPropsDefault.flexGrow"></span>
+	flex-shrink: <span data-bind="text:iPropsDefault.flexShrink"></span>
+	flex-basis: <span data-bind="text:iPropsDefault.flexBasis"></span>
+	order: <span data-bind="text:iPropsDefault.order"></span>
+	align-self: <span data-bind="text:iPropsDefault.alignSelf"></span>
 
 }
 		</pre>
@@ -86,7 +98,7 @@
 </div>
 
 <script type="template/knockout" id="flex-list">
-    <div data-bind="style:{
+    <div class="flex-item" data-bind="style:{
       backgroundColor:iPropsCurrent.backgroundColor,
       height:iPropsCurrent.height,
       margin:iPropsCurrent.margin,
@@ -100,7 +112,7 @@
 <label for="">flex-shrink: <input type="text" data-bind="value:iPropsCurrent.flexShrink"></label>
 <label for="">flex-basis: <input type="text" data-bind="value:iPropsCurrent.flexBasis"></label>
 <label for="">align-self: <input type="text" data-bind="value:iPropsCurrent.alignSelf"></label>
-
+<a href="#" data-bind="click:destroySelf">destroy self</a>
 
     </div>
 </script>
@@ -109,8 +121,5 @@
 
 
 
-
-
-
     </body>
 </html>
diff --git a/js/main.js b/js/main.js
@@ -3,20 +3,9 @@ var flexbox;
     (function (_model) {
         var FlexItem = (function () {
             function FlexItem(model, index) {
-                this.index = index;
-
-                this.iPropsDefault = {
-                    order: "1",
-                    flexGrow: "1",
-                    flexShrink: "0",
-                    flexBasis: "300px",
-                    alignSelf: "center",
-                    width: "300px",
-                    height: "300px",
-                    backgroundColor: "tomato",
-                    margin: "10px"
-                };
-
+                this.index = ko.observable(index);
+                this.model = model;
+                console.log(model);
                 this.iPropsCurrent = {
                     order: ko.observable("1"),
                     flexGrow: ko.observable("1"),
@@ -29,6 +18,20 @@ var flexbox;
                     margin: ko.observable("10px")
                 };
             }
+            FlexItem.prototype.resetProps = function () {
+                var currentProps = this.iPropsCurrent;
+                var newProps = this.model.iPropsDefault;
+                currentProps.flexGrow(newProps.flexGrow());
+                currentProps.flexShrink(newProps.flexShrink());
+                currentProps.flexBasis(newProps.flexBasis());
+                currentProps.alignSelf(newProps.alignSelf());
+            };
+
+            FlexItem.prototype.destroySelf = function () {
+                var index = parseInt(this.index(), 10);
+                console.log(index);
+                this.model.destroyItem(index);
+            };
             return FlexItem;
         })();
         _model.FlexItem = FlexItem;
@@ -40,14 +43,29 @@ var flexbox;
     (function (view) {
         var FlexContainer = (function () {
             function FlexContainer() {
-                this.items = ko.observableArray([
-                    new flexbox.model.FlexItem(this, 1),
-                    new flexbox.model.FlexItem(this, 2)
-                ]);
+                this.items = ko.observableArray([]);
 
-                this.codeBox = ko.observableArray([
-                    new flexbox.view.CodeBox(this, 1)
-                ]);
+                this.iPropsDefault = {
+                    order: ko.observable("1"),
+                    flexGrow: ko.observable("1"),
+                    flexShrink: ko.observable("1"),
+                    flexBasis: ko.observable("300px"),
+                    alignSelf: ko.observable("center"),
+                    width: ko.observable("300px"),
+                    height: ko.observable("300px"),
+                    backgroundColor: "blue",
+                    margin: "10px"
+                };
+
+                this.defaultBtnText = ko.computed(function () {
+                    var def = this.iPropsDefault;
+
+                    if (def.flexGrow() === '1' && def.flexShrink() === '1' && def.flexBasis() === "300px" && def.alignSelf() === "center") {
+                        return "reset all items";
+                    } else {
+                        return "update item defaults";
+                    }
+                }, this);
 
                 this.cPropsDefault = {
                     display: "flex",
@@ -74,24 +92,42 @@ var flexbox;
                 this.justifyContentOptions = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'];
                 this.alignItemsOptions = ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'];
                 this.alignContentOptions = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch'];
+                this.alignSelfOptions = ['auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch', 'inherit'];
             }
             FlexContainer.prototype.newItem = function () {
                 var index = this.getItemIndex();
                 var newItem = new flexbox.model.FlexItem(this, index);
                 this.items.push(newItem);
-                console.log('new item added');
             };
 
             FlexContainer.prototype.oneLessItem = function () {
                 this.items.pop();
-                console.log('newest item removed');
             };
 
             FlexContainer.prototype.getItemIndex = function () {
                 var currentLength = this.items().length;
                 return currentLength + 1;
             };
 
+            FlexContainer.prototype.resetItemProps = function () {
+                var array = this.items();
+                for (var i = 0; i < array.length; i++) {
+                    array[i].resetProps();
+                }
+            };
+            FlexContainer.prototype.destroyItem = function (index) {
+                var self = this;
+                self.items.splice((index - 1), 1);
+                (function () {
+                    var array = self.items();
+                    for (var i = 0; i < array.length; i++) {
+                        var newIndex = i + 1;
+                        var stringIndex = newIndex.toString();
+                        array[i].index(stringIndex);
+                    }
+                })();
+            };
+
             FlexContainer.prototype.resetContainerProps = function () {
             };
             return FlexContainer;
diff --git a/package.json b/package.json
@@ -11,6 +11,17 @@
     "grunt-contrib-jshint": "~0.8.0",
     "grunt-autoprefixer": "~0.6.4",
     "grunt-typescript": "~0.2.8",
-    "grunt-shell": "~0.6.4"
+    "grunt-shell": "~0.6.4",
+    "karma-chrome-launcher": "~0.1.2",
+    "karma-firefox-launcher": "~0.1.3",
+    "karma-script-launcher": "~0.1.0",
+    "karma-html2js-preprocessor": "~0.1.0",
+    "karma-jasmine": "~0.1.5",
+    "requirejs": "~2.1.11",
+    "karma-requirejs": "~0.2.1",
+    "karma-coffee-preprocessor": "~0.1.3",
+    "karma-phantomjs-launcher": "~0.1.2",
+    "karma": "~0.10.9",
+    "grunt-karma": "~0.6.2"
   }
 }
diff --git a/scss/global/_layout.scss b/scss/global/_layout.scss
@@ -1,11 +1,22 @@
 /* Layout rules divide the page into sections, such as 'header', 'footer', 'sidebar' and 'main content'. Layouts hold one or more modules together. This is the time to use ID's and to set width, float, and height properties. Generally, a layout style only has a single selector: a single ID or class name.  */
 
 .container {
-
-margin:4em auto;
-
+min-height:500px;
+float:right;
 }
 
 label {
 display:block;
 }
+
+input {
+
+	width:50px;
+
+}
+
+.flex-item {
+
+	border-radius:5px;
+
+}
diff --git a/ts/model/Item.ts b/ts/model/Item.ts
@@ -5,26 +5,14 @@ module flexbox {
         export class FlexItem {
 
             model: any;
-            index: number;
-            iPropsDefault: {};
-            iPropsCurrent: {};
-
-            constructor(model: any, index: number) {
-
-                this.index = index;
-
-                this.iPropsDefault = {
-                    order: "1",
-                    flexGrow: "1",
-                    flexShrink: "0",
-                    flexBasis: "300px",
-                    alignSelf: "center",
-                    width: "300px",
-                    height: "300px",
-                    backgroundColor: "tomato",
-                    margin: "10px"
-                };
+            index: any;
+            iPropsCurrent: any;
+
+            constructor(model: any, index: any) {
 
+                this.index = ko.observable(index);
+                this.model = model;
+                console.log(model);
                 this.iPropsCurrent = {
                     order: ko.observable("1"),
                     flexGrow: ko.observable("1"),
@@ -38,11 +26,25 @@ module flexbox {
                 };
 
 
-                //flexbox within a flexbox?
 
+            }
 
+            resetProps(): void {
+                var currentProps = this.iPropsCurrent;
+                var newProps = this.model.iPropsDefault;
+                currentProps.flexGrow(newProps.flexGrow());
+                currentProps.flexShrink(newProps.flexShrink());
+                currentProps.flexBasis(newProps.flexBasis());
+                currentProps.alignSelf(newProps.alignSelf());
+            }
 
+            destroySelf(): void {
+                var index = parseInt(this.index(),10);
+                console.log(index);
+                this.model.destroyItem(index);
+                
             }
+
         }
 
     }
diff --git a/ts/view/Container.ts b/ts/view/Container.ts
