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

提供：ゼルダの伝説 知恵のかりもの 攻略Wiki
移動先:案内、検索
編集の要約なし
編集の要約なし
13行目: 13行目:
<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/dq10_offline/map/css/leaflet-tag-filter-button.css" />
<link rel="stylesheet" href="https://dq.h1g.jp/img/marker-icon-img/editable-popup.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/zelda_eow';
window.savePopupContent = savePopupContent;
window.savePopupContent = savePopupContent;


109行目: 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',
254行目: 264行目:
     var renderedContent = '';
     var renderedContent = '';
     $.ajax({
     $.ajax({
         url: mw.util.wikiScript('api'),
         url: API_BASE_URL + '/api.php',
         data: {
         data: {
             action: 'parse',
             action: 'parse',
263行目: 273行目:
         success: function(data) {
         success: function(data) {
             renderedContent = data.parse.text['*'];
             renderedContent = data.parse.text['*'];
            // レンダリング後の画像処理
            setTimeout(function() {
                initLightGallery(renderedContent);
            }, 100);
         },
         },
         error: function() {
         error: function() {
270行目: 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>
`;




289行目: 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');
     }
     }
}
}
390行目: 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({
560行目: 683行目:


function saveToWikiPage(geoJSONData) {
function saveToWikiPage(geoJSONData) {
    const csrfToken = mw.user.tokens.get('csrfToken'); // トークンを取得
    console.log('Using CSRF Token:', csrfToken); // トークンをログ出力して確認
     var formattedData = geoJSONData;
     var formattedData = geoJSONData;
     $.ajax({
     $.ajax({
         type: "POST",
         type: "POST",
         url: 'https://prd-h1g-elb-2067013247.ap-northeast-1.elb.amazonaws.com/zelda_eow/api.php',
         url: API_BASE_URL + '/api.php',
         data: {
         data: {
             action: 'edit',
             action: 'edit',
             title: '<!--{$geojson}-->',
             title: '<!--{$geojson}-->',
             text: formattedData,
             text: formattedData,
             token: mw.user.tokens.get('csrfToken'),
             token: csrfToken, // トークンをここで利用
             format: 'json'
             format: 'json'
         },
         },
         success: function(response) {
         success: function(response) {
//            console.log("Save response:", response);
             if (response.edit && response.edit.result === 'Success') {
             if (response.edit && response.edit.result === 'Success') {
                 alert('データは正常に保存されました');
                 alert('データは正常に保存されました');
578行目: 703行目:
                 drawControl.remove();
                 drawControl.remove();
                 editButton.state('enable-edit');
                 editButton.state('enable-edit');
                 saveButton.remove(); // saveButtonを非表示にする
                 saveButton.remove();
               
 
                 setTimeout(function() {
                 setTimeout(function() {
                     loadPinsFromWikiPage();
                     loadPinsFromWikiPage();
589行目: 714行目:
         error: function(xhr, status, error) {
         error: function(xhr, status, error) {
             console.error("Save error:", error);
             console.error("Save error:", error);
//            console.log("XHR status:", status);
//            console.log("XHR response:", xhr.responseText);
             alert('Error saving data: ' + error);
             alert('Error saving data: ' + error);
         }
         }
     });
     });
}
}
map.on(L.Draw.Event.CREATED, function (event) {
map.on(L.Draw.Event.CREATED, function (event) {
     var layer = event.layer;
     var layer = event.layer;
612行目: 736行目:
         map.invalidateSize();
         map.invalidateSize();
         loadPinsFromWikiPage();
         loadPinsFromWikiPage();
     }, 500);  // 少し長めの遅延を設定
 
        // CSRFトークンの確認
        console.log('CSRF Token:', mw.user.tokens.get('csrfToken'));
     }, 500);  // 遅延を設定
 
    // ここでトークンを取得して保存することも可能
    const csrfToken = mw.user.tokens.get('csrfToken');
    console.log('Fetched CSRF Token:', csrfToken);
});
});
</script>
</script>


</includeonly>
</includeonly>

2024年11月9日 (土) 00:36時点における版

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