Script > editButtons.js

「Script/editButtons.js」の編集履歴（バックアップ）一覧はこちら

Script/editButtons.js - (2021/03/03 (水) 16:53:30) の１つ前との変更点

追加された行は緑色になります。

削除された行は赤色になります。

#js(){{
<style type="text/css">
@font-face {
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: 900;
    src: url('https://img.atwikiimg.com/www31.atwiki.jp/touhoukashi/attach/2972/52/fa-solid-900.woff2') format('woff2'),
        url('https://img.atwikiimg.com/www31.atwiki.jp/touhoukashi/attach/2972/51/fa-solid-900.woff') format('woff'),
        url('https://img.atwikiimg.com/www31.atwiki.jp/touhoukashi/attach/2972/53/fa-solid-900.ttf') format('truetype');
}
#ab-menu {
    position: fixed;
    right: 50px;
    bottom: 50px;
}
#ab-menu a {
    display: block;
    height: 40px;
    width: 40px;
    color: unset;
}
#ab-menu ul {
    list-style: none;
    padding: 0;
}
#ab-menu li {
    cursor: pointer;
}
#ab-menu form {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .25s,
                visibility .25s ease .25s;
}
#ab-menu form input {
    width: 188.5px;
}
#ab-menu li > .fas,
#ab-menu li a > .fas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ab-error__text .fas {
    vertical-align: text-top;
    font-size: 1.25em;
    color: #ff6347;
}
#ab-create {
    margin-bottom: 1em;
}
#ab-create #ab-create__newPage {
    position: fixed;
    top: -1000px;
    left: -1000px;
}
#ab-edit {
    float: right;
}
#ab-create li,
#ab-edit li {
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    border: 0;
    border-radius: 100%;
    background-color: #fbf2f6;
    transition: background-color .3s;
}
#ab-menu li:hover {
    background-color: #f2e1e5;
}
.ab-active__new #ab-create__new:hover {
    background-color: #696969;
}
#ab-menu
#ab-create__new,
#ab-edit__edit {
    height: 45px;
    width: 45px;
}
#ab-create li:not(#ab-create__new) {
    visibility: hidden;
    margin: 2.5px;
    height: 40px;
    width: 40px;
    transition: all .1s ease-in-out .1s,
                height .3s ease-in-out,
                width .3s ease-in-out,
                background-color .3s;
}
#ab-create li:not(:last-child) {
    margin-bottom: .5em;
}
li#ab-create__new {
    transition: all .2s ease-in-out;
}
li#ab-create__album,
li#ab-create__circle,
li#ab-create__music {
    position: absolute;
    top: 0;
    right: 0;
    transition: top .2s ease-in-out 0s, right .2s ease-in-out 0s;
}
#ab-menu .ab-menu__tooltip {
    position: absolute;
    padding: 3px;
    white-space: nowrap;
    text-align: center;
    color: #ffffff;
    font-size: 90%;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    zoom: 99%;  /* 文字がぼやけるのを防止 */
}
.ab-menu__tooltip {
    bottom: 120%;
    right: 50%;
    transform: translateX(50%);
    border: 1px solid rgba(0, 0, 0, .7);
    border-radius: 3px;
    background-color: rgba(0, 0, 0, .6);
    opacity: 0;
    transition: opacity .3s;
}
.ab-error__text {
    top: -4px;
    right: 107.5%;
    border: 3px solid #dc3545;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, .6);
}
#ab-create > *:hover .ab-menu__tooltip,
#ab-edit > *:hover .ab-menu__tooltip {
    opacity: 1;
    transition-delay: .5s;
}
#ab-create__new .ab-menu__tooltip {
    visibility: visible;
    transition: .2s;
}
.ab-active__new#ab-create li:not(#ab-create__new) {
    visibility: visible;
}
.ab-active__new li:not(#ab-create__new) {
    transition: top .2s ease-in-out 0s, right .2s ease-in-out 0s;
}
.ab-active__new li#ab-create__album {
    top: -65px;
}
.ab-active__new li#ab-create__circle {
    top: -45px;
    right: 45px;
}
.ab-active__new li#ab-create__music {
    right: 65px;
}
.ab-active__new #ab-create__new {
    background-color: #808080;
    color: #ffffff;
    transform: rotate(45deg);
}
.ab-active__new #ab-create__new .ab-menu__tooltip {
    visibility: hidden;
    transition: .03s;
}
.ab-active__new li:not(#ab-create__new) {
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
#ab-menu #ab-create .ab-active__newActions {
    height: 30px;
    width: 200px;
    border-radius: 10px;
    transition: all .25s ease .2s;
}
li > .fas {
    opacity: 1;
    transition: opacity .25s ease .25s;
}
#ab-create .ab-active__newActions > .fas {
    opacity: 0;
    transition: opacity .25s;
}
#ab-create .ab-active__newActions form {
    opacity: 1;
    visibility: visible;
    transition: all .25s ease .25s;
}
#ab-create #ab-create__album.ab-active__newActions {
    top: -85px;
}
#ab-create .ab-menu__small {
    font-size: 80%;
}
</style>
<script type="text/javascript">
$( function() {
    'use strict';

    const $container = $( '#container' );
    const l = location;
    const pageid = l.href.replace( /^.+?(\d+\.html)$/, '$1' );
    let $menu, $menuNew, $menuNewActions, $input;

    const msg = {
        create: {
            new: 'ページを作成',
            newDesc: '(Ctrl+クリックで通常作成)',
            circle: 'サークルページを作成',
            album: 'アルバムページを作成',
            music: '曲ページを作成'
        },
        edit: 'このページを編集',
        url: {
            new: '/touhoukashi/new',
            edit: '/touhoukashi/pedit/' + pageid,
        },
        placeholder: {
            new: 'ページ名を入力',
            circle: 'サークル名を入力',
            album: 'アルバム名を入力',
            music: '曲名を入力'
        },
        error: {
            blank: 'ページ名を入力してください',
            unmatch: '以下の形式で入力してください<br>"(半角数字2字)(半角空白1字)(曲名)"<br>例："01 Music"'
        }
    };

    const cls = {
        activeNew: 'ab-active__new',
        activeNewActions: 'ab-active__newActions',
        error: 'ab-error',
        errorText: 'ab-error__text'
    };

    const template = {
        circle: [ 1250, 'テンプレ＞サークル' ],
        album: [ 1249, 'テンプレ＞アルバム' ],
        music: [ 1248, 'テンプレ＞曲' ]
    };

    const faCss = '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/solid.css" integrity="sha384-rdyFrfAIC05c5ph7BKz3l5NG5yEottvO/DQ0dCrwD8gzeQDjYBHNr1ucUpQuljos" crossorigin="anonymous">'
    + '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/fontawesome.css" integrity="sha384-u5J7JghGz0qUrmEsWzBQkfvc8nK3fUT7DCaQzNQ+q4oEXhGSx+P2OqjWsfIRB8QT" crossorigin="anonymous">';

    let html = '<div id="ab-menu">'
        + '<ul id="ab-create">'
        + '<li id="ab-create__album">'
        + '<i class="fas fa-fw fa-lg fa-compact-disc"></i>'
        + '<span class="ab-menu__tooltip">' + msg.create.album + '</span>'
        + '<form method="POST">'
        + '<input type="text" name="album" placeholder="' + msg.placeholder.album + '">'
        + '</form>'
        + '</li>'
        + '<li id="ab-create__circle">'
        + '<i class="fas fa-fw fa-lg fa-users"></i>'
        + '<span class="ab-menu__tooltip">' + msg.create.circle + '</span>'
        + '<form method="POST">'
        + '<input type="text" name="circle" placeholder="' + msg.placeholder.circle + '">'
        + '</form>'
        + '</li>'
        + '<li id="ab-create__music">'
        + '<i class="fas fa-fw fa-lg fa-music"></i>'
        + '<span class="ab-menu__tooltip">' + msg.create.music + '</span>'
        + '<form method="POST">'
        + '<input type="text" name="music" placeholder="' + msg.placeholder.music + '">'
        + '</form>'
        + '</li>'
        + '<li id="ab-create__new">'
        + '<form target="_blank" name="new" action="' + msg.url.new + '" method="POST">'
        + '<input id="ab-create__newPage" type="submit"></input>'
        + '</form>'
        + '<i class="fas fa-fw fa-lg fa-plus"></i>'
        + '<span class="ab-menu__tooltip">' + msg.create.new + '<br><span class="ab-menu__small">' + msg.create.newDesc + '</span></span>'
        + '<form method="POST">'
        + '<input type="text" name="new" placeholder="' + msg.placeholder.new + '">'
        + '</form>'
        + '</li>'
        + '</ul>'
        + '<ul id="ab-edit">'
        + '<li id="ab-edit__edit">'
        + '<a href="' + msg.url.edit + '">'
        + '<i class="fas fa-fw fa-lg fa-pen"></i>'
        + '<span class="ab-menu__tooltip">' + msg.edit + '</span>'
        + '</a>'
        + '</li>'
        + '</ul>'
        + '</div>';

    function genNewPageLink( page, fromPagename ) {
        page = encodeURIComponent(page);

        return `/touhoukashi/?cmd=pedit&page=${page}&frompagename=${fromPagename}`;
    }

    $( 'head' ).find( 'link' ).first().before( faCss );
    $container.append( html );

    $menu = $( '#ab-create' );
    $menuNew = $( '#ab-create__new' );
    $menuNewActions = $menu.find( 'li' ).not( $menuNew );
    $input = $menu.find( 'input[type="text"]' );

    // ページ作成ボタン
    $menuNew.on( 'click', function( e ) {
        const $this = $( this );

        if ( e.target.nodeName === 'INPUT' ) return;
        // Ctrl + クリックで通常新規作成
        if ( e.ctrlKey ) {
            const $activeNewActions = $menu.find( '.ab-active__newActions' );
            if ( $menu.hasClass( cls.activeNew ) ) {
                $menu.toggleClass( cls.activeNew );
            }
            // 	特定ページ作成ボタンで入力欄展開中にCtrl + クリック時、その入力欄を閉じこちらを開く
            if ( $activeNewActions.not( $this ).length ) {
                $activeNewActions.toggleClass( cls.activeNewActions );
            }
            $this.toggleClass( cls.activeNewActions );
            // $( '#ab-create__newPage' ).click();
            return;
        }
        if ( $this.hasClass( cls.activeNewActions ) ) {
            $this.toggleClass( cls.activeNewActions );
            return;
        }
        // 入力欄展開中に閉じるボタンをクリックした際、入力欄のみを閉じる
        if ( $( '.ab-active__new' ).length && $( '.ab-active__newActions' ).length ) {
            $( '.ab-active__newActions' ).toggleClass( cls.activeNewActions );
            return;
        }
        $menu.toggleClass( cls.activeNew );
    } );

    // 特定ページ作成ボタン
    $menuNewActions.on( 'click', function( e ) {
        if ( e.target.nodeName === 'INPUT' ) return;
        $( this ).toggleClass( cls.activeNewActions );
    } );

    // 入力欄展開時にフォーカス
    $menu.find( 'li' ).on( 'click', function() {
        const $input = $( this ).find( 'input' );
        if ( $( this ).hasClass( cls.activeNewActions ) ) {
            // visibility 待機のため遅延後実行
            $input.delay( 300 ).queue( function() {
                $( this ).focus().dequeue();
            } );
        }
    } );

    // 入力送信時のチェックおよび作成ページへの移行
    $input.on( 'keydown', function( e ) {
        function genErrorHtml( text, isForHtml ) {
            return ( isForHtml )
                ? '<span class="ab-error__text"><i class="fas fa-exclamation-circle"></i> ' + text + '</span>'
                : '<i class="fas fa-exclamation-circle"></i> ' + text;
        }

        // Esc キー押下で入力欄を閉じる
        if ( e.keyCode === 27 ) {
            $( this ).closest( 'li' ).toggleClass( cls.activeNewActions ); // TODO: なぜtoggle？removeClassにできないか要調査
        }

        // Enter 押下時にエラーチェック・ページ移行
        if ( e.keyCode === 13 ) {
            const $this = $( this );
            const $parent = $this.parent();
            const $thisErrorText = $this.next( '.ab-error__text' );
            const $newLinkForm = $menu.find( 'form[name="new"]' );
            const thisVal = $this.val();
            const inputName = $this.attr( 'name' );

            if ( !thisVal || /^\s+$/.test( thisVal ) ) {
                // 空欄・空白のみ
                if ( $this.hasClass( cls.error ) ) {
                    $thisErrorText.html( genErrorHtml( msg.error.blank ) );
                } else {
                    $this.addClass( cls.error );
                    $parent.append( genErrorHtml( msg.error.blank, true ) );
                }
            } else if ( !/^\d{2} \S+/.test( thisVal ) && inputName === 'music' ) {
                // 曲ページ名の誤形式
                if ( $this.hasClass( cls.error ) ) {
                    $thisErrorText.html( genErrorHtml( msg.error.unmatch ) );
                } else {
                    $this.addClass( cls.error );
                    $parent.append( genErrorHtml( msg.error.unmatch, true ) );
                }
            } else if ( $this.closest( 'li' ).attr( 'id' ) === 'ab-create__new' ) {
                // 新規作成のページ移行
                const link = '/touhoukashi/?cmd=pedit&page=' + thisVal;
                $newLinkForm.attr( 'action', link ).find( 'input' ).click();
            } else {
                // 特定ページの移行
                const link = genNewPageLink( thisVal, template[ inputName ][ 1 ] );
                $newLinkForm.attr( 'action', link ).find( 'input' ).click();
            }
            return false;
        }
    } );

    // 未作成ページに来た際、そのページ名を自動補完
    if ( /^\?page=.+/.test( l.search ) ) {
        const page = decodeURI( l.search.split( '=' )[ 1 ] );
        if ( /^\d{2} .+/.test( page ) ) {
            $input.filter( '[name="music"]' ).val( page );
        } else {
            $input.filter( '[name!="music"]' ).val( page );
        }
    }
} );
</script>
}}

