Skip to content

Commit

Permalink
Refactor social links script to external JS file
Browse files Browse the repository at this point in the history
Moved JavaScript for managing social links from inline script in `SocialLinks.cshtml` to an external file `admin.settings.socaillinks.js`. Removed the inline script and added a script tag to include the external file with versioning enabled. The external file retains all previous functionality, including rendering the table, updating the textarea, and managing links.
  • Loading branch information
EdiWang committed Nov 2, 2024
1 parent 3d5bcec commit f4bf075
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 70 deletions.
71 changes: 1 addition & 70 deletions src/Moonglade.Web/Pages/Settings/SocialLinks.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -10,77 +10,8 @@
}

@section scripts {
<script src="~/js/app/admin.settings.socaillinks.js" asp-append-version="true"></script>
<script>
const jsonValue = document.getElementById('settings_JsonData').value;
let links = jsonValue ? JSON.parse(jsonValue) : [];
let editIndex = null;
function renderTable() {
const tbody = document.getElementById('linksTable').getElementsByTagName('tbody')[0];
tbody.innerHTML = '';
links.forEach((link, index) => {
const row = tbody.insertRow();
row.insertCell(0).textContent = link.name;
row.insertCell(1).textContent = link.icon;
row.insertCell(2).textContent = link.url;
const actions = row.insertCell(3);
actions.innerHTML = `<button type="button" class="btn btn-sm btn-outline-accent me-1" onclick="editLink(${index})"><i class="bi-pen"></i></button><button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteLink(${index})"><i class="bi-trash"></i></button>`;
});
updateTextareaValue();
}
function updateTextareaValue() {
document.getElementById('settings_JsonData').value = JSON.stringify(links);
}
function addOrUpdateLink() {
const name = document.getElementById('name').value.trim();
const icon = document.getElementById('icon').value.trim();
const url = document.getElementById('url').value.trim();
const error = document.getElementById('error');
if (!name || !icon || !url) {
error.textContent = 'All fields are required!';
return;
}
if (links.some((link, index) => link.name === name && index !== editIndex)) {
error.textContent = 'Name must be unique!';
return;
}
if (editIndex !== null) {
links[editIndex] = { name: name, icon: icon, url: url };
editIndex = null;
} else {
links.push({ name: name, icon: icon, url: url });
}
clearForm();
renderTable();
}
function editLink(index) {
const link = links[index];
document.getElementById('name').value = link.name;
document.getElementById('icon').value = link.icon;
document.getElementById('url').value = link.url;
editIndex = index;
}
function deleteLink(index) {
links.splice(index, 1);
renderTable();
}
function clearForm() {
document.getElementById('name').value = '';
document.getElementById('icon').value = '';
document.getElementById('url').value = '';
document.getElementById('error').textContent = '';
}
renderTable();
</script>
<script type="module">
Expand Down
69 changes: 69 additions & 0 deletions src/Moonglade.Web/wwwroot/js/app/admin.settings.socaillinks.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
const jsonValue = document.getElementById('settings_JsonData').value;
let links = jsonValue ? JSON.parse(jsonValue) : [];
let editIndex = null;

function renderTable() {
const tbody = document.getElementById('linksTable').getElementsByTagName('tbody')[0];
tbody.innerHTML = '';
links.forEach((link, index) => {
const row = tbody.insertRow();
row.insertCell(0).textContent = link.name;
row.insertCell(1).textContent = link.icon;
row.insertCell(2).textContent = link.url;
const actions = row.insertCell(3);
actions.innerHTML = `<button type="button" class="btn btn-sm btn-outline-accent me-1" onclick="editLink(${index})"><i class="bi-pen"></i></button><button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteLink(${index})"><i class="bi-trash"></i></button>`;
});

updateTextareaValue();
}

function updateTextareaValue() {
document.getElementById('settings_JsonData').value = JSON.stringify(links);
}

function addOrUpdateLink() {
const name = document.getElementById('name').value.trim();
const icon = document.getElementById('icon').value.trim();
const url = document.getElementById('url').value.trim();
const error = document.getElementById('error');

if (!name || !icon || !url) {
error.textContent = 'All fields are required!';
return;
}

if (links.some((link, index) => link.name === name && index !== editIndex)) {
error.textContent = 'Name must be unique!';
return;
}

if (editIndex !== null) {
links[editIndex] = { name: name, icon: icon, url: url };
editIndex = null;
} else {
links.push({ name: name, icon: icon, url: url });
}

clearForm();
renderTable();
}

function editLink(index) {
const link = links[index];
document.getElementById('name').value = link.name;
document.getElementById('icon').value = link.icon;
document.getElementById('url').value = link.url;
editIndex = index;
}

function deleteLink(index) {
links.splice(index, 1);
renderTable();
}

function clearForm() {
document.getElementById('name').value = '';
document.getElementById('icon').value = '';
document.getElementById('url').value = '';
document.getElementById('error').textContent = '';
}

0 comments on commit f4bf075

Please sign in to comment.