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

simple toggle stuff

Browse Source
This commit is contained in:
Adam Bradley
2013-09-27 15:11:47 -05:00
parent d03d3aa106
commit d4f385f290
10 changed files with 594 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
dist/ionic-simple.js vendored
View File

@ -7,35 +7,54 @@
ionic.Components.push(instance);
};
function onTap(e) {
ionic.component = function(el) {
if(el) {
for(var x = 0; x < ionic.Components.length; x++) {
if( ionic.Components[x].isComponent(el) ) {
// this element is a component, init its view
return ionic.Components[x].init(el);
}
}
}
};
function componentEvent(eventName, e) {
if (!e.gesture || !e.gesture.srcEvent || !e.gesture.srcEvent.target) return;
var
x,
e = e.gesture.srcEvent,
el = e.target,
component;
component,
el = e.gesture.srcEvent.target; // get the original source event's target
while(el) {
// climb up the tree looking to see if the target
// is or is in a registered component
for(x = 0; x < ionic.Components.length; x++) {
if( ionic.Components[x].isComponent(el) ) {
// this element is a component
// create its view and call it's event handler
component = ionic.Components[x].create(el);
component && component.tap && component.tap(e);
return;
}
component = ionic.component(el);
if(component) {
component[eventName] && component[eventName](e.gesture.srcEvent);
return;
}
// not sure if this element is a component yet,
// keep climbing up the tree and check again
el = el.parentElement;
}
}
function onTap(e) {
componentEvent("tap", e);
}
ionic.on("tap", onTap, window);
function onDrag(e) {
componentEvent("drag", e);
}
ionic.on("drag", onDrag, window);
function onRelease(e) {
componentEvent("release", e);
}
ionic.on("release", onRelease, window);
function initalize() {
// remove the ready listeners
document.removeEventListener( "DOMContentLoaded", initalize, false );
@ -78,20 +97,34 @@
ionic.registerComponent({
isComponent: function(el) {
// this is a Toggle component if it has a "toggle" classname
return el.classList.contains("toggle");
},
create: function(el) {
init: function(el) {
if(el) {
// check if we've already created a Toggle instance for this element
if(!el._instance) {
el._instance = new ionic.views.Toggle({
// find all the required elements that make up a toggle
var opts = {
el: el,
checkbox: el.querySelector("input[type='checkbox']"),
track: el.querySelector(".track"),
handle: el.querySelector(".handle")
});
};
// validate its a well formed toggle with the required pieces
if(!opts.checkbox || !opts.track || !opts.handle) {
return;
}
// ensure the handle is draggable
opts.handle.draggable = true;
// initialize an instance of a Toggle
el._instance = new ionic.views.Toggle(opts);
}
return el._instance;

485
dist/ionic.js vendored
View File

@ -1666,48 +1666,50 @@ window.ionic = {
}
};
})(window.ionic);
;(function(ionic) {
;
(function(ionic) {
ionic.views.NavBar = function(opts) {
this.el = opts.el;
ionic.views.NavBar = function(opts) {
this.el = opts.el;
this._titleEl = this.el.querySelector('.title');
};
this._titleEl = this.el.querySelector('.title');
};
ionic.views.NavBar.prototype = {
shouldGoBack: function() {},
ionic.views.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();
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);
}
}
};
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);
}
}
};
})(window.ionic);
})(ionic);
;(function(ionic) {
ionic.views.HeaderBar = function(opts) {
@ -1939,31 +1941,31 @@ ionic.views.TabBar.prototype = {
};
})(window.ionic);
;(function(ionic) {
;
(function(ionic) {
ionic.views = ionic.views || {};
ionic.views.SideMenu = function(opts) {
this.el = opts.el;
this.width = opts.width;
this.isEnabled = opts.isEnabled || true;
};
ionic.views.SideMenu = function(opts) {
this.el = opts.el;
this.width = opts.width;
this.isEnabled = opts.isEnabled || true;
};
ionic.views.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.views.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;
}
};
})(window.ionic);
})(ionic);
;
(function(ionic) {
@ -1977,10 +1979,13 @@ ionic.views.SideMenu.prototype = {
ionic.views.Toggle.prototype = {
tap: function(e) {
alert( this.isOn() );
},
isOn: function() {
val: function(value) {
if(value === true || value === false) {
this.checkbox.checked = value;
}
return this.checkbox.checked;
}
@ -2093,199 +2098,197 @@ ionic.controllers.NavController.prototype = {
};
})(window.ionic);
;(function(ionic) {
;
(function(ionic) {
ionic.controllers = ionic.controllers || {};
ionic.controllers.SideMenuController = function(options) {
var self = this;
ionic.controllers.SideMenuController = function(options) {
var _this = this;
self.left = options.left;
self.right = options.right;
self.content = options.content;
self._rightShowing = false;
self._leftShowing = false;
this.left = options.left;
this.right = options.right;
this.content = options.content;
this.content.onDrag = function(e) {
self._handleDrag(e);
};
this._rightShowing = false;
this._leftShowing = false;
this.content.endDrag = function(e) {
self._endDrag(e);
};
this.content.onDrag = function(e) {
_this._handleDrag(e);
/*
// Bind release and drag listeners
window.ion.onGesture('release', function(e) {
self._endDrag(e);
}, self.center);
window.ion.onGesture('drag', function(e) {
self._handleDrag(e);
}, self.center);
*/
};
this.content.endDrag = function(e) {
_this._endDrag(e);
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;
}
};
/*
// 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);
*/
};
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 || {});
})(ionic);
;(function(ionic) {
ionic.controllers = ionic.controllers || {};
@ -2428,14 +2431,12 @@ ionic.controllers.TabBarController.prototype = {
function tapPolyfill(e) {
// if the source event wasn't from a touch event then don't use this polyfill
if(!e.gesture || e.gesture.pointerType !== "touch") return;
if(!e.gesture || e.gesture.pointerType !== "touch" || !e.gesture.srcEvent) return;
var
e = e.gesture.srcEvent, // evaluate the actual source event, not the created event by gestures.js
ele = e.target;
if(!e) return;
while(ele) {
if( ele.tagName === "INPUT" || ele.tagName === "TEXTAREA" || ele.tagName === "SELECT" ) {
return inputTapPolyfill(ele, e);

47
ext/simple/init.js
View File

@ -7,35 +7,54 @@
ionic.Components.push(instance);
};
function onTap(e) {
ionic.component = function(el) {
if(el) {
for(var x = 0; x < ionic.Components.length; x++) {
if( ionic.Components[x].isComponent(el) ) {
// this element is a component, init its view
return ionic.Components[x].init(el);
}
}
}
};
function componentEvent(eventName, e) {
if (!e.gesture || !e.gesture.srcEvent || !e.gesture.srcEvent.target) return;
var
x,
e = e.gesture.srcEvent,
el = e.target,
component;
component,
el = e.gesture.srcEvent.target; // get the original source event's target
while(el) {
// climb up the tree looking to see if the target
// is or is in a registered component
for(x = 0; x < ionic.Components.length; x++) {
if( ionic.Components[x].isComponent(el) ) {
// this element is a component
// create its view and call it's event handler
component = ionic.Components[x].create(el);
component && component.tap && component.tap(e);
return;
}
component = ionic.component(el);
if(component) {
component[eventName] && component[eventName](e.gesture.srcEvent);
return;
}
// not sure if this element is a component yet,
// keep climbing up the tree and check again
el = el.parentElement;
}
}
function onTap(e) {
componentEvent("tap", e);
}
ionic.on("tap", onTap, window);
function onDrag(e) {
componentEvent("drag", e);
}
ionic.on("drag", onDrag, window);
function onRelease(e) {
componentEvent("release", e);
}
ionic.on("release", onRelease, window);
function initalize() {
// remove the ready listeners
document.removeEventListener( "DOMContentLoaded", initalize, false );

20
ext/simple/toggle.js
View File

@ -4,20 +4,34 @@
ionic.registerComponent({
isComponent: function(el) {
// this is a Toggle component if it has a "toggle" classname
return el.classList.contains("toggle");
},
create: function(el) {
init: function(el) {
if(el) {
// check if we've already created a Toggle instance for this element
if(!el._instance) {
el._instance = new ionic.views.Toggle({
// find all the required elements that make up a toggle
var opts = {
el: el,
checkbox: el.querySelector("input[type='checkbox']"),
track: el.querySelector(".track"),
handle: el.querySelector(".handle")
});
};
// validate its a well formed toggle with the required pieces
if(!opts.checkbox || !opts.track || !opts.handle) {
return;
}
// ensure the handle is draggable
opts.handle.draggable = true;
// initialize an instance of a Toggle
el._instance = new ionic.views.Toggle(opts);
}
return el._instance;

362
js/controllers/sideMenuController.js
View File

@ -1,193 +1,191 @@
(function(ionic) {
ionic.controllers = ionic.controllers || {};
ionic.controllers.SideMenuController = function(options) {
var self = this;
ionic.controllers.SideMenuController = function(options) {
var _this = this;
self.left = options.left;
self.right = options.right;
self.content = options.content;
self._rightShowing = false;
self._leftShowing = false;
this.left = options.left;
this.right = options.right;
this.content = options.content;
this.content.onDrag = function(e) {
self._handleDrag(e);
};
this._rightShowing = false;
this._leftShowing = false;
this.content.endDrag = function(e) {
self._endDrag(e);
};
this.content.onDrag = function(e) {
_this._handleDrag(e);
/*
// Bind release and drag listeners
window.ion.onGesture('release', function(e) {
self._endDrag(e);
}, self.center);
window.ion.onGesture('drag', function(e) {
self._handleDrag(e);
}, self.center);
*/
};
this.content.endDrag = function(e) {
_this._endDrag(e);
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;
}
};
/*
// 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);
*/
};
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 || {});
})(ionic);

4
js/tapPolyfill.js
View File

@ -16,14 +16,12 @@
function tapPolyfill(e) {
// if the source event wasn't from a touch event then don't use this polyfill
if(!e.gesture || e.gesture.pointerType !== "touch") return;
if(!e.gesture || e.gesture.pointerType !== "touch" || !e.gesture.srcEvent) return;
var
e = e.gesture.srcEvent, // evaluate the actual source event, not the created event by gestures.js
ele = e.target;
if(!e) return;
while(ele) {
if( ele.tagName === "INPUT" || ele.tagName === "TEXTAREA" || ele.tagName === "SELECT" ) {
return inputTapPolyfill(ele, e);

64
js/views/navBar.js
View File

@ -1,42 +1,44 @@
(function(ionic) {
ionic.views.NavBar = function(opts) {
this.el = opts.el;
ionic.views.NavBar = function(opts) {
this.el = opts.el;
this._titleEl = this.el.querySelector('.title');
};
this._titleEl = this.el.querySelector('.title');
};
ionic.views.NavBar.prototype = {
shouldGoBack: function() {},
ionic.views.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();
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);
}
}
};
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);
}
}
};
})(window.ionic);
})(ionic);

42
js/views/sideMenu.js
View File

@ -1,25 +1,25 @@
(function(ionic) {
ionic.views = ionic.views || {};
ionic.views.SideMenu = function(opts) {
this.el = opts.el;
this.width = opts.width;
this.isEnabled = opts.isEnabled || true;
};
ionic.views.SideMenu = function(opts) {
this.el = opts.el;
this.width = opts.width;
this.isEnabled = opts.isEnabled || true;
};
ionic.views.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.views.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;
}
};
})(window.ionic);
})(ionic);

7
js/views/toggleView.js
View File

@ -11,10 +11,13 @@
ionic.views.Toggle.prototype = {
tap: function(e) {
alert( this.isOn() );
},
isOn: function() {
val: function(value) {
if(value === true || value === false) {
this.checkbox.checked = value;
}
return this.checkbox.checked;
}

15
test/input-toggle.html
View File

@ -21,10 +21,10 @@
<ul class="list">
<li class="list-item">
Airplane Mode
<label class="toggle">
<label class="toggle" id="airplaneMode">
<input type="checkbox" name="airplaneMode">
<div class="track">
<div class="handle" draggable="true"></div>
<div class="handle"></div>
</div>
</label>
</li>
@ -33,7 +33,7 @@
<label class="toggle">
<input type="checkbox" name="doNotDisturb" checked="checked">
<div class="track">
<div class="handle" draggable="true"></div>
<div class="handle"></div>
</div>
</label>
</li>
@ -65,13 +65,12 @@
<script>
$("#btnTest1").click(function(){
var toggle = $("[name='airplaneMode']")
if( toggle.prop("checked") ) {
toggle.prop("checked", false);
var toggle = ionic.component( document.getElementById("airplaneMode") );
if( toggle.val() === true ) {
toggle.val(false);
} else {
toggle.prop("checked", true);
toggle.val(true);
}
return;
});
$("#btnTest2").click(function(){