Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

cleaning up

  • Loading branch information...
commit 92e57468c23f9aa8613740d7876c176236a2b23b 1 parent 35319a6
James Paterson authored December 12, 2012
5  index.html
@@ -29,7 +29,8 @@
29 29
         </div>   
30 30
 
31 31
         <div class="span8">
32  
-          <div bootstrap-grid items="myTestItems" span-width="4" parent-span-width="8">
  32
+          <!-- example of inputting 'span4' instead of '4' for spanWidth -->
  33
+          <div bootstrap-grid items="myTestItems" span-width="span4" parent-span-width="8">
33 34
             <div class="well grid-item-2">
34 35
               4-8-{{item}}
35 36
             </div>
@@ -40,7 +41,7 @@
40 41
 
41 42
       <div class="row">
42 43
         <div class="span12">
43  
-          <div bootstrap-grid items="myTestItems" span-width="1" parent-span-width="12">
  44
+          <div bootstrap-grid items="myTestItems" span-width="1" parent-span-width="-2">
44 45
             <div class="well">
45 46
               3-12-{{item}}
46 47
             </div>
51  js/bootstrap-grid.js
... ...
@@ -1,24 +1,26 @@
  1
+
1 2
 angular.module('bootstrapGrid', []).
2 3
 
3 4
   directive('bootstrapGrid', function() {
4 5
     return {
5  
-
6 6
       scope: {items: '='},
7 7
       templateUrl: 'tpl/bootstrap-grid.html',
8 8
       transclude: true,
9 9
       replace: true,
10  
-
11 10
       link: function(scope, iElement, iAttrs) {
12  
-
13  
-        var parentSpanWidth = iAttrs.parentSpanWidth || 12;
14  
-        scope.spanWidth = iAttrs.spanWidth || 3;
15  
-        scope.rows = makeRows();
16  
-
17  
-        console.log("scope.spanWidth", scope.spanWidth);
18  
-
19  
-        function makeRows() {
20  
-          var itemsCopy = scope.items.slice(0),
21  
-              itemsPerRow = parentSpanWidth / scope.spanWidth,
  11
+        // throwing a useful error if 'items' array not passed in
  12
+        scope.items = scope.items || function(){ throw "bootsrap-grid needs a valid 'items' attribute! It should look something like this: <div bootstrap-grid items='myItemsArray'></div>";}();
  13
+        // grabbing any attributes being passed in
  14
+        scope.spanWidth = iAttrs.spanWidth;
  15
+        scope.parentSpanWidth = iAttrs.parentSpanWidth;
  16
+        // setting defaults for unassigned, incorrect, or out of bounds attributes
  17
+        if (!(scope.spanWidth >= 1 && scope.spanWidth <= 12)) scope.spanWidth = 3;
  18
+        if (!(scope.parentSpanWidth >= 1 && scope.parentSpanWidth <= 12)) scope.parentSpanWidth = 12;
  19
+        // building rows and exposing them on the scope
  20
+        scope.rows = makeRows(scope.items, scope.spanWidth, scope.parentSpanWidth);
  21
+        function makeRows(items, spanWidth, parentSpanWidth) {
  22
+          var itemsCopy =items.slice(0),
  23
+              itemsPerRow = parentSpanWidth / spanWidth,
22 24
               rows = [];
23 25
           while (itemsCopy.length) {
24 26
             rows.push(itemsCopy.splice(0, itemsPerRow));
@@ -27,27 +29,4 @@ angular.module('bootstrapGrid', []).
27 29
         }
28 30
       }
29 31
     };
30  
-  });
31  
-
32  
-
33  
-
34  
-
35  
-
36  
-
37  
-
38  
-
39  
-
40  
-
41  
-
42  
-
43  
-
44  
-
45  
-
46  
-    // template:
47  
-    //   '<div>' +
48  
-    //     '<div class="row" ng-repeat="row in rows">' +
49  
-    //       '<div class="span{{spanWidth}}" ng-repeat="item in row">' +
50  
-    //         '<div ng-transclude></div>' +
51  
-    //       '</div>' +
52  
-    //     '</div>' +
53  
-    //   '</div>',
  32
+  });
44  js/tabs.js
... ...
@@ -1,44 +0,0 @@
1  
-var tabs = angular.module('tabs', []);
2  
-
3  
-
4  
-var TabsController = function($scope, $element) {
5  
-  var panes = $scope.panes = [];
6  
-
7  
-  $scope.select = function(pane) {
8  
-    angular.forEach(panes, function(pane) {
9  
-      pane.selected = false;
10  
-    });
11  
-    pane.selected = true;
12  
-  };
13  
-
14  
-  this.addPane = function(pane) {
15  
-    if (!panes.length) $scope.select(pane);
16  
-    panes.push(pane);
17  
-  };
18  
-};
19  
-
20  
-tabs.directive('tabs', function() {
21  
-  return {
22  
-    restrict: 'E',
23  
-    transclude: true,
24  
-    scope: {},
25  
-    controller: TabsController,
26  
-    templateUrl: 'tpl/tabs.html',
27  
-    replace: true
28  
-  };
29  
-});
30  
-
31  
-
32  
-tabs.directive('pane', function() {
33  
-  return {
34  
-    require: '^tabs',
35  
-    restrict: 'E',
36  
-    transclude: true,
37  
-    scope: { title: '@' },
38  
-    link: function(scope, element, attrs, tabsCtrl) {
39  
-      tabsCtrl.addPane(scope);
40  
-    },
41  
-    templateUrl: 'tpl/pane.html',
42  
-    replace: true
43  
-  };
44  
-});
64  test/bootstrap-grid-spec.js
... ...
@@ -1,22 +1,10 @@
1 1
 
