You may have seen swipeable items in native apps many times. Its a very good feature for apps to delete any item or to view hidden option of any item. Today in this article i will show how you can use your html, css & angular Js skills to build the swipeable item in your hybrid applications. I would recommend you to have a basic knowledge of html, css3 and angularjs before starting this tutorial. I am using ionic framework for user interface. I have written a angular directive which will help you to enable swipeable item feature. In that directive i have first registering the swipe gesture event of ionic. So, whenever user swipe on item it will call a function & later that function will handle all your logics.
So let's get started.
Note: You can use this swipeable item in any angular js application
Note: You can use this swipeable item in any angular js application
I am sharing html, css and angularjs code. Hope you like it. If you have any doubt please comment below in comment section.
1. Directive
myApp.directive('swipeableItem', function($ionicGesture) {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
var gestureType = attrs.gestureType;
scope.prevElement;
scope.init = 0;
elem['hasSwiped'] = "";
switch (gestureType) {
case 'leftRight':
$ionicGesture.on('swipeleft', function() {
if (elem == scope.prevElement) { // action happened on same element
if (scope.prevElement['hasSwiped'] == "right") { // on swipe right reset item
elem.css({
'transform': 'translate3d(0px, 0px, 0px)'
});
elem['hasSwiped'] = "";
} else { // swipe item to left
elem.css({
'transform': 'translate3d(-' + scope.swipeOffset + ', 0px, 0px)'
});
elem['hasSwiped'] = "left";
}
} else { // action happened on different element
if (scope.init > 0) { // if user has swiped atleast one item
if (scope.prevElement['hasSwiped']) { // reset previous element
scope.prevElement.css({
'transform': 'translate3d(0px, 0px, 0px)'
});
scope.prevElement['hasSwiped'] = "";
}
}
scope.prevElement = elem;
// swipe new element
elem.css({
'transform': 'translate3d(-' + scope.swipeOffset + ', 0px, 0px)'
});
elem['hasSwiped'] = "left";
scope.init = scope.init + 1;
}
}, elem);
$ionicGesture.on('swiperight', function() {
if (elem == scope.prevElement) { // action happened on same element
if (scope.prevElement['hasSwiped'] == "left") { // on swipe left reset item
elem.css({
'transform': 'translate3d(0px, 0px, 0px)'
});
elem['hasSwiped'] = "";
} else { // swipe item to right
elem.css({
'transform': 'translate3d(' + scope.swipeOffset + ', 0px, 0px)'
});
elem['hasSwiped'] = "right";
}
} else { // action happened on different element
if (scope.init > 0) { // if user has swiped atleast one item
if (scope.prevElement['hasSwiped']) { // reset previous element
scope.prevElement.css({
'transform': 'translate3d(0px, 0px, 0px)'
});
scope.prevElement['hasSwiped'] = "";
}
}
scope.prevElement = elem;
// swipe new element
elem.css({
'transform': 'translate3d(' + scope.swipeOffset + ', 0px, 0px)'
});
elem['hasSwiped'] = "right";
scope.init = scope.init + 1;
}
}, elem);
break;
case 'swipeRight':
$ionicGesture.on('swiperight', scope.reportEvent, elem);
break;
case 'swipeleft':
$ionicGesture.on('swipeleft', scope.reportEvent, elem);
break;
case 'doubletap':
$ionicGesture.on('doubletap', scope.reportEvent, elem);
break;
case 'tap':
$ionicGesture.on('tap', scope.reportEvent, elem);
break;
}
}
}
});
2. Controller
myApp.controller('gymListingsController', function($scope, $state, $ionicHistory, $ionicModal, $document) {
$scope.init = function() {
var swipeableItem = $document[0].body.querySelector('.swipeable-item');
var swipeableItemHeight = swipeableItem.offsetHeight;
$scope.swipeableItemOption = {
width: swipeableItemHeight + 'px'
};
$scope.swipeOffset = swipeableItemHeight + 'px';
};
});
3. CSS
.gym-list-container .flex-container {
display: flex;
flex-direction: column;
}
.swipeable-item-container {
position: relative;
height: 100%;
width: 100%;
}
.swipeable-item-container .swipeable-item {
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
will-change: transform;
/* transform: translate3d(-146px, 0px, 0px); */
position: relative;
height: 100%;
width: 100%;
padding-bottom: 38.88%;
z-index: 20;
background-color: #333;
}
.swipeable-item-container .swipeable-item .bg-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
.swipeable-item-container .swipeable-item .placeholder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: auto;
}
.swipeable-item-container .swipeable-item .content {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.swipeable-item-container .swipeable-item .content .wrapper {
text-align: center;
}
.swipeable-item-container .swipeable-item .content .offers {
color: #fff;
text-align: center;
font-size: 10px;
text-transform: uppercase;
line-height: 10px;
letter-spacing: 2px;
background-color: #ed164f;
border-radius: 2px;
padding: 2px 5px;
display: inline-block;
height: 14px;
margin-bottom: 3px;
}
.swipeable-item-container .swipeable-item .content .gym-name {
font-size: 20px;
line-height: 20px;
color: #fff;
letter-spacing: 2px;
font-weight: bold;
text-transform: uppercase;
margin: 0 0 3px;
}
.swipeable-item-container .swipeable-item .content .gym-location {
font-size: 12px;
line-height: 12px;
color: #fff;
letter-spacing: 2px;
margin-bottom: 0;
}
.swipeable-item-container .option-right {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 0px;
top: 0px;
height: 100%;
z-index: 10;
}
.swipeable-item-container .option-left {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: 10;
}
.swipeable-item-container .option-right .wrapper, .swipeable-item-container .option-left .wrapper {
text-align: center;
}
.swipeable-item-container .option-right .icon, .swipeable-item-container .option-left .icon {
width: 30px;
height: auto;
}
.swipeable-item-container .option-right .name, .swipeable-item-container .option-left .name {
color: #333;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
margin: 5px 0px 0 0px;
}
4. View
Option 1
CrystalMumbai
Option 2
Option 1
PlatinumDelhi
Option 2
Option 1
Cross FitPune
Option 2
Option 1
OxygenBhopal
Option 2
Option 1
PlatinumJaipur
Option 2
No comments:
Post a Comment