Отправляем текст в буфер обмена одним кликом.
Иногда на работе нужно дать шаблонные ответы: например, «отбивку» о полученной задаче, стандартное извинение в соцсетях, напоминание по задаче или приглашение на встречу. Чтобы каждый раз не сочинять письмо заново, сделаем что-то вроде менеджера шаблонов.
Это будет специальная страница с заранее прописанными шаблонами. Вам останется только кликнуть по шаблону и вставить текст в нужном месте. Пока что всё будет выглядеть и работать просто, а в будущих частях разовьём идею и сделаем красиво.
Логика проекта
Так как это веб-страница, писать будем на HTML и JavaScript. За основу возьмём наш стандартный шаблон.
Шаблон страницы
Принцип работы:
- Мы заранее продумываем, какой текст нам нужен и для каких ситуаций. Можно собрать на одной странице любое число шаблонов для почты, мессенджеров и соцсетей.
- Показываем их все на странице, чтобы сразу было понятно, где заканчивается один и начинается другой.
- Делаем так, чтобы при клике на шаблон его текст копировался в буфер обмена. Теперь можно перейти, например, в письмо и вставить готовый текст.
Смысл в том, что теперь можно ничего не выделять мышкой, чтобы скопировать текст — достаточно нажать на шаблон, и он уже в буфере обмена. Это быстрее и удобнее.
Заполняем страницу
Первым делом пишем заголовок:
<h1>Выберите шаблон ответа</h1>
Чтобы потом в скрипте понимать, куда именно нажал пользователь, завернём каждый текстовый шаблон в отдельный блок тегом <div>..</div>. Это позволит нам присвоить каждому блоку своё уникальное имя и даст нам возможность оформить их красиво. Для переноса строк и деления на абзацы используем тег <br> — он вставляет перенос на новую строку.
И ещё парочка похожих. Шаблонов в таком духе может быть сколько угодно. Шаблоны довольно дурные, но нам сейчас нужно лишь опробовать технологию. В будущем прокачаем решение и обратимся к хорошему составителю шаблонов, чтобы он нам помог с текстом.
А ещё мы тут применяем одну хитрость. Посмотрите на id у каждого блока — у них отличается только цифра и окончание. Это пригодится нам для следующих элементов, где будем хранить сами шаблоны — мы назовём их точно так же, но без окончания h2. Благодаря этому мы сможем обработать все клики в одной функции.
Добавляем красоту
Чтобы наша страница с шаблонами выглядела немного красивее и ей было удобно пользоваться, добавим стиля.
Текст должен стать крупнее и читаемее. Для этого мы:
- увеличим размер текста
- поменяем шрифт
- добавим отступы
- явно пропишем, что текст в обычном состоянии чёрный — это пригодится нам на втором этапе.
То же самое в виде стилей:
div{ font-size: 20px; font-family: 'Arial'; margin: 60px; color: black; }
А теперь сделаем так, чтобы при наведении мышки у нас подсвечивался выбранный шаблон. Нам понадобится ховер — мы уже рассказывали о нём, когда делали стильные ссылки:
/*подсвечиваем текст при наведении на него*/ div:hover
{ color: #cf0000; }
Готовим шаблоны для копирования
Кажется, что всё готово к тому, чтобы мы начали писать скрипт, но ещё рано. Последнее, что нам осталось, — подготовить сами шаблоны.
Мы не можем использовать тот текст, который внутри блока div — если мы получим его содержимое с помощью свойства document.getElementById().InnerHTML, то у нас будут в шаблоне все теги, которые мы прописали внутри блока: <br>, <p> и все остальные. Чтобы у нас копировался только текст, мы сделаем на странице невидимые элементы textarea и положим шаблоны туда. Они поддерживают переносы строк, поэтому нам не нужно будет использовать дополнительные теги — как мы напишем, так и будет скопировано.
За невидимость отвечает атрибут hidden="true" — мы пропишем его в каждом элементе. А чтобы мы могли их различать, у каждого шаблона будет своё имя. Оно будет совпадать с именем соответствующего блока <div>, но без окончания «_div». Если мы в скрипте сможем отбросить эту часть (а мы сможем), то можно будет сделать всего один обработчик на всю страницу. А пока просто добавим эти элементы на страницу:
И так далее для остальных шаблонов. Решение костыльное, но быстрое и рабочее.
👉Также такое решение позволяет нам сделать такую штуку: написать в видимой части страницы что-то одно, а в самом тексте шаблона — другое. Например, можно в шаблоне предусмотреть пустые места для заполнения, и на странице их заполнить, а в textarea оставить пустыми.
Или так: на странице вывести короткие названия шаблонов, а в textarea вставить их полные тексты. Это вариант для тех, кто делает решение лично для себя.
Пишем скрипт
У нас всё готово, осталось добавить на страницу обработчик нажатия на блок с шаблоном текста.
Прежде всего подключаем jQuery — будем использовать его для того, чтобы находить элементы на странице по их именам:
Чтобы не писать много одинаковых функций, которые делают то же самое, сделаем одну на всех. Для этого мы прямо в объявлении обработчика события click через запятую перечислим все имена объектов, за которыми надо следить. Так как мы нажимаем на блоки с текстом, которые оформлены внутри блоков <div>..</div>, то и имена возьмём оттуда. В нынешней реализации их может быть не более 100 штук.
Единственная магия, которую мы делаем в скрипте, — это создание виртуальной текстовой области на странице, через которую мы копируем текст. Работает это так:
- мы не можем выделить текст в существующих элементах textarea, потому что они невидимые и в них текст не выделяется.
- чтобы это обойти, мы создаём виртуальный такой же элемент, в который копируем нужный текст.
- затем мы его виртуально размещаем на странице , выделяем внутри него весь текст и копируем его в буфер обмена.
- чтобы этот элемент не висел в памяти, удаляем его сразу после использования.
То же самое на языке JavaScript:
На нашем сервере вы можете посмотреть, как это работает.
Готовый код
Что дальше
У нас уже получился рабочий проект. Какие в нём проблемы:
- Костыльная реализация данных: сейчас блоки с текстом шаблонов вшиты в страницу и перечислены вручную. А надо, чтобы они сидели в каком-нибудь массиве и заполняли страницу автоматически.
- Так себе дизайн, нужно думать и рисовать. Сделаем это в будущем.
- Ограничение на 99 шаблонов. Сейчас это не проблема, но если проект будет использоваться, довольно быстро это станет проблемой.
- Чтобы добавить свой шаблон, нужно редактировать код. А хочется, чтобы можно было добавлять прямо на странице.
Будем решать!
