parent
256743d3b9
commit
8154807f90
|
|
@ -9,13 +9,8 @@
|
|||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f9;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
text-align: left;
|
||||
padding-left: 20px;
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -24,9 +19,7 @@
|
|||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
overflow-y: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -39,13 +32,10 @@
|
|||
padding: 15px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 8px;
|
||||
min-height: 200px;
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.8;
|
||||
max-height: 420px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#comments p {
|
||||
|
|
@ -55,6 +45,15 @@
|
|||
|
||||
.button-container {
|
||||
margin-top: 20px;
|
||||
position: sticky;
|
||||
bottom: 20px;
|
||||
background: white;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
@ -65,7 +64,6 @@
|
|||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
margin: 0 10px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
|
|
@ -77,6 +75,16 @@
|
|||
background-color: #ddd;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#pageTitle {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: white;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
z-index: 100;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -92,76 +100,86 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
let bookId = 1; // Default book ID
|
||||
let currentPage = 1; // Current page number
|
||||
let bookId = 1;
|
||||
let currentPage = 1;
|
||||
|
||||
// Get bookId from URL parameters
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
bookId = urlParams.get('id') || 1; // Get id from query string or default to 1
|
||||
bookId = urlParams.get('id') || 1;
|
||||
|
||||
async function getComment() {
|
||||
try {
|
||||
// 先清空内容，显示加载状态
|
||||
document.getElementById("comments").innerHTML = "Loading...";
|
||||
|
||||
const response = await fetch(`/common/getBookCommentByPath?id=${bookId}`);
|
||||
const data = await response.json();
|
||||
if (data && data.data) {
|
||||
console.log(data.data)
|
||||
|
||||
// 拼接卷和节作为标题
|
||||
const volumeTitle = data.data.volume || 'Unknown Volume';
|
||||
const sectionTitle = data.data.section || 'Unknown Section';
|
||||
const fullTitle = `${volumeTitle} - ${sectionTitle}`;
|
||||
|
||||
// 设置页面标题
|
||||
document.title = fullTitle; // 设置浏览器标签页标题
|
||||
document.title = fullTitle;
|
||||
document.getElementById("pageTitle").innerHTML = fullTitle;
|
||||
|
||||
// 设置评论内容
|
||||
document.getElementById("comments").innerHTML = formatContent(data.data.sectionContent);
|
||||
|
||||
// 强制滚动到顶部
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
checkButtonState();
|
||||
|
||||
// Scroll to top after content is loaded
|
||||
scrollToTop();
|
||||
} else {
|
||||
document.getElementById("comments").innerHTML = "No comments found.";
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("Error fetching data:", error);
|
||||
console.error("Error fetching data:", error);
|
||||
document.getElementById("comments").innerHTML = "Error loading content.";
|
||||
}
|
||||
}
|
||||
|
||||
// Format content to add indent and paragraph spacing
|
||||
function formatContent(content) {
|
||||
const paragraphs = content.split('\n').map(paragraph => `<p>${paragraph}</p>`).join('');
|
||||
return paragraphs;
|
||||
if (!content) return '';
|
||||
return content.split('\n')
|
||||
.filter(para => para.trim())
|
||||
.map(para => `<p>${para}</p>`)
|
||||
.join('');
|
||||
}
|
||||
|
||||
// Navigation function to go to previous or next comment
|
||||
function navigateComment(direction) {
|
||||
if (direction === 'prev') {
|
||||
currentPage = Math.max(1, currentPage - 1); // Ensure page number doesn't go below 1
|
||||
} else if (direction === 'next') {
|
||||
currentPage = currentPage + 1; // Increment for next page
|
||||
if (direction === 'prev' && currentPage > 1) {
|
||||
currentPage--;
|
||||
} else if (direction === 'next' && currentPage < 100000) {
|
||||
currentPage++;
|
||||
}
|
||||
|
||||
// Update URL and reload comment
|
||||
bookId = currentPage;
|
||||
|
||||
// 更新URL，但不刷新页面
|
||||
const newUrl = new URL(window.location);
|
||||
newUrl.searchParams.set('id', bookId);
|
||||
window.history.pushState({}, '', newUrl);
|
||||
|
||||
getComment();
|
||||
}
|
||||
|
||||
// Check button state based on the current page
|
||||
function checkButtonState() {
|
||||
document.getElementById("prevButton").disabled = currentPage === 1;
|
||||
document.getElementById("nextButton").disabled = currentPage === 100000; // Adjust as needed
|
||||
document.getElementById("nextButton").disabled = currentPage === 100000;
|
||||
}
|
||||
|
||||
// Scroll the page to the top
|
||||
function scrollToTop() {
|
||||
console.log("Scrolling to top..."); // Debug log
|
||||
window.scrollTo(0, 0); // Scroll to the top of the page
|
||||
}
|
||||
|
||||
// Load comments when the page is ready
|
||||
// 初始加载
|
||||
getComment();
|
||||
|
||||
// 监听浏览器前进后退
|
||||
window.onpopstate = function(event) {
|
||||
const newId = new URLSearchParams(window.location.search).get('id') || 1;
|
||||
if (bookId !== newId) {
|
||||
bookId = newId;
|
||||
currentPage = parseInt(newId);
|
||||
getComment();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue