zm/journal_com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tijiao

Browse Source
This commit is contained in:
始于初见
2025-05-07 10:00:54 +08:00
parent 4ab2d4f177
commit c7efc41b0f
1 changed files with 253 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

470
js/article.js
View File

@@ -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("<p>") >= 0) {
str += "<div class='Ptitle'>" + arr[i].content + "</div>"
str += `<div class="Ptitle" id="${sectionId}">${arr[i].content}</div>`
} else {
str += '<div class="Ptitle"><p>' + arr[i].content + '</p></div>'
str += `<div class="Ptitle" id="${sectionId}"><p>${arr[i].content}</p></div>`
}
} else {
if (arr[i].content.indexOf("<p>") >= 0) {
str += arr[i].content
str += arr[i].content.replace("<p>", `<p id="${sectionId}">`);
} else {
str += '<p>' + arr[i].content + '</p>'
str += `<p id="${sectionId}">${arr[i].content}</p>`
}
}
} else {
var picsrc = 'https://submission.tmrjournals.com/public/mainimg/' + arr[i].content;
var fun = "picPreview('" + picsrc + "');"
// console.log(fun)
str += "<div class='imgHnkl'><img class='mainPicItem' onclick=" + fun + " src='https://submission.tmrjournals.com/public/mainimg/"
str += `<div class='imgHnkl' id="${sectionId}">` + "<img class='mainPicItem' onclick=" + fun + " src='https://submission.tmrjournals.com/public/mainimg/"
+ arr[i].content + "' width='" + arr[i].width + "'/><p style='font-size: 14px;font-family: 'Charis SIL';'>'" + arr[i].note + "</p></div>"
}
}
str = `<div style="margin-left:300px;">${str}</div>`
$('.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('<div id="ArticleRef" class="ArticleRef"><p><b>References</b></p>' + refs + '</div>');
$('.wen_rong .content-box .conthtmn').append('<div id="ArticleRef" style="margin-left:300px;" class="ArticleRef"><p id="References"><b>References</b></p>' + refs + '</div>');
}
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 = $('<div>').html(item.note).text(); // 提取纯文本
var picsrc = 'https://submission.tmrjournals.com/public/articleImage/' + item.image.url;
var fun = "picPreview('" + picsrc + "');"
// console.log(fun)
contentHtml = `
<p contenteditable="false" main-state="${item.state}" style="display:flex;align-items: center;
@@ -7716,9 +7715,7 @@ function article_con() {
}</p>
</p>
`;
navLinks.image.push({ sectionId: sectionId, type: 'image', text: textContentimg || 'Image ' + (index + 1), href: '#' + sectionId, url: picsrc });
} else if (item.type == 2) {
var textContentTable = $('<div>').html(item.table.title).text(); // 提取纯文本
var tableList = JSON.parse(item.table.table_data);
contentHtml = `
@@ -7754,16 +7751,12 @@ function article_con() {
text-align:center;color:#333;" >${item.table.note ? item.table.note : ''
}</p>
</div>
`; navLinks.table.push({ sectionId: sectionId, type: 'table', text: textContentTable || 'Table ' + (index + 1), href: '#' + sectionId });
`;
} else {
var textContent = $('<div>').html(item.content).text(); // 提取纯文本
contentHtml = `<p class="${item.is_h1 ? 'Ptitle pMain' : 'pMain'} " style="font-family: 'Charis SIL';min-height:12px;" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}" id="${sectionId}">${item.content}</p>`;
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 = `<div class="newHtml2" style="margin-left:300px;">${htmlContent}</div>`
$('.wen_rong .content-box .conthtmn').html(htmlContent);
console.log('navLinks.forEach at line 7752:', navLinks)
// 引用
var navHtml = `<div class="anchor-nav"><div class="jo-catalog-title"><span >OUTLINE</span></div><ul>`;
// 先添加 content 类型
navLinks.content.forEach(link => {
navHtml += `<li data-section="${link.sectionId}" class="outiline-item outiline-content ${link.is_h1 ? 'outiline-item-h1' : ''} ${link.is_h2 ? 'outiline-item-h2' : ''}" ><a href="${link.href}" style="font-style: italic;
font-weight: bold;"><b>${link.text}</b></a></li>`;
});
if (navLinks.image.length > 0) {
navHtml += `<li class="outiline-item outiline-img">
<h2 style="margin-bottom:20px;">Figures (${navLinks.image.length})</h2>
<div class="navLinksFigures">`;
// 使用 map 来遍历并返回 HTML 字符串
navHtml += navLinks.image.map((link, linkIndex) => {
return `<a href="${link.href}" data-section="${link.sectionId}">
<img src="${link.url}" style="object-fit: scale-down;width: 80px; height: 80px;border-radius:2px;border:1px solid #e0d4d4" />
<p style="margin-bottom:0; color: #333; cursor: pointer;font-family: 'Charis SIL';">Figure${linkIndex + 1}
</p>
</a>`;
}).join(''); // 使用 join 来拼接所有的 HTML 字符串
navHtml += `</div></li>`;
}
if (navLinks.table.length > 0) {
navHtml += `<li class="outiline-item outiline-img">
<h2 style="margin-bottom:20px;">Tables (${navLinks.table.length})</h2>
<div class="navLinksTables" >`;
// 使用 map 来遍历并返回 HTML 字符串
navHtml += navLinks.table.map((link, linkIndex) => {
return `<a data-section="${link.sectionId}" href="${link.href}" style="border-bottom: 1px solid rgb(255, 255, 255);
box-sizing: border-box;
font-weight: 500 !important;
padding: 2px 0 0 16px;
color: #333;
cursor: pointer;
font-family: 'Charis SIL';
line-height:18px;min-height: 12px;"
>
${link.text}
</a>`;
}).join(''); // 使用 join 来拼接所有的 HTML 字符串
navHtml += `</div></li>`;
}
if (result.data.refers.length > 0) {
navHtml += `<li class="outiline-item outiline-img">
<h2 style="margin-bottom:20px;"><a href="#References">References (${result.data.refers.length})</a></h2>
</li>`;
}
// 再添加 image 类型（按序号排序）
// 最后添加 table 类型（按序号排序）
navHtml += '</ul></div>';
if (result.data.refers.length > 0) { // 如果有引用数据
var refs = '';
var xuhao = 0;
@@ -7877,137 +7807,7 @@ function article_con() {
// 将生成的所有引用内容插入到页面中
$('.wen_rong .content-box .conthtmn').append('<div id="ArticleRef" style="margin-left:300px;" class="ArticleRef"><p id="References"><b>References</b></p>' + refs + '</div>');
}
$('.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 = $('<div>').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 = $('<div>').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 = $('<div>').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 = $('<div>').html(item.table.title).text(); // 提取纯文本
navLinks.table.push({ sectionId: sectionId, type: 'table', text: textContentTable || 'Table ' + (index + 1), href: '#' + sectionId });
} else {
var textContent = $('<div>').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 = `<div class="anchor-nav"><div class="jo-catalog-title"><span >OUTLINE</span></div><ul>`;
// 先添加 content 类型
navLinks.content.forEach(link => {
navHtml += `<li data-section="${link.sectionId}" class="outiline-item outiline-content ${link.is_h1 ? 'outiline-item-h1' : ''} ${link.is_h2 ? 'outiline-item-h2' : ''}" ><a href="${link.href}" style="font-style: italic;
font-weight: bold;"><b>${link.text}</b></a></li>`;
});
if (navLinks.image.length > 0) {
navHtml += `<li class="outiline-item outiline-img">
<h2 style="margin-bottom:20px;">Figures (${navLinks.image.length})</h2>
<div class="navLinksFigures">`;
// 使用 map 来遍历并返回 HTML 字符串
navHtml += navLinks.image.map((link, linkIndex) => {
return `<a href="${link.href}" data-section="${link.sectionId}">
<img src="${link.url}" style="object-fit: scale-down;width: 80px; height: 80px;border-radius:2px;border:1px solid #e0d4d4" />
<p style="margin-bottom:0; color: #333; cursor: pointer;font-family: 'Charis SIL';">Figure${linkIndex + 1}
</p>
</a>`;
}).join(''); // 使用 join 来拼接所有的 HTML 字符串
navHtml += `</div></li>`;
}
if (navLinks.table.length > 0) {
navHtml += `<li class="outiline-item outiline-img">
<h2 style="margin-bottom:20px;">Tables (${navLinks.table.length})</h2>
<div class="navLinksTables" >`;
// 使用 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, `<span style="color:#006699;">${TableIndex}</span>`);
console.log(link.text, '99999')
}
return `<a data-section="${link.sectionId}" href="${link.href}" style="border-bottom: 1px solid rgb(255, 255, 255);
box-sizing: border-box;
font-weight: 500 !important;
padding: 2px 0 0 16px;
color: #333;
cursor: pointer;
font-family: 'Charis SIL';
line-height:18px;min-height: 12px;"
>
${link.text}
</a>`;
}).join(''); // 使用 join 来拼接所有的 HTML 字符串
navHtml += `</div></li>`;
}
if (refs.length > 0) {
navHtml += `<li class="outiline-item outiline-img">
<h2 style="margin-bottom:20px;"><a href="#References">References (${refs.length})</a></h2>
</li>`;
}
navHtml += '</ul></div>';
$('.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) {