Files
ionic-framework/js/ext/angular/src/directive/ionicContent.js

155 lines
4.6 KiB
JavaScript

(function() {
'use strict';
angular.module('ionic.ui.content', [])
/**
* Panel is a simple 100% width and height, fixed panel. It's meant for content to be
* added to it, or animated around.
*/
.directive('pane', function() {
return {
restrict: 'E',
link: function(scope, element, attr) {
element.addClass('pane');
}
};
})
// The content directive is a core scrollable content area
// that is part of many View hierarchies
.directive('content', ['$parse', '$timeout', function($parse, $timeout) {
return {
restrict: 'E',
replace: true,
template: '<div class="scroll-content"></div>',
transclude: true,
scope: {
onRefresh: '&',
onRefreshOpening: '&',
refreshComplete: '=',
scroll: '@'
},
compile: function(element, attr, transclude) {
return function($scope, $element, $attr) {
var clone, sc, sv;
var addedPadding = false;
var c = $element.eq(0);
if(attr.refreshComplete) {
$scope.refreshComplete = function() {
if($scope.scrollView) {
//$scope.scrollView.doneRefreshing();
$scope.$parent.$broadcast('scroll.onRefreshComplete');
}
};
}
// If they want plain overflow scrolling, add that as a class
if($scope.scroll === "false") {
clone = transclude($scope.$parent);
$element.append(clone);
} else if(attr.overflowScroll === "true") {
c.addClass('overflow-scroll');
clone = transclude($scope.$parent);
$element.append(clone);
} else {
sc = document.createElement('div');
sc.className = 'scroll';
if(attr.padding == "true") {
sc.className += ' padding';
addedPadding = true;
}
$element.append(sc);
// Pass the parent scope down to the child
clone = transclude($scope.$parent);
angular.element($element[0].firstElementChild).append(clone);
// Otherwise, supercharge this baby!
// Add timeout to let content render so Scroller.resize grabs the right content height
$timeout(function() {
// Add watch to the container element's height to fire Scroller.resize event
$scope.$watch
(
function () {
return typeof($element) !== "undefined" && $element.length > 0 && $element[0].clientHeight > 0 ? $element[0].clientHeight : 0;
},
function (newValue, oldValue) {
if (newValue != oldValue && $scope.$parent && $scope.$parent.scrollView && $scope.$parent.scrollView.resize) {
$scope.$parent.scrollView.resize();
}
}
);
sv = new ionic.views.Scroller({
el: $element[0]
});
/*
hasPullToRefresh: (typeof $scope.onRefresh !== 'undefined'),
onRefresh: function() {
$scope.onRefresh();
$scope.$parent.$broadcast('scroll.onRefresh');
},
onRefreshOpening: function(amt) {
$scope.onRefreshOpening({amount: amt});
$scope.$parent.$broadcast('scroll.onRefreshOpening', amt);
}
});
*/
// Let child scopes access this
$scope.$parent.scrollView = sv;
}, 500);
}
// if padding attribute is true, then add padding if it wasn't added to the .scroll
if(attr.padding == "true" && !addedPadding) {
c.addClass('padding');
}
};
}
};
}])
.directive('refresher', function() {
return {
restrict: 'E',
replace: true,
require: ['^?content', '^?list'],
template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><div class="ionic-refresher"></div></div></div>',
scope: true,
link: function($scope, $element, $attr, scrollCtrl) {
var icon = $element[0].querySelector('.ionic-refresher');
// Scale up the refreshing icon
var onRefreshOpening = ionic.throttle(function(e, amt) {
icon.style[ionic.CSS.TRANSFORM] = 'scale(' + Math.min((1 + amt), 2) + ')';
}, 100);
$scope.$on('scroll.onRefresh', function(e) {
icon.style[ionic.CSS.TRANSFORM] = 'scale(2)';
});
$scope.$on('scroll.onRefreshOpening', onRefreshOpening);
}
};
})
.directive('scroll-refresher', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div class="scroll-refresher"><div class="scroll-refresher-content"></div></div>'
};
});
})();