mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
Merge branch 'master' of https://github.com/driftyco/ionic
Conflicts: scss/_variables.scss
This commit is contained in:
Adam Bradley
34
js/ext/angular/src/directive/ionicHeader.js
vendored
Normal file
34
js/ext/angular/src/directive/ionicHeader.js
vendored
Normal file
@ -0,0 +1,34 @@
|
||||
(function(ionic) {
|
||||
'use strict';
|
||||
|
||||
angular.module('ionic.ui.header', ['ngAnimate'])
|
||||
|
||||
|
||||
.directive('headerBar', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
template: '<header class="bar bar-header" ng-transclude></header>',
|
||||
scope: {
|
||||
type: '@',
|
||||
alignTitle: '@',
|
||||
},
|
||||
link: function($scope, $element, $attr) {
|
||||
var hb = new ionic.views.HeaderBar({
|
||||
el: $element[0],
|
||||
alignTitle: $scope.alignTitle || 'center'
|
||||
});
|
||||
|
||||
$element.addClass($scope.type);
|
||||
|
||||
$scope.headerBarView = hb;
|
||||
|
||||
$scope.$on('$destroy', function() {
|
||||
//
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
})(ionic);
|
||||
4
js/ext/angular/src/directive/ionicList.js
vendored
4
js/ext/angular/src/directive/ionicList.js
vendored
@ -110,11 +110,11 @@ angular.module('ionic.ui.list', ['ngAnimate'])
|
||||
hasPullToRefresh: ($scope.hasPullToRefresh !== 'false'),
|
||||
onRefresh: function() {
|
||||
$scope.onRefresh();
|
||||
$scope.$parent.$broadcast('onRefresh');
|
||||
$scope.$parent.$broadcast('scroll.onRefresh');
|
||||
},
|
||||
onRefreshOpening: function(amt) {
|
||||
$scope.onRefreshOpening({amount: amt});
|
||||
$scope.$parent.$broadcast('onRefreshOpening', amt);
|
||||
$scope.$parent.$broadcast('scroll.onRefreshOpening', amt);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
44
js/ext/angular/src/directive/ionicNav.js
vendored
44
js/ext/angular/src/directive/ionicNav.js
vendored
@ -32,6 +32,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
|
||||
// Pop function, throttled
|
||||
this.popController = ionic.throttle(function() {
|
||||
_this.pop();
|
||||
$scope.$broadcast('navs.pop');
|
||||
}, 300, {
|
||||
trailing: false
|
||||
});
|
||||
@ -79,6 +80,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
|
||||
*/
|
||||
$scope.pushController = function(scope, element) {
|
||||
_this.push(scope);
|
||||
$scope.$broadcast('navs.push', scope);
|
||||
};
|
||||
|
||||
$scope.navController = this;
|
||||
@ -105,22 +107,46 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
|
||||
restrict: 'E',
|
||||
require: '^navs',
|
||||
replace: true,
|
||||
scope: true,
|
||||
scope: {
|
||||
type: '@',
|
||||
backButtonType: '@',
|
||||
alignTitle: '@'
|
||||
},
|
||||
template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' +
|
||||
'<a href="#" ng-click="goBack()" class="button" ng-if="navController.controllers.length > 1">Back</a>' +
|
||||
'<button ng-click="goBack()" class="button" ng-if="navController.controllers.length > 1" ng-class="backButtonType">Back</button>' +
|
||||
'<h1 class="title">{{navController.getTopController().title}}</h1>' +
|
||||
'</header>',
|
||||
link: function(scope, element, attrs, navCtrl) {
|
||||
scope.navController = navCtrl;
|
||||
link: function($scope, $element, $attr, navCtrl) {
|
||||
var backButton;
|
||||
|
||||
scope.barType = attrs.barType || 'bar-dark';
|
||||
element.addClass(scope.barType);
|
||||
$scope.navController = navCtrl;
|
||||
|
||||
scope.$watch('navController.controllers.length', function(value) {
|
||||
});
|
||||
scope.goBack = function() {
|
||||
$scope.goBack = function() {
|
||||
navCtrl.popController();
|
||||
};
|
||||
|
||||
|
||||
var hb = new ionic.views.HeaderBar({
|
||||
el: $element[0],
|
||||
alignTitle: $scope.alignTitle || 'center'
|
||||
});
|
||||
|
||||
$element.addClass($scope.type);
|
||||
|
||||
$scope.headerBarView = hb;
|
||||
|
||||
$scope.$parent.$on('navs.push', function() {
|
||||
backButton = angular.element($element[0].querySelector('.button'));
|
||||
backButton.addClass($scope.backButtonType);
|
||||
hb.align();
|
||||
});
|
||||
$scope.$parent.$on('navs.pop', function() {
|
||||
hb.align();
|
||||
});
|
||||
|
||||
$scope.$on('$destroy', function() {
|
||||
//
|
||||
});
|
||||
}
|
||||
};
|
||||
})
|
||||
|
||||
1
js/ext/angular/src/ionicAngular.js
vendored
1
js/ext/angular/src/ionicAngular.js
vendored
@ -16,6 +16,7 @@ angular.module('ionic.ui', [
|
||||
'ionic.ui.content',
|
||||
'ionic.ui.tabs',
|
||||
'ionic.ui.nav',
|
||||
'ionic.ui.header',
|
||||
'ionic.ui.sideMenu',
|
||||
'ionic.ui.list',
|
||||
'ionic.ui.checkbox',
|
||||
|
||||
53
js/ext/angular/src/service/ionicActionSheet.js
vendored
53
js/ext/angular/src/service/ionicActionSheet.js
vendored
@ -1,6 +1,8 @@
|
||||
angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet'])
|
||||
angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet', 'ngAnimate'])
|
||||
|
||||
.factory('ActionSheet', ['$rootScope', '$document', '$compile', '$animate', '$timeout', 'TemplateLoader',
|
||||
function($rootScope, $document, $compile, $animate, $timeout, TemplateLoader) {
|
||||
|
||||
.factory('ActionSheet', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
|
||||
return {
|
||||
/**
|
||||
* Load an action sheet with the given template string.
|
||||
@ -10,23 +12,41 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
|
||||
*
|
||||
* @param {object} opts the options for this ActionSheet (see docs)
|
||||
*/
|
||||
show: function(opts, $scope) {
|
||||
var scope = $scope && $scope.$new() || $rootScope.$new(true);
|
||||
show: function(opts) {
|
||||
var scope = $rootScope.$new(true);
|
||||
|
||||
angular.extend(scope, opts);
|
||||
|
||||
|
||||
// Compile the template
|
||||
var element = $compile('<action-sheet buttons="buttons"></action-sheet>')(scope);
|
||||
|
||||
// Grab the sheet element for animation
|
||||
var sheetEl = angular.element(element[0].querySelector('.action-sheet'));
|
||||
|
||||
var hideSheet = function(didCancel) {
|
||||
$animate.leave(sheetEl, function() {
|
||||
if(didCancel) {
|
||||
opts.cancel();
|
||||
}
|
||||
});
|
||||
|
||||
$timeout(function() {
|
||||
$animate.removeClass(element, 'active', function() {
|
||||
scope.$destroy();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
scope.cancel = function() {
|
||||
scope.sheet.hide();
|
||||
//scope.$destroy();
|
||||
opts.cancel();
|
||||
hideSheet(true);
|
||||
};
|
||||
|
||||
scope.buttonClicked = function(index) {
|
||||
// Check if the button click event returned true, which means
|
||||
// we can close the action sheet
|
||||
if((opts.buttonClicked && opts.buttonClicked(index)) === true) {
|
||||
scope.sheet.hide();
|
||||
//scope.$destroy();
|
||||
hideSheet(false);
|
||||
}
|
||||
};
|
||||
|
||||
@ -34,24 +54,21 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
|
||||
// Check if the destructive button click event returned true, which means
|
||||
// we can close the action sheet
|
||||
if((opts.destructiveButtonClicked && opts.destructiveButtonClicked()) === true) {
|
||||
scope.sheet.hide();
|
||||
//scope.$destroy();
|
||||
hideSheet(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Compile the template
|
||||
var element = $compile('<action-sheet buttons="buttons"></action-sheet>')(scope);
|
||||
|
||||
var s = element.scope();
|
||||
|
||||
$document[0].body.appendChild(element[0]);
|
||||
|
||||
var sheet = new ionic.views.ActionSheet({el: element[0] });
|
||||
s.sheet = sheet;
|
||||
scope.sheet = sheet;
|
||||
|
||||
sheet.show();
|
||||
$animate.addClass(element, 'active');
|
||||
$animate.enter(sheetEl, element, function() {
|
||||
});
|
||||
|
||||
return sheet;
|
||||
}
|
||||
};
|
||||
|
||||
}]);
|
||||
|
||||
162
js/ext/angular/test/actionSheet.html
Normal file
162
js/ext/angular/test/actionSheet.html
Normal file
@ -0,0 +1,162 @@
|
||||
<html ng-app="actionTest">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Action Sheet</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-touch.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
|
||||
<style>
|
||||
.row .col > div {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body ng-controller="ActionCtrl">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button ng-click="show()" class="button">Show</button>
|
||||
<script src="../../../../dist/js/ionic.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
<script>
|
||||
angular.module('actionTest', ['ionic', 'ngAnimate'])
|
||||
|
||||
.controller('ActionCtrl', function($scope, ActionSheet) {
|
||||
$scope.show = function() {
|
||||
ActionSheet.show({
|
||||
buttons: [
|
||||
{ text: 'Share' },
|
||||
{ text: 'Move' },
|
||||
],
|
||||
destructiveText: 'Delete',
|
||||
titleText: 'Modify your album',
|
||||
cancelText: 'Cancel',
|
||||
cancel: function() {
|
||||
console.log('CANCELLED');
|
||||
},
|
||||
buttonClicked: function(index) {
|
||||
console.log('BUTTON CLICKED', index);
|
||||
return true;
|
||||
},
|
||||
destructiveButtonClicked: function() {
|
||||
console.log('DESTRUCT');
|
||||
return true;
|
||||
}
|
||||
});
|
||||
};
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
40
js/ext/angular/test/header.html
Normal file
40
js/ext/angular/test/header.html
Normal file
@ -0,0 +1,40 @@
|
||||
<html ng-app="headerTest">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Header</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-touch.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header-bar type="bar-primary" align-title="left">
|
||||
<button class="button">Tap</button>
|
||||
<h1 class="title">A really really long title here here here here her</h1>
|
||||
</header-bar>
|
||||
<script src="../../../../dist/js/ionic.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
<script>
|
||||
angular.module('headerTest', ['ionic']);
|
||||
var midPoint = window.clientWidth / 2;
|
||||
var box = document.createElement('div');
|
||||
box.style.backgroundColor = 'red';
|
||||
box.style.opacity = '0.6';
|
||||
box.style.width = '2px';
|
||||
box.style.height = '44px';
|
||||
box.style.left = '50%';
|
||||
box.style.position = 'fixed';
|
||||
box.style.zIndex = 100;
|
||||
box.style.top = '0px';
|
||||
box.style.marginLeft = '-1px';
|
||||
document.body.appendChild(box);
|
||||
window.onresize = function() {
|
||||
var s = angular.element(document.getElementsByTagName('header')[0]).isolateScope();
|
||||
s.headerBarView.align();
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -32,16 +32,17 @@
|
||||
<body>
|
||||
|
||||
<navs>
|
||||
<nav-bar></nav-bar>
|
||||
<nav-bar type="bar-primary" back-button-type="button-pure" align-title="right">
|
||||
</nav-bar>
|
||||
|
||||
<div ng-controller="AppCtrl">
|
||||
<content has-header="true">
|
||||
</content>
|
||||
</div>
|
||||
<div ng-controller="AppCtrl">
|
||||
<content has-header="true">
|
||||
</content>
|
||||
</div>
|
||||
</navs>
|
||||
|
||||
<script id="page.html" type="text/ng-template">
|
||||
<div title="Home" ng-controller="CatsCtrl" class="nav-content">
|
||||
<div title="Home home home home home home home home home" ng-controller="CatsCtrl" class="nav-content">
|
||||
<h1></h1>
|
||||
<a href="#" class="button button-success" ng-click="goNext()">Next</a>
|
||||
<list><list-item ng-repeat="item in items" on-select="goNext()">Test</list-item></list>
|
||||
|
||||
Reference in New Issue
Block a user