「Widget:Custom map」の版間の差分

提供：メタファー リファンタジオ 攻略Wiki
移動先:案内、検索
編集の要約なし
編集の要約なし
1行目: 1行目:
<includeonly>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>


<script src="https://dq.h1g.jp/leaflet/leaflet.js" ></script>
<script src="https://dq.h1g.jp/img/dq10_offline/map/js/leaflet-easy-button.js"></script>
<script src="https://dq.h1g.jp/img/dq10_offline/map/js/leaflet-tag-filter-button.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<script src="https://dq.h1g.jp/leaflet/custom-leaflet-draw-locale.js" ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/> 
<link rel="stylesheet" href="https://dq.h1g.jp/img/dq10_offline/map/css/leaflet-easy-button.css" />
<link rel="stylesheet" href="https://dq.h1g.jp/img/dq10_offline/map/css/leaflet-tag-filter-button.css" />
<link rel="stylesheet" href="https://dq.h1g.jp/img/marker-icon-img/editable-popup.css" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/lightgallery.min.js"></script>
<link rel="stylesheet" href="https://dq.h1g.jp/img/lightgallery.min.css"/>
<script src="https://dq.h1g.jp/leaflet/custom-image_leaflet_map_h1g.js" ></script>


<script type="text/javascript">
<script type="text/javascript">
let map;
let map;
var drawnItems;
var drawnItems;
var drawControl;
var drawControl;
var editMode = false;
var editMode = false;
// APIベースURLを定数として定義
const API_BASE_URL = 'https://prd-h1g-elb-2067013247.ap-northeast-1.elb.amazonaws.com/metaphor_refantazio';
window.savePopupContent = savePopupContent;
window.savePopupContent = savePopupContent;


