darnytsa_hero

MediaWiki:Common.js: відмінності між версіями

← Попереднє редагування
мНемає опису редагування
мНемає опису редагування
 
(Не показано 10 проміжних версій цього користувача)
Рядок 841: Рядок 841:


// =========================
// =========================
// КНОПКА ВИПАДКОВА СТОРІНКА (вище)
// =========================
// =========================
// КНОПКИ ВИПАДКОВА СТОРІНКА ТА ЯК ЦЕ ПРАЦЮЄ
function createRandomButton() {
// =========================
     if (document.getElementById('float-random-btn')) return;
function createLeftSideButtons() {
     if (!document.body.classList.contains('skin-minerva')) return;
    // Перевіряємо чи кнопки вже існують
     if (document.getElementById('how-it-works-btn') || document.getElementById('float-random-btn')) {
        return;
    }
   
    // Перевіряємо чи це мобільна версія
     if (!document.body.classList.contains('skin-minerva')) {
        return;
    }
   
    // Визначаємо висоту для врахування екранної клавіатури
    const keyboardOffset = 80; // Відступ для клавіатури
   
    // 1. Спочатку створюємо кнопку "Як це працює?" (кругла, вище)
    const howItWorksBtn = document.createElement('button');
    howItWorksBtn.id = 'how-it-works-btn';
    howItWorksBtn.innerHTML = '?';
    howItWorksBtn.title = 'Як це працює?';
    howItWorksBtn.style.cssText = `
        position: fixed;
        bottom: ${140 + keyboardOffset}px; /* Вище за кнопку випадкової сторінки */
        left: 20px;
        z-index: 9998;
        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
        color: white;
        border: none;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        line-height: 1;
    `;
      
      
    // 2. Потім створюємо кнопку "Випадкова сторінка" (звичайна, нижче)
     const btn = document.createElement('button');
     const randomBtn = document.createElement('button');
     btn.id = 'float-random-btn';
     randomBtn.id = 'float-random-btn';
     btn.innerHTML = '🎲 Випадкова cторінка';
     randomBtn.innerHTML = '🎲 Випадкова cторінка';
     btn.title = 'Випадкова сторінка';
     randomBtn.title = 'Випадкова сторінка';
     btn.style.cssText = `
     randomBtn.style.cssText = `
         position: fixed;
         position: fixed;
         bottom: ${70 + keyboardOffset}px; /* Нижче за кнопку "Як це працює" */
         bottom: 240px;
         left: 20px;
         left: 15px;
         z-index: 9998;
         z-index: 9998;
         background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
         background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
Рядок 911: Рядок 872:
     `;
     `;
      
      
     // Обробник для кнопки "Як це працює?"
     btn.addEventListener('click', function(e) {
    howItWorksBtn.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
       
        // Відкриваємо локальну сторінку з поясненнями
        // Замініть '/wiki/Довідка:Як_це_працює' на вашу реальну URL-адресу
        window.location.href = '/wiki/Довідка:Як_це_працює';
    });
   
    // Обробник для кнопки "Випадкова сторінка"
    randomBtn.addEventListener('click', function(e) {
         e.preventDefault();
         e.preventDefault();
         e.stopPropagation();
         e.stopPropagation();
          
         btn.innerHTML = '⏳ Завантаження...';
        // Додаємо індикатор завантаження
         btn.style.opacity = '0.7';
        randomBtn.innerHTML = '⏳ Завантаження...';
         btn.disabled = true;
         randomBtn.style.opacity = '0.7';
         randomBtn.disabled = true;
       
        // Використовуємо window.location.replace для чистого переходу
         setTimeout(() => {
         setTimeout(() => {
             window.location.replace('/w/index.php/Спеціальна:Випадкова_сторінка');
             window.location.href = '/w/index.php/Спеціальна:Випадкова_сторінка';
         }, 100);
         }, 100);
     });
     });
      
      
     // Додаємо hover-ефекти для обох кнопок
     btn.addEventListener('mouseenter', function() {
    [howItWorksBtn, randomBtn].forEach(btn => {
        if (!this.disabled) {
        btn.addEventListener('mouseenter', function() {
            this.style.transform = 'scale(1.05)';
            if (!this.disabled) {
            this.style.boxShadow = '0 6px 20px rgba(0,0,0,0.4)';
                this.style.transform = 'scale(1.05)';
         }
                this.style.boxShadow = '0 6px 20px rgba(0,0,0,0.4)';
            }
        });
       
        btn.addEventListener('mouseleave', function() {
            this.style.transform = 'scale(1)';
            this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.3)';
         });
     });
     });
      
      
     // Додаємо кнопки до DOM
     btn.addEventListener('mouseleave', function() {
    document.body.appendChild(howItWorksBtn);
        this.style.transform = 'scale(1)';
    document.body.appendChild(randomBtn);
        this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.3)';
    });
      
      
     console.log('Ліві кнопки створені');
     document.body.appendChild(btn);
}
}


