(D) Blackline Spoiler

Posted 26 июля, 20222 yr

(D) Blackline Spoiler

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

Порядок установки (всё в АЦ):

1. В строке поиска набираем Editor -> жмем на [System] Settings -> таб Advanced и добавляем класс с именем blacklineSpoiler в первом окошке (Allowed CSS classes), нажимаем Save внизу.
2. Снова набираем Editor -> жмем [System] Editor Customization -> кнопка Add Button и загружаем файл blackline.zip. После загрузки кнопка (с черной полоской) появится внизу в неиспользуемых, перетащите ее в нужное место. Повторите на всех размерах редактора.
3. В строке поиска набираем Plugin -> жмем [System] Plugins -> жмем ссылку "manual upload" и загружаем файл Blackline spoiler 1.0.0.xml

По умолчанию цвет спойлера и текста черный. Если вам надо поменять цвета, отредактируйте CSS приложения стандартным образом. background-color: цвет спойлера, color: цвет текста, должны быть одинаковые.

В загрузке плагины для CKEditor и IPS. Работают только вместе.

Если что-то непонятно - смотрите картинки.
Актуально для версии 4.6 - 4.7, другие версии по запросу.

Добавил

Desti
Добавлено

07/26/22
Категория

Темы и дизайн
Язык

русский, английский

Цитата

WaNted, by_ix, Mano and 1 other
4

26 июля, 20222 yr

Как в телеге не получится оформить?

Цитата

26 июля, 20222 yr

Небольшое предложение: захукать метод getAllowedCssClasses в классе \IPS\Text\Parser и добавить туда blacklineSpoiler, тогда можно будет избавиться от первого пункта. 🙂

Цитата

Desti
1

26 июля, 20222 yr

Author

On 26.07.2022 at 07:24, HooLIGUN said:

Как в телеге не получится оформить?

Задача решалась по ТЗ

On 26.07.2022 at 08:00, WaNted said:

Небольшое предложение: захукать метод getAllowedCssClasses

Настройка допустимых классов в АЦ специально сделана для того, чтобы не хукать этот метод.

Цитата

26 июля, 20222 yr

Еще момент по вашему хуку шаблона. Нежелательно переопределять целый участок кода, т.к. это делает невозможным дальнейшее изменение шаблона. Предлагаю использовать вместо replace способ add attributes и добавить там plugins.blackline в data-controller.

Цитата

Desti
1

26 июля, 20222 yr

Author

Можно вообще скрыть текст и поставить фоновое изображение, что-нить типа

.blacklineSpoiler {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background-image: url(ссылка на фон) repeat-x;
}

WaNted да, можно и так, наверное.. Посмотрю вечером.

Цитата

26 июля, 20222 yr

On 26.07.2022 at 08:07, Desti said:

Задача решалась по ТЗ

On 25.07.2022 at 21:16, Desti said:

Жалобы|пожелания - в тему поддержки

Цитата

26 июля, 20222 yr

Author

HooLIGUN Меняете css на указанный выше, находите подходящий фон без швов и будет вам как в телеге.

Цитата

26 июля, 20222 yr

Как рацпредложение: можно было бы предусмотреть режим для тем оформления, которые имеюь переключатель светлая / тёмная. Например, Nexxe.

А для чего вообще нужно скрывать текст?

Цитата

26 июля, 20222 yr

On 26.07.2022 at 10:46, Zero108 said:

А для чего вообще нужно скрывать текст?

Тоже не пойму зачем? Если бы по каким то критериям,а так не понятно.🤨

Цитата

26 июля, 20222 yr

On 26.07.2022 at 10:46, Zero108 said:

А для чего вообще нужно скрывать текст?

Закрывать спойлеры сюжета в обсуждениях книг\игр\фильмов\сериалов, когда надо скрыть буквально пару слов. У меня форум на тематику видеоигр, это прямо болезненная тема. Иной раз лепят спойлеры концовки в обсуждениях технических проблем игры, а модераторы, которые вынуждены читать вообще всё, воют уже от этих сюрпризов. И тут либо наказывать пользователя каждый раз и терпеть, либо заиметь какой-то суперпростой метод сокрытия пары слов, чтобы даже совсем глупенькие пользовались.

P.S. Спойлеры-контейнеры плохо подходят для случаев, когда нужно буквально одно или два слова закрыть. Оформление у них отлично подходит для сокрытия галереи изображений. И их не особо активно используют из-за этого. А это прям идеально.

Цитата

by_ix
1

26 июля, 20222 yr

On 26.07.2022 at 11:20, Jerriand said:

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

Почему спойлеры принято считать болезненным проявлением самовыражения?

Цитата

26 июля, 20222 yr

Author

On 26.07.2022 at 11:24, Zero108 said:

Почему спойлеры принято считать болезненным проявлением самовыражения?

А выделение болдом это проявление ЧСВ?

Насчет темных тем или светлых - во первых, плагин к редактору тупой и умеет вставлять только класс. Во вторых, плагин ставит свой css во все темы, так что отредактировать его под темную не очень большая проблема.

И вообще, кто-нить попробовал поставить?

Цитата

26 июля, 20222 yr

On 26.07.2022 at 11:19, mamyka said:

Если бы по каким то критериям,а так не понятно.🤨

в данном случае, скрытие нужно не для того, чтобы у определённого круга лиц был доступ к его содержимому, а для того, чтобы это содержимое видели только те, кто сами этого хотят.

Цитата

26 июля, 20222 yr

On 26.07.2022 at 11:33, Desti said:

