Предварительный просмотр содержимого ссылок с React, Vue и JavaScript

Предварительный просмотр содержимого ссылок с React, Vue и JavaScript

От автора: я люблю не только вести блог, но и читать блоги! Традиционно, когда блогеры излагают некоторые научные факты или ссылаются на другие посты, они должны добавить ссылку на источники. Вопрос для читателей: стоит ли прекратить читать пост и перейти к чтению источника сейчас? Потому что в посте у нас может быть до 10 ссылок на разные источники. Что нам делать – продолжать читать или перейти по ссылке?

Вот почему в настоящее время средство просмотра содержимого ссылок является обязательной функцией для блогов и даже чатов. Вы уже видели их в самых разных формах на Facebook, LinkedIn, Twitter, WhatsApp и т. д.

Основным преимуществом предварительного просмотра содержимого ссылки является то, что читатели могут увидеть, что они прочитают позже, прежде чем перейти по ссылке.

Обычно предварительный просмотр содержимого ссылки содержит имя домена (URL), заголовок, текст и изображение. Вы также можете добавить дополнительную информацию, предоставляя больше данных для содержимого.

В этой статье я покажу вам, как можно быстро разработать функцию просмотра содержимого ссылок для блога с помощью React, Vue и Vanilla JavaScript.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Предварительный просмотр содержимого ссылок с React, Vue и JavaScript

По принципу от простых до более сложных концепций, давайте начнем с реализации на Vanilla JavaScript.

Часть I: Предварительный просмотр содержимого ссылок на VanillaJS

Первый шаг — добавить простой текстовый контент в index.html:

Далее нам необходимо создать элемент card, который будет включать и отображать информацию из указанного источника:

Вы видите, что я использую Bootstrap 4 и собственные CSS-классы для стилизации карточек. Их также нужно импортировать в head:

Благодаря функционалу Boostrap 4, позиционирование элементов и некоторые базовые стили автоматически применяются из библиотеки. Итак, файл index.css не большой, поэтому ниже вы найдете все необходимые стили для функции предварительного просмотра содержимого ссылки:

Чтобы заставить работать предпросмотр содержимого ссылок, нам нужно написать JavaScript. Я надеюсь, вы не забыли добавить script в конце body в index.html:

Мы готовы приступить к JavaScript:

Объявляем card и реализуем две функции hideLinkPreview(event) и showLinkPreview(event) с параметром event. В нашем случае это события onmouseover и onmouse leave для ссылки <a />.

hideLinkPreview(event) работает просто. Она просто скрывает предварительный просмотр содержимого (карточку) при событии отведения мыши.

Для showLinkPreview(event) важно получить из ссылки <a /> такие атрибуты, как data-image, data-title и data-text, установить их в экземпляре card, чтобы отобразить предварительный просмотр содержимого ресурса при событии наведения курсора мыши.

event.currentTarget.appendChild(card); помогает нам добавить в card окно предварительного просмотра содержимого ссылки и правильно расположить / отцентрировать карточку над ссылкой.

Передаем все необходимые данные в index.html для предварительного просмотра непустого card в браузере при наведении.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Полный исходный код реализации VanillaJS вы можете найти:

Часть II. Предварительный просмотр содержимого ссылок с помощью Vue.js

Как вы уже догадались, index.html и index.css будет выглядеть аналогично реализации index.html и index.css из VanillaJS:

Чтобы использовать фреймворк Vue.js, вам нужно добавить скрипт Vue.js:

В соответствии с index.html, нам не хватает компонента link-previewer с соответствующими реквизита: href, text, previewTitle, previewImg и previewText. Давайте создадим компонент link-previewer с Vue.js в index.html:

Единственные данные, которые изменяют состояние компонента link-previewer, это shown: false в data()

Это зависит от вызова методов show() и hide()

В случае реализации Vue.js компонент card с указанными реквизитами будет построен как template.

Данные передаются из link-previewer в card с помощью сокращения v-bind, и событие через v-on.

Полное решение на Vue.js вы можете найти здесь: Vue.js — index.html.

Часть III. Предварительный просмотр содержимого ссылок с помощью React.js

HTML-структура компонента App.js практически такая же, как и index.html для реализации VanillaJS:

Разница лишь в том, что нам нужно создать компонент LinkPreviewer и использовать его для визуализации нужных данных для предварительного просмотра содержимого ссылки:

LinkPreviewer возвращает <a/> с нужными свойствами, событиями и классами стилей для воспроизведения предварительного просмотра содержимого ссылок в браузере.

Компонент Card отображает содержимое как изображение, заголовок и текст источника при предварительном просмотре, когда isShown — true.

Благодаря React Hook const [isShown, setIsShown] = useState(false); мы можем просто обрабатывать два события onMouseEnter и onMouseLeave из LinkPreviewer при наведении курсора, и скрывать и отображать предварительный просмотр содержимого ссылки.

CSS-классы идентичны index.css подходу VanillaJS. Сниппеты кода реализации React вы можете найти здесь.

Заключение

Как видите, реализовать функцию предварительного просмотра содержимого ссылки просто, не зависимо от того, какую среду JavaScript или библиотеку вы используете. Потому что любая реализация будет несильно отличаться от другой. Подход остается прежним.

Если вы являетесь разработчиком или технически подкованным человеком, у которого есть собственный блог, то вам не нужно полагаться на стороннюю библиотеку, чтобы получить такой функционал. Вы можете разработать его самостоятельно. Спасибо за прочтение! Надеюсь, вы нашли этот краткий пост полезным и практичным.

Автор: Ilona Codes

Источник: https://dev.to

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий