ViewLogic: replaceWithGrid()

呼び出し先の ViewLogic のコンテンツ container を、ViewLogic に関連付けられた（ProtoViewLogic.relateElements() 参照）Element をグリッドレイアウトしたもので置換します。

構文

ViewLogic.replaceWithGrid(gridTemplateAreas, gridAreaMap, gridContainerStyleOptions) => Element | null

引数

• gridTemplateAreas: Array<string> | Array<Array<string>>

  grid-template-areas CSS プロパティを表す配列です。

  配列の各成分は対応する行のセルのレイアウトを表します。各セルに使用される識別子は grid-area CSS プロパティで使用される識別子を指定します（grid-area は引数 gridAreaMap のプロパティ値として指定します）。

• *gridAreaMap: object | Map<string, string>

  オブジェクトまたは Map で、呼び出し先の ViewLogic に関連付けられた要素の名前をキーとし、設定する grid-area CSS プロパティを値に持ちます。

• gridContainerStyleOptions: object

  グリッドコンテナーに適用するオプションのスタイル定義です。

返値: Element | null

呼び出し先の ViewLogic から取り外されたコンテンツです。 コンテンツがない場合、 null が返ります。

例外

• AggregateError
  • 以下のいずれかの例外が発生した場合、それらを集約した AggregateError が発生します：
    • TypeError: 引数 gridTemplateAreas が配列でない場合
    • TypeError: 引数 gridAreaMap がオブジェクトでない場合
    • TypeError: 引数 gridContainerStyleOptions がオブジェクトでない場合
    • TypeError: 引数 gridTemplateAreas の成分が配列でも文字列でもない場合
    • TypeError: 引数 gridTemplateAreas の成分が空配列だった場合
    • TypeError: 引数 gridTemplateAreas のいずれかの成分が他の成分と異なるセル数を持つ場合
    • TypeError: 引数 gridTemplateAreas のセルを表す成分が文字列でなかった場合
    • TypeError: 引数 gridAreaMap のキーが文字列でなかった場合
    • TypeError: 引数 gridAreaMap の値が文字列でなかった場合
    • RangeError: 引数 gridAreaMap のキーと同名の要素が呼び出し先の ViewLogic に関連付けられていなかった場合
    • RangeError: 呼び出し先の ViewLogic に関連付けられた要素の中で、引数 gridAreaMap によって grid-area CSS プロパティが設定されなかった要素がある場合

例

//  SP
const { ViewLogic } = await Alier.import("/alier_sys/ViewLogic.js");
//  Web
//  import { ViewLogic } from "/path/to/alier/src/ViewLogic.js";

const vl = new ViewLogic;

//  vl に要素を定義して関連付ける; この関数は ProtoViewLogic で実装されている。
vl.defineUiComponents({
    title: {
        tagName     : "p",
        text        : "Title",
    },
    description: {
        tagName     : "p",
        text        : "Description",
    },
    ok: {
        tagName     : "button",
        value       : "ok",
        text        : "OK",
        activeEvents: "click",
        attributes  : { type: "button" }
    },
    cancel: {
        tagName     : "button",
        value       : "cancel",
        text        : "Cancel",
        activeEvents: "click",
        attributes  : { type: "button" }
    }
});

//  関連付けられた要素をコンテンツに設定する
vl.replaceWithGrid(
    //  gridTemplateAreas
    [
        ["title"      , "title"      ],
        ["description", "description"],
        ["ok"         , "cancel"     ]
    ],
    //  gridAreaMap
    {
        title      : "title",
        description: "description",
        ok         : "ok",
        cancel     : "cancel"
    },
    //  gridContainerStyleOptions
    {
        position : "absolute",
        margin   : "0",
        top      : "50%",
        left     : "50%",
        transform: "translate(-50%, -50%)",
        width    : "50%",
        border   : "0.5rem ridge hsl(180deg, 100%, 25%)",
        fontSize : "20pt"
    }
);

//  汎用の待ち合わせ用関数
const wait = async (duration) => new Promise((resolve) => { setTimeout(resolve, duration); });

//  vl の内容を Alier.View に反映する
const prevContent = Alier.View.attach(vl);

//  3 秒待つ
await wait(3000);

//  コンテンツを元に戻す
Alier.View.attach(prevContent);

解説

呼び出し先の ViewLogic のコンテンツ container を、ViewLogic に関連付けられた（ProtoViewLogic.relateElements() 参照）Element をグリッドレイアウトしたもので置換します。