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

Event easier scroll API

Browse Source
This commit is contained in:
Max Lynch
2013-11-27 15:10:06 -06:00
parent c9b384c8a8
commit 4e42d7c996
3 changed files with 158 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
dist/js/ionic.js vendored
View File

@@ -3118,9 +3118,9 @@ var Scroller;
ionic.views.Scroller = ionic.views.View.inherit({
initialize: function(options) {
this.__content = options.content;
this.__container = options.content;
this.__content = options.content.firstElementChild;
this.__callback = this.getRenderFn();
this.options = {
@@ -3177,6 +3177,11 @@ var Scroller;
this.options[key] = options[key];
}
// Get the render update function, initialize event handlers,
// and calculate the size of the scroll container
this.__callback = this.getRenderFn();
this.__initEventHandlers();
this.resize();
},
@@ -3338,7 +3343,78 @@ var Scroller;
__decelerationVelocityY: null,
__initEventHandlers: function() {
// 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);
}
},
resize: function() {
// Update Scroller dimensions for changed content
this.setDimensions(this.__container.clientWidth, this.__container.clientHeight, this.__content.offsetWidth, this.__content.offsetHeight-50);
},
/*
---------------------------------------------------------------------------
PUBLIC API

80
js/views/scrollZyng.js
View File

@@ -284,9 +284,9 @@ var Scroller;
ionic.views.Scroller = ionic.views.View.inherit({
initialize: function(options) {
this.__content = options.content;
this.__container = options.content;
this.__content = options.content.firstElementChild;
this.__callback = this.getRenderFn();
this.options = {
@@ -343,6 +343,11 @@ var Scroller;
this.options[key] = options[key];
}
// Get the render update function, initialize event handlers,
// and calculate the size of the scroll container
this.__callback = this.getRenderFn();
this.__initEventHandlers();
this.resize();
},
@@ -504,7 +509,78 @@ var Scroller;
__decelerationVelocityY: null,
__initEventHandlers: function() {
// 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);
}
},
resize: function() {
// Update Scroller dimensions for changed content
this.setDimensions(this.__container.clientWidth, this.__container.clientHeight, this.__content.offsetWidth, this.__content.offsetHeight-50);
},
/*
---------------------------------------------------------------------------
PUBLIC API

75
test/scroll_z.html
View File

@@ -9,7 +9,7 @@
<script src="../../../../dist/js/ionic.js"></script>
<style>
#c{
#c {
width: 100%;
height: 100%;
position: absolute;
@@ -49,85 +49,14 @@
</div>
<script>
var render = function(left, top, zoom) {
content.style.webkitTransform = 'translate3d(' + (-left) + 'px,' + (-top) + 'px,0) scale(' + zoom + ')';
};
var container = document.getElementById('c');
var content = document.getElementById('content');
// Initialize Scroller
var scroller = new ionic.views.Scroller({
content: content,
content: container,
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>