mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 06:57:02 +08:00
border btn icon/list thumbnail
This commit is contained in:
Adam Bradley
502
dist/js/ionic-angular.js
vendored
502
dist/js/ionic-angular.js
vendored
@ -12,7 +12,7 @@ angular.module('ionic.ui', ['ionic.ui.content',
|
||||
]);
|
||||
|
||||
;
|
||||
angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSheet'])
|
||||
angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet'])
|
||||
|
||||
.factory('ActionSheet', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
|
||||
return {
|
||||
@ -70,7 +70,6 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh
|
||||
};
|
||||
}]);
|
||||
;
|
||||
;
|
||||
angular.module('ionic.service.gesture', [])
|
||||
|
||||
.factory('Gesture', [function() {
|
||||
@ -81,7 +80,56 @@ angular.module('ionic.service.gesture', [])
|
||||
};
|
||||
}]);
|
||||
;
|
||||
angular.module('ionic.service.modal', ['ionic.service'])
|
||||
angular.module('ionic.service.loading', ['ionic.ui.loading'])
|
||||
|
||||
.factory('Loading', ['$rootScope', '$document', '$compile', function($rootScope, $document, $compile) {
|
||||
return {
|
||||
/**
|
||||
* Load an action sheet with the given template string.
|
||||
*
|
||||
* A new isolated scope will be created for the
|
||||
* action sheet and the new element will be appended into the body.
|
||||
*
|
||||
* @param {object} opts the options for this ActionSheet (see docs)
|
||||
*/
|
||||
show: function(opts) {
|
||||
var defaults = {
|
||||
content: '',
|
||||
animation: 'fade-in',
|
||||
showBackdrop: true
|
||||
};
|
||||
|
||||
opts = angular.extend(defaults, opts);
|
||||
|
||||
var scope = $rootScope.$new(true);
|
||||
angular.extend(scope, opts);
|
||||
|
||||
// Make sure there is only one loading element on the page at one point in time
|
||||
var existing = angular.element($document[0].querySelector('.loading-backdrop'));
|
||||
if(existing.length) {
|
||||
var scope = existing.scope();
|
||||
if(scope.loading) {
|
||||
scope.loading.show();
|
||||
return scope.loading;
|
||||
}
|
||||
}
|
||||
|
||||
// Compile the template
|
||||
var element = $compile('<loading>' + opts.content + '</loading>')(scope);
|
||||
|
||||
$document[0].body.appendChild(element[0]);
|
||||
|
||||
var loading = new ionic.views.Loading({el: element[0] });
|
||||
loading.show();
|
||||
|
||||
scope.loading = loading;
|
||||
|
||||
return loading;
|
||||
}
|
||||
};
|
||||
}]);
|
||||
;
|
||||
angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
|
||||
|
||||
|
||||
.factory('Modal', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
|
||||
@ -122,7 +170,65 @@ angular.module('ionic.service.modal', ['ionic.service'])
|
||||
};
|
||||
}]);
|
||||
;
|
||||
angular.module('ionic.service', [])
|
||||
angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
|
||||
|
||||
|
||||
.factory('Popup', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
|
||||
|
||||
var getPopup = function() {
|
||||
// Make sure there is only one loading element on the page at one point in time
|
||||
var existing = angular.element($document[0].querySelector('.popup'));
|
||||
if(existing.length) {
|
||||
var scope = existing.scope();
|
||||
if(scope.popup) {
|
||||
return scope;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
alert: function(message) {
|
||||
|
||||
// If there is an existing popup, just show that one
|
||||
var existing = getPopup();
|
||||
if(existing) {
|
||||
return existing.popup.alert(message);
|
||||
}
|
||||
|
||||
var defaults = {
|
||||
title: message,
|
||||
animation: 'fade-in',
|
||||
};
|
||||
|
||||
opts = angular.extend(defaults, opts);
|
||||
|
||||
var scope = $rootScope.$new(true);
|
||||
angular.extend(scope, opts);
|
||||
|
||||
// Compile the template
|
||||
var element = $compile('<popup>' + opts.content + '</popup>')(scope);
|
||||
$document[0].body.appendChild(element[0]);
|
||||
|
||||
var popup = new ionic.views.Popup({el: element[0] });
|
||||
popup.alert(message);
|
||||
|
||||
scope.popup = popup;
|
||||
|
||||
return popup;
|
||||
},
|
||||
confirm: function(cb) {
|
||||
},
|
||||
prompt: function(cb) {
|
||||
},
|
||||
show: function(data) {
|
||||
// data.title
|
||||
// data.template
|
||||
// data.buttons
|
||||
}
|
||||
};
|
||||
}]);
|
||||
;
|
||||
angular.module('ionic.service.templateLoad', [])
|
||||
|
||||
.factory('TemplateLoader', ['$q', '$http', '$templateCache', function($q, $http, $templateCache) {
|
||||
return {
|
||||
@ -343,26 +449,38 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
angular.module('ionic.ui.nav', ['ionic.service'])
|
||||
angular.module('ionic.ui.loading', [])
|
||||
|
||||
.controller('NavCtrl', ['$scope', '$element', '$compile', 'TemplateLoader', function($scope, $element, $compile, TemplateLoader) {
|
||||
.directive('loading', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
link: function($scope, $element){
|
||||
$scope.$on('$destroy', function() {
|
||||
$element.remove();
|
||||
});
|
||||
$element.addClass($scope.animation || '');
|
||||
},
|
||||
template: '<div class="loading-backdrop" ng-class="{enabled: showBackdrop}">' +
|
||||
'<div class="loading" ng-transclude>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
};
|
||||
});
|
||||
|
||||
})();
|
||||
;
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.gesture', 'ngAnimate'])
|
||||
|
||||
.controller('NavCtrl', ['$scope', '$element', '$animate', '$compile', 'TemplateLoader', function($scope, $element, $animate, $compile, TemplateLoader) {
|
||||
var _this = this;
|
||||
|
||||
angular.extend(this, ionic.controllers.NavController.prototype);
|
||||
|
||||
this.pushFromTemplate = function(tmpl) {
|
||||
data = TemplateLoader.load(tmpl).then(function(data) {
|
||||
console.log('Nav loaded template', data);
|
||||
|
||||
var childScope = $scope.$new();
|
||||
childScope.isVisible = true;
|
||||
|
||||
$compile(data)(childScope, function(cloned, scope) {
|
||||
$element.append(cloned);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
ionic.controllers.NavController.call(this, {
|
||||
content: {
|
||||
},
|
||||
@ -383,14 +501,39 @@ angular.module('ionic.ui.nav', ['ionic.service'])
|
||||
}
|
||||
});
|
||||
|
||||
$scope.pushController = function(scope) {
|
||||
this.handleDrag = function(e) {
|
||||
};
|
||||
|
||||
this.endDrag = function(e) {
|
||||
};
|
||||
|
||||
this.pushFromTemplate = function(templateUrl) {
|
||||
var childScope = $scope.$new();
|
||||
childScope.isVisible = true;
|
||||
|
||||
TemplateLoader.load(templateUrl).then(function(templateString) {
|
||||
var el = $compile(templateString)(childScope, function(cloned, scope) {
|
||||
angular.element($element[0].children[1].firstElementChild).append(cloned);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
$scope.pushController = function(scope, element) {
|
||||
_this.push(scope);
|
||||
|
||||
/*
|
||||
var old = angular.element($element[0].children[1]);
|
||||
$animate.enter(element, $element, $element[0].firstElementChild, function() {
|
||||
});
|
||||
$animate.leave(old, function() {
|
||||
});
|
||||
*/
|
||||
};
|
||||
|
||||
$scope.navController = this;
|
||||
}])
|
||||
|
||||
.directive('navCtrl', function() {
|
||||
.directive('navs', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
@ -404,7 +547,7 @@ angular.module('ionic.ui.nav', ['ionic.service'])
|
||||
.directive('navBar', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
require: '^navCtrl',
|
||||
require: '^navs',
|
||||
replace: true,
|
||||
scope: true,
|
||||
template: '<header class="bar bar-header bar-dark nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' +
|
||||
@ -413,6 +556,8 @@ angular.module('ionic.ui.nav', ['ionic.service'])
|
||||
'</header>',
|
||||
link: function(scope, element, attrs, navCtrl) {
|
||||
scope.navController = navCtrl;
|
||||
scope.$watch('navController.controllers.length', function(value) {
|
||||
});
|
||||
scope.goBack = function() {
|
||||
navCtrl.pop();
|
||||
};
|
||||
@ -420,37 +565,66 @@ angular.module('ionic.ui.nav', ['ionic.service'])
|
||||
};
|
||||
})
|
||||
|
||||
.directive('navContent', function() {
|
||||
.directive('navContent', ['Gesture', '$animate', function(Gesture, $animate) {
|
||||
return {
|
||||
restrict: 'ECA',
|
||||
require: '^navCtrl',
|
||||
require: '^navs',
|
||||
scope: true,
|
||||
link: function(scope, element, attrs, navCtrl) {
|
||||
scope.title = attrs.title;
|
||||
transclude: 'element',
|
||||
compile: function(element, attr, transclude) {
|
||||
return function($scope, $element, $attr, navCtrl) {
|
||||
var lastParent, lastIndex, childScope, childElement;
|
||||
|
||||
if(attrs.navBar === "false") {
|
||||
navCtrl.hideNavBar();
|
||||
} else {
|
||||
navCtrl.showNavBar();
|
||||
}
|
||||
$scope.title = $attr.title;
|
||||
|
||||
scope.isVisible = true;
|
||||
scope.pushController(scope);
|
||||
|
||||
scope.$watch('isVisible', function(value) {
|
||||
console.log('Visiblity changed', value);
|
||||
if(value) {
|
||||
element[0].classList.remove('hidden');
|
||||
if($attr.navBar === "false") {
|
||||
navCtrl.hideNavBar();
|
||||
} else {
|
||||
element[0].classList.add('hidden');
|
||||
navCtrl.showNavBar();
|
||||
}
|
||||
});
|
||||
|
||||
$scope.pushController($scope, $element);
|
||||
|
||||
|
||||
$scope.$watch('isVisible', function(value) {
|
||||
if(childElement) {
|
||||
$animate.leave(childElement);
|
||||
childElement = undefined;
|
||||
}
|
||||
if(childScope) {
|
||||
childScope.$destroy();
|
||||
childScope = undefined;
|
||||
}
|
||||
if(value) {
|
||||
childScope = $scope.$new();
|
||||
transclude(childScope, function(clone) {
|
||||
childElement = clone;
|
||||
Gesture.on('drag', function(e) {
|
||||
//navCtrl.handleDrag(e);
|
||||
console.log('Content drag', e);
|
||||
}, childElement[0]);
|
||||
|
||||
Gesture.on('release', function(e) {
|
||||
//navCtrl._endDrag(e);
|
||||
}, childElement[0]);
|
||||
|
||||
var title = $element.parent().parent().parent()[0].querySelector('.title');
|
||||
$animate.enter(clone, $element.parent(), $element);
|
||||
$animate.addClass(angular.element(title), 'slide-left-fade', function() {
|
||||
$animate.removeClass(angular.element(title), 'slide-left-fade', function() {
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
}]);
|
||||
|
||||
})();
|
||||
;
|
||||
;
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
@ -572,9 +746,89 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
|
||||
});
|
||||
})();
|
||||
;
|
||||
angular.module('ionic.ui.tabs', [])
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
.controller('TabsCtrl', function($scope) {
|
||||
/**
|
||||
* @description
|
||||
* The sideMenuCtrl lets you quickly have a draggable side
|
||||
* left and/or right menu, which a center content area.
|
||||
*/
|
||||
|
||||
angular.module('ionic.ui.slideBox', [])
|
||||
|
||||
/**
|
||||
* The internal controller for the side menu controller. This
|
||||
* extends our core Ionic side menu controller and exposes
|
||||
* some side menu stuff on the current scope.
|
||||
*/
|
||||
.controller('SlideBoxCtrl', ['$scope', '$element', function($scope, $element) {
|
||||
$scope.slides = [];
|
||||
this.slideAdded = function() {
|
||||
$scope.slides.push({});
|
||||
};
|
||||
}])
|
||||
|
||||
.directive('slideBox', ['$compile', function($compile) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
controller: 'SlideBoxCtrl',
|
||||
scope: {},
|
||||
template: '<div class="slide-box">\
|
||||
<div class="slide-box-slides" ng-transclude>\
|
||||
</div>\
|
||||
</div>',
|
||||
|
||||
postLink: function() {
|
||||
console.log('POST LINK');
|
||||
},
|
||||
link: function($scope, $element, $attr, slideBoxCtrl) {
|
||||
// If the pager should show, append it to the slide box
|
||||
if($attr.showPager !== "false") {
|
||||
var childScope = $scope.$new();
|
||||
var pager = $compile('<pager></pager>')(childScope);
|
||||
$element.append(pager);
|
||||
|
||||
$scope.slideBox = new ionic.views.SlideBox({
|
||||
el: $element[0]
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}])
|
||||
|
||||
.directive('slide', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
require: '^slideBox',
|
||||
transclude: true,
|
||||
template: '<div class="slide-box-slide" ng-transclude></div>',
|
||||
compile: function(element, attr, transclude) {
|
||||
return function($scope, $element, $attr, slideBoxCtrl) {
|
||||
slideBoxCtrl.slideAdded();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
.directive('pager', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
require: '^slideBox',
|
||||
template: '<div class="slide-box-pager"><span ng-repeat="slide in slides"><i class="icon-record"></i></span></div>'
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
;
|
||||
angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
|
||||
.controller('TabsCtrl', ['$scope', '$element', '$animate', function($scope, $element, $animate) {
|
||||
var _this = this;
|
||||
|
||||
angular.extend(this, ionic.controllers.TabBarController.prototype);
|
||||
@ -582,83 +836,119 @@ angular.module('ionic.ui.tabs', [])
|
||||
ionic.controllers.TabBarController.call(this, {
|
||||
tabBar: {
|
||||
tryTabSelect: function() {},
|
||||
setSelectedItem: function(index) {
|
||||
console.log('TAB BAR SET SELECTED INDEX', index);
|
||||
},
|
||||
addItem: function(item) {
|
||||
console.log('TAB BAR ADD ITEM', item);
|
||||
}
|
||||
setSelectedItem: function(index) {},
|
||||
addItem: function(item) {}
|
||||
}
|
||||
});
|
||||
|
||||
this.add = function(controller) {
|
||||
this.addController(controller);
|
||||
this.select(0);
|
||||
};
|
||||
|
||||
this.select = function(controllerIndex) {
|
||||
var oldIndex = _this.getSelectedIndex();
|
||||
|
||||
$scope.activeAnimation = $scope.animation;
|
||||
/*
|
||||
if(controllerIndex > oldIndex) {
|
||||
} else if(controllerIndex < oldIndex) {
|
||||
$scope.activeAnimation = $scope.animation + '-reverse';
|
||||
}
|
||||
*/
|
||||
_this.selectController(controllerIndex);
|
||||
};
|
||||
|
||||
$scope.controllers = this.controllers;
|
||||
}])
|
||||
|
||||
$scope.$watch('controllers', function(newV, oldV) {
|
||||
console.log("CControlelrs changed", newV, oldV);
|
||||
//$scope.$apply();
|
||||
});
|
||||
})
|
||||
|
||||
.directive('tabController', function() {
|
||||
.directive('tabs', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
scope: {},
|
||||
scope: {
|
||||
animation: '@'
|
||||
},
|
||||
transclude: true,
|
||||
controller: 'TabsCtrl',
|
||||
//templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
|
||||
template: '<div class="view"><div ng-transclude></div><tab-bar></tab-bar></div>',
|
||||
template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
|
||||
compile: function(element, attr, transclude, tabsCtrl) {
|
||||
return function($scope, $element, $attr) {
|
||||
$scope.$watch('activeAnimation', function(value) {
|
||||
//$element.removeClass($scope.animation + ' ' + $scope.animation + '-reverse');
|
||||
$element.addClass($scope.activeAnimation);
|
||||
});
|
||||
transclude($scope, function(cloned) {
|
||||
$element.prepend(cloned);
|
||||
});
|
||||
};
|
||||
}
|
||||
};
|
||||
})
|
||||
|
||||
// Generic controller directive
|
||||
.directive('tabContent', function() {
|
||||
return {
|
||||
restrict: 'CA',
|
||||
replace: true,
|
||||
require: '^tabController',
|
||||
scope: true,
|
||||
link: function(scope, element, attrs, tabsCtrl) {
|
||||
scope.$watch('isVisible', function(value) {
|
||||
if(!value) {
|
||||
element[0].style.display = 'none';
|
||||
} else {
|
||||
element[0].style.display = 'block';
|
||||
}
|
||||
});
|
||||
|
||||
scope.title = attrs.title;
|
||||
scope.icon = attrs.icon;
|
||||
scope.iconOn = attrs.iconOn;
|
||||
scope.iconOff = attrs.iconOff;
|
||||
tabsCtrl.addController(scope);
|
||||
}
|
||||
};
|
||||
})
|
||||
|
||||
|
||||
.directive('tabBar', function() {
|
||||
.directive('tab', ['$animate', function($animate) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
require: '^tabController',
|
||||
replace: true,
|
||||
require: '^tabs',
|
||||
scope: true,
|
||||
transclude: 'element',
|
||||
compile: function(element, attr, transclude) {
|
||||
return function($scope, $element, $attr, tabsCtrl) {
|
||||
var childScope, childElement;
|
||||
|
||||
|
||||
$scope.$watch('isVisible', function(value) {
|
||||
if(childElement) {
|
||||
$animate.leave(childElement);
|
||||
childElement = undefined;
|
||||
}
|
||||
if(childScope) {
|
||||
childScope.$destroy();
|
||||
childScope = undefined;
|
||||
}
|
||||
if(value) {
|
||||
childScope = $scope.$new();
|
||||
transclude(childScope, function(clone) {
|
||||
childElement = clone;
|
||||
childElement.addClass('view-full');
|
||||
$animate.enter(clone, $element.parent(), $element);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$scope.title = $attr.title;
|
||||
$scope.icon = $attr.icon;
|
||||
$scope.iconOn = $attr.iconOn;
|
||||
$scope.iconOff = $attr.iconOff;
|
||||
tabsCtrl.add($scope);
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
}])
|
||||
|
||||
|
||||
.directive('tabControllerBar', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
require: '^tabs',
|
||||
transclude: true,
|
||||
replace: true,
|
||||
scope: true,
|
||||
template: '<div class="tabs tabs-primary">' +
|
||||
'<tab-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-item>' +
|
||||
'<tab-controller-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-controller-item>' +
|
||||
'</div>'
|
||||
};
|
||||
})
|
||||
|
||||
.directive('tabItem', function() {
|
||||
.directive('tabControllerItem', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
require: '^tabController',
|
||||
require: '^tabs',
|
||||
scope: {
|
||||
title: '@',
|
||||
iconOn: '@',
|
||||
@ -668,9 +958,8 @@ angular.module('ionic.ui.tabs', [])
|
||||
index: '='
|
||||
},
|
||||
link: function(scope, element, attrs, tabsCtrl) {
|
||||
console.log('Linked item', scope);
|
||||
scope.selectTab = function(index) {
|
||||
tabsCtrl.selectController(scope.index);
|
||||
tabsCtrl.select(scope.index);
|
||||
};
|
||||
},
|
||||
template:
|
||||
@ -680,6 +969,39 @@ angular.module('ionic.ui.tabs', [])
|
||||
'<i class="{{iconOff}}" ng-if="!active"></i> {{title}}' +
|
||||
'</a>'
|
||||
};
|
||||
})
|
||||
|
||||
.directive('tabBar', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
template: '<div class="tabs tabs-primary" ng-transclude>' +
|
||||
'</div>'
|
||||
}
|
||||
})
|
||||
|
||||
.directive('tabItem', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
scope: {
|
||||
title: '@',
|
||||
iconOn: '@',
|
||||
iconOff: '@',
|
||||
active: '=',
|
||||
tabSelected: '@',
|
||||
index: '='
|
||||
},
|
||||
link: function(scope, element, attrs) {
|
||||
},
|
||||
template:
|
||||
'<a href="#" ng-class="{active:active}" ng-click="tabSelected()" class="tab-item">' +
|
||||
'<i class="{{icon}}" ng-if="icon"></i>' +
|
||||
'<i class="{{iconOn}}" ng-if="active"></i>' +
|
||||
'<i class="{{iconOff}}" ng-if="!active"></i> {{title}}' +
|
||||
'</a>'
|
||||
};
|
||||
});
|
||||
;
|
||||
angular.module('ionic.ui.toggle', [])
|
||||
|
||||
Reference in New Issue
Block a user