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

Контракт

Переноса строк в блоке кода нет: перенос в команде меняет её смысл. Отсюда горизонтальная прокрутка, а scrollbar-gutter зарезервирован, чтобы появление полосы не сдвигало код на пиксель при каждом обновлении.

Доступность

Варианты

Копируемое значение

Однострочное значение с кнопкой — хеш, идентификатор, путь.

<span class="inst-copyable">a4f7c2e
  <button class="inst-copy" type="button" aria-label="Скопировать a4f7c2e">
    <svg class="inst-icon" aria-hidden="true"><use href="#i-copy"/></svg>
  </button>
</span>

Кнопка стоит в потоке, с просветом, и видна всегда. Абсолют в углу с проявлением по наведению — приём блока кода: там угол свободен и текста много. У однострочного значения угла нет, и значок ложился на последние символы, а на касании его не было вовсе, потому что наведения на касании не бывает.

Область нажатия у кнопки растёт до нормы невидимым ::before — тем же приёмом, что у флажка: растёт область, а не значок, и строка остаётся прежней высоты.

Копируемое значение в строке

Самое частое его место и меньше всего похожее на блок кода: колонка идентификаторов в таблице, машинное значение в списке свойств. Разметка — тот же inst-copyable, таблица в ней ничего не меняет.

<table class="inst-table">
  <thead><tr><th>Прогон</th><th>Идентификатор</th><th>Состояние</th></tr></thead>
  <tbody>
    <tr><td>nightly-4127</td>
      <td><span class="inst-copyable"><code>2f8a1c04-9b7e-4d31-a5f0-c6e2</code>
        <button class="inst-copy" type="button" aria-label="Скопировать 2f8a1c04-9b7e-4d31-a5f0-c6e2">
          <svg class="inst-icon" aria-hidden="true"><use href="#i-copy"/></svg>
        </button></span></td>
      <td><span class="inst-badge" data-tone="running"><span class="inst-dot"></span>идёт</span></td></tr>
    <tr><td>audio-pass</td>
      <td><span class="inst-copyable"><code>7c31b9de-2a44-4e08-8f1b-30d7</code>
        <button class="inst-copy" type="button" aria-label="Скопировать 7c31b9de-2a44-4e08-8f1b-30d7">
          <svg class="inst-icon" aria-hidden="true"><use href="#i-copy"/></svg>
        </button></span></td>
      <td><span class="inst-badge" data-tone="error"><span class="inst-dot"></span>упало</span></td></tr>
  </tbody>
</table>

Три вещи про строку, в которых легко ошибиться, — и в двух из них справочник ошибался сам, пока этот раздел не был написан:

Размер значка здесь не написан и написан быть не должен: .inst-copy — это --size-icon-sm везде, где он стоит, потому что значок рядом со значением обслуживает значение. Места, которые выбирали сами, выбирали по-разному — именно так в одном ките оказались кнопка копирования на 18 пикселей и на 10 на одной странице.

Листинг с номерами строк

<div class="inst-code inst-code--numbered">
  <div class="inst-code-line"><span class="inst-code-num">41</span><span class="inst-code-src">const size = 256;</span></div>
  <div class="inst-code-line"><span class="inst-code-num">42</span><span class="inst-code-src">let seed = Date.now();</span></div>
  <div class="inst-code-line"><span class="inst-code-num">43</span><span class="inst-code-src">return generate(size, seed);</span></div>
</div>

Номер не выделяется мышью — user-select: none: копируют код, а не страницу. Колонка номеров ровно 5ch, и это не запас на глаз: пятизначный номер строки встречается в настоящих файлах, а колонка, растущая от содержимого, сдвигала бы код при каждой подгрузке.

JS

Подключите модуль один раз на страницу — инициализировать компоненты по отдельности не нужно, instrument.js работает делегированием и видит узлы, пришедшие позже.

<script type="module" src="instrument.js"></script>

Что делает instrument.js

Примеры на этой странице живые: наведите на блок кода и нажмите кнопку копирования — значок сменится на галку.

Копирование целиком: текст в буфер, цветной ответ на кнопке и объявление результата вслух. Ответ обязателен — буфер обмена ничего не показывает, и без него человек жмёт кнопку второй раз.

Источник — текст ближайшего .inst-code или .inst-copyable без самой кнопки. Читается textContent, а не innerText: второй у свёрнутого блока возвращает пустую строку, и копирование ушло бы в ничто беззвучно.

Опции

<span class="inst-copyable">a4f7c2e
  <button class="inst-copy" type="button" data-copy="a4f7c2e91b0d5537"
          aria-label="Скопировать полный хеш"></button>
</span>

События

inst:copy всплывает с { text } и отменяем: preventDefault() означает «копирую сам», и instrument.js не трогает буфер.

document.addEventListener('inst:copy', (e) => {
  analytics.track('copy', { length: e.detail.text.length });
});

Чего instrument.js не делает

Подсветку синтаксиса. Она требует разбора языка, и это работа приложения.

API

Связанное

ЛогТаблицаСписок свойствДиф