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

Added basic toderp

Browse Source
This commit is contained in:
Max Lynch
2013-09-01 17:00:05 -05:00
parent 69fb09316a
commit 66979e11fe
14 changed files with 244 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
dist/ionic.css vendored
View File

@ -23,19 +23,27 @@ ul {
margin: 0; margin: 0;
padding: 0; } padding: 0; }
main { .page, .full-section {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
overflow: auto; z-index: 1;
width: 100%; width: 100%;
-webkit-overflow-scrolling: touch; } height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
background-color: #fff; }
.content {
position: absolute;
width: 100%;
height: 100%; }
/* Hack to force all relatively and absolutely positioned elements still render while scrolling /* Hack to force all relatively and absolutely positioned elements still render while scrolling
Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */ Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */
main > * { .content > *, .content-padded > * {
-webkit-transform: translateZ(0px); -webkit-transform: translateZ(0px);
transform: translateZ(0px); } transform: translateZ(0px); }
@ -46,12 +54,6 @@ main > * {
position: fixed; position: fixed;
z-index: 1; } z-index: 1; }
.full-section {
position: fixed;
z-index: 1;
width: 100%;
height: 100%; }
.rounded { .rounded {
border-radius: 5px; } border-radius: 5px; }
@ -1059,6 +1061,7 @@ a.list-item {
top: 0; top: 0;
bottom: 0; bottom: 0;
z-index: 0; z-index: 0;
background-color: #fff;
overflow-y: scroll; overflow-y: scroll;
-webkit-overflow-scrolling: touch; } -webkit-overflow-scrolling: touch; }

22
example/angular/index.html
View File

@ -11,17 +11,17 @@
<script src="/vendor/angular/1.2.0rc1/angular-1.2.0rc1.min.js"></script> <script src="/vendor/angular/1.2.0rc1/angular-1.2.0rc1.min.js"></script>
<script src="/vendor/angular/1.2.0rc1/angular-touch.js"></script> <script src="/vendor/angular/1.2.0rc1/angular-touch.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="peopleApp">
<header class="bar bar-header bar-dark">
<h1 class="title">Customers</h1>
</header>
<main ng-controller="CustomersCtrl">
<div ng-view class="pane reveal-animation"></div>
</main>
<script src="../../js/ionic-list.js"></script> <script src="../../js/ionic-list.js"></script>
<script src="../../js/controllers/ionic-leftrightmenu.js"></script>
<script src="menu.js"></script>
</head>
<body ng-app="ionic.menu">
<ionic-left-right-menu>
<ionic-menu side="left">
</ionic-menu>
<ionic-menu side="right">
</ionic-menu>
</ionic-left-right-menu>
</body> </body>
</html> </html>

39
example/angular/menu.js vendored Normal file
View File

@ -0,0 +1,39 @@
angular.module('ionic.menu', [])
.controller('LeftRightMenuController', ['$scope', '$element',
function LeftRightMenuCtrl($scope, $element) {
var ctrl = ion.controllers.LeftRightMenuViewController;
}])
.directive('ionicLeftRightMenu', function() {
return {
restrict: 'EA',
scope: true,
transclude: true,
controller: 'LeftRightMenuController',
compile: function(elm, attrs, transclude) {
return function(scope, element, attrs, menuCtrl) {
console.log('Compile');
};
},
link: function(scope) {
console.log('link');
}
}
})
.directive('ionicMenu', function() {
return {
restrict: 'EA',
controller: '',
compile: function(elm, attrs, transclude) {
return function(scope, element, attrs, menuCtrl) {
console.log('Compile');
};
},
link: function(scope) {
console.log('link');
}
}
});

0
example/angular/panel.js vendored Normal file
View File

5
example/angular/test/menu.unit.js Normal file
View File

@ -0,0 +1,5 @@
describe('Menu directive', function() {
it('Adds a menu class to the panel element', function() {
});
});

13
example/tab-bars.html
View File

@ -22,7 +22,7 @@
</main> </main>
<footer class="bar bar-tabs bar-footer bar-success"> <footer class="bar bar-tabs bar-footer bar-success">
<nav class="tabs"> <nav id="tab-bar" class="tabs">
<ul class="tabs-inner"> <ul class="tabs-inner">
<li class="tab-item"> <li class="tab-item">
<a href="#"> <a href="#">
@ -54,5 +54,16 @@
</section> </section>
<script src="../../js/ionic-events.js"></script>
<script src="../../js/ionic-gestures.js"></script>
<script src="../../js/controllers/ionic-tabcontroller.js"></script>
<script>
// Grab the sections
var tab = document.getElementById('tab-bar');
var controller = new ion.controllers.TabController({
tab: tab
});
</script>
</body> </body>
</html> </html>

