Слайдер для сравнения изображений

[Joseph_Hansen]

	Краткое описание	Добавить кнопку в редактор для создания перетаскиваемого интерактивного слайдера сравнения изображений.
	Репозиторий	GitHub - josephclaytonhansen/discourse-image-comparison-slider · GitHub
	Руководство по установке	Как установить тему или компонент темы
	Новичок в темах Discourse?	Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

Этот компонент добавляет кнопку в редактор для создания перетаскиваемых слайдеров сравнения изображений. Настройки слайдера, такие как направление или иконка кнопки, могут быть настроены в параметрах администратора.

Это моя первая попытка разработки для Discourse, поэтому прошу прощения, если я допустил какие-либо ошибки.

[Jagster (Jakke Flemming)]

Что такое WIP? (Теперь уже 20 символов?)

[Moin]

WIP

[ColdSun]

WIP — это работа в процессе.

[Canapin (Coin-coin le Canapin)]

Это здорово! Спасибо за этот вклад

@Joseph_Hansen

Это черновая версия с запланированными обновлениями.

Какие именно обновления вы имеете в виду?

[Joseph_Hansen]

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

Также я планирую добавить возможность изменения направления слайдера прямо из редактора сообщений — сейчас направление определяется настройками администратора, но я хотел бы сделать этот параметр управляемым пользователем. (ИСПРАВЛЕНИЕ: это уже добавлено!)

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

[chapoi]

Крутые вещи!
Спасибо за вклад

[Joseph_Hansen]

Добавлена возможность выбора пользователем вертикального или горизонтального ползунка с помощью атрибута data-direction-horizontal или data-direction-vertical. Если пользователь не укажет направление, будет использована настройка по умолчанию, выбранная в административных настройках.

Это обновление доступно сейчас на GitHub или из панели администратора Discourse, если вы установили компонент темы.

[davidkingham]

Очень круто, спасибо, Джозеф! Всё работает хорошо, но на моём сайте я вижу эту ошибку:

Она исчезает, если обновить страницу, и в консоли я вижу только следующее:

[Lilly (Lillian)]

Это круто. Отличная работа.

[Joseph_Hansen]

Трудно сказать, что именно вызывает эту проблему — у меня на локальной машине воспроизвести не получается Из этих ошибок только первая может быть связана с этим компонентом, так как я не использую tooltipContainer и не сталкиваюсь с циклом ResizeObserver, но, опять же, я не уверен. Вы обновились до последней версии? Вчера я внес несколько изменений, которые могли бы исправить эту проблему.

[davidkingham]

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

Ещё один момент: иконка не хочет меняться. Я, разумеется, добавил её в подмножество SVG-икон. Также пробовал другие иконки, которые уже работают на моём сайте, но она так и не меняется с молнии. Я пытаюсь изменить её на arrows-alt-h.

[Joseph_Hansen]

@davidkingham

Ещё один момент: иконка не хочет меняться. Я, разумеется, добавил её в подмножество SVG-иконок. Также пробовал разные иконки, которые уже работают на моём сайте, но она всё равно не меняется с молнии. Я пытаюсь изменить её на arrows-alt-h.

Это моя ошибка, я только что внес исправление, которое решит эту проблему. Спасибо, что заметили!

[Frully]

Очень круто, у меня есть несколько проблем:

Локализация

В нашем форуме мы переключились на локаль en_GB, поэтому при наведении курсора я вижу:

вместо альтернативного/дополнительного текста из настроек компонента:

Невозможно выделить текст

Плагин, кажется, перехватывает все события нажатия мыши и мешает мне выделять любой текст на странице для копирования, вставки, цитирования и т. д. Это не проблема на meta.discourse… Готов предоставить больше деталей о моей конфигурации/теме (в основном простая тема от Сэма с несколькими дополнительными компонентами, такими как галерея и GIF-анимации) Проблема исчезла… Я люблю технологии.

3.1.0.beta4

(f0bdb2ee9a)

Не работает в Firefox вообще (и у некоторых пользователей мобильного Chrome)

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

[Joseph_Hansen]

Хм… это странно, я тестировал это в Firefox без проблем. Попробую воспроизвести. Люблю случайные баги В используемой мной библиотеке на GitHub нет никаких проблем для Firefox, ни открытых, ни закрытых, что ещё больше усложняет исправление ошибок.

Локали — я не уверен, какой процесс предусмотрен для предоставления файлов локализации. Я могу добавить en.GB, так как владею этим языком, но это предел моих знаний. Знают ли другие авторы компонентов тем, как должны работать переводы файлов локализации? Мне просто прогнать текст через Google Translate?

[Frully]

Единственное различие, которое я вижу между вашим и рабочим компонентом (giphy), — это отступы…

locales/en.yml

Возможно, дело в том, что весь контент YAML находится на одном уровне отступа, что-то там с парсером.

locales/en.yml

В общем… я самоучка и понятия не имею, что делаю.

[Joseph_Hansen]

Понимаю, как вы себя чувствуете Я разберусь с этим. Я использую парсер YML из VS Studio, но он может не полностью соответствовать стандартам. Попробую сделать аккуратное ручное форматирование отступов в «Блокноте».

[Joseph_Hansen]

@Frully Я исправил проблему с Firefox — теперь это должно работать во всех браузерах (я протестировал Chrome, Firefox, Safari и мобильные версии без проблем). Если вы обновите это, оно будет работать для ваших пользователей Firefox.

[Stephane_Roy]

Здравствуйте

Этот компонент темы очень крутой, спасибо, я только что установил его

Проблема с текстом кнопки и с текстом-заполнителем

---

У меня также установлен компонент темы

Masonry Image Gallery

This feature is now built-in to Discourse core, see the announcement regarding image grids in Discourse. This theme component adds a responsive masonry-style image gallery with customizable ordering. Desktop view: [desktop_view] Mobile view: [mobile_view] When clicking on an image it will open with the default lightbox viewer. You add the gallery by clicking on the grid icon and then adding your images. It also works by first selecting the uploaded images and then clickin…

После установки у меня следующее:

• текст кнопки «Image comparison slider» также отображается на кнопке «Masonry Image Gallery»
• текст-заполнитель «Image comparison slider» вместо текста-заполнителя «Masonry Image Gallery»

Странно, не так ли?

Стефан

Forums FFJdR

[Heddson]

Я не думал об этой проблеме. Спасибо, что указали на неё, @Stephane_Roy!

Суть проблемы в том, что оба компонента темы используют одни и те же переменные перевода. Другие TC могут сталкиваться с той же проблемой… Исправление заключается в обновлении/изменении названий button_text и add_images_prompt в указанных ниже местах. Я также обновлю галерею изображений Masonry.

translations.button_text = settings.button_text;
translations.composer.add_images_prompt =
settings.add_images_prompt;

api.onToolbarCreate(function(toolbar){
toolbar.addButton({
trimLeading: true,
id: “image-comparison-slider”,
group: “insertions”,
icon: settings.button_icon,
title: “button_text”,
perform: e => e.applySurround(
[“<div data-image-comparison-slider data-direction-”,settings.default_direction,“>\n\n”].join(‘’),
“\n\n”,
“add_images_prompt”,
{ multiline: false }
)
});