<?php namespace Drupal\halo_widget_altering\Element; use Drupal\Core\Render\Element\RenderElement; /** * Provides a render element to display read more text. * * Properties: * - #text: Text to be printed. * - #limit_chars: Number of characters to limit. * * Usage Example: * @code * $build['read_more'] = [ * '#type' => 'correction_value_viewer', * '#entity' => EntityInterface, * ]; * @endcode * @RenderElement("read_more") */ class ReadMore extends RenderElement { /** * {@inheritDoc} */ public function getInfo() { return [ '#pre_render' => [ [get_class($this), 'printText'], ], '#text' => NULL, '#limit_chars' => 250, ]; } /** * @return */ public static function printText(array $element) { $text = $element['#text']; $limit_characters = $element['#limit_chars']; if (empty($text)) { return []; } if (strlen($text) <= $limit_characters) { return [ 'text' => [ '#type' => 'inline_template', '#template' => '{{ value|nl2br }}', '#context' => ['value' => $text], ], ]; } $first_half_text = substr($text, 0, $limit_characters); $second_half_text = substr($text, $limit_characters); $element['text'] = [ 'text' => [ '#type' => 'inline_template', '#template' => '{{ value1|nl2br }}<span class="to-expand" style="display: none">{{ value2|nl2br }}</span><a class="expand-link">{{ read_more_text }}</a>', '#context' => [ 'value1' => $first_half_text, 'value2' => $second_half_text, 'read_more_text' => t('Read more'), ], ], ]; $element['#attached']['library'][] = 'halo_widget_altering/read_more'; return $element; } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter