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

ANimationed action sheet!

Browse Source
This commit is contained in:
Max Lynch
2013-10-04 23:55:10 -05:00
parent 2938e104c2
commit 5cc7070c03
9 changed files with 42 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
dist/ionic-angular.js vendored
View File

@ -18,7 +18,8 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh
angular.extend(scope, opts); angular.extend(scope, opts);
scope.cancel = function() { scope.cancel = function() {
scope.$destroy(); scope.sheet.hide();
//scope.$destroy();
opts.cancel(); opts.cancel();
} }
@ -26,7 +27,8 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh
// 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.$destroy(); scope.sheet.hide();
//scope.$destroy();
} }
}; };
@ -34,7 +36,8 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh
// 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.$destroy(); scope.sheet.hide();
//scope.$destroy();
} }
} }
@ -45,8 +48,11 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh
$document[0].body.appendChild(element[0]); $document[0].body.appendChild(element[0]);
var sheet = ionic.views.ActionSheet({el: element[0] }); var sheet = new ionic.views.ActionSheet({el: element[0] });
scope.sheet = sheet; scope.sheet = sheet;
sheet.show();
return sheet; return sheet;
} }
}; };
@ -122,7 +128,7 @@ angular.module('ionic.ui.actionSheet', [])
$element.remove(); $element.remove();
}); });
}, },
template: '<div class="action-sheet">' + template: '<div class="action-sheet slide-in-up">' +
'<div class="action-sheet-group">' + '<div class="action-sheet-group">' +
'<div class="action-sheet-title" ng-if="titleText">{{titleText}}</div>' + '<div class="action-sheet-title" ng-if="titleText">{{titleText}}</div>' +
'<button class="button" ng-click="buttonClicked($index)" ng-repeat="button in buttons">{{button.text}}</button>' + '<button class="button" ng-click="buttonClicked($index)" ng-repeat="button in buttons">{{button.text}}</button>' +

3
dist/ionic-ios7.css vendored
View File

@ -2262,7 +2262,8 @@ a.button {
-webkit-transition: -webkit-transform 0.25s, opacity 0.25s; -webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
transition: -webkit-transform 0.25s, opacity 0.25s; transition: -webkit-transform 0.25s, opacity 0.25s;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); } transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-webkit-animation-fill-mode: forwards; }
.slide-in-up.active { .slide-in-up.active {
opacity: 1; opacity: 1;

5
dist/ionic.css vendored
View File

@ -1172,6 +1172,8 @@ address {
width: calc(100% - 30px); width: calc(100% - 30px);
bottom: 0; bottom: 0;
left: 15px; left: 15px;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
overflow: hidden; } overflow: hidden; }
.action-sheet .button { .action-sheet .button {
display: block; display: block;
@ -2342,7 +2344,8 @@ a.button {
-webkit-transition: -webkit-transform 0.25s, opacity 0.25s; -webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
transition: -webkit-transform 0.25s, opacity 0.25s; transition: -webkit-transform 0.25s, opacity 0.25s;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); } transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-webkit-animation-fill-mode: forwards; }
.slide-in-up.active { .slide-in-up.active {
opacity: 1; opacity: 1;

5
dist/ionic.js vendored
View File

@ -1743,9 +1743,14 @@ window.ionic = {
ionic.views.ActionSheet.prototype = { ionic.views.ActionSheet.prototype = {
show: function() { show: function() {
// Force a reflow so the animation will actually run
this.el.offsetWidth;
this.el.classList.add('active'); this.el.classList.add('active');
}, },
hide: function() { hide: function() {
// Force a reflow so the animation will actually run
this.el.offsetWidth;
this.el.classList.remove('active'); this.el.classList.remove('active');
} }
}; };

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

@ -10,7 +10,7 @@ angular.module('ionic.ui.actionSheet', [])
$element.remove(); $element.remove();
}); });
}, },
template: '<div class="action-sheet">' + template: '<div class="action-sheet slide-in-up">' +
'<div class="action-sheet-group">' + '<div class="action-sheet-group">' +
'<div class="action-sheet-title" ng-if="titleText">{{titleText}}</div>' + '<div class="action-sheet-title" ng-if="titleText">{{titleText}}</div>' +
'<button class="button" ng-click="buttonClicked($index)" ng-repeat="button in buttons">{{button.text}}</button>' + '<button class="button" ng-click="buttonClicked($index)" ng-repeat="button in buttons">{{button.text}}</button>' +

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

@ -16,7 +16,8 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh
angular.extend(scope, opts); angular.extend(scope, opts);
scope.cancel = function() { scope.cancel = function() {
scope.$destroy(); scope.sheet.hide();
//scope.$destroy();
opts.cancel(); opts.cancel();
} }
@ -24,7 +25,8 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh
// 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.$destroy(); scope.sheet.hide();
//scope.$destroy();
} }
}; };
@ -32,7 +34,8 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh
// 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.$destroy(); scope.sheet.hide();
//scope.$destroy();
} }
} }
@ -43,8 +46,11 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh
$document[0].body.appendChild(element[0]); $document[0].body.appendChild(element[0]);
var sheet = ionic.views.ActionSheet({el: element[0] }); var sheet = new ionic.views.ActionSheet({el: element[0] });
scope.sheet = sheet; scope.sheet = sheet;
sheet.show();
return sheet; return sheet;
} }
}; };

5
js/views/actionSheetView.js
View File

@ -11,9 +11,14 @@
ionic.views.ActionSheet.prototype = { ionic.views.ActionSheet.prototype = {
show: function() { show: function() {
// Force a reflow so the animation will actually run
this.el.offsetWidth;
this.el.classList.add('active'); this.el.classList.add('active');
}, },
hide: function() { hide: function() {
// Force a reflow so the animation will actually run
this.el.offsetWidth;
this.el.classList.remove('active'); this.el.classList.remove('active');
} }
}; };

3
scss/ionic/_actionSheet.scss
View File

@ -8,6 +8,9 @@
bottom: 0; bottom: 0;
left: 15px; left: 15px;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
overflow: hidden; overflow: hidden;

1
scss/ionic/_animations.scss
View File

@ -10,6 +10,7 @@ $bezier-function: cubic-bezier(.1, .7, .1, 1);
transition: -webkit-transform 0.25s, opacity 0.25s; transition: -webkit-transform 0.25s, opacity 0.25s;
-webkit-transition-timing-function: $bezier-function; -webkit-transition-timing-function: $bezier-function;
transition-timing-function: $bezier-function; transition-timing-function: $bezier-function;
-webkit-animation-fill-mode: forwards;
} }
.slide-in-up.active { .slide-in-up.active {