(D) Blackline Spoiler

[Desti]

Просмотр файла

(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
• Категория
  Темы и дизайн
• Язык
  русский, английский

 

[HooLIGUN]

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

 

[WaNted]

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

[Desti]

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

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

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

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

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

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

[WaNted]

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

[Desti]

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

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

 

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

[HooLIGUN]

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

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

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

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

 

[Desti]

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

[Zero108]

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

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

[mamyka]

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

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

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

[Jerriand]

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

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

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

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

[Zero108]

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

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

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

[Desti]

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

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

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

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

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

 

[by_ix]

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

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

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

[Jerriand]

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

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

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

[Jerriand]

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

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

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

[Desti]

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 и т.д. 

[aLEX49566]

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

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

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

[Jerriand]

Только что, 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 и т.д. 

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

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

[Desti]

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

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

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

[Jerriand]

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

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

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

[by_ix]

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

как в 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;
}

 

[Desti]

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

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

 

[Jerriand]

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

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

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

 

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

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

 

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

[Desti]

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

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

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