prism code visualizer and json editor

This commit is contained in:
Pau Capó 2021-05-21 18:05:20 +02:00
parent 3b99908958
commit ae30cb558e
7 changed files with 214 additions and 5 deletions

View file

@ -30,7 +30,7 @@ class AdminerJsonColumn
$name = $field['field'];
?>
<a href="#" id="toggle_json_<?= $name ?>">show as table</a><br>
<pre id="show_json_<?= $name ?>" style="display: none"><code><?= $json; ?></code></pre>
<pre id="show_json_<?= $name ?>" style="display: none;max-height:600px;overflow:auto;" contenteditable><code class="language-json"><?= $json; ?></code></pre>
<script <?= nonce() ?>>
document.getElementById('toggle_json_<?= $name ?>').addEventListener('click', function (e) {
e.preventDefault();
@ -41,6 +41,18 @@ class AdminerJsonColumn
show.style.display = 'none';
}
});
document.getElementById('show_json_<?= $name ?>').addEventListener('input', function (e) {
let content = document.getElementById('show_json_<?= $name ?>').innerText;
let json = false;
try {
json = JSON.parse(content);
} catch (e) {
document.getElementById('show_json_<?= $name ?>').style.border = '5px solid red';
return;
}
document.getElementById('show_json_<?= $name ?>').style.border = '';
document.querySelector('[name="fields[<?= $name ?>]"]').value = JSON.stringify(json);
});
</script>
<?php
}

View file

@ -14,7 +14,7 @@ class AdminerLoginSqlite {
function loginForm() {
?>
<script type="text/javascript">
<script type="text/javascript" <?= nonce() ?>>
addEventListener('load', function () {
var driver = document.getElementsByName('auth[driver]')[0];
if (isTag(driver, 'select')) {

View file

@ -35,7 +35,7 @@ class AdminerXMLColumn
$name = $field['field'];
?>
<a href="#" id="toggle_xml_<?= $name ?>">show as table</a><br>
<pre id="show_xml_<?= $name ?>" style="display: none"><code><?= $xml ?></code></pre>
<pre id="show_xml_<?= $name ?>" style="display: none"><code class="language-xml"><?= $xml ?></code></pre>
<script <?= nonce() ?>>
document.getElementById('toggle_xml_<?= $name ?>').addEventListener('click', function (e) {
e.preventDefault();

39
plugins/Prism.php Normal file
View file

@ -0,0 +1,39 @@
<?php
/** Display XML values as table in edit
* @link https://www.adminer.org/plugins/#use
* @author Pau Capó, https://www.paucapo.com/
* @license http://www.apache.org/licenses/LICENSE-2.0 Apache License, Version 2.0
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU General Public License, version 2 (one or other)
*/
class Prism
{
function head()
{
?>
<script<?= nonce() ?>>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('[class^=jush-]').forEach(function ($item) {
let jush = $item.getAttribute('class').trim();
let lang = jush.replace('jush-', 'language-');
$item.setAttribute('class', lang);
// $item.classList.remove(jush);
// $item.classList.add(lang);
});
});
</script>
<link rel="stylesheet" type="text/css" href="assets/prism.css?<?= filemtime(__DIR__ . '/../assets/prism.js') ?>"/>
<script <?= nonce() ?> src="assets/prism.js?<?= filemtime(__DIR__ . '/../assets/prism.js') ?>"></script>
<script<?= nonce() ?>>
// Prism.hooks.add('before-highlight', function (env) {
// env.code = env.element.innerText;
// });
Prism.hooks.add('before-sanity-check', function (env) {
env.element.innerHTML = env.element.innerHTML.replace(/<br>/g, '\n');
env.code = env.element.textContent;
});
</script>
<?php
}
}