Jump to content

ips.ui.truncate

Виджет усечения используется в тех случаях, когда нужно сделать анонс - короткий текстовый блок. Виджет может как удалить 'лишний' текст, так и скрыть текст под кнопку 'Читать далее'. Так же виджет умеет работать с блоками текста, насыщенными медиа-файлами (видео, изображения и т.д.).

Использование

Атрибут виджета data-ipsTruncate должен быть добавлен в элемент, оборачивающий контент, который необходимо усечь:

<div data-ipsTruncate>
  <p>Здесь слишком длинный текст...</p>
</div>

Параметры

1. type (Строка; необязательный; по умолчанию - 'remove')

Определяет как должен усекаться текст. remove удаляет лишний текст полностью. hide оставляет лишний текст на странице, но скрывает его под кнопку  'читать далее'.

Пример использования:

<div data-ipsTruncate data-ipsTruncate-type="hide" data-ipsTruncate-size="35">
  Лишний текст будет скрыт под кнопку
</div>

<div data-ipsTruncate data-ipsTruncate-type='remove' data-ipsTruncate-size='2 lines'>
  Лишний текст будет удалён со страницы
</div>

2. size (Смешанный; необязательный; по умолчанию - 100)

Определяет размер усечённого текста; избыточный текст удаляется или скрывается. Параметр может принимать три значения:

  • Селектор, например #someElementID
    Если указан селектор, высота элемента виджета будет установлена на размер внешней высоты первого найденного указанного селектора.

  • Строка, например 3 строки
    Текст будет усечён до указанного количества строк текста, с учётом текущего форматирования текста (Внимание: данное значение может быть только во множественном числе).

  • Число, например 100
    Простое числовое значение, соответствующее числу пикселей, на которое будет усечён текст.

Пример использования:

<div data-ipsTruncate data-ipsTruncate-size='4 lines' data-ipsTruncate-type='remove'>
  Текст, расположенный ниже 4 строки будет удалён
</div>

<div data-ipsTruncate data-ipsTruncate-type="hide" data-ipsTruncate-size="#elReportPanel">
  Лишний текст будет скрыт на высоту селектора #elReportPanel
</div>

{truncate="$topic->mapped('title')" length="60"}
<!-- Текст переменной будет в длину 60 символов -->

3. expandText (Строка; необязательный; по умолчанию - 'Read more')

Данный параметр может быть использован только с type = hide. С помощью данного параметра можно переопределить стандартную кнопку 'Читать далее'.

События, вызываемые виджетом ips.ui.truncate

Вызываемые виджетом события применяются к элементу, содержащему в себе атрибут data-ipsTruncate.

contentTruncated

Вызывается когда контент в элементе усечён.

Данные события:

  • type (Тип используемого усечения, полное удаление или скрытие)

contentExpanded

Вызывается, когда пользователь указывает свой текст кнопки виджета, когда тип - скрытие.