mirror of
https://github.com/loot/libloot.git
synced 2026-07-27 14:16:01 -07:00
Implemented editor tables.
This commit is contained in:
WrinklyNinja
@@ -418,17 +418,17 @@ td input {
|
||||
margin: 1.5em 1em;
|
||||
display: table;
|
||||
}
|
||||
.tableTabs span {
|
||||
.tableTabs > span {
|
||||
display: inline-block;
|
||||
padding: 0.5em;
|
||||
border: 1px black solid;
|
||||
border-bottom: none;
|
||||
background: #e3e3e3;
|
||||
}
|
||||
.tableTabs span:not(:first-child) {
|
||||
.tableTabs > span:not(:first-child) {
|
||||
border-left: none;
|
||||
}
|
||||
.tableTabs span:hover, .tableTabs span.selected {
|
||||
.tableTabs > span:hover, .tableTabs span.selected {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
|
||||
@@ -199,6 +199,88 @@ function clearAllMetadata() {
|
||||
function clearMetadata(filename) {
|
||||
showMessageDialog('Clear Plugin Metadata', 'Are you sure you want to clear all existing user-added metadata from "' + filename + '"?');
|
||||
}
|
||||
function removeTableRow(evt) {
|
||||
evt.target.parentElement.parentElement.parentElement.removeChild(evt.target.parentElement.parentElement);
|
||||
}
|
||||
function addNewTableRow(evt) {
|
||||
/* Create new row. */
|
||||
var tableBody = evt.currentTarget.parentElement;
|
||||
var rowTemplateId = tableBody.getAttribute('data-template');
|
||||
var content = document.getElementById(rowTemplateId).content;
|
||||
var row = document.importNode(content, true);
|
||||
tableBody.insertBefore(row, evt.currentTarget);
|
||||
row = evt.currentTarget.previousElementSibling;
|
||||
|
||||
/* Enable row editing. */
|
||||
var inputs = row.getElementsByTagName('input');
|
||||
for (var i = 0; i < inputs.length; ++i) {
|
||||
inputs[i].removeAttribute('readonly');
|
||||
inputs[i].addEventListener('dblclick', toggleInputRO, false);
|
||||
}
|
||||
/* Add deletion listener. */
|
||||
row.getElementsByClassName('fa-trash-o')[0].addEventListener('click', removeTableRow, false);
|
||||
}
|
||||
function addTableRow(tableBody, data) {
|
||||
var rowTemplateId = tableBody.getAttribute('data-template');
|
||||
var content = document.getElementById(rowTemplateId).content;
|
||||
var row = document.importNode(content, true);
|
||||
tableBody.insertBefore(row, tableBody.lastElementChild);
|
||||
row = tableBody.lastElementChild.previousElementSibling;
|
||||
|
||||
/* Data is an object with keys that match element class names. */
|
||||
for (var key in data) {
|
||||
row.getElementsByClassName(key)[0].value = data[key];
|
||||
}
|
||||
|
||||
/* Enable row editing. */
|
||||
var inputs = row.getElementsByTagName('input');
|
||||
for (var i = 0; i < inputs.length; ++i) {
|
||||
inputs[i].addEventListener('dblclick', toggleInputRO, false);
|
||||
}
|
||||
/* Add deletion listener. */
|
||||
row.getElementsByClassName('fa-trash-o')[0].addEventListener('click', removeTableRow, false);
|
||||
}
|
||||
function setupTable(tableBody) {
|
||||
/* Add "add new row" row. */
|
||||
var rowTemplateId = tableBody.getAttribute('data-template');
|
||||
var content = document.getElementById(rowTemplateId).content;
|
||||
var row = document.importNode(content, true);
|
||||
tableBody.appendChild(row);
|
||||
row = tableBody.lastElementChild;
|
||||
|
||||
/* All the tables have at least 4 columns, including the delete button column. Delete the first three from this row and span the fourth over four columns to ensure the text does not get cut off. */
|
||||
row.removeChild(row.firstElementChild);
|
||||
row.removeChild(row.firstElementChild);
|
||||
row.removeChild(row.firstElementChild);
|
||||
row.firstElementChild.textContent = 'Add new row...';
|
||||
row.firstElementChild.setAttribute('colspan', 4);
|
||||
|
||||
/* Hide any 'select' elements, and the bin icon. */
|
||||
var selects = row.getElementsByTagName('select');
|
||||
for (var i = 0; i < selects.length; ++i) {
|
||||
hideElement(selects[i]);
|
||||
}
|
||||
var bin = row.getElementsByClassName('fa-trash-o')[0];
|
||||
if (bin) {
|
||||
hideElement(bin);
|
||||
}
|
||||
|
||||
/* Add new row listener. */
|
||||
row.addEventListener('dblclick', addNewTableRow, false);
|
||||
}
|
||||
function showEditorTable(evt) {
|
||||
var tableClass = evt.target.getAttribute('data-for');
|
||||
var tables = evt.target.parentElement.getElementsByTagName('table');
|
||||
for (var i = 0; i < tables.length; ++i) {
|
||||
if (tables[i].className.indexOf(tableClass) == -1) {
|
||||
hideElement(tables[i]);
|
||||
} else {
|
||||
showElement(tables[i]);
|
||||
}
|
||||
}
|
||||
evt.target.parentElement.getElementsByClassName('selected')[0].classList.toggle('selected');
|
||||
evt.target.classList.toggle('selected');
|
||||
}
|
||||
function showEditor(sectionId) {
|
||||
/* Editor is attached to plugins on-demand. */
|
||||
var content = document.getElementById('pluginEditor').content;
|
||||
@@ -206,10 +288,27 @@ function showEditor(sectionId) {
|
||||
var section = document.getElementById(sectionId);
|
||||
section.appendChild(editor);
|
||||
editor = section.lastElementChild;
|
||||
|
||||
/* Fill in data. */
|
||||
section.getElementsByTagName('h1')[1].textContent = section.getElementsByTagName('h1')[0].textContent;
|
||||
section.getElementsByClassName('crc')[1].textContent = section.getElementsByClassName('crc')[0].textContent;
|
||||
section.getElementsByClassName('version')[1].textContent = section.getElementsByClassName('version')[0].textContent;
|
||||
|
||||
/* Initialise tables. */
|
||||
var tables = editor.getElementsByTagName('table');
|
||||
for (var i = 0; i < tables.length; ++i) {
|
||||
setupTable(tables[i].getElementsByTagName('tbody')[0]);
|
||||
}
|
||||
|
||||
/* Set up table tab event handlers. */
|
||||
var elements = document.getElementsByClassName('tableTabs')[0].children;
|
||||
for (var i = 0; i < elements.length; ++i) {
|
||||
var tableClass = elements[i].getAttribute('data-for');
|
||||
if (tableClass) {
|
||||
elements[i].addEventListener('click', showEditorTable, false);
|
||||
}
|
||||
}
|
||||
|
||||
/* Finally, show editor. */
|
||||
section.classList.toggle('flip');
|
||||
}
|
||||
@@ -266,75 +365,6 @@ function toggleInputRO(evt) {
|
||||
evt.target.setAttribute('readonly', '');
|
||||
}
|
||||
}
|
||||
function removeGameRow(evt) {
|
||||
evt.target.parentElement.parentElement.parentElement.removeChild(evt.target.parentElement.parentElement);
|
||||
}
|
||||
function addNewTableRow(evt) {
|
||||
/* Create new row. */
|
||||
var tableBody = evt.currentTarget.parentElement;
|
||||
var rowTemplateId = tableBody.getAttribute('data-template');
|
||||
var content = document.getElementById(rowTemplateId).content;
|
||||
var row = document.importNode(content, true);
|
||||
tableBody.insertBefore(row, evt.currentTarget);
|
||||
row = evt.currentTarget.previousElementSibling;
|
||||
|
||||
/* Enable row editing. */
|
||||
var inputs = row.getElementsByTagName('input');
|
||||
for (var i = 0; i < inputs.length; ++i) {
|
||||
inputs[i].removeAttribute('readonly');
|
||||
inputs[i].addEventListener('dblclick', toggleInputRO, false);
|
||||
}
|
||||
/* Add deletion listener. */
|
||||
row.getElementsByClassName('fa-trash-o')[0].addEventListener('click', removeGameRow, false);
|
||||
}
|
||||
function addTableRow(tableBody, data) {
|
||||
var rowTemplateId = tableBody.getAttribute('data-template');
|
||||
var content = document.getElementById(rowTemplateId).content;
|
||||
var row = document.importNode(content, true);
|
||||
tableBody.insertBefore(row, tableBody.lastElementChild);
|
||||
row = tableBody.lastElementChild.previousElementSibling;
|
||||
|
||||
/* Data is an object with keys that match element class names. */
|
||||
for (var key in data) {
|
||||
row.getElementsByClassName(key)[0].value = data[key];
|
||||
}
|
||||
|
||||
/* Enable row editing. */
|
||||
var inputs = row.getElementsByTagName('input');
|
||||
for (var i = 0; i < inputs.length; ++i) {
|
||||
inputs[i].addEventListener('dblclick', toggleInputRO, false);
|
||||
}
|
||||
/* Add deletion listener. */
|
||||
row.getElementsByClassName('fa-trash-o')[0].addEventListener('click', removeGameRow, false);
|
||||
}
|
||||
function setupTable(tableBody) {
|
||||
/* Add "add new row" row. */
|
||||
var rowTemplateId = tableBody.getAttribute('data-template');
|
||||
var content = document.getElementById(rowTemplateId).content;
|
||||
var row = document.importNode(content, true);
|
||||
tableBody.appendChild(row);
|
||||
row = tableBody.lastElementChild;
|
||||
|
||||
/* All the tables have at least 4 columns, including the delete button column. Delete the first three from this row and span the fourth over four columns to ensure the text does not get cut off. */
|
||||
row.removeChild(row.firstElementChild);
|
||||
row.removeChild(row.firstElementChild);
|
||||
row.removeChild(row.firstElementChild);
|
||||
row.firstElementChild.textContent = 'Add new row...';
|
||||
row.firstElementChild.setAttribute('colspan', 4);
|
||||
|
||||
/* Hide any 'select' elements, and the bin icon. */
|
||||
var selects = row.getElementsByTagName('select');
|
||||
for (var i = 0; i < selects.length; ++i) {
|
||||
hideElement(selects[i]);
|
||||
}
|
||||
var bin = row.getElementsByClassName('fa-trash-o')[0];
|
||||
if (bin) {
|
||||
hideElement(bin);
|
||||
}
|
||||
|
||||
/* Add new row listener. */
|
||||
row.addEventListener('dblclick', addNewTableRow, false);
|
||||
}
|
||||
function setupEventHandlers() {
|
||||
var elements;
|
||||
if (isStorageSupported()) { /*Set up filter value and CSS setting storage read/write handlers.*/
|
||||
|
||||
@@ -40,7 +40,6 @@
|
||||
<td><span class="fa fa-trash-o fa-fw"></span>
|
||||
</template>
|
||||
<template id="dirtyInfoRow">
|
||||
<th>CRC<th>ITM Count<th>UDR Count<th>Deleted Navmeshes<th>Cleaning Utility<th>
|
||||
<tr>
|
||||
<td><input class="crc" type="text" maxlength="8" minlength="8" pattern="[0-9A-Fa-f]{8}" readonly required>
|
||||
<td><input class="itm" type="number" min="0" step="1" readonly>
|
||||
@@ -109,41 +108,41 @@
|
||||
<label for="editorGlobalPriority">Compare priority against all other plugins</label>
|
||||
<input type="checkbox" class="editorGlobalPriority">
|
||||
<div class="tableTabs">
|
||||
<span class="selected" data-for="loadAfterTable">Load After</span><span data-for="reqTable">Requirements</span><span data-for="incTable">Incompatibilities</span><span data-for="messageTable">Messages</span><span data-for="tagsTable">Bash Tags</span><span data-for="dirtyTable">Dirty Info</span>
|
||||
<table class="loadAfterTable">
|
||||
<span class="selected" data-for="loadAfter">Load After</span><span data-for="req">Requirements</span><span data-for="inc">Incompatibilities</span><span data-for="message">Messages</span><span data-for="tags">Bash Tags</span><span data-for="dirty">Dirty Info</span>
|
||||
<table class="loadAfter">
|
||||
<thead>
|
||||
<tr><th>Filename<th>Display Name<th>Condition<th>
|
||||
<tbody>
|
||||
<tbody data-template="fileRow">
|
||||
<!-- File rows go here. -->
|
||||
</table>
|
||||
<table class="reqTable hidden">
|
||||
<table class="req hidden">
|
||||
<thead>
|
||||
<tr><th>Filename<th>Display Name<th>Condition<th>
|
||||
<tbody>
|
||||
<tbody data-template="fileRow">
|
||||
<!-- File rows go here. -->
|
||||
</table>
|
||||
<table class="incTable hidden">
|
||||
<table class="inc hidden">
|
||||
<thead>
|
||||
<tr><th>Filename<th>Display Name<th>Condition<th>
|
||||
<tbody>
|
||||
<tbody data-template="fileRow">
|
||||
<!-- File rows go here. -->
|
||||
</table>
|
||||
<table class="messageTable hidden">
|
||||
<table class="message hidden">
|
||||
<thead>
|
||||
<tr><th>Type<th>Content<th>Condition<th>Language<th>
|
||||
<tbody>
|
||||
<tbody data-template="messageRow">
|
||||
<!-- Message rows go here. -->
|
||||
</table>
|
||||
<table class="tagsTable hidden">
|
||||
<table class="tags hidden">
|
||||
<thead>
|
||||
<tr><th>Add/Remove<th>Bash Tag<th>Condition<th>
|
||||
<tbody>
|
||||
<tbody data-template="tagRow">
|
||||
<!-- Bash Tag rows go here. -->
|
||||
</table>
|
||||
<table class="dirtyTable hidden">
|
||||
<table class="dirty hidden">
|
||||
<thead>
|
||||
<tr><th>CRC<th>ITM Count<th>UDR Count<th>Deleted Navmeshes<th>Cleaning Utility<th>
|
||||
<tbody>
|
||||
<tbody data-template="dirtyInfoRow">
|
||||
<!-- Dirty info rows go here. -->
|
||||
</table>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user