#js(){{
<style type="text/css">
@font-face {
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: 900;
    src: url('https://img.atwikiimg.com/www31.atwiki.jp/touhoukashi/attach/2972/52/fa-solid-900.woff2') format('woff2'),
        url('https://img.atwikiimg.com/www31.atwiki.jp/touhoukashi/attach/2972/51/fa-solid-900.woff') format('woff'),
        url('https://img.atwikiimg.com/www31.atwiki.jp/touhoukashi/attach/2972/53/fa-solid-900.ttf') format('truetype');
}
#ab-menu {
    position: fixed;
    right: 50px;
    bottom: 50px;
}
#ab-menu a {
    display: block;
    height: 40px;
    width: 40px;
    color: unset;
}
#ab-menu ul {
    list-style: none;
    padding: 0;
}
#ab-menu li {
    cursor: pointer;
}
#ab-menu form {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .25s,
                visibility .25s ease .25s;
}
#ab-menu form input {
    width: 188.5px;
}
#ab-menu li > .fas,
#ab-menu li a > .fas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ab-error__text .fas {
    vertical-align: text-top;
    font-size: 1.25em;
    color: #ff6347;
}
#ab-create {
    margin-bottom: 1em;
}
#ab-create #ab-create__newPage {
    position: fixed;
    top: -1000px;
    left: -1000px;
}
#ab-edit {
    float: right;
}
#ab-create li,
#ab-edit li {
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    border: 0;
    border-radius: 100%;
    background-color: #fbf2f6;
    transition: background-color .3s;
}
#ab-menu li:hover {
    background-color: #f2e1e5;
}
.ab-active__new #ab-create__new:hover {
    background-color: #696969;
}
#ab-menu
#ab-create__new,
#ab-edit__edit {
    height: 45px;
    width: 45px;
}
#ab-create li:not(#ab-create__new) {
    visibility: hidden;
    margin: 2.5px;
    height: 40px;
    width: 40px;
    transition: all .1s ease-in-out .1s,
                height .3s ease-in-out,
                width .3s ease-in-out,
                background-color .3s;
}
#ab-create li:not(:last-child) {
    margin-bottom: .5em;
}
li#ab-create__new {
    transition: all .2s ease-in-out;
}
li#ab-create__album,
li#ab-create__circle,
li#ab-create__music {
    position: absolute;
    top: 0;
    right: 0;
    transition: top .2s ease-in-out 0s, right .2s ease-in-out 0s;
}
#ab-menu .ab-menu__tooltip,
#ab-menu .ab-error__text {
    position: absolute;
    padding: 3px;
    white-space: nowrap;
    text-align: center;
    color: #ffffff;
    font-size: 90%;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    zoom: 99%;  /* 文字がぼやけるのを防止 */
}
.ab-menu__tooltip {
    bottom: 120%;
    right: 50%;
    transform: translateX(50%);
    border: 1px solid rgba(0, 0, 0, .7);
    border-radius: 3px;
    background-color: rgba(0, 0, 0, .6);
    opacity: 0;
    transition: opacity .3s;
}
.ab-error__text {
    top: -4px;
    right: 107.5%;
    border: 3px solid #dc3545;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, .6);
}
#ab-create > *:hover .ab-menu__tooltip,
#ab-edit > *:hover .ab-menu__tooltip {
    opacity: 1;
    transition-delay: .5s;
}
#ab-create__new .ab-menu__tooltip {
    visibility: visible;
    transition: .2s;
}
.ab-active__new#ab-create li:not(#ab-create__new) {
    visibility: visible;
}
.ab-active__new li:not(#ab-create__new) {
    transition: top .2s ease-in-out 0s, right .2s ease-in-out 0s;
}
.ab-active__new li#ab-create__album {
    top: -65px;
}
.ab-active__new li#ab-create__circle {
    top: -45px;
    right: 45px;
}
.ab-active__new li#ab-create__music {
    right: 65px;
}
.ab-active__new #ab-create__new {
    background-color: #808080;
    color: #ffffff;
    transform: rotate(45deg);
}
.ab-active__new #ab-create__new .ab-menu__tooltip {
    visibility: hidden;
    transition: .03s;
}
.ab-active__new li:not(#ab-create__new) {
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
#ab-menu #ab-create .ab-active__newActions {
    height: 30px;
    width: 200px;
    border-radius: 10px;
    transition: all .25s ease .2s;
}
li > .fas {
    opacity: 1;
    transition: opacity .25s ease .25s;
}
#ab-create .ab-active__newActions > .fas {
    opacity: 0;
    transition: opacity .25s;
}
#ab-create .ab-active__newActions form {
    opacity: 1;
    visibility: visible;
    transition: all .25s ease .25s;
}
#ab-create #ab-create__album.ab-active__newActions {
    top: -85px;
}
#ab-create .ab-menu__small {
    font-size: 80%;
}
</style>
<script type="text/javascript">
$( function() {
    'use strict';

    const $container = $( '#container' );
    const l = location;
    const pageid = l.href.replace( /^.+?(\d+\.html)$/, '$1' );
    let $menu, $menuNew, $menuNewActions, $input;

    const msg = {
        create: {
            new: 'ページを作成',
            newDesc: '(Ctrl+クリックで通常作成)',
            circle: 'サークルページを作成',
            album: 'アルバムページを作成',
            music: '曲ページを作成'
        },
        edit: 'このページを編集',
        url: {
            new: '/touhoukashi/new',
            edit: '/touhoukashi/pedit/' + pageid,
        },
        placeholder: {
            new: 'ページ名を入力',
            circle: 'サークル名を入力',
            album: 'アルバム名を入力',
            music: '曲名を入力'
        },
        error: {
            blank: 'ページ名を入力してください',
            unmatch: '以下の形式で入力してください<br>"(半角数字2字)(半角空白1字)(曲名)"<br>例："01 Music"'
        }
    };

    const cls = {
        activeNew: 'ab-active__new',
        activeNewActions: 'ab-active__newActions',
        error: 'ab-error',
        errorText: 'ab-error__text'
    };

    const template = {
        circle: [ 1250, 'テンプレ＞サークル' ],
        album: [ 1249, 'テンプレ＞アルバム' ],
        music: [ 1248, 'テンプレ＞曲' ]
    };

    const faCss = '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/solid.css" integrity="sha384-rdyFrfAIC05c5ph7BKz3l5NG5yEottvO/DQ0dCrwD8gzeQDjYBHNr1ucUpQuljos" crossorigin="anonymous">'
    + '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/fontawesome.css" integrity="sha384-u5J7JghGz0qUrmEsWzBQkfvc8nK3fUT7DCaQzNQ+q4oEXhGSx+P2OqjWsfIRB8QT" crossorigin="anonymous">';

    let html = '<div id="ab-menu">'
        + '<ul id="ab-create">'
        + '<li id="ab-create__album">'
        + '<i class="fas fa-fw fa-lg fa-compact-disc"></i>'
        + '<span class="ab-menu__tooltip">' + msg.create.album + '</span>'
        + '<form method="POST">'
        + '<input type="text" name="album" placeholder="' + msg.placeholder.album + '">'
        + '</form>'
        + '</li>'
        + '<li id="ab-create__circle">'
        + '<i class="fas fa-fw fa-lg fa-users"></i>'
        + '<span class="ab-menu__tooltip">' + msg.create.circle + '</span>'
        + '<form method="POST">'
        + '<input type="text" name="circle" placeholder="' + msg.placeholder.circle + '">'
        + '</form>'
        + '</li>'
        + '<li id="ab-create__music">'
        + '<i class="fas fa-fw fa-lg fa-music"></i>'
        + '<span class="ab-menu__tooltip">' + msg.create.music + '</span>'
        + '<form method="POST">'
        + '<input type="text" name="music" placeholder="' + msg.placeholder.music + '">'
        + '</form>'
        + '</li>'
        + '<li id="ab-create__new">'
        + '<form target="_blank" name="new" action="' + msg.url.new + '" method="POST">'
        + '<input id="ab-create__newPage" type="submit"></input>'
        + '</form>'
        + '<i class="fas fa-fw fa-lg fa-plus"></i>'
        + '<span class="ab-menu__tooltip">' + msg.create.new + '<br><span class="ab-menu__small">' + msg.create.newDesc + '</span></span>'
        + '<form method="POST">'
        + '<input type="text" name="new" placeholder="' + msg.placeholder.new + '">'
        + '</form>'
        + '</li>'
        + '</ul>'
        + '<ul id="ab-edit">'
        + '<li id="ab-edit__edit">'
        + '<a href="' + msg.url.edit + '">'
        + '<i class="fas fa-fw fa-lg fa-pen"></i>'
        + '<span class="ab-menu__tooltip">' + msg.edit + '</span>'
        + '</a>'
        + '</li>'
        + '</ul>'
        + '</div>';

    function genNewPageLink( page, fromPagename ) {
        page = encodeURIComponent(page);

        return `/touhoukashi/?cmd=pedit&page=${page}&frompagename=${fromPagename}`;
    }

    $( 'head' ).find( 'link' ).first().before( faCss );
    $container.append( html );

    $menu = $( '#ab-create' );
    $menuNew = $( '#ab-create__new' );
    $menuNewActions = $menu.find( 'li' ).not( $menuNew );
    $input = $menu.find( 'input[type="text"]' );

    // ページ作成ボタン
    $menuNew.on( 'click', function( e ) {
        const $this = $( this );

        if ( e.target.nodeName === 'INPUT' ) return;
        // Ctrl + クリックで通常新規作成
        if ( e.ctrlKey ) {
            const $activeNewActions = $menu.find( '.ab-active__newActions' );
            if ( $menu.hasClass( cls.activeNew ) ) {
                $menu.toggleClass( cls.activeNew );
            }
            // 	特定ページ作成ボタンで入力欄展開中にCtrl + クリック時、その入力欄を閉じこちらを開く
            if ( $activeNewActions.not( $this ).length ) {
                $activeNewActions.toggleClass( cls.activeNewActions );
            }
            $this.toggleClass( cls.activeNewActions );
            // $( '#ab-create__newPage' ).click();
            return;
        }
        if ( $this.hasClass( cls.activeNewActions ) ) {
            $this.toggleClass( cls.activeNewActions );
            return;
        }
        // 入力欄展開中に閉じるボタンをクリックした際、入力欄のみを閉じる
        if ( $( '.ab-active__new' ).length && $( '.ab-active__newActions' ).length ) {
            $( '.ab-active__newActions' ).toggleClass( cls.activeNewActions );
            return;
        }
        $menu.toggleClass( cls.activeNew );
    } );

    // 特定ページ作成ボタン
    $menuNewActions.on( 'click', function( e ) {
        if ( e.target.nodeName === 'INPUT' ) return;
        $( this ).toggleClass( cls.activeNewActions );
    } );

    // 入力欄展開時にフォーカス
    $menu.find( 'li' ).on( 'click', function() {
        const $input = $( this ).find( 'input' );
        if ( $( this ).hasClass( cls.activeNewActions ) ) {
            // visibility 待機のため遅延後実行
            $input.delay( 300 ).queue( function() {
                $( this ).focus().dequeue();
            } );
        }
    } );

    // 入力送信時のチェックおよび作成ページへの移行
    $input.on( 'keydown', function( e ) {
        function genErrorHtml( text, isForHtml ) {
            return ( isForHtml )
                ? '<span class="ab-error__text"><i class="fas fa-exclamation-circle"></i> ' + text + '</span>'
                : '<i class="fas fa-exclamation-circle"></i> ' + text;
        }

        // Esc キー押下で入力欄を閉じる
        if ( e.keyCode === 27 ) {
            $( this ).closest( 'li' ).toggleClass( cls.activeNewActions ); // TODO: なぜtoggle？removeClassにできないか要調査
        }

        // Enter 押下時にエラーチェック・ページ移行
        if ( e.keyCode === 13 ) {
            const $this = $( this );
            const $parent = $this.parent();
            const $thisErrorText = $this.next( '.ab-error__text' );
            const $newLinkForm = $menu.find( 'form[name="new"]' );
            const thisVal = $this.val();
            const inputName = $this.attr( 'name' );

            if ( !thisVal || /^\s+$/.test( thisVal ) ) {
                // 空欄・空白のみ
                if ( $this.hasClass( cls.error ) ) {
                    $thisErrorText.html( genErrorHtml( msg.error.blank ) );
                } else {
                    $this.addClass( cls.error );
                    $parent.append( genErrorHtml( msg.error.blank, true ) );
                }
            } else if ( !/^\d{2} \S+/.test( thisVal ) && inputName === 'music' ) {
                // 曲ページ名の誤形式
                if ( $this.hasClass( cls.error ) ) {
                    $thisErrorText.html( genErrorHtml( msg.error.unmatch ) );
                } else {
                    $this.addClass( cls.error );
                    $parent.append( genErrorHtml( msg.error.unmatch, true ) );
                }
            } else if ( $this.closest( 'li' ).attr( 'id' ) === 'ab-create__new' ) {
                // 新規作成のページ移行
                const link = '/touhoukashi/?cmd=pedit&page=' + thisVal;
                $newLinkForm.attr( 'action', link ).find( 'input' ).click();
            } else {
                // 特定ページの移行
                const link = genNewPageLink( thisVal, template[ inputName ][ 1 ] );
                $newLinkForm.attr( 'action', link ).find( 'input' ).click();
            }
            return false;
        }
    } );

    // 未作成ページに来た際、そのページ名を自動補完
    if ( /^\?page=.+/.test( l.search ) ) {
        const page = decodeURI( l.search.split( '=' )[ 1 ] );
        if ( /^\d{2} .+/.test( page ) ) {
            $input.filter( '[name="music"]' ).val( page );
        } else {
            $input.filter( '[name!="music"]' ).val( page );
        }
    }
} );
</script>
}}