Removed hacking folder, distributed files

ext/angular/src/ionicNav.js

@@ -0,0 +1,95 @@
+angular.module('ionic.ui', ['ngTouch'])
+
+.directive('content', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    scope: true,
+    template: '<div class="content" ng-class="{\'has-header\': hasHeader, \'has-tabs\': hasTabs}"></div>',
+    compile: function(element, attr, transclude, navCtrl) {
+      return function($scope, $element, $attr) {
+        $scope.hasHeader = attr.hasHeader;
+      };
+    }
+  }
+})
+
+.controller('NavCtrl', function($scope, $element, $compile) {
+  var _this = this;
+
+
+  angular.extend(this, NavController.prototype);
+
+  NavController.call(this, {
+    content: {
+    },
+    navBar: {
+      shouldGoBack: function() {
+      },
+      setTitle: function(title) {
+        $scope.title = title;
+      },
+      showBackButton: function(show) {
+      },
+    }
+  });
+
+  $scope.controllers = this.controllers;
+
+  $scope.getTopController = function() {
+    return $scope.controllers[$scope.controllers.length-1];
+  }
+
+  $scope.pushController = function(controller) {
+    //console.log('PUSHING OCNTROLLER', controller);
+    _this.push(controller);
+  }
+
+  $scope.navController = this;
+})
+
+.directive('navController', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    controller: 'NavCtrl',
+    //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
+    template: '<div class="view"><div ng-transclude></div></div>',
+    compile: function(element, attr, transclude, navCtrl) {
+      return function($scope, $element, $attr) {
+      };
+    }
+  }
+})
+
+.directive('navBar', function() {
+  return {
+    restrict: 'E',
+    require: '^navController',
+    transclude: true,
+    replace: true,
+    template: '<header class="bar bar-header bar-dark nav-bar">' + 
+        '<a href="#" ng-click="goBack()" class="button" ng-if="controllers.length > 1">Back</a>' +
+        '<h1 class="title">{{getTopController().title}}</h1>' + 
+      '</header>',
+    link: function(scope, element, attrs, navCtrl) {
+      scope.goBack = function() {
+        navCtrl.pop();
+      }
+    }
+  }
+})
+
+.directive('navContent', function() {
+  return {
+    restrict: 'ECA',
+    scope: true,
+    link: function(scope, element, attrs) {
+      scope.title = attrs.title;
+      scope.isVisible = true;
+      scope.pushController(scope);
+    }
+  }
+});

ext/angular/src/ionicSideMenu.js

