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

LOTS OF SHIT WOW

Browse Source
This commit is contained in:
Max Lynch
2013-11-13 22:49:54 -06:00
parent 8e585e766c
commit 22d10a155e
33 changed files with 782 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
js/ext/angular/src/directive/ionicHeader.js → js/ext/angular/src/directive/ionicBar.js vendored
View File

@ -14,7 +14,7 @@ angular.module('ionic.ui.header', ['ngAnimate'])
<button ng-repeat="button in leftButtons" class="button" ng-class="button.type" ng-click="button.click($event, $index)" ng-bind-html="button.content">\
</button>\
</div>\
<h1 class="title" ng-bind="title"></h1>\
<h1 class="title" ng-bind-html="title"></h1>\
<div class="buttons">\
<button ng-repeat="button in rightButtons" class="button" ng-class="button.type" ng-click="button.click($event, $index)" ng-bind-html="button.content">\
</button>\
@ -60,6 +60,24 @@ angular.module('ionic.ui.header', ['ngAnimate'])
});
}
};
})
.directive('footerBar', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<footer class="bar bar-footer" ng-transclude>\
</footer>',
scope: {
type: '@',
},
link: function($scope, $element, $attr) {
$element.addClass($scope.type);
}
};
});
})(ionic);

22
js/ext/angular/src/directive/ionicContent.js vendored
View File

@ -27,6 +27,7 @@ angular.module('ionic.ui.content', [])
scope: {
onRefresh: '&',
onRefreshOpening: '&',
refreshComplete: '=',
scroll: '@'
},
compile: function(element, attr, transclude) {
@ -47,9 +48,17 @@ angular.module('ionic.ui.content', [])
c.addClass('has-tabs');
}
// If they want plain overflows scrolling, add that as a class
if(attr.refreshComplete) {
$scope.refreshComplete = function() {
if($scope.scrollView) {
$scope.scrollView.doneRefreshing();
$scope.$parent.$broadcast('scroll.onRefreshComplete');
}
};
}
// If they want plain overflow scrolling, add that as a class
if($scope.scroll === "false") {
// Do nothing for now
} else if(attr.overflowScroll === "true") {
c.addClass('overflow-scroll');
} else {
@ -59,9 +68,11 @@ angular.module('ionic.ui.content', [])
hasPullToRefresh: (typeof $scope.onRefresh !== 'undefined'),
onRefresh: function() {
$scope.onRefresh();
$scope.$parent.$broadcast('scroll.onRefresh');
},
onRefreshOpening: function(amt) {
$scope.onRefreshOpening({amount: amt});
$scope.$parent.$broadcast('scroll.onRefreshOpening', amt);
}
});
// Let child scopes access this
@ -91,14 +102,11 @@ angular.module('ionic.ui.content', [])
icon.style[ionic.CSS.TRANSFORM] = 'scale(' + Math.min((1 + amt), 2) + ')';
}, 100);
$scope.$on('onRefreshing', function(e) {
$scope.$on('scroll.onRefresh', function(e) {
icon.style[ionic.CSS.TRANSFORM] = 'scale(2)';
});
$scope.$on('onRefresh', function(e) {
icon.style[ionic.CSS.TRANSFORM] = 'scale(1)';
});
$scope.$on('onRefreshOpening', onRefreshOpening);
$scope.$on('scroll.onRefreshOpening', onRefreshOpening);
}
}
})

46
js/ext/angular/src/directive/ionicList.js vendored
View File

