Skip to content
This repository was archived by the owner on May 27, 2021. It is now read-only.

both side dragging of drawer to its place #29

Open
harellevy wants to merge 2 commits into
base: master
Choose a base branch
from
Open

both side dragging of drawer to its place #29

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
384d8cf
both side dragging of drawer to its place
harellevy May 14, 2016
f37e492
Update ionic.contrib.drawer.js
harellevy May 14, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
386 changes: 216 additions & 170 deletions ionic.contrib.drawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,181 +9,227 @@
*/
angular.module('ionic.contrib.drawer', ['ionic'])

.controller('drawerCtrl', ['$element', '$attrs', '$ionicGesture', '$document', function($element, $attr, $ionicGesture, $document) {
var el = $element[0];
var dragging = false;
var startX, lastX, offsetX, newX;
var side;

// How far to drag before triggering
var thresholdX = 15;
// How far from edge before triggering
var edgeX = 40;

var LEFT = 0;
var RIGHT = 1;

var isTargetDrag = false;

var width = $element[0].clientWidth;

var enableAnimation = function() {
$element.addClass('animate');
};
var disableAnimation = function() {
$element.removeClass('animate');
};

// Check if this is on target or not
var isTarget = function(el) {
while(el) {
if(el === $element[0]) {
return true;
}
el = el.parentNode;
}
};

var startDrag = function(e) {
disableAnimation();

dragging = true;
offsetX = lastX - startX;
console.log('Starting drag');
console.log('Offset:', offsetX);
};

var startTargetDrag = function(e) {
disableAnimation();

dragging = true;
isTargetDrag = true;
offsetX = lastX - startX;
console.log('Starting target drag');
console.log('Offset:', offsetX);
};

var doEndDrag = function(e) {
startX = null;
lastX = null;
offsetX = null;
isTargetDrag = false;

if(!dragging) {
return;
}

dragging = false;

console.log('End drag');
enableAnimation();

ionic.requestAnimationFrame(function() {
if(newX < (-width / 2)) {
el.style.transform = el.style.webkitTransform = 'translate3d(' + -width + 'px, 0, 0)';
} else {
el.style.transform = el.style.webkitTransform = 'translate3d(0px, 0, 0)';
}
});
};

var doDrag = function(e) {
if(e.defaultPrevented) {
return;
}

if(!lastX) {
startX = e.gesture.touches[0].pageX;
}

lastX = e.gesture.touches[0].pageX;

if(!dragging) {

// Dragged 15 pixels and finger is by edge
if(Math.abs(lastX - startX) > thresholdX) {
if(isTarget(e.target)) {
startTargetDrag(e);
} else if(startX < edgeX) {
startDrag(e);
}
}
} else {
console.log(lastX, offsetX, lastX - offsetX);
newX = Math.min(0, (-width + (lastX - offsetX)));
ionic.requestAnimationFrame(function() {
el.style.transform = el.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
});

}

if(dragging) {
e.gesture.srcEvent.preventDefault();
}
};

side = $attr.side == 'left' ? LEFT : RIGHT;
console.log(side);

$ionicGesture.on('drag', function(e) {
doDrag(e);
}, $document);
$ionicGesture.on('dragend', function(e) {
doEndDrag(e);
}, $document);


this.close = function() {
enableAnimation();
ionic.requestAnimationFrame(function() {
if(side === LEFT) {
el.style.transform = el.style.webkitTransform = 'translate3d(-100%, 0, 0)';
} else {
el.style.transform = el.style.webkitTransform = 'translate3d(100%, 0, 0)';
}
});
};

this.open = function() {
enableAnimation();
ionic.requestAnimationFrame(function() {
if(side === LEFT) {
el.style.transform = el.style.webkitTransform = 'translate3d(0%, 0, 0)';
} else {
el.style.transform = el.style.webkitTransform = 'translate3d(0%, 0, 0)';
}
});
};
.controller('drawerCtrl', ['$element', '$attrs', '$ionicGesture', '$ionicBackdrop', '$document', function($element, $attr, $ionicGesture, $ionicBackdrop, $document) {
var el = $element[0];
var dragging = false;
var startX, lastX, offsetX, newX;
var side;

// How far to drag before triggering
var thresholdX = 15;
// How far from edge before triggering
var edgeX = 40;

var LEFT = 0;
var RIGHT = 1;

var isTargetDrag = false;

var width = $element[0].clientWidth;

var enableAnimation = function() {
$element.addClass('animate');
};
var disableAnimation = function() {
$element.removeClass('animate');
};

// Check if this is on target or not
var isTarget = function(el) {
while(el) {
if(el === $element[0]) {
return true;
}
el = el.parentNode;
}
};

var startDrag = function(e) {
disableAnimation();

dragging = true;
offsetX = lastX - startX;
};

var startTargetDrag = function(e) {
disableAnimation();

dragging = true;
isTargetDrag = true;
if (side){
offsetX = startX - lastX;
}else{
offsetX = lastX - startX;
}
};

var doEndDrag = function(e) {
startX = null;
lastX = null;
offsetX = null;
isTargetDrag = false;

if(!dragging) {
return;
}

dragging = false;

enableAnimation();

ionic.requestAnimationFrame(function() {
if(newX < (-width / 2)) {
if (side){
el.style.transform = el.style.webkitTransform = 'translate3d(' + width + 'px, 0, 0)';
}else{
el.style.transform = el.style.webkitTransform = 'translate3d(' + -width + 'px, 0, 0)';
}

angular.element(el).trigger('close-main-menu');
} else {
el.style.transform = el.style.webkitTransform = 'translate3d(0px, 0, 0)';
angular.element(el).trigger('open-main-menu');
}
});
};

var docWidth = angular.element('body').outerWidth();

var doDrag = function(e) {
if(e.defaultPrevented) {
return;
}

if(!lastX) {
if (side){
startX = docWidth - e.gesture.touches[0].pageX;
}else{
startX = e.gesture.touches[0].pageX;
}
}

if (side){
lastX = docWidth - e.gesture.touches[0].pageX;
}else {
lastX = e.gesture.touches[0].pageX;
}

if(!dragging) {
if (side){
if(Math.abs(startX - lastX) > thresholdX) {
if(isTarget(e.target)) {
startTargetDrag(e);
} else if(startX < edgeX) {
startDrag(e);
}
}
}else{
// Dragged 15 pixels and finger is by edge
if(Math.abs(lastX - startX) > thresholdX) {
if(isTarget(e.target)) {
startTargetDrag(e);
} else if(startX < edgeX) {
startDrag(e);
}
}
}
} else {
newX = Math.min(0, (-width + (lastX - offsetX)));
ionic.requestAnimationFrame(function() {
if (side){
el.style.transform = el.style.webkitTransform = 'translate3d(' + (-newX) + 'px, 0, 0)';
}else{
el.style.transform = el.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
}
});
}
if(dragging) {
e.gesture.srcEvent.preventDefault();
}
};

side = $attr.side == 'left' ? LEFT : RIGHT;

$ionicGesture.on('drag', function(e) {
doDrag(e);
}, $document);
$ionicGesture.on('dragend', function(e) {
doEndDrag(e);
}, $document);

angular.element(el).on('close-main-menu',function(){
$ionicBackdrop.release();
angular.element(el).addClass('menu-closed');
angular.element(document).off('click');
});

angular.element(el).on('open-main-menu',function(){
angular.element(el).addClass('menu-open');
$ionicBackdrop.retain();
setTimeout(function(){
angular.element(document).on('click',function(e){
close_menu();
});
},0);
});

this.close = close_menu;

function close_menu(){
$ionicBackdrop.release();
enableAnimation();
angular.element(document).off('click');
ionic.requestAnimationFrame(function() {
if(side === LEFT) {
el.style.transform = el.style.webkitTransform = 'translate3d(-100%, 0, 0)';
} else {
el.style.transform = el.style.webkitTransform = 'translate3d(100%, 0, 0)';
}
});
}

this.open = function() {
enableAnimation();
angular.element(el).trigger('open-main-menu');
ionic.requestAnimationFrame(function() {
if(side === LEFT) {
el.style.transform = el.style.webkitTransform = 'translate3d(0%, 0, 0)';
} else {
el.style.transform = el.style.webkitTransform = 'translate3d(0%, 0, 0)';
}
});
};
}])

.directive('drawer', ['$rootScope', '$ionicGesture', function($rootScope, $ionicGesture) {
return {
restrict: 'E',
controller: 'drawerCtrl',
link: function($scope, $element, $attr, ctrl) {
$element.addClass($attr.side);
$scope.openDrawer = function() {
console.log('open');
ctrl.open();
};
$scope.closeDrawer = function() {
console.log('close');
ctrl.close();
};
}
}
}]);
return {
restrict: 'E',
controller: 'drawerCtrl',
link: function($scope, $element, $attr, ctrl) {

$element.addClass($attr.side);
$scope.openDrawer = function() {
//console.log('open');
ctrl.open();
};
$scope.closeDrawer = function() {
//console.log('close');
ctrl.close();
};
}
}
}])

.directive('drawerClose', ['$rootScope', function($rootScope) {
return {
restrict: 'A',
link: function($scope, $element) {
$element.bind('click', function() {
var drawerCtrl = $element.inheritedData('$drawerController');
drawerCtrl.close();
});
}
}
return {
restrict: 'A',
link: function($scope, $element) {
$element.bind('click', function() {
var drawerCtrl = $element.inheritedData('$drawerController');
drawerCtrl.close();
});
}
}
}]);

})();