Merge pull request #5 from abrosimovsp/master

05-dom-document-loading task

04-oop-basic-intro-to-dom/1-column-chart/index.js

@@ -6,7 +6,7 @@ export default class ColumnChart {
         this.label = obj?.label
         this.value = obj?.hasOwnProperty('formatHeading') ? obj.formatHeading(obj.value) : obj?.value
         this.link = obj?.link 
-        this.element = this.setElement()
+        this.element = this.createElement()
     }
 
     setLink() {
@@ -16,7 +16,7 @@ export default class ColumnChart {
         return ''
     }
 
-    setElement() {
+    createElement() {
         const currentElement = document.createElement('div')
         currentElement.innerHTML = `
         <div class="column-chart" style="--chart-height: ${this.chartHeight}">
@@ -56,7 +56,7 @@ export default class ColumnChart {
 
     update(data) {
         this.data = data
-        this.element.innerHTML = this.setElement()
+        this.element.innerHTML = this.createElement()
     }
 
     remove() {

05-dom-document-loading/1-notification/index.js

@@ -1,3 +1,54 @@
 export default class NotificationMessage {
 
+    element
+    static lastShownElement
+
+    constructor(msg = '', options = {}){
+        this.msg = msg
+        const {
+            duration = 2000,
+            type = 'success'
+        } = options
+        this.duration = duration
+        this.type = type
+        this.element = this.createMessage()
+    }
+
+    createMessage() {
+        const msgElement = document.createElement('div')
+        msgElement.innerHTML = `
+            <div class="notification ${this.type}" style="--value:${this.duration / 1000}s">
+                <div class="timer"></div>
+                <div class="inner-wrapper">
+                    <div class="notification-header">${this.type}</div>
+                    <div class="notification-body">
+                    ${this.msg}
+                    </div>
+                </div>
+            </div>
+        `
+        return msgElement.firstElementChild
+    }
+
+    show(targetElement = document.body) {
+        targetElement.append(this.element)
+
+        if (NotificationMessage.lastShownElement) {
+            NotificationMessage.lastShownElement.destroy()
+        }
+
+        NotificationMessage.lastShownElement = this
+
+        this.timerId = setTimeout(() => this.destroy(), this.duration)
+    }
+
+    destroy() {
+        clearTimeout(this.timerId)
+        this.remove()
+    }
+
+    remove() {
+        this.element.remove()
+    }
+
 }

05-dom-document-loading/2-sortable-table-v1/index.js

@@ -1,6 +1,108 @@
 export default class SortableTable {
+
+  element
+  subElements = {}
+
   constructor(headerConfig = [], data = []) {
+    this.headerConfig = headerConfig
+    this.data = data
+    this.element = this.createElement()
+    this.selectSubElements()
+  }
+
+  createElement() {
+    const element = document.createElement('div')
+    element.innerHTML = `
+    <div data-element="productsContainer" class="products-list__container"></div>
+    `
+    element.firstElementChild.append(this.createTable())
+    return element.firstElementChild
+  }
+
+  createTable() {
+    const elementTable = document.createElement('div')
+    elementTable.innerHTML = `
+      <div class="sortable-table"></div>
+    `
+    elementTable.firstElementChild.append(this.createHeader())
+    elementTable.firstElementChild.append(this.createBody())
+
+    return elementTable.firstElementChild
+  }
+
+  createHeader() {
+    let htmlCode = ``
+    const elementHeader = document.createElement('div')
+    elementHeader.innerHTML = `
+    <div data-element="header" class="sortable-table__header sortable-table__row"></div>
+    `
+
+    this.headerConfig.forEach(el => {
+      htmlCode += `
+        <div class="sortable-table__cell" data-id="${el.id}" data-sortable="${el.sortable}">
+          <span>${el.title}</span>
+        </div>
+      `
+    })
+    elementHeader.firstElementChild.innerHTML = htmlCode
+    return elementHeader.firstElementChild
+  }
+
+  createBody(data = this.data) {
+    let htmlCode = ``
+    const elementBody = document.createElement('div')
+    elementBody.innerHTML = `
+    <div data-element="body" class="sortable-table__body"></div>
+    `
+
+    data.forEach(el => {
+      htmlCode += `<a href="/products/${el.id}" class="sortable-table__row">`
+      this.headerConfig.forEach(header => {
+        if (header.template) {
+          htmlCode += header.template(el[header.id])
+        } else {
+          htmlCode += `<div class="sortable-table__cell">${el[header.id]}</div>`
+        }
+      })
+      htmlCode += `</a>`
+    })
+
+    elementBody.firstElementChild.innerHTML = htmlCode
+    return elementBody.firstElementChild
+  }
+
+  sort(fieldValue, orderValue) {
+    const order = orderValue == 'asc' ? 1 : -1;
+
+    const sortedData = [...this.data].sort((a, b) => { 
+      if (typeof a[fieldValue] === 'number') {
+        return order * (a[fieldValue] - b[fieldValue]);
+      } else {
+        return order * a[fieldValue].localeCompare(b[fieldValue], ['ru', 'en'])
+      }
+    });
+
+    this.data = sortedData;
+
+    const currentBody = this.element.querySelector('[data-element="body"]')
+    currentBody.remove()
+
+    const newBody = this.createBody(sortedData)
+
+    const table = this.element.querySelector('[class="sortable-table"]')
+    table.append(newBody)
+
+    this.selectSubElements()
+  }
+
+  destroy() {
+    this.element.remove()
+  }
 
+  selectSubElements() {
+    this.element.querySelectorAll('[data-element]').forEach(element => {
+      this.subElements[element.dataset.element] = element;
+    });
   }
 }