Гнев, торг, принятие. Добавляем GIF в блок комментариев DTF. Часть 2

Дратути! Вот и созрела вторая часть дневника разработки расширения для Chrome, которое (если я его не заброшу) добавит интеграцию GIPHY в комментарии DTF. В прошлом дневнике я научился отрисовывать кнопку на каждой страничке и подгружать заглушку по кнопке.

Сегодня будем облагораживать форму поиска гифок и постараемся получить результат запроса к API GIPHY.

Почитать можно туть:

Разработка не стояла на месте, поэтому у меня есть, что вам рассказать :)

День 9. Замена SVG и минимальная стилизация формы

По советам трудящихся поменял иконку на более нативную для DTF. Честно забрав её с мобильной версии:

Гнев, торг, принятие. Добавляем GIF в блок комментариев DTF. Часть 2

Так же убрал заглушку с гифкой и облагородил кнопыньку и поле ввода в форме, теперь можно забирать данные из формы и триггерить отправку запроса в сторону GIPHY.

Гнев, торг, принятие. Добавляем GIF в блок комментариев DTF. Часть 2

День 10. А разговоров то было ...

День был тяжёлый, поэтому к расширению я добрался только поздно вечером. Предвкушая ужас от раскуривания документации по API GIPHY я заварил себе прекраснейший какао из Пятёрочки и сел писать функцию, которая будет стучаться в endpoint API и выгружать мне список гифок по запросу.

Гнев, торг, принятие. Добавляем GIF в блок комментариев DTF. Часть 2

Спустя буквально 30 минут, я спокойно родил нужные мне функции, немного повозившись с тем, как мне запихивать содержимое ответа в форму.

Гнев, торг, принятие. Добавляем GIF в блок комментариев DTF. Часть 2

Оставлять необработанный массив гифок было не удобно, поэтому поигравшись с CSS, собрал всё в более приличный вид.

По пути поправил баги с перезагрузкой формы при отличном запросе и пробросил первые попытки поместить ссылку гифки в поле ввода текста комментария.

Ссылочка по клику добавляется, но дальше надо думать, как триггерить API DTF на загрузку этой сслылки :)

Демонстрация работы как обычно ниже:

До следующих дневников и хорошего вам дня!

Гнев, торг, принятие. Добавляем GIF в блок комментариев DTF. Часть 2
77
21 комментарий

Комментарий недоступен

1
Ответить
Автор

Думаю да, но не первый раз уже вижу вопрос про Tenor :) Чем он лучше GIPHY?

Ответить
Автор

Да, тенор конечно в разы лучше

1
Ответить

А у телеги Tenor?

Ответить

когда релиз? очень хочу такое, думал сам писать но адски лень. Обязательно сделать избранные Gif

Ответить
Автор

Да думаю ещё недельки две надо, мб раньше управлюсь
А вот с избранными конечно сложно будет, у меня пока нет идеи по реализации этого

1
Ответить

Уточка.

Ответить