Skip to content

Commit

Permalink
refactoring: The files manager on frontend is now ajaxified for a Hug…
Browse files Browse the repository at this point in the history
…e performance boost
  • Loading branch information
gregorybesson committed Dec 25, 2016
1 parent 8cfe0aa commit 8a87b46
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 55 deletions.
87 changes: 41 additions & 46 deletions src/server/public/abejs/scripts/modules/EditorManager.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,6 @@ export default class EditorManager {
this._btnManager = document.querySelector('.btn-manager')
this._btnDataFile = document.querySelector('[data-file="true"]')

this._btnDeleteFile = [].slice.call(document.querySelectorAll('[data-delete="true"]'))
this._btnUnpublishFile = [].slice.call(document.querySelectorAll('[data-unpublish="true"]'))

// event handlers
this._handleBtnGeneratePostsClick = this._btnGeneratePostsClick.bind(this)
this._handleBtnCloseManagerClick = this._btnCloseManagerClick.bind(this)
Expand All @@ -50,7 +47,46 @@ export default class EditorManager {
return location.hash = $(e.target).attr('href').substr(1)
})

this._bindEvents()
this.rebind()
}

rebind() {
this._btnDeleteFile = [].slice.call(document.querySelectorAll('[data-delete="true"]'))
this._btnUnpublishFile = [].slice.call(document.querySelectorAll('[data-unpublish="true"]'))

Array.prototype.forEach.call(this._managerTabs, (managerTab) => {
managerTab.removeEventListener('click', this._handleBtnManagerTabClick)
managerTab.addEventListener('click', this._handleBtnManagerTabClick)
})
Array.prototype.forEach.call(this._btnSaveConfig, (btnSaveConfig) => {
btnSaveConfig.removeEventListener('click', this._handleBtnSaveConfigClick)
btnSaveConfig.addEventListener('click', this._handleBtnSaveConfigClick)
})

if (this._btnManager != null) {
this._btnManager.removeEventListener('click', this._handleBtnManagerClick)
this._btnManager.addEventListener('click', this._handleBtnManagerClick)
}

if(typeof this._btnGeneratePosts !== 'undefined' && this._btnGeneratePosts !== null) {
this._btnGeneratePosts.removeEventListener('click', this._handleBtnGeneratePostsClick)
this._btnGeneratePosts.addEventListener('click', this._handleBtnGeneratePostsClick)
}

if(typeof this._btnCloseManager !== 'undefined' && this._btnCloseManager !== null) {
this._btnCloseManager.removeEventListener('click', this._handleBtnCloseManagerClick)
this._btnCloseManager.addEventListener('click', this._handleBtnCloseManagerClick)
}

Array.prototype.forEach.call(this._btnDeleteFile, (deleteFile) => {
deleteFile.removeEventListener('click', this._handleBtnDeleteClick)
deleteFile.addEventListener('click', this._handleBtnDeleteClick)
})

Array.prototype.forEach.call(this._btnUnpublishFile, (unpublishFile) => {
unpublishFile.removeEventListener('click', this._handleBtnUnpublishClick)
unpublishFile.addEventListener('click', this._handleBtnUnpublishClick)
})
}

_btnDeleteClick(e){
Expand Down Expand Up @@ -88,52 +124,11 @@ export default class EditorManager {
if (response.success !== 1) {
alert(response.message)
}else {
var labels = target.parentNode.parentNode.parentNode.querySelectorAll('.label:not(.hidden)')
var p = target.parentNode.parentNode.parentNode.querySelector('.label-published')
Array.prototype.forEach.call(labels, (label) => {
label.classList.add('hidden')
})
var draft = target.parentNode.parentNode.parentNode.querySelector('.label-draft')

if(typeof draft !== 'undefined' && draft !== null) {
draft.classList.remove('hidden')
}

if(typeof p !== 'undefined' && p !== null) p.remove()
target.remove()
this.remove._fire(target.parentNode.parentNode.parentNode)
}
})
}

_bindEvents() {
Array.prototype.forEach.call(this._managerTabs, (managerTab) => {
managerTab.addEventListener('click', this._handleBtnManagerTabClick)
})
Array.prototype.forEach.call(this._btnSaveConfig, (btnSaveConfig) => {
btnSaveConfig.addEventListener('click', this._handleBtnSaveConfigClick)
})

if (this._btnManager != null) {
this._btnManager.addEventListener('click', this._handleBtnManagerClick)
}

if(typeof this._btnGeneratePosts !== 'undefined' && this._btnGeneratePosts !== null) {
this._btnGeneratePosts.addEventListener('click', this._handleBtnGeneratePostsClick)
}

if(typeof this._btnCloseManager !== 'undefined' && this._btnCloseManager !== null) {
this._btnCloseManager.addEventListener('click', this._handleBtnCloseManagerClick)
}

Array.prototype.forEach.call(this._btnDeleteFile, (deleteFile) => {
deleteFile.addEventListener('click', this._handleBtnDeleteClick)
})

Array.prototype.forEach.call(this._btnUnpublishFile, (unpublishFile) => {
unpublishFile.addEventListener('click', this._handleBtnUnpublishClick)
})
}

