Widget:ResponsiveTableのソースを表示

<includeonly><style>
.rptable-mobile{
  width: 100%;
}
.rptable-mobile tbody,
.rptable-mobile tr,
.rptable-mobile tr > th,
.rptable-mobile tr > td {
  width: auto;
  display: block;
}
.rptable-mobile {
  padding: 0em;
}
.rptable-mobile thead {
  display: block;
  background-color: #eaecf0;
}
.rptable-mobile tfoot {
  display: block;
}
.rptable-mobile tr {
  padding-top: 1em;
  padding-bottom: 1em;
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
}
.rptable-mobile tr > th,
.rptable-mobile tr > td {
  background-position: center left !important;
  border: none;
  padding: 0.25em 0.75em;
  box-shadow: none;
}
.rptable-mobile .headerSort{
  text-align: left;
	padding-left: 1.25em !important;
}
.rptable-header {
	font-weight: bold;
}
.rptable-header::after {
	font-weight: bold;
	content: "\3A";
	margin-right: 0.5em;
}
.rptable-mobile:not(.sortable) > tbody > tr:first-child {
	display: none !important;
}
</style><script type="text/javascript">
//注意：何故か>,<の前後にスペースを入れるとバグる
const MIN_WIDE_SCREEN_WIDTH = 767;
const CLASS_NAME_RPTABLE = 'rptable';
const CLASS_NAME_RPTABLE_MOBILE = 'rptable-mobile';
const CLASS_NAME_RP_HEADER = 'rptable-header'
const PAGE_MODES = {
	none: 0,
	narrow: 1,
	wide: 2,
};
var statePageMode = PAGE_MODES.none;

function run() {
	const rptableElements = document.getElementsByClassName(CLASS_NAME_RPTABLE);

	controlRpTables(rptableElements);

	window.addEventListener('resize', function () {
		controlRpTables(rptableElements);
	});
}
/**
 * @param tables {HTMLCollectionOf<Element>}
 */
function controlRpTables(tables) {
	const smallScreen = isScreenSmallerThan(MIN_WIDE_SCREEN_WIDTH);
	//初回
	if (statePageMode === PAGE_MODES.none) {
		smallScreen
			? [changePageMode(PAGE_MODES.narrow), changeNormalTablesIntoMobileTables(tables)]
			: changePageMode(PAGE_MODES.wide);
		return;
	}

	const shouldChangeTableMode = changePageMode(smallScreen ? PAGE_MODES.narrow : PAGE_MODES.wide);
	//PC→モバイル
	if (shouldChangeTableMode && smallScreen) {
		changeNormalTablesIntoMobileTables(tables);
		return;
	}
	//モバイル→PC
	if (shouldChangeTableMode && !smallScreen) {
		changeRpTablesIntoNormalTables(tables);
		return;
	}
	
	return;
}

/**
 * 引数サイズ未満かどうか
 * @param width {number}
 */
function isScreenSmallerThan(width) {
	return window.innerWidth<width;
}
/**
 * statePageModeに引数の値を代入する。
 * もし前のstateと違う値であれば、trueを返す。
 * @param width {PAGE_MODES}
 */
function changePageMode(pageMode) {
	const currentMode = statePageMode;
	statePageMode = pageMode;
	return pageMode !== currentMode ? true : false;
}

/**
 * モバイル用テーブルを通常テーブルに書き換え。
 * @param tables {HTMLCollectionOf<Element>}
 */
function changeRpTablesIntoNormalTables(tables) {
	Array.from(tables).forEach((table) => {
		table.classList.toggle(CLASS_NAME_RPTABLE_MOBILE);
	});

	Array.from(document.getElementsByClassName(CLASS_NAME_RP_HEADER)).forEach((el) => {
		el.remove();
	});
}
/**
 * 通常テーブルをモバイル用テーブルに。
 * @param tables {HTMLCollectionOf<Element>}
 */
function changeNormalTablesIntoMobileTables(tables) {
	Array.from(tables).forEach((table) => {
		table.classList.toggle(CLASS_NAME_RPTABLE_MOBILE);
		// テーブルの最初のtr要素内のth要素を全て取得
		const headerRow = table.getElementsByTagName('tr')[0];
		const headers = Array.from(headerRow.getElementsByTagName('th'));

		// tbody内の全てのtr要素を取得
		const tbody = table.getElementsByTagName('tbody')[0];
		const bodyRows = tbody.getElementsByTagName('tr');

		Array.from(bodyRows).forEach((row) => {
			const cells = row.getElementsByTagName('td');
			Array.from(cells).forEach((cell, index) => {
				if (index<headers.length) {
					const headerText = headers[index].textContent.trim();
					const span = document.createElement('span');
					span.classList.add(CLASS_NAME_RP_HEADER);
					span.textContent = headerText;
					cell.insertBefore(span, cell.firstChild);
				}
			});
		});
	});
}

document.addEventListener('DOMContentLoaded', function () {
    run();
});

</script>
</includeonly><noinclude>
ウィンドウサイズが一定未満になるとセルが縦並びになるモバイルフレンドリ―なテーブル。ソートテーブルにも対応。幅が広すぎるテーブル向け。

== 使い方 ==
通常のwikitableに、クラス「rptable」を追加する。

例：
<pre>
{{#widget:ResponsiveTable}}
{| class="wikitable rptable"
|+ キャプション文
|-
! 見出しテキスト !! 見出しテキスト !! 見出しテキスト
|-
| セル内のテキスト || セル内のテキスト || セル内のテキスト
|-
| セル内のテキスト || セル内のテキスト || セル内のテキスト
|-
| セル内のテキスト || セル内のテキスト || セル内のテキスト
|}
</pre>

== 注意事項 ==
*セル連結をしているテーブルなどでは上手く機能しない。上手く機能するかどうか、編集を確定させる前にプレビューで見ておくべき。
*幅が広くないテーブルでは使う価値は無い。
{{デフォルトソート:こんくえちゆうしゆつほたん}}[[カテゴリ:widget]]</noinclude>