DroidScript

учимся и разрабатываем

Новости

Webasyst

Плагины

Справочник хуков

Пиктограммы для 1.3

App Inventor

Blockly

DroidScript

Запуск примеров с сайта

Справочник

Инспектор объектов (spk)

Песочница

Справочник по блокам

Секреты Thunkable X

Справочник по компонентам

Справочник по блокам

Qt Quick

Робототехника

Статьи

Информатика и школа

Файлы для скачивания

Карта сайта

Полезные ссылки

Скриплатка - быстрый браузерный редактор интерфейсов

17.10.2024

При работе с web-страницами часто возникает желание подправить интерфейс для более удобной работы. Для этого используются редакторы браузерных скриптов типа Tampermonkey. Неудобство их использования состоит в невозможности одновременного редактирования кода скрипта и просмотра изменений на странице. Мы это исправим и создадим редактор в окне диалога, дополнив его ещё одной крайне удобной функцией.

Для редактирования разметки страницы и просмотра изменений используется инструмент разработчика в браузере. Среди его возможностей есть сохранение изменений в локальной копии страницы. Но для этого нужно настроить локальную среду разработки.

При помощи редакторов, внешних сред разработки, LivePreview или средства автоматизации Auto Hotkey можно создать систему, которая позволит в реальном времени вносить изменения в страницы на сервере и видеть их в браузере. Но для этого необходимо расположить рядом два окна - редактора и браузера или использовать два монитора.

А можно ли сделать так, чтобы на одном экране видеть и редактор кода, и страницу? К сожалению, из-за злоупотреблений всплывающими окнами из браузеров была исключена функция, создающая модальные окна. Окно можно создать при помощи window.open, но для вывода его на передний план после каждой потери фокуса придётся вызывать метод focus. В результате будет постоянное "мерцание" на экране от скрытия и отображения этого окна. Выходом является использование диалога на элементе DIV, например, диалог jQuery.

После внесения правки, код "заплатки" нужно сохранить так, чтобы при последующих открытиях страницы он автоматически подгружался. Для этого будем сохранять код в локальном хранилище localStorage и выполнять его, если установлен флажок "автозагрузка".

Для просмотра изменений страницы в реальном времени выполнение кода (и его сохранение в хранилище) будем производить при возникновении события отпускания клавиши в поле редактора CodeMirror.

Если на web-странице уже работает какая-то версия jQuery и Dialog, то может возникнуть конфликт версий. Для устранения этого используем метод jQuery.noConflict(true), а стили диалога можно подправить после его создания. Сам диалог вызывается при нажатии не использующегося в браузере сочетания горячих клавиш, например, Ctrl + Shift + 5.

Полный набросок программы показан ниже.

// ==UserScript==
// @name         Скриптлатка
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Редактор кода в диалоге
// @author       AS
// @match https://*/*
// @match http://*/*

