User:Tmv/common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.
// <source lang="javascript">
// 完成状況 : 編集段階
// 当スクリプトは編集段階です。使用してもエラーが出る可能性が高く、未完成です。
/******************************************************************************/
// ja>>transportEditor
//   >>交通の記事で視覚的にいくつかの編集を行うツール
//   >>
//   >>作者    : Tmv
//   >>URL    : https://github.com/sousakak/userScriptsForWikivoyage/blob/master/transportEditor.js
//   >>
//   >>使用方法
//   >>[[Special:MyPage/common.js]]に以下のコードを追加 : 
//   >>mw.loader.load('//ja.wikivoyage.org/w/index.php?title=User:Tmv/custom/transportEditor.js&action=raw&ctype=text/javascript');
/******************************************************************************/
mw.log("loaded test.js");

mw.loader.using([ 'vue', '@wikimedia/codex', './icons.json' ]).then( ( require ) => {
    const i18n = {
        translations : {
            dialogTitleEdit : "駅一覧を編集",
            dialogTitleAdd : "駅一覧を追加",
            dialogButtonClose : "閉じる",
            dialogButtonPrimary : "挿入",
            dialogButtonDefault : "キャンセル",
            labelButtonEdit : "編集",
            labelButtonAdd : "追加",
            tooltipButtonAdd : "駅一覧を追加",
        }
    };

    const { defineComponent, ref } = require( 'vue' );
	const { CdxDialog, CdxButton, CdxIcon } = require( '@wikimedia/codex' );
    const { cdxIconEdit } = require( './icons.json' );
    mw.log("loaded codex");

    var openDialog = (mode) => {
        const dialogTitle = (mode = 'add') ? i18n_TE.translations.dialogTitleAdd : i18n_TE.translations.dialogTitleEdit;

        const dialog = {
            template: `
                <cdx-dialog
                    v-model:open="open"
                    title="` + dialogTitle + `"
                    close-button-label="` + i18n_TE.translations.dialogButtonClose + `"
                    :primary-action="primaryAction"
                    :default-action="defaultAction"
                    @default="open = false"
                    @primary="insertStalist"
                    class="voy-stalist-dialog"
                >
                    ここに表が入る
                    <br />
                    UI of stalist table is here
                </cdx-dialog>
            `,
            components: {
                CdxDialog
            },
            setup() {
                const open = ref( true );
                const primaryAction = {
                    label: i18n_TE.translations.dialogButtonPrimary,
                    actionType: 'progressive',
                    disabled: true
                };
                const defaultAction = {
                    label: i18n_TE.translations.dialogButtonDefault
                };

                const insertStalist = () => {
                    //
                };

                return {
                    open,
                    primaryAction,
                    defaultAction,
                    insertStalist
                };
            }
        };

        Vue.createMwApp( dialog ).mount( 'body' );
    };
    
    mw.log("defined dialog");

    if ( $(".voy-stalist").length() ) {
    	mw.log("voy-stalist found");
        const editStalist = {
            template: `
                <cdx-button
                    weight="quiet"
                    aria-label="` + i18n_TE.translations.labelButtonEdit + `"
                    class="voy-stalist-edit"
                    @click="onClick"
                >
                    <cdx-icon
                        :icon="cdxIconEdit"
                    >
                    </cdx-icon>
                </cdx-button>
            `,
            components: {
                CdxButton,
                CdxIcon
            },
            setup() {
                const onClick = () => {
                    openDialog('edit');
                };

                return {
                    cdxIconEdit,
                    onClick
                };
            }
        };
        Vue.createMwApp( editStalist ).mount( '.voy-stalist-title' );
    } else if ( $(".mw-headline#乗る").length() ) {
    	mw.log("headline found");
        const addStalist = {
            template: `
                <span class="mw-editsection-bracket">[</span>
                <a href="javascript:" title="` + i18n_TE.translations.tooltipButtonAdd + `" class="voy-stalist-add" onclick="onClick()">` + i18n_TE.translations.labelButtonAdd + `</a>
                <span class="mw-editsection-bracket">]</span>
            `,
            components: {},
            setup() {
                const onClick = () => {
                    openDialog('add');
                };

                return {
                    onClick
                };
            }
        };
        Vue.createMwApp( addStalist ).mount( '.mw-editsection' );
    }
});