עדכון: מבדיקה נוספת שעשיתי כעת, זה עובד היטב בכל מחשב מלבד 2 המחשבים שעליהם אני כותב, (יש ביניהם סנכרון כלשהו, כך שזה מובן למה באג מור באחד משפיע גם על השני..), כך שהבעיה על פניו לא קשורה לתחום התכנות..
@dovid ניסיתי כבר לעשות את זה, שמרתי וזה עובד בדפדפן ובVSC היטב,
(אם זה יהיה רלוונטי אוכל לשלוח למי שצריך בפרטי לינק ישיר)
זה מקטע הקוד הרלוונטי
let INACTIVITY_TIMEOUT;
let INACTIVITY_TIMEOUT_LOGOUT;
let INACTIVITY_TIMEOUT_SHOW_BANNER_LOGIN;
let INACTIVITY_TIMER_LOGOUT;
let SLIDE_SHOW_TIMEOUT;
let IMAGE_DISPLAYED = false;
// zmani
let IS_SABBATH = false;
function resetAdDisplay(elementId) {
console.log('resetAdDisplay. IMAGE_DISPLAYED: ' + IMAGE_DISPLAYED);
clearTimeout(INACTIVITY_TIMEOUT);
clearTimeout(SLIDE_SHOW_TIMEOUT);
if (elementId !== 'bthLogoutBanner') {
//hideBannerConnectionUser();
}
INACTIVITY_TIMEOUT = setTimeout(function () {
if (!IMAGE_DISPLAYED && !IS_SABBATH) {
console.log('displayAds: start');
displayAds();
IMAGE_DISPLAYED = true;
//logout();
}
}, 40000);
}
let currentImageIndex = 0;
const images = [
'resources/v322.jpg',
'resources/ad.jpg',
];
function displayAds() {
let adsContainer = document.createElement('div');
adsContainer.id = 'ads-div';
adsContainer.style.position = 'fixed';
adsContainer.style.top = '0';
adsContainer.style.left = '0';
adsContainer.style.width = '100%';
adsContainer.style.height = '100%';
adsContainer.style.zIndex = '1900';
adsContainer.style.display = 'flex';
adsContainer.style.flexDirection = 'column';
adsContainer.style.alignItems = 'center';
adsContainer.style.justifyContent = 'center';
let adsContent = document.createElement('div');
adsContent.id = 'ads-content';
adsContent.style.position = 'fixed';
adsContent.style.top = '0';
adsContent.style.left = '0';
adsContent.style.right = '0';
adsContent.style.width = '100%';
adsContent.style.height = '100%';
adsContent.style.maxWidth = '690px';
adsContent.style.margin = 'auto';
adsContent.style.zIndex = '1900';
adsContent.style.display = 'flex';
adsContent.style.flexDirection = 'column';
adsContent.style.alignItems = 'center';
adsContent.style.justifyContent = 'center';
let currentImage = document.createElement('img');
currentImage.src = images[currentImageIndex];
currentImage.style.width = '100%';
currentImage.style.height = '100%';
currentImage.addEventListener('click', hideAds);
let prevButton = document.createElement('button');
prevButton.textContent = '❮';
prevButton.onclick = displayPrevImage;
let nextButton = document.createElement('button');
nextButton.textContent = '❯';
nextButton.onclick = displayNextImage;
prevButton.style.position = 'absolute';
prevButton.style.top = '50%';
prevButton.style.width = '50px';
prevButton.style.height = '50px';
prevButton.style.transform = 'translateY(-50%)';
prevButton.style.right = '18px';
prevButton.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
prevButton.style.border = 'none';
prevButton.style.borderRadius = '50%';
prevButton.style.color = 'rgba(0, 0, 0, 0.8)';
prevButton.style.fontSize = '28px';
prevButton.style.cursor = 'pointer';
nextButton.style.position = 'absolute';
nextButton.style.top = '50%';
nextButton.style.width = '50px';
nextButton.style.height = '50px';
nextButton.style.transform = 'translateY(-50%)';
nextButton.style.left = '10px';
nextButton.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
nextButton.style.border = 'none';
nextButton.style.borderRadius = '50%';
nextButton.style.color = 'rgba(0, 0, 0, 0.8)';
nextButton.style.fontSize = '28px';
nextButton.style.cursor = 'pointer';
adsContent.appendChild(currentImage);
adsContent.appendChild(prevButton);
adsContent.appendChild(nextButton);
adsContainer.appendChild(adsContent);
document.body.appendChild(adsContainer);
console.log('displayFullScreenImage');
SLIDE_SHOW_TIMEOUT = setInterval(displayNextImage, 22000);
}
function displayNextImage() {
currentImageIndex = (currentImageIndex + 1) % images.length;
updateImage();
console.log('displayNextImage');
}
function displayPrevImage() {
currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
updateImage();
console.log('displayPrevImage');
}
function updateImage() {
let currentImage = document.querySelector('#ads-div #ads-content img');
currentImage.src = images[currentImageIndex];
clearInterval(SLIDE_SHOW_TIMEOUT);
SLIDE_SHOW_TIMEOUT = setInterval(displayNextImage, 22000);
}
function hideAds() {
console.log('hideFullScreenImage');
const adsContainer = document.getElementById('ads-div');
if (adsContainer) {
adsContainer.remove();
IMAGE_DISPLAYED = false;
resetAdDisplay('elementId');
}
}
document.addEventListener('mousedown', function (event) {
resetAdDisplay(event.target.id);
});
document.addEventListener('keypress', function (event) {
resetAdDisplay(event.target.id);
});
document.addEventListener('touchstart', function (event) {
resetAdDisplay(event.target.id);
});
resetAdDisplay('elementId');