@ -86,7 +86,8 @@ angular.module('ionic.ui.list', ['ngAnimate'])
reorderIcon: '@',
hasPullToRefresh: '@',
onRefresh: '&',
onRefreshOpening: '&'
onRefreshOpening: '&',
refreshComplete: '='
},
controller: function($scope) {
@ -102,26 +103,31 @@ angular.module('ionic.ui.list', ['ngAnimate'])
template: '<ul class="list" ng-class="{\'list-editing\': isEditing}" ng-transclude>\
</ul>',
compile: function(element, attr, transclude) {
return function($scope, $element, $attr) {
var lv = new ionic.views.ListView({
el: $element[0],
listEl: $element[0].children[0],
hasPullToRefresh: ($scope.hasPullToRefresh !== 'false'),
onRefresh: function() {
$scope.onRefresh();
$scope.$parent.$broadcast('scroll.onRefresh');
},
onRefreshOpening: function(amt) {
$scope.onRefreshOpening({amount: amt});
$scope.$parent.$broadcast('scroll.onRefreshOpening', amt);
}
});
if(attr.animation) {
$element.addClass(attr.animation);
link: function($scope, $element, $attr) {
var lv = new ionic.views.ListView({
el: $element[0],
listEl: $element[0].children[0],
hasPullToRefresh: ($scope.hasPullToRefresh !== 'false'),
onRefresh: function() {
$scope.onRefresh();
$scope.$parent.$broadcast('scroll.onRefresh');
},
onRefreshOpening: function(amt) {
$scope.onRefreshOpening({amount: amt});
$scope.$parent.$broadcast('scroll.onRefreshOpening', amt);
}
};
});
if($attr.refreshComplete) {
$scope.refreshComplete = function() {
lv.doneRefreshing();
$scope.$parent.$broadcast('scroll.onRefreshComplete');
};
}
if($attr.animation) {
$element.addClass($attr.animation);
}
}
};
});

3
js/ext/angular/test/actionSheet.html
View File

