ページ一覧

汎用モーダル機能について

JSによる開閉機能を有効にする場合は、JS用クラスと data 属性の追加が必要です。

.js-modal クラス

： .p-modal と同じDOMに追加する

data-micromodal-close="true"

：閉じる機能を持たせたい button 要素に追加する

※ 実際に機能するモーダルは「01_保存データ一覧」「03_プレゼンボード」ページのヘッダーにある「管理者ログイン」ボタンから開閉できます

管理者/ユーザーの違い

管理者/ユーザーで内容が違うものがありますので、ご留意ください。

管理者ログインボタン

：「管理者ログイン」ボタンの有無

管理者/ユーザーの違い

管理者/ユーザーで内容が違うものがありますので、ご留意ください。

h1 テキスト

：隠しテキストの内容

ボタン

：「保存データ一覧に戻る」ボタンの有無 / 「管理者ログイン」ボタンの有無

画像操作タブ

：「ダウンロード」メニュー（タブorボタン） / 「角度呼び出し」ボタンの有無 / 「張り分け一覧から角度呼び出し」ボタンの有無

Canvasエリアについて

.l-main-simulation__visualArea > canvas となる想定で、CSSで <canvas> がエリアいっぱいに広がるようにしています。
CSSでの対応が不要な場合、 .l-main-simulation__visualArea を使わず、
.l-main-simulation__visual > canvas の構造にしてください。

PC/SPでHTMLが分かれている箇所

1.ナビゲーション子カテゴリ（ .p-layout-simulationNavChild ）

PC時： .p-layout-simulationNav__content 内にメニューに属する子カテゴリを格納
SP時： .p-layout-simulationNavChildWrap 内に各メニューの子カテゴリをまとめて格納
※ SP時のメニュー切り替えのために、 .p-layout-simulationNav__btn と .p-layout-simulationNavChildWrap__item の data-nav 属性の値（数値）を一致させる必要があります
※ 子カテゴリの選択状態（ .is-current の付け外し）はPC/SPそれぞれに反映する必要があります

2. 管理者ログイン / 操作説明 ボタン

SP時：画面上部（ .p-layout-simulationFoot__operation ）
PC時：画面右上（ .l-main-simulation__visualOperation ）

タブUIの属性値について

タブUI（ .p-tab-control ）内で使用されている id 属性、 aria-controls 属性、 aria-labelledby 属性は値を以下のように対応させる必要があります。

.js-tab__hook の id 属性値 === .js-tab__panel の aria-labelledby 属性値
.js-tab__panel の id 属性値 === .js-tab__hook の aria-controls 属性値

※ いずれかの id 属性値を変更する場合は上記の対応する属性も同様に変更お願いします。

管理者/ユーザーの違い

管理者/ユーザーで内容が違うものがありますので、ご留意ください。

管理者ログインボタン

：「管理者ログイン」ボタンの有無

ボード編集ツール

：編集画面のボード編集ツールの有無

保存データ一覧に追加ボタン

：編集画面の「保存データ一覧に追加」ボタンの有無

「シート サイズ・詳細レイアウト」選択モーダル機能について

入力欄 + 「選択する」ボタン（ .js-selectSheetLayout 内の要素）

初期表示：モーダル内ラジオボタンでチェック状態になっている要素の value 値を表示
「選択する」ボタン押下：モーダルを開く

モーダル + ラジオボタン

ラジオボタン初期選択：ラジオボタンに静的に cheched 属性を付与することでチェック状態にする
「選択」ボタン押下：モーダルを閉じる / 選択しているラジオボタンの value 値を入力欄に反映
「キャンセル」ボタン押下：モーダルを閉じる / キャンセル前にチェックしてる項目を変更している場合、元の項目をチェック状態に戻す

選択UIが複数必要な場合

モーダル（ div.js-modal ）を複製し、 id 値を任意のものに変更する（値が重複しないようにする）
モーダル内ラジオボタンの name 値を任意のものに変更する（ラジオグループが正しくなるように）
入力欄 + 「選択する」ボタンは div.js-selectSheetLayout ごと複製して、ボタンの data-micromodal-sheet-open の値にモーダルで設定した id 値を指定する（ボタンとモーダルの紐付け）
※ ページロード後にJSなどで要素を生成すると選択モーダル機能のイベントが発火しないため、要素自体は静的に出力しておき、初期はCSSで非表示するようにしてください

Canvasエリアについて

.p-layout-presenBoardEdit__visual の中に「ボード編集画面」が入る想定です。（画像は見た目確認用のダミーデータです。）
CSSによる枠線や縦レイアウト時の幅制限が不要な場合、 .p-layout-presenBoardEdit__visual を使わず、
p-layout-presenBoardEdit__main > ボード編集画面 の構造にしてください。