course: html prototype

circuit/25-2/course_project/index.js

@@ -0,0 +1,70 @@
+class CTX {
+  addPageNumbers() {
+    let pages = this.pages
+    for (let i = 2; i <= pages.length; i++) {
+      let div = document.createElement('div')
+      div.classList.add('page-number')
+      div.textContent = i
+      pages[i - 1].appendChild(div)
+    }
+  }
+
+  addTableOfContents() {
+    let hs = document.querySelectorAll('h1,h2,h3')
+    let ol = document.createElement('ol')
+    ol.classList.add('table-of-contents')
+
+    let prefix_counter = [0, 0, 0]
+    let page_counter = 2
+    let page
+
+    for (let h of hs) {
+      let level = {
+        'H1': 0,
+        'H2': 1,
+        'H3': 2,
+      }[h.tagName]
+
+      prefix_counter[level]++
+      for (let i = level + 1; i < prefix_counter.length; i++)
+        prefix_counter[i] = 0
+
+      let prefix = ''
+      for (let i = 0; i <= level; i++)
+        prefix += prefix_counter[i] + '.'
+
+      prefix = prefix.slice(0, prefix.length - 1)
+      console.log(h.tagName)
+
+      let li = document.createElement('li')
+      let name = document.createElement('span')
+      let page_number = document.createElement('span')
+
+      name.innerHTML = prefix + ' - ' + h.innerHTML
+
+      let cur_page = h.closest('section')
+      if (page != cur_page) {
+        page = cur_page
+        page_counter++
+      }
+      page_number.innerHTML = page_counter
+
+      li.append(name, page_number)
+      ol.appendChild(li)
+    }
+
+    let header = document.createElement('header')
+    header.innerText = 'Содержание'
+    this.pages[0].after(document.createElement('section'))
+    this.pages[1].appendChild(header)
+    this.pages[1].appendChild(ol)
+  }
+
+  get pages() {
+    return document.getElementsByTagName('section')
+  }
+}
+
+let ctx = new CTX
+ctx.addTableOfContents()
+ctx.addPageNumbers()