// =========================
// =========================
// АДАПТАЦІЯ ДО ЕКРАННОЇ КЛАВІАТУРИ
// КНОПКА "ЯК ЦЕ ПРАЦЮЄ?" (виправлена версія)
// =========================
// =========================
function adjustForKeyboard() {
function createHowItWorksButton() {
     const keyboardOffset = 80; // Базовий відступ
     if (document.getElementById('how-it-works-btn')) return;
      
      
     // Функція для оновлення позицій кнопок
     const btn = document.createElement('button');
    function updateButtonPositions() {
    btn.id = 'how-it-works-btn';
        const howItWorksBtn = document.getElementById('how-it-works-btn');
    btn.innerHTML = '?';
        const randomBtn = document.getElementById('float-random-btn');
    btn.title = 'Як це працює?';
          
    btn.style.cssText = `
         if (howItWorksBtn && randomBtn) {
        position: fixed;
            // Можна додати логіку для динамічного визначення висоти клавіатури
        bottom: 140px;
            // Наприклад, перевірка висоти вікна або інших елементів
        left: 15px;
            const currentKeyboardOffset = window.innerHeight < 500 ? 120 : keyboardOffset;
        z-index: 9998;
           
        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            howItWorksBtn.style.bottom = `${140 + currentKeyboardOffset}px`;
         color: white;
            randomBtn.style.bottom = `${70 + currentKeyboardOffset}px`;
        border: none;
        }
        width: 60px;
     }
        height: 60px;
        border-radius: 50%;
        font-size: 24px;
         font-weight: bold;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        line-height: 1;
    `;
   
    btn.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        window.location.href = '/w/index.php/FAQ';
     });
      
      
     // Оновлюємо позиції при зміні розміру вікна
     btn.addEventListener('mouseenter', function() {
    window.addEventListener('resize', updateButtonPositions);
        this.style.transform = 'scale(1.05)';
        this.style.boxShadow = '0 6px 20px rgba(0,0,0,0.4)';
    });
      
      
     // Оновлюємо позиції при завантаженні
     btn.addEventListener('mouseleave', function() {
    setTimeout(updateButtonPositions, 100);
        this.style.transform = 'scale(1)';
}
        this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.3)';
 
    });
// =========================
// ОНОВЛЕНА ФУНКЦІЯ ПРИХОВАННЯ ЕЛЕМЕНТІВ
// =========================
function hideMobileElements() {
    if (!document.body.classList.contains('skin-minerva')) return;
      
      
     setTimeout(() => {
     document.body.appendChild(btn);
        const elements = document.querySelectorAll('*');
        elements.forEach(element => {
            if (element.textContent && element.textContent.includes('Відмова')) {
                element.style.display = 'none';
                const parentLi = element.closest('li');
                if (parentLi) parentLi.style.display = 'none';
            }
        });
       
        const links = document.querySelectorAll('a[href*="%D0%92%D1%96%D0%B4%D0%BC%D0%BE%D0%B2%D0%B0"]');
        links.forEach(link => {
            link.style.display = 'none';
            const parentLi = link.closest('li');
            if (parentLi) parentLi.style.display = 'none';
        });
    }, 1000);
}
}


// =========================
// =========================
// ОНОВЛЕНИЙ ЗАГАЛЬНИЙ ІНІЦІАЛІЗАТОР
// ВИПРАВЛЕНА ІНІЦІАЛІЗАЦІЯ (замінити тільки цю частину)
// =========================
// =========================
document.addEventListener('DOMContentLoaded', function() {
    // Для мобільної версії
    if (document.body.classList.contains('skin-minerva')) {
        hideMobileElements();
        createLeftSideButtons();
        adjustForKeyboard();
       
        setTimeout(() => {
            if (!document.getElementById('float-random-btn') || !document.getElementById('how-it-works-btn')) {
                createLeftSideButtons();
                adjustForKeyboard();
            }
            hideMobileElements();
        }, 2000);
    }
});


