'; html += '

'; if (isBottom) { html += '

EXIF 信息

'; // ★★★ 红色分割线（标题和数据之间） ★★★ html += '

'; html += '

'; for (var i = 0; i < exifLabels.length; i++) { var item = exifLabels[i]; var key = item.key; if (filteredData[key] && filteredData[key] !== '') { var value = String(filteredData[key]); if (value.length > 30) { value = value.substring(0, 28) + '…'; } html += ''; html += '' + item.label + ''; html += '' + value + ''; html += ''; } } html += '

'; } else { html += '

EXIF 信息

'; // ★★★ 红色分割线（标题和数据之间）- 使用内联样式 ★★★ html += '

'; html += '

'; for (var i = 0; i < exifLabels.length; i++) { var item = exifLabels[i]; var key = item.key; if (filteredData[key] && filteredData[key] !== '') { var value = String(filteredData[key]); if (value.length > 40) { value = value.substring(0, 38) + '…'; } html += '

'; html += '' + item.label + ''; html += '' + value + ''; html += '

'; } } html += '

'; } html += '

'; html += '

'; return html; } function positionExifWrapper(wrapper) { if (!wrapper) return; var img = document.querySelector('#isee-image'); if (!img) return; var imgRect = img.getBoundingClientRect(); if (imgRect.width === 0 || imgRect.height === 0) return; var position = iseeConfig.exifPosition; var gap = (iseeConfig.linePadding || 20) + 5; var windowWidth = window.innerWidth; var windowHeight = window.innerHeight; wrapper.style.position = 'fixed'; wrapper.style.left = 'auto'; wrapper.style.right = 'auto'; wrapper.style.top = 'auto'; wrapper.style.bottom = 'auto'; wrapper.style.width = 'auto'; wrapper.style.transform = 'none'; wrapper.style.margin = '0'; wrapper.style.maxWidth = 'none'; wrapper.style.display = 'block'; wrapper.style.zIndex = '2147483647'; if (position === 'left') { var wrapperWidth = wrapper.offsetWidth || 200; var wrapperHeight = wrapper.offsetHeight || 100; var leftPos = imgRect.left - wrapperWidth - gap; if (leftPos < 10) leftPos = 10; wrapper.style.left = leftPos + 'px'; var topPos = imgRect.top + imgRect.height / 2 - wrapperHeight / 2; if (topPos < 10) topPos = 10; if (topPos + wrapperHeight > windowHeight - 10) { topPos = windowHeight - wrapperHeight - 10; } wrapper.style.top = topPos + 'px'; } else if (position === 'right') { var wrapperWidth = wrapper.offsetWidth || 200; var wrapperHeight = wrapper.offsetHeight || 100; var rightPos = windowWidth - imgRect.right - wrapperWidth - gap; if (rightPos < 10) rightPos = 10; wrapper.style.right = rightPos + 'px'; var topPos = imgRect.top + imgRect.height / 2 - wrapperHeight / 2; if (topPos < 10) topPos = 10; if (topPos + wrapperHeight > windowHeight - 10) { topPos = windowHeight - wrapperHeight - 10; } wrapper.style.top = topPos + 'px'; } else { // ★★★ 底部：始终显示在底部，允许超出屏幕，用滚动查看 ★★★ var exifWidth = imgRect.width; if (exifWidth < 200) exifWidth = 200; if (exifWidth > windowWidth - 40) exifWidth = windowWidth - 40; var inner = wrapper.querySelector('.exif-inner'); if (inner) { // ★★★ 允许滚动 ★★★ inner.style.maxHeight = 'none'; inner.style.overflowY = 'auto'; inner.style.overflowX = 'hidden'; } wrapper.style.width = exifWidth + 'px'; wrapper.style.left = imgRect.left + 'px'; // ★★★ 固定在图片底部，允许内容超出屏幕 ★★★ wrapper.style.top = (imgRect.bottom + gap) + 'px'; wrapper.style.bottom = 'auto'; wrapper.style.right = 'auto'; wrapper.style.maxHeight = 'none'; // ★★★ 如果内容超出窗口，让 wrapper 可以滚动查看 ★★★ // 设置最大高度为窗口剩余高度的 80%，超出可滚动 var maxHeight = windowHeight - (imgRect.bottom + gap) - 10; if (maxHeight < 80) { maxHeight = 80; } if (inner) { inner.style.maxHeight = maxHeight + 'px'; inner.style.overflowY = 'auto'; } // ★★★ 不再自动弹到顶部，始终保持在底部 ★★★ } } function fetchExif(imageUrl, callback) { if (!imageUrl) { callback(null); return; } var xhr = new XMLHttpRequest(); var url = iseeConfig.exifApiUrl + '?image=' + encodeURIComponent(imageUrl); xhr.open('GET', url, true); xhr.timeout = 10000; xhr.onload = function() { if (xhr.status === 200) { try { var response = JSON.parse(xhr.responseText); callback(response.exif); } catch(e) { callback(null); } } else { callback(null); } }; xhr.onerror = function() { callback(null); }; xhr.ontimeout = function() { callback(null); }; xhr.send(); } function showExif(exifData) { if (isShowing) return; if (exifShown) return; if (currentExifWrapper) { currentExifWrapper.remove(); currentExifWrapper = null; } var html = buildExifHtml( exifData, iseeConfig.exifPosition, iseeConfig.exifCompact ? iseeConfig.exifFields : null ); if (!html) return; document.body.insertAdjacentHTML('beforeend', html); var wrappers = document.body.querySelectorAll('.iseebox-exif-wrapper'); currentExifWrapper = wrappers[wrappers.length - 1]; if (!currentExifWrapper) return; isShowing = true; exifShown = true; positionExifWrapper(currentExifWrapper); setTimeout(function() { if (currentExifWrapper) { positionExifWrapper(currentExifWrapper); } }, 100); setTimeout(function() { if (currentExifWrapper) { positionExifWrapper(currentExifWrapper); } }, 300); if (showTimeout) { clearTimeout(showTimeout); } showTimeout = setTimeout(function() { if (currentExifWrapper) { currentExifWrapper.classList.add('show'); } isShowing = false; }, 400); } function hideExif() { if (showTimeout) { clearTimeout(showTimeout); showTimeout = null; } if (currentExifWrapper) { currentExifWrapper.classList.remove('show'); setTimeout(function() { if (currentExifWrapper) { currentExifWrapper.remove(); currentExifWrapper = null; } isShowing = false; exifShown = false; }, 400); } isShowing = false; exifShown = false; isOpened = false; } function resetExifState() { if (showTimeout) { clearTimeout(showTimeout); showTimeout = null; } if (currentExifWrapper) { currentExifWrapper.remove(); currentExifWrapper = null; } isShowing = false; exifShown = false; exifDataCache = null; currentImageUrl = null; } var imageLoadedHandler = function(e) { var imageUrl = e.detail ? e.detail.imageUrl : null; console.log('EXIF: Lightbox opened, URL:', imageUrl); if (imageUrl !== currentImageUrl) { resetExifState(); currentImageUrl = imageUrl; } isOpened = true; if (showTimeout) { clearTimeout(showTimeout); showTimeout = null; } isShowing = false; if (imageUrl) { fetchExif(imageUrl, function(data) { if (data && Object.keys(data).length > 0) { exifDataCache = data; setTimeout(function() { if (isOpened && !exifShown) showExif(data); }, 600); } else { console.log('EXIF: No data found for', imageUrl); } }); } }; document.addEventListener('iseebox:imageLoaded', imageLoadedHandler); var closeObserver = new MutationObserver(function(mutations) { for (var i = 0; i < mutations.length; i++) { var removedNodes = mutations[i].removedNodes; for (var j = 0; j < removedNodes.length; j++) { var node = removedNodes[j]; if (node && node.id === 'isee-overlay') { console.log('EXIF: Overlay removed'); hideExif(); return; } } } }); closeObserver.observe(document.body, { childList: true, subtree: true }); document.addEventListener('iseebox:closed', function() { console.log('EXIF: Closed event'); hideExif(); }); var repositionTimeout = null; function repositionExif() { if (currentExifWrapper && currentExifWrapper.classList.contains('show')) { positionExifWrapper(currentExifWrapper); } } window.addEventListener('resize', function() { clearTimeout(repositionTimeout); repositionTimeout = setTimeout(repositionExif, 200); }); console.log('EXIF module initialized'); })(); } })();

标签 源码资源 下的文章

标签源码资源下的文章