javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Lots of action sheet work

Browse Source
This commit is contained in:
Max Lynch
2013-11-12 23:25:57 -06:00
parent 664fe55ff8
commit 3f89bca290
7 changed files with 261 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
dist/css/ionic.css vendored
View File

@ -2484,6 +2484,50 @@ a.subdued‎ {
* Action Sheets * Action Sheets
* -------------------------------------------------- * --------------------------------------------------
*/ */
@-webkit-keyframes fadeInHalf {
from {
background-color: rgba(0, 0, 0, 0); }
to {
background-color: rgba(0, 0, 0, 0.5); } }
@keyframes fadeInHalf {
from {
background-color: rgba(0, 0, 0, 0); }
to {
background-color: rgba(0, 0, 0, 0.5); } }
@-webkit-keyframes fadeOutHalf {
from {
background-color: rgba(0, 0, 0, 0.5); }
to {
background-color: rgba(0, 0, 0, 0); } }
@keyframes fadeOutHalf {
from {
background-color: rgba(0, 0, 0, 0.5); }
to {
background-color: rgba(0, 0, 0, 0); } }
.action-sheet-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0); }
.action-sheet-backdrop.active {
-webkit-animation: fadeInHalf 0.2s;
animation: fadeInHalf 0.2s;
-webkit-animation-fill-mode: forwards; }
.action-sheet-backdrop.active-remove {
-webkit-animation: fadeOutHalf 0.2s;
animation: fadeOutHalf 0.2s;
-webkit-animation-fill-mode: forwards; }
.action-sheet { .action-sheet {
-webkit-transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
@ -2495,7 +2539,7 @@ a.subdued‎ {
width: calc(100% - 30px); } width: calc(100% - 30px); }
.action-sheet .button { .action-sheet .button {
display: block; display: block;
padding: 10px; padding: 6px;
width: 100%; width: 100%;
border-radius: none; border-radius: none;
background-color: transparent; background-color: transparent;
@ -2507,12 +2551,18 @@ a.subdued‎ {
.action-sheet-title { .action-sheet-title {
padding: 10px; padding: 10px;
text-align: center; text-align: center;
font-size: 12px; } font-size: 12px;
color: #666666; }
.action-sheet-group { .action-sheet-group {
background-color: #fff;
margin-bottom: 10px; margin-bottom: 10px;
border-radius: 3px; border-radius: 3px 3px 3px 3px; }
background-color: rgba(255, 255, 255, 0.95); } .action-sheet-group .button {
border-radius: 0;
border-width: 1px 0px 0px 0px; }
.action-sheet-group .button:first-child:last-child {
border-width: 0; }
/** /**
* Bar (Headers and Footers) * Bar (Headers and Footers)

81
dist/js/ionic-angular.js vendored
View File

@ -29,9 +29,11 @@ angular.module('ionic', [
'ionic.ui', 'ionic.ui',
]); ]);
; ;
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', 'TemplateLoader',
function($rootScope, $document, $compile, $animate, TemplateLoader) {
.factory('ActionSheet', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
return { return {
/** /**
* Load an action sheet with the given template string. * Load an action sheet with the given template string.
@ -41,23 +43,38 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
* *
* @param {object} opts the options for this ActionSheet (see docs) * @param {object} opts the options for this ActionSheet (see docs)
*/ */
show: function(opts, $scope) { show: function(opts) {
var scope = $scope && $scope.$new() || $rootScope.$new(true); var scope = $rootScope.$new(true);
angular.extend(scope, opts); 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();
}
});
$animate.removeClass(element, 'active', function() {
scope.$destroy();
});
};
scope.cancel = function() { scope.cancel = function() {
scope.sheet.hide(); hideSheet(true);
//scope.$destroy();
opts.cancel();
}; };
scope.buttonClicked = function(index) { scope.buttonClicked = function(index) {
// Check if the button click event returned true, which means // Check if the button click event returned true, which means
// we can close the action sheet // we can close the action sheet
if((opts.buttonClicked && opts.buttonClicked(index)) === true) { if((opts.buttonClicked && opts.buttonClicked(index)) === true) {
scope.sheet.hide(); hideSheet(false);
//scope.$destroy();
} }
}; };
@ -65,26 +82,23 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
// Check if the destructive button click event returned true, which means // Check if the destructive button click event returned true, which means
// we can close the action sheet // we can close the action sheet
if((opts.destructiveButtonClicked && opts.destructiveButtonClicked()) === true) { if((opts.destructiveButtonClicked && opts.destructiveButtonClicked()) === true) {
scope.sheet.hide(); hideSheet(false);
//scope.$destroy();
} }
}; };
// Compile the template
var element = $compile('<action-sheet buttons="buttons"></action-sheet>')(scope);
var s = element.scope();
$document[0].body.appendChild(element[0]); $document[0].body.appendChild(element[0]);
var sheet = new ionic.views.ActionSheet({el: 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; return sheet;
} }
}; };
}]); }]);
; ;
angular.module('ionic.service.gesture', []) angular.module('ionic.service.gesture', [])
@ -399,7 +413,7 @@ angular.module('ionic.service.templateLoad', [])
angular.module('ionic.ui.actionSheet', []) angular.module('ionic.ui.actionSheet', [])
.directive('actionSheet', function() { .directive('actionSheet', function($document) {
return { return {
restrict: 'E', restrict: 'E',
scope: true, scope: true,
@ -408,17 +422,26 @@ angular.module('ionic.ui.actionSheet', [])
$scope.$on('$destroy', function() { $scope.$on('$destroy', function() {
$element.remove(); $element.remove();
}); });
$document.bind('keyup', function(e) {
if(e.which == 27) {
$scope.cancel();
$scope.$apply();
}
});
}, },
template: '<div class="action-sheet slide-in-up">' + template: '<div class="action-sheet-backdrop">' +
'<div class="action-sheet-group">' + '<div class="action-sheet slide-in-up">' +
'<div class="action-sheet-title" ng-if="titleText">{{titleText}}</div>' + '<div class="action-sheet-group">' +
'<button class="button" ng-click="buttonClicked($index)" ng-repeat="button in buttons">{{button.text}}</button>' + '<div class="action-sheet-title" ng-if="titleText">{{titleText}}</div>' +
'</div>' + '<button class="button" ng-click="buttonClicked($index)" ng-repeat="button in buttons">{{button.text}}</button>' +
'<div class="action-sheet-group" ng-if="destructiveText">' + '</div>' +
'<button class="button destructive" ng-click="destructiveButtonClicked()">{{destructiveText}}</button>' + '<div class="action-sheet-group" ng-if="destructiveText">' +
'</div>' + '<button class="button destructive" ng-click="destructiveButtonClicked()">{{destructiveText}}</button>' +
'<div class="action-sheet-group" ng-if="cancelText">' + '</div>' +
'<button class="button" ng-click="cancel()">{{cancelText}}</button>' + '<div class="action-sheet-group" ng-if="cancelText">' +
'<button class="button" ng-click="cancel()">{{cancelText}}</button>' +
'</div>' +
'</div>' + '</div>' +
'</div>' '</div>'
}; };

31
js/ext/angular/src/directive/ionicActionSheet.js vendored
View File

@ -3,7 +3,7 @@
angular.module('ionic.ui.actionSheet', []) angular.module('ionic.ui.actionSheet', [])
.directive('actionSheet', function() { .directive('actionSheet', function($document) {
return { return {
restrict: 'E', restrict: 'E',
scope: true, scope: true,
@ -12,17 +12,26 @@ angular.module('ionic.ui.actionSheet', [])
$scope.$on('$destroy', function() { $scope.$on('$destroy', function() {
$element.remove(); $element.remove();
}); });
$document.bind('keyup', function(e) {
if(e.which == 27) {
$scope.cancel();
$scope.$apply();
}
});
}, },
template: '<div class="action-sheet slide-in-up">' + template: '<div class="action-sheet-backdrop">' +
'<div class="action-sheet-group">' + '<div class="action-sheet slide-in-up">' +
'<div class="action-sheet-title" ng-if="titleText">{{titleText}}</div>' + '<div class="action-sheet-group">' +
'<button class="button" ng-click="buttonClicked($index)" ng-repeat="button in buttons">{{button.text}}</button>' + '<div class="action-sheet-title" ng-if="titleText">{{titleText}}</div>' +
'</div>' + '<button class="button" ng-click="buttonClicked($index)" ng-repeat="button in buttons">{{button.text}}</button>' +
'<div class="action-sheet-group" ng-if="destructiveText">' + '</div>' +
'<button class="button destructive" ng-click="destructiveButtonClicked()">{{destructiveText}}</button>' + '<div class="action-sheet-group" ng-if="destructiveText">' +
'</div>' + '<button class="button destructive" ng-click="destructiveButtonClicked()">{{destructiveText}}</button>' +
'<div class="action-sheet-group" ng-if="cancelText">' + '</div>' +
'<button class="button" ng-click="cancel()">{{cancelText}}</button>' + '<div class="action-sheet-group" ng-if="cancelText">' +
'<button class="button" ng-click="cancel()">{{cancelText}}</button>' +
'</div>' +
'</div>' + '</div>' +
'</div>' '</div>'
}; };

50
js/ext/angular/src/service/ionicActionSheet.js vendored
View File

@ -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', 'TemplateLoader',
function($rootScope, $document, $compile, $animate, TemplateLoader) {
.factory('ActionSheet', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
return { return {
/** /**
* Load an action sheet with the given template string. * Load an action sheet with the given template string.
@ -10,23 +12,38 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
* *
* @param {object} opts the options for this ActionSheet (see docs) * @param {object} opts the options for this ActionSheet (see docs)
*/ */
show: function(opts, $scope) { show: function(opts) {
var scope = $scope && $scope.$new() || $rootScope.$new(true); var scope = $rootScope.$new(true);
angular.extend(scope, opts); 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();
}
});
$animate.removeClass(element, 'active', function() {
scope.$destroy();
});
};
scope.cancel = function() { scope.cancel = function() {
scope.sheet.hide(); hideSheet(true);
//scope.$destroy();
opts.cancel();
}; };
scope.buttonClicked = function(index) { scope.buttonClicked = function(index) {
// Check if the button click event returned true, which means // Check if the button click event returned true, which means
// we can close the action sheet // we can close the action sheet
if((opts.buttonClicked && opts.buttonClicked(index)) === true) { if((opts.buttonClicked && opts.buttonClicked(index)) === true) {
scope.sheet.hide(); hideSheet(false);
//scope.$destroy();
} }
}; };
@ -34,24 +51,21 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
// Check if the destructive button click event returned true, which means // Check if the destructive button click event returned true, which means
// we can close the action sheet // we can close the action sheet
if((opts.destructiveButtonClicked && opts.destructiveButtonClicked()) === true) { if((opts.destructiveButtonClicked && opts.destructiveButtonClicked()) === true) {
scope.sheet.hide(); hideSheet(false);
//scope.$destroy();
} }
}; };
// Compile the template
var element = $compile('<action-sheet buttons="buttons"></action-sheet>')(scope);
var s = element.scope();
$document[0].body.appendChild(element[0]); $document[0].body.appendChild(element[0]);
var sheet = new ionic.views.ActionSheet({el: 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; return sheet;
} }
}; };
}]); }]);

