редактор в стиле киберпанк

Discussion in 'ПО для Web разработчика' started by ckpunmkug, 18 Apr 2017.

  1. ckpunmkug

    ckpunmkug Member

    Joined:
    20 Mar 2017
    Messages:
    72
    Likes Received:
    72
    Reputations:
    10
    Чёрный фон, зелёные буквы, в полный экран, без скролбаров, автоотступ, граница, микроскрол, моношрифт. Исходник прост, структура атомарна, управление традиционно. Платформонезависимый, ориентрован на вэбразработку.
    editor.png
    github screenshoot

    Необходимые условия эксплуатации
    http сервер с php
    chromium или его производная
    Установка
    Скачать и распаковать на сервере.
    Настроить серверу авторизацию.
    Загрузить editor.html
    Управление
    Control + O Открыть файл
    Control + S Сохранить файл
    Control + Shift + S Сохранить изменив имя
    Control+ G Перейти на строку с определённым номером
    Escape - Скрыть строку ввода
    Alt + Arrow( Left, Up, Right, Down ) - скролят текст не меняя положение курсора
    Enter - новая строка с тем же числом пробелов в начале как у предъидущей
    Shift + Enter - новая строка без пробелов в начале​

    Настройки
    строка ввода файл - editor.js, параметры - inputVerticalShift, inputSideSpace
    микроскрол
    файл - text/text.js, параметры - widthScrollStep, heightScrollStep

    Пояснения
    Редактор намеренно создан с минимальным набором функций, но так, что бы легко функции прикручивались.​
     
    #1 ckpunmkug, 18 Apr 2017
    Last edited: 19 Apr 2017
    coryphaeus likes this.
  2. ckpunmkug

    ckpunmkug Member

    Joined:
    20 Mar 2017
    Messages:
    72
    Likes Received:
    72
    Reputations:
    10
    editor.png
    Стиль «как видят киберпанк в кино»
    Был создан из любви к стилистике и для Bble6oHa.
    Ветка на гитхабе получила название true

    При создании новой раскраски были изменены файлы
    text/background.php
    text/text.css
    string/string.css
    editor.js
    main.js

    Мне нравится как выглядит кислотный зелёный и размытый шрифт на фоне древнего монитора.
    Но пользоваться ежедневно я предпочитаю редактором с мордой в ветке master.
     
    coryphaeus likes this.
  3. ckpunmkug

    ckpunmkug Member

    Joined:
    20 Mar 2017
    Messages:
    72
    Likes Received:
    72
    Reputations:
    10
    Кроме мордашки без рамок и надписей, редактор обладает одной важной особенностью - к нему легко смастерить плагин. И я расскажу как это делать.

    Добавлять редактору будем следующий функционал:
    При нажатии клавиш Win + '`' будет напечатан текст
    Code:
    if(  )
        {
        }
    else
        {
        trigger_error( __FUNCTION__."(): ", E_USER_WARNING );
        return( false );
        }
    
    Если слева от курсора находились пробелы, они будут добавлены в начале каждой строчки.
    А после появления текста курсор встанет внутрь скобок if
    ( кнопка Win в chromium называется Meta, а в xfce <Super> )

    [ ! ] Куски кода которые нужно внедрять представлены вместе с имеющимся кодом.

    Внутри директории редактора создадим диру plugins в неё сохраним файл autoprint.js и в editor.html его подключим:
    Code:
            ><script
             src='editor.js'
            ></script
            ><script
             src='plugins/autoprint.js'
            ></script
            ><script
             src='main.js'
            ></script
    
    В autoprint.js создадим объект autoprint, а в нём функцию iferror и контейнер для объекта editor
    Code:
    var autoprint =
        {
        iferror: function( event )
            {
            alert( "iferror" );
            }
        ,editor: undefined
        };
    
    Открываем main.js и привязываем editor к autoprint
    Code:
            editor.string = string;
            autoprint.editor = editor;
            editor.position(  );
    
    Дальше добавим вызов autoprint.iferror( event ) на нажитие win+'`'
    Здесь же в main.js есть код
    Code:
    window.addEventListener
        (
        'keydown'
        ,function( event )
    
    Вот внутрь этой функции добавим новую реакцию которую надо поместить внутрь условия
    Code:
            if( !event.ctrlKey && !event.altKey && !event.shiftKey )
                {
                if( event.metaKey )
                    {
                    if( event.key == '`' || event.key == 'ё' )
                        {
                        event.preventDefault(  );
                        autoprint.iferror( event );
                        return( true );
                        }
                    }
    
    На этом внедрение плагина закончено переходим к редактированию функции autoprint.iferror
    Code:
        iferror: function( event )
            {
            if( editor != undefined && editor.text != undefined )
                {
                var textarea = this.editor.text.element;
                var position = textarea.selectionStart;
                var index = position - 1, spaces = '', char = '';
                while( index >= 0 )
                    {
                    char = textarea.value.charAt( index );
                    if( char == "\n" )
                        break;
                    else
                        spaces += char;
                    index -= 1;
                    }
                var text =
                        "if(  )\n"
                    + spaces + "\t{\n"
                    + spaces + "\t}\n"
                    + spaces + "else\n"
                    + spaces + "\t{\n"
                    + spaces + "\ttrigger_error( __FUNCTION__.\"(): \", E_USER_WARNING );\n"
                    + spaces + "\treturn( false );\n"
                    + spaces + "\t}";
                document.execCommand( 'insertText', false, text );
                textarea.selectionStart = position + 4;
                textarea.selectionEnd = position + 4;
                return( true );
                }
            return( false );
            }
    
    Немного информации об объектах:
    Там где печатается весь текст это textarea, которую присоеденяет объект text.
    Объект text отвечает за автопробелы( autoindent ) и микроскрол, его присоединяет к себе editor.
    editor выполняет сохранение и загрузку, прыжки на строку с определённым номером, а так же позиционирует textarea и input.​
     
    #3 ckpunmkug, 19 Apr 2017
    Last edited: 19 Apr 2017
    coryphaeus likes this.
  4. coryphaeus

    coryphaeus Member

    Joined:
    15 Mar 2017
    Messages:
    34
    Likes Received:
    10
    Reputations:
    0
    Прикольно выглядит, мне понравилось. Как нибудь для прикола попробую
     
  5. Sun2017

    Sun2017 Member

    Joined:
    5 May 2017
    Messages:
    337
    Likes Received:
    85
    Reputations:
    0
    не вижу смысла в этом редакторе, только зрение напрягать глаза.

    используй новое, например для php это komodo edit 11
    для c++ netbeans для написания демонов (служб) для серверов.