Permalink
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Oct 26, 2021
Newer
100644
189 lines (170 sloc)
5.64 KB
2
return {
3
baseUrl: baseUrl,
4
endpointName: endpointName,
5
getItems: function getItems(path) {
6
return clientFunctions.makeCall(this.baseUrl + '/.rest/delivery/' + endpointName + path + '@nodes').then(function (data) {
7
return JSON.parse(data);
9
return json.map(jsonToItem);
10
});
11
}
12
};
13
};
14
15
const jsonToItem = (data) => {
16
var map = new Map(Object.entries(data)).set('isFolder', data['@nodeType'] === 'mgnl:folder');
17
map['delete']('@nodes');
18
map['delete']('@nodeType');
19
return map;
20
};
21
24
var request = new XMLHttpRequest();
25
request.open('GET', url);
27
if (request.status === 200) {
28
resolve(request.response);
29
} else {
30
reject(Error('Error making call to ' + url + '; error code:' + request.statusText));
31
}
32
};
33
35
reject(Error('There was a network error making call to ' + url));
36
};
37
38
request.send();
39
});
40
};
41
43
makeCall: makeCall,
44
getClient: getClient
45
};
46
47
export default class HierarchicalBrowser extends HTMLElement {
48
constructor() {
49
super();
50
this.baseUrl = this.getAttribute('baseUrl');
51
this.endpoint = this.getAttribute('endpoint');
52
const columns = this.getAttribute('columns');
53
if (!columns) {
54
this.columns = ["@path", "@name"];
55
} else {
56
this.columns = columns.split(",");
57
}
59
this.client = getClient(this.baseUrl, this.endpoint);
60
this.loadItems('/');
61
}
62
63
loadItems(path) {
65
let parent = path.substring(0, path.length - 1);
66
const lastSlash = parent.lastIndexOf('/');
68
} else {
69
this.parent = null;
70
}
71
this.path = path;
73
this.client.getItems(path).then(result => {
74
this.items = result;
75
this.state = 'ready';
76
}).catch(error => {
77
this.errorMessage = error.name + ": " + error.message;
78
this.state = 'error';
79
});
80
}
81
82
get state() {
83
return this.getAttribute('state');
84
}
85
86
set state(value) {
87
this.setAttribute('state', value);
88
}
89
90
static get observedAttributes() { return ['state']; }
91
92
attributeChangedCallback(name, oldValue, newValue) {
93
this.render();
94
}
95
96
render() {
97
this.shadow.innerHTML = '';
98
if (this.getAttribute('state') == 'loading') {
99
this.shadow.appendChild(this.loading());
100
}
101
if (this.getAttribute('state') == 'ready') {
102
this.shadow.appendChild(this.showItems());
103
}
104
if (this.getAttribute('state') == 'error') {
105
this.shadow.innerHTML = '<p class="error">' + this.errorMessage || 'Unknown Error' + '<p>';
106
}
107
}
108
109
loading() {
110
const template = document.getElementById('browser-loading');
111
const instance = document.importNode(template.content, true);
112
instance.querySelector('.endpoint-name').innerHTML = this.endpoint;
113
return instance;
114
}
115
116
showItems() {
117
const template = document.getElementById('browser-items');
118
const instance = document.importNode(template.content, true);
119
instance.querySelector('.items-path').innerHTML = this.path;
120
instance.querySelector('.content-list').innerHTML = this.getItemsHtml();
121
this.addFolderClickEvent(instance);
122
return instance;
123
}
124
125
getItemsHtml() {
126
if (this.items.size < 1) {
128
} else {
130
if (this.parent != null) {
131
result += '<thead><tr><td class="folder" folder="' + this.parent + '">Go to ' + this.parent + '</td></tr></thead>';
132
}
133
result += this.getItemsHeader(this.columns) + this.getItemsBody(this.items, this.columns);
134
return result;
135
}
136
}
137
138
getItemsHeader(columns) {
139
let headers = '';
140
columns.forEach(column => headers += '<td>' + column + '</td>');
141
return '<thead><tr>' + headers + '</tr></thead>';
142
}
143
144
getItemsBody(items, columns) {
146
items.forEach(content => {
149
row = '<tr class="folder" folder="' + content.get('@path') + '">'
150
}
151
columns.forEach(column => {
152
const value = content.get(column);
153
if (value == undefined) {
155
} else {
157
}
158
});
160
rows = rows + row;
161
});
163
}
164
165
addFolderClickEvent(instance) {
166
if (instance.querySelector('.folder')) {
167
const that = this;
168
const elements = instance.querySelectorAll('.folder');
169
elements.forEach(element => {
171
event.preventDefault();
172
let row = event.target;
174
row = row.parentElement;
175
}
176
let path = row.getAttribute('folder');
177
if (!path.endsWith('/')) {
178
path = path + '/';
179
}
180
that.loadItems(path);
181
});
182
});
183
}
184
}
185
}
186
187
if (!customElements.get('hierarchical-browser')) {
188
customElements.define('hierarchical-browser', HierarchicalBrowser);
189
}