@ -6,9 +6,6 @@
<!-- 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>
<style>
.row .col > div {
width: 100%;

3
js/ext/angular/test/biglist.html
View File

@ -6,9 +6,6 @@
<!-- 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>
<style>
.my-repeat-animation > .ng-enter,
.my-repeat-animation > .ng-leave,

3
js/ext/angular/test/checkbox.html
View File

@ -6,9 +6,6 @@
<!-- 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>
</head>
<body>

43
js/ext/angular/test/content.html
View File

@ -5,11 +5,10 @@
<!-- 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="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>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<style>
.reveal-animation {
/*
@ -51,27 +50,31 @@
</head>
<body ng-controller="AppCtrl">
<header-bar
title="'Title'"
type="bar-primary"></header-bar>
<header class="bar bar-header bar-success">
<button class="button"><i class="icon ion-home"></i></button>
</header>
<content on-refresh="onRefresh()" on-refresh-opening="onRefreshOpening(amount)" has-header="true" class="reveal-animation">
<refresher>
<div id="refresh-content">
<i class="icon ion-ios7-reloading"></i>
</div>
</refresher>
<content
on-refresh="onRefresh()"
on-refresh-opening="onRefreshOpening(amount)"
refresh-complete="refreshComplete"
has-header="true"
has-footer="true"
>
<refresher></refresher>
<ul class="list">
<li class="list-item" ng-repeat="item in items">asdf{{$index}}</li>
</ul>
</content>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<script>
angular.module('navTest', ['ionic.ui.content'])
<footer-bar type="bar-assertive">
<h1 class="title">Footer</h1>
</footer-bar>
.controller('AppCtrl', function($scope, $compile, $element) {
<script>
angular.module('navTest', ['ionic'])
.controller('AppCtrl', function($scope, $compile, $timeout, $element) {
$scope.items = [];
for(var i = 0; i < 200; i++) {
$scope.items.push({
@ -80,10 +83,14 @@
$scope.what = {};
$scope.onRefresh = function() {
console.log('On refresh');
$timeout(function() {
$scope.refreshComplete();
}, 2000);
}
$scope.onRefreshOpening = function(amt) {
console.log('On refresh opening', amt);
}
})
</script>
</body>

0
js/ext/angular/test/ionicContent.unit.js → js/ext/angular/test/directive/ionicContent.unit.js
View File

0
js/ext/angular/test/ionicNav.unit.js → js/ext/angular/test/directive/ionicNav.unit.js
View File

3
js/ext/angular/test/gesture.html
View File

@ -7,9 +7,6 @@
<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="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>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<style>

8
js/ext/angular/test/header.html
View File

@ -6,10 +6,8 @@
<!-- 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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-sanitize.js"></script>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body ng-controller="TestCtrl">
<header-bar
@ -21,8 +19,6 @@
<content has-header="true">
<input type="text" ng-model="headerTitle">
</content>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<script>
angular.module('headerTest', ['ionic'])

20
js/ext/angular/test/list.html
View File

@ -6,9 +6,6 @@
<!-- 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.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.js"></script>
<style>
.my-repeat-animation > .ng-enter,
.my-repeat-animation > .ng-leave,
@ -68,23 +65,21 @@
on-refresh-holding="almostRefreshing()"
on-refresh-opening="almostRefreshProjects(ratio)"
on-refresh="refreshProjects()"
refresh-complete="refreshComplete"
animation="my-repeat-animation"
delete-icon="icon ion-minus-circled"
reorder-icon="icon ion-navicon">
<refresher>
<div id="refresh-content">
<i class="icon ion-ios7-reloading"></i>
</div>
</refresher>
<refresher></refresher>
<item
ng-repeat="item in items"
buttons="item.buttons"
can-delete="true"
can-reorder="true"
can-swipe="true"
on-delete="deleteProject(project)"
on-select="selectProject(project)">
on-delete="deleteProject(project)"
on-select="selectProject(project)">
<i class="icon ion-email ion-primary"></i>
{{item.text}}
<i class="{{item.icon}}"></i>
@ -98,7 +93,7 @@
<script>
angular.module('navTest', ['ionic.ui.list', 'ionic.ui.content', 'ngAnimate'])
.controller('TestCtrl', function($scope) {
.controller('TestCtrl', function($scope, $timeout) {
$scope.refreshRatio = { ratio: 0 };
var removeItem = function(item) {
// Remove ourselves
@ -116,6 +111,9 @@
$scope.refreshProjects = function() {
console.log("REFRESHING");
$timeout(function() {
$scope.refreshComplete();
}, 2000);
};
$scope.items = [];

3
js/ext/angular/test/loading.html
View File

@ -8,9 +8,6 @@
<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>

4
js/ext/angular/test/modal.html
View File

@ -6,10 +6,6 @@
<!-- 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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-sanitize.js"></script>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>

3
js/ext/angular/test/nav.html
View File

@ -7,9 +7,6 @@
<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="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>
<style>
.view {
position: fixed;

3
js/ext/angular/test/navTest.html
View File

@ -7,9 +7,6 @@
<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="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>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>

3
js/ext/angular/test/radio.html
View File

@ -7,9 +7,6 @@
<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="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>

3
js/ext/angular/test/sideMenu.html
View File

@ -7,9 +7,6 @@
<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="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>
</head>
<body>

5
js/ext/angular/test/slideBox.html
View File

@ -7,9 +7,6 @@
<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="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.js"></script>
<style>
.box {
width: 100%;
@ -24,7 +21,7 @@
color: #fff;
font-size: 160px;
font-size: 60px;
text-align: center;
font-weight: bold;
}

3
js/ext/angular/test/subControllers.html
View File

@ -7,9 +7,6 @@
<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="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.js"></script>
</head>
<body>

3
js/ext/angular/test/tabBar.html
View File

@ -5,9 +5,6 @@
<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,

3
js/ext/angular/test/tabs.html
View File

@ -5,9 +5,6 @@
<meta name="viewport" content="width=device-width,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>
<style>
.fade-out > .ng-enter,
.fade-out > .ng-leave,

3
js/ext/angular/test/toggle.html
View File

@ -6,9 +6,6 @@
<!-- 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>
</head>
<body>