Plugins: Defer syntax highlighting

diff --git a/plugins/codemirror.php b/plugins/codemirror.php
index 56cdb6887264a69be2492ce302e0fa12bf19279e..cdbc57b38505663aaddeb0aae803d2a89c3170a2 100644 (file)
--- a/plugins/codemirror.php
+++ b/plugins/codemirror.php
@@ -24,14 +24,14 @@ class AdminerCodemirror {
 .CodeMirror { border: 1px inset #ccc; resize: both; }
 </style>
 <?php
-               echo Adminer\script_src("$this->root/lib/codemirror$this->minified.js");
-               echo Adminer\script_src("$this->root/addon/runmode/runmode$this->minified.js");
-               echo Adminer\script_src("$this->root/addon/hint/show-hint$this->minified.js");
-               echo Adminer\script_src("$this->root/mode/javascript/javascript$this->minified.js");
+               echo Adminer\script_src("$this->root/lib/codemirror$this->minified.js", true);
+               echo Adminer\script_src("$this->root/addon/runmode/runmode$this->minified.js", true);
+               echo Adminer\script_src("$this->root/addon/hint/show-hint$this->minified.js", true);
+               echo Adminer\script_src("$this->root/mode/javascript/javascript$this->minified.js", true);
                $tables = array_fill_keys(array_keys($tableStatuses), array());
                if (Adminer\support("sql")) {
-                       echo Adminer\script_src("$this->root/mode/sql/sql$this->minified.js");
-                       echo Adminer\script_src("$this->root/addon/hint/sql-hint$this->minified.js");
+                       echo Adminer\script_src("$this->root/mode/sql/sql$this->minified.js", true);
+                       echo Adminer\script_src("$this->root/addon/hint/sql-hint$this->minified.js", true);
                        if (isset($_GET["sql"]) || isset($_GET["trigger"]) || isset($_GET["check"])) {
                                foreach (Adminer\driver()->allFields() as $table => $fields) {
                                        foreach ($fields as $field) {
@@ -42,55 +42,57 @@ class AdminerCodemirror {
                }
                ?>
 <script <?php echo Adminer\nonce(); ?>>
-function getCmMode(el) {
-       const match = el.className.match(/(^|\s)jush-([^ ]+)/);
-       if (match) {
-               const modes = {
-                       js: 'application/json',
-                       sql: 'text/x-<?php echo (Adminer\connection()->flavor == "maria" ? "mariadb" : "mysql"); ?>',
-                       oracle: 'text/x-sql',
-                       clickhouse: 'text/x-sql',
-                       firebird: 'text/x-sql'
-               };
-               return modes[match[2]] || 'text/x-' + match[2];
+addEventListener('DOMContentLoaded', () => {
+       function getCmMode(el) {
+               const match = el.className.match(/(^|\s)jush-([^ ]+)/);
+               if (match) {
+                       const modes = {
+                               js: 'application/json',
+                               sql: 'text/x-<?php echo (Adminer\connection()->flavor == "maria" ? "mariadb" : "mysql"); ?>',
+                               oracle: 'text/x-sql',
+                               clickhouse: 'text/x-sql',
+                               firebird: 'text/x-sql'
+                       };
+                       return modes[match[2]] || 'text/x-' + match[2];
+               }
        }
-}
 
-adminerHighlighter = els => els.forEach(el => {
-       const mode = getCmMode(el);
-       if (mode) {
-               el.classList.add('cm-s-default');
-               CodeMirror.runMode(el.textContent, mode, el);
-       }
-});
+       adminerHighlighter = els => els.forEach(el => {
+               const mode = getCmMode(el);
+               if (mode) {
+                       el.classList.add('cm-s-default');
+                       CodeMirror.runMode(el.textContent, mode, el);
+               }
+       });
 
-adminerHighlighter(qsa('code'));
+       adminerHighlighter(qsa('code'));
 
-for (const el of qsa('textarea')) {
-       const mode = getCmMode(el);
-       if (mode) {
-               const width = el.clientWidth;
-               const height = el.clientHeight;
-               const cm = CodeMirror.fromTextArea(el, {
-                       mode: mode,
-                       extraKeys: { 'Ctrl-Space': 'autocomplete' },
-                       hintOptions: {
-                               completeSingle: false,
-                               tables: <?php echo json_encode($tables); ?>,
-                               defaultTable: <?php echo json_encode($_GET["trigger"] ?: ($_GET["check"] ?: null)); ?>
-                       }
-               });
-               cm.setSize(width, height);
-               cm.on('inputRead', () => {
-                       const token = cm.getTokenAt(cm.getCursor());
-                       if (/^[.`"\w]\w*$/.test(token.string)) {
-                               CodeMirror.commands.autocomplete(cm);
-                       }
-               });
-               setupSubmitHighlightInput(cm.getWrapperElement());
-               el.onchange = () => cm.setValue(el.value);
+       for (const el of qsa('textarea')) {
+               const mode = getCmMode(el);
+               if (mode) {
+                       const width = el.clientWidth;
+                       const height = el.clientHeight;
+                       const cm = CodeMirror.fromTextArea(el, {
+                               mode: mode,
+                               extraKeys: { 'Ctrl-Space': 'autocomplete' },
+                               hintOptions: {
+                                       completeSingle: false,
+                                       tables: <?php echo json_encode($tables); ?>,
+                                       defaultTable: <?php echo json_encode($_GET["trigger"] ?: ($_GET["check"] ?: null)); ?>
+                               }
+                       });
+                       cm.setSize(width, height);
+                       cm.on('inputRead', () => {
+                               const token = cm.getTokenAt(cm.getCursor());
+                               if (/^[.`"\w]\w*$/.test(token.string)) {
+                                       CodeMirror.commands.autocomplete(cm);
+                               }
+                       });
+                       setupSubmitHighlightInput(cm.getWrapperElement());
+                       el.onchange = () => cm.setValue(el.value);
+               }
        }
-}
+});
 </script>
 <?php
                return true;

diff --git a/plugins/monaco.php b/plugins/monaco.php
index 9a72f74517a5356b750b57b8157e0bec102438a5..7a9f86d09ef4224cec06d1b65c317d587070c8c3 100644 (file)
--- a/plugins/monaco.php
+++ b/plugins/monaco.php
@@ -15,56 +15,58 @@ class AdminerMonaco {
        }
 
        function syntaxHighlighting($tableStatuses) {
-               echo Adminer\script_src("$this->root/loader.js");
+               echo Adminer\script_src("$this->root/loader.js", true);
                ?>
 <script <?php echo Adminer\nonce(); ?>>
-require.config({ paths: { vs: '<?php echo $this->root; ?>' } });
-require(['vs/editor/editor.main'], function (monaco) {
-       adminerHighlighter = els => els.forEach(el => {
-               const lang = getMonacoLang(el);
-               if (lang) {
-                       monaco.editor.colorize(el.textContent, lang).then(html => el.innerHTML = html);
+addEventListener('DOMContentLoaded', () => {
+       require.config({ paths: { vs: '<?php echo $this->root; ?>' } });
+       require(['vs/editor/editor.main'], function (monaco) {
+               adminerHighlighter = els => els.forEach(el => {
+                       const lang = getMonacoLang(el);
+                       if (lang) {
+                               monaco.editor.colorize(el.textContent, lang).then(html => el.innerHTML = html);
+                       }
+               });
+               adminerHighlighter(qsa('code'));
+
+               for (const el of qsa('textarea')) {
+                       const lang = getMonacoLang(el);
+                       if (lang) {
+                               const container = document.createElement('div');
+                               container.style.border = '1px inset #ccc';
+                               container.style.width = el.clientWidth + 'px';
+                               container.style.height = el.clientHeight + 'px';
+                               el.before(container);
+                               el.style.display = 'none';
+                               var editor = monaco.editor.create(container, {
+                                       value: el.value,
+                                       lineNumbers: 'off',
+                                       glyphMargin: false,
+                                       folding: false,
+                                       lineDecorationsWidth: 1,
+                                       minimap: {enabled: false},
+                                       language: lang
+                               });
+                               editor.onDidChangeModelContent(() => el.value = editor.getValue());
+                               el.onchange = () => editor.setValue(el.value);
+                               monaco.editor.addKeybindingRules([
+                                       {keybinding: monaco.KeyCode.Tab, command: null}
+                                       //! Ctrl+Enter
+                               ]);
+                       }
                }
        });
-       adminerHighlighter(qsa('code'));
 
-       for (const el of qsa('textarea')) {
-               const lang = getMonacoLang(el);
-               if (lang) {
-                       const container = document.createElement('div');
-                       container.style.border = '1px inset #ccc';
-                       container.style.width = el.clientWidth + 'px';
-                       container.style.height = el.clientHeight + 'px';
-                       el.before(container);
-                       el.style.display = 'none';
-                       var editor = monaco.editor.create(container, {
-                               value: el.value,
-                               lineNumbers: 'off',
-                               glyphMargin: false,
-                               folding: false,
-                               lineDecorationsWidth: 1,
-                               minimap: {enabled: false},
-                               language: lang
-                       });
-                       editor.onDidChangeModelContent(() => el.value = editor.getValue());
-                       el.onchange = () => editor.setValue(el.value);
-                       monaco.editor.addKeybindingRules([
-                               {keybinding: monaco.KeyCode.Tab, command: null}
-                               //! Ctrl+Enter
-                       ]);
-               }
+       function getMonacoLang(el) {
+               return (
+                       /jush-js/.test(el.className) ? 'javascript' : (
+                       /jush-sql/.test(el.className) ? 'mysql' : (
+                       /jush-pgsql/.test(el.className) ? 'pgsql' : (
+                       /jush-(sqlite|mssql|oracle|clickhouse|firebird)/.test(el.className) ? 'sql' : (
+                       ''
+               )))));
        }
 });
-
-function getMonacoLang(el) {
-       return (
-               /jush-js/.test(el.className) ? 'javascript' : (
-               /jush-sql/.test(el.className) ? 'mysql' : (
-               /jush-pgsql/.test(el.className) ? 'pgsql' : (
-               /jush-(sqlite|mssql|oracle|clickhouse|firebird)/.test(el.className) ? 'sql' : (
-               ''
-       )))));
-}
 </script>
 <?php
                return true;