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

Swipe left swipe right yo!

Browse Source
This commit is contained in:
Max Lynch
2013-10-09 14:10:16 -05:00
parent 5af636989b
commit fb6d657f88
6 changed files with 131 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
dist/ionic-ios7.css vendored
View File

@ -1036,10 +1036,24 @@ 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;
.list-item-content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: white; }
.list-item-content.slide-left {
-webkit-transition: margin-left 0.2s ease-in-out; }
.list-item-buttons {
position: absolute;
z-index: 0;
right: 0;
top: 0; }
.list-divider {
padding: 5px 15px;
background-color: whitesmoke;

18
dist/ionic.css vendored
View File

@ -1124,10 +1124,24 @@ 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;
.list-item-content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: white; }
.list-item-content.slide-left {
-webkit-transition: margin-left 0.2s ease-in-out; }
.list-item-buttons {
position: absolute;
z-index: 0;
right: 0;
top: 0; }
.list-divider {
padding: 5px 15px;
background-color: whitesmoke;

46
dist/ionic.js vendored
View File

@ -1797,20 +1797,48 @@ window.ionic = {
ionic.views.List.prototype = {
_handleSwipeLeft: function(e) {
var item = e.target;
if(!item.classList.contains('list-item')) {
return;
}
var cl = item.classList;
var content;
var buttons;
var buttonsWidth;
item.classList.add('slide-left');
window.requestAnimationFrame(function() {
// Grab the content item
if(cl.contains('list-item')) {
content = item.querySelector('.list-item-content');
} else if(cl.contains('list-item-content')) {
content = item;
}
// Grab the buttons
buttons = content.parentNode.querySelector('.list-item-buttons');
if(buttons) {
buttonsWidth = buttons.offsetWidth;
// Slide the content over left by the button width
content.style.right = buttonsWidth + 'px';
content.style.left = -buttonsWidth + 'px';
content.classList.add('slide-left');
}
});
},
_handleSwipeRight: function(e) {
var item = e.target;
if(!item.classList.contains('list-item')) {
return;
}
item.classList.remove('slide-left');
}
window.requestAnimationFrame(function() {
var cl = item.classList;
if(cl.contains('list-item')) {
content = item.querySelector('.list-item-content');
} else if(cl.contains('list-item-content')) {
content = item;
}
content.classList.remove('slide-left');
content.style.right = 0;
content.style.left = 0;
});
},
};
})(ionic);

46
js/views/listView.js
View File

@ -17,20 +17,48 @@
ionic.views.List.prototype = {
_handleSwipeLeft: function(e) {
var item = e.target;
if(!item.classList.contains('list-item')) {
return;
}
var cl = item.classList;
var content;
var buttons;
var buttonsWidth;
item.classList.add('slide-left');
window.requestAnimationFrame(function() {
// Grab the content item
if(cl.contains('list-item')) {
content = item.querySelector('.list-item-content');
} else if(cl.contains('list-item-content')) {
content = item;
}
// Grab the buttons
buttons = content.parentNode.querySelector('.list-item-buttons');
if(buttons) {
buttonsWidth = buttons.offsetWidth;
// Slide the content over left by the button width
content.style.right = buttonsWidth + 'px';
content.style.left = -buttonsWidth + 'px';
content.classList.add('slide-left');
}
});
},
_handleSwipeRight: function(e) {
var item = e.target;
if(!item.classList.contains('list-item')) {
return;
}
item.classList.remove('slide-left');
}
window.requestAnimationFrame(function() {
var cl = item.classList;
if(cl.contains('list-item')) {
content = item.querySelector('.list-item-content');
} else if(cl.contains('list-item-content')) {
content = item;
}
content.classList.remove('slide-left');
content.style.right = 0;
content.style.left = 0;
});
},
};
})(ionic);

19
scss/ionic/_listview.scss
View File

@ -87,12 +87,29 @@ a.list-item {
text-decoration: none;
//background-color: $list-group-hover-bg;
}
}
.list-item-content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: white;
&.slide-left {
margin-left: -100px;
-webkit-transition: margin-left 0.2s ease-in-out;
}
}
.list-item-buttons {
position: absolute;
z-index: 0;
right: 0;
top: 0;
}
.list-divider {
padding: 5px 15px;

9
test/lists.html
View File

@ -20,8 +20,13 @@
<div class="content has-header">
<ul id="list" class="list">
<a href="#" class="list-item">
Sasafras
<i class="icon-arrow-right"></i>
<div class="list-item-content">
Sasafras
<i class="icon-arrow-right"></i>
</div>
<div class="list-item-buttons">
<button class="button button-danger">Delete</button>
</div>
</a>
<a href="#" class="list-item">
Candy