_btnGeneratePostsClick(e) {
e.preventDefault()
this._btnGeneratePosts.querySelector('[data-not-clicked]').className = 'hidden'
Expand Down
101 changes: 93 additions & 8 deletions src/server/public/abejs/scripts/template-engine.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,98 @@ class Engine {
this._bindEvents()

this.table = null
$(document).ready(() => {
if ($('#navigation-list').size() > 0) {
this.table = $('#navigation-list').DataTable({
//"order": [[ 3, 'desc' ]],
'pageLength': 50,
'autoWidth': false
})
this.columns = [
{
'data': null,
'defaultContent': '',
'orderable': false
},
{
'data': 'abe_meta.link'
},
{
'data': 'abe_meta.template'
},
{
'data': null,
'defaultContent': ''
}
]

Array.prototype.forEach.call(workflow, (flow) => {
this.columns.push(
{ 'data': null,
'defaultContent': '',
'orderable': false
}
)
})

this.columns.push(
{
'data': null,
'defaultContent': '',
'orderable': false
}
)

$(document).ready(() => {
this.table = $('#navigation-list').DataTable( {
'pageLength': 50,
'processing': true,
'serverSide': true,
'ajax': '/abe/paginate',
'columns': this.columns,
'order': [[ 3, 'desc' ]],
'stateSave': true,
'drawCallback': function(settings) {
window.abe.manager.rebind()
},
stateSaveCallback: function(settings,data) {
localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
},
stateLoadCallback: function(settings) {
return JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) )
},
'createdRow': function (row, data, index) {
var actions = '<div class="row icons-action">'
if(data.publish != null) {
actions += `<a href="/abe/operations/unpublish${data.abe_meta.link}"
title="Unpublish"
class="icon" data-unpublish="true" data-text="Are you sure you want to unpublish : ${data.abe_meta.link}"
title="unpublish">
<span class="glyphicon glyphicon-eye-close"></span>
</a>`
}

actions += `<a href="/abe/operations/delete/${data.abe_meta.status}${data.abe_meta.link}"
title="Delete"
class="icon"
data-delete="true"
data-text="Are you sure you want to delete : ${data.abe_meta.link}"
title="remove">
<span class="glyphicon glyphicon-trash"></span>
</a></div>`

var i = 4
Array.prototype.forEach.call(workflow, (flow) => {
var wkf = ''
if(typeof data[flow] !== 'undefined' && flow === 'publish') {
wkf = `<a href="/abe/editor${data[flow].html}" class="checkmark label-published" title="${data[flow].cleanDate}">&#10004;</a>`
}
if(data.abe_meta.status == flow && flow !== 'publish') {
wkf = `<a href="/abe/editor${data[flow].html}" class="label label-default label-draft" title="${data[flow].cleanDate}">${flow}</a>`
}
$('td', row).eq(i).html(wkf)
++i
})

$('td', row).eq(0).html(index + 1)
$('td', row).eq(1).html('<a href="/abe/editor'+data.abe_meta.link+'" class="file-path">'+data.abe_meta.link+'</a>')
$('td', row).eq(3).html(moment(data.date).format('YYYY/MM/DD'))
$('td', row).eq(i).html(actions)
}
})
})

var abeReady = new Event('abeReady')
Expand Down Expand Up @@ -107,7 +191,7 @@ class Engine {
})

this._manager.remove((el) => {
this.table.row($(el)).remove().draw()
this.table.ajax.reload()
})

this._inputs.onReload(() => {
Expand Down Expand Up @@ -136,6 +220,7 @@ window.abe = {
json: engine.json,
inputs: engine._inputs,
files: engine._files,
manager: engine._manager,
blocks: engine._blocks,
autocomplete: engine._autocomplete,
editorReload: EditorReload
Expand Down
2 changes: 1 addition & 1 deletion src/server/routes/get-main.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function renderAbeAdmin(EditorVariables, obj, filePath) {
var manager = {}

manager.home = {
files: Manager.instance.getList()
files: []//Manager.instance.getList()
}

manager.list = Manager.instance.getStructureAndTemplates()
Expand Down

0 comments on commit 8a87b46

Please sign in to comment.