Merge branch 'master' of https://github.com/driftyco/ionic

Conflicts:
	dist/css/ionic.css

dist/css/ionic.css

@@ -19,7 +19,7 @@
  * Utility Mixins
  * --------------------------------------------------
  */
-/*!
+/*
   Ionicons, v1.3.3
   Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
   https://twitter.com/helloimben  https://twitter.com/ionicframework
@@ -2061,7 +2061,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid #c0c0c0; }
+  border: 1px solid silver; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -4206,7 +4206,7 @@ input[type="checkbox"][readonly] {
     border-radius: 50%;
     background: white;
     content: ' ';
-    transition: background-color .1s ease-in-out; }
+    transition: background-color 0.1s ease-in-out; }
 
 /* the checkmark within the box */
 .checkbox input:after {
@@ -4221,7 +4221,7 @@ input[type="checkbox"][readonly] {
   border-right: 0;
   content: ' ';
   opacity: 0;
-  transition: opacity .05s ease-in-out;
+  transition: opacity 0.05s ease-in-out;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
@@ -4694,7 +4694,7 @@ input[type="range"] {
   .button-icon:active, .button-icon.active {
     background: none;
     box-shadow: none;
-    text-shadow: 0px 0px 10px #fff; }
+    text-shadow: 0px 0px 10px white; }
 
 .padding > .button.block:first-child {
   margin-top: 0; }

dist/css/themes/ionic-ios7.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * Button Mixins
  * --------------------------------------------------
@@ -138,7 +139,7 @@
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, .05s; }
+  transition-delay: 0s, 0.05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -153,4 +154,4 @@
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: .05s, 0s; }
+    transition-delay: 0.05s, 0s; }

dist/js/ionic-angular.js

