mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
A whole lotta shit
This commit is contained in:
Max Lynch
@ -6,9 +6,9 @@
|
||||
<!-- 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-rc.2/angular.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
|
||||
<script src="/vendor/angular/angular-1.2.0rc2.min.js"></script>
|
||||
<script src="/vendor/angular/angular-touch.js"></script>
|
||||
<script src="/vendor/angular/angular-animate.js"></script>
|
||||
<style>
|
||||
.my-repeat-animation > .ng-enter,
|
||||
.my-repeat-animation > .ng-leave,
|
||||
@ -43,24 +43,30 @@
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 2px solid rgba(255,255,255,0.4);
|
||||
border-radius: 40px;
|
||||
margin: auto;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
.spin-thing {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #4a87ee;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<content has-header="true" ng-controller="TestCtrl" class="reveal-animation">
|
||||
<list is-editing="isEditingItems" on-refresh="refreshProjects()" animation="my-repeat-animation" delete-icon="icon-minus-circled" reorder-icon="icon-navicon">
|
||||
<content ng-controller="TestCtrl" class="reveal-animation">
|
||||
<list is-editing="isEditingItems" on-refresh-holding="almostRefreshing()" on-refresh-opening="almostRefreshProjects(ratio)" on-refresh="refreshProjects()" animation="my-repeat-animation" delete-icon="icon-minus-circled" reorder-icon="icon-navicon">
|
||||
<list-refresher>
|
||||
<pulling>
|
||||
<div style="height: 100px; font-size: 30px; text-align: center">PULL TO REFRESH</div>
|
||||
</pulling>
|
||||
<holding>
|
||||
<div style="height: 100px; font-size: 30px; text-align: center">RELEASE TO REFRESH</div>
|
||||
</holding>
|
||||
<refreshing>
|
||||
<div style="height: 100px; font-size: 30px; text-align: center">REFRESHING</div>
|
||||
</refreshing>
|
||||
</div>
|
||||
<spinner ratio="refreshRatio.ratio"></spinner>
|
||||
</list-refresher>
|
||||
<list-item ng-repeat="item in items"
|
||||
buttons="item.buttons"
|
||||
can-delete="true"
|
||||
@ -78,16 +84,52 @@
|
||||
<script src="../../../../dist/js/ionic.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
<script>
|
||||
angular.module('navTest', ['ionic.ui.list', 'ngAnimate'])
|
||||
angular.module('navTest', ['ionic.ui.list', 'ionic.ui.content', 'ngAnimate'])
|
||||
|
||||
.directive('spinner', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
scope: {
|
||||
ratio: '='
|
||||
},
|
||||
template: '<div class="spinner"><div class="spin-thing"></div></div>',
|
||||
link: function($scope, $element, $attr) {
|
||||
$scope.$watch('ratio', function(value) {
|
||||
if(value > 0.97) {
|
||||
value = 1;
|
||||
}
|
||||
|
||||
var a = (value * 360) % 360;
|
||||
var r = (a * Math.PI) / 180;
|
||||
var x = (Math.sin(r) * 20) + 14;
|
||||
var y = (Math.cos(r) * -20) + 14;
|
||||
|
||||
$element[0].firstElementChild.style.webkitTransform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
|
||||
//$element[0].firstElementChild.setAttribute('d', anim);
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
.controller('TestCtrl', function($scope) {
|
||||
$scope.refreshRatio = { ratio: 0 };
|
||||
var removeItem = function(item) {
|
||||
// Remove ourselves
|
||||
$scope.items.splice($scope.items.indexOf(item), 1);
|
||||
};
|
||||
|
||||
$scope.almostRefreshing = function() {
|
||||
console.log('HOLDING FOR REFRESH');
|
||||
};
|
||||
$scope.almostRefreshProjects = function(amt) {
|
||||
console.log('ALMOST REFRESHING', amt);
|
||||
$scope.refreshRatio.ratio = amt;
|
||||
$scope.$apply();
|
||||
};
|
||||
|
||||
$scope.refreshProjects = function() {
|
||||
alert('refreshing!');
|
||||
console.log("REFRESHING");
|
||||
};
|
||||
|
||||
$scope.items = [
|
||||
|
||||
36
js/ext/angular/test/loading.html
Normal file
36
js/ext/angular/test/loading.html
Normal file
@ -0,0 +1,36 @@
|
||||
<html ng-app="ionic.example">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Loading</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="/vendor/angular/angular-1.2.0rc2.min.js"></script>
|
||||
<script src="/vendor/angular/angular-touch.js"></script>
|
||||
<script src="/vendor/angular/angular-animate.js"></script>
|
||||
</head>
|
||||
<body ng-controller="LoadingCtrl">
|
||||
<button class="button button-dark" ng-click="startLoading()">Load</button>
|
||||
<script src="../../../../dist/js/ionic.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
<script>
|
||||
angular.module('ionic.example', ['ionic.service.loading'])
|
||||
|
||||
.controller('LoadingCtrl', function($scope, Loading) {
|
||||
$scope.startLoading = function() {
|
||||
var loading = Loading.show({
|
||||
animation: 'fade-in',
|
||||
content: 'Loading'
|
||||
});
|
||||
setTimeout(function() {
|
||||
loading.hide();
|
||||
}, 2000);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -6,12 +6,18 @@
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../../../dist/ionic.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
|
||||
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
|
||||
<script src="/vendor/angular/angular-1.2.0rc2.min.js"></script>
|
||||
<script src="/vendor/angular/angular-touch.js"></script>
|
||||
<script src="/vendor/angular/angular-animate.js"></script>
|
||||
<style>
|
||||
.reveal-animation {
|
||||
.view {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
}
|
||||
.slide-in-slide-out {
|
||||
/*
|
||||
-webkit-transform: translate3d(0%, 0, 0);
|
||||
transform: translate3d(0%, 0, 0);
|
||||
@ -20,35 +26,28 @@
|
||||
transition: transform 1s ease-in-out;
|
||||
*/
|
||||
}
|
||||
.reveal-animation.ng-enter {
|
||||
-webkit-transition: .2s ease-in-out all;
|
||||
-webkit-transform:translate3d(100%,0,0) ;
|
||||
}
|
||||
.reveal-animation.ng-enter-active {
|
||||
-webkit-transform:translate3d(0,0,0) ;
|
||||
}
|
||||
.reveal-animation.ng-leave {
|
||||
-webkit-transition: .2s ease-in-out all;
|
||||
-webkit-transform:translate3d(0%,0,0);
|
||||
}
|
||||
.reveal-animation.ng-leave-active {
|
||||
-webkit-transition: .2s ease-in-out all;
|
||||
-webkit-transform:translate3d(-100%,0,0);
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav-ctrl>
|
||||
<navs>
|
||||
<nav-bar></nav-bar>
|
||||
|
||||
<content has-header="true" ng-controller="AppCtrl" class="reveal-animation">
|
||||
<content has-header="true" ng-controller="AppCtrl" class="slide-in-slide-out">
|
||||
</content>
|
||||
</nav-ctrl>
|
||||
</navs>
|
||||
|
||||
<script src="../../../../dist/ionic.js"></script>
|
||||
<script src="../../../../dist/ionic-angular.js"></script>
|
||||
<script id="page.html" type="text/ng-template">
|
||||
<div title="Home" ng-controller="CatsCtrl" class="nav-content slide-in-slide-out">
|
||||
<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>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script src="../../../../dist/js/ionic.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
<script>
|
||||
var pageNumber = 0;
|
||||
|
||||
@ -56,29 +55,27 @@
|
||||
var childScope = $scope.$new();
|
||||
childScope.isVisible = true;
|
||||
|
||||
var items = [];
|
||||
for(var i = 0; i < 100; i++) {
|
||||
items.push({});
|
||||
}
|
||||
childScope.items = items;
|
||||
|
||||
pageNumber++;
|
||||
|
||||
var el = $compile('<div title="Home: ' + pageNumber + '" ng-controller="CatsCtrl" nav-content has-header="true" class="reveal-animation" ng-show="isVisible">' +
|
||||
'<h1>' + pageNumber + '</h1>' +
|
||||
'<a href="#" class="button button-success" ng-click="goNext()">Next</a>' +
|
||||
'</div>')(childScope, cb);
|
||||
}
|
||||
|
||||
angular.module('navTest', ['ionic.ui.nav'])
|
||||
angular.module('navTest', ['ionic.ui.nav', 'ionic.ui.content', 'ionic.ui.list', 'ngAnimate'])
|
||||
|
||||
.controller('AppCtrl', function($scope, $compile, $element) {
|
||||
pushIt($scope, $compile, $element, function(cloned, scope) {
|
||||
$element.append(cloned);
|
||||
})
|
||||
|
||||
$scope.navController.pushFromTemplate('page.html');
|
||||
})
|
||||
|
||||
.controller('CatsCtrl', function($scope, $compile, $element) {
|
||||
console.log('Cats', $element);
|
||||
$scope.goNext = function() {
|
||||
pushIt($scope, $compile, $element, function(cloned, scope) {
|
||||
$element.parent().append(cloned);
|
||||
})
|
||||
$scope.isVisible = false;
|
||||
$scope.navController.pushFromTemplate('page.html');
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
62
js/ext/angular/test/slideBox.html
Normal file
62
js/ext/angular/test/slideBox.html
Normal file
@ -0,0 +1,62 @@
|
||||
<html ng-app="slideBoxTest">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Sldie Box</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
|
||||
<script src="/vendor/angular/angular-1.2.0rc2.min.js"></script>
|
||||
<script src="/vendor/angular/angular-touch.js"></script>
|
||||
<script src="/vendor/angular/angular-animate.js"></script>
|
||||
<style>
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
.box h1 {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
margin-top: -80px;
|
||||
|
||||
color: #fff;
|
||||
|
||||
font-size: 160px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
.blue {
|
||||
background-color: rgb(71, 138, 238);
|
||||
}
|
||||
.yellow {
|
||||
background-color: rgb(233, 233, 109);
|
||||
}
|
||||
.pink {
|
||||
background-color: rgb(233, 109, 233);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<slide-box>
|
||||
<slide>
|
||||
<div class="box blue"><h1>BLUE</h1></div>
|
||||
</slide>
|
||||
<slide>
|
||||
<div class="box yellow"><h1>YELLOW</h1></div>
|
||||
</slide>
|
||||
<slide>
|
||||
<div class="box pink"><h1>PINK</h1></div>
|
||||
</slide>
|
||||
</slide-box>
|
||||
<script src="../../../../dist/js/ionic.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
<script>
|
||||
angular.module('slideBoxTest', ['ionic.ui.slideBox'])
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
64
js/ext/angular/test/tabBar.html
Normal file
64
js/ext/angular/test/tabBar.html
Normal file
@ -0,0 +1,64 @@
|
||||
<html ng-app="tabsTest">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Tab Bars</title>
|
||||
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
|
||||
<script src="/vendor/angular/angular-1.2.0rc2.min.js"></script>
|
||||
<script src="/vendor/angular/angular-touch.js"></script>
|
||||
<script src="/vendor/angular/angular-animate.js"></script>
|
||||
<style>
|
||||
.fade-out > .ng-enter,
|
||||
.fade-out > .ng-leave,
|
||||
.fade-out > .ng-move {
|
||||
-webkit-transition: 0.2s linear all;
|
||||
transition: 0.4s ease-out all;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.fade-out > .ng-enter {
|
||||
left:-10px;
|
||||
opacity:0;
|
||||
}
|
||||
.fade-out > .ng-enter.ng-enter-active {
|
||||
left:0;
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
.fade-out > .ng-leave {
|
||||
left:0;
|
||||
opacity:1;
|
||||
}
|
||||
.fade-out > .ng-leave.ng-leave-active {
|
||||
left:-10px;
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
.fade-out > .ng-move {
|
||||
opacity:0.5;
|
||||
}
|
||||
.fade-out > .ng-move.ng-move-active {
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
.completed {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<tab-bar>
|
||||
<tab-item title="Home"></tab-item>
|
||||
<tab-item title="Item"></tab-item>
|
||||
<tab-item title="Test"></tab-item>
|
||||
</tab-bar>
|
||||
|
||||
<script src="../../../../dist/js/ionic.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
<script>
|
||||
angular.module('tabsTest', ['ionic.ui', 'ionic.service.modal', 'ionic.service.actionSheet'])
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -5,9 +5,9 @@
|
||||
|
||||
<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-rc.2/angular.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
|
||||
<script src="/vendor/angular/angular-1.2.0rc2.min.js"></script>
|
||||
<script src="/vendor/angular/angular-touch.js"></script>
|
||||
<script src="/vendor/angular/angular-animate.js"></script>
|
||||
<style>
|
||||
.fade-out > .ng-enter,
|
||||
.fade-out > .ng-leave,
|
||||
@ -48,9 +48,9 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<tab-controller>
|
||||
<tabs animation="fade-in-out">
|
||||
|
||||
<div title="Home" icon-on="icon-ios7-filing" icon-off="icon-ios7-filing-outline" class="tab-content" ng-controller="HomeCtrl">
|
||||
<tab title="Home" icon-on="icon-ios7-filing" icon-off="icon-ios7-filing-outline" ng-controller="HomeCtrl">
|
||||
<header class="bar bar-header bar-secondary">
|
||||
<button class="button button-clear button-primary" ng-click="newTask()">New</button>
|
||||
<h1 class="title">Tasks</h1>
|
||||
@ -72,27 +72,27 @@
|
||||
</list-item>
|
||||
</list>
|
||||
</content>
|
||||
</div>
|
||||
</tab>
|
||||
|
||||
<div title="About" icon-on="icon-ios7-clock" icon-off="icon-ios7-clock-outline" class="tab-content">
|
||||
<tab title="About" icon-on="icon-ios7-clock" icon-off="icon-ios7-clock-outline">
|
||||
<header class="bar bar-header bar-secondary">
|
||||
<h1 class="title">Deadlines</h1>
|
||||
</header>
|
||||
<content has-header="true" has-tabs="true">
|
||||
<h1>Deadlines</h1>
|
||||
</content>
|
||||
</div>
|
||||
</tab>
|
||||
|
||||
<div title="Settings" icon-on="icon-ios7-gear" icon-off="icon-ios7-gear-outline" class="tab-content">
|
||||
<tab title="Settings" icon-on="icon-ios7-gear" icon-off="icon-ios7-gear-outline">
|
||||
<header class="bar bar-header bar-secondary">
|
||||
<h1 class="title">Settings</h1>
|
||||
</header>
|
||||
<content has-header="true" has-tabs="true">
|
||||
<h1>Settings</h1>
|
||||
</content>
|
||||
</div>
|
||||
</tab>
|
||||
|
||||
</tab-controller>
|
||||
</tabs>
|
||||
|
||||
<script id="newTask.html" type="text/ng-template">
|
||||
<div id="task-view" class="modal slide-in-up" ng-controller="TaskCtrl">
|
||||
|
||||
Reference in New Issue
Block a user