Skip to content

Commit 0d82456

Browse files
mlynchmlynch
committed
New tests
1 parent 4ad6021 commit 0d82456

File tree

14 files changed

+2093
-3
lines changed

14 files changed

+2093
-3
lines changed

‎test/html/autolayout/index.html‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
5+
<link rel="stylesheet" href="../../../dist/css/ionic.css">
6+
<script src="../../../dist/js/ionic.bundle.js"></script>
7+
<script src="ng-auto.js"></script>
8+
<style>
9+
html, body {
10+
margin: 0;
11+
font-family: 'Lato', sans-serif;
12+
}
13+
/* You don't want to CSS this way but when you do, do it for HTML readability sake */
14+
body > header,
15+
body > section {
16+
padding: 15px;
17+
}
18+
body > header > *,
19+
body > section > * {
20+
max-width: 980px;
21+
margin: 0 auto;
22+
}
23+
body > section:nth-child(even) {
24+
background: #f6f6f6;
25+
}
26+
body > section > footer > p:before {
27+
content: 'note: ';
28+
font-weight: bold;
29+
}
30+
h2 {
31+
margin-top: 30px;
32+
}
33+
code {
34+
font-family: monospace;
35+
font-style: normal;
36+
border: 1px solid #ddd;
37+
background-color: #f8f8f8;
38+
border-radius: 3px;
39+
padding: 0;
40+
}
41+
.inline-list {
42+
list-style: none;
43+
padding: 0;
44+
}
45+
.inline-list > li {
46+
float: left;
47+
margin-right: 15px;
48+
margin-bottom: 15px;
49+
}
50+
.inline-list:after {
51+
content: " ";
52+
display: table;
53+
clear: both;
54+
}
55+
.demo-container {
56+
width: 100%;
57+
height: 300px;
58+
background: #fbfbfb;
59+
border-radius: 5px;
60+
margin-bottom: 30px;
61+
}
62+
.demo-container button {
63+
display: block;
64+
width: 100%;
65+
height: 100%;
66+
}
67+
.demo-container img {
68+
display: block;
69+
max-height: 100%;
70+
margin: auto;
71+
}
72+
.demo-container.inline {
73+
display: inline-block;
74+
height: 30px;
75+
width: 200px;
76+
margin-bottom: 0;
77+
}
78+
.demo-box {
79+
background: rgb(67, 135, 253);
80+
background-image: -webkit-linear-gradient(top, rgb(67, 135, 253), rgb(70, 131, 234));
81+
border-radius: 5px;
82+
padding: 15px;
83+
box-sizing: border-box;
84+
color: rgba(255, 255, 255, 0.6);
85+
font-weight: bold;
86+
font-size: 3em;
87+
}
88+
89+
#demo2 {
90+
background-color: rgb(200,0,0);
91+
}
92+
</style>
93+
94+
</head>
95+
<body ng-app="autolayout-example">
96+
97+
<ion-header-bar class="bar-positive">
98+
<h1 class="title">Auto Layout</h1>
99+
</ion-header-bar>
100+
<ion-content>
101+
<div id="demo1" class="demo-container" al-update-on-resize>
102+
<div id="A">
103+
<img src="https://ionic-apps.s3.amazonaws.com/img/ionitron-twitter.png">
104+
</div>
105+
<div id="B">
106+
<button class="button button-positive">B</button>
107+
</div>
108+
<div id="C">
109+
<button class="button button-assertive">C</button>
110+
</div>
111+
112+
<al-constraint visual-format="|-[A(==200)]-[B]-|" align="top"></al-constraint>
113+
<al-constraint>|-[C]-|</al-constraint>
114+
<al-constraint>V:|-[A(==B,==C)]-[C]-|</al-constraint>
115+
</div>
116+
<div id="demo2" class="demo-container">
117+
<div id="A2">
118+
<button class="button button-positive">button</button>
119+
</div>
120+
<al-constraint>|-20-[A2]-20-|</al-constraint>
121+
<al-constraint>V:|-20-[A2]-20-|</al-constraint>
122+
</div>
123+
</ion-content>
124+
<script>
125+
angular.module('autolayout-example', ['autolayout', 'ionic'])
126+
127+
.config(function($stateProvider, $urlRouterProvider) {
128+
});
129+
</script>
130+
</body>
131+
</html>

‎test/html/autolayout/ng-auto.js‎

Lines changed: 1695 additions & 0 deletions
Large diffs are not rendered by default.

