rename chapter/lesson

Html/apps/static/js/teacher_course_setting.js

@@ -8,6 +8,7 @@ toggleBtn.addEventListener('click', () => {
 });
 
 function enableReorderMode() {
+  setRenameMode(false);
   toggleBtn.setAttribute('aria-pressed', 'true');
   chapterListEl.classList.add('reorder-mode');
   makeChaptersDraggable(true);
@@ -32,6 +33,147 @@ function disableReorderMode() {
     btn.style.display = 'block';
   });
 }
+const chapterList   = document.getElementById('chapter-list');
+const btnReorder    = document.getElementById('toggle-reorder');
+const btnRename     = document.getElementById('toggle-rename');
+
+function setReorderMode(enabled) {
+  if (enabled) {
+    enableReorderMode();
+  } else {
+    disableReorderMode();
+  }
+}
+function setRenameMode(enabled) { 
+  btnRename?.setAttribute('aria-pressed', String(enabled));
+  chapterList.classList.toggle('chapter-rename-mode', enabled);
+  // const chapterContainers = document.querySelectorAll('li.chapter-item');
+  // const lessonContainers = document.querySelectorAll('li.lesson-item');
+
+  // chapterContainers.forEach(container => {
+  //   container.classList.toggle('chapter-rename-mode', enabled);
+  // });
+  
+  // lessonContainers.forEach(container => {
+  //   container.classList.toggle('chapter-rename-mode', enabled);
+  // });
+  if (enabled) {
+    document.querySelectorAll('.add-lesson-btn').forEach(btn => {
+      btn.style.display = 'none';
+    });
+    document.querySelectorAll('.add-chapter-btn').forEach(btn => {
+      btn.style.display = 'none';
+    });
+  } else {
+    document.querySelectorAll('.add-lesson-btn').forEach(btn => {
+      btn.style.display = 'block';
+    });
+    document.querySelectorAll('.add-chapter-btn').forEach(btn => {
+      btn.style.display = 'block';
+    });
+  }
+}
+
+// —— 点击“改名模式”按钮 —— //
+btnRename?.addEventListener('click', (e) => {
+  e.preventDefault();
+  
+  const willEnable = btnRename.getAttribute('aria-pressed') !== 'true';
+  if (willEnable && btnReorder?.getAttribute('aria-pressed') === 'true') {
+    setReorderMode(false);
+  }
+  setRenameMode(willEnable);
+});
+
+// 获取展示文字：chapter-item 用 <strong>，lesson-item 用 <span>
+function getDisplayText(el) {
+  if (el.classList.contains('chapter-item')) {
+    return (el.querySelector('strong')?.textContent ?? '').trim();
+  }
+  if (el.classList.contains('lesson-item')) {
+    return (el.querySelector('span')?.textContent ?? '').trim();
+  }
+  // 兜底
+  return '';
+}
+
+// 设置展示文字：chapter-item 用 <strong>，lesson-item 用 <span>
+function setDisplayText(el, text) {
+  if (el.classList.contains('chapter-item')) {
+    let node = el.querySelector('strong');
+    if (!node) {
+      node = document.createElement('strong');
+      el.prepend(node);
+    }
+    node.textContent = text;
+    return;
+  }
+  if (el.classList.contains('lesson-item')) {
+    let node = el.querySelector('span');
+    if (!node) {
+      node = document.createElement('span');
+      el.prepend(node);
+    }
+    node.textContent = text;
+    return;
+  }
+}
+
+
+// —— 事件代理：改名模式下点击 li 触发重命名 —— //
+chapterList.addEventListener('click', (e) => {
+  if (btnRename?.getAttribute('aria-pressed') !== 'true') return; // 非改名模式
+
+  const li = e.target.closest?.('li.chapter-item, li.lesson-item');
+  if (!li) return;
+
+  e.preventDefault();
+  e.stopPropagation();
+  e.stopImmediatePropagation();   // 若你担心同层还有其他捕获监听，也可用这个更狠的
+
+  const isChapter = li.classList.contains('chapter-item');
+  const isLesson  = li.classList.contains('lesson-item');
+
+  // 读取旧名（章节：显示文字；课时：优先 data-lesson-name）
+  const oldName = isLesson
+    ? (li.dataset.lessonName || getDisplayText(li))
+    : getDisplayText(li);
+
+  openTitleEditor({
+    title: isChapter ? '修改章节名称' : '修改课时名称',
+    initialValue: oldName,
+    onSubmit: async (value) => {
+      const res = validateTitle(value);
+      // 先持久化,成功后在本地同步
+      const resSave = await fetch(`/materials/structure/rename/${encodeURIComponent(EDIT_COURSE_CURRENT.material_id)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ is_chapter: isChapter, chapter_name: isChapter ? oldName : li.dataset.chapterName, lesson_name: isChapter ? "" : li.dataset.lessonName, new_name: value })
+      })
+      const data = await resSave.json();
+
+      if (!data.ok) return { ok: false, message: data.message };
+        const newName = res.value;
+        if (isChapter) { // 将章节改名同步到本地
+          setDisplayText(li, newName);
+          if (li.dataset.chapterName !== undefined) {
+            li.dataset.chapterName = newName;
+          }
+          const scope = li.querySelectorAll?.('li.lesson-item');
+          if (scope && scope.length) {
+            scope.forEach(item => {
+              item.dataset.chapterName = newName;
+            });
+          } 
+        }
+        if (isLesson) { // 将课时改名同步到本地
+          setDisplayText(li, newName);
+          li.dataset.lessonName = newName;
+        }
+      return { ok: true };
+    }
+  });
+});
 
 /* 工具选择器 */
 function getChapterItems() {