|
1
|
|
|
/*global document */ |
|
2
|
|
|
|
|
3
|
|
|
import Nanoajax from 'nanoajax' |
|
4
|
|
|
import qs from 'qs' |
|
5
|
|
|
|
|
6
|
|
|
export default class EditorStructures { |
|
7
|
|
|
constructor() { |
|
8
|
|
|
this._ajax = Nanoajax.ajax |
|
9
|
|
|
this.datas = JSON.parse(document.querySelector('.structure-json').value) |
|
10
|
|
|
this.structureWrapper = document.querySelector('.structure-wrapper') |
|
11
|
|
|
this.folderName = document.querySelector('input.folder-name') |
|
12
|
|
|
|
|
13
|
|
|
var lvl_0 = this.createFolder('structure/', 0, '', 'structure', '') |
|
14
|
|
|
|
|
15
|
|
|
this.createStructure(lvl_0, this.datas) |
|
16
|
|
|
this.structureWrapper.appendChild(lvl_0) |
|
17
|
|
|
this.rebind() |
|
18
|
|
|
} |
|
19
|
|
|
|
|
20
|
|
|
createFolder(path, level, daddy, folderName, hidden = 'hidden') { |
|
21
|
|
|
var folder = document.createElement('div') |
|
22
|
|
|
if(hidden && hidden !== '') folder.classList.add(hidden) |
|
|
|
|
|
|
23
|
|
|
folder.classList.add('structure-folder') |
|
24
|
|
|
folder.setAttribute('data-path', path.replace(/\/+$/, '') + '/') |
|
25
|
|
|
folder.setAttribute('data-level', level) |
|
26
|
|
|
folder.setAttribute('data-daddy', daddy) |
|
27
|
|
|
|
|
28
|
|
|
var span = document.createElement('span') |
|
29
|
|
|
var html = `<span class="glyphicon glyphicon-chevron-right arrow" aria-hidden="true"></span> |
|
30
|
|
|
${folderName} |
|
31
|
|
|
<div class="structure-tool"> |
|
32
|
|
|
<span class="glyphicon glyphicon-plus folder-action" data-init="0" data-action="add" aria-hidden="true"></span>` |
|
33
|
|
|
if(level !== 0) html += '<span class="glyphicon glyphicon-minus folder-action" data-init="0" data-action="remove" aria-hidden="true"></span>' |
|
|
|
|
|
|
34
|
|
|
html += '</div>' |
|
35
|
|
|
span.innerHTML = html |
|
36
|
|
|
folder.appendChild(span) |
|
37
|
|
|
|
|
38
|
|
|
this.bindArrow(span.querySelector('.arrow')) |
|
39
|
|
|
|
|
40
|
|
|
return folder |
|
41
|
|
|
} |
|
42
|
|
|
|
|
43
|
|
|
toggleFolder(daddy, forceState = ''){ |
|
44
|
|
|
var folders = daddy.querySelectorAll('[data-level="' + (parseInt(daddy.getAttribute('data-level')) + 1) + '"]') |
|
45
|
|
|
if(folders) { |
|
46
|
|
|
if(!daddy.classList.contains('open') || forceState === 'open'){ |
|
47
|
|
|
daddy.classList.add('open') |
|
48
|
|
|
Array.prototype.forEach.call(folders, (folder) => { |
|
49
|
|
|
folder.classList.remove('hidden') |
|
50
|
|
|
}) |
|
51
|
|
|
} |
|
52
|
|
|
else{ |
|
53
|
|
|
daddy.classList.remove('open') |
|
54
|
|
|
Array.prototype.forEach.call(folders, (folder) => { |
|
55
|
|
|
folder.classList.add('hidden') |
|
56
|
|
|
}) |
|
57
|
|
|
} |
|
58
|
|
|
} |
|
59
|
|
|
} |
|
60
|
|
|
|
|
61
|
|
|
bindArrow(arrow) { |
|
62
|
|
|
arrow.addEventListener('click', () => { |
|
63
|
|
|
this.toggleFolder(arrow.parentNode.parentNode) |
|
64
|
|
|
}) |
|
65
|
|
|
} |
|
66
|
|
|
|
|
67
|
|
|
createStructure(daddy, datas) { |
|
68
|
|
|
Array.prototype.forEach.call(datas, (data) => { |
|
69
|
|
|
var folderName = data['path'].split('/') |
|
70
|
|
|
var folder = this.createFolder( |
|
71
|
|
|
data['path'], |
|
72
|
|
|
(parseInt(daddy.getAttribute('data-level')) + 1), |
|
73
|
|
|
daddy.getAttribute('data-daddy'), |
|
74
|
|
|
folderName[folderName.length - 1] |
|
75
|
|
|
) |
|
76
|
|
|
daddy.appendChild(folder) |
|
77
|
|
|
|
|
78
|
|
|
if(data.folders && data.folders.length > 0) this.createStructure(folder, data.folders) |
|
|
|
|
|
|
79
|
|
|
}) |
|
80
|
|
|
} |
|
81
|
|
|
|
|
82
|
|
|
add(element){ |
|
83
|
|
|
this.toggleFolder(element, 'open') |
|
84
|
|
|
this.folderName.removeAttribute('disabled') |
|
85
|
|
|
this.folderName.focus() |
|
86
|
|
|
this.folderName.setAttribute('data-folder', `[data-path="${element.getAttribute('data-path')}"]`) |
|
87
|
|
|
|
|
88
|
|
|
var writeFolderName = (e) => { |
|
89
|
|
|
var value = this.folderName.value |
|
90
|
|
|
if(/^[A-Za-z0-9]+(?:-[A-Za-z0-9]+)*$/.test(value)) this.folderName.classList.remove('error') |
|
|
|
|
|
|
91
|
|
|
else this.folderName.classList.add('error') |
|
92
|
|
|
if(e.keyCode === 13) { |
|
93
|
|
|
if(/^[A-Za-z0-9]+(?:-[A-Za-z0-9]+)*$/.test(value)){ |
|
94
|
|
|
this.folderName.removeEventListener('keyup', writeFolderName) |
|
95
|
|
|
this.folderName.setAttribute('disabled', 1) |
|
96
|
|
|
var newFolderDaddy = document.querySelector(this.folderName.getAttribute('data-folder')) |
|
97
|
|
|
var path = newFolderDaddy.getAttribute('data-path').split('/') |
|
98
|
|
|
path.pop() |
|
99
|
|
|
path = path.concat(value).join('/') |
|
|
|
|
|
|
100
|
|
|
var folder = this.createFolder( |
|
101
|
|
|
newFolderDaddy.getAttribute('data-path') + value, |
|
102
|
|
|
(parseInt(newFolderDaddy.getAttribute('data-level')) + 1), |
|
103
|
|
|
newFolderDaddy.getAttribute('data-daddy'), |
|
104
|
|
|
value, |
|
105
|
|
|
'' |
|
106
|
|
|
) |
|
107
|
|
|
newFolderDaddy.appendChild(folder) |
|
108
|
|
|
this.rebind() |
|
109
|
|
|
this.save(qs.stringify({type: 'add', folderPath: (newFolderDaddy.getAttribute('data-path') + value)})) |
|
110
|
|
|
this.folderName.value = '' |
|
111
|
|
|
} |
|
112
|
|
|
} |
|
113
|
|
|
} |
|
114
|
|
|
|
|
115
|
|
|
this.folderName.removeEventListener('keyup', writeFolderName) |
|
116
|
|
|
this.folderName.addEventListener('keyup', writeFolderName) |
|
117
|
|
|
} |
|
118
|
|
|
|
|
119
|
|
|
remove(element){ |
|
120
|
|
|
this.save(qs.stringify({type: 'remove', folderPath: element.getAttribute('data-path')})) |
|
121
|
|
|
element.parentNode.removeChild(element) |
|
122
|
|
|
} |
|
123
|
|
|
|
|
124
|
|
|
save(body){ |
|
125
|
|
|
this._ajax({url: '/abe/structure/', body: body, cors: true, method: 'post'}, () => { |
|
126
|
|
|
|
|
127
|
|
|
}) |
|
128
|
|
|
} |
|
129
|
|
|
|
|
130
|
|
|
rebind(){ |
|
131
|
|
|
var folderActions = document.querySelectorAll('.folder-action') |
|
132
|
|
|
Array.prototype.forEach.call(folderActions, (folderAction) => { |
|
133
|
|
|
if(parseInt(folderAction.getAttribute('data-init')) === 0){ |
|
134
|
|
|
folderAction.setAttribute('data-init', 1) |
|
135
|
|
|
folderAction.addEventListener('click', (e) => { |
|
136
|
|
|
var target = e.target |
|
137
|
|
|
this[target.getAttribute('data-action')](target.parentNode.parentNode.parentNode) |
|
138
|
|
|
}) |
|
139
|
|
|
} |
|
140
|
|
|
}) |
|
141
|
|
|
} |
|
142
|
|
|
|
|
143
|
|
|
} |
|
144
|
|
|
|
AdFabConnect /
abejs
Loading history...
Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.
Consider:
If you or someone else later decides to put another statement in, only the first statement will be executed.
In this case the statement
b = 42will always be executed, while the logging statement will be executed conditionally.ensures that the proper code will be executed conditionally no matter how many statements are added or removed.