javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Lots of solidification

Browse Source
This commit is contained in:
Max Lynch
2013-12-03 18:41:44 -06:00
parent 4155da065c
commit f3bf2c1348
14 changed files with 46 additions and 479 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -138,7 +138,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
replace: true,
transclude: true,
scope: true,
template: '<div class="sub-pane menu menu-{{side}}"></div>',
template: '<div class="menu menu-{{side}}"></div>',
compile: function(element, attr, transclude) {
return function($scope, $element, $attr, sideMenuCtrl) {
$scope.side = $attr.side;

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

@@ -51,7 +51,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
transclude: true,
controller: 'TabsCtrl',
//templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
template: '<div class="pane"><tab-controller-bar></tab-controller-bar></div>',
template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
compile: function(element, attr, transclude, tabsCtrl) {
return function($scope, $element, $attr) {
var tabs = $element[0].querySelector('.tabs');

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

@@ -1,98 +0,0 @@
<html ng-app="navTest">
<head>
<meta charset="utf-8">
<title>Nav Bars</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">
<style>
.view {
position: fixed;
width: 100%;
height: 100%;
}
.slide-in-slide-out {
/*
-webkit-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
*/
}
</style>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/angular/angular.js"></script>
<script src="../../../../dist/js/angular/angular-animate.js"></script>
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body>
<navigation first="page.html">
<nav-bar type="bar-primary" back-button-type="button-pure button-icon" back-button-icon="ion-arrow-left-c">
</nav-bar>
</navigation>
<script id="page.html" type="text/ng-template">
<div title="title" class="nav-page">
<div ng-controller="CatsCtrl">
<content has-header="true">
<h1></h1>
<a href="#" class="button button-royal" nav-push="page.html">Next</a>
<button class="button button-assertive" ng-click="thisThing()">Doit</button>
<list><list-item ng-repeat="item in items" on-select="goNext()">Test</list-item></list>
</content>
</div>
</div>
</script>
<script>
var pageNumber = 0;
var pushIt = function($scope, $compile, $element, cb) {
var childScope = $scope.$new();
childScope.isVisible = true;
var items = [];
for(var i = 0; i < 100; i++) {
items.push({});
}
childScope.items = items;
pageNumber++;
}
angular.module('navTest', ['ionic', 'ngAnimate'])
.controller('CatsCtrl', function($scope, $compile, $element) {
$scope.$on('navContent.shown', function() {
console.log('SHOWN');
});
$scope.$on('navContent.hidden', function() {
console.log('HIDDEN');
});
$scope.thisThing = function() {
console.log("THIS THING");
};
var items = [];
for(var i = 0; i < 100; i++) {
items.push({});
}
$scope.items = items;
$scope.goNext = function() {
$scope.navController.pushFromTemplate('page.html');
};
});
</script>
</body>
</html>

87
js/ext/angular/test/navPush.html
View File

@@ -1,87 +0,0 @@
<html ng-app="navTest">
<head>
<meta charset="utf-8">
<title>Nav Bars</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">
<style>
.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);
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
*/
}
</style>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/angular/angular.js"></script>
<script src="../../../../dist/js/angular/angular-animate.js"></script>
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body>
<navigation first="page.html">
<nav-bar type="bar-primary" back-button-type="button-pure" align-title="left">
</nav-bar>
</navigation>
<script id="page.html" type="text/ng-template">
<div title="title" class="nav-page">
<div ng-controller="CatsCtrl">
<content has-header="true">
{{secretNumber}}
<list><item ng-repeat="item in items" nav-push="page.html">{{item.t}}</item></list>
<button nav-push="page.html" class="button button-assertive">Do it</button>
</content>
</div>
</div>
</script>
<script>
angular.module('navTest', ['ionic', 'ngAnimate'])
.controller('CatsCtrl', function($scope, $compile, $element) {
$scope.$on('navContent.shown', function() {
console.log('SHOWN');
});
$scope.$on('navContent.hidden', function() {
console.log('HIDDEN');
});
$scope.secretNumber = Math.floor(Math.random() * 100);
$scope.doit = function() { alert('waht'); };
var items = [
{t: 'This one'},
{t: 'Hmm, maybe this one'},
{t: 'Not that one, this one'},
{t: 'Um, this one?'},
{t: 'No, this one'}
];
items = items.sort(function() {
return .5 - Math.random();
});
$scope.items = items;
$scope.goNext = function() {
$scope.navController.pushFromTemplate('page.html');
};
});
</script>
</body>
</html>

24
js/ext/angular/test/navRouter.html
View File

@@ -22,23 +22,29 @@
<script id="page1.html" type="text/ng-template">
<nav-page title="'Bears'" hide-back-button="true">
<h1>Page 1</h1>
<span>{{num}}</span>
<a class="button button-pure" nav-back>Back</a>
<a class="button button-assertive" href="#/page2">Next</a>
<content has-header="true">
<h1>Page 1</h1>
<span>{{num}}</span>
<a class="button button-pure" nav-back>Back</a>
<a class="button button-assertive" href="#/page2">Next</a>
</content>
</nav-page>
</script>
<script id="page2.html" type="text/ng-template">
<nav-page title="'Beets'">
<h1>Page 2</h1>
<a class="button button-pure" nav-back>Back</a>
<a class="button button-assertive" href="#/page3">Next</a>
<content has-header="true">
<h1>Page 2</h1>
<a class="button button-pure" nav-back>Back</a>
<a class="button button-assertive" href="#/page3">Next</a>
</content>
</nav-page>
</script>
<script id="page3.html" type="text/ng-template">
<nav-page title="'Battlestar Galactica'">
<h1>Page 3</h1>
<a class="button button-pure" nav-back>Back</a>
<content has-header="true">
<h1>Page 3</h1>
<a class="button button-pure" nav-back>Back</a>
</content>
</nav-page>
</script>
<script>

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

@@ -1,61 +0,0 @@
<html ng-app="navTest">
<head>
<meta charset="utf-8">
<title>Nav Bars</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="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/angular/angular.js"></script>
<script src="../../../../dist/js/angular/angular-animate.js"></script>
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body>
<navs>
<nav-bar type="bar-primary" back-button-type="button-pure">
</nav-bar>
<div ng-controller="AppCtrl">
<content has-header="true">
</content>
</div>
</navs>
<script id="page.html" type="text/ng-template">
<div title="Home home" ng-controller="CatsCtrl" class="nav-content">
<h1></h1>
<button class="button button-success" ng-click="goNext()">Next</button>
<list><list-item ng-repeat="item in items" on-select="goNext()">Test</list-item></list>
</div>
</script>
<script>
angular.module('navTest', ['ionic', 'ngAnimate'])
.controller('AppCtrl', function($scope) {
$scope.navController.pushFromTemplate('page.html');
})
.controller('CatsCtrl', function($scope, $compile, $element) {
$scope.$on('navContent.shown', function() {
console.log('SHOWN');
});
$scope.$on('navContent.hidden', function() {
console.log('HIDDEN');
});
$scope.goNext = function() {
$scope.navController.pushFromTemplate('page.html');
};
});
</script>
</body>
</html>

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

@@ -16,7 +16,7 @@
</head>
<body>
<side-menu>
<side-menus>
<pane side-menu-content>
<header class="bar bar-header bar-dark">
<a href="#" class="button"><i class="icon-reorder"></i></a>
@@ -26,17 +26,17 @@
<h1>Slide me side to side!</h1>
</div>
</pane>
<menu side="left">
<side-menu side="left">
<h2>Left</h2>
<ul class="list">
<a href="#" class="list-item" ng-repeat="item in list">
{{item.text}}
</a>
</ul>
</menu>
<menu side="right">
</side-menu>
<side-menu side="right">
<tabs>
<tab title="Home" icon="icon-home" class="tab-content">
<tab title="Home" icon="ion-home" class="tab-content">
<header class="bar bar-header bar-dark">
<h1 class="title">Tab Bars</h1>
</header>
@@ -50,7 +50,7 @@
</content>
</tab>
<tab title="About" icon="icon-info" class="tab-content">
<tab title="About" icon="ion-info" class="tab-content">
<header class="bar bar-header bar-success">
<h1 class="title">About</h1>
</header>
@@ -68,8 +68,8 @@
</content>
</tab>
</tabs>
</menu>
</side-menu>
</side-menu>
</side-menus>
<script>
angular.module('sideMenuTest', ['ionic']);

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

@@ -1,66 +0,0 @@
<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">
<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>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/angular/angular.js"></script>
<script src="../../../../dist/js/angular/angular-animate.js"></script>
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</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>
angular.module('tabsTest', ['ionic.ui', 'ionic.service.modal', 'ionic.service.actionSheet'])
</script>
</body>
</html>

141
js/ext/angular/test/zyng.html
View File

@@ -1,141 +0,0 @@
<html ng-app="zyngTest">
<head>
<meta charset="utf-8">
<title>Content</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="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/angular/angular.js"></script>
<script src="../../../../dist/js/angular/angular-animate.js"></script>
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<style>
#c{
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
font-family: sans-serif;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#content{
background: white;
width: 100%;
-webkit-transform-origin: left top;
-webkit-transform: translateZ(0);
-moz-transform-origin: left top;
-moz-transform: translateZ(0);
-ms-transform-origin: left top;
-ms-transform: translateZ(0);
-o-transform-origin: left top;
-o-transform: translateZ(0);
transform-origin: left top;
transform: translateZ(0);
}
</style>
</head>
<body ng-controller="AppCtrl">
<div id="c">
<div id="content">
<div style="height: 3000px; width: 100%; background: url('tree_bark.png') repeat"></div>
</div>
</div>
<script>
angular.module('zyngTest', ['ionic'])
.controller('AppCtrl', function($scope) {
});
var render = function(left, top, zoom) {
content.style.webkitTransform = 'translate3d(' + (-left) + 'px,' + (-top) + 'px,0) scale(' + zoom + ')';
};
var container = document.getElementById('c');
// Initialize Scroller
var scroller = new ionic.views.Scroller({
scrollingX: false
});
// Update Scroller dimensions for changed content
scroller.setDimensions(container.clientWidth, container.clientHeight, content.offsetWidth, content.offsetHeight-50);
// Event Handler
if ('ontouchstart' in window) {
container.addEventListener("touchstart", function(e) {
// Don't react if initial down happens on a form element
if (e.target.tagName.match(/input|textarea|select/i)) {
return;
}
scroller.doTouchStart(e.touches, e.timeStamp);
e.preventDefault();
}, false);
document.addEventListener("touchmove", function(e) {
scroller.doTouchMove(e.touches, e.timeStamp);
}, false);
document.addEventListener("touchend", function(e) {
scroller.doTouchEnd(e.timeStamp);
}, false);
} else {
var mousedown = false;
container.addEventListener("mousedown", function(e) {
// Don't react if initial down happens on a form element
if (e.target.tagName.match(/input|textarea|select/i)) {
return;
}
scroller.doTouchStart([{
pageX: e.pageX,
pageY: e.pageY
}], e.timeStamp);
mousedown = true;
}, false);
document.addEventListener("mousemove", function(e) {
if (!mousedown) {
return;
}
scroller.doTouchMove([{
pageX: e.pageX,
pageY: e.pageY
}], e.timeStamp);
mousedown = true;
}, false);
document.addEventListener("mouseup", function(e) {
if (!mousedown) {
return;
}
scroller.doTouchEnd(e.timeStamp);
mousedown = false;
}, false);
}
</script>
</body>
</html>

2
js/views/scrollZyng.js
View File

@@ -590,7 +590,7 @@ var Scroller;
Math.min(this.__container.clientWidth, this.__container.parentElement.clientWidth),
Math.min(this.__container.clientHeight, this.__container.parentElement.clientHeight),
this.__content.offsetWidth,
this.__content.offsetHeight+80);
this.__content.offsetHeight-20);
},
/*
---------------------------------------------------------------------------