darnytsa_hero

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

← Попереднє редагуванняНаступне редагування →
мНемає опису редагування
мНемає опису редагування
Рядок 841: Рядок 841:


// =========================
// =========================
// КНОПКА ВИПАДКОВА СТОРІНКА (спрощена версія)
// =========================
// =========================
function createRandomButton() {
// КНОПКИ ВИПАДКОВА СТОРІНКА ТА ЯК ЦЕ ПРАЦЮЄ
     // Перевіряємо чи кнопка вже існує
// =========================
     if (document.getElementById('float-random-btn')) {
function createLeftSideButtons() {
     // Перевіряємо чи кнопки вже існують
     if (document.getElementById('how-it-works-btn') || document.getElementById('float-random-btn')) {
         return;
         return;
     }
     }
Рядок 854: Рядок 855:
     }
     }
      
      
     const btn = document.createElement('button');
    // Визначаємо висоту для врахування екранної клавіатури
     btn.id = 'float-random-btn';
    const keyboardOffset = 80; // Відступ для клавіатури
     btn.innerHTML = '🎲 Випадкова cторінка';
   
     btn.title = 'Випадкова сторінка';
    // 1. Спочатку створюємо кнопку "Як це працює?" (кругла, вище)
     btn.style.cssText = `
     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 randomBtn = document.createElement('button');
     randomBtn.id = 'float-random-btn';
     randomBtn.innerHTML = '🎲 Випадкова cторінка';
     randomBtn.title = 'Випадкова сторінка';
     randomBtn.style.cssText = `
         position: fixed;
         position: fixed;
         bottom: 100px;
         bottom: ${70 + keyboardOffset}px; /* Нижче за кнопку "Як це працює" */
         right: 15px;
         left: 20px;
         z-index: 9998;
         z-index: 9998;
         background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
         background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
Рядок 876: Рядок 908:
         gap: 8px;
         gap: 8px;
         transition: all 0.3s ease;
         transition: all 0.3s ease;
        white-space: nowrap;
     `;
     `;
      
      
     // ПОКРАЩЕНИЙ ОБРОБНИК КЛІКУ
     // Обробник для кнопки "Як це працює?"
     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 = '⏳ Завантаження...';
         randomBtn.innerHTML = '⏳ Завантаження...';
         btn.style.opacity = '0.7';
         randomBtn.style.opacity = '0.7';
         btn.disabled = true;
         randomBtn.disabled = true;
          
          
         // Використовуємо window.location.replace для чистого переходу
         // Використовуємо window.location.replace для чистого переходу
Рядок 894: Рядок 937:
     });
     });
      
      
     btn.addEventListener('mouseenter', function() {
     // Додаємо hover-ефекти для обох кнопок
        if (!this.disabled) {
    [howItWorksBtn, randomBtn].forEach(btn => {
            this.style.transform = 'scale(1.05)';
        btn.addEventListener('mouseenter', function() {
            this.style.boxShadow = '0 6px 20px rgba(0,0,0,0.4)';
            if (!this.disabled) {
                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
    document.body.appendChild(howItWorksBtn);
    document.body.appendChild(randomBtn);
   
    console.log('Ліві кнопки створені');
}
 
// =========================
// АДАПТАЦІЯ ДО ЕКРАННОЇ КЛАВІАТУРИ
// =========================
function adjustForKeyboard() {
    const keyboardOffset = 80; // Базовий відступ
   
    // Функція для оновлення позицій кнопок
    function updateButtonPositions() {
        const howItWorksBtn = document.getElementById('how-it-works-btn');
        const randomBtn = document.getElementById('float-random-btn');
       
        if (howItWorksBtn && randomBtn) {
            // Можна додати логіку для динамічного визначення висоти клавіатури
            // Наприклад, перевірка висоти вікна або інших елементів
            const currentKeyboardOffset = window.innerHeight < 500 ? 120 : keyboardOffset;
           
            howItWorksBtn.style.bottom = `${140 + currentKeyboardOffset}px`;
            randomBtn.style.bottom = `${70 + currentKeyboardOffset}px`;
         }
         }
     });
     }
   
    // Оновлюємо позиції при зміні розміру вікна
    window.addEventListener('resize', updateButtonPositions);
      
      
     btn.addEventListener('mouseleave', function() {
     // Оновлюємо позиції при завантаженні
        this.style.transform = 'scale(1)';
    setTimeout(updateButtonPositions, 100);
        this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.3)';
}
    });
 
// =========================
// ОНОВЛЕНА ФУНКЦІЯ ПРИХОВАННЯ ЕЛЕМЕНТІВ
// =========================
function hideMobileElements() {
    if (!document.body.classList.contains('skin-minerva')) return;
      
      
     document.body.appendChild(btn);
     setTimeout(() => {
    console.log('Кнопка Випадкова створена');
        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() {
    if (document.body.classList.contains('skin-minerva') &&
        (!document.getElementById('float-random-btn') || !document.getElementById('how-it-works-btn'))) {
        createLeftSideButtons();
        adjustForKeyboard();
    }
}, 3000);


function restoreRandomButton() {
// =========================
     // Перевіряємо чи ми на випадковій сторінці
// АВТОМАТИЧНЕ ВІДНОВЛЕННЯ КНОПОК ПІСЛЯ ПЕРЕХОДУ
// =========================
function restoreButtons() {
     // Перевіряємо чи ми на випадковій сторінці або сторінці довідки
     const isRandomPage = window.location.href.includes('Випадкова_сторінка') ||  
     const isRandomPage = window.location.href.includes('Випадкова_сторінка') ||  
                         window.location.href.includes('Special:Random');
                         window.location.href.includes('Special:Random');
    const isHowItWorksPage = window.location.href.includes('Як_це_працює');
      
      
     if (isRandomPage && document.body.classList.contains('skin-minerva')) {
     if ((isRandomPage || isHowItWorksPage) && document.body.classList.contains('skin-minerva')) {
         // Чекаємо повного завантаження сторінки
         // Чекаємо повного завантаження сторінки
         setTimeout(() => {
         setTimeout(() => {
             if (!document.getElementById('float-random-btn')) {
             if (!document.getElementById('float-random-btn') || !document.getElementById('how-it-works-btn')) {
                 createRandomButton();
                 createLeftSideButtons();
                adjustForKeyboard();
             }
             }
         }, 500);
         }, 500);
     }
     }
}
// Додаємо обробник для відновлення кнопок
window.addEventListener('pageshow', restoreButtons);
}
}


Отримано з https://darnytsa.hero.kyivcity.gov.ua/w/index.php/MediaWiki:Common.js