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

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

  1. ckpunmkug

    ckpunmkug Member

    Joined:
    20 Mar 2017
    Messages:
    64
    Likes Received:
    65
    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.
    1. ckpunmkug

      ckpunmkug Member

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

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

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

        ckpunmkug Member

        Joined:
        20 Mar 2017
        Messages:
        64
        Likes Received:
        65
        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.
        1. coryphaeus

          coryphaeus Member

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

            Sun2017 Member

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

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