(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, avangcom, by_ix and 1 other
4

26 июля, 20222 yr

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

Цитата

26 июля, 20222 yr

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

Цитата

Desti
1

26 июля, 20222 yr

Author

39 минут назад, HooLIGUN сказал:

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

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

3 минуты назад, WaNted сказал:

Небольшое предложение: захукать метод 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

31 минуту назад, Desti сказал:

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

11 часов назад, Desti сказал:

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

Цитата

26 июля, 20222 yr

Author

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

Цитата

26 июля, 20222 yr

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

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

Цитата

26 июля, 20222 yr

32 минуты назад, Zero108 сказал:

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

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

Цитата

26 июля, 20222 yr

Только что, Zero108 сказал:

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

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

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

Цитата

by_ix
1

26 июля, 20222 yr

3 минуты назад, Jerriand сказал:

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

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

Цитата

26 июля, 20222 yr

Author

1 минуту назад, Zero108 сказал:

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

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

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

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

Цитата

26 июля, 20222 yr

13 минут назад, mamyka сказал:

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

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

Цитата

26 июля, 20222 yr

Только что, Desti сказал:

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

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

Цитата

26 июля, 20222 yr

Только что, Jerriand сказал:

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

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

Цитата

26 июля, 20222 yr

Author

27 минут назад, Jerriand сказал:

на 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

42 минуты назад, Jerriand сказал:

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

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

Цитата

26 июля, 20222 yr

Только что, Desti сказал:
зайдите в шаблоны темы, 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

1 минуту назад, Jerriand сказал:

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

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

Цитата

Jerriand
1

26 июля, 20222 yr

Только что, Desti сказал:

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

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

Цитата

26 июля, 20222 yr

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

как в Discord:

Спойлер

2022-07-26_195636.png.1ea99c6a83eb11f062b6c3bb7c9fd085.png

.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:

Спойлер

2022-07-26_201741.png.36ec88865c018248f24c19c142f82b3f.png

.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;
}

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

Спойлер

2022-07-26_193907.png.dfcefd094fd58efe13e733e0d0f24ef6.png

.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;
}

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

Спойлер

2022-07-26_194619.png.3252459c13731bef2cecae86e1dcb05a.png

.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

Только что, Desti сказал:
core-front-profile-profileActivity - те же самые действия в строке
<div data-controller="core.front.statuses.statusFeed"

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

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

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

Цитата

26 июля, 20222 yr

Author

10 минут назад, Jerriand сказал:

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

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

Цитата

Jerriand
1

Sign In

(D) Blackline Spoiler

Featured Replies

(D) Blackline Spoiler

Join the conversation

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

Account

Navigation

Messages

Уведомления

Search