「MediaWiki:Mobile.js」の版間の差分
提供:パルワールド 攻略Wiki
編集の要約なし タグ: モバイル編集 モバイルウェブ編集 |
編集の要約なし タグ: モバイル編集 モバイルウェブ編集 |
||
134行目: | 134行目: | ||
resetInactivityTimer(); | resetInactivityTimer(); | ||
}); | }); | ||
// HTMLコンテンツを変数に格納 | |||
var htmlContent = ` | |||
<div id="mobileMenuBar" class="fadeIn" style="display: block; position: fixed; top: 0px;"> | |||
<ul class="gNav-menu"> | |||
<li><a class="mw-selflink selflink">TOP</a></li> | |||
<li><a href="/RightMenu">攻略メニュー</a></li> | |||
<li><a href="/フォーラム">コミュニティ</a></li> | |||
</ul> | |||
</div>`; | |||
// #content要素を選択 | |||
var contentElement = document.querySelector('#content'); | |||
// HTMLコンテンツをcontentElementに追加 | |||
contentElement.innerHTML = htmlContent; |
2024年1月15日 (月) 20:52時点における版
/* ここにある全てのJavaScriptはモバイル版サイトの利用者に影響します */
/* ここにある全てのJavaScriptはモバイル版サイトの利用者に影響します */
var timer = setInterval(function() {
if ($('.menu ul:first').length) {
console.log("mobile menu exists");
clearInterval(timer);
$('.menu ul:first').after(
'<ul class="level1"> \
<li> \
<a href="#" \
class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-watchlist"> \
<span>Dropdown Links</span> \
</a> \
</li> \
<ul class ="level2"> \
<li> \
<a href="/wiki/Link_1" \
class="mw-ui-icon mw-ui-icon-before"> \
<span>Link 1</span> \
</a> \
</li> \
<li> \
<a href="/wiki/Link_2" \
class="mw-ui-icon mw-ui-icon-before"> \
<span>Link 2</span> \
</a> \
</li> \
<li> \
<a href="/wiki/Link_3" \
class="mw-ui-icon mw-ui-icon-before"> \
<span>Link 3</span> \
</a> \
</li> \
</ul> \
</ul> \
<ul> \
<li> \
<a href="/wiki/Second_Link" \
class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-watchlist"> \
<span>Second Link</span> \
</a> \
</li> \
</ul>'
);
$(".menu").find(".level2").hide(); // hide level2 until level1 is clicked
$(".level1").click(function(event){
$(this).find(".level2").slideToggle(500);
}); // if level1 is clicked, dropdown level2
}
}, 100); // check every 100ms
/*mobilemenu*/
function isMobileDevice() {
const userAgent = navigator.userAgent;
const screenWidth = window.innerWidth;
// モバイルデバイスのユーザーエージェントをチェック(iPadを除外)
const isMobileUA = /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) && !/iPad/i.test(userAgent);
// 画面サイズが特定の最大幅(例えば768px)以下かどうかをチェック
const isSmallScreen = screenWidth <= 768;
// 両方の条件を満たす場合にtrueを返す
return isMobileUA && isSmallScreen;
}
window.onload = function() {
if (isMobileDevice()) {
document.getElementById('mobileMenuBar').style.display = 'block';
}
};
/*メニューバー*/
/*メニューバー*/
var lastScrollTop = 0;
var menuBar = document.getElementById("mobileMenuBar");
window.addEventListener("scroll", function(){
var currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (currentScroll > lastScrollTop){
// 下にスクロールしているとき
if (currentScroll > 100) {
menuBar.style.display = 'block';
menuBar.style.position = 'fixed'; // スクロール時には固定
menuBar.style.top = '0px';
}
} else {
// 上にスクロールしているとき
if (currentScroll <= 0) {
// ページの一番上にいるとき
menuBar.style.display = 'none';
} else if (currentScroll > 100) {
menuBar.style.display = 'block';
menuBar.style.position = 'fixed'; // スクロール時には固定
menuBar.style.top = '0px';
}
}
lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // ネガティブな値を防ぐ
}, false);
// TOPへ
$(document).ready(function() {
// FontAwesomeアイコンを使用してボタンを作成
var backToTopButton = $('<div/>', {
id: 'back-to-top',
html: '<i class="fa-solid fa-chevron-up"></i>',
click: function() {
window.scrollTo(0, 0);
}
}).appendTo('body');
// ボタンをすぐに表示
backToTopButton.show();
// 非アクティブタイマーを管理する変数
var inactivityTimer;
// スクロールやマウス動作でタイマーをリセットする関数
function resetInactivityTimer() {
backToTopButton.show(); // スクロール時にボタンを表示
clearTimeout(inactivityTimer); // タイマーをリセット
inactivityTimer = setTimeout(function() {
backToTopButton.fadeOut(); // 2秒間非アクティブ状態で非表示にする
}, 2000); // 2000ミリ秒 = 2秒
}
// スクロールとマウス動作でタイマーをリセット
$(window).scroll(resetInactivityTimer);
$(window).mousemove(resetInactivityTimer);
// 初期タイマー設定
resetInactivityTimer();
});
// HTMLコンテンツを変数に格納
var htmlContent = `
<div id="mobileMenuBar" class="fadeIn" style="display: block; position: fixed; top: 0px;">
<ul class="gNav-menu">
<li><a class="mw-selflink selflink">TOP</a></li>
<li><a href="/RightMenu">攻略メニュー</a></li>
<li><a href="/フォーラム">コミュニティ</a></li>
</ul>
</div>`;
// #content要素を選択
var contentElement = document.querySelector('#content');
// HTMLコンテンツをcontentElementに追加
contentElement.innerHTML = htmlContent;