window.addEventListener('load', function() {
// Видаляємо всі старі ініціалізатори і замінюємо на цей простий код:
    if (document.body.classList.contains('skin-minerva')) {
        setTimeout(() => {
            createLeftSideButtons();
            adjustForKeyboard();
        }, 500);
    }
});


setTimeout(function() {
let buttonsInitialized = false;
    if (document.body.classList.contains('skin-minerva') &&
        (!document.getElementById('float-random-btn') || !document.getElementById('how-it-works-btn'))) {
        createLeftSideButtons();
        adjustForKeyboard();
    }
}, 3000);


// =========================
function initializeLeftButtons() {
// АВТОМАТИЧНЕ ВІДНОВЛЕННЯ КНОПОК ПІСЛЯ ПЕРЕХОДУ
     if (buttonsInitialized) return;
// =========================
     buttonsInitialized = true;
function restoreButtons() {
     // Перевіряємо чи ми на випадковій сторінці або сторінці довідки
    const isRandomPage = window.location.href.includes('Випадкова_сторінка') ||
                        window.location.href.includes('Special:Random');
     const isHowItWorksPage = window.location.href.includes('Як_це_працює');
      
      
     if ((isRandomPage || isHowItWorksPage) && document.body.classList.contains('skin-minerva')) {
     // Кнопка "Як це працює?" для всіх тем
        // Чекаємо повного завантаження сторінки
     createHowItWorksButton();
        setTimeout(() => {
            if (!document.getElementById('float-random-btn') || !document.getElementById('how-it-works-btn')) {
                createLeftSideButtons();
                adjustForKeyboard();
            }
        }, 500);
    }
}
 
// Додаємо обробник для відновлення кнопок
window.addEventListener('pageshow', restoreButtons);
}
 
// =========================
// ПРИХОВАННЯ ЕЛЕМЕНТІВ У МОБІЛЬНІЙ ВЕРСІЇ
// =========================
function hideMobileElements() {
     if (!document.body.classList.contains('skin-minerva')) return;
      
      
     setTimeout(() => {
     // Кнопка "Випадкова сторінка" тільки для Minerva
        const elements = document.querySelectorAll('*');
        elements.forEach(element => {
            if (element.textContent && element.textContent.includes('Відмова')) {
                element.style.display = 'none';
                const parentLi = element.closest('li');
                if (parentLi) parentLi.style.display = 'none';
            }
        });
       
        const links = document.querySelectorAll('a[href*="%D0%92%D1%96%D0%B4%D0%BC%D0%BE%D0%B2%D0%B0"]');
        links.forEach(link => {
            link.style.display = 'none';
            const parentLi = link.closest('li');
            if (parentLi) parentLi.style.display = 'none';
        });
    }, 1000);
}
 
// =========================
// ЗАГАЛЬНИЙ ІНІЦІАЛІЗАТОР
// =========================
document.addEventListener('DOMContentLoaded', function() {
    // Для мобільної версії
     if (document.body.classList.contains('skin-minerva')) {
     if (document.body.classList.contains('skin-minerva')) {
        hideMobileElements();
         createRandomButton();
         createRandomButton();
       
        setTimeout(() => {
            if (!document.getElementById('float-random-btn')) {
                createRandomButton();
            }
            hideMobileElements();
        }, 2000);
     }
     }
});
}


window.addEventListener('load', function() {
// Тільки один спосіб ініціалізації
     if (document.body.classList.contains('skin-minerva')) {
if (document.readyState === 'loading') {
        setTimeout(createRandomButton, 500);
     document.addEventListener('DOMContentLoaded', initializeLeftButtons);
    }
} else {
});
    setTimeout(initializeLeftButtons, 100);
}


setTimeout(function() {
// Тільки один резервний таймер
    if (document.body.classList.contains('skin-minerva') && !document.getElementById('float-random-btn')) {
setTimeout(initializeLeftButtons, 1000);
        createRandomButton();
    }
}, 3000);
Отримано з https://darnytsa.hero.kyivcity.gov.ua/w/index.php/MediaWiki:Common.js