You use the esc key to open the menu with keycode 27 but how can i make the menu close using the same key esc* aka keycode 27 instead of having to click outside the menu. Do I have to make another event to close menu?
document.head.appendChild(styleItem1);
document.addEventListener('keydown', function(e) {
if (e.keyCode == 27){
if (modal.style.display = "none") {
modal.style.display = "block";
} else {
modal.style.display = "none";
}
}
})
var modal = document.getElementById("simpleModal");
var closeBtn = document.getElementsByClassName('closeBtn')[0];
closeBtn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);
function closeModal() {
modal.style.display = 'none';
}
function outsideClick(e) {
if (e.target == modal) {
modal.style.display = 'none';
}
}
Related
I am trying to implement a mechanism where specific items on a screen are navigable using arrows keys.
At the moment, I am drawing a red box around items as they move and pressing enter activates them.
I have the following directive:
(credits here and here)
.directive("moveNext", function() {
return {
restrict: "A",
link: function($scope, element,attrs) {
element.bind("keyup", function(e) {
if (e.which == 37) {
console.log ("MOVE LEFT:" + JSON.stringify(element));
element[0].classList.remove('selected');
var partsId = attrs.id.match(/move-(\d+)/);
console.log ("CURRENT PARTS="+JSON.stringify(partsId));
var currentId = parseInt(partsId[1]);
console.log ("Looking for move-"+(currentId-1));
var nextElement = angular.element(document.querySelectorAll('#move-' + (currentId - 1)));
// var $nextElement = element.next().find('movehere');
if(nextElement.length) {
nextElement[0].classList.add('selected');
nextElement[0].focus();
// $nextElement[0].style.border='5px solid red';;
}
}
if (e.which == 39) {
console.log ("MOVE RIGHT:" + JSON.stringify(element));
element[0].classList.remove('selected');
var partsId = attrs.id.match(/move-(\d+)/);
var currentId = parseInt(partsId[1]);
console.log ("CURRENT PARTS="+JSON.stringify(partsId));
var currentId = parseInt(partsId[1]);
var nextElement = angular.element(document.querySelectorAll('#move-' + (currentId + 1)));
console.log ("Looking for move-"+(currentId+1));
// var $nextElement = element.next().find('movehere');
if(nextElement.length) {
nextElement[0].classList.add('selected');
nextElement[0].focus();
// $nextElement[0].style.border='5px solid red';;
}
}
if (e.which == 13) {
console.log ("ENTER:" + JSON.stringify(element));
// element.triggerHandler('click');
}
});
if (event) event.preventDefault();
}
}
})
And then in the template I have the following, for example:
<div>
<button move-next id="move-1" ng-click="d1()">Yes</button>
<button move-next id="move-3" ng-click="d1()">Yes</button>
<button ng-click="d1()">No</button>
<button move-next id="move-2" ng-click="d1()">Yes</button>
</div>
Yes <!-- PROBLEM -->
Yes <!-- NEVER COMES HERE -->
The nice part is I can now navigate to any "clickable" element depending on the ID order I set, which is my intention. The problem is that focus() only works on items that are focusable, so once "move-4" is highlighted by the directive, the focus() doesn't really work so I can never move "next" to "move-5"
thanks
Problem solved:
I removed the directive, and instead wrote a global keyUpHandler
Inside the keyup handler, I kept state on last selected item ID, so I could +- it irrespective of whether an item is focusable or not.
I can now navigate arbitrary items on any view with direction pad.
The problem however is that move-Ids must be unique across views or I need to find a way to do a query only on the active view. I need to figure out how to do that. currentView = document.querySelector('ion-view[nav-view="active"]'); doesn't work.
The code (needs cleanup, but seems to work)
window.addEventListener('keyup', keyUpHandler, true);
function keyUpHandler(evt){
$timeout (function() {
var currentView = document.querySelector('ion-view[nav-view="active"]');
var keyCode=evt.keyCode;
var el, nextel;
if (keyCode == 13 ) {
if ($rootScope.dpadId >0) {
el = angular.element(currentView.querySelector('#move-' +$rootScope.dpadId));
el.triggerHandler('click');
}
return;
}
if (keyCode == 37 || keyCode == 39) {
if ($rootScope.dpadId < 1) {
console.log ("First dpad usage");
$rootScope.dpadId = 1;
el = angular.element(currentView.querySelector('#move-1'));
if (el.length) {
el[0].classList.add('selected');
}
} else {
// unselect old
el = angular.element(currentView.querySelector('#move-' +$rootScope.dpadId));
var nextId = (keyCode == 37) ? $rootScope.dpadId -1: $rootScope.dpadId + 1;
nextel = angular.element(currentView.querySelector('#move-' +nextId));
if (nextel.length) {
el[0].classList.remove('selected');
nextel[0].classList.add('selected');
$rootScope.dpadId = nextId;
}
console.log ("dpadID="+$rootScope.dpadId);
}
}
});
}
I have disabled backbutton for some condition by backbutton register action event like this:
$ionicPlatform.registerBackButtonAction(function (event) {
if (condition)
{
event.preventDefault();
$ionicHistory.nextViewOptions({ disableBack: true });
}
else
{
$ionicHistory.goBack();
}
}, 800);
So now how can i enable that device backbutton again ?
Because its still disabled and not going in previous view too.
you need to try this
var lastTimeBackPress = 0;
var timePeriodToExit = 2000;
platform.registerBackButtonAction(() => {
// get current active page
let view = this.nav.getActive();
if (view.component.name == "HomePage") {
//Double check to exit app
if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
platform.exitApp(); //Exit from app
} else {
let toast = this.toastCtrl.create({
message: 'Press back again to exit App',
duration: 3000,
position: 'bottom'
});
toast.present();
lastTimeBackPress = new Date().getTime();
}
} else {
// go to previous page
this.nav.pop({});
}
});
hope it will work for you
I am working on an Angular JS application which has HTML5 file input button and a Drag - Drop area.
I need to disable the drag drop area as long as the file browse popup is open. What is the best way to achieve this?
Here is an example I just made for you, this is an updated Google DnD Controller that I made more advanced plus added the functionality you wanted.
window.fileBrowserActive = false; //init the controller to false
function DnDFileController(selector, onDropCallback) {
var el_ = document.querySelector(selector);//select our element
var overCount = 0;//over count is 0
this.dragenter = function(e)
{
e.stopPropagation();//stop propagation and prevent the default action if any
e.preventDefault();
overCount++;//increment and assign the overCount var to 1
if(fileBrowserActive == false)//if the fileBrowserAction is false we can add dropping class
{
el_.classList.add('dropping');
}
else //else add error or none at all it's your choice
{
el_.classList.add('error');
}
};
this.dragover = function(e)
{
e.stopPropagation();
e.preventDefault();
};
this.dragleave = function(e)
{
e.stopPropagation();
e.preventDefault();
if (--overCount <= 0) { //we decrement and assign overCount once if it's equal to or less than 0 remove the classes and assign overCount to 0
el_.classList.remove('dropping');
el_.classList.remove('error');
overCount = 0;
}
};
this.drop = function(e) {
e.stopPropagation();
e.preventDefault();
el_.classList.remove('dropping');
el_.classList.remove('error');
if(fileBrowserActive === false)
{ //if fileBrowserActive is false send the datatranser data to the callback
onDropCallback(e.dataTransfer);
}
else
{ //else send false
onDropCallback(false);
}
};
el_.addEventListener('dragenter', this.dragenter, false);
el_.addEventListener('dragover', this.dragover, false);
el_.addEventListener('dragleave', this.dragleave, false);
el_.addEventListener('drop', this.drop, false);
}
var isFileBrowserActive = function(e){
fileBrowserActive = true; //once clicked on it is active
this.onchange = function(e){ //create the onchange listener
if(e.target.value !== "") //if the value is not blank we keep it active
{ //so now user can't DnD AND use the file browser
fileBrowserActive = true;
}
else if(e.target.value == "") //if it is blank means they click cancel most likely
{
fileBrowserActive = false;//assign false back
} //remove the listener
this.removeEventListener('change',this.onchange,false);
};
//assign the listener for change
this.addEventListener('change',this.onchange,false);
};
var fB = document.getElementById('fileBrowser'); //grab our element for file input
fB.addEventListener('click',isFileBrowserActive,false); //assign the click event
var activation = new DnDFileController('#dragNDrop',function(e){ //grab our DnD element
console.log(e); //console log the e (either datatransfer || false)
});
Check out the This Fiddle to see how this works
I have application which is done using ionicframework and cordova. In my app i have requirement that if user pressed back button then i need to ignore it. But only after user pressed it third time it should close app.
Previously project was done using phonegap and jquery and same code works. I did small workaround when i am throwing an exception then it app was not closed when it should not.
document.addEventListener("backbutton", function (e) {
if (new Date() - firstDateClick > 1000) {
firstDateClick = new Date();
totalClicks = 1;
} else {
totalClicks++;
if (totalClicks >= 3) {
var answer = confirm('Are You Sure You Want Exit');
if (answer) {
var service = angular.injector(['ng', 'starter.services']).get('DanceService');
service.logEvent("exit")
.then(function () {
alert('exit1')
if (navigator.app) {
navigator.app.exitApp();
}
else if (navigator.device) {
navigator.device.exitApp();
}
})
} else {
totalClicks = 1;
}
}
}
throw "ignore"
});
But i dont like idea to throw exception.
i made two times control before log out from the app. So the user can press one time and a toast will appear with the text "press again to exit" and the second press -> log out.
This is my service:
var deregisterFunction = null;
return {
disableBack: disableBack,
registerAction: registerAction,
goHome: goHome,
goBack: goBack,
deregisterAction: deregisterAction,
closeApp: closeApp
};
function disableBack() {
deregisterFunction = angular.copy($ionicPlatform.registerBackButtonAction(null, 101));
}
function registerAction(cb, priority) {
deregisterFunction = angular.copy($ionicPlatform.registerBackButtonAction(cb, priority));
}
function deregisterAction() {
if (deregisterFunction) {
deregisterFunction();
}
goBack();//default behaviour
}
function goHome() {
deregisterFunction = angular.copy($ionicPlatform.registerBackButtonAction(function() {
$state.go('app.home');
}, 101));
}
function goBack() {
deregisterFunction = angular.copy($ionicPlatform.registerBackButtonAction(function() {
$ionicHistory.goBack();
}, 101));
}
function closeApp() {
deregisterFunction = angular.copy($ionicPlatform.registerBackButtonAction(function() {
ionic.Platform.exitApp();
}, 101));
}
And this my utils service:
var service = {
logoutToast: logoutToast,
resetToastCount: resetToastCount
};
var toastCount = 0;
return service;
function resetToastCount() {
toastCount = 0;
}
function logoutToast() {
switch (toastCount) {
case 0:
$cordovaToast.show('Press again to log out', 'short', 'bottom');
toastCount++;
break;
case 1:
toastCount = 0;
//logout
break;
default:
$cordovaToast.show('Error', 'short', 'bottom');
}
}
}
}());
So in my controller i have this for register the action of my service:
$scope.$on('$ionicView.afterEnter', backButtonService.registerAction(utils.logoutToast, 101));
This for reset the count where i want:
$scope.$on('$ionicView.afterEnter', utils.resetToastCount());
And this for deregister my action when i navigate:
$scope.$on('$stateChangeStart', backButtonService.deregisterAction);
Hope this will helps you :)
Disable back button on Ionic/Cordova
$ionicPlatform.registerBackButtonAction(null, 101);
hi i want to show a timer that will stop if the window/tab is not in focus and when the user will back to the window/tab it will again start to countdown. i have following code and i tried some methods but not getting the desired result!hope one of you will able to solve my problem
function adTimer() {
timer++;
if(timer == fulltimer) {
var show="Click <img src=\"clickimages/"+key+".png\">";
$("#buttons").fadeIn();
$("#timer").html(show);
}
else {
setTimeout(adTimer, 1000);
}
$("#bar").width((timer/fulltimer)*200);
}
$(document).ready(function() {
if(id != -1) adTimer();
else $("#timer").html("Cheat Check");
});
Check for focus with a timer:
var focus;
function mytimer() {
if (focus) {
// Do stuff.
alert("test");
}
}
$(window).blur(function () {
focus = false;
});
$(window).focus(function () {
focus = true;
});
setInterval(mytimer, 1000);
Fiddle