diff --git a/js/article.js b/js/article.js index f1ac90e..d39e9af 100644 --- a/js/article.js +++ b/js/article.js @@ -1,3 +1,5 @@ + + // 列表 function at_list() { @@ -7585,29 +7587,32 @@ function article_con() { var arr = result.data.mains; var str = ''; for (var i = 0; i < arr.length; i++) { + let sectionId = 'section-' + i; // 生成唯一的 ID if (arr[i].width == 0) { if (arr[i].is_title == 1) { if (arr[i].content.indexOf("

") >= 0) { - str += "

" + arr[i].content + "
" + str += `
${arr[i].content}
` } else { - str += '

' + arr[i].content + '

' + str += `

${arr[i].content}

` } } else { if (arr[i].content.indexOf("

") >= 0) { - str += arr[i].content + str += arr[i].content.replace("

", `

`); } else { - str += '

' + arr[i].content + '

' + str += `

${arr[i].content}

` } } } else { var picsrc = 'https://submission.tmrjournals.com/public/mainimg/' + arr[i].content; var fun = "picPreview('" + picsrc + "');" // console.log(fun) - str += "
` + "

'" + arr[i].note + "

" } } + str = `
${str}
` $('.wen_rong .content-box .conthtmn').html(str); + // 引用 if (result.data.refers.length > 0) { // 如果有引用数据 var refs = ''; @@ -7646,10 +7651,10 @@ function article_con() { } } // 将生成的所有引用内容插入到页面中 - $('.wen_rong .content-box .conthtmn').append('

References

' + refs + '
'); + $('.wen_rong .content-box .conthtmn').append('

References

' + refs + '
'); } - + initArticleHtml(arr, result.data.refers, html_type) } }, error: function () { @@ -7680,13 +7685,8 @@ function article_con() { var str = ''; - var htmlContent = '' - var navLinks = { - content: [], // 存放 content 类型的链接 - image: [], // 存放 image 类型的链接 - table: [] // 存放 table 类型的链接 - }; + htmlContent += arr.map((item, index) => { //批注 @@ -7694,10 +7694,9 @@ function article_con() { let sectionId = 'section-' + index; // 生成唯一的 ID // 判断是否是图片 if (item.type == 1) { - var textContentimg = $('
').html(item.note).text(); // 提取纯文本 + var picsrc = 'https://submission.tmrjournals.com/public/articleImage/' + item.image.url; var fun = "picPreview('" + picsrc + "');" - // console.log(fun) contentHtml = `

${item.table.note ? item.table.note : '' }

