yevhen/notes_list
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Some structure changes; added naviagation; added helpers

Browse Source
This commit is contained in:
Yevhen Odynets
2021-10-07 12:13:21 +03:00
parent 505f4dffc0
commit dc19bb1fa5
14 changed files with 417 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
src/modules/DOMController.js
View File

@@ -1,4 +1,5 @@
import Templates from '../templates/Views'
import { msgBox, createNode, destroyNode, findDates, formatDate, ucWords } from '../helpers'
import NotesAPI from './NotesAPI'
export default class DOMController {
@@ -13,15 +14,29 @@ export default class DOMController {
}
this.btnCreateNote = this.root.querySelector(window.env.querySelectors.btnCreateNote)
this.createNotesGrid(window.env.prePopulateAmount || 0)
this.listener([
[
this.btnCreateNote, 'click', (this.btnCreateNote.dataset.action || 'showError'), {
legend: 'Create Note',
}],
[this.btnCreateNote, 'click', (this.btnCreateNote.dataset.action || 'showError'), { legend: 'Create Note' }],
])
this.navTabs()
}
navTabs () {
const navTabs = document.querySelectorAll(window.env.querySelectors.navTabs + ' > li > a')
for (let i = 0; i < navTabs.length; ++i) {
this.listener([navTabs[i], 'click', 'createNotesGridByRoute', navTabs[i]])
}
}
/**
*
*/
showError () {
DOMController.alert('Error occurred :(', 3000, 3)
}
/**
@@ -29,28 +44,68 @@ export default class DOMController {
* @param msg
* @param fadeOut
* @param type
* @param womb
*/
static alert (msg = '', fadeOut = 0, type = 0) {
static alert (msg = 'Alert without message', fadeOut = 0, type = 0, womb = null) {
const alertTypes = window.env.alertTypes
const alert = this.createNode('div', { class: `uk-alert-${alertTypes[type]}`, 'uk-alert': null },
`<a class="uk-alert-close" uk-close></a>\n` + msg)
const alert = createNode('div', { class: `uk-alert-${alertTypes[type]} uk-padding-small`, 'uk-alert': null }, msg)
alert.style.display = 'block'
document.getElementById(window.env.querySelectors.console.slice(1)).appendChild(alert)
womb instanceof Element ? womb.appendChild(alert) : msgBox.appendChild(alert)
if (fadeOut > 0) {
setTimeout(() => {
alert.remove()
}, fadeOut)
}
}
createNotesGrid (len, archived = false) {
/**
*
* @param node
*/
noteToTrash (node) {
const row = node.closest('tr')
NotesAPI.deleteNote(parseInt(row.dataset.id, 10))
row.classList.add('as-removing')
setTimeout(() => {
row.remove()
this.createNotesGrid(window.env.prePopulateAmount || 0)
}, 3000)
}
createNotesGridByRoute (navTab) {
const route = new URL( navTab.href ).pathname.slice(1).split('\/')[0]
document.querySelector('li.nav-tab.uk-active').classList.remove('uk-active')
navTab.closest('li').classList.add( 'uk-active' )
switch ( route ){
case 'all': this.createNotesGrid( 0, null ); break;
case '': this.createNotesGrid( window.env.prePopulateAmount || 0 ); break;
case 'archived': this.createNotesGrid( window.env.prePopulateAmount || 0, true ); break;
default: console.log(route)
}
}
/**
*
* @param len
* @param archived
*/
createNotesGrid (len = window.env.prePopulateAmount || 0, archived = false) {
const notes = NotesAPI.getNotesSanitized(len, archived)
if (notes.length === 0) { return }
const nodeToListen = []
const notesGrid = document.querySelector(window.env.querySelectors.notesGrid + ' tbody')
notesGrid.innerHTML = ''
notes.forEach(el => {
const row = DOMController.createNode('tr')
const row = createNode('tr')
row.dataset.id = el.id
window.env.gridOrder.notes.forEach(key => {
@@ -59,14 +114,24 @@ export default class DOMController {
switch (key) {
case 'createdAt':
value = ___formatDate(value)
value = formatDate(value)
break
case 'category':
value = ucWords( value )
break
case 'title':
//attrs.class = 'uk-text-truncate'
attrs.class = 'uk-text-bold'
break
case 'content':
attrs.class = 'uk-text-truncate'
//attrs.class = 'uk-text-truncate'
//attrs.title = value
break
case 'dates':
attrs.class = 'uk-text-truncate'
value = ___findDates(el.content).join(', ')
value = findDates(el.content).join(', ')
//attrs.class = 'uk-text-truncate'
//attrs.title = value
break
case 'edit' :
attrs.class = 'icon icon-edit grid-control'
@@ -78,15 +143,14 @@ export default class DOMController {
break
case 'delete' :
attrs.class = 'icon icon-delete grid-control'
attrs['data-action'] = 'toTrash'
attrs['data-action'] = 'noteToTrash'
break
}
const td = DOMController.createNode('td', attrs, value)
const td = createNode('td', attrs, value)
if (key.match(/^(edit|archive|delete)$/)) {
nodeToListen.push(td)
this.listener([td, 'click', td.dataset.action])
this.listener([td, 'click', td.dataset.action, td])
}
row.appendChild(td)
@@ -96,89 +160,6 @@ export default class DOMController {
})
}
showError () {
console.error('Error occurred :(')
}
static createNode (...args) {
const [tag, attrs, content, callback] = args
const node = document.createElement(tag)
for (const [key, value] of Object.entries(attrs || [])) {
node.setAttribute(key, value)
}
node.innerHTML = content || ''
return node
}
destroyNode (selector) {
if (!(selector instanceof Node) && typeof selector === 'string') {
selector = document.querySelector(selector)
}
try {
selector.remove()
} catch (e) {}
}
getEditForm (args = {}) {
const node = DOMController.createNode('div', { class: window.env.querySelectors.modal.slice(1) },
Templates.templates.editForm)
if (args.legend) {
node.querySelector('legend').innerHTML = args.legend
}
this.root.appendChild(node)
node.style.display = 'block'
this.listener([
[node.querySelector(window.env.querySelectors.btnDestroyModal), 'click', 'destroyNode', node],
[node.querySelector('form'), 'submit', NotesAPI.saveNote],
])
}
listener (els) {
els[0] instanceof Element ? this.on(els) : els.forEach(el => this.on(el))
}
/**
*
* @param args //selector, event, method, params
*/
on (args) {
const [selector, event, method] = args
if (!(selector instanceof Element)) {
return
}
try {
selector.addEventListener(event, evt => {
const params = args[3] || {}
if (evt.type === 'submit') {
evt.preventDefault()
}
if (typeof this[method] === 'function') {
this[method](params)
} else if (typeof method === 'function') {
method(params)
}
})
} catch (err) {
console.error(err)
}
}
/**
*
* @param selector
@@ -194,4 +175,69 @@ export default class DOMController {
return data
}
}
/**
*
* @param els
* @returns {void|*}
*/
listener (els) { return els[0] instanceof Element ? this.on(els) : els.forEach(el => this.on(el)) }
/**
*
* @param args //selector, event, method, params
*/
on (args) {
const [selector, event, method] = args
if (!(selector instanceof Element)) {
return
}
try {
selector.addEventListener(event, evt => {
const params = args[3] || {}
if (selector.tagName === 'A') {
evt.preventDefault()
}
if (evt.type === 'submit') {
evt.preventDefault()
setTimeout(() => {
this.createNotesGrid(window.env.prePopulateAmount || 0)
}, 300)
}
if (typeof this[method] === 'function') {
this[method](params)
} else if (typeof method === 'function') {
method(params)
}
})
} catch (err) {
console.error(err)
}
}
getEditForm (args = {}) {
const node = createNode('div', { class: window.env.querySelectors.modal.slice(1) },
Templates.templates.editForm)
if (args.legend) {
node.querySelector('legend').innerHTML = args.legend
}
this.root.appendChild(node)
node.style.display = 'block'
this.listener([
[node.querySelector(window.env.querySelectors.btnDestroyModal), 'click', destroyNode, node], //Remove modal dialog
[node.querySelector('form'), 'submit', NotesAPI.saveNote],
])
}
}