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 working drag, fixed scrolling on drag, fixed cordova example

Browse Source
This commit is contained in:
Max Lynch
2013-08-28 07:53:26 -05:00
parent 50460a3247
commit 22fd709e81
15 changed files with 145 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,5 +1,5 @@
.DS_Store
*.sw[mpcod]
*.sw[mnpcod]
.sass-cache/
framework.sublime-project

32
dist/framework.css vendored
View File

@ -428,8 +428,8 @@ main {
color: #333333;
text-decoration: none; }
.button-default.active, .button-default:active {
background-color: #e6e6e6;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
background-color: #ebebeb;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #c4c4c4; }
.button-secondary {
@ -440,8 +440,8 @@ main {
color: #333333;
text-decoration: none; }
.button-secondary.active, .button-secondary:active {
background-color: gainsboro;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
background-color: #e1e1e1;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #b3b3b3; }
.button-primary {
@ -452,8 +452,8 @@ main {
color: white;
text-decoration: none; }
.button-primary.active, .button-primary:active {
background-color: #3d7be2;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
background-color: #4581e4;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #3d67ae; }
.button-info {
@ -464,8 +464,8 @@ main {
color: white;
text-decoration: none; }
.button-info.active, .button-info:active {
background-color: #34c6df;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
background-color: #3dc8e0;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #3998a9; }
.button-success {
@ -476,8 +476,8 @@ main {
color: white;
text-decoration: none; }
.button-success.active, .button-success:active {
background-color: #6fac45;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
background-color: #73b447;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #597e41; }
.button-warning {
@ -488,8 +488,8 @@ main {
color: white;
text-decoration: none; }
.button-warning.active, .button-warning:active {
background-color: #eba612;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
background-color: #edaa1a;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #a47a21; }
.button-danger {
@ -500,8 +500,8 @@ main {
color: white;
text-decoration: none; }
.button-danger.active, .button-danger:active {
background-color: #cc3724;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
background-color: #d43926;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #94362a; }
.button-dark {
@ -512,8 +512,8 @@ main {
color: white;
text-decoration: none; }
.button-dark.active, .button-dark:active {
background-color: #2b2b2b;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
background-color: #303030;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: black; }
.list-divider {

BIN
example/cordova/iOS/CodiqaProject.xcodeproj/project.xcworkspace/xcuserdata/driftyadmin.xcuserdatad/UserInterfaceState.xcuserstate generated
View File

Binary file not shown.

32
example/cordova/iOS/www/css/framework.css
View File

@ -428,8 +428,8 @@ main {
color: #333333;
text-decoration: none; }
.button-default.active, .button-default:active {
background-color: #e6e6e6;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
background-color: #ebebeb;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #c4c4c4; }
.button-secondary {
@ -440,8 +440,8 @@ main {
color: #333333;
text-decoration: none; }
.button-secondary.active, .button-secondary:active {
background-color: gainsboro;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
background-color: #e1e1e1;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #b3b3b3; }
.button-primary {
@ -452,8 +452,8 @@ main {
color: white;
text-decoration: none; }
.button-primary.active, .button-primary:active {
background-color: #3d7be2;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
background-color: #4581e4;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #3d67ae; }
.button-info {
@ -464,8 +464,8 @@ main {
color: white;
text-decoration: none; }
.button-info.active, .button-info:active {
background-color: #34c6df;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
background-color: #3dc8e0;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #3998a9; }
.button-success {
@ -476,8 +476,8 @@ main {
color: white;
text-decoration: none; }
.button-success.active, .button-success:active {
background-color: #6fac45;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
background-color: #73b447;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #597e41; }
.button-warning {
@ -488,8 +488,8 @@ main {
color: white;
text-decoration: none; }
.button-warning.active, .button-warning:active {
background-color: #eba612;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
background-color: #edaa1a;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #a47a21; }
.button-danger {
@ -500,8 +500,8 @@ main {
color: white;
text-decoration: none; }
.button-danger.active, .button-danger:active {
background-color: #cc3724;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
background-color: #d43926;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #94362a; }
.button-dark {
@ -512,8 +512,8 @@ main {
color: white;
text-decoration: none; }
.button-dark.active, .button-dark:active {
background-color: #2b2b2b;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
background-color: #303030;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: black; }
.list-divider {

5
example/cordova/iOS/www/index.html
View File

@ -10,7 +10,7 @@
<body>
<section class="panel-page-container">
<section data-panel="left-panel" class="panel-content">
<section id="this-panel" data-panel="left-panel" class="panel-content">
Panel!
</section>
@ -20,7 +20,8 @@
<main class="content-padded has-header">
<p>A whole bunch of content</p>
<a class="button button-primary" data-toggle-panel="left-panel" href="#">Panel</a>
<a class="button button-primary" id="open-panel" data-toggle-panel="left-panel" href="#">Panel</a>
</main>
</section>

13
example/cordova/iOS/www/js/framework-events.js vendored
View File

@ -51,6 +51,12 @@
handleClick: function(e) {
var target = e.target;
if(framework.Gestures.HAS_TOUCHEVENTS) {
// We don't allow any clicks on mobile
e.preventDefault();
return false;
}
if (
! target
|| e.which > 1
@ -65,14 +71,11 @@
//|| target.getAttribute('data-ignore') == 'push'
) {
// Allow it
console.log("EVENT: click", e);
return;
}
// We need to cancel this one
e.preventDefault();
// TODO: should we do this?
// e.stopPropagation();
},
handlePopState: function(event) {
@ -89,7 +92,7 @@
framework.offGesture = framework.EventController.offGesture;
// Set up various listeners
window.addEventListener('click', framework.EventController.handleClick);
window.addEventListener('popstate', framework.EventController.handlePopState);
window.addEventListener('click', framework.EventController.handleClick);
//window.addEventListener('popstate', framework.EventController.handlePopState);
})(this, document, FM = this.FM || {});

4
example/cordova/iOS/www/js/framework-gestures.js vendored
View File

@ -1176,8 +1176,8 @@
// prevent default browser behavior when dragging occurs
// be careful with it, it makes the element a blocking element
// when you are using the drag gesture, it is a good practice to set this true
drag_block_horizontal : false,
drag_block_vertical : false,
drag_block_horizontal : true,
drag_block_vertical : true,
// drag_lock_to_axis keeps the drag gesture on the axis that it started on,
// It disallows vertical directions if the initial direction was horizontal, and vice versa.
drag_lock_to_axis : false,

7
example/cordova/iOS/www/js/framework-panel.js vendored
View File

@ -6,10 +6,11 @@
isPanelOpen;
function onTap(e) {
var el = e.target;
return togglePanel(e, el, el.dataset.togglePanel);
if(e.target) {
el = e.target;
if(el.dataset.togglePanel) {
return togglePanel(e, el, el.dataset.togglePanel);
}
while(el.parentElement) {
el = el.parentElement;
@ -50,6 +51,6 @@
}
}
framework.on("click", onTap);
framework.onGesture("tap", onTap, document.getElementById('open-panel'));
})(this, document, FM = this.FM || {});

26
example/events.html
View File

@ -12,12 +12,38 @@
-webkit-transition: 0.1s ease-in-out all;
-webkit-transform:translate3d(120%,0,0) ;
}
#remove-box {
width: 200px;
height: 200px;
}
.relative {
position: relative;
}
button {
width: 100px;
height: 100px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background-color: red;
}
</style>
</head>
<body>
<div class="content content-padded">
<a href="#" id="tap-button" class="button button-success">Tap me!</a>
<a href="#" id="swipe-button" class="button button-success">Swipe me!</a>
<div id="remove-box" class="relative">
<div id="remove-box-overlay" class="overlay">Tap to remove me</div>
<form action="/badurl">
<button type="submit">Under click</button>
</form>
</div>
<div id="event-log"></div>
</div>
<script src="../../js/framework/framework-utils.js"></script>

25
example/events.js
View File

@ -8,6 +8,24 @@ var logEvent = function(data) {
var tb = document.getElementById('tap-button');
var sb = document.getElementById('swipe-button');
var rb = document.getElementById('remove-box-overlay');
window.FM.on('click', function(e) {
console.log('GOT CLICK', e);
logEvent({
type: 'click',
event: e
});
}, tb);
window.FM.onGesture('tap', function(e) {
e.target.parentNode.removeChild(e.target);
console.log('GOT CLICK ON BOX', e);
logEvent({
type: 'clickbox',
event: e
});
}, rb);
window.FM.onGesture('tap', function(e) {
console.log('GOT TAP', e);
@ -24,13 +42,6 @@ window.FM.onGesture('touch', function(e) {
});
}, tb);
window.FM.onGesture('tap', function(e) {
console.log('GOT TAP', e);
logEvent({
type: 'tap',
event: e
});
}, tb);
window.FM.onGesture('release', function(e) {
console.log('GOT RELEASE', e);
logEvent({

35
example/events/drag.html Normal file
View File

@ -0,0 +1,35 @@
<html>
<head>
<meta charset="utf-8">
<title>Example</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/framework.css">
<style>
#drag-me {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content content-padded">
<div id="drag-me">Drag me around!</div>
</div>
<script src="../../js/framework/framework-utils.js"></script>
<script src="../../js/framework/framework-gestures.js"></script>
<script src="../../js/framework/framework-events.js"></script>
<script>
var db = document.getElementById('drag-me');
window.FM.onGesture('drag', function(e) {
console.log('Dragging', e);
var touch = e.gesture.touches[0];
db.style.left = touch.pageX-50;
db.style.top = touch.pageY-50;
}, db);
</script>
</body>
</html>

4
example/panels.html
View File

@ -13,7 +13,7 @@
<section class="panel-page-container">
<section data-panel="left-panel" class="panel-content">
<section id="this-panel" data-panel="left-panel" class="panel-content">
Panel!
</section>
@ -23,7 +23,7 @@
<main class="content-padded has-header">
<p>A whole bunch of content</p>
<a class="button button-primary" data-toggle-panel="left-panel" href="#">Panel</a>
<a class="button button-primary" id="open-panel" data-toggle-panel="left-panel" href="#">Panel</a>
</main>
</section>

13
js/framework/framework-events.js
View File

@ -51,6 +51,12 @@
handleClick: function(e) {
var target = e.target;
if(framework.Gestures.HAS_TOUCHEVENTS) {
// We don't allow any clicks on mobile
e.preventDefault();
return false;
}
if (
! target
|| e.which > 1
@ -65,14 +71,11 @@
//|| target.getAttribute('data-ignore') == 'push'
) {
// Allow it
console.log("EVENT: click", e);
return;
}
// We need to cancel this one
e.preventDefault();
// TODO: should we do this?
// e.stopPropagation();
},
handlePopState: function(event) {
@ -89,7 +92,7 @@
framework.offGesture = framework.EventController.offGesture;
// Set up various listeners
window.addEventListener('click', framework.EventController.handleClick);
window.addEventListener('popstate', framework.EventController.handlePopState);
window.addEventListener('click', framework.EventController.handleClick);
//window.addEventListener('popstate', framework.EventController.handlePopState);
})(this, document, FM = this.FM || {});

4
js/framework/framework-gestures.js
View File

@ -1176,8 +1176,8 @@
// prevent default browser behavior when dragging occurs
// be careful with it, it makes the element a blocking element
// when you are using the drag gesture, it is a good practice to set this true
drag_block_horizontal : false,
drag_block_vertical : false,
drag_block_horizontal : true,
drag_block_vertical : true,
// drag_lock_to_axis keeps the drag gesture on the axis that it started on,
// It disallows vertical directions if the initial direction was horizontal, and vice versa.
drag_lock_to_axis : false,

7
js/framework/framework-panel.js
View File

@ -6,10 +6,11 @@
isPanelOpen;
function onTap(e) {
var el = e.target;
return togglePanel(e, el, el.dataset.togglePanel);
if(e.target) {
el = e.target;
if(el.dataset.togglePanel) {
return togglePanel(e, el, el.dataset.togglePanel);
}
while(el.parentElement) {
el = el.parentElement;
@ -50,6 +51,6 @@
}
}
framework.on("click", onTap);
framework.onGesture("tap", onTap, document.getElementById('open-panel'));
})(this, document, FM = this.FM || {});