Disconnect all boxes with angular-snap and snapjs
I am working on an application that requires a snap for mobile solutions and a mobile device.
I use snapjs and angular-snap , snapjs installs two boxes on the left and right by default, I can disable one of these boxes using the service in the angular-snap directive with snapRemote.globalOptions.disable = 'right'; or using the snap-opt-disable = "'right'" attribute on the snap-content element.
I need to disable all boxes in non-mobile permissions (> = 768px), actually I have a directive that checks these permissions, but I don't know how to disable both boxes, left and right, and not just one box.
This is my directive:
angular.module('myApp').directive('mobileScreenSwitcher', function ($window, snapRemote) {
return {
restrict: 'E',
link: function (scope) {
$window.onresize = function () {
checkResolution();
};
checkResolution();
function checkResolution() {
var screenWidth = $window.innerWidth;
if (screenWidth >= 768) {
// I need disable all drawers at this line
snapRemote.globalOptions.disable = 'left';
}
}
}
}
});
This is my actual html code
<div ui-view="navBar" snap-drawer="left" ></div>
<div snap-content snap-opt-disable="'right'">
... content here
</div>
<div ui-view="navBar2" snap-drawer="right" ></div>
+3
source to share
1 answer
Try it,
angular.module('myApp').directive('mobileScreenSwitcher', function ($window, snapRemote) {
return {
restrict: 'E',
link: function (scope) {
snapRemote.getSnapper().then(function(snapper) {
function onResizeCallback() {
var screenWidth = $window.innerWidth;
if (screenWidth >= 768) {
snapper.close();
snapper.disable();
} else {
snapper.enable();
}
}
$window.addEventListener('resize', onResizeCallback);
onResizeCallback();
});
scope.$on('$destroy', function () {
$window.removeEventListener('resize' onResizeCallback);
});
}
};
});
The following approach worked for me before:
.run(function ($rootScope, snapRemote) {
snapRemote.getSnapper().then(function(snapper) {
function onResizeCallback() {
if (window.innerWidth <= 1024) {
snapper.enable();
} else {
snapper.close();
snapper.disable();
}
}
onResizeCallback();
$(window).resize(onResizeCallback);
});
});
+3
source to share