Благодарим за выбор нашего сервиса!
Тестовое сообщение
Сообщений 1 страница 5 из 5
ПеревестиПоделиться32026-07-02 15:23:14
[html]<!--
Magia Header-Art Admin Editor
Embed this whole block via BBcode (e.g. wrapped in [html]...[/html]
or however custom HTML blocks are embedded on Magia) in the closed
admin-only topic. Requires jQuery (already loaded by RUSFF) and the
existing MagiaAPI class (register.js) to be present on the page.
-->
<div id="magia-headerart-editor" style="font-family: var(--font-family, sans-serif); max-width: 700px;">
<div id="magia-hae-gate-message" style="display:none;"></div>
<div id="magia-hae-form" style="display:none;">
<h3 style="margin-bottom: 10px;">Header-Art Editor</h3>
<div style="margin-bottom: 14px;">
<label style="display:block; font-weight:600; margin-bottom:4px;">Date text (tabsleva)</label>
<input type="text" id="magia-hae-date" style="width:100%; padding:6px;">
</div>
<div style="margin-bottom: 14px;">
<label style="display:block; font-weight:600; margin-bottom:4px;">Active team</label>
<select id="magia-hae-team" style="width:100%; padding:6px;">
<option value="MAGI">MAGI</option>
<option value="HUMAN">HUMAN</option>
<option value="CROWLEY">CROWLEY</option>
<option value="AGRIPPA">AGRIPPA</option>
<option value="VALPURGIS">VALPURGIS</option>
</select>
</div>
<div style="margin-bottom: 14px;">
<label style="display:block; font-weight:600; margin-bottom:4px;">Mascot link (changes weekly, independent of team)</label>
<input type="text" id="magia-hae-mascot-link" style="width:100%; padding:6px;" placeholder="https://magia-frpg.ru/viewtopic.php?id=...">
</div>
<fieldset style="margin-bottom: 14px; border:1px solid #ccc; padding:10px;">
<legend style="font-weight:600;">News</legend>
<label style="display:block; font-weight:600; margin-bottom:4px;">Text</label>
<textarea id="magia-hae-news-text" style="width:100%; padding:6px; min-height:60px;"></textarea>
<label style="display:block; font-weight:600; margin:8px 0 4px;">Link (optional)</label>
<input type="text" id="magia-hae-news-link" style="width:100%; padding:6px;">
<label style="display:block; font-weight:600; margin:8px 0 4px;">Banner HTML (optional — paste a full <img src="..."> tag)</label>
<input type="text" id="magia-hae-news-banner" style="width:100%; padding:6px;" placeholder='<img src="https://...">'>
</fieldset>
<fieldset style="margin-bottom: 14px; border:1px solid #ccc; padding:10px;">
<legend style="font-weight:600;">Mirror links (up to 12, shown 3 at a time)</legend>
<div id="magia-hae-mirror-list"></div>
<button type="button" id="magia-hae-mirror-add" style="margin-top:8px;">+ Add link</button>
</fieldset>
<button type="button" id="magia-hae-save" style="padding:8px 20px; font-weight:600; cursor:pointer;">Save</button>
<span id="magia-hae-status" style="margin-left:10px;"></span>
</div>
</div>
<script>
(function () {
'use strict';
var API_URL = 'https://magiascript.ru/headerset/header-art-api.php';
var MAX_MIRROR_LINKS = 12;
var gateMsg = document.getElementById('magia-hae-gate-message');
var form = document.getElementById('magia-hae-form');
var mirrorList = document.getElementById('magia-hae-mirror-list');
var statusEl = document.getElementById('magia-hae-status');
function checkAccess() {
try {
var api = new MagiaAPI();
return api.hasAccess();
} catch (e) {
console.error('[header-art-editor] MagiaAPI not available', e);
return false;
}
}
function loadCurrentData() {
return fetch(API_URL).then(function (res) {
if (!res.ok) throw new Error('Failed to load current data: ' + res.status);
return res.json();
});
}
function renderMirrorRow(entry) {
entry = entry || { label: '', url: '' };
var row = document.createElement('div');
row.className = 'magia-hae-mirror-row';
row.style.cssText = 'display:flex; gap:8px; margin-bottom:6px; align-items:center;';
var labelInput = document.createElement('input');
labelInput.type = 'text';
labelInput.placeholder = 'Label';
labelInput.value = entry.label || '';
labelInput.style.cssText = 'flex:1; padding:5px;';
labelInput.className = 'magia-hae-mirror-label';
var urlInput = document.createElement('input');
urlInput.type = 'text';
urlInput.placeholder = 'URL';
urlInput.value = entry.url || '';
urlInput.style.cssText = 'flex:2; padding:5px;';
urlInput.className = 'magia-hae-mirror-url';
var removeBtn = document.createElement('button');
removeBtn.type = 'button';
removeBtn.textContent = '\u2715';
removeBtn.style.cssText = 'padding:5px 10px; cursor:pointer;';
removeBtn.addEventListener('click', function () {
row.remove();
updateAddButtonState();
});
row.appendChild(labelInput);
row.appendChild(urlInput);
row.appendChild(removeBtn);
return row;
}
function updateAddButtonState() {
var addBtn = document.getElementById('magia-hae-mirror-add');
var count = mirrorList.querySelectorAll('.magia-hae-mirror-row').length;
addBtn.disabled = count >= MAX_MIRROR_LINKS;
addBtn.style.opacity = addBtn.disabled ? '0.5' : '1';
}
function populateForm(data) {
document.getElementById('magia-hae-date').value = data.date_text || '';
document.getElementById('magia-hae-team').value = data.active_team || 'MAGI';
document.getElementById('magia-hae-mascot-link').value = data.mascot_link || '';
var news = data.news || {};
document.getElementById('magia-hae-news-text').value = news.text || '';
document.getElementById('magia-hae-news-link').value = news.link || '';
document.getElementById('magia-hae-news-banner').value = news.banner || '';
mirrorList.innerHTML = '';
var links = Array.isArray(data.mirror_links) ? data.mirror_links : [];
if (links.length === 0) {
mirrorList.appendChild(renderMirrorRow());
} else {
links.forEach(function (entry) {
mirrorList.appendChild(renderMirrorRow(entry));
});
}
updateAddButtonState();
}
function collectFormData() {
var mirrorLinks = [];
mirrorList.querySelectorAll('.magia-hae-mirror-row').forEach(function (row) {
var label = row.querySelector('.magia-hae-mirror-label').value.trim();
var url = row.querySelector('.magia-hae-mirror-url').value.trim();
if (label || url) {
mirrorLinks.push({ label: label, url: url });
}
});
return {
date_text: document.getElementById('magia-hae-date').value,
active_team: document.getElementById('magia-hae-team').value,
mascot_link: document.getElementById('magia-hae-mascot-link').value,
news: {
text: document.getElementById('magia-hae-news-text').value,
link: document.getElementById('magia-hae-news-link').value,
banner: document.getElementById('magia-hae-news-banner').value
},
mirror_links: mirrorLinks
};
}
function save() {
statusEl.textContent = 'Saving...';
statusEl.style.color = '';
var payload = {
userID: window['UserID'],
boardID: window['BoardID'],
data: collectFormData()
};
fetch(API_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
})
.then(function (res) {
return res.json().then(function (body) {
if (!res.ok) throw new Error(body.error || 'Save failed');
return body;
});
})
.then(function () {
statusEl.textContent = 'Saved.';
statusEl.style.color = 'green';
})
.catch(function (err) {
statusEl.textContent = 'Error: ' + err.message;
statusEl.style.color = 'red';
});
}
function init() {
if (!checkAccess()) {
// Quietly show nothing for non-admins.
return;
}
gateMsg.style.display = 'none';
form.style.display = 'block';
loadCurrentData()
.then(populateForm)
.catch(function (err) {
console.error('[header-art-editor]', err);
statusEl.textContent = 'Could not load current data.';
statusEl.style.color = 'red';
});
document.getElementById('magia-hae-mirror-add').addEventListener('click', function () {
var count = mirrorList.querySelectorAll('.magia-hae-mirror-row').length;
if (count >= MAX_MIRROR_LINKS) return;
mirrorList.appendChild(renderMirrorRow());
updateAddButtonState();
});
document.getElementById('magia-hae-save').addEventListener('click', save);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>[/html]