mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
146 lines
4.3 KiB
JavaScript
146 lines
4.3 KiB
JavaScript
|
|
IonicModule
|
|
.directive('ionNavBar', tapScrollToTopDirective())
|
|
.directive('ionHeaderBar', tapScrollToTopDirective())
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ionHeaderBar
|
|
* @module ionic
|
|
* @restrict E
|
|
*
|
|
* @description
|
|
* Adds a fixed header bar above some content.
|
|
*
|
|
* Can also be a subheader (lower down) if the 'bar-subheader' class is applied.
|
|
* See [the header CSS docs](/docs/components/#subheader).
|
|
*
|
|
* @param {string=} align-title Where to align the title.
|
|
* Avaialble: 'left', 'right', or 'center'. Defaults to 'center'.
|
|
*
|
|
* @usage
|
|
* ```html
|
|
* <ion-header-bar align-title="left" class="bar-positive">
|
|
* <div class="buttons">
|
|
* <button class="button" ng-click="doSomething()">Left Button</button>
|
|
* </div>
|
|
* <h1 class="title">Title!</h1>
|
|
* <div class="buttons">
|
|
* <button class="button">Right Button</button>
|
|
* </div>
|
|
* </ion-header-bar>
|
|
* <ion-content>
|
|
* Some content!
|
|
* </ion-content>
|
|
* ```
|
|
*/
|
|
.directive('ionHeaderBar', headerFooterBarDirective(true))
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ionFooterBar
|
|
* @module ionic
|
|
* @restrict E
|
|
*
|
|
* @description
|
|
* Adds a fixed footer bar below some content.
|
|
*
|
|
* Can also be a subfooter (higher up) if the 'bar-subfooter' class is applied.
|
|
* See [the footer CSS docs](/docs/components/#footer).
|
|
*
|
|
* @param {string=} align-title Where to align the title.
|
|
* Avaialble: 'left', 'right', or 'center'. Defaults to 'center'.
|
|
*
|
|
* @usage
|
|
* ```html
|
|
* <ion-content>
|
|
* Some content!
|
|
* </ion-content>
|
|
* <ion-footer-bar align-title="left" class="bar-assertive">
|
|
* <div class="buttons">
|
|
* <button class="button">Left Button</button>
|
|
* </div>
|
|
* <h1 class="title">Title!</h1>
|
|
* <div class="buttons" ng-click="doSomething()">
|
|
* <button class="button">Right Button</button>
|
|
* </div>
|
|
* </ion-footer-bar>
|
|
* ```
|
|
*/
|
|
.directive('ionFooterBar', headerFooterBarDirective(false));
|
|
|
|
function tapScrollToTopDirective() {
|
|
return ['$ionicScrollDelegate', function($ionicScrollDelegate) {
|
|
return {
|
|
restrict: 'E',
|
|
link: function($scope, $element, $attr) {
|
|
ionic.on('tap', onTap, $element[0]);
|
|
$scope.$on('$destroy', function() {
|
|
ionic.off('tap', onTap, $element[0]);
|
|
});
|
|
|
|
function onTap(e) {
|
|
if (ionic.DomUtil.getParentOrSelfWithClass(e.target, 'button', 4)) {
|
|
return;
|
|
}
|
|
var touch = e.gesture && e.gesture.touches[0] || e.detail.touches[0];
|
|
var bounds = $element[0].getBoundingClientRect();
|
|
if (ionic.DomUtil.rectContains(
|
|
touch.pageX, touch.pageY,
|
|
bounds.left, bounds.top - 20,
|
|
bounds.left + bounds.width, bounds.top + bounds.height
|
|
)) {
|
|
$ionicScrollDelegate.scrollTop(true);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}];
|
|
}
|
|
|
|
function headerFooterBarDirective(isHeader) {
|
|
return [function() {
|
|
return {
|
|
restrict: 'E',
|
|
compile: function($element, $attr) {
|
|
$element.addClass(isHeader ? 'bar bar-header' : 'bar bar-footer');
|
|
|
|
return { pre: prelink };
|
|
function prelink($scope, $element, $attr) {
|
|
var hb = new ionic.views.HeaderBar({
|
|
el: $element[0],
|
|
alignTitle: $attr.alignTitle || 'center'
|
|
});
|
|
|
|
var el = $element[0];
|
|
//just incase header is on rootscope
|
|
var parentScope = $scope.$parent || $scope;
|
|
|
|
if (isHeader) {
|
|
$scope.$watch(function() { return el.className; }, function(value) {
|
|
var isSubheader = value.indexOf('bar-subheader') !== -1;
|
|
parentScope.$hasHeader = !isSubheader;
|
|
parentScope.$hasSubheader = isSubheader;
|
|
});
|
|
$scope.$on('$destroy', function() {
|
|
parentScope.$hasHeader = parentScope.$hasSubheader = null;
|
|
});
|
|
} else {
|
|
$scope.$watch(function() { return el.className; }, function(value) {
|
|
var isSubfooter = value.indexOf('bar-subfooter') !== -1;
|
|
parentScope.$hasFooter = !isSubfooter;
|
|
parentScope.$hasSubfooter = isSubfooter;
|
|
});
|
|
$scope.$on('$destroy', function() {
|
|
parentScope.$hasFooter = parentScope.$hasSubfooter = null;
|
|
});
|
|
$scope.$watch('$hasTabs', function(val) {
|
|
$element.toggleClass('has-tabs', !!val);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}];
|
|
}
|