47
js/ext/angular/test/actionSheet.html Normal file
View File

@ -0,0 +1,47 @@
<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>
</head>
<body ng-controller="ActionCtrl">
<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'])
.controller('ActionCtrl', function($scope, ActionSheet) {
$scope.show = function() {
ActionSheet.show({
buttons: [
{ text: 'Option 1' },
{ text: 'Option 2' },
{ text: 'Option 3' },
],
destructiveText: 'Delete life',
titleText: 'Are you sure about life?',
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>

53
scss/_action-sheet.scss
View File

@ -4,6 +4,46 @@
* -------------------------------------------------- * --------------------------------------------------
*/ */
@-webkit-keyframes fadeInHalf {
from { background-color: rgba(0,0,0,0); }
to { background-color: rgba(0,0,0,0.5); }
}
@keyframes fadeInHalf {
from { background-color: rgba(0,0,0,0); }
to { background-color: rgba(0,0,0,0.5); }
}
@-webkit-keyframes fadeOutHalf {
from { background-color: rgba(0,0,0,0.5); }
to { background-color: rgba(0,0,0,0); }
}
@keyframes fadeOutHalf {
from { background-color: rgba(0,0,0,0.5); }
to { background-color: rgba(0,0,0,0); }
}
.action-sheet-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0);
&.active {
-webkit-animation: fadeInHalf 0.2s;
animation: fadeInHalf 0.2s;
-webkit-animation-fill-mode: forwards;
}
&.active-remove {
-webkit-animation: fadeOutHalf 0.2s;
animation: fadeOutHalf 0.2s;
-webkit-animation-fill-mode: forwards;
}
}
.action-sheet { .action-sheet {
@include translate3d(0, 100%, 0); @include translate3d(0, 100%, 0);
@ -16,9 +56,10 @@
.button { .button {
display: block; display: block;
padding: 10px; padding: 6px;
width: 100%; width: 100%;
border-radius: none; border-radius: none;
background-color: transparent; background-color: transparent;
color: $primary; color: $primary;
@ -34,10 +75,18 @@
padding: 10px; padding: 10px;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
color: lighten($base-color, 40%);
} }
.action-sheet-group { .action-sheet-group {
background-color: #fff;
margin-bottom: 10px; margin-bottom: 10px;
border-radius: $sheet-border-radius; border-radius: $sheet-border-radius;
background-color: rgba($sheet-bg-color, $sheet-opacity); .button {
border-radius: 0;
border-width: 1px 0px 0px 0px;
}
.button:first-child:last-child {
border-width: 0;
}
} }

6
scss/_variables.scss
View File

@ -487,7 +487,11 @@ $grid-padding-width: 10px !default;
$sheet-bg-color: rgba(255, 255, 255, 0.6) !default; $sheet-bg-color: rgba(255, 255, 255, 0.6) !default;
$sheet-opacity: 0.95 !default; $sheet-opacity: 0.95 !default;
$sheet-border-radius: 3px !default;
// Border radii for the action sheet button groups
$sheet-border-radius: 3px 3px 3px 3px !default;
$sheet-border-radius-top: 3px 3px 0px 0px !default;
$sheet-border-radius-bottom: 0px 0px 3px 3px !default;
// Badges // Badges