italia2024
Version:
Italia 2024 assets
213 lines (177 loc) • 7.72 kB
JavaScript
(function () {
//cabinetmaker：CSS
var insertStyle = document.createElement('style');
insertStyle.insertAdjacentHTML('beforeend', `
:is(.autorack, .autobrick) *,
:is(.autorack, .autobrick) *::before,
:is(.autorack, .autobrick) *::after {
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
}
:is(.autorack, .autobrick) img {
width: 100% !important;
height: 100% !important;
}
`);
document.getElementsByTagName('head')[0].appendChild(insertStyle);
})(); ///function：cabinetmaker：CSS
(function () {
//autorack：JS（flexboxでの縦並べ・折り返し／縦組レイアウト）
let debugMode = false; //デバッグモードを有効化または無効化します。
let arrAutoRacks = Array.prototype.slice.call(document.querySelectorAll(".autorack")); //Arr.NodeList
//ウィンドウロード・リサイズ時のイベント
function fnAutoRackNURA() {
let isMobile = window.matchMedia('(max-width: 743.9px)').matches;
let isDesktop = window.matchMedia('(min-width: 744px)').matches;
for (let i = 0; i < arrAutoRacks.length; i++) {
//ラック列数・子要素数を取得、1列内の子要素数を計算
let dataRack = isMobile ? arrAutoRacks[i].dataset.rack_sp : isDesktop ? arrAutoRacks[i].dataset.rack_pc : 0;
let rackChlds = Array.prototype.slice.call(arrAutoRacks[i].children);
let colChlds = Math.ceil(rackChlds.length / dataRack);
let lastRackHgt = 0;
//子要素の高さを合計して、1列の高さを求める
let n = 0
for (let cntRack = 0; cntRack < dataRack; cntRack++) {
let colHgt = 0;
for (let cntChld = 0; cntChld < colChlds; cntChld++) {
let rackChld = rackChlds[n];
if (rackChld && rackChld.classList.contains('debug-info') === false) {
//debug-infoを持たない要素のみを選択
let computedStyle = getComputedStyle(rackChld);
let chldHgt = Math.ceil(rackChld.getBoundingClientRect().height) +
parseInt(computedStyle.marginTop) +
parseInt(computedStyle.marginBottom);
colHgt += chldHgt;
//デバッグ情報のコード
if (debugMode) {
let debugInfoChld = document.createElement('div');
Object.assign(debugInfoChld.style, {
position: 'absolute',
zIndex: '100',
top: '0',
right: '0',
backgroundColor: 'rgba(255, 0, 0, 0.7)',
color: 'white',
padding: '5px',
});
debugInfoChld.textContent = 'Height: ' + chldHgt + "px";
rackChld.appendChild(debugInfoChld);
}
}
n++;
}
lastRackHgt = Math.max(lastRackHgt, colHgt);
}
//ラックの高さとしてスタイル設定する
arrAutoRacks[i].style.height = lastRackHgt + "px";
//デバッグモード
let debugDiv = arrAutoRacks[i].querySelector('.debug-info');
if (!debugDiv) {
debugDiv = document.createElement('div');
debugDiv.classList.add('debug-info');
arrAutoRacks[i].parentElement.insertBefore(debugDiv, arrAutoRacks[i]);
}
if (debugMode) {
Object.assign(debugDiv.style, {
position: 'absolute',
zIndex: '100',
top: '-38px',
right: '0',
backgroundColor: 'rgba(0, 0, 0, 0.7)',
color: 'white',
padding: '5px',
});
debugDiv.textContent = '子要素数: ' + rackChlds.length + ', 1列内の子要素数: ' + colChlds + ', Height: ' + lastRackHgt + "px";
} else {
debugDiv.style.display = 'none';
}
}; ///for (arrAutoRacks.length)
} ///fnAutoRackNURA()
//ウィンドウロード・リサイズ時のイベント呼び出し登録
'load resize'.split(' ').forEach((events) => {
window.addEventListener(events, function (e) {
fnAutoRackNURA();
});
}); ///for.window('load resize')
})(); ///function：autorack：JS
(function () {
//autobrick：JS（flexboxでの縦並べ・折り返し／組積風レイアウト）
let debugMode = false; //デバッグモードを有効化または無効化します。
let arrAutoBricks = Array.prototype.slice.call(document.querySelectorAll(".autobrick")); //Arr.NodeList
//ウィンドウロード・リサイズ時のイベント
function fnAutoBrickNURA() {
let isMobile = window.matchMedia('(max-width: 743.9px)').matches;
let isDesktop = window.matchMedia('(min-width: 744px)').matches;
for (let i = 0; i < arrAutoBricks.length; i++) {
//ラック列数・子要素数を取得、1列内の子要素数を計算
let dataBrick = isMobile ? arrAutoBricks[i].dataset.brick_sp : isDesktop ? arrAutoBricks[i].dataset.brick_pc : 0;
let brickChlds = Array.prototype.slice.call(arrAutoBricks[i].children);
let colChlds = Math.ceil(brickChlds.length / dataBrick);
let lastBrickHgt = 0;
//子要素の高さを合計して、1列の高さを求める
let n = 0
for (let cntBrick = 0; cntBrick < dataBrick; cntBrick++) {
let colHgt = 0;
for (let cntChld = 0; cntChld < colChlds; cntChld++) {
let brickChld = brickChlds[n];
if (brickChld && brickChld.classList.contains('debug-info') === false) {
//debug-infoを持たない要素のみを選択
let computedStyle = getComputedStyle(brickChld);
let chldHgt = Math.ceil(brickChld.getBoundingClientRect().height) +
parseInt(computedStyle.marginTop) +
parseInt(computedStyle.marginBottom) +
parseInt(computedStyle.paddingTop) +
parseInt(computedStyle.paddingBottom);
colHgt += chldHgt;
//デバッグ情報のコード
if (debugMode) {
let debugInfoChld = document.createElement('div');
Object.assign(debugInfoChld.style, {
position: 'absolute',
zIndex: '100',
top: '0',
right: '0',
backgroundColor: 'rgba(255, 0, 0, 0.7)',
color: 'white',
padding: '5px',
});
debugInfoChld.textContent = 'Height: ' + chldHgt + "px";
brickChld.appendChild(debugInfoChld);
}
}
n++;
}
lastBrickHgt = Math.max(lastBrickHgt, colHgt);
}
//ラックの高さとしてスタイル設定する
arrAutoBricks[i].style.height = lastBrickHgt + "px";
//デバッグモード
let debugDiv = arrAutoBricks[i].querySelector('.debug-info');
if (!debugDiv) {
debugDiv = document.createElement('div');
debugDiv.classList.add('debug-info');
arrAutoBricks[i].parentElement.insertBefore(debugDiv, arrAutoBricks[i]);
}
if (debugMode) {
Object.assign(debugDiv.style, {
position: 'absolute',
zIndex: '100',
top: '-38px',
right: '0',
backgroundColor: 'rgba(0, 0, 0, 0.7)',
color: 'white',
padding: '5px',
});
debugDiv.textContent = '子要素数: ' + brickChlds.length + ', 1列内の子要素数: ' + colChlds + ', Height: ' + lastBrickHgt + "px";
} else {
debugDiv.style.display = 'none';
}
}; ///for (arrAutoBricks.length)
} ///fnAutoBrickNURA()
//ウィンドウロード・リサイズ時のイベント呼び出し登録
'load resize'.split(' ').forEach((events) => {
window.addEventListener(events, function (e) {
fnAutoBrickNURA();
});
}); ///for.window('load resize')
})(); ///function：autobrick：JS