Skip to content

Commit be4150a

Browse files
IonitronIonitron
committed
demos: update for 1.0.0-beta.8
1 parent 4746e98 commit be4150a

File tree

98 files changed

+105889
-3
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

98 files changed

+105889
-3
lines changed

‎$ionicActionSheet/takeAction/index-ionic-demo-app.js

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
var DEMO;
2+
3+
DEMO = {
4+
"files": {
5+
"html": [
6+
{
7+
"name": "takeAction",
8+
"component": "$ionicActionSheet",
9+
"id": "$ionicActionSheet-takeAction",
10+
"fileType": ".html",
11+
"fileName": "index.html",
12+
"contents": "\n<ion-header-bar class=\"bar-positive\">\n <h1 class=\"title\">Action</h1>\n</ion-header-bar>\n<ion-content ng-controller=\"ActionSheetCtrl\" class=\"padding\">\n <div class=\"button button-assertive button-block\" ng-click=\"takeAction()\">\n Take Action!\n </div>\n <div class=\"card\" ng-show=\"messages.length\">\n <div class=\"item item-divider\">\n User Log\n </div>\n <div class=\"item item-text-wrap\">\n <div ng-repeat=\"message in messages\">\n {{message.text}}\n </div>\n </div>\n </div>\n</ion-content>",
13+
"extension": "html",
14+
"template": "asset.contents.template",
15+
"outputPath": "$ionicActionSheet/takeAction/index.html",
16+
"renderedContent": "\n<ion-header-bar class=\"bar-positive\">\n <h1 class=\"title\">Action</h1>\n</ion-header-bar>\n<ion-content ng-controller=\"ActionSheetCtrl\" class=\"padding\">\n <div class=\"button button-assertive button-block\" ng-click=\"takeAction()\">\n Take Action!\n </div>\n <div class=\"card\" ng-show=\"messages.length\">\n <div class=\"item item-divider\">\n User Log\n </div>\n <div class=\"item item-text-wrap\">\n <div ng-repeat=\"message in messages\">\n {{message.text}}\n </div>\n </div>\n </div>\n</ion-content>\n"
17+
}
18+
],
19+
"js": [
20+
{
21+
"name": "takeAction",
22+
"component": "$ionicActionSheet",
23+
"id": "$ionicActionSheet-takeAction",
24+
"fileType": ".js",
25+
"fileName": "index.js",
26+
"contents": "\nangular.module('takeAction', ['ionic'])\n.controller('ActionSheetCtrl', function($scope, $ionicActionSheet) {\n $scope.messages = [];\n $scope.takeAction = function() {\n $ionicActionSheet.show({\n buttons: [\n { text: 'Share <i class=\"icon ion-share\">' },\n { text: 'Edit <i class=\"icon ion-edit\">' }\n ],\n destructiveText: 'Delete <i class=\"icon ion-trash-b\">',\n titleText: 'Modify your album',\n cancelText: 'Cancel',\n cancel: function() {\n $scope.message('Cancel');\n return true;\n },\n buttonClicked: function(index) {\n $scope.message(index === 0 ? 'Share' : 'Edit');\n return true;\n },\n destructiveButtonClicked: function() {\n $scope.message('Delete');\n return true;\n }\n });\n };\n $scope.message = function(msg) {\n $scope.messages.unshift({\n text: 'User pressed ' + msg\n });\n };\n});",
27+
"extension": "js",
28+
"template": "asset.contents.template",
29+
"outputPath": "$ionicActionSheet/takeAction/index.js",
30+
"renderedContent": "\nangular.module('takeAction', ['ionic'])\n.controller('ActionSheetCtrl', function($scope, $ionicActionSheet) {\n $scope.messages = [];\n $scope.takeAction = function() {\n $ionicActionSheet.show({\n buttons: [\n { text: 'Share <i class=\"icon ion-share\">' },\n { text: 'Edit <i class=\"icon ion-edit\">' }\n ],\n destructiveText: 'Delete <i class=\"icon ion-trash-b\">',\n titleText: 'Modify your album',\n cancelText: 'Cancel',\n cancel: function() {\n $scope.message('Cancel');\n return true;\n },\n buttonClicked: function(index) {\n $scope.message(index === 0 ? 'Share' : 'Edit');\n return true;\n },\n destructiveButtonClicked: function() {\n $scope.message('Delete');\n return true;\n }\n });\n };\n $scope.message = function(msg) {\n $scope.messages.unshift({\n text: 'User pressed ' + msg\n });\n };\n});\n"
31+
}
32+
],
33+
"scenario.js": [
34+
{
35+
"name": "takeAction",
36+
"component": "$ionicActionSheet",
37+
"id": "$ionicActionSheet-takeAction",
38+
"fileType": ".scenario.js",
39+
"fileName": "test.scenario.js",
40+
"contents": "\n\nit('should open up actionsheet', function(){\n var ele = element(by.css('.button'));\n ele.click();\n});\n\nit('should close when clicking backdrop', function(){\n var ele = element(by.css('.action-sheet-backdrop'));\n ele.click();\n});\n\nit('should open up actionsheet again', function(){\n var ele = element(by.css('.button'));\n ele.click();\n});\n\nit('should click the share button', function(){\n var ele = element.all(by.css('.action-sheet-group .button'));\n ele.get(0).click();\n});",
41+
"extension": "scenario.js",
42+
"template": "scenario.template.js",
43+
"outputPath": "$ionicActionSheet/takeAction/test.scenario.js",
44+
"url": "http://localhost:8876/$ionicActionSheet/takeAction/",
45+
"renderedContent": "describe('$ionicActionSheet-takeAction', function() {\n\nit('should init', function() {\n browser.get('http://localhost:8876/$ionicActionSheet/takeAction/');\n});\n\n\n\nit('should open up actionsheet', function(){\n var ele = element(by.css('.button'));\n ele.click();\n});\n\nit('should close when clicking backdrop', function(){\n var ele = element(by.css('.action-sheet-backdrop'));\n ele.click();\n});\n\nit('should open up actionsheet again', function(){\n var ele = element(by.css('.button'));\n ele.click();\n});\n\nit('should click the share button', function(){\n var ele = element.all(by.css('.action-sheet-group .button'));\n ele.get(0).click();\n});\n\n});\n"
46+
}
47+
]
48+
},
49+
"id": "$ionicActionSheet-takeAction",
50+
"name": "takeAction",
51+
"component": "$ionicActionSheet",
52+
"href": "/$ionicActionSheet/takeAction/"
53+
};
54+
55+
56+
angular.module('takeAction'
57+
)
58+
.controller('IonicDemoCtrl', function($scope, $ionicModal, $ionicLoading) {
59+
$scope.$demos = DEMOS;
60+
61+
62+
$scope.$demo = DEMO;
63+
$ionicModal.fromTemplateUrl('ionic-demo-modal.html', {
64+
scope: $scope,
65+
focusFirstInput: false
66+
}).then(function(modal) {
67+
$scope.$demoModal = modal;
68+
});
69+
70+
//don't try this at home
71+
ionic.onGesture('dragup', function(e) {
72+
if (e.gesture.distance > 35 && !$scope.$demoModal.isShown()) {
73+
$scope.$apply(function(e) {
74+
$scope.$demoModal.show();
75+
});
76+
}
77+
}, document.querySelector('.demo-footer'));
78+
79+
$scope.demoScratch = function(demo) {
80+
var form = angular.element('<form method="POST" action="http://scratch.ionicsdk.com/embed" target="_blank">');
81+
82+
var htmlInput = angular.element('<textarea type="text" name="html">')
83+
.val(['<html ng-app="takeAction">',
84+
'<head>',
85+
' <meta charset="utf-8">',
86+
' <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">',
87+
' <link rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.8/css/ionic.css">',
88+
' <script src="http://code.ionicframework.com/1.0.0-beta.8/js/ionic.bundle.js"></script>',
89+
'</head>',
90+
'<body>',
91+
(demo.files.html || []).map(function(file) {
92+
return file.contents;
93+
}).join('\n'),
94+
'</body>',
95+
'</html>'].join('\n'));
96+
97+
var cssInput = angular.element('<textarea type="text" name="css">')
98+
.val((demo.files.css || []).map(function(file) {
99+
return file.contents;
100+
}).join('\n'));
101+
102+
var jsInput = angular.element('<textarea type="text" name="js">')
103+
.val((demo.files.js || []).map(function(file) {
104+
return file.contents;
105+
}).join('\n'));
106+
107+
form
108+
.css('display','none')
109+
.append(htmlInput)
110+
.append(cssInput)
111+
.append(jsInput);
112+
113+
document.body.appendChild(form[0]);
114+
form[0].submit();
115+
};
116+
117+
})
118+
.filter('humanize', function() {
119+
return function(input) {
120+
return input.charAt(0).toUpperCase() +
121+
input.substring(1).replace(/[A-Z]/g, function(match, i) {
122+
return ' ' + match.toUpperCase();
123+
});
124+
};
125+
});
126+