@@ -0,0 +1,117 @@
+angular.module('ionic.ui', [])
+
+.controller('SideMenuCtrl', function($scope) {
+  var _this = this;
+
+  angular.extend(this, SideMenuController.prototype);
+
+  SideMenuController.call(this, {
+    left: {
+      width: 270,
+      isEnabled: true,
+      pushDown: function() {
+        $scope.leftZIndex = -1;
+      },
+      bringUp: function() {
+        $scope.leftZIndex = 0;
+      }
+    },
+    right: {
+      width: 270,
+      isEnabled: true,
+      pushDown: function() {
+        $scope.rightZIndex = -1;
+      },
+      bringUp: function() {
+        $scope.rightZIndex = 0;
+      }
+    },
+    content: {
+      onDrag: function(e) {},
+      endDrag: function(e) {},
+      getTranslateX: function() {
+        /*
+        var r = /translate3d\((-?.+)px/;
+        var d = r.exec(this.el.style.webkitTransform);
+
+        if(d && d.length > 0) {
+          return parseFloat(d[1]);
+        }
+        */
+        return $scope.contentTranslateX || 0;
+      },
+      setTranslateX: function(amount) {
+        $scope.contentTranslateX = amount;
+        $scope.$apply();
+      },
+      enableAnimation: function() {
+        //this.el.classList.add(this.animateClass);
+        $scope.animationEnabled = true;
+      },
+      disableAnimation: function() {
+        //this.el.classList.remove(this.animateClass);
+        $scope.animationEnabled = false;
+      }
+    }
+  });
+
+  $scope.contentTranslateX = 0;
+})
+
+.directive('sideMenuController', function() {
+  return {
+    restrict: 'E',
+    controller: 'SideMenuCtrl',
+    replace: true,
+    transclude: true,
+    template: '<div class="view"><div ng-transclude></div></div>',
+  }
+})
+
+.directive('sideMenuContent', function() {
+  return {
+    restrict: 'CA',
+    require: '^sideMenuController',
+    compile: function(element, attr, transclude) {
+      return function($scope, $element, $attr, sideMenuCtrl) {
+        window.ionic.onGesture('drag', function(e) {
+          sideMenuCtrl._handleDrag(e);
+        }, $element[0]);
+
+        window.ionic.onGesture('release', function(e) {
+          sideMenuCtrl._endDrag(e);
+        }, $element[0]);
+
+        $scope.$watch('contentTranslateX', function(value) {
+          $element[0].style.webkitTransform = 'translate3d(' + value + 'px, 0, 0)';
+        });
+
+        $scope.$watch('animationEnabled', function(isAnimationEnabled) {
+          if(isAnimationEnabled) {
+            $element[0].classList.add('menu-animated');
+          } else {
+            $element[0].classList.remove('menu-animated');
+          }
+
+        });
+      };
+    }
+  }
+})
+
+
+.directive('menu', function() {
+  return {
+    restrict: 'E',
+    require: '^sideMenuController',
+    replace: true,
+    transclude: true,
+    scope: true,
+    template: '<div class="menu menu-{{side}}" ng-transclude></div>',
+    compile: function(element, attr, transclude, sideMenuCtrl) {
+      return function($scope, $element, $attr) {
+        $scope.side = attr.side;
+      };
+    }
+  }
+})

ext/angular/src/ionicTabBar.js

@@ -1,61 +1,87 @@
-angular.module('ionic.ui.tabbar', {})
+angular.module('ionic.ui', [])
 
-.controller('TabBarCtrl', ['$scope', '$element', function($scope, $element) {
-  console.log('Tab controller');
-  var tabs = $scope.tabs = [];
+.directive('content', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    scope: {
+      hasHeader: '@',
+      hasTabs: '@'
+    },
+    template: '<div class="content" ng-class="{\'has-header\': hasHeader, \'has-tabs\': hasTabs}" ng-transclude></div>'
+  }
+})
 
-  
-  $scope.selectTab = function(index) {
-  };
-  $scope.beforeTabSelect = function(index) {
-  };
-  $scope.tabSelected = function(index) {
-  };
+.controller('TabsCtrl', function($scope) {
+  var _this = this;
 
-  this.addTab = function(tab) {
-    tabs.push(tab);
-  };
+  angular.extend(this, TabBarController.prototype);
 
-  this.getSelectedTabIndex = function() {
-    return $scope.selectedIndex;
-  };
+  TabBarController.call(this, {
+    tabBar: {
+      tryTabSelect: function() {},
+      setSelectedItem: function(index) {
+        console.log('TAB BAR SET SELECTED INDEX', index);
+      },
+      addItem: function(item) {
+        console.log('TAB BAR ADD ITEM', item);
+      }
+    }
+  });
 
-  this.selectTabAtIndex = function(index) {
-    $scope.selectedIndex = index;
-    console.log('Scope selected tab is', index);
-  };
+  $scope.controllers = this.controllers;
 
-  this.getNumTabs = function() {
-    return tabs.length;
-  };
-}])
+  $scope.$watch('controllers', function(newV, oldV) {
+    console.log("CControlelrs changed", newV, oldV);
+    //$scope.$apply();
+  });
+})
 
