Update entity list to use list.js more directly

This commit is contained in:
Ryan Huffman 2015-01-16 16:23:29 -08:00
parent 92b99237a2
commit d3a6a411fb
2 changed files with 33 additions and 44 deletions

View file

@ -1,4 +1,3 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
@ -14,6 +13,8 @@
var DESC_STRING = '&nbsp;&#x25B4;';
function loaded() {
entityList = new List('entity-list', { valueNames: ['type', 'url']});
entityList.clear();
elEntityTable = document.getElementById("entity-table");
elEntityTableBody = document.getElementById("entity-table-body");
elRefresh = document.getElementById("refresh");
@ -37,7 +38,8 @@
selectedEntities = selection;
entities[id].el.className = 'selected';
this.className = 'selected';
EventBridge.emitWebEvent(JSON.stringify({
type: "selectionUpdate",
focus: false,
@ -46,8 +48,6 @@
}
function onRowDoubleClicked() {
var id = this.dataset.entityId;
EventBridge.emitWebEvent(JSON.stringify({
type: "selectionUpdate",
focus: true,
@ -60,21 +60,21 @@
var urlParts = url.split('/');
var filename = urlParts[urlParts.length - 1];
var el = document.createElement('tr');
el.setAttribute('id', 'entity_' + id);
el.innerHTML += "<td class='type'>" + type + "</td>";
el.innerHTML += "<td class='url' title='" + url + "'><div class='outer'><div class='inner'>" + filename + "</div></div></td>";
el.dataset.entityId = id;
el.onclick = onRowClicked;
el.ondblclick = onRowDoubleClicked;
elEntityTableBody.appendChild(el);
// Add element to local dict
entities[id] = {
id: id,
name: id,
el: el,
};
entityList.add([{ id: id, type: type, url: filename }], function(items) {
var el = items[0].elm;
var id = items[0]._values.id;
entities[id] = {
id: id,
name: id,
el: el,
};
el.setAttribute('id', 'entity_' + id);
el.setAttribute('title', url);
el.dataset.entityId = id;
el.onclick = onRowClicked;
el.ondblclick = onRowDoubleClicked;
el.innerHTML
});
if (refreshEntityListTimer) {
clearTimeout(refreshEntityListTimer);
@ -91,10 +91,8 @@
}
function clearEntities() {
for (id in entities) {
elEntityTableBody.removeChild(entities[id].el);
}
entities = {};
entityList.clear();
}
var elSortOrder = {
@ -122,7 +120,6 @@
function refreshEntityListObject() {
refreshEntityListTimer = null;
entityList = new List('entity-list', { valueNames: ['type', 'url']});
entityList.sort(currentSortColumn, { order: currentSortOrder });
entityList.search(document.getElementById("filter").value);
}
@ -174,15 +171,6 @@
}
});
}
// var _id = 0;
// setInterval(function() {
// for(var i = 0; i < 2; i++) {
// addEntity(_id, ['Model', 'Light'][i], 'http' + _id);
// _id++;
// }
// }, 5000);
setTimeout(refreshEntities, 1);
}
</script>
</head>
@ -198,11 +186,16 @@
<table id="entity-table">
<thead>
<tr>
<th id="entity-type">Type <span class="sort-order" style="display: inline">&nbsp;&#x25BE;</span></th>
<th id="entity-url">URL <span class="sort-order" style="display: none">&nbsp;&#x25BE;</span></th>
<th id="entity-type" data-sort="type">Type <span class="sort-order" style="display: inline">&nbsp;&#x25BE;</span></th>
<th id="entity-url" data-sort="url">URL <span class="sort-order" style="display: none">&nbsp;&#x25BE;</span></th>
</tr>
</thead>
<tbody class="list" id="entity-table-body">
<tr>
<td class="id" style="display: none">Type</td>
<td class="type">Type</td>
<td class="url"><div class='outer'><div class='inner'>URL</div></div></td>
</tr>
</tbody>
</table>
</div>

View file

@ -5,9 +5,10 @@ body {
margin: 0;
padding: 0;
background-color: #efefef;
background-color: rgb(76, 76, 76);
color: rgb(204, 204, 204);
font-family: Arial;
font-size: 11.5px;
font-size: 11px;
-webkit-touch-callout: none;
-webkit-user-select: none;
@ -17,12 +18,6 @@ body {
user-select: none;
}
body.properties {
background-color: rgb(76, 76, 76);
color: rgb(204, 204, 204);
font-size: 11px;
}
.selectable {
-webkit-touch-callout: text;
-webkit-user-select: text;
@ -117,13 +112,13 @@ input.coord {
table#entity-table {
border-collapse: collapse;
font-family: Sans-Serif;
/* font-size: 12px; */
font-size: 10px;
width: 100%;
}
#entity-table tr {
cursor: pointer;
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid rgb(63, 63, 63)
}
#entity-table tr.selected {
@ -140,6 +135,7 @@ table#entity-table {
}
#entity-table td {
font-size: 11px;
border: 0px black solid;
word-wrap: nowrap;
white-space: nowrap;