‎test/html/cards.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html ng-app="ionic">
3+
<head>
4+
<script src="../../dist/js/ionic.bundle.js"></script>
5+
<meta charset="utf-8">
6+
<title>Cards</title>
7+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
8+
<link href="../../dist/css/ionic.css" rel="stylesheet">
9+
<style>
10+
body {
11+
position: absolute;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
17+
<ion-header-bar>
18+
<h1 class="title">Cards: Text</h1>
19+
</ion-header-bar>
20+
21+
<ion-content>
22+
<h2>Hello</h2>
23+
<div class="card item-text-wrap">
24+
<div class="item item-complex">
25+
<div class="item-content">
26+
<code>.card.item-text-wrap .item.item-complex .item-content</code>
27+
This is a basic Card with some wrapping text.
28+
This is a basic Card with some wrapping text.
29+
This is a basic Card with some wrapping text.
30+
</div>
31+
</div>
32+
</div>
33+
34+
</ion-content>
35+
36+
</body>
37+
</html>

‎test/html/cat1.png‎

64.7 KB
Loading

‎test/html/cat2.png‎

63 KB
Loading

‎test/html/cat3.png‎

71.8 KB
Loading

‎test/html/cat4.png‎

131 KB
Loading

‎test/html/content.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ <h1 class="title">Title</h1>
1818

1919
<ion-content id="container"
2020
start-y="55"
21-
class="has-tabs has-header">
21+
class="has-tabs has-header" delegate-handle="myScroll">
2222
<ion-refresher></ion-refresher>
2323
<div id="search-box" class="bar bar-header item-input-inset">
2424
<label class="item-input-wrapper">
@@ -29,6 +29,7 @@ <h1 class="title">Title</h1>
2929
Cancel
3030
</button>
3131
</div>
32+
<button ng-click="doIt()" class="button button-assertive">Do et</button>
3233
<div class="list">
3334
<ion-input class="item item-input">
3435
<input type="text" placeholder="First Name">
@@ -133,10 +134,15 @@ <h1 class="title">Title</h1>
133134
});
134135
})
135136

136-
.controller('ThisCtrl', function($scope, $timeout) {
137+
.controller('ThisCtrl', function($scope, $timeout, $ionicScrollDelegate) {
137138
var header = document.getElementById('header');
138139
var content = document.getElementById('container');
139140
var startTop = header.offsetTop;
141+
142+
$scope.doIt = function() {
143+
$ionicScrollDelegate.$getByHandle('myScroll').scrollTo(0, 400, true);
144+
};
145+
140146
$scope.onScrollComplete = function(event, scrollTop, scrollLeft) {
141147
}
142148
$scope.add = function() {

‎test/html/content_simple.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html ng-app="navTest">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Content</title>
6+
7+
<!-- Sets initial viewport load and disables zooming -->
8+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
9+
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
10+
11+
<script src="../../../../dist/js/ionic.bundle.js"></script>
12+
<style>
13+
f { display: block; height: 400px; width: 100%; background-color: #387ef5; margin-bottom: 15px;
14+
display: block;
15+
margin: 15px auto;
16+
max-width: 150px;
17+
}
18+
</style>
19+
20+
</head>
21+
<body>
22+
<ion-pane>
23+
<ion-header-bar align-title="left" class="bar-assertive">
24+
<div class="buttons">
25+
<button class="button" ng-click="doSomething()">Left Button</button>
26+
</div>
27+
<h1 class="title">Title!</h1>
28+
<div class="buttons">
29+
<button class="button">Right Button</button>
30+
</div>
31+
</ion-header-bar>
32+
33+
<ion-content>
34+
<f></f>
35+
<f></f>
36+
<f></f>
37+
<f></f>
38+
<f></f>
39+
<f></f>
40+
<f></f>
41+
</ion-content>
42+
</ion-pane>
43+
44+
<script>
45+
angular.module('navTest', ['ionic']);
46+
</script>
47+
</body>
48+
</html>

‎test/html/drag.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<html ng-app="ionicApp">
2+
<head>
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
5+
6+
<title>Aborted drag gesture on Android 4.4.2</title>
7+
8+
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
9+
10+
<script src="../../../../dist/js/ionic.bundle.js"></script>
11+
12+
<style>
13+
body {
14+
cursor: url('http://ionicframework.com/img/finger.png'), auto;
15+
}
16+
#dragElement {
17+
position: absolute;
18+
width: 150px;
19+
height: 150px;
20+
background: red;
21+
}
22+
</style>
23+
24+
</head>
25+
<body ng-controller="MyCtrl">
26+
<ion-header-bar class="bar-positive">
27+
<h1 class="title">Aborted drag gesture on Android 4.4.2</h1>
28+
</ion-header-bar>
29+
30+
<ion-content class="has-header" scroll="false">
31+
<div id="dragElement"></div>
32+
</ion-content>
33+
<script>
34+
angular.module('ionicApp', ['ionic'])
35+
.controller('MyCtrl', function ($scope, $ionicGesture) {
36+
'use strict';
37+
var onDrag, onRelease, dragElement, dragGesture, release, x, y;
38+
39+
x = 0;
40+
y = 0;
41+
42+
dragElement = document.getElementById("dragElement");
43+
var dragEl = angular.element(dragElement);
44+
45+
onDrag = function (event) {
46+
var deltaX, deltaY;
47+
48+
deltaX = event.gesture.deltaX;
49+
deltaY = event.gesture.deltaY;
50+
51+
console.log(deltaX, deltaY, 'translate3d(' + (x + deltaX) + 'px, ' + (y + deltaY) + 'px, 0)');
52+
53+
dragElement.style[ionic.CSS.TRANSFORM] = 'translate3d(' + (x + deltaX) + 'px, ' + (y + deltaY) + 'px, 0)';
54+
};
55+
56+
onRelease = function (event) {
57+
x = x + event.gesture.deltaX;
58+
y = y + event.gesture.deltaY;
59+
};
60+
61+
dragGesture = $ionicGesture.on('drag', onDrag, dragEl);
62+
release = $ionicGesture.on('release', onRelease, dragEl);
63+
64+
$scope.$on('$destroy', function () {
65+
$ionicGesture.off(dragGesture, 'drag', onDrag);
66+
$ionicGesture.off(release, 'release', onRelease);
67+
});
68+
});
69+
</script>
70+
</body>
71+
</html>

0 commit comments

Comments
 (0)