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

Swipe left for list items in the works

Browse Source
This commit is contained in:
Max Lynch
2013-10-09 13:30:44 -05:00
parent a5b1a51e6e
commit 5af636989b
7 changed files with 1978 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1826
dist/ionic-ios7.css vendored
View File

File diff suppressed because it is too large Load Diff

3
dist/ionic.css vendored
View File

@ -1124,6 +1124,9 @@ a.list-item {
text-decoration: none; }
a.list-item:hover, a.list-item:focus {
text-decoration: none; }
a.list-item.slide-left {
margin-left: -100px;
-webkit-transition: margin-left 0.2s ease-in-out; }
.list-divider {
padding: 5px 15px;

53
dist/ionic.js vendored
View File

@ -177,7 +177,7 @@ window.ionic = {
* Simple gesture controllers with some common gestures that emit
* gesture events.
*
* Ported from github.com/EightMedia/hammer.js - thanks!
* Ported from github.com/EightMedia/ionic.Gestures.js - thanks!
*/
(function(ionic) {
@ -265,17 +265,9 @@ window.ionic = {
ionic.Gestures.event.determineEventTypes();
// Register all gestures inside ionic.Gestures.gestures
if(this === this.window) {
// this is a window, then only allow the Tap gesture to be added
ionic.Gestures.detection.register(ionic.Gestures.gestures.Tap);
ionic.Gestures.detection.register(ionic.Gestures.gestures.Drag);
ionic.Gestures.detection.register(ionic.Gestures.gestures.Release);
} else {
// everything else but the window
for(var name in ionic.Gestures.gestures) {
if(ionic.Gestures.gestures.hasOwnProperty(name)) {
ionic.Gestures.detection.register(ionic.Gestures.gestures[name]);
}
for(var name in ionic.Gestures.gestures) {
if(ionic.Gestures.gestures.hasOwnProperty(name)) {
ionic.Gestures.detection.register(ionic.Gestures.gestures[name]);
}
}
@ -1784,6 +1776,43 @@ window.ionic = {
}
};
})(ionic);
;
(function(ionic) {
ionic.views.List = function(opts) {
var _this = this;
this.el = opts.el;
window.ionic.onGesture('swipeleft', function(e) {
_this._handleSwipeLeft(e);
}, this.el);
window.ionic.onGesture('swiperight', function(e) {
_this._handleSwipeRight(e);
}, this.el);
};
ionic.views.List.prototype = {
_handleSwipeLeft: function(e) {
var item = e.target;
if(!item.classList.contains('list-item')) {
return;
}
item.classList.add('slide-left');
},
_handleSwipeRight: function(e) {
var item = e.target;
if(!item.classList.contains('list-item')) {
return;
}
item.classList.remove('slide-left');
}
};
})(ionic);
;
(function(ionic) {

16
js/utils/gestures.js
View File

@ -2,7 +2,7 @@
* Simple gesture controllers with some common gestures that emit
* gesture events.
*
* Ported from github.com/EightMedia/hammer.js - thanks!
* Ported from github.com/EightMedia/ionic.Gestures.js - thanks!
*/
(function(ionic) {
@ -90,17 +90,9 @@
ionic.Gestures.event.determineEventTypes();
// Register all gestures inside ionic.Gestures.gestures
if(this === this.window) {
// this is a window, then only allow the Tap gesture to be added
ionic.Gestures.detection.register(ionic.Gestures.gestures.Tap);
ionic.Gestures.detection.register(ionic.Gestures.gestures.Drag);
ionic.Gestures.detection.register(ionic.Gestures.gestures.Release);
} else {
// everything else but the window
for(var name in ionic.Gestures.gestures) {
if(ionic.Gestures.gestures.hasOwnProperty(name)) {
ionic.Gestures.detection.register(ionic.Gestures.gestures[name]);
}
for(var name in ionic.Gestures.gestures) {
if(ionic.Gestures.gestures.hasOwnProperty(name)) {
ionic.Gestures.detection.register(ionic.Gestures.gestures[name]);
}
}

36
js/views/listView.js Normal file
View File

@ -0,0 +1,36 @@
(function(ionic) {
ionic.views.List = function(opts) {
var _this = this;
this.el = opts.el;
window.ionic.onGesture('swipeleft', function(e) {
_this._handleSwipeLeft(e);
}, this.el);
window.ionic.onGesture('swiperight', function(e) {
_this._handleSwipeRight(e);
}, this.el);
};
ionic.views.List.prototype = {
_handleSwipeLeft: function(e) {
var item = e.target;
if(!item.classList.contains('list-item')) {
return;
}
item.classList.add('slide-left');
},
_handleSwipeRight: function(e) {
var item = e.target;
if(!item.classList.contains('list-item')) {
return;
}
item.classList.remove('slide-left');
}
};
})(ionic);

5
scss/ionic/_listview.scss
View File

@ -87,6 +87,11 @@ a.list-item {
text-decoration: none;
//background-color: $list-group-hover-bg;
}
&.slide-left {
margin-left: -100px;
-webkit-transition: margin-left 0.2s ease-in-out;
}
}
.list-divider {

121
test/lists.html
View File

@ -16,69 +16,74 @@
<h1 class="title">Customers</h1>
</header>
<main class="has-header">
<ul class="list">
<a href="#" class="list-item">
Sasafras
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Candy
<i class="icon-arrow-right"></i>
</a>
<li class="list-divider">Other things</li>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
</ul>
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
<main class="content-wrapper">
<div class="content has-header">
<ul id="list" class="list">
<a href="#" class="list-item">
Sasafras
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Candy
<i class="icon-arrow-right"></i>
</a>
<li class="list-divider">Other things</li>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
<a href="#" class="list-item">
Cheese cords
<i class="icon-arrow-right"></i>
</a>
</ul>
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</div>
</main>
</section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
<script>
var l = document.getElementById('list');
var list = new ionic.views.List({el: l});
</script>
</body>
</html>