Насчет темных тем или светлых - во первых, плагин к редактору тупой и умеет вставлять только класс. Во вторых, плагин ставит свой css во все темы, так что отредактировать его под темную не очень большая проблема.

Я вообще в CSS выставил оранжевый цвет, он одинаково хорошо подходит для светлой и тёмной темы. Нужно просто цвет подобрать отличный от чёрного. Светло-серый тоже отлично подходит всем вариантам.

Цитата

26 июля, 20222 yr

On 26.07.2022 at 11:40, Jerriand said:

Я вообще в CSS выставил оранжевый цвет, он одинаково хорошо подходит для светлой и тёмной темы. Нужно просто цвет подобрать отличный от чёрного. Светло-серый тоже отлично подходит всем вариантам.

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

Цитата

26 июля, 20222 yr

Author

On 26.07.2022 at 11:52, Jerriand said:

на 4.3 раскрытие по клику не работает

зайдите в шаблоны темы, forums-front-topics-topic, найдите там

<div data-controller='core.front.core.commentFeed...(длинная строка)

и вставьте перед 'core.front - 'plugins.blackline, '

Должно получится

<div data-controller='plugins.blackline, core.front.core.commentFeed...

Как временное решение годится для 4.3, 4.4 и т.д.

Цитата

Jerriand and aLEX49566
2

26 июля, 20222 yr

On 26.07.2022 at 11:52, Jerriand said:

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

Так так даже привольнее), на моб версии работает?

Цитата

26 июля, 20222 yr

On 26.07.2022 at 12:28, Desti said:
зайдите в шаблоны темы, forums-front-topics-topic, найдите там
<div data-controller='core.front.core.commentFeed...(длинная строка)
и вставьте перед 'core.front - 'plugins.blackline, '

Должно получится
<div data-controller='plugins.blackline, core.front.core.commentFeed...
Как временное решение годится для 4.3, 4.4 и т.д.

Сработало! Большое спасибо.

Что любопытно, в сообщениях в темах форума работает, а в статусах нет.

Цитата

26 июля, 20222 yr

Author

On 26.07.2022 at 13:01, Jerriand said:

в сообщениях в темах форума работает, а в статусах нет.

У статусов другой шаблон.

Цитата

Jerriand
1

26 июля, 20222 yr

On 26.07.2022 at 13:03, Desti said:

У статусов другой шаблон.

А не подскажете, как его найти и куда вставить эту строчку? Что-то у меня не получается самостоятельно это сделать, я совсем в этом плане "чайник".

Цитата

26 июля, 20222 yr

сделал себе, надо мб кому-то будет.

как в Discord:

Показать контент

.blacklineSpoiler {
    background-color: rgb(30, 32, 34);
    color: rgba(0, 0, 0, 0);
    border-radius: 3px;
    cursor: pointer;
}
.blacklineSpoiler:hover {
    background-color: rgb(33, 35, 38);
    color: rgba(0, 0, 0, 0);
    border-radius: 3px;
    cursor: pointer;
}

что-то вроде Telegram:

Показать контент

.blacklineSpoiler {
    color: rgba(0, 0, 0, 0);
    border-radius: 3px;
    cursor: pointer;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAJ0lEQVQoU2P8////f0ZGRkYGPACvJEwfDRVhcyMNrcMWEgStA7kRANYNDAa7qcwWAAAAAElFTkSuQmCC) repeat;
}
.blacklineSpoiler:hover {
    color: rgba(0, 0, 0, 0);
    border-radius: 3px;
    cursor: pointer;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAJ0lEQVQoU2NcuHDh//j4eEYGPACvJEwfDRVhcyMNrcMWEgStA7kRAMnvCuxRgVhSAAAAAElFTkSuQmCC) repeat;
}

с размытым фоном:

Показать контент

.blacklineSpoiler {
    background-color: rgba(0, 0, 0, 0.69);
    color: rgb(0, 0, 0, 0);
    border-radius: 3px;
    filter: blur(3px);
    cursor: pointer;
}
.blacklineSpoiler:hover {
    background-color: rgba(0, 0, 0, 0.44);
    color: rgb(0, 0, 0, 0);
    border-radius: 3px;
    filter: blur(3px);
    cursor: pointer;
}

с размытым текстом:

Показать контент

.blacklineSpoiler {
    color: rgb(255, 255, 255);
    border-radius: 3px;
    filter: blur(3px);
    cursor: pointer;
}
.blacklineSpoiler:hover {
    color: rgb(190, 190, 190);
    border-radius: 3px;
    filter: blur(3px);
    cursor: pointer;
}

Цитата

aLEX49566 and Desti
2

26 июля, 20222 yr

Author

core-front-profile-profileActivity - те же самые действия в строке

<div data-controller="core.front.statuses.statusFeed"

Цитата

Jerriand
1

26 июля, 20222 yr

On 26.07.2022 at 14:26, Desti said:
core-front-profile-profileActivity - те же самые действия в строке
<div data-controller="core.front.statuses.statusFeed"

Вроде бы, всё правильно сделал, а не сработало.

<div data-controller="plugins.blackline, core.front.statuses.statusFeed">

А, точнее нет, работает! Но только внутри профиля, если зайти на страницу пользователя. А вот если статус выводится на главную, то там не работает.

Цитата

26 июля, 20222 yr

Author

On 26.07.2022 at 14:33, Jerriand said:

А вот если статус выводится на главную, то там не работает.

Ну так там тоже другой шаблон.. Сейчас занят, мож кто другой поможет.

Цитата

Jerriand
1

Sign In

(D) Blackline Spoiler

Featured Replies

(D) Blackline Spoiler

Join the conversation

Последние посетители 0

Account

Navigation

Search