- `; navLinks.table.push({ sectionId: sectionId, type: 'table', text: textContentTable || 'Table ' + (index + 1), href: '#' + sectionId }); - + `; } else { - var textContent = $('
').html(item.content).text(); // 提取纯文本 + contentHtml = `

${item.content}

`; - if (item.is_h1 ) { - navLinks.content.push({ sectionId: sectionId, type: 'content', text: textContent, href: '#' + sectionId, is_h1: item.is_h1, }); - } } @@ -7773,70 +7766,7 @@ function article_con() { }).join(''); htmlContent = `
${htmlContent}
` $('.wen_rong .content-box .conthtmn').html(htmlContent); - console.log('navLinks.forEach at line 7752:', navLinks) - // 引用 - var navHtml = `
OUTLINE
'; if (result.data.refers.length > 0) { // 如果有引用数据 var refs = ''; var xuhao = 0; @@ -7877,137 +7807,7 @@ function article_con() { // 将生成的所有引用内容插入到页面中 $('.wen_rong .content-box .conthtmn').append('

References

' + refs + '
'); } - $('.wen_rong .content-box .conthtmn').prepend(navHtml); - // 给导航栏添加固定定位样式 - // 给导航栏添加固定定位样式 - $('.anchor-nav').css({ - 'position': 'fixed', - // 'display': 'none', - 'top': '0', // 固定在顶部 - 'left': '0', // 固定在左侧 - 'width': '285px', // 设置固定宽度 - 'background': '#ffffff', // 背景色 - - // 'border-radius': '12px', // 圆角效果 - 'box-shadow': '0 4px 8px rgba(0, 0, 0, 0.1)', // 阴影效果 - 'z-index': '999', // 确保导航栏位于其他元素之上 - 'overflow-y': 'auto', // 允许垂直滚动 - 'height': '100vh', // 让导航栏充满整个页面高度 - 'position': 'sticky', /* 固定定位 */ - 'float': 'left', /* 固定定位 */ - /* 导航栏顶部距离为0 */ - 'box-shadow': '2px 0 5px rgba(0, 0, 0, 0.1)', - }); - $('.jo-catalog-title').css({ - - - 'line-height': '40px', - 'font-size': '18px', - 'color': '#333', - 'border-bottom': '1px solid #f0f0f0', - - }); - $('.outiline-item').css({ - - - 'border-bottom': '1px solid #fff', - // 'margin-bottom': '10px', - 'box-sizing': 'border-box', - - 'font-size': '14px', - 'color': '#454545', - 'cursor': 'pointer', - }); - $('.outiline-content').css({ - 'padding': '4px 0', - 'margin-left': '16px', - - 'color': '#333', - 'cursor': 'pointer', - 'font-family': 'Charis SIL', - // 'border-left': '3px solid #efefef', - - }); - - $('.outiline-img').css({ - - 'margin-top': '20px', - 'margin-bottom': '20px', - // 'border-left': '3px solid #efefef', - - }); - $('.outiline-table').css({ - - 'margin-top': '20px', - 'margin-bottom': '20px', - - // 'border-left': '3px solid #efefef', - - }); - $('.navLinksFigures').css({ - 'display': 'flex', - 'flex-wrap': 'wrap', - 'gap': '10px', - - 'margin-bottom': '10px', - 'margin-top': '10px', - - }); - $('.navLinksTables').css({ - 'display': 'flex', - 'flex-wrap': 'wrap', - 'gap': '4px', - - 'margin-bottom': '10px', - 'margin-top': '10px', - - }); - - // 在滚动时保持导航栏在视口内 - - $(document).ready(function () { - // 监听右侧滚动区域 - $('.newBox').scroll(function () { - var scrollTop = $(this).scrollTop(); // 获取当前右侧滚动的位置 - var scrollHeight = $(this)[0].scrollHeight; // 获取右侧滚动区域的总高度 - var containerHeight = $(this).height(); // 获取右侧容器的高度 - - // 获取所有右侧的 .pMain - var sections = $('.newBox').find('.pMain'); - var navLinks = $('.anchor-nav').find('a'); // 获取所有左侧的导航链接 - - // 初始化清除所有导航链接的高亮 - navLinks.css({ - 'color': '', // 恢复默认颜色 - 'font-weight': '' // 恢复默认字体粗细 - }); - - // 遍历所有的 section - sections.each(function (index, section) { - var sectionTop = $(section).offset().top - $('.newBox').offset().top + scrollTop; // 计算每个 .pMain 相对于 .newBox 的位置 - var sectionBottom = sectionTop + $(section).outerHeight(); // 获取每个 section 的底部位置 - - // 判断该 section 是否在可视区域内 - if (scrollTop + containerHeight >= sectionTop && scrollTop <= sectionBottom) { - // 高亮对应的导航链接 - $(navLinks[index]).css({ - 'color': 'rgb(0, 102, 153)', // 激活时颜色变为蓝色 - 'font-weight': 'bold' // 激活时加粗 - }); - // 只高亮一个链接，找到第一个符合条件的并停止遍历 - return false; // 结束 .each() 遍历 - } - }); - }); - }); - - - - - - - - + initArticleHtml(arr, result.data.refers, html_type) } @@ -8519,6 +8319,242 @@ function article_con() { } }) } + +function initArticleHtml(htmlData, refs, type) { + var navLinks = { + content: [], // 存放 content 类型的链接 + image: [], // 存放 image 类型的链接 + table: [] // 存放 table 类型的链接 + }; + + htmlData.forEach((item, index) => { + + + let sectionId = 'section-' + index; // 生成唯一的 ID + + if (type == 0) { + if (item.width == 0) { + if (item.is_title == 1) { + var textContent = $('
').html(item.content).text(); // 提取纯文本 + navLinks.content.push({ sectionId: sectionId, type: 'content', text: textContent, href: '#' + sectionId, is_h1: item.is_title, }); + + } + } else { + var picsrc = 'https://submission.tmrjournals.com/public/mainimg/' + item.content; + var textContentimg = $('
').html(item.note).text(); // 提取纯文本 + navLinks.image.push({ sectionId: sectionId, type: 'image', text: textContentimg || 'Image ' + (index + 1), href: '#' + sectionId, url: picsrc }); + + } + } else { + // 判断是否是图片 + if (item.type == 1) { + var picsrc = 'https://submission.tmrjournals.com/public/articleImage/' + item.image.url; + var textContentimg = $('
').html(item.note).text(); // 提取纯文本 + + navLinks.image.push({ sectionId: sectionId, type: 'image', text: textContentimg || 'Image ' + (index + 1), href: '#' + sectionId, url: picsrc }); + } else if (item.type == 2) { + var textContentTable = $('
').html(item.table.title).text(); // 提取纯文本 + navLinks.table.push({ sectionId: sectionId, type: 'table', text: textContentTable || 'Table ' + (index + 1), href: '#' + sectionId }); + + } else { + var textContent = $('
').html(item.content).text(); // 提取纯文本 + + if (item.is_h1) { + + navLinks.content.push({ sectionId: sectionId, type: 'content', text: textContent, href: '#' + sectionId, is_h1: item.is_h1, }); + } + + } + } + + }) + console.log('navLinks.forEach at line 7752:', navLinks) + // 引用 + var navHtml = `
OUTLINE
    `; + + // 先添加 content 类型 + navLinks.content.forEach(link => { + navHtml += `
  • ${link.text}
    • `; + + }); + if (navLinks.image.length > 0) { + navHtml += `
  • +

    Figures (${navLinks.image.length})

    +
    `; + + // 使用 map 来遍历并返回 HTML 字符串 + navHtml += navLinks.image.map((link, linkIndex) => { + return ` + + +

    Figure${linkIndex + 1} +

    +     `; + }).join(''); // 使用 join 来拼接所有的 HTML 字符串 + + navHtml += `
    • `; + } + if (navLinks.table.length > 0) { + navHtml += `
  • +

    Tables (${navLinks.table.length})

    +
    `; + + // 使用 map 来遍历并返回 HTML 字符串 + navHtml += navLinks.table.map((link, linkIndex) => { + + let TableIndex = 'Table ' + (linkIndex + 1); + + if (link.text.includes(TableIndex)) { + // 使用正则表达式替换 "Table 1" 部分并添加高亮样式 + link.text = link.text.replace(TableIndex, `${TableIndex}`); + console.log(link.text, '99999') + } + + return ` + + ${link.text} + `; + }).join(''); // 使用 join 来拼接所有的 HTML 字符串 + + navHtml += `
    • `; + } + if (refs.length > 0) { + navHtml += `
  • +

    References (${refs.length})

    +
    • `; + } + + + navHtml += '
'; + $('.wen_rong .content-box .conthtmn').prepend(navHtml); + // 给导航栏添加固定定位样式 + // 给导航栏添加固定定位样式 + $('.anchor-nav').css({ + 'position': 'fixed', + // 'display': 'none', + 'top': '0', // 固定在顶部 + 'left': '0', // 固定在左侧 + 'width': '285px', // 设置固定宽度 + 'background': '#ffffff', // 背景色 + + // 'border-radius': '12px', // 圆角效果 + 'box-shadow': '0 4px 8px rgba(0, 0, 0, 0.1)', // 阴影效果 + 'z-index': '999', // 确保导航栏位于其他元素之上 + 'overflow-y': 'auto', // 允许垂直滚动 + 'height': '100vh', // 让导航栏充满整个页面高度 + 'position': 'sticky', /* 固定定位 */ + 'float': 'left', /* 固定定位 */ + /* 导航栏顶部距离为0 */ + 'box-shadow': '2px 0 5px rgba(0, 0, 0, 0.1)', + }); + $('.jo-catalog-title').css({ + 'line-height': '40px', + 'font-size': '18px', + 'color': '#333', + 'border-bottom': '1px solid #f0f0f0', + + }); + $('.outiline-item').css({ + 'border-bottom': '1px solid #fff', + 'box-sizing': 'border-box', + 'font-size': '14px', + 'color': '#454545', + 'cursor': 'pointer', + }); + $('.outiline-content').css({ + 'padding': '4px 0', + 'margin-left': '16px', + 'color': '#333', + 'cursor': 'pointer', + 'font-family': 'Charis SIL', + + + }); + + $('.outiline-img').css({ + + 'margin-top': '20px', + 'margin-bottom': '20px', + + + }); + $('.outiline-table').css({ + + 'margin-top': '20px', + 'margin-bottom': '20px', + + // 'border-left': '3px solid #efefef', + + }); + $('.navLinksFigures').css({ + 'display': 'flex', + 'flex-wrap': 'wrap', + 'gap': '10px', + + 'margin-bottom': '10px', + 'margin-top': '10px', + + }); + $('.navLinksTables').css({ + 'display': 'flex', + 'flex-wrap': 'wrap', + 'gap': '4px', + + 'margin-bottom': '10px', + 'margin-top': '10px', + + }); + + // 在滚动时保持导航栏在视口内 + + $(document).ready(function () { + // 监听右侧滚动区域 + $('.newBox').scroll(function () { + var scrollTop = $(this).scrollTop(); // 获取当前右侧滚动的位置 + var scrollHeight = $(this)[0].scrollHeight; // 获取右侧滚动区域的总高度 + var containerHeight = $(this).height(); // 获取右侧容器的高度 + + // 获取所有右侧的 .pMain + var sections = $('.newBox').find('.pMain'); + var navLinks = $('.anchor-nav').find('a'); // 获取所有左侧的导航链接 + + // 初始化清除所有导航链接的高亮 + navLinks.css({ + 'color': '', // 恢复默认颜色 + 'font-weight': '' // 恢复默认字体粗细 + }); + + // 遍历所有的 section + sections.each(function (index, section) { + var sectionTop = $(section).offset().top - $('.newBox').offset().top + scrollTop; // 计算每个 .pMain 相对于 .newBox 的位置 + var sectionBottom = sectionTop + $(section).outerHeight(); // 获取每个 section 的底部位置 + + // 判断该 section 是否在可视区域内 + if (scrollTop + containerHeight >= sectionTop && scrollTop <= sectionBottom) { + // 高亮对应的导航链接 + $(navLinks[index]).css({ + 'color': 'rgb(0, 102, 153)', // 激活时颜色变为蓝色 + 'font-weight': 'bold' // 激活时加粗 + }); + // 只高亮一个链接，找到第一个符合条件的并停止遍历 + return false; // 结束 .each() 遍历 + } + }); + }); + }); + + +} function isHeaderRow(rowIndex, table) {