diff --git a/js/ext/angular/src/directive/ionicHeader.js b/js/ext/angular/src/directive/ionicHeader.js new file mode 100644 index 0000000000..ef72aa721f --- /dev/null +++ b/js/ext/angular/src/directive/ionicHeader.js @@ -0,0 +1,34 @@ +(function(ionic) { +'use strict'; + +angular.module('ionic.ui.header', ['ngAnimate']) + + +.directive('headerBar', function() { + return { + restrict: 'E', + replace: true, + transclude: true, + template: '
', + scope: { + type: '@', + alignTitle: '@', + }, + link: function($scope, $element, $attr) { + var hb = new ionic.views.HeaderBar({ + el: $element[0], + alignTitle: $scope.alignTitle || 'center' + }); + + $element.addClass($scope.type); + + $scope.headerBarView = hb; + + $scope.$on('$destroy', function() { + // + }); + } + }; +}); + +})(ionic); diff --git a/js/ext/angular/src/directive/ionicList.js b/js/ext/angular/src/directive/ionicList.js index 64e84b8080..9a693ea1d9 100644 --- a/js/ext/angular/src/directive/ionicList.js +++ b/js/ext/angular/src/directive/ionicList.js @@ -110,11 +110,11 @@ angular.module('ionic.ui.list', ['ngAnimate']) hasPullToRefresh: ($scope.hasPullToRefresh !== 'false'), onRefresh: function() { $scope.onRefresh(); - $scope.$parent.$broadcast('onRefresh'); + $scope.$parent.$broadcast('scroll.onRefresh'); }, onRefreshOpening: function(amt) { $scope.onRefreshOpening({amount: amt}); - $scope.$parent.$broadcast('onRefreshOpening', amt); + $scope.$parent.$broadcast('scroll.onRefreshOpening', amt); } }); diff --git a/js/ext/angular/src/directive/ionicNav.js b/js/ext/angular/src/directive/ionicNav.js index c588d4f77c..efab4025d7 100644 --- a/js/ext/angular/src/directive/ionicNav.js +++ b/js/ext/angular/src/directive/ionicNav.js @@ -32,6 +32,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges // Pop function, throttled this.popController = ionic.throttle(function() { _this.pop(); + $scope.$broadcast('navs.pop'); }, 300, { trailing: false }); @@ -79,6 +80,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges */ $scope.pushController = function(scope, element) { _this.push(scope); + $scope.$broadcast('navs.push', scope); }; $scope.navController = this; @@ -105,22 +107,46 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges restrict: 'E', require: '^navs', replace: true, - scope: true, + scope: { + type: '@', + backButtonType: '@', + alignTitle: '@' + }, template: '
' + - 'Back' + + '' + '

{{navController.getTopController().title}}

' + '
', - link: function(scope, element, attrs, navCtrl) { - scope.navController = navCtrl; + link: function($scope, $element, $attr, navCtrl) { + var backButton; - scope.barType = attrs.barType || 'bar-dark'; - element.addClass(scope.barType); + $scope.navController = navCtrl; - scope.$watch('navController.controllers.length', function(value) { - }); - scope.goBack = function() { + $scope.goBack = function() { navCtrl.popController(); }; + + + var hb = new ionic.views.HeaderBar({ + el: $element[0], + alignTitle: $scope.alignTitle || 'center' + }); + + $element.addClass($scope.type); + + $scope.headerBarView = hb; + + $scope.$parent.$on('navs.push', function() { + backButton = angular.element($element[0].querySelector('.button')); + backButton.addClass($scope.backButtonType); + hb.align(); + }); + $scope.$parent.$on('navs.pop', function() { + hb.align(); + }); + + $scope.$on('$destroy', function() { + // + }); } }; }) diff --git a/js/ext/angular/src/ionicAngular.js b/js/ext/angular/src/ionicAngular.js index 98a56c8fd9..0a3f1360d3 100644 --- a/js/ext/angular/src/ionicAngular.js +++ b/js/ext/angular/src/ionicAngular.js @@ -16,6 +16,7 @@ angular.module('ionic.ui', [ 'ionic.ui.content', 'ionic.ui.tabs', 'ionic.ui.nav', + 'ionic.ui.header', 'ionic.ui.sideMenu', 'ionic.ui.list', 'ionic.ui.checkbox', diff --git a/js/ext/angular/src/service/ionicActionSheet.js b/js/ext/angular/src/service/ionicActionSheet.js index 1c9db95766..38bee26b91 100644 --- a/js/ext/angular/src/service/ionicActionSheet.js +++ b/js/ext/angular/src/service/ionicActionSheet.js @@ -1,6 +1,8 @@ -angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet']) +angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet', 'ngAnimate']) + +.factory('ActionSheet', ['$rootScope', '$document', '$compile', '$animate', '$timeout', 'TemplateLoader', + function($rootScope, $document, $compile, $animate, $timeout, TemplateLoader) { -.factory('ActionSheet', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) { return { /** * Load an action sheet with the given template string. @@ -10,23 +12,41 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni * * @param {object} opts the options for this ActionSheet (see docs) */ - show: function(opts, $scope) { - var scope = $scope && $scope.$new() || $rootScope.$new(true); + show: function(opts) { + var scope = $rootScope.$new(true); angular.extend(scope, opts); + + // Compile the template + var element = $compile('')(scope); + + // Grab the sheet element for animation + var sheetEl = angular.element(element[0].querySelector('.action-sheet')); + + var hideSheet = function(didCancel) { + $animate.leave(sheetEl, function() { + if(didCancel) { + opts.cancel(); + } + }); + + $timeout(function() { + $animate.removeClass(element, 'active', function() { + scope.$destroy(); + }); + }); + }; + scope.cancel = function() { - scope.sheet.hide(); - //scope.$destroy(); - opts.cancel(); + hideSheet(true); }; scope.buttonClicked = function(index) { // Check if the button click event returned true, which means // we can close the action sheet if((opts.buttonClicked && opts.buttonClicked(index)) === true) { - scope.sheet.hide(); - //scope.$destroy(); + hideSheet(false); } }; @@ -34,24 +54,21 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni // Check if the destructive button click event returned true, which means // we can close the action sheet if((opts.destructiveButtonClicked && opts.destructiveButtonClicked()) === true) { - scope.sheet.hide(); - //scope.$destroy(); + hideSheet(false); } }; - // Compile the template - var element = $compile('')(scope); - - var s = element.scope(); - $document[0].body.appendChild(element[0]); var sheet = new ionic.views.ActionSheet({el: element[0] }); - s.sheet = sheet; + scope.sheet = sheet; - sheet.show(); + $animate.addClass(element, 'active'); + $animate.enter(sheetEl, element, function() { + }); return sheet; } }; + }]); diff --git a/js/ext/angular/test/actionSheet.html b/js/ext/angular/test/actionSheet.html new file mode 100644 index 0000000000..9c5d18bf1c --- /dev/null +++ b/js/ext/angular/test/actionSheet.html @@ -0,0 +1,162 @@ + + + + Action Sheet + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + diff --git a/js/ext/angular/test/header.html b/js/ext/angular/test/header.html new file mode 100644 index 0000000000..36b105b4ed --- /dev/null +++ b/js/ext/angular/test/header.html @@ -0,0 +1,40 @@ + + + + Header + + + + + + + + + + + +

A really really long title here here here here her

+ + + + + + diff --git a/js/ext/angular/test/nav.html b/js/ext/angular/test/nav.html index 2be7571a69..0f4f4c0a0c 100644 --- a/js/ext/angular/test/nav.html +++ b/js/ext/angular/test/nav.html @@ -32,16 +32,17 @@ - + + -
- - -
+
+ + +