0
example/toderp/app.css Normal file
View File

43
example/toderp/app.js Normal file
View File

@ -0,0 +1,43 @@
angular.module('toderp', [])
.factory('TaskListService', function() {
return {
tasks: [
{ text: 'Do this thing', created: new Date() }
],
todaysTasks: [
{ text: 'Do this thing', created: new Date() }
],
addTask: function(task) {
this.tasks.push(task);
},
deleteTask: function($index) {
this.tasks.splice($index, 1);
}
};
})
.controller('TodaysTaskListCtrl', ['$scope', 'TaskListService', function($scope, TaskListService) {
$scope.todaysTasks = TaskListService.todaysTasks;
}])
.controller('TaskListCtrl', ['$scope', 'TaskListService', function($scope, TaskListService) {
$scope.tasks = TaskListService.tasks;
}])
.controller('TasksCtrl', ['$scope', function($scope) {
}]);
var page = document.getElementById('page');
var leftPanel = document.getElementById('tasks-menu');
var controller = new ion.controllers.LeftRightMenuViewController({
isRightEnabled: false,
center: page,
left: leftPanel,
leftWidth: 270,
animateClass: 'menu-animated'
});
window.ion.onGesture('tap', function(e) {
controller.toggleLeft();
}, document.getElementById('menu-button'));

56
example/toderp/index.html Normal file
View File

@ -0,0 +1,56 @@
<html>
<head>
<meta charset="utf-8">
<title>ToDerp</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/ionic.css">
<link rel="stylesheet" href="app.css">
<script src="/vendor/angular/1.2.0rc1/angular-1.2.0rc1.min.js"></script>
<script src="/vendor/angular/1.2.0rc1/angular-touch.js"></script>
<script src="../../js/ionic-list.js"></script>
<script src="../../js/ionic-events.js"></script>
<script src="../../js/ionic-gestures.js"></script>
<script src="../../js/controllers/ionic-leftrightmenu.js"></script>
</head>
<body ng-app="toderp">
<div id="page" class="page">
<div class="bar bar-header bar-dark">
<div class="buttons">
<a id="menu-button" class="button button-dark" href="#">
<i class="icon-reorder"></i>
</a>
</div>
<h1 class="title">Today's Tasks</h1>
<div class="buttons">
<button id="right-button" class="button button-dark">
<i class="icon-plus"></i>
</button>
</div>
</div>
<div class="content has-header">
<ul class="list todays-tasks" ng-controller="TodaysTaskListCtrl">
<li class="list-item" ng-repeat="task in todaysTasks">
{{task.text}}
</li>
</ul>
</div>
</div>
<div id="tasks-menu" class="menu menu-left" ng-controller="TaskListCtrl">
<ul class="list">
<li class="list-divider">Tasks</li>
<li class="list-item" ng-repeat="task in tasks">
<a href="#">{{task.text}}</a>
</li>
</ul>
</div>
<div class="menu menu-right">
</div>
<script src="app.js"></script>
</body>
</html>

29
js/controllers/ionic-leftrightmenu.js
View File

