Widget:GFLMail - 版本历史

2026年5月20日 (三) 23:44 弃权者

2026-05-20T23:44:11Z

←上一版本		2026年5月21日 (四) 07:44的版本
第10行：		第10行：

	// 先撑开外壳到固定高度，再做过渡		// 先撑开外壳到固定高度，再做过渡
	var fixedH = getComputedStyle(root).getPropertyValue('--gfl-height').trim() \|\| '~~480px~~';		var fixedH = getComputedStyle(root).getPropertyValue('--gfl-height').trim() \|\| '450px';
	// 先把当前自然高度设为起点，避免从0跳变		// 先把当前自然高度设为起点，避免从0跳变
	root.style.height = root.offsetHeight + 'px';		root.style.height = root.offsetHeight + 'px';

2026年5月20日 (三) 23:43 弃权者

2026-05-20T23:43:23Z

←上一版本		2026年5月21日 (四) 07:43的版本
第30行：		第30行：
	}		}

	function closeDetail(btn) {		function closeDetail(btn) {
	var root = btn.closest('.gfl-mail');		var root = btn.closest('.gfl-mail');
	if (!root) return;		if (!root) return;

	root.querySelectorAll('.gfl-detail.is-open').forEach(function (d) {		root.querySelectorAll('.gfl-detail.is-open').forEach(function (d) {
	d.classList.remove('is-open');		d.classList.remove('is-open');
	});		});
	root.classList.remove('view-detail');		root.classList.remove('view-detail');

	// 过渡回自然高度		// 过渡回列表自然高度
	var ~~listH~~ = root.querySelector('.gfl-list').scrollHeight ~~+ 2~~; ~~// +2 for border~~		var list = root.querySelector('.gfl-list');
	root.style.transition = 'height .3s cubic-bezier(.4,0,.2,1)';		// 列表隐藏时 visibility:hidden 但仍占布局，scrollHeight 可读
	root.style.height = listH + 'px';		var listH = list.scrollHeight;
	root.addEventListener('transitionend', function onEnd(e) {		root.style.transition = 'height .3s cubic-bezier(.4,0,.2,1)';
	if (e.propertyName !== 'height') return;		root.style.height = listH + 'px';
	root.removeEventListener('transitionend', onEnd);
	root.style.height = '';		root.addEventListener('transitionend', function onEnd(e) {
	root.style.transition = '';		if (e.propertyName !== 'height') return;
	});		root.removeEventListener('transitionend', onEnd);
	}		root.style.height = '';
			root.style.transition = '';
			});
			}

	document.querySelectorAll('.gfl-item').forEach(function (item) {		document.querySelectorAll('.gfl-item').forEach(function (item) {

2026年5月20日 (三) 23:38 弃权者

2026-05-20T23:38:43Z

←上一版本		2026年5月21日 (四) 07:38的版本
第8行：		第8行：
	var root = item.closest('.gfl-mail');		var root = item.closest('.gfl-mail');
	if (!root) return;		if (!root) return;

			// 先撑开外壳到固定高度，再做过渡
			var fixedH = getComputedStyle(root).getPropertyValue('--gfl-height').trim() \|\| '480px';
			// 先把当前自然高度设为起点，避免从0跳变
			root.style.height = root.offsetHeight + 'px';
			// 强制重排后过渡到目标高度
			root.offsetHeight;
			root.style.transition = 'height .3s cubic-bezier(.4,0,.2,1)';
			root.style.height = fixedH;

	root.querySelectorAll('.gfl-detail.is-open').forEach(function (d) {		root.querySelectorAll('.gfl-detail.is-open').forEach(function (d) {
	d.classList.remove('is-open');		d.classList.remove('is-open');
第13行：		第23行：
	var target = root.querySelector('#gflDetail-' + idx);		var target = root.querySelector('#gflDetail-' + idx);
	if (!target) return;		if (!target) return;

	root.classList.add('view-detail');		root.classList.add('view-detail');
	requestAnimationFrame(function () {		requestAnimationFrame(function () {
第22行：		第33行：
	var root = btn.closest('.gfl-mail');		var root = btn.closest('.gfl-mail');
	if (!root) return;		if (!root) return;

	root.querySelectorAll('.gfl-detail.is-open').forEach(function (d) {		root.querySelectorAll('.gfl-detail.is-open').forEach(function (d) {
	d.classList.remove('is-open');		d.classList.remove('is-open');
	});		});
	root.classList.remove('view-detail');		root.classList.remove('view-detail');

			// 过渡回自然高度
			var listH = root.querySelector('.gfl-list').scrollHeight + 2; // +2 for border
			root.style.transition = 'height .3s cubic-bezier(.4,0,.2,1)';
			root.style.height = listH + 'px';
			root.addEventListener('transitionend', function onEnd(e) {
			if (e.propertyName !== 'height') return;
			root.removeEventListener('transitionend', onEnd);
			root.style.height = '';
			root.style.transition = '';
			});
	}		}

2026年5月20日 (三) 23:35 弃权者

2026-05-20T23:35:55Z

←上一版本		2026年5月21日 (四) 07:35的版本
第1行：		第1行：
	<script>		<script>
	(function () {		(function () {
	~~// 防止重复绑定（MW 可能多次执行）~~
	if (window._gflMailInit) return;		if (window._gflMailInit) return;
	window._gflMailInit = true;		window._gflMailInit = true;
第9行：		第8行：
	var root = item.closest('.gfl-mail');		var root = item.closest('.gfl-mail');
	if (!root) return;		if (!root) return;

	~~// 先关掉所有其他 detail~~
	root.querySelectorAll('.gfl-detail.is-open').forEach(function (d) {		root.querySelectorAll('.gfl-detail.is-open').forEach(function (d) {
	d.classList.remove('is-open');		d.classList.remove('is-open');
	});		});

	var target = root.querySelector('#gflDetail-' + idx);		var target = root.querySelector('#gflDetail-' + idx);
	if (!target) return;		if (!target) return;

	~~// grid 布局下两面板共占同一单元格，高度自动由内容决定，无需手动设置~~
	root.classList.add('view-detail');		root.classList.add('view-detail');
	~~// 下一帧再加 is-open，确保浏览器先完成布局，transition 才能正常触发~~
	requestAnimationFrame(function () {		requestAnimationFrame(function () {
	target.classList.add('is-open');		target.classList.add('is-open');

2026年5月20日 (三) 23:32 弃权者

2026-05-20T23:32:02Z

←上一版本		2026年5月21日 (四) 07:32的版本
第1行：		第1行：
	<script>~~document.querySelectorAll~~('.~~gfl-item'~~).~~forEach(item~~ =~~> {~~		<script>
	item~~.addEventListener('click', (~~) => {		(function () {
	~~const~~ idx = item.getAttribute('data-gfl-index');		// 防止重复绑定（MW 可能多次执行）
	~~const~~ root = item.closest('.gfl-mail');		if (window._gflMailInit) return;
			window._gflMailInit = true;

			function openDetail(item) {
			var idx = item.getAttribute('data-gfl-index');
			var root = item.closest('.gfl-mail');
	if (!root) return;		if (!root) return;

	root.querySelectorAll('.gfl-detail').forEach(d => d.classList.remove('is-open'));		// 先关掉所有其他 detail
			root.querySelectorAll('.gfl-detail.is-open').forEach(function (d) {
			d.classList.remove('is-open');
			});

	~~const targetDetail~~ = root.querySelector(`#gflDetail-${idx}`);		var target = root.querySelector('#gflDetail-' + idx);
	if (!~~targetDetail~~) return;		if (!target) return;

	~~targetDetail.style.visibility = 'hidden';~~		// grid 布局下两面板共占同一单元格，高度自动由内容决定，无需手动设置
	~~targetDetail.style.opacity = '0';~~
	~~targetDetail.style.transform = 'translateX(30px)';~~
	~~targetDetail.classList.add('is-open');~~

	~~targetDetail.offsetHeight;~~

	~~const bodyEl = targetDetail.querySelector('.gfl-detail-body');~~
	~~const contentHeight = bodyEl ? bodyEl.scrollHeight : targetDetail.scrollHeight;~~
	~~const headerHeight = targetDetail.querySelector('.gfl-detail-header').offsetHeight;~~
	~~const totalHeight = contentHeight + headerHeight + 40;~~ // ~~40px~~ ~~是 padding 等~~

	~~const minHeight = 400;~~
	~~const finalHeight = Math.max(totalHeight, minHeight);~~

	~~root.style.height = finalHeight + 'px';~~

	~~targetDetail.style.visibility = '';~~
	~~targetDetail.style.opacity = '';~~
	~~targetDetail.style.transform = '';~~

	root.classList.add('view-detail');		root.classList.add('view-detail');
	});		// 下一帧再加 is-open，确保浏览器先完成布局，transition 才能正常触发
	});		requestAnimationFrame(function () {
			target.classList.add('is-open');
			});
			}

	~~document.querySelectorAll~~(~~'.gfl-back-btn').forEach(btn => {~~		function closeDetail(btn) {
	btn~~.addEventListener('click', (~~) => {		var root = btn.closest('.gfl-mail');
	~~const~~ root = btn.closest('.gfl-mail');
	if (!root) return;		if (!root) return;
			root.querySelectorAll('.gfl-detail.is-open').forEach(function (d) {
			d.classList.remove('is-open');
			});
			root.classList.remove('view-detail');
			}

	~~root.classList~~.~~remove~~('~~view-detail~~');		document.querySelectorAll('.gfl-item').forEach(function (item) {
	~~root~~.~~querySelectorAll~~('~~.gfl-detail~~').~~forEach(d~~ =~~> d~~.~~classList~~.~~remove~~(~~'is-open'~~));		item.addEventListener('click', function () { openDetail(item); });
			item.addEventListener('keydown', function (e) {
			if (e.key === 'Enter' \|\| e.key === ' ') { e.preventDefault(); openDetail(item); }
			});
			});

	~~root~~.~~style~~.~~height~~ = '';		document.querySelectorAll('.gfl-back-btn').forEach(function (btn) {
			btn.addEventListener('click', function () { closeDetail(btn); });
			btn.addEventListener('keydown', function (e) {
			if (e.key === 'Enter' \|\| e.key === ' ') { e.preventDefault(); closeDetail(btn); }
			});
	});		});
	});		})();
	</script>		</script>

2026年5月20日 (三) 14:54 弃权者

2026-05-20T14:54:28Z

@@ 第10行： / 第10行： @@
      if (!targetDetail) return;
      targetDetail.classList.add('is-open');
      root.classList.add('view-detail');
    });
 });

2026年5月20日 (三) 14:50 弃权者

2026-05-20T14:50:22Z

←上一版本		2026年5月20日 (三) 22:50的版本
第1行：		第1行：
	document.querySelectorAll('.gfl-item').forEach(item => {		<script>document.querySelectorAll('.gfl-item').forEach(item => {
	item.addEventListener('click', () => {		item.addEventListener('click', () => {
	const idx = item.getAttribute('data-gfl-index');		const idx = item.getAttribute('data-gfl-index');
第31行：		第31行：
	});		});
	});		});
			</script>

2026年5月20日 (三) 14:49 弃权者

2026-05-20T14:49:01Z

←上一版本		2026年5月20日 (三) 22:49的版本
第1行：		第1行：
	~~<script>~~
	document.querySelectorAll('.gfl-item').forEach(item => {		document.querySelectorAll('.gfl-item').forEach(item => {
	item.addEventListener('click', () => {		item.addEventListener('click', () => {
	const idx = item.getAttribute('data-gfl-index');		const idx = item.getAttribute('data-gfl-index');
	const root = item.closest('.gfl-mail');		const root = item.closest('.gfl-mail');
	root.querySelectorAll('.gfl-detail').forEach(~~detail~~ => ~~detail~~.classList.remove('is-open'));		if (!root) return;

			root.querySelectorAll('.gfl-detail').forEach(d => d.classList.remove('is-open'));

	const targetDetail = root.querySelector(`#gflDetail-${idx}`);		const targetDetail = root.querySelector(`#gflDetail-${idx}`);
	if (targetDetail) {		if (!targetDetail) return;
	targetDetail.classList.add('is-open');
	root.classList.add('view-detail');		targetDetail.classList.add('is-open');
			root.classList.add('view-detail');

			const detailHeight = targetDetail.scrollHeight;
			if (detailHeight > 0) {
			root.style.height = detailHeight + 'px';
	}		}
	});		});
	});		});

	document.querySelectorAll('.gfl-back-btn').forEach(btn => {		document.querySelectorAll('.gfl-back-btn').forEach(btn => {
	btn.addEventListener('click', () => {		btn.addEventListener('click', () => {
	const root = btn.closest('.gfl-mail');		const root = btn.closest('.gfl-mail');
			if (!root) return;

	root.classList.remove('view-detail');		root.classList.remove('view-detail');
	root.querySelectorAll('.gfl-detail').forEach(~~detail~~ => ~~detail~~.classList.remove('is-open'));		root.querySelectorAll('.gfl-detail').forEach(d => d.classList.remove('is-open'));

			root.style.height = '';
	});		});
	});		});
	~~</script>~~

2026年5月20日 (三) 14:30 弃权者

2026-05-20T14:30:46Z

←上一版本		2026年5月20日 (三) 22:30的版本
第16行：		第16行：
	const root = btn.closest('.gfl-mail');		const root = btn.closest('.gfl-mail');
	root.classList.remove('view-detail');		root.classList.remove('view-detail');
	~~setTimeout(() => {~~		root.querySelectorAll('.gfl-detail').forEach(detail => detail.classList.remove('is-open'));
	root.querySelectorAll('.gfl-detail').forEach(detail => detail.classList.remove('is-open'));
	~~}, 300~~);
	});		});
	});		});
	</script>		</script>

2026年5月20日 (三) 14:27 弃权者

2026-05-20T14:27:10Z

←上一版本		2026年5月20日 (三) 22:27的版本
第16行：		第16行：
	const root = btn.closest('.gfl-mail');		const root = btn.closest('.gfl-mail');
	root.classList.remove('view-detail');		root.classList.remove('view-detail');
			setTimeout(() => {
			root.querySelectorAll('.gfl-detail').forEach(detail => detail.classList.remove('is-open'));
			}, 300);
	});		});
	});		});
	</script>		</script>