Skip to content

Commit

Permalink
Merge f08b5da into 41f1eae
Browse files Browse the repository at this point in the history
  • Loading branch information
@jrbendicho
jrbendicho committed Nov 19, 2019
2 parents 41f1eae + f08b5da commit ec00979
Show file tree
Hide file tree
Showing 11 changed files with 6,038 additions and 174 deletions.
1 change: 1 addition & 0 deletions .npmrc
View file
@@ -0,0 +1 @@
package-lock=true
31 changes: 17 additions & 14 deletions bower.json
View file
Expand Up @@ -10,21 +10,24 @@
"type": "git",
"url": "git@github.com:dpiccone/ng-pageslide.git"
},
"peerDependencies": {
"angular": "1.5.5"
"dependencies": {
"angular": "1.x"
},
"devDependencies": {
"grunt": "0.4.5",
"grunt-contrib-concat": "0.3.0",
"grunt-contrib-jshint": "0.6.5",
"grunt-contrib-uglify": "0.2.7",
"jasmine-core": "2.4.1",
"karma": "0.13.22",
"karma-coverage": "0.5.5",
"karma-coveralls": "1.1.2",
"karma-jasmine": "0.3.8",
"angular-mocks": "1.5.5",
"grunt-karma": "0.12.2",
"karma-phantomjs-launcher": "1.0.1"
"angular": "1.x",
"angular-mocks": "1.x",
"grunt": "^1.0.2",
"grunt-cli": "^1.2.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-jshint": "^1.1.0",
"grunt-contrib-uglify": "^3.3.0",
"grunt-karma": "^2.0.0",
"http-server": "^0.11.1",
"jasmine-core": "^3.1.0",
"karma": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-coveralls": "^1.1.2",
"karma-jasmine": "^1.1.1",
"karma-phantomjs-launcher": "^1.0.4"
}
}
130 changes: 73 additions & 57 deletions dist/angular-pageslide-directive.js
View file
Expand Up @@ -31,23 +31,26 @@
psKeyListener: '@',
psBodyClass: '@',
psClickOutside: '@',
onopen: '=?',
onclose: '=?'
onopen: '&?',
onclose: '&?'
},
link: function ($scope, el, attrs) {
link: function (scope, el, attrs) {

var param = {};

param.side = $scope.psSide || 'right';
param.speed = $scope.psSpeed || '0.5';
param.size = $scope.psSize || '300px';
param.zindex = $scope.psZindex || 1000;
param.className = $scope.psClass || 'ng-pageslide';
param.push = $scope.psPush === 'true';
param.container = $scope.psContainer || false;
param.keyListener = $scope.psKeyListener === 'true';
param.bodyClass = $scope.psBodyClass || false;
param.clickOutside = $scope.psClickOutside !== 'false';
param.side = scope.psSide || 'right';
param.speed = scope.psSpeed || '0.5';
param.size = scope.psSize || '300px';
param.zindex = scope.psZindex || 1000;
param.className = scope.psClass || 'ng-pageslide';
param.push = scope.psPush === 'true';
param.container = scope.psContainer || false;
param.keyListener = scope.psKeyListener === 'true';
param.bodyClass = scope.psBodyClass || false;
param.clickOutside = scope.psClickOutside !== 'false';
param.autoClose = scope.psAutoClose || false;

param.push = param.push && !param.container;

el.addClass(param.className);

Expand All @@ -61,37 +64,37 @@
body = document.body;
}


if (param.push) {
body.style.position = 'absolute';
body.style.transitionDuration = param.speed + 's';
body.style.webkitTransitionDuration = param.speed + 's';
body.style.transitionProperty = 'top, bottom, left, right';
}

function onBodyClick(e) {
if(isOpen && !slider.contains(e.target)) {
var target = e.touches && e.touches[0] || e.target;
if(
isOpen &&
body.contains(target) &&
!slider.contains(target)
) {
isOpen = false;
$scope.psOpen = false;
$scope.$apply();
scope.psOpen = false;
scope.$apply();
}

if($scope.psOpen) {
if(scope.psOpen) {
isOpen = true;
}
}

function setBodyClass(value){
if (param.bodyClass) {
var bodyClass = param.className + '-body';
var bodyClassRe = new RegExp(' ' + bodyClass + '-closed| ' + bodyClass + '-open');
var bodyClassRe = new RegExp(bodyClass + '-closed|' + bodyClass + '-open');
body.className = body.className.replace(bodyClassRe, '');
body.className += ' ' + bodyClass + '-' + value;
var newBodyClassName = bodyClass + '-' + value;
if (body.className[body.className.length -1] !== ' ') {
body.className += ' ' + newBodyClassName;
} else {
body.className += newBodyClassName;
}
}
}

setBodyClass('closed');

slider = el[0];

if (slider.tagName.toLowerCase() !== 'div' &&
Expand All @@ -114,53 +117,66 @@
slider.style.height = param.size;
slider.style.transitionProperty = 'top, bottom, left, right';

if (param.push) {
body.style.position = 'absolute';
body.style.transitionDuration = param.speed + 's';
body.style.webkitTransitionDuration = param.speed + 's';
body.style.transitionProperty = 'top, bottom, left, right';
}

if (param.container) {
slider.style.position = 'absolute';
body.style.position = 'relative';
body.style.overflow = 'hidden';
}

function onTransitionEnd() {
if ($scope.psOpen) {
if (typeof $scope.onopen === 'function') {
$scope.onopen();
if (scope.psOpen) {
if (typeof scope.onopen === 'function') {
scope.onopen()();
}
} else {
if (typeof $scope.onclose === 'function') {
$scope.onclose();
if (typeof scope.onclose === 'function') {
scope.onclose()();
}
}
}

slider.addEventListener('transitionend', onTransitionEnd);

initSlider();

function initSlider() {
function initSlider(slider, param) {
switch (param.side) {
case 'right':
slider.style.width = param.size;
slider.style.height = '100%';
slider.style.top = '0px';
slider.style.bottom = '0px';
slider.style.right = '0px';
break;
case 'left':
slider.style.width = param.size;
slider.style.height = '100%';
slider.style.top = '0px';
slider.style.bottom = '0px';
slider.style.left = '0px';
break;
case 'top':
slider.style.height = param.size;
slider.style.width = '100%';
slider.style.left = '0px';
slider.style.top = '0px';
slider.style.right = '0px';
break;
case 'bottom':
slider.style.height = param.size;
slider.style.width = '100%';
slider.style.bottom = '0px';
slider.style.left = '0px';
slider.style.right = '0px';
break;
}

if (scope.psOpen) {
psOpen(slider, param);
} else {
psClose(slider, param);
}
}

function psClose(slider, param) {
Expand Down Expand Up @@ -200,11 +216,11 @@
}

if (param.clickOutside) {
$document.off('click', onBodyClick);
$document.off('touchend click', onBodyClick);
}
isOpen = false;
setBodyClass('closed');
$scope.psOpen = false;
scope.psOpen = false;
}

function psOpen(slider, param) {
Expand Down Expand Up @@ -239,14 +255,14 @@
break;
}

$scope.psOpen = true;
scope.psOpen = true;

if (param.keyListener) {
$document.on('keydown', handleKeyDown);
}

if (param.clickOutside) {
$document.on('click', onBodyClick);
$document.on('touchend click', onBodyClick);
}
setBodyClass('open');
}
Expand All @@ -262,48 +278,50 @@
// http://stackoverflow.com/questions/12729122/angularjs-prevent-error-digest-already-in-progress-when-calling-scope-apply

$timeout(function () {
$scope.$apply();
scope.$apply();
});
}
}

// Initialize

initSlider(slider, param);

// Watchers

$scope.$watch('psOpen', function(value) {
scope.$watch('psOpen', function(value) {
if (!!value) {
psOpen(slider, param);
} else {
psClose(slider, param);
}
});

$scope.$watch('psSize', function(newValue, oldValue) {
scope.$watch('psSize', function(newValue, oldValue) {
if (oldValue !== newValue) {
param.size = newValue;
initSlider();
initSlider(slider, param);
}
});


// Events

$scope.$on('$destroy', function () {
scope.$on('$destroy', function () {
if (slider.parentNode === body) {
if (param.clickOutside) {
$document.off('click', onBodyClick);
$document.off('touchend click', onBodyClick);
}
body.removeChild(slider);
}

slider.removeEventListener('transitionend', onTransitionEnd);
});

if ($scope.psAutoClose) {
$scope.$on('$locationChangeStart', function() {
if (param.autoClose) {
scope.$on('$locationChangeStart', function() {
psClose(slider, param);
});
$scope.$on('$stateChangeStart', function() {
scope.$on('$stateChangeStart', function() {
psClose(slider, param);
});
}
Expand All @@ -312,5 +330,3 @@
};
}]);
}));


0 comments on commit ec00979

Please sign in to comment.