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

Namespacing for controllers and views

Browse Source
This commit is contained in:
Max Lynch
2013-09-23 00:07:41 -05:00
parent 63e268f171
commit c77128eeae
8 changed files with 339 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
example/toderp/index.html
View File

@ -20,7 +20,7 @@
<script src="../../js/events.js"></script>
<script src="../../js/gestures.js"></script>
<script src="../../js/controllers/sideMenuViewController.js"></script>
<script src="../../js/controllers/sideMenuController.js"></script>
<script src="js/toderp.js"></script>
<style>

177
js/controllers/navController.js
View File

@ -1,105 +1,108 @@
(function(ionic) {
NavController = function(opts) {
var _this = this;
this.navBar = opts.navBar;
this.content = opts.content;
this.controllers = opts.controllers || [];
ionic.controllers = ionic.controllers || {};
ionic.controllers.NavController = function(opts) {
var _this = this;
this.navBar = opts.navBar;
this.content = opts.content;
this.controllers = opts.controllers || [];
this._updateNavBar();
// TODO: Is this the best way?
this.navBar.shouldGoBack = function() {
_this.pop();
}
};
ionic.controllers.NavController.prototype = {
getControllers: function() {
return this.controllers;
},
getTopController: function() {
return this.controllers[this.controllers.length-1];
},
push: function(controller) {
var last = this.controllers[this.controllers.length - 1];
this.controllers.push(controller);
// Indicate we are switching controllers
var shouldSwitch = this.switchingController && this.switchingController(controller) || true;
// Return if navigation cancelled
if(shouldSwitch === false)
return;
// Actually switch the active controllers
// Remove the old one
//last && last.detach();
if(last) {
last.isVisible = false;
last.visibilityChanged && last.visibilityChanged();
}
// Grab the top controller on the stack
var next = this.controllers[this.controllers.length - 1];
// TODO: No DOM stuff here
//this.content.el.appendChild(next.el);
next.isVisible = true;
next.visibilityChanged && next.visibilityChanged();
this._updateNavBar();
// TODO: Is this the best way?
this.navBar.shouldGoBack = function() {
_this.pop();
return controller;
},
pop: function() {
var next, last;
// Make sure we keep one on the stack at all times
if(this.controllers.length < 2) {
return;
}
};
NavController.prototype = {
getControllers: function() {
return this.controllers;
},
getTopController: function() {
return this.controllers[this.controllers.length-1];
},
push: function(controller) {
var last = this.controllers[this.controllers.length - 1];
// Grab the controller behind the top one on the stack
last = this.controllers.pop();
if(last) {
last.isVisible = false;
last.visibilityChanged && last.visibilityChanged();
}
this.controllers.push(controller);
// Remove the old one
//last && last.detach();
// Indicate we are switching controllers
var shouldSwitch = this.switchingController && this.switchingController(controller) || true;
next = this.controllers[this.controllers.length - 1];
// Return if navigation cancelled
if(shouldSwitch === false)
return;
// TODO: No DOM stuff here
//this.content.el.appendChild(next.el);
next.isVisible = true;
next.visibilityChanged && next.visibilityChanged();
// Actually switch the active controllers
// Switch to it (TODO: Animate or such things here)
// Remove the old one
//last && last.detach();
if(last) {
last.isVisible = false;
last.visibilityChanged && last.visibilityChanged();
}
this._updateNavBar();
// Grab the top controller on the stack
var next = this.controllers[this.controllers.length - 1];
return last;
},
// TODO: No DOM stuff here
//this.content.el.appendChild(next.el);
next.isVisible = true;
next.visibilityChanged && next.visibilityChanged();
_updateNavBar: function() {
if(!this.getTopController()) {
return;
}
this._updateNavBar();
this.navBar.setTitle(this.getTopController().title);
return controller;
},
if(this.controllers.length > 1) {
this.navBar.showBackButton(true);
} else {
this.navBar.showBackButton(false);
}
},
pop: function() {
var next, last;
// Make sure we keep one on the stack at all times
if(this.controllers.length < 2) {
return;
}
// Grab the controller behind the top one on the stack
last = this.controllers.pop();
if(last) {
last.isVisible = false;
last.visibilityChanged && last.visibilityChanged();
}
// Remove the old one
//last && last.detach();
next = this.controllers[this.controllers.length - 1];
// TODO: No DOM stuff here
//this.content.el.appendChild(next.el);
next.isVisible = true;
next.visibilityChanged && next.visibilityChanged();
// Switch to it (TODO: Animate or such things here)
this._updateNavBar();
return last;
},
_updateNavBar: function() {
if(!this.getTopController()) {
return;
}
this.navBar.setTitle(this.getTopController().title);
if(this.controllers.length > 1) {
this.navBar.showBackButton(true);
} else {
this.navBar.showBackButton(false);
}
},
};
};
})(ionic = window.ionic || {});

356
js/controllers/sideMenuController.js
View File

@ -1,191 +1,193 @@
(function(ionic) {
SideMenuController = function(options) {
var _this = this;
ionic.controllers = ionic.controllers || {};
ionic.controllers.SideMenuController = function(options) {
var _this = this;
this.left = options.left;
this.right = options.right;
this.content = options.content;
this.left = options.left;
this.right = options.right;
this.content = options.content;
this._rightShowing = false;
this._leftShowing = false;
this._rightShowing = false;
this._leftShowing = false;
this.content.onDrag = function(e) {
_this._handleDrag(e);
};
this.content.endDrag = function(e) {
_this._endDrag(e);
};
/*
// Bind release and drag listeners
window.ion.onGesture('release', function(e) {
_this._endDrag(e);
}, this.center);
window.ion.onGesture('drag', function(e) {
_this._handleDrag(e);
}, this.center);
*/
this.content.onDrag = function(e) {
_this._handleDrag(e);
};
SideMenuController.prototype = {
toggleLeft: function() {
var openAmount = this.getOpenAmount();
if(openAmount > 0) {
this.openPercentage(0);
} else {
this.openPercentage(100);
}
},
toggleRight: function() {
var openAmount = this.getOpenAmount();
if(openAmount < 0) {
this.openPercentage(0);
} else {
this.openPercentage(-100);
}
},
getOpenAmount: function() {
return this.content.getTranslateX() || 0;
},
getOpenRatio: function() {
var amount = this.getOpenAmount();
if(amount >= 0) {
return amount / this.left.width;
}
return amount / this.right.width;
},
getOpenPercentage: function() {
return this.getOpenRatio() * 100;
},
openPercentage: function(percentage) {
var p = percentage / 100;
var maxLeft = this.left.width;
var maxRight = this.right.width;
if(percentage >= 0) {
this.openAmount(maxLeft * p);
} else {
this.openAmount(maxRight * p);
}
},
openAmount: function(amount) {
var maxLeft = this.left.width;
var maxRight = this.right.width;
this.content.endDrag = function(e) {
_this._endDrag(e);
};
// Check if we can move to that side, depending if the left/right panel is enabled
if((!this.left.isEnabled && amount > 0) || (!this.right.isEnabled && amount < 0)) {
return;
}
/*
// Bind release and drag listeners
window.ion.onGesture('release', function(e) {
_this._endDrag(e);
}, this.center);
if((this._leftShowing && amount > maxLeft) || (this._rightShowing && amount < -maxRight)) {
return;
}
window.ion.onGesture('drag', function(e) {
_this._handleDrag(e);
}, this.center);
*/
};
this.content.setTranslateX(amount);
if(amount >= 0) {
this._leftShowing = true;
this._rightShowing = false;
// Push the z-index of the right menu down
this.right.pushDown();
// Bring the z-index of the left menu up
this.left.bringUp();
} else {
this._rightShowing = true;
this._leftShowing = false;
// Bring the z-index of the right menu up
this.right.bringUp();
// Push the z-index of the left menu down
this.left.pushDown();
}
},
snapToRest: function(e) {
// We want to animate at the end of this
this.content.enableAnimation();
this._isDragging = false;
// Check how much the panel is open after the drag, and
// what the drag velocity is
var ratio = this.getOpenRatio();
if(ratio == 0)
return;
var velocityThreshold = 0.3;
var velocityX = e.gesture.velocityX
var direction = e.gesture.direction;
// Less than half, going left
//if(ratio > 0 && ratio < 0.5 && direction == 'left' && velocityX < velocityThreshold) {
//this.openPercentage(0);
//}
// Going right, less than half, too slow (snap back)
if(ratio > 0 && ratio < 0.5 && direction == 'right' && velocityX < velocityThreshold) {
this.openPercentage(0);
}
// Going left, more than half, too slow (snap back)
else if(ratio > 0.5 && direction == 'left' && velocityX < velocityThreshold) {
this.openPercentage(100);
}
// Going left, less than half, too slow (snap back)
else if(ratio < 0 && ratio > -0.5 && direction == 'left' && velocityX < velocityThreshold) {
this.openPercentage(0);
}
// Going right, more than half, too slow (snap back)
else if(ratio < 0.5 && direction == 'right' && velocityX < velocityThreshold) {
this.openPercentage(-100);
}
// Going right, more than half, or quickly (snap open)
else if(direction == 'right' && ratio >= 0 && (ratio >= 0.5 || velocityX > velocityThreshold)) {
this.openPercentage(100);
}
// Going left, more than half, or quickly (span open)
else if(direction == 'left' && ratio <= 0 && (ratio <= -0.5 || velocityX > velocityThreshold)) {
this.openPercentage(-100);
}
// Snap back for safety
else {
this.openPercentage(0);
}
},
_endDrag: function(e) {
this.snapToRest(e);
},
_initDrag: function(e) {
this.content.disableAnimation();
this._isDragging = true;
this._startX = 0;
this._offsetX = 0;
this._lastX = 0;
},
_handleDrag: function(e) {
if(!this._isDragging) {
this._initDrag(e);
this._startX = e.gesture.touches[0].pageX;
this._lastX = this._startX;
this._offsetX = this.getOpenAmount();
}
//console.log('Dragging page', this._startX, this._lastX, this._offsetX, e);
var newX = this._offsetX + (this._lastX - this._startX);
this.openAmount(newX);
this._lastX = e.gesture.touches[0].pageX;
ionic.controllers.SideMenuController.prototype = {
toggleLeft: function() {
var openAmount = this.getOpenAmount();
if(openAmount > 0) {
this.openPercentage(0);
} else {
this.openPercentage(100);
}
};
},
toggleRight: function() {
var openAmount = this.getOpenAmount();
if(openAmount < 0) {
this.openPercentage(0);
} else {
this.openPercentage(-100);
}
},
getOpenAmount: function() {
return this.content.getTranslateX() || 0;
},
getOpenRatio: function() {
var amount = this.getOpenAmount();
if(amount >= 0) {
return amount / this.left.width;
}
return amount / this.right.width;
},
getOpenPercentage: function() {
return this.getOpenRatio() * 100;
},
openPercentage: function(percentage) {
var p = percentage / 100;
var maxLeft = this.left.width;
var maxRight = this.right.width;
if(percentage >= 0) {
this.openAmount(maxLeft * p);
} else {
this.openAmount(maxRight * p);
}
},
openAmount: function(amount) {
var maxLeft = this.left.width;
var maxRight = this.right.width;
// Check if we can move to that side, depending if the left/right panel is enabled
if((!this.left.isEnabled && amount > 0) || (!this.right.isEnabled && amount < 0)) {
return;
}
if((this._leftShowing && amount > maxLeft) || (this._rightShowing && amount < -maxRight)) {
return;
}
this.content.setTranslateX(amount);
if(amount >= 0) {
this._leftShowing = true;
this._rightShowing = false;
// Push the z-index of the right menu down
this.right.pushDown();
// Bring the z-index of the left menu up
this.left.bringUp();
} else {
this._rightShowing = true;
this._leftShowing = false;
// Bring the z-index of the right menu up
this.right.bringUp();
// Push the z-index of the left menu down
this.left.pushDown();
}
},
snapToRest: function(e) {
// We want to animate at the end of this
this.content.enableAnimation();
this._isDragging = false;
// Check how much the panel is open after the drag, and
// what the drag velocity is
var ratio = this.getOpenRatio();
if(ratio == 0)
return;
var velocityThreshold = 0.3;
var velocityX = e.gesture.velocityX
var direction = e.gesture.direction;
// Less than half, going left
//if(ratio > 0 && ratio < 0.5 && direction == 'left' && velocityX < velocityThreshold) {
//this.openPercentage(0);
//}
// Going right, less than half, too slow (snap back)
if(ratio > 0 && ratio < 0.5 && direction == 'right' && velocityX < velocityThreshold) {
this.openPercentage(0);
}
// Going left, more than half, too slow (snap back)
else if(ratio > 0.5 && direction == 'left' && velocityX < velocityThreshold) {
this.openPercentage(100);
}
// Going left, less than half, too slow (snap back)
else if(ratio < 0 && ratio > -0.5 && direction == 'left' && velocityX < velocityThreshold) {
this.openPercentage(0);
}
// Going right, more than half, too slow (snap back)
else if(ratio < 0.5 && direction == 'right' && velocityX < velocityThreshold) {
this.openPercentage(-100);
}
// Going right, more than half, or quickly (snap open)
else if(direction == 'right' && ratio >= 0 && (ratio >= 0.5 || velocityX > velocityThreshold)) {
this.openPercentage(100);
}
// Going left, more than half, or quickly (span open)
else if(direction == 'left' && ratio <= 0 && (ratio <= -0.5 || velocityX > velocityThreshold)) {
this.openPercentage(-100);
}
// Snap back for safety
else {
this.openPercentage(0);
}
},
_endDrag: function(e) {
this.snapToRest(e);
},
_initDrag: function(e) {
this.content.disableAnimation();
this._isDragging = true;
this._startX = 0;
this._offsetX = 0;
this._lastX = 0;
},
_handleDrag: function(e) {
if(!this._isDragging) {
this._initDrag(e);
this._startX = e.gesture.touches[0].pageX;
this._lastX = this._startX;
this._offsetX = this.getOpenAmount();
}
//console.log('Dragging page', this._startX, this._lastX, this._offsetX, e);
var newX = this._offsetX + (this._lastX - this._startX);
this.openAmount(newX);
this._lastX = e.gesture.touches[0].pageX;
}
};
})(ionic = window.ionic || {});

6
js/controllers/tabBarController.js
View File

@ -1,6 +1,8 @@
(function(ionic) {
TabBarController = function(options) {
ionic.controllers = ionic.controllers || {};
ionic.controllers.TabBarController = function(options) {
this.tabBar = options.tabBar;
this._bindEvents();
@ -20,7 +22,7 @@ TabBarController = function(options) {
this.setSelectedController(0);
};
TabBarController.prototype = {
ionic.controllers.TabBarController.prototype = {
// Start listening for events on our tab bar
_bindEvents: function() {
var _this = this;

63
js/views/navBar.js
View File

@ -1,42 +1,41 @@
(function(ionic) {
ionic.ui.NavBar = function(opts) {
this.el = opts.el;
NavBar = function(opts) {
this.el = opts.el;
this._titleEl = this.el.querySelector('.title');
};
this._titleEl = this.el.querySelector('.title');
};
ionic.ui.NavBar.prototype = {
shouldGoBack: function() {},
NavBar.prototype = {
shouldGoBack: function() {},
setTitle: function(title) {
if(!this._titleEl) {
return;
}
this._titleEl.innerHTML = title;
},
setTitle: function(title) {
if(!this._titleEl) {
return;
}
this._titleEl.innerHTML = title;
},
showBackButton: function(shouldShow) {
var _this = this;
showBackButton: function(shouldShow) {
var _this = this;
if(!this._currentBackButton) {
var back = document.createElement('a');
back.className = 'button back';
back.innerHTML = 'Back';
if(!this._currentBackButton) {
var back = document.createElement('a');
back.className = 'button back';
back.innerHTML = 'Back';
this._currentBackButton = back;
this._currentBackButton.onclick = function(event) {
_this.shouldGoBack && _this.shouldGoBack();
}
}
if(shouldShow && !this._currentBackButton.parentNode) {
// Prepend the back button
this.el.insertBefore(this._currentBackButton, this.el.firstChild);
} else if(!shouldShow && this._currentBackButton.parentNode) {
// Remove the back button if it's there
this._currentBackButton.parentNode.removeChild(this._currentBackButton);
this._currentBackButton = back;
this._currentBackButton.onclick = function(event) {
_this.shouldGoBack && _this.shouldGoBack();
}
}
};
if(shouldShow && !this._currentBackButton.parentNode) {
// Prepend the back button
this.el.insertBefore(this._currentBackButton, this.el.firstChild);
} else if(!shouldShow && this._currentBackButton.parentNode) {
// Remove the back button if it's there
this._currentBackButton.parentNode.removeChild(this._currentBackButton);
}
}
};
})(ionic = window.ionic || {});

41
js/views/sideMenu.js
View File

@ -1,22 +1,25 @@
(function(ionic) {
SideMenu = function(opts) {
this.el = opts.el;
this.width = opts.width;
this.isEnabled = opts.isEnabled || true;
};
SideMenu.prototype = {
getFullWidth: function() {
return this.width;
},
setIsEnabled: function(isEnabled) {
this.isEnabled = isEnabled;
},
bringUp: function() {
this.el.style.zIndex = 0;
},
pushDown: function() {
this.el.style.zIndex = -1;
}
};
ionic.ui = ionic.ui || {};
ionic.ui.SideMenu = function(opts) {
this.el = opts.el;
this.width = opts.width;
this.isEnabled = opts.isEnabled || true;
};
ionic.ui.SideMenu.prototype = {
getFullWidth: function() {
return this.width;
},
setIsEnabled: function(isEnabled) {
this.isEnabled = isEnabled;
},
bringUp: function() {
this.el.style.zIndex = 0;
},
pushDown: function() {
this.el.style.zIndex = -1;
}
};
})(ionic = window.ionic || {});

10
js/views/tabBar.js
View File

@ -1,11 +1,13 @@
(function(ionic) {
TabBarItem = function(el) {
ionic.ui = ionic.ui || {};
ionic.ui.TabBarItem = function(el) {
this.el = el;
this._buildItem();
};
TabBarItem.prototype = {
ionic.ui.TabBarItem.prototype = {
// Factory for creating an item from a given javascript object
create: function(itemData) {
var item = document.createElement('a');
@ -74,7 +76,7 @@ TabBarItem.prototype = {
}
};
TabBar = function(opts) {
ionic.ui.TabBar = function(opts) {
this.el = opts.el;
this.items = [];
@ -82,7 +84,7 @@ TabBar = function(opts) {
this._buildItems();
};
TabBar.prototype = {
ionic.ui.TabBar.prototype = {
// get all the items for the TabBar
getItems: function() {
return this.items;

9
test/tab-bars.html
View File

@ -134,14 +134,13 @@
</section>
<script src="../../js/ionic-events.js"></script>
<script src="../../js/ionic-gestures.js"></script>
<script src="../../js/controllers/ionic-tabcontroller.js"></script>
<script src="../../js/events.js"></script>
<script src="../../js/gestures.js"></script>
<script src="../../js/controllers/tabBarController.js"></script>
<script>
// Grab the sections
var tab = document.getElementById('tab-bar');
var controller = new ion.controllers.TabController({
var controller = new ionic.controllers.TabController({
tab: tab
});
</script>