2  
-
3  
-// what about loading in html scenarios?
4  
-// use case scenarios?
5  
-
6  
-// var scenarios = [
7  
-//   'default.html',
8  
-//   'onlySpanWidth.html',
9  
-//   'onlyParentSpanWidth.html'
10  
-// ];
11  
-
12  
-// if I want to simulate different html use cases do I have to copy this whole describe block?
13  
-
14 2
 describe('bootstrapGrid', function() {
15 3
   var elm, scope;
16 4
   beforeEach(module('bootstrapGrid'));
17 5
   beforeEach(module('tpl/bootstrap-grid.html'));
18 6
 
19  
-  describe('scenario using all optional attributes', function() {
  7
+  describe('scenario using all optional attributes correctly', function() {
20 8
 
21 9
     beforeEach(inject(function($rootScope, $compile) {
22 10
       elm = angular.element(
@@ -33,7 +21,7 @@ describe('bootstrapGrid', function() {
33 21
 
34 22
     it('should populate the correct number of rows and spans based on number of items, spanWidth, and parent-span-width', function() {
35 23
 
36  
-      expect(elm.find('div.row').length).toBe(6); 
  24
+      expect(elm.find('div.row').length).toBe(6);
37 25
       expect(elm.find('div.span4').length).toBeTruthy();
38 26
 
39 27
     });
@@ -59,36 +47,36 @@ describe('bootstrapGrid', function() {
59 47
     });
60 48
 
61 49
     it('should set its parentSpanWidth to a default of 12 if none is set', function() {
62  
-      expect(elm.find('div.row').length).toBe(3); // 11(items) / (12(rowWidth) / 3(spanWidth)
63  
-      dump(elm.find('div.row')[2]);
  50
+      expect(elm.find('div.row').length).toBe(3);
64 51
     });
65 52
   }); 
66 53
 
67  
-  // it should default its 'spanWidth' to 3 if a 'spanWidth' under 1 or over 12 is passed in
68  
-
69  
-  // it should default its 'parentSpanWidth' to 12 if no 'parentSpanWidth' is passed in && it is not a child of another bootstrap span
70  
-
71  
-  // it should set its 'parentSpanWidth' to the 'spanWidth' of a parent span in the DOM if it finds one and no valid 'parentSpanWidth' is excplicitly passed in
  54
+  describe('scenario using out of bounds attributes', function() {
72 55
 
73  
-});
  56
+    beforeEach(inject(function($rootScope, $compile) {
  57
+      elm = angular.element(
  58
+        '<div bootstrap-grid items="myTestItems" span-width="-2" parent-span-width="27">' +
  59
+          '<div>' +
  60
+            'hello {{item}}' +
  61
+          '</div>' +
  62
+        '</div>');
  63
+      scope = $rootScope;
  64
+      scope.myTestItems = ['item 1', 'item 2','item 3','item 4','item 5','item 6','item 7','item 8','item 9','item 10','item 11'];
  65
+      $compile(elm)(scope);
  66
+      scope.$digest();
  67
+    }));
74 68
 
  69
+    it("it should default its 'spanWidth' to 3 if 'spanWidth' passed in is out of bounds (1-12)", function() {
  70
+      expect(elm.find('div.span3').length).toBeTruthy();
  71
+    });
75 72
 
  73
+    it("it should default its 'parentSpanWidth' to 12 if 'parentSpanWidth' passed in is out of bounds (1-12)", function() {
  74
+      expect(elm.find('div.row').length).toBe(3);
  75
+    });
  76
+  }); 
76 77
 
77  
-// describe('grid controller', function() {
78  
-//   var scope, ctrl;
79  
-//   beforeEach(module('bootstrapGrid'));
  78
+  // potential extra feature
80 79
 
81  
-//   beforeEach(inject(function($rootScope, $controller){
82  
-//     scope = $rootScope;
83  
-//     scope.spanWidth = 3;
84  
-//     scope.parentSpanWidth = 12;
85  
-//     scope.items = ['item 1', 'item 2','item 3','item 4','item 5','item 6','item 7','item 8','item 9','item 10','item 11'];
86  
-//     ctrl = $controller('BootstrapGridCtrl', {$scope: scope});
87  
-//   }));
  80
+  // it should set its 'parentSpanWidth' to the 'spanWidth' of a parent span in the DOM if it finds one and no valid 'parentSpanWidth' is excplicitly passed in
88 81
 
89  
-//   describe('constructor', function() {
90  
-//     it('should chunk its items into an appropriate number of rows', function() {
91  
-//       expect(scope.rows.length).toBe(3);
92  
-//     });
93  
-//   });
94  
-// });
  82
+});
161  test/tabsSpec.js
... ...
@@ -1,161 +0,0 @@
1  
-describe('tabs', function() {
2  
-  var elm, scope;
3  
-
4  
-  // load the tabs code
5  
-  beforeEach(module('tabs'));
6  
-
7  
-  // load the templates
8  
-  beforeEach(module('tpl/tabs.html', 'tpl/pane.html'));
9  
-
10  
-  beforeEach(inject(function($rootScope, $compile) {
11  
-    // we might move this tpl into an html file as well...
12  
-    elm = angular.element(
13  
-      '<div>' +
14  
-        '<tabs>' +
15  
-          '<pane title="First Tab">' +
16  
-            'first content is {{first}}' +
17  
-          '</pane>' +
18  
-          '<pane title="Second Tab">' +
19  
-            'second content is {{second}}' +
20  
-          '</pane>' +
21  
-        '</tabs>' +
22  
-      '</div>');
23  
-
24  
-    scope = $rootScope;
25  
-    $compile(elm)(scope);
26  
-    scope.$digest();
27  
-  }));
28  
-
29  
-
30  
-  it('should create clickable titles', inject(function($compile, $rootScope) {
31  
-    var titles = elm.find('ul.nav-tabs li a');
32  
-
33  
-    expect(titles.length).toBe(2);
34  
-    expect(titles.eq(0).text()).toBe('First Tab');
35  
-    expect(titles.eq(1).text()).toBe('Second Tab');
36  
-  }));
37  
-
38  
-
39  
-  it('should bind the content', function() {
40  
-    var contents = elm.find('div.tab-content div.tab-pane');
41  
-
42  
-    expect(contents.length).toBe(2);
43  
-    expect(contents.eq(0).text()).toBe('first content is ');
44  
-    expect(contents.eq(1).text()).toBe('second content is ');
45  
-
46  
-    scope.$apply(function() {
47  
-      scope.first = 123;
48  
-      scope.second = 456;
49  
-    });
50  
-
51  
-    expect(contents.eq(0).text()).toBe('first content is 123');
52  
-    expect(contents.eq(1).text()).toBe('second content is 456');
53  
-  });
54  
-
55  
-
56  
-  it('should set active class on title', function() {
57  
-    var titles = elm.find('ul.nav-tabs li');
58  
-
59  
-    expect(titles.eq(0)).toHaveClass('active');
60  
-    expect(titles.eq(1)).not.toHaveClass('active');
61  
-  });
62  
-
63  
-
64  
-  it('should set active class on content', function() {
65  
-    var contents = elm.find('div.tab-content div.tab-pane');
66  
-
67  
-    expect(contents.eq(0)).toHaveClass('active');
68  
-    expect(contents.eq(1)).not.toHaveClass('active');
69  
-  });
70  
-
71  
-
72  
-  it('should change active pane when title clicked', function() {
73  
-    var titles = elm.find('ul.nav-tabs li');
74  
-    var contents = elm.find('div.tab-content div.tab-pane');
75  
-
76  
-    // click the second tab
77  
-    titles.eq(1).find('a').click();
78  
-
79  
-    // second title should be active
80  
-    expect(titles.eq(0)).not.toHaveClass('active');
81  
-    expect(titles.eq(1)).toHaveClass('active');
82  
-
83  
-    // second content should be active
84  
-    expect(contents.eq(0)).not.toHaveClass('active');
85  
-    expect(contents.eq(1)).toHaveClass('active');
86  
-  });
87  
-});
88  
-
89  
-
90  
-describe('tabs controller', function() {
91  
-  var scope, ctrl;
92  
-
93  
-  beforeEach(inject(function($controller, $rootScope) {
94  
-    scope = $rootScope;
95  
-
96  
-    // instantiate the controller stand-alone, without the directive
97  
-    ctrl = $controller(TabsController, {$scope: scope, $element: null});
98  
-  }));
99  
-
100  
-
101  
-  describe('select', function() {
102  
-
103  
-    it('should mark given pane selected', function() {
104  
-      var pane = {};
105  
-
106  
-      scope.select(pane);
107  
-      expect(pane.selected).toBe(true);
108  
-    });
109  
-
110  
-
111  
-    it('should deselect other panes', function() {
112  
-      var pane1 = {}, pane2 = {}, pane3 = {};
113  
-
114  
-      ctrl.addPane(pane1);
115  
-      ctrl.addPane(pane2);
116  
-      ctrl.addPane(pane3);
117  
-
118  
-      scope.select(pane1);
119  
-      expect(pane1.selected).toBe(true);
120  
-      expect(pane2.selected).toBe(false);
121  
-      expect(pane3.selected).toBe(false);
122  
-
123  
-      scope.select(pane2);
124  
-      expect(pane1.selected).toBe(false);
125  
-      expect(pane2.selected).toBe(true);
126  
-      expect(pane3.selected).toBe(false);
127  
-
128  
-      scope.select(pane3);
129  
-      expect(pane1.selected).toBe(false);
130  
-      expect(pane2.selected).toBe(false);
131  
-      expect(pane3.selected).toBe(true);
132  
-    });
133  
-  });
134  
-
135  
-
136  
-  describe('addPane', function() {
137  
-
138  
-    it('should append pane', function() {
139  
-      var pane1 = {}, pane2 = {};
140  
-
141  
-      expect(scope.panes).toEqual([]);
142  
-
143  
-      ctrl.addPane(pane1);
144  
-      expect(scope.panes).toEqual([pane1]);
145  
-
146  
-      ctrl.addPane(pane2);
147  
-      expect(scope.panes).toEqual([pane1, pane2]);
148  
-    });
149  
-
150  
-
151  
-    it('should select the first one', function() {
152  
-      var pane1 = {}, pane2 = {};
153  
-
154  
-      ctrl.addPane(pane1);
155  
-      expect(pane1.selected).toBe(true);
156  
-
157  
-      ctrl.addPane(pane2);
158  
-      expect(pane1.selected).toBe(true);
159  
-    });
160  
-  });
161  
-});
1  tpl/pane.html
... ...
@@ -1 +0,0 @@
1  
-<div class="tab-pane" ng-class="{active: selected}" ng-transclude></div>
8  tpl/tabs.html
... ...
@@ -1,8 +0,0 @@
1  
-<div class="tabbable">
2  
-  <ul class="nav nav-tabs">
3  
-    <li ng-repeat="pane in panes" ng-class="{active:pane.selected}">
4  
-      <a href="" ng-click="select(pane)">{{pane.title}}</a>
5  
-    </li>
6  
-  </ul>
7  
-  <div class="tab-content" ng-transclude></div>
8  
-</div>

0 notes on commit 92e5746

Please sign in to comment.
Something went wrong with that request. Please try again.