‎$ionicActionSheet/takeAction/index.html

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!doctype html>
2+
<html ng-app="takeAction" ng-controller="IonicDemoCtrl">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
6+
<link rel="stylesheet" href="//ionic/css/ionic.min.css">
7+
<script src="//ionic/js/ionic.bundle.min.js"></script>
8+
<script src="//pages-data.js"></script>
9+
10+
11+
12+
<script src="index.js"></script>
13+
14+
<script src="index-ionic-demo-app.js"></script>
15+
</head>
16+
<body>
17+
18+
19+
20+
<div class="demo-content-pane">
21+
22+
23+
<ion-header-bar class="bar-positive">
24+
<h1 class="title">Action</h1>
25+
</ion-header-bar>
26+
<ion-content ng-controller="ActionSheetCtrl" class="padding">
27+
<div class="button button-assertive button-block" ng-click="takeAction()">
28+
Take Action!
29+
</div>
30+
<div class="card" ng-show="messages.length">
31+
<div class="item item-divider">
32+
User Log
33+
</div>
34+
<div class="item item-text-wrap">
35+
<div ng-repeat="message in messages">
36+
{{message.text}}
37+
</div>
38+
</div>
39+
</div>
40+
</ion-content>
41+
42+
</div>
43+
<div class="bar bar-footer bar-light demo-footer" ng-click="$demoModal.show()">
44+
<div class="demo-footer-icon" ng-hide="$demoModal.isShown()">
45+
<i class="icon ion-chevron-up"></i>
46+
</div>
47+
<h1 class="title" style="right:auto;"
48+
ng-bind="$demo.component + ': ' + ($demo.name | humanize)">
49+
</h1>
50+
<div class="buttons right-buttons">
51+
<a class="button" ng-click="demoScratch($demo); $event.stopPropagation()">
52+
<i class="icon ion-code"></i>
53+
Source
54+
</a>
55+
</div>
56+
57+
58+
59+
<script type="text/ng-template" id="ionic-demo-modal.html">
60+
<div class="modal">
61+
<div ng-include="'demo-list.html'">
62+
</div>
63+
</div>
64+
</script>
65+
66+
<script type="text/ng-template" id="demo-list.html">
67+
<ion-header-bar class="bar-light">
68+
<a class="button" ng-click="$demoModal.hide()" ng-if="$demo">
69+
Cancel
70+
</a>
71+
<h1 class="title">All Demos</h1>
72+
</ion-header-bar>
73+
<ion-content>
74+
75+
<div class="list">
76+
<div class="item item-input-inset">
77+
<label class="item-input-wrapper">
78+
<input type="text" placeholder="Filter Demos..." ng-model="demoFilter">
79+
</label>
80+
<button class="button button-small" ng-click="demoFilter = ''">
81+
Clear
82+
</button>
83+
</div>
84+
85+
<a class="item item-icon-right"
86+
ng-class="{active: demo.id == $demo.id }"
87+
ng-repeat="demo in $demos | filter:demoFilter"
88+
ng-href="{{demo.href}}"
89+
ng-bind="demo.component + ': ' + (demo.name | humanize)">
90+
<i class="icon icon-accessory ion-chevron-right"></i>
91+
</a>
92+
</div>
93+
94+
</ion-content>
95+
</script>
96+
97+
<style>
98+
body {
99+
margin-bottom: 44px;
100+
}
101+
.demo-content-pane {
102+
position: absolute;
103+
top: 0;
104+
right: 0;
105+
bottom: 44px;
106+
left: 0;
107+
width: 100%;
108+
overflow: hidden;
109+
}
110+
.demo-footer-icon {
111+
position: absolute;
112+
left: 0;
113+
right: 0;
114+
top: -3px;
115+
margin: auto;
116+
text-align: center;
117+
-webkit-transform: scaleX(1.3);
118+
-moz-transform: scaleX(1.3);
119+
transform: scaleX(1.3);
120+
}
121+
.demo-footer-icon .icon {
122+
color: #CCC;
123+
font-size: 18px;
124+
}
125+
</style>
126+
127+
</body>
128+
</html>
129+

