330 lines
12 KiB
PHP
Executable File
330 lines
12 KiB
PHP
Executable File
<?php
|
|
|
|
use yii\helpers\Html;
|
|
|
|
?>
|
|
|
|
<style>
|
|
/* ✅ ซ่อน Google Translate ทุกกรณี */
|
|
.goog-te-banner-frame.skiptranslate,
|
|
.goog-te-banner-frame,
|
|
.goog-te-gadget-icon,
|
|
body>.skiptranslate {
|
|
display: none !important;
|
|
visibility: hidden !important;
|
|
height: 0 !important;
|
|
}
|
|
|
|
body {
|
|
top: 0px !important;
|
|
}
|
|
|
|
.goog-tooltip,
|
|
.goog-tooltip:hover {
|
|
display: none !important;
|
|
}
|
|
|
|
.goog-text-highlight {
|
|
background: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* 🔹 Floating Buttons Container */
|
|
.float-container {
|
|
position: fixed;
|
|
left: 15px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 9999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
/* Primary Toggle Button */
|
|
.toggle-btn {
|
|
background: #2c1810; /* Match Footer */
|
|
color: #FFC068;
|
|
border: 2px solid #FFDBBB;
|
|
border-radius: 50%;
|
|
width: 55px;
|
|
height: 55px;
|
|
cursor: pointer;
|
|
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
|
|
font-size: 24px;
|
|
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.toggle-btn:hover {
|
|
background: #8e1d1d;
|
|
color: #fff;
|
|
transform: scale(1.1) rotate(90deg);
|
|
}
|
|
|
|
/* Floating Buttons Group */
|
|
.float-buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
transition: all 0.4s ease;
|
|
transform-origin: top left;
|
|
}
|
|
|
|
/* Each Action Button */
|
|
.float-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: #fff;
|
|
color: #2c1810 !important;
|
|
text-decoration: none !important;
|
|
border-radius: 30px;
|
|
padding: 8px 15px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid #FFDBBB;
|
|
font-weight: 700;
|
|
transition: all 0.3s ease;
|
|
font-size: 14px !important;
|
|
white-space: nowrap;
|
|
min-width: 55px;
|
|
}
|
|
|
|
.float-btn:hover {
|
|
background: #FFC068;
|
|
color: #2c1810 !important;
|
|
transform: translateX(10px);
|
|
border-color: #2c1810;
|
|
}
|
|
|
|
/* Thai Red Accent for specific buttons */
|
|
.float-btn-red {
|
|
border-color: #8e1d1d;
|
|
}
|
|
.float-btn-red:hover {
|
|
background: #8e1d1d;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.float-collapsed {
|
|
opacity: 0;
|
|
transform: scale(0.5) translateX(-50px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Accessibility Icon Styling */
|
|
.float-btn i {
|
|
width: 24px;
|
|
text-align: center;
|
|
color: #8e1d1d;
|
|
}
|
|
.float-btn:hover i {
|
|
color: inherit;
|
|
}
|
|
|
|
/* Font Size Styles - Improved to maintain visual hierarchy */
|
|
body.font-size-small { font-size: 14px !important; }
|
|
body.font-size-normal { /* Base size from theme */ }
|
|
body.font-size-large { font-size: 18px !important; }
|
|
body.font-size-xlarge { font-size: 20px !important; }
|
|
body.font-size-xxlarge { font-size: 24px !important; }
|
|
|
|
/* Targeted overrides for specific text elements when enlarged */
|
|
body.font-size-large p, body.font-size-large li, body.font-size-large td, body.font-size-large span:not(.fa):not(.fab):not(.fas) { font-size: 18px !important; }
|
|
body.font-size-xlarge p, body.font-size-xlarge li, body.font-size-xlarge td, body.font-size-xlarge span:not(.fa):not(.fab):not(.fas) { font-size: 20px !important; }
|
|
body.font-size-xxlarge p, body.font-size-xxlarge li, body.font-size-xxlarge td, body.font-size-xxlarge span:not(.fa):not(.fab):not(.fas) { font-size: 24px !important; }
|
|
</style>
|
|
|
|
<div class="float-container">
|
|
<!-- Main Menu Toggle -->
|
|
<button class="toggle-btn" id="toggleBtn" title="เครื่องมือช่วยเหลือ">
|
|
<i class="fa fa-universal-access"></i>
|
|
</button>
|
|
|
|
<div class="float-buttons float-collapsed" id="floatButtons">
|
|
<!-- 🔹 ปุ่มเปลี่ยนภาษา -->
|
|
<a href="#" class="float-btn" id="langBtn" onclick="toggleLanguage(); return false;">
|
|
<img id="lang-flag" src="https://flagcdn.com/th.svg" alt="TH"
|
|
style="width:22px;height:22px;border-radius:50%;border:1px solid #FFDBBB;">
|
|
<span id="lang-text">ภาษา: TH</span>
|
|
</a>
|
|
|
|
<!-- 🔹 ปุ่มปรับขนาดตัวอักษร -->
|
|
<a href="#" class="float-btn" onclick="adjustFontSize('increase'); return false;">
|
|
<i class="fa fa-plus-circle"></i> ขยายตัวอักษร
|
|
</a>
|
|
<a href="#" class="float-btn" onclick="adjustFontSize('decrease'); return false;">
|
|
<i class="fa fa-minus-circle"></i> ลดตัวอักษร
|
|
</a>
|
|
|
|
<!-- 🆕 🔹 ปุ่มรีเซ็ต -->
|
|
<a href="#" class="float-btn float-btn-red" onclick="resetSettings(); return false;">
|
|
<i class="fa fa-refresh"></i> คืนค่าเริ่มต้น
|
|
</a>
|
|
|
|
<!-- Up to Top -->
|
|
<a href="#top" class="float-btn">
|
|
<i class="fa fa-chevron-up"></i> กลับด้านบน
|
|
</a>
|
|
|
|
<div id="google_translate_element" style="display:none"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
/** ✅ Toggle ปุ่มแสดง/ซ่อน */
|
|
const toggleBtn = document.getElementById("toggleBtn");
|
|
const floatButtons = document.getElementById("floatButtons");
|
|
|
|
toggleBtn.addEventListener("click", () => {
|
|
const isCollapsed = floatButtons.classList.toggle("float-collapsed");
|
|
toggleBtn.innerHTML = isCollapsed ? '<i class="fa fa-universal-access"></i>' : '<i class="fa fa-times"></i>';
|
|
});
|
|
|
|
/** ✅ ฟังก์ชันปรับขนาดตัวอักษรโดยใช้ CSS Class (ไม่เก็บค่า) */
|
|
let currentFontSize = 'normal';
|
|
|
|
function adjustFontSize(action) {
|
|
const sizes = ['small', 'normal', 'large', 'xlarge', 'xxlarge'];
|
|
const currentIndex = sizes.indexOf(currentFontSize);
|
|
let newIndex = currentIndex;
|
|
|
|
if (action === 'increase' && currentIndex < sizes.length - 1) newIndex = currentIndex + 1;
|
|
if (action === 'decrease' && currentIndex > 0) newIndex = currentIndex - 1;
|
|
|
|
const newSize = sizes[newIndex];
|
|
sizes.forEach(size => document.body.classList.remove(`font-size-${size}`));
|
|
document.body.classList.add(`font-size-${newSize}`);
|
|
currentFontSize = newSize;
|
|
showNotification(`ปรับขนาดตัวอักษรเป็น: ${newSize.toUpperCase()}`);
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
currentFontSize = 'normal';
|
|
document.body.classList.add('font-size-normal');
|
|
});
|
|
|
|
/** ✅ แสดงข้อความแจ้งเตือนชั่วคราว */
|
|
function showNotification(message) {
|
|
const oldNotif = document.getElementById('font-notification');
|
|
if (oldNotif) oldNotif.remove();
|
|
|
|
const notif = document.createElement('div');
|
|
notif.id = 'font-notification';
|
|
notif.textContent = message;
|
|
notif.style.cssText = `
|
|
position: fixed;
|
|
top: 25px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: #2c1810;
|
|
color: #FFC068;
|
|
padding: 12px 25px;
|
|
border-radius: 50px;
|
|
border: 2px solid #FFC068;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
|
z-index: 100000;
|
|
font-size: 16px !important;
|
|
font-weight: bold;
|
|
font-family: 'Kanit', sans-serif;
|
|
`;
|
|
document.body.appendChild(notif);
|
|
setTimeout(() => {
|
|
notif.style.opacity = '0';
|
|
notif.style.transition = 'opacity 0.5s';
|
|
setTimeout(() => notif.remove(), 500);
|
|
}, 2000);
|
|
}
|
|
|
|
/** ✅ Google Translate Setup */
|
|
function googleTranslateElementInit() {
|
|
new google.translate.TranslateElement({
|
|
pageLanguage: 'th',
|
|
includedLanguages: 'th,en',
|
|
autoDisplay: false
|
|
}, 'google_translate_element');
|
|
}
|
|
|
|
/** ✅ เปลี่ยนภาษา */
|
|
function changeLanguage(lang) {
|
|
localStorage.setItem('selectedLang', lang);
|
|
if (lang === 'th') {
|
|
document.cookie = 'googtrans=/auto/th;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;';
|
|
document.cookie = 'googtrans=/th/en;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;';
|
|
document.cookie = 'googtrans=/th/th;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;';
|
|
updateLangDisplay('th');
|
|
location.reload();
|
|
return;
|
|
}
|
|
let select = document.querySelector('#google_translate_element select');
|
|
if (select) {
|
|
select.value = lang;
|
|
select.dispatchEvent(new Event('change'));
|
|
updateLangDisplay(lang);
|
|
return;
|
|
}
|
|
let tries = 0;
|
|
const interval = setInterval(() => {
|
|
select = document.querySelector('#google_translate_element select');
|
|
if (select || tries++ > 10) {
|
|
clearInterval(interval);
|
|
if (select) {
|
|
select.value = lang;
|
|
select.dispatchEvent(new Event('change'));
|
|
updateLangDisplay(lang);
|
|
}
|
|
}
|
|
}, 300);
|
|
}
|
|
|
|
function toggleLanguage() {
|
|
const current = localStorage.getItem('selectedLang') || 'th';
|
|
const nextLang = current === 'th' ? 'en' : 'th';
|
|
changeLanguage(nextLang);
|
|
}
|
|
|
|
function updateLangDisplay(lang) {
|
|
const flagImg = document.getElementById('lang-flag');
|
|
const langText = document.getElementById('lang-text');
|
|
if (lang === 'en') {
|
|
flagImg.src = "https://flagcdn.com/gb.svg";
|
|
flagImg.alt = "EN";
|
|
langText.textContent = "Language: EN";
|
|
} else {
|
|
flagImg.src = "https://flagcdn.com/th.svg";
|
|
flagImg.alt = "TH";
|
|
langText.textContent = "ภาษา: TH";
|
|
}
|
|
}
|
|
|
|
function resetSettings() {
|
|
const sizes = ['small', 'normal', 'large', 'xlarge', 'xxlarge'];
|
|
sizes.forEach(size => document.body.classList.remove(`font-size-${size}`));
|
|
document.body.classList.add('font-size-normal');
|
|
currentFontSize = 'normal';
|
|
localStorage.setItem('selectedLang', 'th');
|
|
updateLangDisplay('th');
|
|
changeLanguage('th');
|
|
showNotification('รีเซ็ตการตั้งค่าเรียบร้อย');
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const savedLang = localStorage.getItem('selectedLang') || 'th';
|
|
updateLangDisplay(savedLang);
|
|
if (savedLang === 'en') setTimeout(() => changeLanguage('en'), 1000);
|
|
});
|
|
|
|
function hideGoogleTranslateBar() {
|
|
const frame = document.querySelector('iframe.goog-te-banner-frame');
|
|
if (frame) frame.style.display = 'none';
|
|
document.body.style.top = '0px';
|
|
}
|
|
document.addEventListener('DOMContentLoaded', hideGoogleTranslateBar);
|
|
window.addEventListener('load', () => setTimeout(hideGoogleTranslateBar, 500));
|
|
setInterval(hideGoogleTranslateBar, 1500);
|
|
</script>
|
|
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
|