');
headerBarEle.append(rightButtonsEle);
}
if (itemType == SECONDARY_BUTTONS) {
rightButtonsEle.append(ele);
} else {
rightButtonsEle.prepend(ele);
}
} else {
// left side
if (!leftButtonsEle) {
leftButtonsEle = jqLite('
');
if (navEle[BACK_BUTTON]) {
navEle[BACK_BUTTON].after(leftButtonsEle);
} else {
headerBarEle.prepend(leftButtonsEle);
}
}
if (itemType == SECONDARY_BUTTONS) {
leftButtonsEle.append(ele);
} else {
leftButtonsEle.prepend(ele);
}
}
}
headerBars.push(headerBarInstance);
return headerBarInstance;
};
self.navElement = function(type, html) {
if (isDefined(html)) {
navElementHtml[type] = html;
}
return navElementHtml[type];
};
self.update = function(viewData) {
var showNavBar = !viewData.hasHeaderBar && viewData.showNavBar;
viewData.transition = $ionicConfig.views.transition();
if (!showNavBar) {
viewData.direction = 'none';
}
self.enable(showNavBar);
var enteringHeaderBar = self.isInitialized ? getOffScreenHeaderBar() : getOnScreenHeaderBar();
var leavingHeaderBar = self.isInitialized ? getOnScreenHeaderBar() : null;
var enteringHeaderCtrl = enteringHeaderBar.controller();
// update if the entering header should show the back button or not
enteringHeaderCtrl.enableBack(viewData.enableBack, true);
enteringHeaderCtrl.showBack(viewData.showBack, true);
enteringHeaderCtrl.updateBackButton();
// update the entering header bar's title
self.title(viewData.title, enteringHeaderBar);
self.showBar(showNavBar);
// update the nav bar items, depending if the view has their own or not
if (viewData.navBarItems) {
forEach(ITEM_TYPES, function(itemType) {
enteringHeaderBar.setItem(viewData.navBarItems[itemType], itemType);
});
}
// begin transition of entering and leaving header bars
self.transition(enteringHeaderBar, leavingHeaderBar, viewData);
self.isInitialized = true;
navSwipeAttr('');
};
self.transition = function(enteringHeaderBar, leavingHeaderBar, viewData) {
var enteringHeaderBarCtrl = enteringHeaderBar.controller();
var transitionFn = $ionicConfig.transitions.navBar[viewData.navBarTransition] || $ionicConfig.transitions.navBar.none;
var transitionId = viewData.transitionId;
enteringHeaderBarCtrl.beforeEnter(viewData);
var navBarTransition = transitionFn(enteringHeaderBar, leavingHeaderBar, viewData.direction, viewData.shouldAnimate && self.isInitialized);
ionic.DomUtil.cachedAttr($element, 'nav-bar-transition', viewData.navBarTransition);
ionic.DomUtil.cachedAttr($element, 'nav-bar-direction', viewData.direction);
if (navBarTransition.shouldAnimate && viewData.renderEnd) {
navBarAttr(enteringHeaderBar, 'stage');
} else {
navBarAttr(enteringHeaderBar, 'entering');
navBarAttr(leavingHeaderBar, 'leaving');
}
enteringHeaderBarCtrl.resetBackButton(viewData);
navBarTransition.run(0);
self.activeTransition = {
run: function(step) {
navBarTransition.shouldAnimate = false;
navBarTransition.direction = 'back';
navBarTransition.run(step);
},
cancel: function(shouldAnimate, speed, cancelData) {
navSwipeAttr(speed);
navBarAttr(leavingHeaderBar, 'active');
navBarAttr(enteringHeaderBar, 'cached');
navBarTransition.shouldAnimate = shouldAnimate;
navBarTransition.run(0);
self.activeTransition = navBarTransition = null;
var runApply;
if (cancelData.showBar !== self.showBar()) {
self.showBar(cancelData.showBar);
}
if (cancelData.showBackButton !== self.showBackButton()) {
self.showBackButton(cancelData.showBackButton);
}
if (runApply) {
$scope.$apply();
}
},
complete: function(shouldAnimate, speed) {
navSwipeAttr(speed);
navBarTransition.shouldAnimate = shouldAnimate;
navBarTransition.run(1);
queuedTransitionEnd = transitionEnd;
}
};
$timeout(enteringHeaderBarCtrl.align, 16);
queuedTransitionStart = function() {
if (latestTransitionId !== transitionId) return;
navBarAttr(enteringHeaderBar, 'entering');
navBarAttr(leavingHeaderBar, 'leaving');
navBarTransition.run(1);
queuedTransitionEnd = function() {
if (latestTransitionId == transitionId || !navBarTransition.shouldAnimate) {
transitionEnd();
}
};
queuedTransitionStart = null;
};
function transitionEnd() {
for (var x = 0; x < headerBars.length; x++) {
headerBars[x].isActive = false;
}
enteringHeaderBar.isActive = true;
navBarAttr(enteringHeaderBar, 'active');
navBarAttr(leavingHeaderBar, 'cached');
self.activeTransition = navBarTransition = queuedTransitionEnd = null;
}
queuedTransitionStart();
};
self.triggerTransitionStart = function(triggerTransitionId) {
latestTransitionId = triggerTransitionId;
queuedTransitionStart && queuedTransitionStart();
};
self.triggerTransitionEnd = function() {
queuedTransitionEnd && queuedTransitionEnd();
};
self.showBar = function(shouldShow) {
if (arguments.length) {
self.visibleBar(shouldShow);
$scope.$parent.$hasHeader = !!shouldShow;
}
return !!$scope.$parent.$hasHeader;
};
self.visibleBar = function(shouldShow) {
if (shouldShow && !isVisible) {
$element.removeClass(CSS_HIDE);
self.align();
} else if (!shouldShow && isVisible) {
$element.addClass(CSS_HIDE);
}
isVisible = shouldShow;
};
self.enable = function(val) {
// set primary to show first
self.visibleBar(val);
// set non primary to hide second
for (var x = 0; x < $ionicNavBarDelegate._instances.length; x++) {
if ($ionicNavBarDelegate._instances[x] !== self) $ionicNavBarDelegate._instances[x].visibleBar(false);
}
};
/**
* @ngdoc method
* @name $ionicNavBar#showBackButton
* @description Show/hide the nav bar back button when there is a
* back view. If the back button is not possible, for example, the
* first view in the stack, then this will not force the back button
* to show.
*/
self.showBackButton = function(shouldShow) {
if (arguments.length) {
for (var x = 0; x < headerBars.length; x++) {
headerBars[x].controller().showNavBack(!!shouldShow);
}
$scope.$isBackButtonShown = !!shouldShow;
}
return $scope.$isBackButtonShown;
};
/**
* @ngdoc method
* @name $ionicNavBar#showActiveBackButton
* @description Show/hide only the active header bar's back button.
*/
self.showActiveBackButton = function(shouldShow) {
var headerBar = getOnScreenHeaderBar();
if (headerBar) {
if (arguments.length) {
return headerBar.controller().showBack(shouldShow);
}
return headerBar.controller().showBack();
}
};
self.title = function(newTitleText, headerBar) {
if (isDefined(newTitleText)) {
newTitleText = newTitleText || '';
headerBar = headerBar || getOnScreenHeaderBar();
headerBar && headerBar.title(newTitleText);
$scope.$title = newTitleText;
$ionicHistory.currentTitle(newTitleText);
}
return $scope.$title;
};
self.align = function(val, headerBar) {
headerBar = headerBar || getOnScreenHeaderBar();
headerBar && headerBar.controller().align(val);
};
self.hasTabsTop = function(isTabsTop) {
$element[isTabsTop ? 'addClass' : 'removeClass']('nav-bar-tabs-top');
};
self.hasBarSubheader = function(isBarSubheader) {
$element[isBarSubheader ? 'addClass' : 'removeClass']('nav-bar-has-subheader');
};
// DEPRECATED, as of v1.0.0-beta14 -------
self.changeTitle = function(val) {
deprecatedWarning('changeTitle(val)', 'title(val)');
self.title(val);
};
self.setTitle = function(val) {
deprecatedWarning('setTitle(val)', 'title(val)');
self.title(val);
};
self.getTitle = function() {
deprecatedWarning('getTitle()', 'title()');
return self.title();
};
self.back = function() {
deprecatedWarning('back()', '$ionicHistory.goBack()');
$ionicHistory.goBack();
};
self.getPreviousTitle = function() {
deprecatedWarning('getPreviousTitle()', '$ionicHistory.backTitle()');
$ionicHistory.goBack();
};
function deprecatedWarning(oldMethod, newMethod) {
var warn = console.warn || console.log;
warn && warn.call(console, 'navBarController.' + oldMethod + ' is deprecated, please use ' + newMethod + ' instead');
}
// END DEPRECATED -------
function createNavElement(type) {
if (navElementHtml[type]) {
return jqLite(navElementHtml[type]);
}
}
function getOnScreenHeaderBar() {
for (var x = 0; x < headerBars.length; x++) {
if (headerBars[x].isActive) return headerBars[x];
}
}
function getOffScreenHeaderBar() {
for (var x = 0; x < headerBars.length; x++) {
if (!headerBars[x].isActive) return headerBars[x];
}
}
function navBarAttr(ctrl, val) {
ctrl && ionic.DomUtil.cachedAttr(ctrl.containerEle(), 'nav-bar', val);
}
function navSwipeAttr(val) {
ionic.DomUtil.cachedAttr($element, 'nav-swipe', val);
}
$scope.$on('$destroy', function() {
$scope.$parent.$hasHeader = false;
$element.parent().removeData(DATA_NAV_BAR_CTRL);
for (var x = 0; x < headerBars.length; x++) {
headerBars[x].destroy();
}
$element.remove();
$element = headerBars = null;
deregisterInstance();
});
}]);
IonicModule
.controller('$ionicNavView', [
'$scope',
'$element',
'$attrs',
'$compile',
'$controller',
'$ionicNavBarDelegate',
'$ionicNavViewDelegate',
'$ionicHistory',
'$ionicViewSwitcher',
'$ionicConfig',
'$ionicScrollDelegate',
'$ionicSideMenuDelegate',
function($scope, $element, $attrs, $compile, $controller, $ionicNavBarDelegate, $ionicNavViewDelegate, $ionicHistory, $ionicViewSwitcher, $ionicConfig, $ionicScrollDelegate, $ionicSideMenuDelegate) {
var DATA_ELE_IDENTIFIER = '$eleId';
var DATA_DESTROY_ELE = '$destroyEle';
var DATA_NO_CACHE = '$noCache';
var VIEW_STATUS_ACTIVE = 'active';
var VIEW_STATUS_CACHED = 'cached';
var self = this;
var direction;
var isPrimary = false;
var navBarDelegate;
var activeEleId;
var navViewAttr = $ionicViewSwitcher.navViewAttr;
var disableRenderStartViewId, disableAnimation;
self.scope = $scope;
self.element = $element;
self.init = function() {
var navViewName = $attrs.name || '';
// Find the details of the parent view directive (if any) and use it
// to derive our own qualified view name, then hang our own details
// off the DOM so child directives can find it.
var parent = $element.parent().inheritedData('$uiView');
var parentViewName = ((parent && parent.state) ? parent.state.name : '');
if (navViewName.indexOf('@') < 0) navViewName = navViewName + '@' + parentViewName;
var viewData = { name: navViewName, state: null };
$element.data('$uiView', viewData);
var deregisterInstance = $ionicNavViewDelegate._registerInstance(self, $attrs.delegateHandle);
$scope.$on('$destroy', function() {
deregisterInstance();
// ensure no scrolls have been left frozen
if (self.isSwipeFreeze) {
$ionicScrollDelegate.freezeAllScrolls(false);
}
});
$scope.$on('$ionicHistory.deselect', self.cacheCleanup);
$scope.$on('$ionicTabs.top', onTabsTop);
$scope.$on('$ionicSubheader', onBarSubheader);
$scope.$on('$ionicTabs.beforeLeave', onTabsLeave);
$scope.$on('$ionicTabs.afterLeave', onTabsLeave);
$scope.$on('$ionicTabs.leave', onTabsLeave);
ionic.Platform.ready(function() {
if ( ionic.Platform.isWebView() && ionic.Platform.isIOS() ) {
self.initSwipeBack();
}
});
return viewData;
};
self.register = function(viewLocals) {
var leavingView = extend({}, $ionicHistory.currentView());
// register that a view is coming in and get info on how it should transition
var registerData = $ionicHistory.register($scope, viewLocals);
// update which direction
self.update(registerData);
// begin rendering and transitioning
var enteringView = $ionicHistory.getViewById(registerData.viewId) || {};
var renderStart = (disableRenderStartViewId !== registerData.viewId);
self.render(registerData, viewLocals, enteringView, leavingView, renderStart, true);
};
self.update = function(registerData) {
// always reset that this is the primary navView
isPrimary = true;
// remember what direction this navView should use
// this may get updated later by a child navView
direction = registerData.direction;
var parentNavViewCtrl = $element.parent().inheritedData('$ionNavViewController');
if (parentNavViewCtrl) {
// this navView is nested inside another one
// update the parent to use this direction and not
// the other it originally was set to
// inform the parent navView that it is not the primary navView
parentNavViewCtrl.isPrimary(false);
if (direction === 'enter' || direction === 'exit') {
// they're entering/exiting a history
// find parent navViewController
parentNavViewCtrl.direction(direction);
if (direction === 'enter') {
// reset the direction so this navView doesn't animate
// because it's parent will
direction = 'none';
}
}
}
};
self.render = function(registerData, viewLocals, enteringView, leavingView, renderStart, renderEnd) {
// register the view and figure out where it lives in the various
// histories and nav stacks, along with how views should enter/leave
var switcher = $ionicViewSwitcher.create(self, viewLocals, enteringView, leavingView, renderStart, renderEnd);
// init the rendering of views for this navView directive
switcher.init(registerData, function() {
// the view is now compiled, in the dom and linked, now lets transition the views.
// this uses a callback incase THIS nav-view has a nested nav-view, and after the NESTED
// nav-view links, the NESTED nav-view would update which direction THIS nav-view should use
// kick off the transition of views
switcher.transition(self.direction(), registerData.enableBack, !disableAnimation);
// reset private vars for next time
disableRenderStartViewId = disableAnimation = null;
});
};
self.beforeEnter = function(transitionData) {
if (isPrimary) {
// only update this nav-view's nav-bar if this is the primary nav-view
navBarDelegate = transitionData.navBarDelegate;
var associatedNavBarCtrl = getAssociatedNavBarCtrl();
associatedNavBarCtrl && associatedNavBarCtrl.update(transitionData);
navSwipeAttr('');
}
};
self.activeEleId = function(eleId) {
if (arguments.length) {
activeEleId = eleId;
}
return activeEleId;
};
self.transitionEnd = function() {
var viewElements = $element.children();
var x, l, viewElement;
for (x = 0, l = viewElements.length; x < l; x++) {
viewElement = viewElements.eq(x);
if (viewElement.data(DATA_ELE_IDENTIFIER) === activeEleId) {
// this is the active element
navViewAttr(viewElement, VIEW_STATUS_ACTIVE);
} else if (navViewAttr(viewElement) === 'leaving' || navViewAttr(viewElement) === VIEW_STATUS_ACTIVE || navViewAttr(viewElement) === VIEW_STATUS_CACHED) {
// this is a leaving element or was the former active element, or is an cached element
if (viewElement.data(DATA_DESTROY_ELE) || viewElement.data(DATA_NO_CACHE)) {
// this element shouldn't stay cached
$ionicViewSwitcher.destroyViewEle(viewElement);
} else {
// keep in the DOM, mark as cached
navViewAttr(viewElement, VIEW_STATUS_CACHED);
// disconnect the leaving scope
ionic.Utils.disconnectScope(viewElement.scope());
}
}
}
navSwipeAttr('');
// ensure no scrolls have been left frozen
if (self.isSwipeFreeze) {
$ionicScrollDelegate.freezeAllScrolls(false);
}
};
function onTabsLeave(ev, data) {
var viewElements = $element.children();
var viewElement, viewScope;
for (var x = 0, l = viewElements.length; x < l; x++) {
viewElement = viewElements.eq(x);
if (navViewAttr(viewElement) == VIEW_STATUS_ACTIVE) {
viewScope = viewElement.scope();
viewScope && viewScope.$emit(ev.name.replace('Tabs', 'View'), data);
viewScope && viewScope.$broadcast(ev.name.replace('Tabs', 'ParentView'), data);
break;
}
}
}
self.cacheCleanup = function() {
var viewElements = $element.children();
for (var x = 0, l = viewElements.length; x < l; x++) {
if (viewElements.eq(x).data(DATA_DESTROY_ELE)) {
$ionicViewSwitcher.destroyViewEle(viewElements.eq(x));
}
}
};
self.clearCache = function(stateIds) {
var viewElements = $element.children();
var viewElement, viewScope, x, l, y, eleIdentifier;
for (x = 0, l = viewElements.length; x < l; x++) {
viewElement = viewElements.eq(x);
if (stateIds) {
eleIdentifier = viewElement.data(DATA_ELE_IDENTIFIER);
for (y = 0; y < stateIds.length; y++) {
if (eleIdentifier === stateIds[y]) {
$ionicViewSwitcher.destroyViewEle(viewElement);
}
}
continue;
}
if (navViewAttr(viewElement) == VIEW_STATUS_CACHED) {
$ionicViewSwitcher.destroyViewEle(viewElement);
} else if (navViewAttr(viewElement) == VIEW_STATUS_ACTIVE) {
viewScope = viewElement.scope();
viewScope && viewScope.$broadcast('$ionicView.clearCache');
}
}
};
self.getViewElements = function() {
return $element.children();
};
self.appendViewElement = function(viewEle, viewLocals) {
// compile the entering element and get the link function
var linkFn = $compile(viewEle);
$element.append(viewEle);
var viewScope = $scope.$new();
if (viewLocals && viewLocals.$$controller) {
viewLocals.$scope = viewScope;
var controller = $controller(viewLocals.$$controller, viewLocals);
if (viewLocals.$$controllerAs) {
viewScope[viewLocals.$$controllerAs] = controller;
}
$element.children().data('$ngControllerController', controller);
}
linkFn(viewScope);
return viewScope;
};
self.title = function(val) {
var associatedNavBarCtrl = getAssociatedNavBarCtrl();
associatedNavBarCtrl && associatedNavBarCtrl.title(val);
};
/**
* @ngdoc method
* @name $ionicNavView#enableBackButton
* @description Enable/disable if the back button can be shown or not. For
* example, the very first view in the navigation stack would not have a
* back view, so the back button would be disabled.
*/
self.enableBackButton = function(shouldEnable) {
var associatedNavBarCtrl = getAssociatedNavBarCtrl();
associatedNavBarCtrl && associatedNavBarCtrl.enableBackButton(shouldEnable);
};
/**
* @ngdoc method
* @name $ionicNavView#showBackButton
* @description Show/hide the nav bar active back button. If the back button
* is not possible this will not force the back button to show. The
* `enableBackButton()` method handles if a back button is even possible or not.
*/
self.showBackButton = function(shouldShow) {
var associatedNavBarCtrl = getAssociatedNavBarCtrl();
if (associatedNavBarCtrl) {
if (arguments.length) {
return associatedNavBarCtrl.showActiveBackButton(shouldShow);
}
return associatedNavBarCtrl.showActiveBackButton();
}
return true;
};
self.showBar = function(val) {
var associatedNavBarCtrl = getAssociatedNavBarCtrl();
if (associatedNavBarCtrl) {
if (arguments.length) {
return associatedNavBarCtrl.showBar(val);
}
return associatedNavBarCtrl.showBar();
}
return true;
};
self.isPrimary = function(val) {
if (arguments.length) {
isPrimary = val;
}
return isPrimary;
};
self.direction = function(val) {
if (arguments.length) {
direction = val;
}
return direction;
};
self.initSwipeBack = function() {
var swipeBackHitWidth = $ionicConfig.views.swipeBackHitWidth();
var viewTransition, associatedNavBarCtrl, backView;
var deregDragStart, deregDrag, deregRelease;
var windowWidth, startDragX, dragPoints;
var cancelData = {};
function onDragStart(ev) {
if (!isPrimary || !$ionicConfig.views.swipeBackEnabled() || $ionicSideMenuDelegate.isOpenRight() ) return;
startDragX = getDragX(ev);
if (startDragX > swipeBackHitWidth) return;
backView = $ionicHistory.backView();
var currentView = $ionicHistory.currentView();
if (!backView || backView.historyId !== currentView.historyId || currentView.canSwipeBack === false) return;
if (!windowWidth) windowWidth = window.innerWidth;
self.isSwipeFreeze = $ionicScrollDelegate.freezeAllScrolls(true);
var registerData = {
direction: 'back'
};
dragPoints = [];
cancelData = {
showBar: self.showBar(),
showBackButton: self.showBackButton()
};
var switcher = $ionicViewSwitcher.create(self, registerData, backView, currentView, true, false);
switcher.loadViewElements(registerData);
switcher.render(registerData);
viewTransition = switcher.transition('back', $ionicHistory.enabledBack(backView), true);
associatedNavBarCtrl = getAssociatedNavBarCtrl();
deregDrag = ionic.onGesture('drag', onDrag, $element[0]);
deregRelease = ionic.onGesture('release', onRelease, $element[0]);
}
function onDrag(ev) {
if (isPrimary && viewTransition) {
var dragX = getDragX(ev);
dragPoints.push({
t: Date.now(),
x: dragX
});
if (dragX >= windowWidth - 15) {
onRelease(ev);
} else {
var step = Math.min(Math.max(getSwipeCompletion(dragX), 0), 1);
viewTransition.run(step);
associatedNavBarCtrl && associatedNavBarCtrl.activeTransition && associatedNavBarCtrl.activeTransition.run(step);
}
}
}
function onRelease(ev) {
if (isPrimary && viewTransition && dragPoints && dragPoints.length > 1) {
var now = Date.now();
var releaseX = getDragX(ev);
var startDrag = dragPoints[dragPoints.length - 1];
for (var x = dragPoints.length - 2; x >= 0; x--) {
if (now - startDrag.t > 200) {
break;
}
startDrag = dragPoints[x];
}
var isSwipingRight = (releaseX >= dragPoints[dragPoints.length - 2].x);
var releaseSwipeCompletion = getSwipeCompletion(releaseX);
var velocity = Math.abs(startDrag.x - releaseX) / (now - startDrag.t);
// private variables because ui-router has no way to pass custom data using $state.go
disableRenderStartViewId = backView.viewId;
disableAnimation = (releaseSwipeCompletion < 0.03 || releaseSwipeCompletion > 0.97);
if (isSwipingRight && (releaseSwipeCompletion > 0.5 || velocity > 0.1)) {
// complete view transition on release
var speed = (velocity > 0.5 || velocity < 0.05 || releaseX > windowWidth - 45) ? 'fast' : 'slow';
navSwipeAttr(disableAnimation ? '' : speed);
backView.go();
associatedNavBarCtrl && associatedNavBarCtrl.activeTransition && associatedNavBarCtrl.activeTransition.complete(!disableAnimation, speed);
} else {
// cancel view transition on release
navSwipeAttr(disableAnimation ? '' : 'fast');
disableRenderStartViewId = null;
viewTransition.cancel(!disableAnimation);
associatedNavBarCtrl && associatedNavBarCtrl.activeTransition && associatedNavBarCtrl.activeTransition.cancel(!disableAnimation, 'fast', cancelData);
disableAnimation = null;
}
}
ionic.offGesture(deregDrag, 'drag', onDrag);
ionic.offGesture(deregRelease, 'release', onRelease);
windowWidth = viewTransition = dragPoints = null;
self.isSwipeFreeze = $ionicScrollDelegate.freezeAllScrolls(false);
}
function getDragX(ev) {
return ionic.tap.pointerCoord(ev.gesture.srcEvent).x;
}
function getSwipeCompletion(dragX) {
return (dragX - startDragX) / windowWidth;
}
deregDragStart = ionic.onGesture('dragstart', onDragStart, $element[0]);
$scope.$on('$destroy', function() {
ionic.offGesture(deregDragStart, 'dragstart', onDragStart);
ionic.offGesture(deregDrag, 'drag', onDrag);
ionic.offGesture(deregRelease, 'release', onRelease);
self.element = viewTransition = associatedNavBarCtrl = null;
});
};
function navSwipeAttr(val) {
ionic.DomUtil.cachedAttr($element, 'nav-swipe', val);
}
function onTabsTop(ev, isTabsTop) {
var associatedNavBarCtrl = getAssociatedNavBarCtrl();
associatedNavBarCtrl && associatedNavBarCtrl.hasTabsTop(isTabsTop);
}
function onBarSubheader(ev, isBarSubheader) {
var associatedNavBarCtrl = getAssociatedNavBarCtrl();
associatedNavBarCtrl && associatedNavBarCtrl.hasBarSubheader(isBarSubheader);
}
function getAssociatedNavBarCtrl() {
if (navBarDelegate) {
for (var x = 0; x < $ionicNavBarDelegate._instances.length; x++) {
if ($ionicNavBarDelegate._instances[x].$$delegateHandle == navBarDelegate) {
return $ionicNavBarDelegate._instances[x];
}
}
}
return $element.inheritedData('$ionNavBarController');
}
}]);
IonicModule
.controller('$ionicRefresher', [
'$scope',
'$attrs',
'$element',
'$ionicBind',
'$timeout',
function($scope, $attrs, $element, $ionicBind, $timeout) {
var self = this,
isDragging = false,
isOverscrolling = false,
dragOffset = 0,
lastOverscroll = 0,
ptrThreshold = 60,
activated = false,
scrollTime = 500,
startY = null,
deltaY = null,
canOverscroll = true,
scrollParent,
scrollChild;
if (!isDefined($attrs.pullingIcon)) {
$attrs.$set('pullingIcon', 'ion-android-arrow-down');
}
$scope.showSpinner = !isDefined($attrs.refreshingIcon) && $attrs.spinner != 'none';
$scope.showIcon = isDefined($attrs.refreshingIcon);
$ionicBind($scope, $attrs, {
pullingIcon: '@',
pullingText: '@',
refreshingIcon: '@',
refreshingText: '@',
spinner: '@',
disablePullingRotation: '@',
$onRefresh: '&onRefresh',
$onPulling: '&onPulling'
});
function handleMousedown(e) {
e.touches = e.touches || [{
screenX: e.screenX,
screenY: e.screenY
}];
// Mouse needs this
startY = Math.floor(e.touches[0].screenY);
}
function handleTouchstart(e) {
e.touches = e.touches || [{
screenX: e.screenX,
screenY: e.screenY
}];
startY = e.touches[0].screenY;
}
function handleTouchend() {
// reset Y
startY = null;
// if this wasn't an overscroll, get out immediately
if (!canOverscroll && !isDragging) {
return;
}
// the user has overscrolled but went back to native scrolling
if (!isDragging) {
dragOffset = 0;
isOverscrolling = false;
setScrollLock(false);
} else {
isDragging = false;
dragOffset = 0;
// the user has scroll far enough to trigger a refresh
if (lastOverscroll > ptrThreshold) {
start();
scrollTo(ptrThreshold, scrollTime);
// the user has overscrolled but not far enough to trigger a refresh
} else {
scrollTo(0, scrollTime, deactivate);
isOverscrolling = false;
}
}
}
function handleTouchmove(e) {
e.touches = e.touches || [{
screenX: e.screenX,
screenY: e.screenY
}];
// Force mouse events to have had a down event first
if (!startY && e.type == 'mousemove') {
return;
}
// if multitouch or regular scroll event, get out immediately
if (!canOverscroll || e.touches.length > 1) {
return;
}
//if this is a new drag, keep track of where we start
if (startY === null) {
startY = e.touches[0].screenY;
}
deltaY = e.touches[0].screenY - startY;
// how far have we dragged so far?
// kitkat fix for touchcancel events http://updates.html5rocks.com/2014/05/A-More-Compatible-Smoother-Touch
// Only do this if we're not on crosswalk
if (ionic.Platform.isAndroid() && ionic.Platform.version() === 4.4 && !ionic.Platform.isCrosswalk() && scrollParent.scrollTop === 0 && deltaY > 0) {
isDragging = true;
e.preventDefault();
}
// if we've dragged up and back down in to native scroll territory
if (deltaY - dragOffset <= 0 || scrollParent.scrollTop !== 0) {
if (isOverscrolling) {
isOverscrolling = false;
setScrollLock(false);
}
if (isDragging) {
nativescroll(scrollParent, deltaY - dragOffset * -1);
}
// if we're not at overscroll 0 yet, 0 out
if (lastOverscroll !== 0) {
overscroll(0);
}
return;
} else if (deltaY > 0 && scrollParent.scrollTop === 0 && !isOverscrolling) {
// starting overscroll, but drag started below scrollTop 0, so we need to offset the position
dragOffset = deltaY;
}
// prevent native scroll events while overscrolling
e.preventDefault();
// if not overscrolling yet, initiate overscrolling
if (!isOverscrolling) {
isOverscrolling = true;
setScrollLock(true);
}
isDragging = true;
// overscroll according to the user's drag so far
overscroll((deltaY - dragOffset) / 3);
// update the icon accordingly
if (!activated && lastOverscroll > ptrThreshold) {
activated = true;
ionic.requestAnimationFrame(activate);
} else if (activated && lastOverscroll < ptrThreshold) {
activated = false;
ionic.requestAnimationFrame(deactivate);
}
}
function handleScroll(e) {
// canOverscrol is used to greatly simplify the drag handler during normal scrolling
canOverscroll = (e.target.scrollTop === 0) || isDragging;
}
function overscroll(val) {
scrollChild.style[ionic.CSS.TRANSFORM] = 'translate3d(0px, ' + val + 'px, 0px)';
lastOverscroll = val;
}
function nativescroll(target, newScrollTop) {
// creates a scroll event that bubbles, can be cancelled, and with its view
// and detail property initialized to window and 1, respectively
target.scrollTop = newScrollTop;
var e = document.createEvent("UIEvents");
e.initUIEvent("scroll", true, true, window, 1);
target.dispatchEvent(e);
}
function setScrollLock(enabled) {
// set the scrollbar to be position:fixed in preparation to overscroll
// or remove it so the app can be natively scrolled
if (enabled) {
ionic.requestAnimationFrame(function() {
scrollChild.classList.add('overscroll');
show();
});
} else {
ionic.requestAnimationFrame(function() {
scrollChild.classList.remove('overscroll');
hide();
deactivate();
});
}
}
$scope.$on('scroll.refreshComplete', function() {
// prevent the complete from firing before the scroll has started
$timeout(function() {
ionic.requestAnimationFrame(tail);
// scroll back to home during tail animation
scrollTo(0, scrollTime, deactivate);
// return to native scrolling after tail animation has time to finish
$timeout(function() {
if (isOverscrolling) {
isOverscrolling = false;
setScrollLock(false);
}
}, scrollTime);
}, scrollTime);
});
function scrollTo(Y, duration, callback) {
// scroll animation loop w/ easing
// credit https://gist.github.com/dezinezync/5487119
var start = Date.now(),
from = lastOverscroll;
if (from === Y) {
callback();
return; /* Prevent scrolling to the Y point if already there */
}
// decelerating to zero velocity
function easeOutCubic(t) {
return (--t) * t * t + 1;
}
// scroll loop
function scroll() {
var currentTime = Date.now(),
time = Math.min(1, ((currentTime - start) / duration)),
// where .5 would be 50% of time on a linear scale easedT gives a
// fraction based on the easing method
easedT = easeOutCubic(time);
overscroll(Math.floor((easedT * (Y - from)) + from));
if (time < 1) {
ionic.requestAnimationFrame(scroll);
} else {
if (Y < 5 && Y > -5) {
isOverscrolling = false;
setScrollLock(false);
}
callback && callback();
}
}
// start scroll loop
ionic.requestAnimationFrame(scroll);
}
var touchStartEvent, touchMoveEvent, touchEndEvent;
if (window.navigator.pointerEnabled) {
touchStartEvent = 'pointerdown';
touchMoveEvent = 'pointermove';
touchEndEvent = 'pointerup';
} else if (window.navigator.msPointerEnabled) {
touchStartEvent = 'MSPointerDown';
touchMoveEvent = 'MSPointerMove';
touchEndEvent = 'MSPointerUp';
} else {
touchStartEvent = 'touchstart';
touchMoveEvent = 'touchmove';
touchEndEvent = 'touchend';
}
self.init = function() {
scrollParent = $element.parent().parent()[0];
scrollChild = $element.parent()[0];
if (!scrollParent || !scrollParent.classList.contains('ionic-scroll') ||
!scrollChild || !scrollChild.classList.contains('scroll')) {
throw new Error('Refresher must be immediate child of ion-content or ion-scroll');
}
ionic.on(touchStartEvent, handleTouchstart, scrollChild);
ionic.on(touchMoveEvent, handleTouchmove, scrollChild);
ionic.on(touchEndEvent, handleTouchend, scrollChild);
ionic.on('mousedown', handleMousedown, scrollChild);
ionic.on('mousemove', handleTouchmove, scrollChild);
ionic.on('mouseup', handleTouchend, scrollChild);
ionic.on('scroll', handleScroll, scrollParent);
// cleanup when done
$scope.$on('$destroy', destroy);
};
function destroy() {
if ( scrollChild ) {
ionic.off(touchStartEvent, handleTouchstart, scrollChild);
ionic.off(touchMoveEvent, handleTouchmove, scrollChild);
ionic.off(touchEndEvent, handleTouchend, scrollChild);
ionic.off('mousedown', handleMousedown, scrollChild);
ionic.off('mousemove', handleTouchmove, scrollChild);
ionic.off('mouseup', handleTouchend, scrollChild);
}
if ( scrollParent ) {
ionic.off('scroll', handleScroll, scrollParent);
}
scrollParent = null;
scrollChild = null;
}
// DOM manipulation and broadcast methods shared by JS and Native Scrolling
// getter used by JS Scrolling
self.getRefresherDomMethods = function() {
return {
activate: activate,
deactivate: deactivate,
start: start,
show: show,
hide: hide,
tail: tail
};
};
function activate() {
$element[0].classList.add('active');
$scope.$onPulling();
}
function deactivate() {
// give tail 150ms to finish
$timeout(function() {
// deactivateCallback
$element.removeClass('active refreshing refreshing-tail');
if (activated) activated = false;
}, 150);
}
function start() {
// startCallback
$element[0].classList.add('refreshing');
var q = $scope.$onRefresh();
if (q && q.then) {
q['finally'](function() {
$scope.$broadcast('scroll.refreshComplete');
});
}
}
function show() {
// showCallback
$element[0].classList.remove('invisible');
}
function hide() {
// showCallback
$element[0].classList.add('invisible');
}
function tail() {
// tailCallback
$element[0].classList.add('refreshing-tail');
}
// for testing
self.__handleTouchmove = handleTouchmove;
self.__getScrollChild = function() { return scrollChild; };
self.__getScrollParent = function() { return scrollParent; };
}
]);
/**
* @private
*/
IonicModule
.controller('$ionicScroll', [
'$scope',
'scrollViewOptions',
'$timeout',
'$window',
'$location',
'$document',
'$ionicScrollDelegate',
'$ionicHistory',
function($scope,
scrollViewOptions,
$timeout,
$window,
$location,
$document,
$ionicScrollDelegate,
$ionicHistory) {
var self = this;
// for testing
self.__timeout = $timeout;
self._scrollViewOptions = scrollViewOptions; //for testing
self.isNative = function() {
return !!scrollViewOptions.nativeScrolling;
};
var element = self.element = scrollViewOptions.el;
var $element = self.$element = jqLite(element);
var scrollView;
if (self.isNative()) {
scrollView = self.scrollView = new ionic.views.ScrollNative(scrollViewOptions);
} else {
scrollView = self.scrollView = new ionic.views.Scroll(scrollViewOptions);
}
//Attach self to element as a controller so other directives can require this controller
//through `require: '$ionicScroll'
//Also attach to parent so that sibling elements can require this
($element.parent().length ? $element.parent() : $element)
.data('$$ionicScrollController', self);
var deregisterInstance = $ionicScrollDelegate._registerInstance(
self, scrollViewOptions.delegateHandle, function() {
return $ionicHistory.isActiveScope($scope);
}
);
if (!isDefined(scrollViewOptions.bouncing)) {
ionic.Platform.ready(function() {
if (scrollView && scrollView.options) {
scrollView.options.bouncing = true;
if (ionic.Platform.isAndroid()) {
// No bouncing by default on Android
scrollView.options.bouncing = false;
// Faster scroll decel
scrollView.options.deceleration = 0.95;
}
}
});
}
var resize = angular.bind(scrollView, scrollView.resize);
angular.element($window).on('resize', resize);
var scrollFunc = function(e) {
var detail = (e.originalEvent || e).detail || {};
$scope.$onScroll && $scope.$onScroll({
event: e,
scrollTop: detail.scrollTop || 0,
scrollLeft: detail.scrollLeft || 0
});
};
$element.on('scroll', scrollFunc);
$scope.$on('$destroy', function() {
deregisterInstance();
scrollView && scrollView.__cleanup && scrollView.__cleanup();
angular.element($window).off('resize', resize);
if ( $element ) {
$element.off('scroll', scrollFunc);
}
if ( self._scrollViewOptions ) {
self._scrollViewOptions.el = null;
}
if ( scrollViewOptions ) {
scrollViewOptions.el = null;
}
scrollView = self.scrollView = scrollViewOptions = self._scrollViewOptions = element = self.$element = $element = null;
});
$timeout(function() {
scrollView && scrollView.run && scrollView.run();
});
self.getScrollView = function() {
return scrollView;
};
self.getScrollPosition = function() {
return scrollView.getValues();
};
self.resize = function() {
return $timeout(resize, 0, false).then(function() {
$element && $element.triggerHandler('scroll-resize');
});
};
self.scrollTop = function(shouldAnimate) {
self.resize().then(function() {
if (!scrollView) {
return;
}
scrollView.scrollTo(0, 0, !!shouldAnimate);
});
};
self.scrollBottom = function(shouldAnimate) {
self.resize().then(function() {
if (!scrollView) {
return;
}
var max = scrollView.getScrollMax();
scrollView.scrollTo(max.left, max.top, !!shouldAnimate);
});
};
self.scrollTo = function(left, top, shouldAnimate) {
self.resize().then(function() {
if (!scrollView) {
return;
}
scrollView.scrollTo(left, top, !!shouldAnimate);
});
};
self.zoomTo = function(zoom, shouldAnimate, originLeft, originTop) {
self.resize().then(function() {
if (!scrollView) {
return;
}
scrollView.zoomTo(zoom, !!shouldAnimate, originLeft, originTop);
});
};
self.zoomBy = function(zoom, shouldAnimate, originLeft, originTop) {
self.resize().then(function() {
if (!scrollView) {
return;
}
scrollView.zoomBy(zoom, !!shouldAnimate, originLeft, originTop);
});
};
self.scrollBy = function(left, top, shouldAnimate) {
self.resize().then(function() {
if (!scrollView) {
return;
}
scrollView.scrollBy(left, top, !!shouldAnimate);
});
};
self.anchorScroll = function(shouldAnimate) {
self.resize().then(function() {
if (!scrollView) {
return;
}
var hash = $location.hash();
var elm = hash && $document[0].getElementById(hash);
if (!(hash && elm)) {
scrollView.scrollTo(0, 0, !!shouldAnimate);
return;
}
var curElm = elm;
var scrollLeft = 0, scrollTop = 0;
do {
if (curElm !== null) scrollLeft += curElm.offsetLeft;
if (curElm !== null) scrollTop += curElm.offsetTop;
curElm = curElm.offsetParent;
} while (curElm.attributes != self.element.attributes && curElm.offsetParent);
scrollView.scrollTo(scrollLeft, scrollTop, !!shouldAnimate);
});
};
self.freezeScroll = scrollView.freeze;
self.freezeScrollShut = scrollView.freezeShut;
self.freezeAllScrolls = function(shouldFreeze) {
for (var i = 0; i < $ionicScrollDelegate._instances.length; i++) {
$ionicScrollDelegate._instances[i].freezeScroll(shouldFreeze);
}
};
/**
* @private
*/
self._setRefresher = function(refresherScope, refresherElement, refresherMethods) {
self.refresher = refresherElement;
var refresherHeight = self.refresher.clientHeight || 60;
scrollView.activatePullToRefresh(
refresherHeight,
refresherMethods
);
};
}]);
IonicModule
.controller('$ionicSideMenus', [
'$scope',
'$attrs',
'$ionicSideMenuDelegate',
'$ionicPlatform',
'$ionicBody',
'$ionicHistory',
'$ionicScrollDelegate',
'IONIC_BACK_PRIORITY',
'$rootScope',
function($scope, $attrs, $ionicSideMenuDelegate, $ionicPlatform, $ionicBody, $ionicHistory, $ionicScrollDelegate, IONIC_BACK_PRIORITY, $rootScope) {
var self = this;
var rightShowing, leftShowing, isDragging;
var startX, lastX, offsetX, isAsideExposed;
var enableMenuWithBackViews = true;
self.$scope = $scope;
self.initialize = function(options) {
self.left = options.left;
self.right = options.right;
self.setContent(options.content);
self.dragThresholdX = options.dragThresholdX || 10;
$ionicHistory.registerHistory(self.$scope);
};
/**
* Set the content view controller if not passed in the constructor options.
*
* @param {object} content
*/
self.setContent = function(content) {
if (content) {
self.content = content;
self.content.onDrag = function(e) {
self._handleDrag(e);
};
self.content.endDrag = function(e) {
self._endDrag(e);
};
}
};
self.isOpenLeft = function() {
return self.getOpenAmount() > 0;
};
self.isOpenRight = function() {
return self.getOpenAmount() < 0;
};
/**
* Toggle the left menu to open 100%
*/
self.toggleLeft = function(shouldOpen) {
if (isAsideExposed || !self.left.isEnabled) return;
var openAmount = self.getOpenAmount();
if (arguments.length === 0) {
shouldOpen = openAmount <= 0;
}
self.content.enableAnimation();
if (!shouldOpen) {
self.openPercentage(0);
$rootScope.$emit('$ionicSideMenuClose', 'left');
} else {
self.openPercentage(100);
$rootScope.$emit('$ionicSideMenuOpen', 'left');
}
};
/**
* Toggle the right menu to open 100%
*/
self.toggleRight = function(shouldOpen) {
if (isAsideExposed || !self.right.isEnabled) return;
var openAmount = self.getOpenAmount();
if (arguments.length === 0) {
shouldOpen = openAmount >= 0;
}
self.content.enableAnimation();
if (!shouldOpen) {
self.openPercentage(0);
$rootScope.$emit('$ionicSideMenuClose', 'right');
} else {
self.openPercentage(-100);
$rootScope.$emit('$ionicSideMenuOpen', 'right');
}
};
self.toggle = function(side) {
if (side == 'right') {
self.toggleRight();
} else {
self.toggleLeft();
}
};
/**
* Close all menus.
*/
self.close = function() {
self.openPercentage(0);
$rootScope.$emit('$ionicSideMenuClose', 'left');
$rootScope.$emit('$ionicSideMenuClose', 'right');
};
/**
* @return {float} The amount the side menu is open, either positive or negative for left (positive), or right (negative)
*/
self.getOpenAmount = function() {
return self.content && self.content.getTranslateX() || 0;
};
/**
* @return {float} The ratio of open amount over menu width. For example, a
* menu of width 100 open 50 pixels would be open 50% or a ratio of 0.5. Value is negative
* for right menu.
*/
self.getOpenRatio = function() {
var amount = self.getOpenAmount();
if (amount >= 0) {
return amount / self.left.width;
}
return amount / self.right.width;
};
self.isOpen = function() {
return self.getOpenAmount() !== 0;
};
/**
* @return {float} The percentage of open amount over menu width. For example, a
* menu of width 100 open 50 pixels would be open 50%. Value is negative
* for right menu.
*/
self.getOpenPercentage = function() {
return self.getOpenRatio() * 100;
};
/**
* Open the menu with a given percentage amount.
* @param {float} percentage The percentage (positive or negative for left/right) to open the menu.
*/
self.openPercentage = function(percentage) {
var p = percentage / 100;
if (self.left && percentage >= 0) {
self.openAmount(self.left.width * p);
} else if (self.right && percentage < 0) {
self.openAmount(self.right.width * p);
}
// add the CSS class "menu-open" if the percentage does not
// equal 0, otherwise remove the class from the body element
$ionicBody.enableClass((percentage !== 0), 'menu-open');
self.content.setCanScroll(percentage == 0);
};
/*
function freezeAllScrolls(shouldFreeze) {
if (shouldFreeze && !self.isScrollFreeze) {
$ionicScrollDelegate.freezeAllScrolls(shouldFreeze);
} else if (!shouldFreeze && self.isScrollFreeze) {
$ionicScrollDelegate.freezeAllScrolls(false);
}
self.isScrollFreeze = shouldFreeze;
}
*/
/**
* Open the menu the given pixel amount.
* @param {float} amount the pixel amount to open the menu. Positive value for left menu,
* negative value for right menu (only one menu will be visible at a time).
*/
self.openAmount = function(amount) {
var maxLeft = self.left && self.left.width || 0;
var maxRight = self.right && self.right.width || 0;
// Check if we can move to that side, depending if the left/right panel is enabled
if (!(self.left && self.left.isEnabled) && amount > 0) {
self.content.setTranslateX(0);
return;
}
if (!(self.right && self.right.isEnabled) && amount < 0) {
self.content.setTranslateX(0);
return;
}
if (leftShowing && amount > maxLeft) {
self.content.setTranslateX(maxLeft);
return;
}
if (rightShowing && amount < -maxRight) {
self.content.setTranslateX(-maxRight);
return;
}
self.content.setTranslateX(amount);
if (amount >= 0) {
leftShowing = true;
rightShowing = false;
if (amount > 0) {
// Push the z-index of the right menu down
self.right && self.right.pushDown && self.right.pushDown();
// Bring the z-index of the left menu up
self.left && self.left.bringUp && self.left.bringUp();
}
} else {
rightShowing = true;
leftShowing = false;
// Bring the z-index of the right menu up
self.right && self.right.bringUp && self.right.bringUp();
// Push the z-index of the left menu down
self.left && self.left.pushDown && self.left.pushDown();
}
};
/**
* Given an event object, find the final resting position of this side
* menu. For example, if the user "throws" the content to the right and
* releases the touch, the left menu should snap open (animated, of course).
*
* @param {Event} e the gesture event to use for snapping
*/
self.snapToRest = function(e) {
// We want to animate at the end of this
self.content.enableAnimation();
isDragging = false;
// Check how much the panel is open after the drag, and
// what the drag velocity is
var ratio = self.getOpenRatio();
if (ratio === 0) {
// Just to be safe
self.openPercentage(0);
return;
}
var velocityThreshold = 0.3;
var velocityX = e.gesture.velocityX;
var direction = e.gesture.direction;
// Going right, less than half, too slow (snap back)
if (ratio > 0 && ratio < 0.5 && direction == 'right' && velocityX < velocityThreshold) {
self.openPercentage(0);
}
// Going left, more than half, too slow (snap back)
else if (ratio > 0.5 && direction == 'left' && velocityX < velocityThreshold) {
self.openPercentage(100);
}
// Going left, less than half, too slow (snap back)
else if (ratio < 0 && ratio > -0.5 && direction == 'left' && velocityX < velocityThreshold) {
self.openPercentage(0);
}
// Going right, more than half, too slow (snap back)
else if (ratio < 0.5 && direction == 'right' && velocityX < velocityThreshold) {
self.openPercentage(-100);
}
// Going right, more than half, or quickly (snap open)
else if (direction == 'right' && ratio >= 0 && (ratio >= 0.5 || velocityX > velocityThreshold)) {
self.openPercentage(100);
}
// Going left, more than half, or quickly (span open)
else if (direction == 'left' && ratio <= 0 && (ratio <= -0.5 || velocityX > velocityThreshold)) {
self.openPercentage(-100);
}
// Snap back for safety
else {
self.openPercentage(0);
}
};
self.enableMenuWithBackViews = function(val) {
if (arguments.length) {
enableMenuWithBackViews = !!val;
}
return enableMenuWithBackViews;
};
self.isAsideExposed = function() {
return !!isAsideExposed;
};
self.exposeAside = function(shouldExposeAside) {
if (!(self.left && self.left.isEnabled) && !(self.right && self.right.isEnabled)) return;
self.close();
isAsideExposed = shouldExposeAside;
if ((self.left && self.left.isEnabled) && (self.right && self.right.isEnabled)) {
self.content.setMarginLeftAndRight(isAsideExposed ? self.left.width : 0, isAsideExposed ? self.right.width : 0);
} else if (self.left && self.left.isEnabled) {
// set the left marget width if it should be exposed
// otherwise set false so there's no left margin
self.content.setMarginLeft(isAsideExposed ? self.left.width : 0);
} else if (self.right && self.right.isEnabled) {
self.content.setMarginRight(isAsideExposed ? self.right.width : 0);
}
self.$scope.$emit('$ionicExposeAside', isAsideExposed);
};
self.activeAsideResizing = function(isResizing) {
$ionicBody.enableClass(isResizing, 'aside-resizing');
};
// End a drag with the given event
self._endDrag = function(e) {
if (isAsideExposed) return;
if (isDragging) {
self.snapToRest(e);
}
startX = null;
lastX = null;
offsetX = null;
};
// Handle a drag event
self._handleDrag = function(e) {
if (isAsideExposed || !$scope.dragContent) return;
// If we don't have start coords, grab and store them
if (!startX) {
startX = e.gesture.touches[0].pageX;
lastX = startX;
} else {
// Grab the current tap coords
lastX = e.gesture.touches[0].pageX;
}
// Calculate difference from the tap points
if (!isDragging && Math.abs(lastX - startX) > self.dragThresholdX) {
// if the difference is greater than threshold, start dragging using the current
// point as the starting point
startX = lastX;
isDragging = true;
// Initialize dragging
self.content.disableAnimation();
offsetX = self.getOpenAmount();
}
if (isDragging) {
self.openAmount(offsetX + (lastX - startX));
//self.content.setCanScroll(false);
}
};
self.canDragContent = function(canDrag) {
if (arguments.length) {
$scope.dragContent = !!canDrag;
}
return $scope.dragContent;
};
self.edgeThreshold = 25;
self.edgeThresholdEnabled = false;
self.edgeDragThreshold = function(value) {
if (arguments.length) {
if (isNumber(value) && value > 0) {
self.edgeThreshold = value;
self.edgeThresholdEnabled = true;
} else {
self.edgeThresholdEnabled = !!value;
}
}
return self.edgeThresholdEnabled;
};
self.isDraggableTarget = function(e) {
//Only restrict edge when sidemenu is closed and restriction is enabled
var shouldOnlyAllowEdgeDrag = self.edgeThresholdEnabled && !self.isOpen();
var startX = e.gesture.startEvent && e.gesture.startEvent.center &&
e.gesture.startEvent.center.pageX;
var dragIsWithinBounds = !shouldOnlyAllowEdgeDrag ||
startX <= self.edgeThreshold ||
startX >= self.content.element.offsetWidth - self.edgeThreshold;
var backView = $ionicHistory.backView();
var menuEnabled = enableMenuWithBackViews ? true : !backView;
if (!menuEnabled) {
var currentView = $ionicHistory.currentView() || {};
return (dragIsWithinBounds && (backView.historyId !== currentView.historyId));
}
return ($scope.dragContent || self.isOpen()) &&
dragIsWithinBounds &&
!e.gesture.srcEvent.defaultPrevented &&
menuEnabled &&
!e.target.tagName.match(/input|textarea|select|object|embed/i) &&
!e.target.isContentEditable &&
!(e.target.dataset ? e.target.dataset.preventScroll : e.target.getAttribute('data-prevent-scroll') == 'true');
};
$scope.sideMenuContentTranslateX = 0;
var deregisterBackButtonAction = noop;
var closeSideMenu = angular.bind(self, self.close);
$scope.$watch(function() {
return self.getOpenAmount() !== 0;
}, function(isOpen) {
deregisterBackButtonAction();
if (isOpen) {
deregisterBackButtonAction = $ionicPlatform.registerBackButtonAction(
closeSideMenu,
IONIC_BACK_PRIORITY.sideMenu
);
}
});
var deregisterInstance = $ionicSideMenuDelegate._registerInstance(
self, $attrs.delegateHandle, function() {
return $ionicHistory.isActiveScope($scope);
}
);
$scope.$on('$destroy', function() {
deregisterInstance();
deregisterBackButtonAction();
self.$scope = null;
if (self.content) {
self.content.setCanScroll(true);
self.content.element = null;
self.content = null;
}
});
self.initialize({
left: {
width: 275
},
right: {
width: 275
}
});
}]);
(function(ionic) {
var TRANSLATE32 = 'translate(32,32)';
var STROKE_OPACITY = 'stroke-opacity';
var ROUND = 'round';
var INDEFINITE = 'indefinite';
var DURATION = '750ms';
var NONE = 'none';
var SHORTCUTS = {
a: 'animate',
an: 'attributeName',
at: 'animateTransform',
c: 'circle',
da: 'stroke-dasharray',
os: 'stroke-dashoffset',
f: 'fill',
lc: 'stroke-linecap',
rc: 'repeatCount',
sw: 'stroke-width',
t: 'transform',
v: 'values'
};
var SPIN_ANIMATION = {
v: '0,32,32;360,32,32',
an: 'transform',
type: 'rotate',
rc: INDEFINITE,
dur: DURATION
};
function createSvgElement(tagName, data, parent, spinnerName) {
var ele = document.createElement(SHORTCUTS[tagName] || tagName);
var k, x, y;
for (k in data) {
if (angular.isArray(data[k])) {
for (x = 0; x < data[k].length; x++) {
if (data[k][x].fn) {
for (y = 0; y < data[k][x].t; y++) {
createSvgElement(k, data[k][x].fn(y, spinnerName), ele, spinnerName);
}
} else {
createSvgElement(k, data[k][x], ele, spinnerName);
}
}
} else {
setSvgAttribute(ele, k, data[k]);
}
}
parent.appendChild(ele);
}
function setSvgAttribute(ele, k, v) {
ele.setAttribute(SHORTCUTS[k] || k, v);
}
function animationValues(strValues, i) {
var values = strValues.split(';');
var back = values.slice(i);
var front = values.slice(0, values.length - back.length);
values = back.concat(front).reverse();
return values.join(';') + ';' + values[0];
}
var IOS_SPINNER = {
sw: 4,
lc: ROUND,
line: [{
fn: function(i, spinnerName) {
return {
y1: spinnerName == 'ios' ? 17 : 12,
y2: spinnerName == 'ios' ? 29 : 20,
t: TRANSLATE32 + ' rotate(' + (30 * i + (i < 6 ? 180 : -180)) + ')',
a: [{
fn: function() {
return {
an: STROKE_OPACITY,
dur: DURATION,
v: animationValues('0;.1;.15;.25;.35;.45;.55;.65;.7;.85;1', i),
rc: INDEFINITE
};
},
t: 1
}]
};
},
t: 12
}]
};
var spinners = {
android: {
c: [{
sw: 6,
da: 128,
os: 82,
r: 26,
cx: 32,
cy: 32,
f: NONE
}]
},
ios: IOS_SPINNER,
'ios-small': IOS_SPINNER,
bubbles: {
sw: 0,
c: [{
fn: function(i) {
return {
cx: 24 * Math.cos(2 * Math.PI * i / 8),
cy: 24 * Math.sin(2 * Math.PI * i / 8),
t: TRANSLATE32,
a: [{
fn: function() {
return {
an: 'r',
dur: DURATION,
v: animationValues('1;2;3;4;5;6;7;8', i),
rc: INDEFINITE
};
},
t: 1
}]
};
},
t: 8
}]
},
circles: {
c: [{
fn: function(i) {
return {
r: 5,
cx: 24 * Math.cos(2 * Math.PI * i / 8),
cy: 24 * Math.sin(2 * Math.PI * i / 8),
t: TRANSLATE32,
sw: 0,
a: [{
fn: function() {
return {
an: 'fill-opacity',
dur: DURATION,
v: animationValues('.3;.3;.3;.4;.7;.85;.9;1', i),
rc: INDEFINITE
};
},
t: 1
}]
};
},
t: 8
}]
},
crescent: {
c: [{
sw: 4,
da: 128,
os: 82,
r: 26,
cx: 32,
cy: 32,
f: NONE,
at: [SPIN_ANIMATION]
}]
},
dots: {
c: [{
fn: function(i) {
return {
cx: 16 + (16 * i),
cy: 32,
sw: 0,
a: [{
fn: function() {
return {
an: 'fill-opacity',
dur: DURATION,
v: animationValues('.5;.6;.8;1;.8;.6;.5', i),
rc: INDEFINITE
};
},
t: 1
}, {
fn: function() {
return {
an: 'r',
dur: DURATION,
v: animationValues('4;5;6;5;4;3;3', i),
rc: INDEFINITE
};
},
t: 1
}]
};
},
t: 3
}]
},
lines: {
sw: 7,
lc: ROUND,
line: [{
fn: function(i) {
return {
x1: 10 + (i * 14),
x2: 10 + (i * 14),
a: [{
fn: function() {
return {
an: 'y1',
dur: DURATION,
v: animationValues('16;18;28;18;16', i),
rc: INDEFINITE
};
},
t: 1
}, {
fn: function() {
return {
an: 'y2',
dur: DURATION,
v: animationValues('48;44;36;46;48', i),
rc: INDEFINITE
};
},
t: 1
}, {
fn: function() {
return {
an: STROKE_OPACITY,
dur: DURATION,
v: animationValues('1;.8;.5;.4;1', i),
rc: INDEFINITE
};
},
t: 1
}]
};
},
t: 4
}]
},
ripple: {
f: NONE,
'fill-rule': 'evenodd',
sw: 3,
circle: [{
fn: function(i) {
return {
cx: 32,
cy: 32,
a: [{
fn: function() {
return {
an: 'r',
begin: (i * -1) + 's',
dur: '2s',
v: '0;24',
keyTimes: '0;1',
keySplines: '0.1,0.2,0.3,1',
calcMode: 'spline',
rc: INDEFINITE
};
},
t: 1
}, {
fn: function() {
return {
an: STROKE_OPACITY,
begin: (i * -1) + 's',
dur: '2s',
v: '.2;1;.2;0',
rc: INDEFINITE
};
},
t: 1
}]
};
},
t: 2
}]
},
spiral: {
defs: [{
linearGradient: [{
id: 'sGD',
gradientUnits: 'userSpaceOnUse',
x1: 55, y1: 46, x2: 2, y2: 46,
stop: [{
offset: 0.1,
class: 'stop1'
}, {
offset: 1,
class: 'stop2'
}]
}]
}],
g: [{
sw: 4,
lc: ROUND,
f: NONE,
path: [{
stroke: 'url(#sGD)',
d: 'M4,32 c0,15,12,28,28,28c8,0,16-4,21-9'
}, {
d: 'M60,32 C60,16,47.464,4,32,4S4,16,4,32'
}],
at: [SPIN_ANIMATION]
}]
}
};
var animations = {
android: function(ele) {
// Note that this is called as a function, not a constructor.
var self = {};
this.stop = false;
var rIndex = 0;
var rotateCircle = 0;
var startTime;
var svgEle = ele.querySelector('g');
var circleEle = ele.querySelector('circle');
function run() {
if (self.stop) return;
var v = easeInOutCubic(Date.now() - startTime, 650);
var scaleX = 1;
var translateX = 0;
var dasharray = (188 - (58 * v));
var dashoffset = (182 - (182 * v));
if (rIndex % 2) {
scaleX = -1;
translateX = -64;
dasharray = (128 - (-58 * v));
dashoffset = (182 * v);
}
var rotateLine = [0, -101, -90, -11, -180, 79, -270, -191][rIndex];
setSvgAttribute(circleEle, 'da', Math.max(Math.min(dasharray, 188), 128));
setSvgAttribute(circleEle, 'os', Math.max(Math.min(dashoffset, 182), 0));
setSvgAttribute(circleEle, 't', 'scale(' + scaleX + ',1) translate(' + translateX + ',0) rotate(' + rotateLine + ',32,32)');
rotateCircle += 4.1;
if (rotateCircle > 359) rotateCircle = 0;
setSvgAttribute(svgEle, 't', 'rotate(' + rotateCircle + ',32,32)');
if (v >= 1) {
rIndex++;
if (rIndex > 7) rIndex = 0;
startTime = Date.now();
}
ionic.requestAnimationFrame(run);
}
return function() {
startTime = Date.now();
run();
return self;
};
}
};
function easeInOutCubic(t, c) {
t /= c / 2;
if (t < 1) return 1 / 2 * t * t * t;
t -= 2;
return 1 / 2 * (t * t * t + 2);
}
IonicModule
.controller('$ionicSpinner', [
'$element',
'$attrs',
'$ionicConfig',
function($element, $attrs, $ionicConfig) {
var spinnerName, anim;
this.init = function() {
spinnerName = $attrs.icon || $ionicConfig.spinner.icon();
var container = document.createElement('div');
createSvgElement('svg', {
viewBox: '0 0 64 64',
g: [spinners[spinnerName]]
}, container, spinnerName);
// Specifically for animations to work,
// Android 4.3 and below requires the element to be
// added as an html string, rather than dynmically
// building up the svg element and appending it.
$element.html(container.innerHTML);
this.start();
return spinnerName;
};
this.start = function() {
animations[spinnerName] && (anim = animations[spinnerName]($element[0])());
};
this.stop = function() {
animations[spinnerName] && (anim.stop = true);
};
}]);
})(ionic);
IonicModule
.controller('$ionicTab', [
'$scope',
'$ionicHistory',
'$attrs',
'$location',
'$state',
function($scope, $ionicHistory, $attrs, $location, $state) {
this.$scope = $scope;
//All of these exposed for testing
this.hrefMatchesState = function() {
return $attrs.href && $location.path().indexOf(
$attrs.href.replace(/^#/, '').replace(/\/$/, '')
) === 0;
};
this.srefMatchesState = function() {
return $attrs.uiSref && $state.includes($attrs.uiSref.split('(')[0]);
};
this.navNameMatchesState = function() {
return this.navViewName && $ionicHistory.isCurrentStateNavView(this.navViewName);
};
this.tabMatchesState = function() {
return this.hrefMatchesState() || this.srefMatchesState() || this.navNameMatchesState();
};
}]);
IonicModule
.controller('$ionicTabs', [
'$scope',
'$element',
'$ionicHistory',
function($scope, $element, $ionicHistory) {
var self = this;
var selectedTab = null;
var previousSelectedTab = null;
var selectedTabIndex;
var isVisible = true;
self.tabs = [];
self.selectedIndex = function() {
return self.tabs.indexOf(selectedTab);
};
self.selectedTab = function() {
return selectedTab;
};
self.previousSelectedTab = function() {
return previousSelectedTab;
};
self.add = function(tab) {
$ionicHistory.registerHistory(tab);
self.tabs.push(tab);
};
self.remove = function(tab) {
var tabIndex = self.tabs.indexOf(tab);
if (tabIndex === -1) {
return;
}
//Use a field like '$tabSelected' so developers won't accidentally set it in controllers etc
if (tab.$tabSelected) {
self.deselect(tab);
//Try to select a new tab if we're removing a tab
if (self.tabs.length === 1) {
//Do nothing if there are no other tabs to select
} else {
//Select previous tab if it's the last tab, else select next tab
var newTabIndex = tabIndex === self.tabs.length - 1 ? tabIndex - 1 : tabIndex + 1;
self.select(self.tabs[newTabIndex]);
}
}
self.tabs.splice(tabIndex, 1);
};
self.deselect = function(tab) {
if (tab.$tabSelected) {
previousSelectedTab = selectedTab;
selectedTab = selectedTabIndex = null;
tab.$tabSelected = false;
(tab.onDeselect || noop)();
tab.$broadcast && tab.$broadcast('$ionicHistory.deselect');
}
};
self.select = function(tab, shouldEmitEvent) {
var tabIndex;
if (isNumber(tab)) {
tabIndex = tab;
if (tabIndex >= self.tabs.length) return;
tab = self.tabs[tabIndex];
} else {
tabIndex = self.tabs.indexOf(tab);
}
if (arguments.length === 1) {
shouldEmitEvent = !!(tab.navViewName || tab.uiSref);
}
if (selectedTab && selectedTab.$historyId == tab.$historyId) {
if (shouldEmitEvent) {
$ionicHistory.goToHistoryRoot(tab.$historyId);
}
} else if (selectedTabIndex !== tabIndex) {
forEach(self.tabs, function(tab) {
self.deselect(tab);
});
selectedTab = tab;
selectedTabIndex = tabIndex;
if (self.$scope && self.$scope.$parent) {
self.$scope.$parent.$activeHistoryId = tab.$historyId;
}
//Use a funny name like $tabSelected so the developer doesn't overwrite the var in a child scope
tab.$tabSelected = true;
(tab.onSelect || noop)();
if (shouldEmitEvent) {
$scope.$emit('$ionicHistory.change', {
type: 'tab',
tabIndex: tabIndex,
historyId: tab.$historyId,
navViewName: tab.navViewName,
hasNavView: !!tab.navViewName,
title: tab.title,
url: tab.href,
uiSref: tab.uiSref
});
}
$scope.$broadcast("tabSelected", { selectedTab: tab, selectedTabIndex: tabIndex});
}
};
self.hasActiveScope = function() {
for (var x = 0; x < self.tabs.length; x++) {
if ($ionicHistory.isActiveScope(self.tabs[x])) {
return true;
}
}
return false;
};
self.showBar = function(show) {
if (arguments.length) {
if (show) {
$element.removeClass('tabs-item-hide');
} else {
$element.addClass('tabs-item-hide');
}
isVisible = !!show;
}
return isVisible;
};
}]);
IonicModule
.controller('$ionicView', [
'$scope',
'$element',
'$attrs',
'$compile',
'$rootScope',
function($scope, $element, $attrs, $compile, $rootScope) {
var self = this;
var navElementHtml = {};
var navViewCtrl;
var navBarDelegateHandle;
var hasViewHeaderBar;
var deregisters = [];
var viewTitle;
var deregIonNavBarInit = $scope.$on('ionNavBar.init', function(ev, delegateHandle) {
// this view has its own ion-nav-bar, remember the navBarDelegateHandle for this view
ev.stopPropagation();
navBarDelegateHandle = delegateHandle;
});
self.init = function() {
deregIonNavBarInit();
var modalCtrl = $element.inheritedData('$ionModalController');
navViewCtrl = $element.inheritedData('$ionNavViewController');
// don't bother if inside a modal or there's no parent navView
if (!navViewCtrl || modalCtrl) return;
// add listeners for when this view changes
$scope.$on('$ionicView.beforeEnter', self.beforeEnter);
$scope.$on('$ionicView.afterEnter', afterEnter);
$scope.$on('$ionicView.beforeLeave', deregisterFns);
};
self.beforeEnter = function(ev, transData) {
// this event was emitted, starting at intial ion-view, then bubbles up
// only the first ion-view should do something with it, parent ion-views should ignore
if (transData && !transData.viewNotified) {
transData.viewNotified = true;
if (!$rootScope.$$phase) $scope.$digest();
viewTitle = isDefined($attrs.viewTitle) ? $attrs.viewTitle : $attrs.title;
var navBarItems = {};
for (var n in navElementHtml) {
navBarItems[n] = generateNavBarItem(navElementHtml[n]);
}
navViewCtrl.beforeEnter(extend(transData, {
title: viewTitle,
showBack: !attrTrue('hideBackButton'),
navBarItems: navBarItems,
navBarDelegate: navBarDelegateHandle || null,
showNavBar: !attrTrue('hideNavBar'),
hasHeaderBar: !!hasViewHeaderBar
}));
// make sure any existing observers are cleaned up
deregisterFns();
}
};
function afterEnter() {
// only listen for title updates after it has entered
// but also deregister the observe before it leaves
var viewTitleAttr = isDefined($attrs.viewTitle) && 'viewTitle' || isDefined($attrs.title) && 'title';
if (viewTitleAttr) {
titleUpdate($attrs[viewTitleAttr]);
deregisters.push($attrs.$observe(viewTitleAttr, titleUpdate));
}
if (isDefined($attrs.hideBackButton)) {
deregisters.push($scope.$watch($attrs.hideBackButton, function(val) {
navViewCtrl.showBackButton(!val);
}));
}
if (isDefined($attrs.hideNavBar)) {
deregisters.push($scope.$watch($attrs.hideNavBar, function(val) {
navViewCtrl.showBar(!val);
}));
}
}
function titleUpdate(newTitle) {
if (isDefined(newTitle) && newTitle !== viewTitle) {
viewTitle = newTitle;
navViewCtrl.title(viewTitle);
}
}
function deregisterFns() {
// remove all existing $attrs.$observe's
for (var x = 0; x < deregisters.length; x++) {
deregisters[x]();
}
deregisters = [];
}
function generateNavBarItem(html) {
if (html) {
// every time a view enters we need to recreate its view buttons if they exist
return $compile(html)($scope.$new());
}
}
function attrTrue(key) {
return !!$scope.$eval($attrs[key]);
}
self.navElement = function(type, html) {
navElementHtml[type] = html;
};
}]);
/*
* We don't document the ionActionSheet directive, we instead document
* the $ionicActionSheet service
*/
IonicModule
.directive('ionActionSheet', ['$document', function($document) {
return {
restrict: 'E',
scope: true,
replace: true,
link: function($scope, $element) {
var keyUp = function(e) {
if (e.which == 27) {
$scope.cancel();
$scope.$apply();
}
};
var backdropClick = function(e) {
if (e.target == $element[0]) {
$scope.cancel();
$scope.$apply();
}
};
$scope.$on('$destroy', function() {
$element.remove();
$document.unbind('keyup', keyUp);
});
$document.bind('keyup', keyUp);
$element.bind('click', backdropClick);
},
template: '
' +
'
' +
'
' +
'
' +
'
' +
'' +
'
' +
'
' +
'
' +
'
'
};
}]);
/**
* @ngdoc directive
* @name ionCheckbox
* @module ionic
* @restrict E
* @codepen hqcju
* @description
* The checkbox is no different than the HTML checkbox input, except it's styled differently.
*
* The checkbox behaves like any [AngularJS checkbox](http://docs.angularjs.org/api/ng/input/input[checkbox]).
*
* @usage
* ```html
*
Checkbox Label
* ```
*/
IonicModule
.directive('ionCheckbox', ['$ionicConfig', function($ionicConfig) {
return {
restrict: 'E',
replace: true,
require: '?ngModel',
transclude: true,
template:
'
',
compile: function(element, attr) {
var input = element.find('input');
forEach({
'name': attr.name,
'ng-value': attr.ngValue,
'ng-model': attr.ngModel,
'ng-checked': attr.ngChecked,
'ng-disabled': attr.ngDisabled,
'ng-true-value': attr.ngTrueValue,
'ng-false-value': attr.ngFalseValue,
'ng-change': attr.ngChange,
'ng-required': attr.ngRequired,
'required': attr.required
}, function(value, name) {
if (isDefined(value)) {
input.attr(name, value);
}
});
var checkboxWrapper = element[0].querySelector('.checkbox');
checkboxWrapper.classList.add('checkbox-' + $ionicConfig.form.checkbox());
}
};
}]);
/**
* @ngdoc directive
* @restrict A
* @name collectionRepeat
* @module ionic
* @codepen 7ec1ec58f2489ab8f359fa1a0fe89c15
* @description
* `collection-repeat` allows an app to show huge lists of items much more performantly than
* `ng-repeat`.
*
* It renders into the DOM only as many items as are currently visible.
*
* This means that on a phone screen that can fit eight items, only the eight items matching
* the current scroll position will be rendered.
*
* **The Basics**:
*
* - The data given to collection-repeat must be an array.
* - If the `item-height` and `item-width` attributes are not supplied, it will be assumed that
* every item in the list has the same dimensions as the first item.
* - Don't use angular one-time binding (`::`) with collection-repeat. The scope of each item is
* assigned new data and re-digested as you scroll. Bindings need to update, and one-time bindings
* won't.
*
* **Performance Tips**:
*
* - The iOS webview has a performance bottleneck when switching out `
` attributes.
* To increase performance of images on iOS, cache your images in advance and,
* if possible, lower the number of unique images. We're working on [a solution](https://github.com/driftyco/ionic/issues/3194).
*
* @usage
* #### Basic Item List ([codepen](http://codepen.io/ionic/pen/0c2c35a34a8b18ad4d793fef0b081693))
* ```html
*
*
* {% raw %}{{item}}{% endraw %}
*
*
* ```
*
* #### Grid of Images ([codepen](http://codepen.io/ionic/pen/5515d4efd9d66f780e96787387f41664))
* ```html
*
*
*
* ```
*
* #### Horizontal Scroller, Dynamic Item Width ([codepen](http://codepen.io/ionic/pen/67cc56b349124a349acb57a0740e030e))
* ```html
*
* Available Kittens:
*
*
*
*
*
*
* ```
*
* @param {expression} collection-repeat The expression indicating how to enumerate a collection,
* of the format `variable in expression` – where variable is the user defined loop variable
* and `expression` is a scope expression giving the collection to enumerate.
* For example: `album in artist.albums` or `album in artist.albums | orderBy:'name'`.
* @param {expression=} item-width The width of the repeated element. The expression must return
* a number (pixels) or a percentage. Defaults to the width of the first item in the list.
* (previously named collection-item-width)
* @param {expression=} item-height The height of the repeated element. The expression must return
* a number (pixels) or a percentage. Defaults to the height of the first item in the list.
* (previously named collection-item-height)
* @param {number=} item-render-buffer The number of items to load before and after the visible
* items in the list. Default 3. Tip: set this higher if you have lots of images to preload, but
* don't set it too high or you'll see performance loss.
* @param {boolean=} force-refresh-images Force images to refresh as you scroll. This fixes a problem
* where, when an element is interchanged as scrolling, its image will still have the old src
* while the new src loads. Setting this to true comes with a small performance loss.
*/
IonicModule
.directive('collectionRepeat', CollectionRepeatDirective)
.factory('$ionicCollectionManager', RepeatManagerFactory);
var ONE_PX_TRANSPARENT_IMG_SRC = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
var WIDTH_HEIGHT_REGEX = /height:.*?px;\s*width:.*?px/;
var DEFAULT_RENDER_BUFFER = 3;
CollectionRepeatDirective.$inject = ['$ionicCollectionManager', '$parse', '$window', '$$rAF', '$rootScope', '$timeout'];
function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$rAF, $rootScope, $timeout) {
return {
restrict: 'A',
priority: 1000,
transclude: 'element',
$$tlb: true,
require: '^^$ionicScroll',
link: postLink
};
function postLink(scope, element, attr, scrollCtrl, transclude) {
var scrollView = scrollCtrl.scrollView;
var node = element[0];
var containerNode = angular.element('
')[0];
node.parentNode.replaceChild(containerNode, node);
if (scrollView.options.scrollingX && scrollView.options.scrollingY) {
throw new Error("collection-repeat expected a parent x or y scrollView, not " +
"an xy scrollView.");
}
var repeatExpr = attr.collectionRepeat;
var match = repeatExpr.match(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?\s*$/);
if (!match) {
throw new Error("collection-repeat expected expression in form of '_item_ in " +
"_collection_[ track by _id_]' but got '" + attr.collectionRepeat + "'.");
}
var keyExpr = match[1];
var listExpr = match[2];
var listGetter = $parse(listExpr);
var heightData = {};
var widthData = {};
var computedStyleDimensions = {};
var data = [];
var repeatManager;
// attr.collectionBufferSize is deprecated
var renderBufferExpr = attr.itemRenderBuffer || attr.collectionBufferSize;
var renderBuffer = angular.isDefined(renderBufferExpr) ?
parseInt(renderBufferExpr) :
DEFAULT_RENDER_BUFFER;
// attr.collectionItemHeight is deprecated
var heightExpr = attr.itemHeight || attr.collectionItemHeight;
// attr.collectionItemWidth is deprecated
var widthExpr = attr.itemWidth || attr.collectionItemWidth;
var afterItemsContainer = initAfterItemsContainer();
var changeValidator = makeChangeValidator();
initDimensions();
// Dimensions are refreshed on resize or data change.
scrollCtrl.$element.on('scroll-resize', refreshDimensions);
angular.element($window).on('resize', onResize);
var unlistenToExposeAside = $rootScope.$on('$ionicExposeAside', ionic.animationFrameThrottle(function() {
scrollCtrl.scrollView.resize();
onResize();
}));
$timeout(refreshDimensions, 0, false);
function onResize() {
if (changeValidator.resizeRequiresRefresh(scrollView.__clientWidth, scrollView.__clientHeight)) {
refreshDimensions();
}
}
scope.$watchCollection(listGetter, function(newValue) {
data = newValue || (newValue = []);
if (!angular.isArray(newValue)) {
throw new Error("collection-repeat expected an array for '" + listExpr + "', " +
"but got a " + typeof value);
}
// Wait for this digest to end before refreshing everything.
scope.$$postDigest(function() {
getRepeatManager().setData(data);
if (changeValidator.dataChangeRequiresRefresh(data)) refreshDimensions();
});
});
scope.$on('$destroy', function() {
angular.element($window).off('resize', onResize);
unlistenToExposeAside();
scrollCtrl.$element && scrollCtrl.$element.off('scroll-resize', refreshDimensions);
computedStyleNode && computedStyleNode.parentNode &&
computedStyleNode.parentNode.removeChild(computedStyleNode);
computedStyleScope && computedStyleScope.$destroy();
computedStyleScope = computedStyleNode = null;
repeatManager && repeatManager.destroy();
repeatManager = null;
});
function makeChangeValidator() {
var self;
return (self = {
dataLength: 0,
width: 0,
height: 0,
// A resize triggers a refresh only if we have data, the scrollView has size,
// and the size has changed.
resizeRequiresRefresh: function(newWidth, newHeight) {
var requiresRefresh = self.dataLength && newWidth && newHeight &&
(newWidth !== self.width || newHeight !== self.height);
self.width = newWidth;
self.height = newHeight;
return !!requiresRefresh;
},
// A change in data only triggers a refresh if the data has length, or if the data's
// length is less than before.
dataChangeRequiresRefresh: function(newData) {
var requiresRefresh = newData.length > 0 || newData.length < self.dataLength;
self.dataLength = newData.length;
return !!requiresRefresh;
}
});
}
function getRepeatManager() {
return repeatManager || (repeatManager = new $ionicCollectionManager({
afterItemsNode: afterItemsContainer[0],
containerNode: containerNode,
heightData: heightData,
widthData: widthData,
forceRefreshImages: !!(isDefined(attr.forceRefreshImages) && attr.forceRefreshImages !== 'false'),
keyExpression: keyExpr,
renderBuffer: renderBuffer,
scope: scope,
scrollView: scrollCtrl.scrollView,
transclude: transclude
}));
}
function initAfterItemsContainer() {
var container = angular.element(
scrollView.__content.querySelector('.collection-repeat-after-container')
);
// Put everything in the view after the repeater into a container.
if (!container.length) {
var elementIsAfterRepeater = false;
var afterNodes = [].filter.call(scrollView.__content.childNodes, function(node) {
if (ionic.DomUtil.contains(node, containerNode)) {
elementIsAfterRepeater = true;
return false;
}
return elementIsAfterRepeater;
});
container = angular.element('
');
if (scrollView.options.scrollingX) {
container.addClass('horizontal');
}
container.append(afterNodes);
scrollView.__content.appendChild(container[0]);
}
return container;
}
function initDimensions() {
//Height and width have four 'modes':
//1) Computed Mode
// - Nothing is supplied, so we getComputedStyle() on one element in the list and use
// that width and height value for the width and height of every item. This is re-computed
// every resize.
//2) Constant Mode, Static Integer
// - The user provides a constant number for width or height, in pixels. We parse it,
// store it on the `value` field, and it never changes
//3) Constant Mode, Percent
// - The user provides a percent string for width or height. The getter for percent is
// stored on the `getValue()` field, and is re-evaluated once every resize. The result
// is stored on the `value` field.
//4) Dynamic Mode
// - The user provides a dynamic expression for the width or height. This is re-evaluated
// for every item, stored on the `.getValue()` field.
if (heightExpr) {
parseDimensionAttr(heightExpr, heightData);
} else {
heightData.computed = true;
}
if (widthExpr) {
parseDimensionAttr(widthExpr, widthData);
} else {
widthData.computed = true;
}
}
function refreshDimensions() {
var hasData = data.length > 0;
if (hasData && (heightData.computed || widthData.computed)) {
computeStyleDimensions();
}
if (hasData && heightData.computed) {
heightData.value = computedStyleDimensions.height;
if (!heightData.value) {
throw new Error('collection-repeat tried to compute the height of repeated elements "' +
repeatExpr + '", but was unable to. Please provide the "item-height" attribute. ' +
'http://ionicframework.com/docs/api/directive/collectionRepeat/');
}
} else if (!heightData.dynamic && heightData.getValue) {
// If it's a constant with a getter (eg percent), we just refresh .value after resize
heightData.value = heightData.getValue();
}
if (hasData && widthData.computed) {
widthData.value = computedStyleDimensions.width;
if (!widthData.value) {
throw new Error('collection-repeat tried to compute the width of repeated elements "' +
repeatExpr + '", but was unable to. Please provide the "item-width" attribute. ' +
'http://ionicframework.com/docs/api/directive/collectionRepeat/');
}
} else if (!widthData.dynamic && widthData.getValue) {
// If it's a constant with a getter (eg percent), we just refresh .value after resize
widthData.value = widthData.getValue();
}
// Dynamic dimensions aren't updated on resize. Since they're already dynamic anyway,
// .getValue() will be used.
getRepeatManager().refreshLayout();
}
function parseDimensionAttr(attrValue, dimensionData) {
if (!attrValue) return;
var parsedValue;
// Try to just parse the plain attr value
try {
parsedValue = $parse(attrValue);
} catch (e) {
// If the parse fails and the value has `px` or `%` in it, surround the attr in
// quotes, to attempt to let the user provide a simple `attr="100%"` or `attr="100px"`
if (attrValue.trim().match(/\d+(px|%)$/)) {
attrValue = '"' + attrValue + '"';
}
parsedValue = $parse(attrValue);
}
var constantAttrValue = attrValue.replace(/(\'|\"|px|%)/g, '').trim();
var isConstant = constantAttrValue.length && !/([a-zA-Z]|\$|:|\?)/.test(constantAttrValue);
dimensionData.attrValue = attrValue;
// If it's a constant, it's either a percent or just a constant pixel number.
if (isConstant) {
// For percents, store the percent getter on .getValue()
if (attrValue.indexOf('%') > -1) {
var decimalValue = parseFloat(parsedValue()) / 100;
dimensionData.getValue = dimensionData === heightData ?
function() { return Math.floor(decimalValue * scrollView.__clientHeight); } :
function() { return Math.floor(decimalValue * scrollView.__clientWidth); };
} else {
// For static constants, just store the static constant.
dimensionData.value = parseInt(parsedValue());
}
} else {
dimensionData.dynamic = true;
dimensionData.getValue = dimensionData === heightData ?
function heightGetter(scope, locals) {
var result = parsedValue(scope, locals);
if (result.charAt && result.charAt(result.length - 1) === '%') {
return Math.floor(parseFloat(result) / 100 * scrollView.__clientHeight);
}
return parseInt(result);
} :
function widthGetter(scope, locals) {
var result = parsedValue(scope, locals);
if (result.charAt && result.charAt(result.length - 1) === '%') {
return Math.floor(parseFloat(result) / 100 * scrollView.__clientWidth);
}
return parseInt(result);
};
}
}
var computedStyleNode;
var computedStyleScope;
function computeStyleDimensions() {
if (!computedStyleNode) {
transclude(computedStyleScope = scope.$new(), function(clone) {
clone[0].removeAttribute('collection-repeat'); // remove absolute position styling
computedStyleNode = clone[0];
});
}
computedStyleScope[keyExpr] = (listGetter(scope) || [])[0];
if (!$rootScope.$$phase) computedStyleScope.$digest();
containerNode.appendChild(computedStyleNode);
var style = $window.getComputedStyle(computedStyleNode);
computedStyleDimensions.width = parseInt(style.width);
computedStyleDimensions.height = parseInt(style.height);
containerNode.removeChild(computedStyleNode);
}
}
}
RepeatManagerFactory.$inject = ['$rootScope', '$window', '$$rAF'];
function RepeatManagerFactory($rootScope, $window, $$rAF) {
var EMPTY_DIMENSION = { primaryPos: 0, secondaryPos: 0, primarySize: 0, secondarySize: 0, rowPrimarySize: 0 };
return function RepeatController(options) {
var afterItemsNode = options.afterItemsNode;
var containerNode = options.containerNode;
var forceRefreshImages = options.forceRefreshImages;
var heightData = options.heightData;
var widthData = options.widthData;
var keyExpression = options.keyExpression;
var renderBuffer = options.renderBuffer;
var scope = options.scope;
var scrollView = options.scrollView;
var transclude = options.transclude;
var data = [];
var getterLocals = {};
var heightFn = heightData.getValue || function() { return heightData.value; };
var heightGetter = function(index, value) {
getterLocals[keyExpression] = value;
getterLocals.$index = index;
return heightFn(scope, getterLocals);
};
var widthFn = widthData.getValue || function() { return widthData.value; };
var widthGetter = function(index, value) {
getterLocals[keyExpression] = value;
getterLocals.$index = index;
return widthFn(scope, getterLocals);
};
var isVertical = !!scrollView.options.scrollingY;
// We say it's a grid view if we're either dynamic or not 100% width
var isGridView = isVertical ?
(widthData.dynamic || widthData.value !== scrollView.__clientWidth) :
(heightData.dynamic || heightData.value !== scrollView.__clientHeight);
var isStaticView = !heightData.dynamic && !widthData.dynamic;
var PRIMARY = 'PRIMARY';
var SECONDARY = 'SECONDARY';
var TRANSLATE_TEMPLATE_STR = isVertical ?
'translate3d(SECONDARYpx,PRIMARYpx,0)' :
'translate3d(PRIMARYpx,SECONDARYpx,0)';
var WIDTH_HEIGHT_TEMPLATE_STR = isVertical ?
'height: PRIMARYpx; width: SECONDARYpx;' :
'height: SECONDARYpx; width: PRIMARYpx;';
var estimatedHeight;
var estimatedWidth;
var repeaterBeforeSize = 0;
var repeaterAfterSize = 0;
var renderStartIndex = -1;
var renderEndIndex = -1;
var renderAfterBoundary = -1;
var renderBeforeBoundary = -1;
var itemsPool = [];
var itemsLeaving = [];
var itemsEntering = [];
var itemsShownMap = {};
var nextItemId = 0;
var scrollViewSetDimensions = isVertical ?
function() { scrollView.setDimensions(null, null, null, view.getContentSize(), true); } :
function() { scrollView.setDimensions(null, null, view.getContentSize(), null, true); };
// view is a mix of list/grid methods + static/dynamic methods.
// See bottom for implementations. Available methods:
//
// getEstimatedPrimaryPos(i), getEstimatedSecondaryPos(i), getEstimatedIndex(scrollTop),
// calculateDimensions(toIndex), getDimensions(index),
// updateRenderRange(scrollTop, scrollValueEnd), onRefreshLayout(), onRefreshData()
var view = isVertical ? new VerticalViewType() : new HorizontalViewType();
(isGridView ? GridViewType : ListViewType).call(view);
(isStaticView ? StaticViewType : DynamicViewType).call(view);
var contentSizeStr = isVertical ? 'getContentHeight' : 'getContentWidth';
var originalGetContentSize = scrollView.options[contentSizeStr];
scrollView.options[contentSizeStr] = angular.bind(view, view.getContentSize);
scrollView.__$callback = scrollView.__callback;
scrollView.__callback = function(transformLeft, transformTop, zoom, wasResize) {
var scrollValue = view.getScrollValue();
if (renderStartIndex === -1 ||
scrollValue + view.scrollPrimarySize > renderAfterBoundary ||
scrollValue < renderBeforeBoundary) {
render();
}
scrollView.__$callback(transformLeft, transformTop, zoom, wasResize);
};
var isLayoutReady = false;
var isDataReady = false;
this.refreshLayout = function() {
if (data.length) {
estimatedHeight = heightGetter(0, data[0]);
estimatedWidth = widthGetter(0, data[0]);
} else {
// If we don't have any data in our array, just guess.
estimatedHeight = 100;
estimatedWidth = 100;
}
// Get the size of every element AFTER the repeater. We have to get the margin before and
// after the first/last element to fix a browser bug with getComputedStyle() not counting
// the first/last child's margins into height.
var style = getComputedStyle(afterItemsNode) || {};
var firstStyle = afterItemsNode.firstElementChild && getComputedStyle(afterItemsNode.firstElementChild) || {};
var lastStyle = afterItemsNode.lastElementChild && getComputedStyle(afterItemsNode.lastElementChild) || {};
repeaterAfterSize = (parseInt(style[isVertical ? 'height' : 'width']) || 0) +
(firstStyle && parseInt(firstStyle[isVertical ? 'marginTop' : 'marginLeft']) || 0) +
(lastStyle && parseInt(lastStyle[isVertical ? 'marginBottom' : 'marginRight']) || 0);
// Get the offsetTop of the repeater.
repeaterBeforeSize = 0;
var current = containerNode;
do {
repeaterBeforeSize += current[isVertical ? 'offsetTop' : 'offsetLeft'];
} while ( ionic.DomUtil.contains(scrollView.__content, current = current.offsetParent) );
var containerPrevNode = containerNode.previousElementSibling;
var beforeStyle = containerPrevNode ? $window.getComputedStyle(containerPrevNode) : {};
var beforeMargin = parseInt(beforeStyle[isVertical ? 'marginBottom' : 'marginRight'] || 0);
// Because we position the collection container with position: relative, it doesn't take
// into account where to position itself relative to the previous element's marginBottom.
// To compensate, we translate the container up by the previous element's margin.
containerNode.style[ionic.CSS.TRANSFORM] = TRANSLATE_TEMPLATE_STR
.replace(PRIMARY, -beforeMargin)
.replace(SECONDARY, 0);
repeaterBeforeSize -= beforeMargin;
if (!scrollView.__clientHeight || !scrollView.__clientWidth) {
scrollView.__clientWidth = scrollView.__container.clientWidth;
scrollView.__clientHeight = scrollView.__container.clientHeight;
}
(view.onRefreshLayout || angular.noop)();
view.refreshDirection();
scrollViewSetDimensions();
// Create the pool of items for reuse, setting the size to (estimatedItemsOnScreen) * 2,
// plus the size of the renderBuffer.
if (!isLayoutReady) {
var poolSize = Math.max(20, renderBuffer * 3);
for (var i = 0; i < poolSize; i++) {
itemsPool.push(new RepeatItem());
}
}
isLayoutReady = true;
if (isLayoutReady && isDataReady) {
// If the resize or latest data change caused the scrollValue to
// now be out of bounds, resize the scrollView.
if (scrollView.__scrollLeft > scrollView.__maxScrollLeft ||
scrollView.__scrollTop > scrollView.__maxScrollTop) {
scrollView.resize();
}
forceRerender(true);
}
};
this.setData = function(newData) {
data = newData;
(view.onRefreshData || angular.noop)();
isDataReady = true;
};
this.destroy = function() {
render.destroyed = true;
itemsPool.forEach(function(item) {
item.scope.$destroy();
item.scope = item.element = item.node = item.images = null;
});
itemsPool.length = itemsEntering.length = itemsLeaving.length = 0;
itemsShownMap = {};
//Restore the scrollView's normal behavior and resize it to normal size.
scrollView.options[contentSizeStr] = originalGetContentSize;
scrollView.__callback = scrollView.__$callback;
scrollView.resize();
(view.onDestroy || angular.noop)();
};
function forceRerender() {
return render(true);
}
function render(forceRerender) {
if (render.destroyed) return;
var i;
var ii;
var item;
var dim;
var scope;
var scrollValue = view.getScrollValue();
var scrollValueEnd = scrollValue + view.scrollPrimarySize;
view.updateRenderRange(scrollValue, scrollValueEnd);
renderStartIndex = Math.max(0, renderStartIndex - renderBuffer);
renderEndIndex = Math.min(data.length - 1, renderEndIndex + renderBuffer);
for (i in itemsShownMap) {
if (i < renderStartIndex || i > renderEndIndex) {
item = itemsShownMap[i];
delete itemsShownMap[i];
itemsLeaving.push(item);
item.isShown = false;
}
}
// Render indicies that aren't shown yet
//
// NOTE(ajoslin): this may sound crazy, but calling any other functions during this render
// loop will often push the render time over the edge from less than one frame to over
// one frame, causing visible jank.
// DON'T call any other functions inside this loop unless it's vital.
for (i = renderStartIndex; i <= renderEndIndex; i++) {
// We only go forward with render if the index is in data, the item isn't already shown,
// or forceRerender is on.
if (i >= data.length || (itemsShownMap[i] && !forceRerender)) continue;
item = itemsShownMap[i] || (itemsShownMap[i] = itemsLeaving.length ? itemsLeaving.pop() :
itemsPool.length ? itemsPool.shift() :
new RepeatItem());
itemsEntering.push(item);
item.isShown = true;
scope = item.scope;
scope.$index = i;
scope[keyExpression] = data[i];
scope.$first = (i === 0);
scope.$last = (i === (data.length - 1));
scope.$middle = !(scope.$first || scope.$last);
scope.$odd = !(scope.$even = (i & 1) === 0);
if (scope.$$disconnected) ionic.Utils.reconnectScope(item.scope);
dim = view.getDimensions(i);
if (item.secondaryPos !== dim.secondaryPos || item.primaryPos !== dim.primaryPos) {
item.node.style[ionic.CSS.TRANSFORM] = TRANSLATE_TEMPLATE_STR
.replace(PRIMARY, (item.primaryPos = dim.primaryPos))
.replace(SECONDARY, (item.secondaryPos = dim.secondaryPos));
}
if (item.secondarySize !== dim.secondarySize || item.primarySize !== dim.primarySize) {
item.node.style.cssText = item.node.style.cssText
.replace(WIDTH_HEIGHT_REGEX, WIDTH_HEIGHT_TEMPLATE_STR
//TODO fix item.primarySize + 1 hack
.replace(PRIMARY, (item.primarySize = dim.primarySize) + 1)
.replace(SECONDARY, (item.secondarySize = dim.secondarySize))
);
}
}
// If we reach the end of the list, render the afterItemsNode - this contains all the
// elements the developer placed after the collection-repeat
if (renderEndIndex === data.length - 1) {
dim = view.getDimensions(data.length - 1) || EMPTY_DIMENSION;
afterItemsNode.style[ionic.CSS.TRANSFORM] = TRANSLATE_TEMPLATE_STR
.replace(PRIMARY, dim.primaryPos + dim.primarySize)
.replace(SECONDARY, 0);
}
while (itemsLeaving.length) {
item = itemsLeaving.pop();
item.scope.$broadcast('$collectionRepeatLeave');
ionic.Utils.disconnectScope(item.scope);
itemsPool.push(item);
item.node.style[ionic.CSS.TRANSFORM] = 'translate3d(-9999px,-9999px,0)';
item.primaryPos = item.secondaryPos = null;
}
if (forceRefreshImages) {
for (i = 0, ii = itemsEntering.length; i < ii && (item = itemsEntering[i]); i++) {
if (!item.images) continue;
for (var j = 0, jj = item.images.length, img; j < jj && (img = item.images[j]); j++) {
var src = img.src;
img.src = ONE_PX_TRANSPARENT_IMG_SRC;
img.src = src;
}
}
}
if (forceRerender) {
var rootScopePhase = $rootScope.$$phase;
while (itemsEntering.length) {
item = itemsEntering.pop();
if (!rootScopePhase) item.scope.$digest();
}
} else {
digestEnteringItems();
}
}
function digestEnteringItems() {
var item;
if (digestEnteringItems.running) return;
digestEnteringItems.running = true;
$$rAF(function process() {
var rootScopePhase = $rootScope.$$phase;
while (itemsEntering.length) {
item = itemsEntering.pop();
if (item.isShown) {
if (!rootScopePhase) item.scope.$digest();
}
}
digestEnteringItems.running = false;
});
}
function RepeatItem() {
var self = this;
this.scope = scope.$new();
this.id = 'item' + (nextItemId++);
transclude(this.scope, function(clone) {
self.element = clone;
self.element.data('$$collectionRepeatItem', self);
// TODO destroy
self.node = clone[0];
// Batch style setting to lower repaints
self.node.style[ionic.CSS.TRANSFORM] = 'translate3d(-9999px,-9999px,0)';
self.node.style.cssText += ' height: 0px; width: 0px;';
ionic.Utils.disconnectScope(self.scope);
containerNode.appendChild(self.node);
self.images = clone[0].getElementsByTagName('img');
});
}
function VerticalViewType() {
this.getItemPrimarySize = heightGetter;
this.getItemSecondarySize = widthGetter;
this.getScrollValue = function() {
return Math.max(0, Math.min(scrollView.__scrollTop - repeaterBeforeSize,
scrollView.__maxScrollTop - repeaterBeforeSize - repeaterAfterSize));
};
this.refreshDirection = function() {
this.scrollPrimarySize = scrollView.__clientHeight;
this.scrollSecondarySize = scrollView.__clientWidth;
this.estimatedPrimarySize = estimatedHeight;
this.estimatedSecondarySize = estimatedWidth;
this.estimatedItemsAcross = isGridView &&
Math.floor(scrollView.__clientWidth / estimatedWidth) ||
1;
};
}
function HorizontalViewType() {
this.getItemPrimarySize = widthGetter;
this.getItemSecondarySize = heightGetter;
this.getScrollValue = function() {
return Math.max(0, Math.min(scrollView.__scrollLeft - repeaterBeforeSize,
scrollView.__maxScrollLeft - repeaterBeforeSize - repeaterAfterSize));
};
this.refreshDirection = function() {
this.scrollPrimarySize = scrollView.__clientWidth;
this.scrollSecondarySize = scrollView.__clientHeight;
this.estimatedPrimarySize = estimatedWidth;
this.estimatedSecondarySize = estimatedHeight;
this.estimatedItemsAcross = isGridView &&
Math.floor(scrollView.__clientHeight / estimatedHeight) ||
1;
};
}
function GridViewType() {
this.getEstimatedSecondaryPos = function(index) {
return (index % this.estimatedItemsAcross) * this.estimatedSecondarySize;
};
this.getEstimatedPrimaryPos = function(index) {
return Math.floor(index / this.estimatedItemsAcross) * this.estimatedPrimarySize;
};
this.getEstimatedIndex = function(scrollValue) {
return Math.floor(scrollValue / this.estimatedPrimarySize) *
this.estimatedItemsAcross;
};
}
function ListViewType() {
this.getEstimatedSecondaryPos = function() {
return 0;
};
this.getEstimatedPrimaryPos = function(index) {
return index * this.estimatedPrimarySize;
};
this.getEstimatedIndex = function(scrollValue) {
return Math.floor((scrollValue) / this.estimatedPrimarySize);
};
}
function StaticViewType() {
this.getContentSize = function() {
return this.getEstimatedPrimaryPos(data.length - 1) + this.estimatedPrimarySize +
repeaterBeforeSize + repeaterAfterSize;
};
// static view always returns the same object for getDimensions, to avoid memory allocation
// while scrolling. This could be dangerous if this was a public function, but it's not.
// Only we use it.
var dim = {};
this.getDimensions = function(index) {
dim.primaryPos = this.getEstimatedPrimaryPos(index);
dim.secondaryPos = this.getEstimatedSecondaryPos(index);
dim.primarySize = this.estimatedPrimarySize;
dim.secondarySize = this.estimatedSecondarySize;
return dim;
};
this.updateRenderRange = function(scrollValue, scrollValueEnd) {
renderStartIndex = Math.max(0, this.getEstimatedIndex(scrollValue));
// Make sure the renderEndIndex takes into account all the items on the row
renderEndIndex = Math.min(data.length - 1,
this.getEstimatedIndex(scrollValueEnd) + this.estimatedItemsAcross - 1);
renderBeforeBoundary = Math.max(0,
this.getEstimatedPrimaryPos(renderStartIndex));
renderAfterBoundary = this.getEstimatedPrimaryPos(renderEndIndex) +
this.estimatedPrimarySize;
};
}
function DynamicViewType() {
var self = this;
var debouncedScrollViewSetDimensions = ionic.debounce(scrollViewSetDimensions, 25, true);
var calculateDimensions = isGridView ? calculateDimensionsGrid : calculateDimensionsList;
var dimensionsIndex;
var dimensions = [];
// Get the dimensions at index. {width, height, left, top}.
// We start with no dimensions calculated, then any time dimensions are asked for at an
// index we calculate dimensions up to there.
function calculateDimensionsList(toIndex) {
var i, prevDimension, dim;
for (i = Math.max(0, dimensionsIndex); i <= toIndex && (dim = dimensions[i]); i++) {
prevDimension = dimensions[i - 1] || EMPTY_DIMENSION;
dim.primarySize = self.getItemPrimarySize(i, data[i]);
dim.secondarySize = self.scrollSecondarySize;
dim.primaryPos = prevDimension.primaryPos + prevDimension.primarySize;
dim.secondaryPos = 0;
}
}
function calculateDimensionsGrid(toIndex) {
var i, prevDimension, dim;
for (i = Math.max(dimensionsIndex, 0); i <= toIndex && (dim = dimensions[i]); i++) {
prevDimension = dimensions[i - 1] || EMPTY_DIMENSION;
dim.secondarySize = Math.min(
self.getItemSecondarySize(i, data[i]),
self.scrollSecondarySize
);
dim.secondaryPos = prevDimension.secondaryPos + prevDimension.secondarySize;
if (i === 0 || dim.secondaryPos + dim.secondarySize > self.scrollSecondarySize) {
dim.secondaryPos = 0;
dim.primarySize = self.getItemPrimarySize(i, data[i]);
dim.primaryPos = prevDimension.primaryPos + prevDimension.rowPrimarySize;
dim.rowStartIndex = i;
dim.rowPrimarySize = dim.primarySize;
} else {
dim.primarySize = self.getItemPrimarySize(i, data[i]);
dim.primaryPos = prevDimension.primaryPos;
dim.rowStartIndex = prevDimension.rowStartIndex;
dimensions[dim.rowStartIndex].rowPrimarySize = dim.rowPrimarySize = Math.max(
dimensions[dim.rowStartIndex].rowPrimarySize,
dim.primarySize
);
dim.rowPrimarySize = Math.max(dim.primarySize, dim.rowPrimarySize);
}
}
}
this.getContentSize = function() {
var dim = dimensions[dimensionsIndex] || EMPTY_DIMENSION;
return ((dim.primaryPos + dim.primarySize) || 0) +
this.getEstimatedPrimaryPos(data.length - dimensionsIndex - 1) +
repeaterBeforeSize + repeaterAfterSize;
};
this.onDestroy = function() {
dimensions.length = 0;
};
this.onRefreshData = function() {
var i;
var ii;
// Make sure dimensions has as many items as data.length.
// This is to be sure we don't have to allocate objects while scrolling.
for (i = dimensions.length, ii = data.length; i < ii; i++) {
dimensions.push({});
}
dimensionsIndex = -1;
};
this.onRefreshLayout = function() {
dimensionsIndex = -1;
};
this.getDimensions = function(index) {
index = Math.min(index, data.length - 1);
if (dimensionsIndex < index) {
// Once we start asking for dimensions near the end of the list, go ahead and calculate
// everything. This is to make sure when the user gets to the end of the list, the
// scroll height of the list is 100% accurate (not estimated anymore).
if (index > data.length * 0.9) {
calculateDimensions(data.length - 1);
dimensionsIndex = data.length - 1;
scrollViewSetDimensions();
} else {
calculateDimensions(index);
dimensionsIndex = index;
debouncedScrollViewSetDimensions();
}
}
return dimensions[index];
};
var oldRenderStartIndex = -1;
var oldScrollValue = -1;
this.updateRenderRange = function(scrollValue, scrollValueEnd) {
var i;
var len;
var dim;
// Calculate more dimensions than we estimate we'll need, to be sure.
this.getDimensions( this.getEstimatedIndex(scrollValueEnd) * 2 );
// -- Calculate renderStartIndex
// base case: start at 0
if (oldRenderStartIndex === -1 || scrollValue === 0) {
i = 0;
// scrolling down
} else if (scrollValue >= oldScrollValue) {
for (i = oldRenderStartIndex, len = data.length; i < len; i++) {
if ((dim = this.getDimensions(i)) && dim.primaryPos + dim.rowPrimarySize >= scrollValue) {
break;
}
}
// scrolling up
} else {
for (i = oldRenderStartIndex; i >= 0; i--) {
if ((dim = this.getDimensions(i)) && dim.primaryPos <= scrollValue) {
// when grid view, make sure the render starts at the beginning of a row.
i = isGridView ? dim.rowStartIndex : i;
break;
}
}
}
renderStartIndex = Math.min(Math.max(0, i), data.length - 1);
renderBeforeBoundary = renderStartIndex !== -1 ? this.getDimensions(renderStartIndex).primaryPos : -1;
// -- Calculate renderEndIndex
var lastRowDim;
for (i = renderStartIndex + 1, len = data.length; i < len; i++) {
if ((dim = this.getDimensions(i)) && dim.primaryPos + dim.rowPrimarySize > scrollValueEnd) {
// Go all the way to the end of the row if we're in a grid
if (isGridView) {
lastRowDim = dim;
while (i < len - 1 &&
(dim = this.getDimensions(i + 1)).primaryPos === lastRowDim.primaryPos) {
i++;
}
}
break;
}
}
renderEndIndex = Math.min(i, data.length - 1);
renderAfterBoundary = renderEndIndex !== -1 ?
((dim = this.getDimensions(renderEndIndex)).primaryPos + (dim.rowPrimarySize || dim.primarySize)) :
-1;
oldScrollValue = scrollValue;
oldRenderStartIndex = renderStartIndex;
};
}
};
}
/**
* @ngdoc directive
* @name ionContent
* @module ionic
* @delegate ionic.service:$ionicScrollDelegate
* @restrict E
*
* @description
* The ionContent directive provides an easy to use content area that can be configured
* to use Ionic's custom Scroll View, or the built in overflow scrolling of the browser.
*
* While we recommend using the custom Scroll features in Ionic in most cases, sometimes
* (for performance reasons) only the browser's native overflow scrolling will suffice,
* and so we've made it easy to toggle between the Ionic scroll implementation and
* overflow scrolling.
*
* You can implement pull-to-refresh with the {@link ionic.directive:ionRefresher}
* directive, and infinite scrolling with the {@link ionic.directive:ionInfiniteScroll}
* directive.
*
* If there is any dynamic content inside the ion-content, be sure to call `.resize()` with {@link ionic.service:$ionicScrollDelegate}
* after the content has been added.
*
* Be aware that this directive gets its own child scope. If you do not understand why this
* is important, you can read [https://docs.angularjs.org/guide/scope](https://docs.angularjs.org/guide/scope).
*
* @param {string=} delegate-handle The handle used to identify this scrollView
* with {@link ionic.service:$ionicScrollDelegate}.
* @param {string=} direction Which way to scroll. 'x' or 'y' or 'xy'. Default 'y'.
* @param {boolean=} locking Whether to lock scrolling in one direction at a time. Useful to set to false when zoomed in or scrolling in two directions. Default true.
* @param {boolean=} padding Whether to add padding to the content.
* Defaults to true on iOS, false on Android.
* @param {boolean=} scroll Whether to allow scrolling of content. Defaults to true.
* @param {boolean=} overflow-scroll Whether to use overflow-scrolling instead of
* Ionic scroll. See {@link ionic.provider:$ionicConfigProvider} to set this as the global default.
* @param {boolean=} scrollbar-x Whether to show the horizontal scrollbar. Default true.
* @param {boolean=} scrollbar-y Whether to show the vertical scrollbar. Default true.
* @param {string=} start-x Initial horizontal scroll position. Default 0.
* @param {string=} start-y Initial vertical scroll position. Default 0.
* @param {expression=} on-scroll Expression to evaluate when the content is scrolled.
* @param {expression=} on-scroll-complete Expression to evaluate when a scroll action completes. Has access to 'scrollLeft' and 'scrollTop' locals.
* @param {boolean=} has-bouncing Whether to allow scrolling to bounce past the edges
* of the content. Defaults to true on iOS, false on Android.
* @param {number=} scroll-event-interval Number of milliseconds between each firing of the 'on-scroll' expression. Default 10.
*/
IonicModule
.directive('ionContent', [
'$timeout',
'$controller',
'$ionicBind',
'$ionicConfig',
function($timeout, $controller, $ionicBind, $ionicConfig) {
return {
restrict: 'E',
require: '^?ionNavView',
scope: true,
priority: 800,
compile: function(element, attr) {
var innerElement;
var scrollCtrl;
element.addClass('scroll-content ionic-scroll');
if (attr.scroll != 'false') {
//We cannot use normal transclude here because it breaks element.data()
//inheritance on compile
innerElement = jqLite('');
innerElement.append(element.contents());
element.append(innerElement);
} else {
element.addClass('scroll-content-false');
}
var nativeScrolling = attr.overflowScroll !== "false" && (attr.overflowScroll === "true" || !$ionicConfig.scrolling.jsScrolling());
// collection-repeat requires JS scrolling
if (nativeScrolling) {
nativeScrolling = !element[0].querySelector('[collection-repeat]');
}
return { pre: prelink };
function prelink($scope, $element, $attr) {
var parentScope = $scope.$parent;
$scope.$watch(function() {
return (parentScope.$hasHeader ? ' has-header' : '') +
(parentScope.$hasSubheader ? ' has-subheader' : '') +
(parentScope.$hasFooter ? ' has-footer' : '') +
(parentScope.$hasSubfooter ? ' has-subfooter' : '') +
(parentScope.$hasTabs ? ' has-tabs' : '') +
(parentScope.$hasTabsTop ? ' has-tabs-top' : '');
}, function(className, oldClassName) {
$element.removeClass(oldClassName);
$element.addClass(className);
});
//Only this ionContent should use these variables from parent scopes
$scope.$hasHeader = $scope.$hasSubheader =
$scope.$hasFooter = $scope.$hasSubfooter =
$scope.$hasTabs = $scope.$hasTabsTop =
false;
$ionicBind($scope, $attr, {
$onScroll: '&onScroll',
$onScrollComplete: '&onScrollComplete',
hasBouncing: '@',
padding: '@',
direction: '@',
scrollbarX: '@',
scrollbarY: '@',
startX: '@',
startY: '@',
scrollEventInterval: '@'
});
$scope.direction = $scope.direction || 'y';
if (isDefined($attr.padding)) {
$scope.$watch($attr.padding, function(newVal) {
(innerElement || $element).toggleClass('padding', !!newVal);
});
}
if ($attr.scroll === "false") {
//do nothing
} else {
var scrollViewOptions = {};
// determined in compile phase above
if (nativeScrolling) {
// use native scrolling
$element.addClass('overflow-scroll');
scrollViewOptions = {
el: $element[0],
delegateHandle: attr.delegateHandle,
startX: $scope.$eval($scope.startX) || 0,
startY: $scope.$eval($scope.startY) || 0,
nativeScrolling: true
};
} else {
// Use JS scrolling
scrollViewOptions = {
el: $element[0],
delegateHandle: attr.delegateHandle,
locking: (attr.locking || 'true') === 'true',
bouncing: $scope.$eval($scope.hasBouncing),
startX: $scope.$eval($scope.startX) || 0,
startY: $scope.$eval($scope.startY) || 0,
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
scrollingX: $scope.direction.indexOf('x') >= 0,
scrollingY: $scope.direction.indexOf('y') >= 0,
scrollEventInterval: parseInt($scope.scrollEventInterval, 10) || 10,
scrollingComplete: onScrollComplete
};
}
// init scroll controller with appropriate options
scrollCtrl = $controller('$ionicScroll', {
$scope: $scope,
scrollViewOptions: scrollViewOptions
});
$scope.scrollCtrl = scrollCtrl;
$scope.$on('$destroy', function() {
if (scrollViewOptions) {
scrollViewOptions.scrollingComplete = noop;
delete scrollViewOptions.el;
}
innerElement = null;
$element = null;
attr.$$element = null;
});
}
function onScrollComplete() {
$scope.$onScrollComplete({
scrollTop: scrollCtrl.scrollView.__scrollTop,
scrollLeft: scrollCtrl.scrollView.__scrollLeft
});
}
}
}
};
}]);
/**
* @ngdoc directive
* @name exposeAsideWhen
* @module ionic
* @restrict A
* @parent ionic.directive:ionSideMenus
*
* @description
* It is common for a tablet application to hide a menu when in portrait mode, but to show the
* same menu on the left side when the tablet is in landscape mode. The `exposeAsideWhen` attribute
* directive can be used to accomplish a similar interface.
*
* By default, side menus are hidden underneath its side menu content, and can be opened by either
* swiping the content left or right, or toggling a button to show the side menu. However, by adding the
* `exposeAsideWhen` attribute directive to an {@link ionic.directive:ionSideMenu} element directive,
* a side menu can be given instructions on "when" the menu should be exposed (always viewable). For
* example, the `expose-aside-when="large"` attribute will keep the side menu hidden when the viewport's
* width is less than `768px`, but when the viewport's width is `768px` or greater, the menu will then
* always be shown and can no longer be opened or closed like it could when it was hidden for smaller
* viewports.
*
* Using `large` as the attribute's value is a shortcut value to `(min-width:768px)` since it is
* the most common use-case. However, for added flexibility, any valid media query could be added
* as the value, such as `(min-width:600px)` or even multiple queries such as
* `(min-width:750px) and (max-width:1200px)`.
* @usage
* ```html
*
*
*
*
*
*
*
*
*
* ```
* For a complete side menu example, see the
* {@link ionic.directive:ionSideMenus} documentation.
*/
IonicModule.directive('exposeAsideWhen', ['$window', function($window) {
return {
restrict: 'A',
require: '^ionSideMenus',
link: function($scope, $element, $attr, sideMenuCtrl) {
var prevInnerWidth = $window.innerWidth;
var prevInnerHeight = $window.innerHeight;
ionic.on('resize', function() {
if (prevInnerWidth === $window.innerWidth && prevInnerHeight === $window.innerHeight) {
return;
}
prevInnerWidth = $window.innerWidth;
prevInnerHeight = $window.innerHeight;
onResize();
}, $window);
function checkAsideExpose() {
var mq = $attr.exposeAsideWhen == 'large' ? '(min-width:768px)' : $attr.exposeAsideWhen;
sideMenuCtrl.exposeAside($window.matchMedia(mq).matches);
sideMenuCtrl.activeAsideResizing(false);
}
function onResize() {
sideMenuCtrl.activeAsideResizing(true);
debouncedCheck();
}
var debouncedCheck = ionic.debounce(function() {
$scope.$apply(checkAsideExpose);
}, 300, false);
$scope.$evalAsync(checkAsideExpose);
}
};
}]);
var GESTURE_DIRECTIVES = 'onHold onTap onDoubleTap onTouch onRelease onDragStart onDrag onDragEnd onDragUp onDragRight onDragDown onDragLeft onSwipe onSwipeUp onSwipeRight onSwipeDown onSwipeLeft'.split(' ');
GESTURE_DIRECTIVES.forEach(function(name) {
IonicModule.directive(name, gestureDirective(name));
});
/**
* @ngdoc directive
* @name onHold
* @module ionic
* @restrict A
*
* @description
* Touch stays at the same location for 500ms. Similar to long touch events available for AngularJS and jQuery.
*
* @usage
* ```html
*
* ```
*/
/**
* @ngdoc directive
* @name onTap
* @module ionic
* @restrict A
*
* @description
* Quick touch at a location. If the duration of the touch goes
* longer than 250ms it is no longer a tap gesture.
*
* @usage
* ```html
*
* ```
*/
/**
* @ngdoc directive
* @name onDoubleTap
* @module ionic
* @restrict A
*
* @description
* Double tap touch at a location.
*
* @usage
* ```html
*
* ```
*/
/**
* @ngdoc directive
* @name onTouch
* @module ionic
* @restrict A
*
* @description
* Called immediately when the user first begins a touch. This
* gesture does not wait for a touchend/mouseup.
*
* @usage
* ```html
*
* ```
*/
/**
* @ngdoc directive
* @name onRelease
* @module ionic
* @restrict A
*
* @description
* Called when the user ends a touch.
*
* @usage
* ```html
*
* ```
*/
/**
* @ngdoc directive
* @name onDragStart
* @module ionic
* @restrict A
*
* @description
* Called when a drag gesture has started.
*
* @usage
* ```html
*
* ```
*/
/**
* @ngdoc directive
* @name onDrag
* @module ionic
* @restrict A
*
* @description
* Move with one touch around on the page. Blocking the scrolling when
* moving left and right is a good practice. When all the drag events are
* blocking you disable scrolling on that area.
*
* @usage
* ```html
*
* ```
*/
/**
* @ngdoc directive
* @name onDragEnd
* @module ionic
* @restrict A
*
* @description
* Called when a drag gesture has ended.
*
* @usage
* ```html
*
* ```
*/
/**
* @ngdoc directive
* @name onDragUp
* @module ionic
* @restrict A
*
* @description
* Called when the element is dragged up.
*
* @usage
* ```html
*
* ```
*/
/**
* @ngdoc directive
* @name onDragRight
* @module ionic
* @restrict A
*
* @description
* Called when the element is dragged to the right.
*
* @usage
* ```html
*
* ```
*/
/**
* @ngdoc directive
* @name onDragDown
* @module ionic
* @restrict A
*
* @description
* Called when the element is dragged down.
*
* @usage
* ```html
*
* ```
*/
/**
* @ngdoc directive
* @name onDragLeft
* @module ionic
* @restrict A
*
* @description
* Called when the element is dragged to the left.
*
* @usage
* ```html
*
* ```
*/
/**
* @ngdoc directive
* @name onSwipe
* @module ionic
* @restrict A
*
* @description
* Called when a moving touch has a high velocity in any direction.
*
* @usage
* ```html
*
* ```
*/
/**
* @ngdoc directive
* @name onSwipeUp
* @module ionic
* @restrict A
*
* @description
* Called when a moving touch has a high velocity moving up.
*
* @usage
* ```html
*
* ```
*/
/**
* @ngdoc directive
* @name onSwipeRight
* @module ionic
* @restrict A
*
* @description
* Called when a moving touch has a high velocity moving to the right.
*
* @usage
* ```html
*
* ```
*/
/**
* @ngdoc directive
* @name onSwipeDown
* @module ionic
* @restrict A
*
* @description
* Called when a moving touch has a high velocity moving down.
*
* @usage
* ```html
*
* ```
*/
/**
* @ngdoc directive
* @name onSwipeLeft
* @module ionic
* @restrict A
*
* @description
* Called when a moving touch has a high velocity moving to the left.
*
* @usage
* ```html
*
* ```
*/
function gestureDirective(directiveName) {
return ['$ionicGesture', '$parse', function($ionicGesture, $parse) {
var eventType = directiveName.substr(2).toLowerCase();
return function(scope, element, attr) {
var fn = $parse( attr[directiveName] );
var listener = function(ev) {
scope.$apply(function() {
fn(scope, {
$event: ev
});
});
};
var gesture = $ionicGesture.on(eventType, listener, element);
scope.$on('$destroy', function() {
$ionicGesture.off(gesture, eventType, listener);
});
};
}];
}
IonicModule
//.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 How to align the title. By default the title
* will be aligned the same as how the platform aligns its titles (iOS centers
* titles, Android aligns them left).
* Available: 'left', 'right', or 'center'. Defaults to the same as the platform.
* @param {boolean=} no-tap-scroll By default, the header bar will scroll the
* content to the top when tapped. Set no-tap-scroll to true to disable this
* behavior.
* Available: true or false. Defaults to false.
*
* @usage
* ```html
*
*
*
*
* Title!
*
*
*
*
*
* ```
*/
.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).
*
* Note: If you use ionFooterBar in combination with ng-if, the surrounding content
* will not align correctly. This will be fixed soon.
*
* @param {string=} align-title Where to align the title.
* Available: 'left', 'right', or 'center'. Defaults to 'center'.
*
* @usage
* ```html
*
*
*
*
*
* Title!
*
*
*
*
* ```
*/
.directive('ionFooterBar', headerFooterBarDirective(false));
function tapScrollToTopDirective() { //eslint-disable-line no-unused-vars
return ['$ionicScrollDelegate', function($ionicScrollDelegate) {
return {
restrict: 'E',
link: function($scope, $element, $attr) {
if ($attr.noTapScroll == 'true') {
return;
}
ionic.on('tap', onTap, $element[0]);
$scope.$on('$destroy', function() {
ionic.off('tap', onTap, $element[0]);
});
function onTap(e) {
var depth = 3;
var current = e.target;
//Don't scroll to top in certain cases
while (depth-- && current) {
if (current.classList.contains('button') ||
current.tagName.match(/input|textarea|select/i) ||
current.isContentEditable) {
return;
}
current = current.parentNode;
}
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 ['$document', '$timeout', function($document, $timeout) {
return {
restrict: 'E',
controller: '$ionicHeaderBar',
compile: function(tElement) {
tElement.addClass(isHeader ? 'bar bar-header' : 'bar bar-footer');
// top style tabs? if so, remove bottom border for seamless display
$timeout(function() {
if (isHeader && $document[0].getElementsByClassName('tabs-top').length) tElement.addClass('has-tabs-top');
});
return { pre: prelink };
function prelink($scope, $element, $attr, ctrl) {
if (isHeader) {
$scope.$watch(function() { return $element[0].className; }, function(value) {
var isShown = value.indexOf('ng-hide') === -1;
var isSubheader = value.indexOf('bar-subheader') !== -1;
$scope.$hasHeader = isShown && !isSubheader;
$scope.$hasSubheader = isShown && isSubheader;
$scope.$emit('$ionicSubheader', $scope.$hasSubheader);
});
$scope.$on('$destroy', function() {
delete $scope.$hasHeader;
delete $scope.$hasSubheader;
});
ctrl.align();
$scope.$on('$ionicHeader.align', function() {
ionic.requestAnimationFrame(function() {
ctrl.align();
});
});
} else {
$scope.$watch(function() { return $element[0].className; }, function(value) {
var isShown = value.indexOf('ng-hide') === -1;
var isSubfooter = value.indexOf('bar-subfooter') !== -1;
$scope.$hasFooter = isShown && !isSubfooter;
$scope.$hasSubfooter = isShown && isSubfooter;
});
$scope.$on('$destroy', function() {
delete $scope.$hasFooter;
delete $scope.$hasSubfooter;
});
$scope.$watch('$hasTabs', function(val) {
$element.toggleClass('has-tabs', !!val);
});
ctrl.align();
$scope.$on('$ionicFooter.align', function() {
ionic.requestAnimationFrame(function() {
ctrl.align();
});
});
}
}
}
};
}];
}
/**
* @ngdoc directive
* @name ionInfiniteScroll
* @module ionic
* @parent ionic.directive:ionContent, ionic.directive:ionScroll
* @restrict E
*
* @description
* The ionInfiniteScroll directive allows you to call a function whenever
* the user gets to the bottom of the page or near the bottom of the page.
*
* The expression you pass in for `on-infinite` is called when the user scrolls
* greater than `distance` away from the bottom of the content. Once `on-infinite`
* is done loading new data, it should broadcast the `scroll.infiniteScrollComplete`
* event from your controller (see below example).
*
* @param {expression} on-infinite What to call when the scroller reaches the
* bottom.
* @param {string=} distance The distance from the bottom that the scroll must
* reach to trigger the on-infinite expression. Default: 1%.
* @param {string=} spinner The {@link ionic.directive:ionSpinner} to show while loading. The SVG
* {@link ionic.directive:ionSpinner} is now the default, replacing rotating font icons.
* @param {string=} icon The icon to show while loading. Default: 'ion-load-d'. This is depreicated
* in favor of the SVG {@link ionic.directive:ionSpinner}.
* @param {boolean=} immediate-check Whether to check the infinite scroll bounds immediately on load.
*
* @usage
* ```html
*
*
* ....
* ....
*
*
*
*
*
* ```
* ```js
* function MyController($scope, $http) {
* $scope.items = [];
* $scope.loadMore = function() {
* $http.get('/more-items').success(function(items) {
* useItems(items);
* $scope.$broadcast('scroll.infiniteScrollComplete');
* });
* };
*
* $scope.$on('$stateChangeSuccess', function() {
* $scope.loadMore();
* });
* }
* ```
*
* An easy to way to stop infinite scroll once there is no more data to load
* is to use angular's `ng-if` directive:
*
* ```html
*
*
* ```
*/
IonicModule
.directive('ionInfiniteScroll', ['$timeout', function($timeout) {
return {
restrict: 'E',
require: ['?^$ionicScroll', 'ionInfiniteScroll'],
template: function($element, $attrs) {
if ($attrs.icon) return '';
return '';
},
scope: true,
controller: '$ionInfiniteScroll',
link: function($scope, $element, $attrs, ctrls) {
var infiniteScrollCtrl = ctrls[1];
var scrollCtrl = infiniteScrollCtrl.scrollCtrl = ctrls[0];
var jsScrolling = infiniteScrollCtrl.jsScrolling = !scrollCtrl.isNative();
// if this view is not beneath a scrollCtrl, it can't be injected, proceed w/ native scrolling
if (jsScrolling) {
infiniteScrollCtrl.scrollView = scrollCtrl.scrollView;
$scope.scrollingType = 'js-scrolling';
//bind to JS scroll events
scrollCtrl.$element.on('scroll', infiniteScrollCtrl.checkBounds);
} else {
// grabbing the scrollable element, to determine dimensions, and current scroll pos
var scrollEl = ionic.DomUtil.getParentOrSelfWithClass($element[0].parentNode, 'overflow-scroll');
infiniteScrollCtrl.scrollEl = scrollEl;
// if there's no scroll controller, and no overflow scroll div, infinite scroll wont work
if (!scrollEl) {
throw 'Infinite scroll must be used inside a scrollable div';
}
//bind to native scroll events
infiniteScrollCtrl.scrollEl.addEventListener('scroll', infiniteScrollCtrl.checkBounds);
}
// Optionally check bounds on start after scrollView is fully rendered
var doImmediateCheck = isDefined($attrs.immediateCheck) ? $scope.$eval($attrs.immediateCheck) : true;
if (doImmediateCheck) {
$timeout(function() { infiniteScrollCtrl.checkBounds(); });
}
}
};
}]);
/**
* @ngdoc directive
* @name ionInput
* @parent ionic.directive:ionList
* @module ionic
* @restrict E
* Creates a text input group that can easily be focused
*
* @usage
*
* ```html
*
*
*
*
*
*
* Username
*
*
*
* ```
*/
var labelIds = -1;
IonicModule
.directive('ionInput', [function() {
return {
restrict: 'E',
controller: ['$scope', '$element', function($scope, $element) {
this.$scope = $scope;
this.$element = $element;
this.setInputAriaLabeledBy = function(id) {
var inputs = $element[0].querySelectorAll('input,textarea');
inputs.length && inputs[0].setAttribute('aria-labelledby', id);
};
this.focus = function() {
var inputs = $element[0].querySelectorAll('input,textarea');
inputs.length && inputs[0].focus();
};
}]
};
}]);
/**
* @ngdoc directive
* @name ionLabel
* @parent ionic.directive:ionList
* @module ionic
* @restrict E
*
* New in Ionic 1.2. It is strongly recommended that you use `` in place
* of any `