‎$ionicActionSheet/takeAction/index.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
2+
angular.module('takeAction', ['ionic'])
3+
.controller('ActionSheetCtrl', function($scope, $ionicActionSheet) {
4+
$scope.messages = [];
5+
$scope.takeAction = function() {
6+
$ionicActionSheet.show({
7+
buttons: [
8+
{ text: 'Share <i class="icon ion-share">' },
9+
{ text: 'Edit <i class="icon ion-edit">' }
10+
],
11+
destructiveText: 'Delete <i class="icon ion-trash-b">',
12+
titleText: 'Modify your album',
13+
cancelText: 'Cancel',
14+
cancel: function() {
15+
$scope.message('Cancel');
16+
return true;
17+
},
18+
buttonClicked: function(index) {
19+
$scope.message(index === 0 ? 'Share' : 'Edit');
20+
return true;
21+
},
22+
destructiveButtonClicked: function() {
23+
$scope.message('Delete');
24+
return true;
25+
}
26+
});
27+
};
28+
$scope.message = function(msg) {
29+
$scope.messages.unshift({
30+
text: 'User pressed ' + msg
31+
});
32+
};
33+
});

‎$ionicActionSheet/takeAction/test.scenario.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
describe('$ionicActionSheet-takeAction', function() {
2+
3+
it('should init', function() {
4+
browser.get('http://localhost:8876/$ionicActionSheet/takeAction/');
5+
});
6+
7+
8+
9+
it('should open up actionsheet', function(){
10+
var ele = element(by.css('.button'));
11+
ele.click();
12+
});
13+
14+
it('should close when clicking backdrop', function(){
15+
var ele = element(by.css('.action-sheet-backdrop'));
16+
ele.click();
17+
});
18+
19+
it('should open up actionsheet again', function(){
20+
var ele = element(by.css('.button'));
21+
ele.click();
22+
});
23+
24+
it('should click the share button', function(){
25+
var ele = element.all(by.css('.action-sheet-group .button'));
26+
ele.get(0).click();
27+
});
28+
29+
});

0 commit comments

Comments
 (0)