電脳麻将UI 〜 flipInput

電脳麻将 の 牌譜エディタ では「牌画像と入力フィールドを切り替える」UIを採用しています。通常は牌画像を表示し、フォーカスが当たると入力フィールドに切り替わります。この動きを実現しているのが flipInput*1 です。

子要素 A、B を持つ要素 X に flipInput を適用すると、

• 通常は A を表示
• X がフォーカスされたときは B を表示

と動作するように変化します。B に入力フィールドを置けば、フォーカスを当てて入力し、フォーカスを失えば元に戻るUIを実現できる訳です。

要素 X はフォーカスを受付ける必要があるので tabindex 属性を設定してください。X がフォーカスされると、その tabindex を要素 B にコピーし、要素 A を非表示、要素 B を表示しフォーカスを当てます。要素 B がフォーカスを失うと、要素 B を非表示、要素 A を表示し、要素 X の tabindex の値を復元します。

@kobalab/majiang-ui のクラス Majiang.UI.Util の関数 flipInput() の具体的な実装は以下の通りです。

/*
 *  flip.js
 */
"use strict";

function flipInput(flip) {
    flip.off('focus').on('focus', (ev)=>{
        let tabindex = $(ev.target).attr('tabindex') || 0;
        $(ev.target).removeAttr('tabindex');
        $(ev.target).children().eq(0).hide();
        let input = $(ev.target).children().eq(1);
        input.show();
        input.attr('tabindex', tabindex);
        input.trigger('focus');
    });
    flip.each((i ,n)=>{
        $(n).children().eq(1).off('blur').on('blur', (ev)=>{
            let tabindex = $(ev.target).attr('tabindex');
            $(ev.target).removeAttr('tabindex');
            $(ev.target).hide();
            $(ev.target).parent().attr('tabindex', tabindex);
            $(ev.target).parent().children().eq(0).show();
        });
        $(n).children().eq(1).hide();
    });
}

module.exports = { flipInput: flipInput };

以下で実際の動作を確認できます。

• デモプログラム(flipInput)

*1:flip は「ひっくり返る」という意味で、このUIの動作する感じを表しています