@ -1,5 +1,5 @@
/** /**
* The LeftRightPanelViewController makes it easy to have an interface * The LeftRightMenuViewController makes it easy to have an interface
* with two hidden menus: one on the left, and one on the right. * with two hidden menus: one on the left, and one on the right.
* *
* The main content supports dragging to show either panel, or the panel can be * The main content supports dragging to show either panel, or the panel can be
@ -19,12 +19,12 @@
this.right = options.right; this.right = options.right;
this.rightWidth = options.rightWidth; this.rightWidth = options.rightWidth;
this.center = options.center; this.center = options.center;
this.isLeftEnabled = options.isLeftEnabled == undefined ? true : options.isLeftEnabled;
this.isRightEnabled = options.isRightEnabled == undefined ? true : options.isRightEnabled;
this._rightShowing = false; this._rightShowing = false;
this._leftShowing = false; this._leftShowing = false;
this._isLeftEnabled = true;
this._isRightEnabled = true;
// Bind release and drag listeners // Bind release and drag listeners
window.ion.onGesture('release', function(e) { window.ion.onGesture('release', function(e) {
@ -38,10 +38,10 @@
ion.controllers.LeftRightMenuViewController.prototype = { ion.controllers.LeftRightMenuViewController.prototype = {
setIsLeftEnabled: function(isLeftEnabled) { setIsLeftEnabled: function(isLeftEnabled) {
this._isLeftEnabled = isLeftEnabled; this.isLeftEnabled = isLeftEnabled;
}, },
setIsRightEnabled: function(isRightEnabled) { setIsRightEnabled: function(isRightEnabled) {
this._isRightEnabled = isRightEnabled; this.isRightEnabled = isRightEnabled;
}, },
toggleLeft: function() { toggleLeft: function() {
var openAmount = this.getOpenAmount(); var openAmount = this.getOpenAmount();
@ -90,7 +90,7 @@
var maxRight = this.rightWidth; var maxRight = this.rightWidth;
// Check if we can move to that side, depending if the left/right panel is enabled // Check if we can move to that side, depending if the left/right panel is enabled
if((!this._isLeftEnabled && amount > 0) || (!this._isRightEnabled && amount < 0)) { if((!this.isLeftEnabled && amount > 0) || (!this.isRightEnabled && amount < 0)) {
return; return;
} }
@ -103,13 +103,22 @@
if(amount >= 0) { if(amount >= 0) {
this._leftShowing = true; this._leftShowing = true;
this._rightShowing = false; this._rightShowing = false;
this.right.style.zIndex = -1;
this.left.style.zIndex = 0; if(this.isRightEnabled) {
this.right.style.zIndex = -1;
}
if(this.isLeftEnabled) {
this.left.style.zIndex = 0;
}
} else { } else {
this._rightShowing = true; this._rightShowing = true;
this._leftShowing = false; this._leftShowing = false;
this.right.style.zIndex = 0; if(this.isRightEnabled) {
this.left.style.zIndex = -1; this.right.style.zIndex = 0;
}
if(this.isLeftEnabled) {
this.left.style.zIndex = -1;
}
} }
}, },
snapToRest: function(e) { snapToRest: function(e) {

19
js/controllers/ionic-tabcontroller.js Normal file
View File

@ -0,0 +1,19 @@
(function(window, document, ion) {
ion.controllers = ion.controllers || {};
ion.controllers.TabController = function(options) {
this.viewControllers = [];
this.selectedViewController = null;
var tabChildren = options.tab.querySelectorAll('.tab-item');
console.log("Building from", tabChildren.length, "tab items");
for(var i = 0; i < tabChildren.length; i++) {
}
};
ion.controllers.TabController.prototype = {
};
})(this, document, ion = this.ion || {});

13
js/ionic-viewcontroller.js Normal file
View File

@ -0,0 +1,13 @@
(function(window, document, ion) {
ion.controllers = ion.controllers || {};
ion.controllers.ViewController = function(options) {
};
ion.controllers.ViewController.prototype = {
// Destroy this view controller, including all child views
destroy: function() {
}
};
})(this, document, ion = this.ion || {});

23
scss/ionic/structure/_base.scss
View File

@ -28,20 +28,28 @@ a {
ul { margin: 0; padding: 0; } ul { margin: 0; padding: 0; }
main { .page, .full-section {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
overflow: auto; z-index: 1;
width: 100%; width: 100%;
-webkit-overflow-scrolling: touch; height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
background-color: #fff;
} }
.content {
position: absolute;
width: 100%;
height: 100%;
}
/* Hack to force all relatively and absolutely positioned elements still render while scrolling /* Hack to force all relatively and absolutely positioned elements still render while scrolling
Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */ Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */
main > * { .content > *, .content-padded > * {
-webkit-transform: translateZ(0px); -webkit-transform: translateZ(0px);
transform: translateZ(0px); transform: translateZ(0px);
} }
@ -58,13 +66,6 @@ main > * {
position: fixed; position: fixed;
z-index: 1; z-index: 1;
} }
// A full section is like a section but with a full size
.full-section {
position: fixed;
z-index: 1;
width: 100%;
height: 100%;
}
.rounded { .rounded {
border-radius: $roundedRadius; border-radius: $roundedRadius;

2
scss/ionic/structure/_menu.scss
View File

@ -11,6 +11,8 @@
bottom: 0; bottom: 0;
z-index: 0; z-index: 0;
background-color: #fff;
// has to be scroll, not auto // has to be scroll, not auto
overflow-y: scroll; overflow-y: scroll;