-.directive('tabBar', function() {
+.directive('tabController', function() {
   return {
     restrict: 'E',
     replace: true,
     scope: {},
     transclude: true,
-    controller: 'TabBarCtrl',
+    controller: 'TabsCtrl',
     //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
-    template: '<div class="view-wrapper" ng-transclude></div>',
+    template: '<div class="view"><div ng-transclude></div><tab-bar></tab-bar></div>',
+    compile: function(element, attr, transclude, tabsCtrl) {
+      return function($scope, $element, $attr) {
+      };
+    }
   }
 })
 
-.directive('tabs', function() {
+// Generic controller directive
+.directive('tabContent', function() {
+  return {
+    restrict: 'CA',
+    replace: true,
+    transclude: true,
+    template: '<div ng-show="isVisible" ng-transclude></div>',
+    require: '^tabController',
+    scope: true,
+    link: function(scope, element, attrs, tabsCtrl) {
+      scope.title = attrs.title;
+      scope.icon = attrs.icon;
+      tabsCtrl.addController(scope);
+    }
+  }
+})
+
+
+.directive('tabBar', function() {
   return {
     restrict: 'E',
-    replace: true,
-    require: '^tabBar',
+    require: '^tabController',
     transclude: true,
-    template: '<footer class="bar bar-tabs bar-footer bar-success">' + 
-  '<nav class="tabs">' + 
-    '<ul class="tabs-inner">' + 
-      '<tab-item text="Item" icon="icon-default" ng-repeat="tab in tabs">' + 
-      '</tab-item>' +
-    '</ul>' +
-  '</nav>' +
-'</footer>'
+    replace: true,
+    scope: true,
+    template: '<div class="tabs tabs-primary">' + 
+      '<tab-item title="{{controller.title}}" icon="{{controller.icon}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-item>' + 
+    '</div>'
   }
 })
 
@@ -63,42 +89,23 @@ angular.module('ionic.ui.tabbar', {})
   return {
     restrict: 'E',
     replace: true,
-    require: '^tabBar',
+    require: '^tabController',
     scope: {
-      text: '@',
+      title: '@',
       icon: '@',
       active: '=',
       tabSelected: '@',
+      index: '='
     },
-    compile: function(element, attrs, transclude) {
-      return function(scope, element, attrs, tabBarCtrl) {
-        var getActive, setActive;
-
-        scope.$watch('active', function(active) {
-          console.log('ACTIVE CHANGED', active);
-        });
-      };
-    },
-    link: function(scope, element, attrs, tabBarCtrl) {
-
-      // Store the index of this list item, which
-      // specifies which tab item it is
-      scope.tabIndex = element.index();
-
-      scope.active = true;
-
+    link: function(scope, element, attrs, tabsCtrl) {
+      console.log('Linked item', scope);
       scope.selectTab = function(index) {
-        console.log('SELECT TAB', index);
-        tabBarCtrl.selectTabAtIndex(index);
+        tabsCtrl.selectController(scope.index);
       };
-      
-      tabBarCtrl.addTab(scope);
     },
-    template: '<li class="tab-item" ng-class="{active:active}">' + 
-        '<a href="#" ng-click="selectTab(tabIndex)">' + 
-          '<i class="{{icon}}"></i>' +
-          '{{text}}' +
-        '</a></li>'
+    template: 
+      '<a href="#" ng-class="{active:active}" ng-click="selectTab()" class="tab-item">' +
+        '<i class="{{icon}}"></i> {{title}}' +
+      '</a>'
   }
 });
-

ext/angular/test/nav.html

@@ -0,0 +1,87 @@
+<html ng-app="navTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Nav Bars</title>
+
+    <!-- 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="/vendor/angular/1.2.0rc2/angular.js"></script>
+    <script src="/vendor/angular/1.2.0rc2/angular-touch.js"></script>
+    <script src="/vendor/angular/1.2.0rc2/angular-animate.js"></script>
+    <style>
+      .reveal-animation {
+        /*
+        -webkit-transform: translate3d(0%, 0, 0);
+                transform: translate3d(0%, 0, 0);
+
+       -webkit-transition: -webkit-transform 1s ease-in-out;
+               transition:         transform 1s ease-in-out;
+        */
+      }
+      .reveal-animation.ng-enter {
+        -webkit-transition: .2s ease-in-out all;
+        -webkit-transform:translate3d(100%,0,0) ;
+      }
+      .reveal-animation.ng-enter-active {
+        -webkit-transform:translate3d(0,0,0) ;
+      }
+      .reveal-animation.ng-leave {
+        -webkit-transition: .2s ease-in-out all;
+        -webkit-transform:translate3d(0%,0,0);
+      }
+      .reveal-animation.ng-leave-active {
+        -webkit-transition: .2s ease-in-out all;
+        -webkit-transform:translate3d(-100%,0,0);
+      }
+    </style>
+
+  </head>
+  <body>
+
+    <nav-controller>
+      <nav-bar></nav-bar>
+
+      <content has-header="true" ng-controller="AppCtrl" class="reveal-animation">
+      </content>
+    </nav-controller>
+
+    <script src="../js/NavController.js"></script>
+    <script src="../js/NavAngular.js"></script>
+    <script>
+      var pageNumber = 0;
+
+      var pushIt = function($scope, $compile, $element, cb) {
+        var childScope = $scope.$new();
+        childScope.isVisible = true;
+
+        pageNumber++;
+
+        var el = $compile('<div title="Home: ' + pageNumber + '" ng-controller="CatsCtrl" nav-content has-header="true" class="reveal-animation" ng-show="isVisible">' +
+          '<h1>' + pageNumber + '</h1>' +
+          '<a href="#" class="button button-success" ng-click="goNext()">Next</a>' +
+          '</div>')(childScope, cb);
+      }
+
+      angular.module('navTest', ['ionic.ui'])
+
+      .controller('AppCtrl', function($scope, $compile, $element) {
+        pushIt($scope, $compile, $element, function(cloned, scope) {
+          $element.append(cloned);
+        })
+
+      })
+
+      .controller('CatsCtrl', function($scope, $compile, $element) {
+        console.log('Cats', $element);
+        $scope.goNext = function() {
+          pushIt($scope, $compile, $element, function(cloned, scope) {
+            $element.parent().append(cloned);
+          })
+        };
+      });
+    </script>
+  </body>
+</html>
+

ext/angular/test/sideMenuAngular.html

@@ -0,0 +1,98 @@
+<html ng-app="sideMenuTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Side Menus</title>
+
+    <!-- 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="/vendor/angular/1.2.0rc2/angular.js"></script>
+    <script src="/vendor/angular/1.2.0rc2/angular-touch.js"></script>
+    <script src="/vendor/angular/1.2.0rc2/angular-animate.js"></script>
+
+  </head>
+  <body>
+
+    <side-menu-controller>
+      <div class="full-section" side-menu-content>
+        <header class="bar bar-header bar-dark">
+          <a href="#" class="button"><i class="icon-reorder"></i></a>
+          <h1 class="title">Slide me</h1>
+        </header>
+        <div class="content has-header">
+          <h1>Slide me side to side!</h1>
+        </div>
+      </div>
+      <menu side="left">
+        <h2>Left</h2>
+        <ul class="list">
+          <a href="#" class="list-item" ng-repeat="item in list">
+            {{item.text}}
+          </a>
+        </ul>
+      </menu>
+      <menu side="right">
+        <h2>Right</h2>
+      </menu>
+    </side-menu-controller>
+    <script src="../../js/ionic-events.js"></script>
+    <script src="../../js/ionic-gestures.js"></script>
+    <script src="SideMenuController.js"></script>
+    <script src="SideMenuAngular.js"></script>
+    <script>
+      angular.module('sideMenuTest', ['ionic.ui'])
+
+      /*
+      var Controller = function(opts) {
+        var _this = this;
+
+        this.el = opts.el;
+        this.animateClass = opts.animateClass;
+
+        // Bind release and drag listeners
+        window.ionic.onGesture('drag', function(e) {
+          _this.onDrag && _this.onDrag(e);
+        }, this.el);
+
+        window.ionic.onGesture('release', function(e) {
+          _this.endDrag && _this._endDrag(e);
+        }, this.el);
+      };
+      Controller.prototype = {
+        onDrag: function(e) {},
+        endDrag: function(e) {},
+        getTranslateX: function() {
+          var r = /translate3d\((-?.+)px/;
+          var d = r.exec(this.el.style.webkitTransform);
+
+          if(d && d.length > 0) {
+            return parseFloat(d[1]);
+          }
+          return 0;
+        },
+        setTranslateX: function(amount) {
+          this.el.style.webkitTransform = 'translate3d(' + amount + 'px, 0, 0)';
+        },
+        enableAnimation: function() {
+          this.el.classList.add(this.animateClass);
+        },
+        disableAnimation: function() {
+          this.el.classList.remove(this.animateClass);
+        }
+      };
+
+      var l = new SideMenu({ el: document.getElementById('my-left-panel'), width: 270 });
+      var r = new SideMenu({ el: document.getElementById('my-right-panel'), width: 270 });
+      var c = new Controller({ el: document.createElement('content') });
+
+      var ctrl = new SideMenuController({
+        left: l,
+        right: r,
+        content: c
+      });
+      */
+    </script>
+  </body>
+</html>
+

ext/angular/test/tabs.html

@@ -1,18 +1,69 @@
-<!DOCTYPE html>
-<html>
+<html ng-app="tabsTest">
   <head>
-    <link rel="stylesheet" href="/dist/ionic.css">
-    <script src="/vendor/angular/1.2.0rc1/angular-1.2.0rc1.min.js"></script>
-    <script src="/ext/angular/src/ionicContent.js"></script>
-    <script src="/ext/angular/src/ionicTabBar.js"></script>
+    <meta charset="utf-8">
+    <title>Tab Bars</title>
+
+    <!-- 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="/vendor/angular/1.2.0rc2/angular-1.2.0rc2.min.js"></script>
+    <script src="/vendor/angular/1.2.0rc2/angular-touch.js"></script>
+    <style>
+      .content {
+        height: 100%;
+      }
+    </style>
   </head>
-  <body ng-app="ionic.ui.tabbar">
-    <tab-bar>
-      <tabs>
-        <tab-item active="true" text="Cats" icon="icon-default" />
-        <tab-item active="true" text="Cats" icon="icon-default" />
-        <tab-item active="true" text="Cats" icon="icon-default" />
-      </tabs>
-    </tab-bar>
+  <body>
+    <tab-controller>
+      <div title="Home" icon="icon-home" class="tab-content">
+        <header class="bar bar-header bar-dark">
+          <h1 class="title">Tab Bars</h1>
+        </header>
+        <content has-header="true" has-tabs="true">
+          <h1>Home</h1>
+          <ul class="list" ng-controller="HomeCtrl">
+            <a href="#" class="list-item" ng-repeat="item in items">
+              {{item.title}}
+            </a>
+          </ul>
+        </content>
+      </div>
+
+      <div 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>
+
+      <div 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>
+
+    <script src="TabBarController.js"></script>
+    <script src="TabAngular.js"></script>
+    <script>
+      angular.module('tabsTest', ['ionic.ui'])
+
+      .controller('HomeCtrl', function($scope) {
+        $scope.items = [];
+        for(var i = 0; i < 100; i++) {
+          $scope.items.push({
+            title: 'Item ' + i
+          });
+        }
+      })
+
+    </script>
   </body>
 </html>