https://www.kazokuryokoumura.jp/wp-content/themes/kitoushi2022-3y/js/resize.js

1// window resize 時に実行する関数
2
3window.addEventListener("DOMContentLoaded", function() {
4
5	function event_div_fix() {
6
7		//console.log("Width: " + window.innerWidth + " / Height: " + window.innerHeight);
8		//console.log(window.innerWidth);
9
10		// レスポンシブ対策 position: absolute; を設定している要素は
11		// 要素の高さが 0 になるため、スタイル調整がしにくい
12		// そのため、対象内の要素が実際どれだけの高さが必要か確認し
13		// その要素内の高さをインラインスタイルシートで補完する
14
15		// event_div という class が付いた要素を全て取得する
16
17		const target_elements = document.getElementsByClassName("event_div");
18
19		//console.log(target_elements);
20
21		// 取得した情報をループで調査
22		// 各子要素の上の座標と下の座標を調べる
23		// 調査したいのは
24		// .event_div > .contents > h3
25		// .event_div > .contents > .thumbnail
26
27		//	<div class="event_a event_div">
28		//		<div class="contents">
29		// 			<h3><a href="https://localhost/...">[0] お知らせテスト #2</a></h3> ← 調査対象
30		//			<div class="thumbnail"><a href="https://localhost/..."><img src="https://localhost/...img.jpg" width="" height="" alt=""></a></div> ← 調査対象
31		//		</div>
32		//	</div>
33
34		for (let n = 0; n < target_elements.length; n++) {
35
36			// 各座標を収納する配列
37
38			let top_array = new Array();// 上辺 = y
39			let bottom_array = new Array();// 下辺 = y + height
40
41			// 調査対象のノードを取得
42
43			const this_h3 = target_elements[n]["childNodes"][1]["childNodes"][1];
44			const this_thumbnail = target_elements[n]["childNodes"][1]["childNodes"][3];
45
46			//console.log(this_h3);
47			//console.log(this_thumbnail);
48
49			// 各座標値などを取得
50
51			const this_h3_bcr = this_h3.getBoundingClientRect();
52			const this_thumbnail_bcr = this_thumbnail.getBoundingClientRect();
53
54			top_array.push( this_h3_bcr.y );
55			top_array.push( this_thumbnail_bcr.y );
56			bottom_array.push( (this_h3_bcr.y + this_h3_bcr.height) );
57			bottom_array.push( (this_thumbnail_bcr.y + this_thumbnail_bcr.height) );
58
59			// 収納した配列の top_array の最小値と bottom_array の最大値の差が
60			// 対象となる要素の高さを補完するために必要な値です。しかし (下に続く)
61
62			let this_top_value = Math.min.apply(null, top_array);
63			let this_bottom_value = Math.max.apply(null, bottom_array);
64			let this_difference = this_bottom_value - this_top_value;
65
66			// しかしこのテンプレートで言うと class="event_b" のように
67			// h3 が要素の上を突き抜けている場合は算出された値をそのまま補正すると
68			// 補正過多となるので突き抜けた分を修正する必要がある (細かい話をするとだが)
69			// さらに補正が必要と判断する場合は h3 の方が .thumbnail よりも座標が上である場合必要がある
70
71			if ( top_array[0] < top_array[1] ) {
72				// 上へ突き抜けた分補正値を減らす
73				this_difference = this_difference - ( top_array[1] - top_array[0] );
74			}
75
76			//console.log("[" + n + "] - - - - - - - - - - - - - - -");
77			//console.log("[" + n + "] h3");
78			//console.log(this_h3_bcr);
79			//console.log("[" + n + "] thumbnail");
80			//console.log(this_thumbnail_bcr);
81
82			//console.log(top_array);
83			//console.log(bottom_array);
84			//console.log(this_top_value);
85			//console.log(this_bottom_value);
86			//console.log(this_difference);
87
88			//console.log(this);
89
90			// 要素で position: absolute; を設定しているのはブラウザ幅 600px 以上とする
91			// それ以下は使用していないため補正は無しとする
92
93			if ( window.innerWidth > 600 ) {
94				target_elements[n].style.paddingBottom = this_difference + "px";
95			} else {
96				target_elements[n].style.paddingBottom = "0px";
97			}
98
99			//const this_array = target_elements[n].getBoundingClientRect();
100			//top_array.push( Number(this_array.top) );
101			//bottom_array.push( Number(this_array.bottom) );
102
103		}
104
105		// カスタム投稿一覧のボックス高さを揃える
106		// .custom_post_box
107
108		const target_cpb = document.getElementsByClassName("custom_post_box");
109
110		//console.log(target_cpb);
111
112		// 2要素ずつ処理していく ( for も 2飛ばしでループ )
113
114		for ( let cpd = 0; cpd < target_cpb.length; cpd = cpd + 2 ) {
115
116			// 2列表示なので 1個目 と 2個目, 3個目 と 4個目 とで高さを揃える
117
118			//console.log(target_cpb);
119
120			let element_1st = target_cpb[cpd];
121			let element_2st = target_cpb[cpd + 1];
122
123			// 色々処理する前に高さをクリアさせる
124
125			element_1st.style.height = "";
126			element_2st.style.height = "";
127
128			let rect_1st = element_1st.getBoundingClientRect();
129			let rect_2st = element_2st.getBoundingClientRect();
130
131			let height_1st = element_1st.clientHeight;
132			let height_2st = element_2st.clientHeight;
133
134			let top_1st = rect_1st.top;
135			let top_2st = rect_2st.top;
136
137			//console.log( "{" + cpd + "} Height: " + height_1st + ", top: " + top_1st );
138			//console.log( "{" + (cpd + 1) + "} Height: " + height_2st + ", top: " + top_2st );
139
140			// y座標が同じ場合は2列で表示されているとみなã

140—、双方の高さを揃える
141			// (値の大きい方に揃える)
142
143			let height_value_array = new Array(height_1st, height_2st);
144
145			if ( top_1st === top_2st ) {
146
147				element_1st.style.height = Math.max(height_1st, height_2st) + "px";
148				element_2st.style.height = Math.max(height_1st, height_2st) + "px";
149
150			} else {
151
152				element_1st.style.height = "";
153				element_2st.style.height = "";
154
155			}
156
157		}
158
159	}
160
161	window.addEventListener("resize", function() {
162		event_div_fix();
163	});
164
165	event_div_fix();// 読み込み時にも実行
166
167});
168
169