Fixed #64 and fixed sub view controllers and tabs

Moved tabs to be absolute not fixed so they can easily
be placed inside of containers

dist/css/ionic.css

@@ -2844,7 +2844,7 @@ a.subdued‎ {
   background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
   border-color: #dddddd;
   color: #333333;
-  position: fixed;
+  position: absolute;
   bottom: 0;
   z-index: 5;
   width: 100%;

dist/js/ionic-angular.js

@@ -1223,7 +1223,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
     transclude: true,
     controller: 'TabsCtrl',
     //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
-    template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
+    template: '<div class="content"><tab-controller-bar></tab-controller-bar></div>',
     compile: function(element, attr, transclude, tabsCtrl) {
       return function($scope, $element, $attr) {
         $scope.$watch('activeAnimation', function(value) {

dist/js/ionic.js

@@ -2716,11 +2716,10 @@ window.ionic = {
    * You see it all over iOS apps, where it offers a set of options 
    * triggered after an action.
    */
-  ionic.views.ActionSheet = function(opts) {
+  ionic.views.ActionSheet = ionic.views.View.inherit({
+    initialize: function(opts) {
       this.el = opts.el;
-  };
-
-  ionic.views.ActionSheet.prototype = {
+    },
     show: function() {
       // Force a reflow so the animation will actually run
       this.el.offsetWidth;
@@ -2732,20 +2731,19 @@ window.ionic = {
       this.el.offsetWidth;
       this.el.classList.remove('active');
     }
-  };
+  });
 
 })(ionic);
 ;
 (function(ionic) {
 'use strict';
 
-  ionic.views.Checkbox = function(opts) {
+  ionic.views.Checkbox = ionic.views.View.inherit({
+    initialize: function(opts) {
       this.el = opts.el;
       this.checkbox = opts.checkbox;
       this.handle = opts.handle;
-  };
-
-  ionic.views.Checkbox.prototype = {
+    },
 
     tap: function(e) {
       this.val( !this.checkbox.checked );
@@ -2757,21 +2755,19 @@ window.ionic = {
       }
       return this.checkbox.checked;
     }
-
-  };
+  });
 
 })(ionic);
 ;
 (function(ionic) {
 'use strict';
 
-  ionic.views.HeaderBar = function(opts) {
+  ionic.views.HeaderBar = ionic.views.View.inherit({
+    initialize: function(opts) {
       this.el = opts.el;
 
       this._titleEl = this.el.querySelector('.title');
-  };
-
-  ionic.views.HeaderBar.prototype = {
+    },
     resizeTitle: function() {
       var e, j, i,
       title,
@@ -2787,7 +2783,7 @@ window.ionic = {
 
       titleWidth = title.offsetWidth;
     }
-  };
+  });
 
 })(ionic);
 ;
@@ -3281,7 +3277,8 @@ window.ionic = {
    * You see it all over iOS apps, where it offers a set of options 
    * triggered after an action.
    */
-  ionic.views.Loading = function(opts) {
+  ionic.views.Loading = ionic.views.View.inherit({
+    initialize: function(opts) {
       var _this = this;
 
       this.el = opts.el;
@@ -3289,9 +3286,7 @@ window.ionic = {
       this.maxWidth = opts.maxWidth || 200;
 
       this._loadingBox = this.el.querySelector('.loading');
-  };
-
-  ionic.views.Loading.prototype = {
+    },
     show: function() {
       var _this = this;
 
@@ -3314,7 +3309,7 @@ window.ionic = {
 
       this.el.classList.remove('active');
     }
-  };
+  });
 
 })(ionic);
 ;
@@ -3338,7 +3333,8 @@ window.ionic = {
 (function(ionic) {
 'use strict';
 
-  ionic.views.NavBar = function(opts) {
+  ionic.views.NavBar = ionic.views.View.inherit({
+    initialize: function(opts) {
       this.el = opts.el;
 
       this._titleEl = this.el.querySelector('.title');
@@ -3346,9 +3342,7 @@ window.ionic = {
       if(opts.hidden) {
         this.hide();
       }
-  };
-
-  ionic.views.NavBar.prototype = {
+    },
     hide: function() {
       this.el.classList.add('hidden');
     },
@@ -3386,7 +3380,7 @@ window.ionic = {
         this._currentBackButton.parentNode.removeChild(this._currentBackButton);
       }
     }
-  };
+  });
 
 })(ionic);
 ;
@@ -3398,13 +3392,13 @@ window.ionic = {
    * You see it all over iOS apps, where it offers a set of options 
    * triggered after an action.
    */
-  ionic.views.Popup = function(opts) {
+  ionic.views.Popup = ionic.views.View.inherit({
+    initialize: function(opts) {
       var _this = this;
 
       this.el = opts.el;
-  };
+    },
 
-  ionic.views.Popup.prototype = {
     setTitle: function(title) {
       var titleEl = el.querySelector('.popup-title');
       if(titleEl) {
@@ -3425,20 +3419,20 @@ window.ionic = {
 
       this.el.classList.remove('active');
     }
-  };
+  });
 
 })(ionic);
 ;
 (function(ionic) {
 'use strict';
 
-  ionic.views.SideMenu = function(opts) {
+  ionic.views.SideMenu = ionic.views.View.inherit({
+    initialize: function(opts) {
       this.el = opts.el;
       this.width = opts.width;
       this.isEnabled = opts.isEnabled || true;
-  };
+    },
 
-  ionic.views.SideMenu.prototype = {
     getFullWidth: function() {
       return this.width;
     },
@@ -3451,7 +3445,7 @@ window.ionic = {
     pushDown: function() {
       this.el.style.zIndex = -1;
     }
-  };
+  });
 
 })(ionic);
 ;
@@ -3787,12 +3781,12 @@ window.ionic = {
 (function(ionic) {
 'use strict';
 
-ionic.views.TabBarItem = function(el) {
+ionic.views.TabBarItem = ionic.views.View.inherit({
+  initialize: function(el) {
     this.el = el;
 
     this._buildItem();
-};
-ionic.views.TabBarItem.prototype = {
+  },
   // Factory for creating an item from a given javascript object
   create: function(itemData) {
     var item = document.createElement('a');
@@ -3858,17 +3852,16 @@ ionic.views.TabBarItem.prototype = {
       this.el.classList.remove('active');
     }
   }
-};
+});
 
-ionic.views.TabBar = function(opts) {
+ionic.views.TabBar = ionic.views.View.inherit({
+  initialize: function(opts) {
     this.el = opts.el;
      
     this.items = [];
 
     this._buildItems();
-};
-
-ionic.views.TabBar.prototype = {
+  },
   // get all the items for the TabBar
   getItems: function() {
     return this.items;
@@ -3982,7 +3975,7 @@ ionic.views.TabBar.prototype = {
     }
     this.items.length = 0;
   }
-};
+});
 
 })(window.ionic);
 ;

js/ext/angular/src/directive/ionicTabBar.js

@@ -55,7 +55,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
     transclude: true,
     controller: 'TabsCtrl',
     //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
-    template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
+    template: '<div class="content"><tab-controller-bar></tab-controller-bar></div>',
     compile: function(element, attr, transclude, tabsCtrl) {
       return function($scope, $element, $attr) {
         $scope.$watch('activeAnimation', function(value) {

js/ext/angular/test/subControllers.html

@@ -6,14 +6,14 @@
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../../../dist/ionic.css">
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-touch.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.js"></script>
   </head>
   <body>
 
-    <side-menus>
+    <side-menu>
       <pane side-menu-content>
         <header class="bar bar-header bar-dark">
           <a href="#" class="button"><i class="icon-reorder"></i></a>
@@ -32,9 +32,8 @@
         </ul>
       </menu>
       <menu side="right">
-        <h2>Items</h2>
-        <tab-controller>
-          <div title="Home" icon="icon-home" class="tab-content">
+        <tabs>
+          <tab title="Home" icon="icon-home" class="tab-content">
             <header class="bar bar-header bar-dark">
               <h1 class="title">Tab Bars</h1>
             </header>
@@ -46,34 +45,32 @@
                 </a>
               </ul>
             </content>
-          </div>
+          </tab>
 
-          <div title="About" icon="icon-info" class="tab-content">
+          <tab title="About" icon="icon-info" class="tab-content">
             <header class="bar bar-header bar-success">
               <h1 class="title">About</h1>
             </header>
             <content has-header="true" has-tabs="true">
               <h1>About Us</h1>
             </content>
-          </div>
+          </tab>
 
-          <div title="Settings" icon="icon-gear" class="tab-content">
+          <tab title="Settings" icon="icon-gear" class="tab-content">
             <header class="bar bar-header bar-dark">
               <h1 class="title">Settings</h1>
             </header>
             <content has-header="true" has-tabs="true">
               <h1>Settings</h1>
             </content>
-          </div>
-        </tab-controller>
+          </tab>
+        </tabs>
       </menu>
-    </side-menus>
-    <script src="../../../../dist/ionic.js"></script>
-    <script src="../src/directive/ionicContent.js"></script>
-    <script src="../src/directive/ionicSideMenu.js"></script>
-    <script src="../src/directive/ionicTabBar.js"></script>
+    </side-menu>
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
     <script>
-      angular.module('sideMenuTest', ['ionic.ui.content', 'ionic.ui.sideMenu', 'ionic.ui.tabs'])
+      angular.module('sideMenuTest', ['ionic']);
 
       /*
       var Controller = function(opts) {

js/views/actionSheetView.js

@@ -6,11 +6,10 @@
    * You see it all over iOS apps, where it offers a set of options 
    * triggered after an action.
    */
-  ionic.views.ActionSheet = function(opts) {
+  ionic.views.ActionSheet = ionic.views.View.inherit({
+    initialize: function(opts) {
       this.el = opts.el;
-  };
-
-  ionic.views.ActionSheet.prototype = {
+    },
     show: function() {
       // Force a reflow so the animation will actually run
       this.el.offsetWidth;
@@ -22,6 +21,6 @@
       this.el.offsetWidth;
       this.el.classList.remove('active');
     }
-  };
+  });
 
 })(ionic);

js/views/checkboxView.js

@@ -1,13 +1,12 @@
 (function(ionic) {
 'use strict';
 
-  ionic.views.Checkbox = function(opts) {
+  ionic.views.Checkbox = ionic.views.View.inherit({
+    initialize: function(opts) {
       this.el = opts.el;
       this.checkbox = opts.checkbox;
       this.handle = opts.handle;
-  };
-
-  ionic.views.Checkbox.prototype = {
+    },
 
     tap: function(e) {
       this.val( !this.checkbox.checked );
@@ -19,7 +18,6 @@
       }
       return this.checkbox.checked;
     }
-
-  };
+  });
 
 })(ionic);

js/views/headerBarView.js

@@ -1,13 +1,12 @@
 (function(ionic) {
 'use strict';
 
-  ionic.views.HeaderBar = function(opts) {
+  ionic.views.HeaderBar = ionic.views.View.inherit({
+    initialize: function(opts) {
       this.el = opts.el;
 
       this._titleEl = this.el.querySelector('.title');
-  };
-
-  ionic.views.HeaderBar.prototype = {
+    },
     resizeTitle: function() {
       var e, j, i,
       title,
@@ -23,6 +22,6 @@
 
       titleWidth = title.offsetWidth;
     }
-  };
+  });
 
 })(ionic);

js/views/loadingView.js

@@ -6,7 +6,8 @@
    * You see it all over iOS apps, where it offers a set of options 
    * triggered after an action.
    */
-  ionic.views.Loading = function(opts) {
+  ionic.views.Loading = ionic.views.View.inherit({
+    initialize: function(opts) {
       var _this = this;
 
       this.el = opts.el;
@@ -14,9 +15,7 @@
       this.maxWidth = opts.maxWidth || 200;
 
       this._loadingBox = this.el.querySelector('.loading');
-  };
-
-  ionic.views.Loading.prototype = {
+    },
     show: function() {
       var _this = this;
 
@@ -39,6 +38,6 @@
 
       this.el.classList.remove('active');
     }
-  };
+  });
 
 })(ionic);

js/views/navBarView.js

@@ -1,7 +1,8 @@
 (function(ionic) {
 'use strict';
 
-  ionic.views.NavBar = function(opts) {
+  ionic.views.NavBar = ionic.views.View.inherit({
+    initialize: function(opts) {
       this.el = opts.el;
 
       this._titleEl = this.el.querySelector('.title');
@@ -9,9 +10,7 @@
       if(opts.hidden) {
         this.hide();
       }
-  };
-
-  ionic.views.NavBar.prototype = {
+    },
     hide: function() {
       this.el.classList.add('hidden');
     },
@@ -49,6 +48,6 @@
         this._currentBackButton.parentNode.removeChild(this._currentBackButton);
       }
     }
-  };
+  });
 
 })(ionic);

js/views/popupView.js

@@ -6,13 +6,13 @@
    * You see it all over iOS apps, where it offers a set of options 
    * triggered after an action.
    */
-  ionic.views.Popup = function(opts) {
+  ionic.views.Popup = ionic.views.View.inherit({
+    initialize: function(opts) {
       var _this = this;
 
       this.el = opts.el;
-  };
+    },
 
-  ionic.views.Popup.prototype = {
     setTitle: function(title) {
       var titleEl = el.querySelector('.popup-title');
       if(titleEl) {
@@ -33,6 +33,6 @@
 
       this.el.classList.remove('active');
     }
-  };
+  });
 
 })(ionic);

js/views/sideMenuView.js

@@ -1,13 +1,13 @@
 (function(ionic) {
 'use strict';
 
-  ionic.views.SideMenu = function(opts) {
+  ionic.views.SideMenu = ionic.views.View.inherit({
+    initialize: function(opts) {
       this.el = opts.el;
       this.width = opts.width;
       this.isEnabled = opts.isEnabled || true;
-  };
+    },
 
-  ionic.views.SideMenu.prototype = {
     getFullWidth: function() {
       return this.width;
     },
@@ -20,6 +20,6 @@
     pushDown: function() {
       this.el.style.zIndex = -1;
     }
-  };
+  });
 
 })(ionic);

js/views/tabBarView.js

@@ -1,12 +1,12 @@
 (function(ionic) {
 'use strict';
 
-ionic.views.TabBarItem = function(el) {
+ionic.views.TabBarItem = ionic.views.View.inherit({
+  initialize: function(el) {
     this.el = el;
 
     this._buildItem();
-};
-ionic.views.TabBarItem.prototype = {
+  },
   // Factory for creating an item from a given javascript object
   create: function(itemData) {
     var item = document.createElement('a');
@@ -72,17 +72,16 @@ ionic.views.TabBarItem.prototype = {
       this.el.classList.remove('active');
     }
   }
-};
+});
 
-ionic.views.TabBar = function(opts) {
+ionic.views.TabBar = ionic.views.View.inherit({
+  initialize: function(opts) {
     this.el = opts.el;
      
     this.items = [];
 
     this._buildItems();
-};
-
-ionic.views.TabBar.prototype = {
+  },
   // get all the items for the TabBar
   getItems: function() {
     return this.items;
@@ -196,6 +195,6 @@ ionic.views.TabBar.prototype = {
     }
     this.items.length = 0;
   }
-};
+});
 
 })(window.ionic);

scss/_tabs.scss

@@ -10,7 +10,7 @@
   @include flex-direction(horizontal);
 
   @include tab-style($tabs-default-bg, $tabs-default-border-color, $gray-dark);
-  position: fixed;
+  position: absolute;
   bottom: 0;
   z-index: 5;
   width: 100%;