@@ -27,6 +27,11 @@ angular.module('ionic.ui', [
 angular.module('ionic', [
     'ionic.service',
     'ionic.ui',
+    
+    // Angular deps
+    'ngAnimate',
+    'ngTouch',
+    'ngSanitize'
 ]);
 ;
 angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet', 'ngAnimate'])
@@ -637,11 +642,26 @@ angular.module('ionic.ui.header', ['ngAnimate'])
     restrict: 'E',
     replace: true,
     transclude: true,
-    template: '<header class="bar bar-header" ng-transclude></header>',
+    template: '<header class="bar bar-header">\
+                <div class="buttons">\
+                  <button ng-repeat="button in leftButtons" class="button" ng-class="button.type" ng-click="button.click($event, $index)" ng-bind-html="button.content">\
+                  </button>\
+                </div>\
+                <h1 class="title" ng-bind="title"></h1>\
+                <div class="buttons">\
+                  <button ng-repeat="button in rightButtons" class="button" ng-class="button.type" ng-click="button.click($event, $index)" ng-bind-html="button.content">\
+                  </button>\
+                </div>\
+              </header>',
+
     scope: {
+      leftButtons: '=',
+      rightButtons: '=',
+      title: '=',
       type: '@',
-      alignTitle: '@',
+      alignTitle: '@'
     },
+
     link: function($scope, $element, $attr) {
       var hb = new ionic.views.HeaderBar({
         el: $element[0],
@@ -652,6 +672,22 @@ angular.module('ionic.ui.header', ['ngAnimate'])
 
       $scope.headerBarView = hb;
 
+      $scope.$watch('leftButtons', function(val) {
+        // Resize the title since the buttons have changed
+        hb.align();
+      });
+
+      $scope.$watch('rightButtons', function(val) {
+        // Resize the title since the buttons have changed
+        hb.align();
+      });
+
+      $scope.$watch('title', function(val) {
+        // Resize the title since the title has changed
+        console.log('Title changed');
+        hb.align();
+      });
+
       $scope.$on('$destroy', function() {
         //
       });
@@ -1194,7 +1230,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
 
   $scope.sideMenuContentTranslateX = 0;
 
-  $scope.sideMenuCtrl = this;
+  $scope.sideMenuController = this;
 })
 
 .directive('sideMenu', function() {
@@ -1544,7 +1580,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
       };
     },
     template: 
-      '<a href="#" ng-class="{active:active}" ng-click="selectTab()" class="tab-item">' +
+      '<a ng-class="{active:active}" ng-click="selectTab()" class="tab-item">' +
         '<i ng-class="{{icon}}" ng-if="icon"></i>' +
         '<i class="{{iconOn}}" ng-if="active"></i>' +
         '<i class="{{iconOff}}" ng-if="!active"></i> {{title}}' +

dist/js/ionic.js

@@ -2943,7 +2943,6 @@ window.ionic = {
           title.style.left = margin + 'px';
           title.style.right = margin + 'px';
 
-          console.log(title.offsetWidth, title.scrollWidth);
           if(title.offsetWidth < title.scrollWidth) {
             title.style.textAlign = 'left';
             title.style.right = (rightWidth + 5) + 'px';

examples/demos/toderp2/js/controllers.js

@@ -26,7 +26,7 @@ angular.module('ionic.todo.controllers', ['ionic.todo'])
 
   $scope.loginForm = {
     email: 'ihasmax@gmail.com',
-    password: 'traintown'
+    password: ''
   };
 
   $scope.close = function() {
@@ -134,7 +134,7 @@ angular.module('ionic.todo.controllers', ['ionic.todo'])
 
   $scope.selectProject = function(project) {
     $scope.setActiveProject(project);
-    $scope.sideMenuCtrl.close();
+    $scope.sideMenuController.close();
   };
 
   /**
@@ -162,7 +162,7 @@ angular.module('ionic.todo.controllers', ['ionic.todo'])
     $scope.activeProject.title = newProject.title;
     $scope.activeProject.user_id = newProject.user_id;
 
-    $scope.sideMenuCtrl.close();
+    $scope.sideMenuController.close();
   };
 
   $scope.deleteProject = function(project) {

examples/starters/weather/directives.js

@@ -25,7 +25,11 @@ angular.module('ionic.weather.directives', [])
     replace: true,
     transclude: true,
     template: '<div id="small-weather" ng-transclude></div>',
-    link: function($scope, $element, $attr) {
+
+    compile: function(element, attr) {
+      console.log('SMALL COMPILED');
+      return function($scope, $element, $attr) {
+      console.log('SMALL LINKED');
 
       // Delay so we are in the DOM and can calculate sizes
       $timeout(function() {
@@ -38,6 +42,7 @@ angular.module('ionic.weather.directives', [])
           angular.element(document.querySelector('.content')).css('-webkit-overflow-scrolling', 'touch');
         }, 50);
       });
+      }
     }
   }
 })

examples/starters/weather/index.html

@@ -9,10 +9,11 @@
 
     <link rel="stylesheet" href="weather.css">
 
-    <script src="/vendor/angular/angular-1.2.0rc2.min.js"></script>
-    <script src="/vendor/angular/angular-touch.js"></script>
-    <script src="/vendor/angular/angular-animate.js"></script>
-    <script src="/vendor/angular/angular-resource.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-touch.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.js"></script>
+
     <script src="/dist/js/ionic.js"></script>
     <script src="/dist/js/ionic-angular.js"></script>
 
@@ -20,6 +21,7 @@
     <script src="directives.js"></script>
     <script src="app.js"></script>
   </head>
+
   <body ng-controller="WeatherCtrl">
     <div id="bg-image" ng-style="getActiveBackgroundImage()"></div>
 

js/ext/angular/src/directive/ionicHeader.js

@@ -9,11 +9,26 @@ angular.module('ionic.ui.header', ['ngAnimate'])
     restrict: 'E',
     replace: true,
     transclude: true,
-    template: '<header class="bar bar-header" ng-transclude></header>',
+    template: '<header class="bar bar-header">\
+                <div class="buttons">\
+                  <button ng-repeat="button in leftButtons" class="button" ng-class="button.type" ng-click="button.click($event, $index)" ng-bind-html="button.content">\
+                  </button>\
+                </div>\
+                <h1 class="title" ng-bind="title"></h1>\
+                <div class="buttons">\
+                  <button ng-repeat="button in rightButtons" class="button" ng-class="button.type" ng-click="button.click($event, $index)" ng-bind-html="button.content">\
+                  </button>\
+                </div>\
+              </header>',
+
     scope: {
+      leftButtons: '=',
+      rightButtons: '=',
+      title: '=',
       type: '@',
-      alignTitle: '@',
+      alignTitle: '@'
     },
+
     link: function($scope, $element, $attr) {
       var hb = new ionic.views.HeaderBar({
         el: $element[0],
@@ -24,6 +39,22 @@ angular.module('ionic.ui.header', ['ngAnimate'])
 
       $scope.headerBarView = hb;
 
+      $scope.$watch('leftButtons', function(val) {
+        // Resize the title since the buttons have changed
+        hb.align();
+      });
+
+      $scope.$watch('rightButtons', function(val) {
+        // Resize the title since the buttons have changed
+        hb.align();
+      });
+
+      $scope.$watch('title', function(val) {
+        // Resize the title since the title has changed
+        console.log('Title changed');
+        hb.align();
+      });
+
       $scope.$on('$destroy', function() {
         //
       });

js/ext/angular/src/directive/ionicSideMenu.js

@@ -33,7 +33,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
 
   $scope.sideMenuContentTranslateX = 0;
 
-  $scope.sideMenuCtrl = this;
+  $scope.sideMenuController = this;
 })
 
 .directive('sideMenu', function() {

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

@@ -152,7 +152,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
       };
     },
     template: 
-      '<a href="#" ng-class="{active:active}" ng-click="selectTab()" class="tab-item">' +
+      '<a ng-class="{active:active}" ng-click="selectTab()" class="tab-item">' +
         '<i ng-class="{{icon}}" ng-if="icon"></i>' +
         '<i class="{{iconOn}}" ng-if="active"></i>' +
         '<i class="{{iconOff}}" ng-if="!active"></i> {{title}}' +

js/ext/angular/src/ionicAngular.js

@@ -27,4 +27,9 @@ angular.module('ionic.ui', [
 angular.module('ionic', [
     'ionic.service',
     'ionic.ui',
+    
+    // Angular deps
+    'ngAnimate',
+    'ngTouch',
+    'ngSanitize'
 ]);

js/ext/angular/test/directive/ionicSideMenu.unit.js

@@ -13,6 +13,6 @@ describe('Ionic Angular Side Menu', function() {
 
   it('Should init', function() {
     var scope = el.scope();
-    expect(scope.sideMenuCtrl).not.toBe(undefined);
+    expect(scope.sideMenuController).not.toBe(undefined);
   });
 });

js/ext/angular/test/header.html

@@ -9,16 +9,34 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-touch.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-sanitize.js"></script>
   </head>
-  <body>
-    <header-bar type="bar-primary" align-title="left">
-      <button class="button">Tap</button>
-      <h1 class="title">A really really long title here here here here her</h1>
-    </header-bar>
+  <body ng-controller="TestCtrl">
+    <header-bar
+      title="headerTitle"
+      left-buttons="leftButtons"
+      right-buttons="rightButtons"
+      type="bar-primary"></header-bar>
+
+    <content has-header="true">
+      <input type="text" ng-model="headerTitle">
+    </content>
     <script src="../../../../dist/js/ionic.js"></script>
     <script src="../../../../dist/js/ionic-angular.js"></script>
     <script>
-      angular.module('headerTest', ['ionic']);
+      angular.module('headerTest', ['ionic'])
+
+      .controller('TestCtrl', function($scope) {
+        $scope.headerTitle = 'A really long title here';
+        $scope.leftButtons = [
+          { 
+            text: 'Hello',
+            click: function(e) {
+              console.log('Click button');
+            }
+          }
+        ]
+      });
       var midPoint = window.clientWidth / 2;
       var box = document.createElement('div');
       box.style.backgroundColor = 'red';

js/ext/angular/test/modal.html

@@ -6,15 +6,16 @@
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <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>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-touch.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-sanitize.js"></script>
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
   </head>
   <body>
     <pane ng-controller="ModalCtrl">
-        <header-bar type="bar-positive">
-          <h1 class="title">Contacts</h1>
-          <button class="button button-icon" ng-click="openModal()"><i class="icon ion-compose"></i></button>
+        <header-bar type="bar-positive" title="'Contacts'" right-buttons="contactsRightButtons">
         </header-bar>
         <content has-header="true">
           <list>
@@ -53,8 +54,6 @@
       </div>
     </script>
 
-    <script src="../../../../dist/js/ionic.js"></script>
-    <script src="../../../../dist/js/ionic-angular.js"></script>
     <script>
       angular.module('modalTest', ['ionic'])
 
@@ -64,6 +63,15 @@
           { name: 'Barney Calhoun' },
           { name: 'Lamarr the Headcrab' },
         ];
+        $scope.contactsRightButtons = [
+          {
+            type: 'button-icon',
+            content: '<i class="icon ion-compose"></i>',
+            click: function(e) {
+              $scope.openModal();
+            }
+          }
+        ];
         $scope.openModal = function() {
           $scope.modal.show();
         };

js/ext/angular/test/navTest.html

@@ -0,0 +1,60 @@
+<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/css/ionic.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-touch.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+  </head>
+  <body>
+
+    <navs>
+      <nav-bar type="bar-primary" back-button-type="button-pure">
+      </nav-bar>
+
+      <div ng-controller="AppCtrl">
+        <content has-header="true">
+        </content>
+      </div>
+    </navs>
+
+    <script id="page.html" type="text/ng-template">
+      <div title="Home home" ng-controller="CatsCtrl" class="nav-content">
+        <h1></h1>
+        <button class="button button-success" ng-click="goNext()">Next</button>
+        <list><list-item ng-repeat="item in items" on-select="goNext()">Test</list-item></list>
+      </div>
+    </script>
+
+    <script>
+      angular.module('navTest', ['ionic', 'ngAnimate'])
+
+      .controller('AppCtrl', function($scope) {
+        $scope.navController.pushFromTemplate('page.html');
+      })
+
+      .controller('CatsCtrl', function($scope, $compile, $element) {
+        
+
+        $scope.$on('navContent.shown', function() {
+          console.log('SHOWN');
+        });
+        $scope.$on('navContent.hidden', function() {
+          console.log('HIDDEN');
+        });
+
+        $scope.goNext = function() {
+          $scope.navController.pushFromTemplate('page.html');
+        };
+      });
+    </script>
+  </body>
+</html>
+

js/ext/angular/test/sideMenu.html

@@ -63,7 +63,7 @@
           });
         }
         $scope.openLeft = function() {
-          $scope.sideMenuCtrl.toggleLeft();
+          $scope.sideMenuController.toggleLeft();
         };
       });
     </script>

js/ext/angular/test/tabs.html

@@ -51,11 +51,11 @@
     <tabs
           animation="fade-in-out" 
           tabs-type="tabs-icon-only"
-          tabs-style="tabs-primary"
+          tabs-style="tabs-positive"
           controller-changed="onControllerChanged(oldController, oldIndex, newController, newIndex)">
 
       <tab title="Home" icon-on="icon ion-ios7-filing" icon-off="icon ion-ios7-filing-outline" ng-controller="HomeCtrl">
-        <header class="bar bar-header bar-secondary">
+        <header class="bar bar-header bar-positive">
           <button class="button button-clear button-primary" ng-click="newTask()">New</button>
           <h1 class="title">Tasks</h1>
           <button class="button button-clear button-primary" ng-click="isEditingItems = !isEditingItems">Edit</button>
@@ -85,7 +85,7 @@
       </tab>
 
       <tab title="About" icon-on="icon ion-ios7-clock" icon-off="icon ion-ios7-clock-outline">
-        <header class="bar bar-header bar-secondary">
+        <header class="bar bar-header bar-positive">
           <h1 class="title">Deadlines</h1>
         </header>
         <content has-header="true" has-tabs="true">
@@ -94,7 +94,7 @@
       </tab>
 
       <tab title="Settings" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline">
-        <header class="bar bar-header bar-secondary">
+        <header class="bar bar-header bar-positive">
           <h1 class="title">Settings</h1>
         </header>
         <content has-header="true" has-tabs="true">

js/views/headerBarView.js

@@ -79,7 +79,6 @@
           title.style.left = margin + 'px';
           title.style.right = margin + 'px';
 
-          console.log(title.offsetWidth, title.scrollWidth);
           if(title.offsetWidth < title.scrollWidth) {
             title.style.textAlign = 'left';
             title.style.right = (rightWidth + 5) + 'px';