96行目: 119行目:
function checkUserGroup(group, callback) {
function checkUserGroup(group, callback) {
     $.ajax({
     $.ajax({
         url: mw.util.wikiScript('api'),
         url: API_BASE_URL + '/api.php',
         data: {
         data: {
             action: 'query',
             action: 'query',
241行目: 264行目:
     var renderedContent = '';
     var renderedContent = '';
     $.ajax({
     $.ajax({
         url: mw.util.wikiScript('api'),
         url: API_BASE_URL + '/api.php',
         data: {
         data: {
             action: 'parse',
             action: 'parse',
250行目: 273行目:
         success: function(data) {
         success: function(data) {
             renderedContent = data.parse.text['*'];
             renderedContent = data.parse.text['*'];
            // レンダリング後の画像処理
            setTimeout(function() {
                initLightGallery(renderedContent);
            }, 100);
         },
         },
         error: function() {
         error: function() {
257行目: 284行目:
     return renderedContent;
     return renderedContent;
}
}
// LightGalleryの初期化を修正
function initLightGallery(content) {
    const popupContent = $('.leaflet-popup-content');
   
    // 既存のLightGalleryインスタンスを破棄
    if (popupContent.data('lightGallery')) {
        popupContent.data('lightGallery').destroy(true);
    }
    // 既存のlg-containerを削除
    $('.lg-container').remove();
   
    popupContent.find('img').each(function() {
        const img = $(this);
        // gallery-itemクラスを持つdivで既に囲まれていない場合のみ処理
        if (!img.parent().hasClass('gallery-item')) {
            let fullSizeUrl = convertToFullSize(img.attr('src'));
            img.wrap('<div class="gallery-item" data-src="' + fullSizeUrl + '"></div>');
        }
    });
    // LightGalleryを初期化（ナビゲーション矢印を非表示に）
    if (!popupContent.data('lightGallery')) {
        lightGallery(popupContent[0], {
            selector: '.gallery-item',
            plugins: [],
            speed: 500,
            download: false,
            counter: false,
            enableDrag: false,
            enableTouch: false,
            hideControlOnEnd: true,
            controls: false,
            prevHtml: '',
            nextHtml: '',
            backdropDuration: 300,  // 背景のフェード時間
        });
    }
}
// ポップアップが閉じられたときの処理を追加
map.on('popupclose', function(e) {
    const popupContent = $(e.popup.getContent());
    if (popupContent.data('lightGallery')) {
        popupContent.data('lightGallery').destroy(true);
    }
});
// MediaWikiの画像URLを最大サイズに変換する関数
function convertToFullSize(url) {
    // MediaWikiのサムネイルURLをパースして最大サイズのURLに変換
    if (url.includes('/thumb/')) {
        // /thumb/を除去し、最後の/以降を削除して元のファイル名に戻す
        return url.replace('/thumb/', '/')
                .replace(/\/\d+px-[^/]+$/, '');
    }
    return url;
}
// ポップアップが開かれたときのイベントを追加
map.on('popupopen', function(e) {
    setTimeout(function() {
        initLightGallery(e.popup.getContent());
    }, 100);
});
// マップのクリーンアップ処理も追加
map.on('unload', function() {
    $('.lg-container').remove();
    $('.leaflet-popup-content').each(function() {
        if ($(this).data('lightGallery')) {
            $(this).data('lightGallery').destroy(true);
        }
    });
});
/// スタイルを更新
const styles = `
<style>
.gallery-item {
    cursor: pointer;
    display: inline-block;
}
.gallery-item img {
    max-width: 200px;
    height: auto;
    transition: transform 0.3s ease;
}
.gallery-item:hover img {
    transform: scale(1.05);
}
.lg-img-wrap {
    text-align: center;
}
.lg-img-wrap img {
    max-height: 90vh !important;
    max-width: 90vw !important;
    object-fit: contain;
}
/* ナビゲーション矢印を非表示 */
.lg-next, .lg-prev {
    display: none !important;
}
</style>
`;




276行目: 414行目:
         layer.options.popupData = {title: title, content: text, iconType: iconType};
         layer.options.popupData = {title: title, content: text, iconType: iconType};
          
          
         if (layer instanceof L.Marker && iconType) {
         // ポップアップを更新した後にLightGalleryを再初期化
             var icon = iconDefinitions[iconType] || iconDefinitions.icon1;
        setTimeout(function() {
            layer.setIcon(icon);
             initLightGallery(savedContent);
         }
         }, 100);
          
          
         layer.closePopup();
         layer.closePopup();
         layer.openPopup();
         layer.openPopup();
    } else {
        console.error('Layer not found');
     }
     }
}
}
312行目: 448行目:
         title: 'マップを編集する',
         title: 'マップを編集する',
         onClick: function(btn, map) {
         onClick: function(btn, map) {
//           checkUserGroup('map-edit-member', function(isInGroup) {
//           checkUserGroup('map-edit-member', function(isInGroup) {
            checkUserGroup('sysop', function(isInGroup) {
          checkUserGroup('sysop', function(isInGroup) {
                if (isInGroup) {
//          checkUserGroup('internal-staff', function(isInGroup) {
            if (isInGroup) {
                     editMode = true;
                     editMode = true;
                     map.addControl(drawControl);
                     map.addControl(drawControl);
321行目: 458行目:
                     saveButton.addTo(map); // saveButtonを表示する
                     saveButton.addTo(map); // saveButtonを表示する
                 } else {
                 } else {
                    alert('あなたには編集権限がありません。\n攻略に参加することでマップが編集できるようになります。');
//                    alert('あなたには編集権限がありません。\n攻略に参加することでマップが編集できるようになります。');
                    alert('あなたには編集権限がありません。');
                 }
                 }
             });
             });
375行目: 513行目:
     var host = window.location.origin;
     var host = window.location.origin;
     var geojsonPage = "<!--{$geojson}-->";
     var geojsonPage = "<!--{$geojson}-->";
     var url = host + "/zelda_eow/index.php/" + geojsonPage;
     var url = API_BASE_URL + '/index.php/' + geojsonPage;


     $.ajax({
     $.ajax({
548行目: 686行目:
     $.ajax({
     $.ajax({
         type: "POST",
         type: "POST",
         url: 'https://prd-h1g-elb-2067013247.ap-northeast-1.elb.amazonaws.com/api.php',
         url: API_BASE_URL + '/api.php',
         data: {
         data: {
             action: 'edit',
             action: 'edit',

2024年11月7日 (木) 14:46時点における版

「https://www.h1g.jp/metaphor_refantazio/index.php?title=Widget:Custom_map&oldid=4388」から取得