« タイトルの入力 | トップページ | ページの複製&・・・ »

2012年4月 8日 (日)

ページの生成・削除、ページ移動

FlatTable のプログラム・コードが次第に増えて来て、コードの配置がカオスに成りつつあります。そのうち複数のファイルに分割しようと思っています。

さて FlatTable にページの生成・削除とページ移動を実装しました。

ページの生成・削除はボタン[ Tot ]から実行できます(New Page, Delete Page)。

ページの生成とは、基礎球一式を新たに創ることです。SVG 部分で基礎球が <g id="balls">・・・</g> によってグループ化されているので、ページの生成は、そのグループを clonNode(true) することで出来ます。

ページの生成ルーチンは次の通りです。

// ページの生成
function genPage(prevPage){
    var newPage = document.getElementById("balls").cloneNode(true);
    ページのリンクリストの処理
    基礎球の配置
    flattable.appendChild(newPage);
    ページカウンタの処理
}
ページカウンタの処理は後で説明するページ移動の処理ルーチンを利用しています。

ページの削除ルーチンは、次の通りです。

// ページの削除
function delPage(oldPage){
    ページカウンタの処理
    ページのリンクリストの処理
    現行ページの削除
    その他少々
}

ページ移動は FlatTable 画面左上の「▲」をクリックして行います。2つの「▲」に挟まれた2つの数はページカウンタで、左側は現行ページ番号、右側はページ総数を表します。

ページ移動のルーチンは次の通りです。

// ページダウン
function clickBtnPgDn(){
    ・・・
    curPage.setAttribute("display", "none");
    curPage = curPage.prev;
    curPage.setAttribute("display", "inline");

    カウンタを1つ減少させる
}
// ページアップ
function clickBtnPgUp(){
    if (curPage){
        if (curPage.next == curPage) return;

        curPage.setAttribute("display", "none");
        curPage = curPage.next;
        curPage.setAttribute("display", "inline");
    }

    カウンタを1つ増加させる
}

カウンタへのアクセスは、

    document.getElementById("pgCur").firstChild.data
で出来ます。

ところで、curPage が未定義の時、

curPage = genPage(curPage);
は正常に動作するのに、
    if (curPage.next == curPage)
curPage.next でエラーになるんですね。一貫性に欠けた仕様なので間違えました。

« タイトルの入力 | トップページ | ページの複製&・・・ »

ビリヤードの配置図ソフト」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/584699/54420344

この記事へのトラックバック一覧です: ページの生成・削除、ページ移動:

« タイトルの入力 | トップページ | ページの複製&・・・ »