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

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

 

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

 

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

 

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

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

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

 

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

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

 

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

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

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

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