// ==/UserScript==
(function (){
    // @require      https://mitinogame.ru/js/mg_codeeditor.js?ver=0.0.64
    let codeMirrorEditor = null;
    let savedObject = null;

loadScript("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js")
        .then(function(script) {
        loadScript("https://code.jquery.com/ui/1.14.0/jquery-ui.js")
            .then(function(script){
            $('body').append(`
<style>
.CodeMirror {
font-family: Arial, monospace;
font-size: 14px;
}
</style>
                <script>
                    var $jQ2 = jQuery.noConflict(true);
                </script>
                `);
            loadCSS("https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css");
            initEditor();
        });
    });

function initEditor(){

loadResourses();

savedObject = localStorage.getItem('aspage-overcode');

if( savedObject ){

savedObject = JSON.parse(savedObject);

//console.log('load',typeof(savedObject.autoload));

if( savedObject?.autoload && savedObject.autoload == true){

preloadCode(savedObject.code);
            }
        }

$jQ2(window).on('keydown',e => {

var code = e.keyCode || e.which;

if( e.ctrlKey && e.shiftKey  ){

if (code == 53){
                    if(  $jQ2('.code-editor').length == 0 ){

initDialog();

} else {

if( savedObject ){

let {left, top, width, height} = savedObject;

$jQ2("#dialog").dialog({});

//                             $jQ2("#dialog").dialog( "option", "width", width );
//                             $jQ2("#dialog").dialog( "option", "height", height );

} else {
                             $jQ2("#dialog").dialog();
                        }
                    }

editorResize();

$jQ2('.ui-dialog').on("resize", function(event) {

editorResize();
                    });
                }
            }
        });
    }

function loadResourses(){

loadCSS("https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.17/codemirror.min.css");

loadScript("https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.17/codemirror.min.js")
            .then(function(script) {
            loadScript("https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.17/mode/javascript/javascript.min.js")
                .then(function(script) {
                loadScript("https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.17/addon/comment/comment.min.js")
                    .then(function(script) {
                    loadScript("https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.17/mode/xml/xml.min.js")
                        .then(function(script) {
                        loadScript("https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.17/mode/css/css.min.js")
                            .then(function(script) {

});
                    });
                });
            });
        });
    }

function initDialog(){

createDialog();

$jQ2('#dialog').css('overflow','hidden');

//        if( savedObject ){

//             $jQ2("#dialog").dialog( "option", "width", width );
//             $jQ2("#dialog").dialog( "option", "height", height );

//        }

createCodemirror();

if( savedObject && savedObject?.code ){
            codeMirrorEditor.setValue(savedObject.code);
        }
    }

function loadCSS(src){

let head  =  document.getElementsByTagName("head")[0];
        let link  =  document.createElement("link");
        link.rel  = "stylesheet";
        link.type = "text/css";
        link.href = src;

link.media = "all";
        head.appendChild(link);
    }

function loadScript(src) {
        return new Promise(function(resolve, reject) {
        let script = document.createElement("script");
        script.src = src;

script.onload = () => resolve(script);
        script.onerror = () => reject(new Error(`Ошибка загрузки скрипта  $jQ2{src}`));

document.head.append(script);
        });
    }

function createDialog(){

let el =  $jQ2(`
            <div id="dialog" title="Редактор кода">
                <div class="editor-control-panel" style="padding:4px;">
                    <input class="editor-run" type="button" value="Выполнить">
                    <input class="editor-undo" type="button" value="Отменить">
                    <input class="editor-copy" type="button" value="Копировать">
                    <input class="editor-autoload" type="checkbox"> Автозагрузка
                </div>
                <div class="code-editor"></div>
            </div>
        `);
         $jQ2('body').append( $jQ2(el));

if( savedObject?.autoload){

$jQ2('.editor-autoload').prop('checked', savedObject.autoload);
        }

$jQ2("#dialog").dialog({
            width: 500,
            position: { my: "center", at: "center", of: $jQ2(window) },
            minWidth: 300,
            minHeight: 200,
            maxWidth: 600,
            maxHeight: 470,
        });

$jQ2('.editor-run').on("click",function(){

runOvercode();
        });

$jQ2('.editor-undo').on("click",function(){

undoOvercode();
        });

$jQ2('.editor-copy').on("click",function(){

copyOvercode(codeMirrorEditor.getValue());
        });

$jQ2('.editor-autoload').on('click',function(){
            saveCode();
        });

$jQ2('.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable').css('z-index',1000);

$jQ2('button.ui-button.ui-corner-all.ui-widget.ui-button-icon-only.ui-dialog-titlebar-close').html(`
            <span class="ui-button-icon ui-icon ui-icon-closethick"></span>
            <span class="ui-button-icon-space"></span>
        `);

$jQ2('.ui-dialog-titlebar-close span').css("margin",'');

$jQ2('.ui-button-icon-only .ui-icon').css({
            'top':0,
            'left':0,
            'margin':0
        });
    }

function undoOvercode(){

let el =  $jQ2("#ascode-editor");

if(  $jQ2(el).length > 0){

$jQ2(el).remove();
        }
    }

function createCodemirror(){

let red = document.querySelector(".code-editor");

/*var mixedMode = {
            name: "htmlmixed",
            scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
                           mode: null},
                          {matches: /(text|application)\/(x-)?vb(a|script)/i,
                           mode: "vbscript"}]
        };*/

codeMirrorEditor = CodeMirror(red, {
            lineNumbers: true,
            tabSize: 2,
            tabMode: "indent",
            lineWrapping: true,
            theme: "default",
            height: "auto",
            extraKeys: {
                'Ctrl-/': 'toggleComment',
            },
            //mode: mixedMode,
        });

$jQ2(document).on('keyup', '.CodeMirror', function() {
            runOvercode();
        });
    }

function editorResize(){

let width =  $jQ2('#dialog').width();
        let height =  $jQ2('#dialog').height() -  $jQ2('.editor-control-panel').outerHeight();

// $jQ2('.CodeMirror').css('height',height);

codeMirrorEditor.setSize(null, height);
//         $jQ2(".CodeMirror-scroll").css("cssText", `min-width:  $jQ2{width}px !important; min-height:  $jQ2{height}px !important;`);
    }

function runOvercode(){

try{

let element = $jQ2("#ascode-editor");

if( $jQ2(element).length == 1 ){
              $jQ2(element).remove();
          }

element = document.createElement("div");
          element.id = "ascode-editor";

if( codeMirrorEditor ){

element.innerHTML = codeMirrorEditor.getValue();

console.log('run',element.innerHTML);

$jQ2("body").append(element);

saveCode();
          }

}catch(e){console.log('Ошибка',e)}
    }

function saveCode(){

let obj = {
            "left":  $jQ2("#dialog").dialog().offset().left,
            "top":  $jQ2("#dialog").dialog().offset().top,
            "width":  $jQ2("#dialog").dialog().outerWidth(),
            "height":  $jQ2("#dialog").dialog().outerHeight(),
            "code": codeMirrorEditor.getValue(),
            "autoload":  $jQ2('.editor-autoload').prop('checked'),
        }

//console.log('save',obj.autoload);

obj = JSON.stringify(obj);

localStorage.setItem('aspage-overcode', obj);
    }

function preloadCode(code){

if( code ){

try{
                let el = document.createElement("div");
                el.id = "ascode-editor";
                el.innerHTML = code;
                $jQ2("body").append(el);
            }catch(e){
                console.log('Ошибка',e)
            }
       }
    }
})();

К недостатку Скриптлатки можно отнести то, что изменение структуры страницы будет происходить после формирования интерфейса, в результате чего пользователь сначала увидит исходный интерфейс, а затем изменённый. Например, если в исходном интерфейсе есть изображения, которые мы не хотим видеть, то на мгновения они отобразятся, а затем сработает код скрипта для их скрытия. Но в этом и состоит суть "заплатки", когда она "пришивается" к сформировавшейся странице. Скриптлатку можно использовать для отладки своих страниц: правим их код в браузере, а после отладки копируем в код страницы.

Что можно здесь ещё придумать? Например, отображение при активном флажке кнопки в виде пиктограммы на страницах, что к ней применен модифицирующий код. В этом случае можно будет нажать на кнопку для отображения диалога редактора.

actech