11
पर निष्क्रिय निष्क्रिय टाइमआउट चेतावनी मोडल मुझे एक मोडल के साथ मदद की ज़रूरत है जो उपयोगकर्ता निष्क्रिय होने पर आग लगती है। जब तक मैं एनवीडीए के साथ फ़ायरफ़ॉक्स पर परीक्षण नहीं करता तब तक यह बहुत अच्छा काम करता है। तीर कुंजियों का उपयोग करते समय और जब मैं मोबाइल पर स्वाइप करता हूं तो फोकस के साथ समस्याएं होती हैं। जब मोडल प्रकट होता है और उपयोगकर्ता तीर का उपयोग करता है या स्वाइप करता है तो फोकस हां बटन से कुछ सेकंड के बाद हेडर पर उछाल देगा यदि मैं इसे क्लिक करने के लिए प्रतीक्षा करता हूं। मैंने कामकाजी उदाहरण को लोड किया है: https://jsfiddle.net/ncanqaam/स्क्रीन रीडर
मैंने निष्क्रिय समय अवधि को एक मिनट में बदल दिया और एक भाग हटा दिया जो सर्वर को उपयोगकर्ता के सत्र को बढ़ाने के लिए कहता है।
var state ="L";
var timeoutPeriod = 540000;
var oneMinute = 60000;
var sevenMinutes = 60000;
var lastActivity = new Date();
function getIdleTime() {
return new Date().getTime() - lastActivity.getTime();
}
//Add Movement Detection
function addMovementListener() {
$(document).on('mousemove', onMovementHandler);
$(document).on('keypress', onMovementHandler);
$(document).on('touchstart touchend', onMovementHandler);
}
//Remove Movement Detection
function removeMovementListener() {
$(document).off('mousemove', onMovementHandler);
$(document).off('keypress', onMovementHandler);
$(document).off('touchstart touchend', onMovementHandler);
}
//Create Movement Handler
function onMovementHandler(ev) {
lastActivity = new Date();
console.log("Something moved, idle time = " + lastActivity.getTime());
}
function hide() {
$('#overlayTY').removeClass('opened'); // remove the overlay in order to make the main screen available again
$('#overlayTY, #modal-session-timeout').css('display', 'none'); // hide the modal window
$('#modal-session-timeout').attr('aria-hidden', 'true'); // mark the modal window as hidden
$('#modal-session-timeout').removeAttr('aria-hidden'); // mark the main page as visible
}
if (state == "L") {
$(document).ready(function() {
//Call Event Listerner to for movement detection
addMovementListener();
setInterval(checkIdleTime, 5000);
});
function endSession() {
console.log('Goodbye!');
}
var modalActive = false;
function checkIdleTime() {
var idleTime = getIdleTime();
console.log("The total idle time is " + idleTime/oneMinute + " minutes.");
if (idleTime > sevenMinutes) {
var prevFocus = $(document.activeElement);
console.log('previously: ' + prevFocus);
var modal = new window.AccessibleModal({
mainPage: $('#oc-container'),
overlay: $('#overlayTY').css('display', 'block'),
modal: $('#modal-session-timeout')
});
if (modalActive === false) {
console.log(modalActive);
$('#modal-session-timeout').insertBefore('#oc-container');
$('#overlayTY').insertBefore('#modal-session-timeout');
modal.show();
$('#modal-overlay').removeClass('opened');
modalActive = true;
console.log(modalActive);
console.log('the modal is active');
$('.js-timeout-refresh').on('click touchstart touchend', function(){
hide();
modalActive = false;
prevFocus.focus();
addMovementListener();
lastActivity = new Date();
});
$('.js-timeout-session-end').on('click touchstart touchend', function(){
hide();
$('#overlayTY').css('display', 'none');
endSession();
});
}
}
if ($('#overlayTY').css('display') === 'block'){
removeMovementListener();
}
if (idleTime > timeoutPeriod) {
endSession();
}
}
}