diff --git a/04-oop-basic-intro-to-dom/1-column-chart/index.js b/04-oop-basic-intro-to-dom/1-column-chart/index.js index 3e4cfa2..1e2c5c4 100644 --- a/04-oop-basic-intro-to-dom/1-column-chart/index.js +++ b/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 = `
@@ -56,7 +56,7 @@ export default class ColumnChart { update(data) { this.data = data - this.element.innerHTML = this.setElement() + this.element.innerHTML = this.createElement() } remove() { diff --git a/05-dom-document-loading/1-notification/index.js b/05-dom-document-loading/1-notification/index.js index 1f0c2db..f7ed863 100644 --- a/05-dom-document-loading/1-notification/index.js +++ b/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 = ` +
+
+
+
${this.type}
+
+ ${this.msg} +
+
+
+ ` + 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() + } + } diff --git a/05-dom-document-loading/2-sortable-table-v1/index.js b/05-dom-document-loading/2-sortable-table-v1/index.js index d40b94b..84f08f6 100644 --- a/05-dom-document-loading/2-sortable-table-v1/index.js +++ b/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 = ` +
+ ` + element.firstElementChild.append(this.createTable()) + return element.firstElementChild + } + + createTable() { + const elementTable = document.createElement('div') + elementTable.innerHTML = ` +
+ ` + elementTable.firstElementChild.append(this.createHeader()) + elementTable.firstElementChild.append(this.createBody()) + + return elementTable.firstElementChild + } + + createHeader() { + let htmlCode = `` + const elementHeader = document.createElement('div') + elementHeader.innerHTML = ` +
+ ` + + this.headerConfig.forEach(el => { + htmlCode += ` +
+ ${el.title} +
+ ` + }) + elementHeader.firstElementChild.innerHTML = htmlCode + return elementHeader.firstElementChild + } + + createBody(data = this.data) { + let htmlCode = `` + const elementBody = document.createElement('div') + elementBody.innerHTML = ` +
+ ` + + data.forEach(el => { + htmlCode += `` + this.headerConfig.forEach(header => { + if (header.template) { + htmlCode += header.template(el[header.id]) + } else { + htmlCode += `
${el[header.id]}
` + } + }) + htmlCode += `
` + }) + + 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; + }); } }