Код на телефоне: панель символов над клавиатурой

Набирать код на телефоне неудобно не из-за маленького экрана, а из-за клавиатуры: скобки, кавычки, двоеточия и знак равенства спрятаны на втором и третьем слое. Чтобы написать <a href="#">, приходится переключать раскладку несколько раз. Теперь в редакторе Penlab на телефоне над клавиатурой появляется панель с нужными символами, а CSS и JS сами дописывают часть кода.

Панель над клавиатурой

Панель показывается на сенсорных экранах, когда курсор стоит в одном из редакторов кода — HTML, CSS или JS. Она прилегает к верхнему краю клавиатуры и прячется вместе с ней.

Слева в панели всегда три кнопки:

• Отменить и Повторить — шаг назад и вперёд по истории правок. На компьютере это Ctrl+Z и Ctrl+Shift+Z, а на экранной клавиатуре таких сочетаний нет.
• Tab — то же, что клавиша Tab на компьютере: разворачивает сокращение Emmet, а если сокращения нет — делает отступ. Набираете ul.menu>li*3>a, нажимаете Tab — получаете список из трёх пунктов со ссылками.

Дальше — символы, у каждой панели свои:

• HTML: < > / = " ' . # !
• CSS: { } : ; # . - ( ) % !
• JS: ( ) { } [ ] = ; ' ` ` $ . => ! & |`

Если ряд не помещается на экран, он прокручивается пальцем вбок.

Символ с панели вставляется так же, как набранный на клавиатуре: открывающая скобка или кавычка получает пару, а > в HTML закрывает тег. Нажатие не забирает фокус у редактора — клавиатура не закрывается, курсор остаётся на месте.

CSS: двоеточие и точка с запятой

Двоеточие и точка с запятой — самые частые символы в CSS, и именно их на телефоне дольше всего искать. Теперь редактор ставит их сам:

• Пробел после свойства превращается в : . Набираете display и пробел — получаете display: , и сразу открывается список значений. Срабатывает только на известных свойствах: вложенный селектор вроде div span остаётся как есть.
• Enter в конце строки ставит ;. Строка color: red после Enter становится color: red;, курсор переходит на новую строку с отступом. Если значение не закончено — открыта скобка, строка кончается запятой — точка с запятой не ставится.
• Выбор свойства из подсказки тоже вставляет : и открывает список значений.

Каждая такая вставка отменяется отдельным шагом: первое «Отменить» убирает только ; или : , набранное руками остаётся.

Помощь работает на всех устройствах, не только на телефоне, — в панели CSS и в <style> внутри HTML. Выключается в «Настройках»: пункт «CSS: двоеточие и точка с запятой».

JS: подсказки и заготовки

В панели JS появились подсказки для объектов браузера. После document. в списке — querySelector, getElementById, addEventListener и остальные методы; то же для переменных, в которых лежит элемент.

Для самых частых вызовов есть короткие заготовки. Набираете сокращение, выбираете его в списке — вставляется вызов целиком, курсор встаёт туда, где нужно продолжить:

• qs → document.querySelector('')
• qsa → document.querySelectorAll('')
• gid → document.getElementById('')
• ael → addEventListener('', (event) => {})
• cl → console.log()

Например, вместо ввода с клавиатуры всей строки:

const menu = document.querySelector('.menu');
menu.addEventListener('click', (event) => {
  console.log(event.target);
});

достаточно набрать qs, ael и cl и выбрать их в подсказках.

Крупнее список подсказок

Список подсказок во всех панелях стал крупнее: 14 пикселей вместо 12. На телефоне в него стало проще попадать пальцем, на компьютере его легче читать.

Где этого нет

Панель клавиш есть только в самом редакторе — на страницах нового пена и сохранённого пена. Во встроенном пене на чужом сайте код только для чтения, в мини-редакторе на главной панели JS нет, поэтому клавиш там нет. Помощь в CSS и крупный список подсказок работают везде, где можно писать код.

Если на телефоне вам не хватает какого-то символа — напишите нам на penlab.info@yandex.com, добавим в панель.