* @return array Widget scripts dependencies.
*/
public function get_script_depends() {
- return [];
+
+ wp_register_script(
+ 'cube-profile-grid',
+ \App\asset_path('scripts/profile-grid.js'),
+ ['jquery'], // Dependencies
+ null, // Version
+ true // In footer?
+ );
+
+ return ['cube-profile-grid'];
}
/**
* Register the widget controls.
'title_field' => '{{{ title }}}',
]
);
+
+ $this->add_control(
+ 'truncate_text',
+ [
+ 'label' => __( 'Truncate long text?', 'cube' ),
+ 'type' => Controls_Manager::SWITCHER,
+ 'default' => '',
+ 'return_value' => 'truncate-text',
+ 'prefix_class' => '',
+ 'render_type' => 'template', // Make editor re-render when this changes
+ ]
+ );
+
+ $this->add_control(
+ 'truncate_lines',
+ [
+ 'label' => __( 'Max lines of text', 'cube' ),
+ 'type' => Controls_Manager::NUMBER,
+ 'default' => '5',
+ 'condition' => [
+ 'truncate_text!' => ''
+ ],
+ 'separator' => 'none',
+ ]
+ );
+
$this->end_controls_section();
}
/**
protected function render() {
$items = $this->get_settings('items');
+ $truncate_lines = $this->get_settings('truncate_lines');
- $html = \App\template('widgets/profile-grid', compact('items'));
+ $html = \App\template('widgets/profile-grid', compact('items', 'truncate_lines'));
echo '<div class="profile-grid">'. $html .'</div>';
}
<h4 class="profile-grid-subtitle">{{{ item.subtitle }}}</h4>
<# } #>
- <div class="profile-grid-body">
+ <div class="profile-grid-body"
+ data-truncate-lines="{{ settings.truncate_lines }}"
+ data-read-more="<?php _ex('Read more', 'Profile grid read more link text', 'cube') ?>"
+ data-read-less="<?php _ex('Read less', 'Profile grid read less link text', 'cube') ?>"
+ >
{{{ item.body }}}
</div>
--- /dev/null
+import trunk8 from 'trunk8'; // eslint-disable-line
+import debounce from 'lodash.debounce';
+
+(function($) {
+
+ // ELEMENTOR Trigger
+ $(window).on( 'elementor/frontend/init', function() {
+ // eslint-disable-next-line
+ elementorFrontend.hooks.addAction('frontend/element_ready/cube-profile-grid.default', function ($scope) {
+
+ // Only run on blocks that have this setting activated
+ if (!$scope.hasClass('truncate-text')) {
+ return;
+ }
+
+ var text_selector = '.profile-grid-body',
+ $text = $scope.find(text_selector),
+ num_lines = $text.data('truncate-lines') || 5,
+ read_more = $text.data('read-more'),
+ read_less = $text.data('read-less'),
+ svg_arrow = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 74.247 119.388">
+ <path d="M11.506,119.388c-3.253,0-6.485-1.372-8.76-4.043c-4.119-4.835-3.538-12.093,1.297-16.211l46.299-39.44
+ L4.043,20.254C-0.792,16.136-1.373,8.878,2.746,4.043c4.119-4.835,11.377-5.416,16.212-1.297l47.791,40.71
+ c4.765,4.058,7.499,9.977,7.499,16.237c0,6.262-2.734,12.181-7.5,16.239l-47.79,40.709
+ C16.793,118.486,14.142,119.388,11.506,119.388z M51.834,60.965h0.01H51.834z"/>
+ </svg>`;
+
+ setTimeout(function() {
+ $text.trunk8({
+ lines: num_lines,
+ fill: `... <a class="profile-grid-read-more arrow-link" href="#">${svg_arrow} ${read_more}</a>`,
+ });
+ }, 100); // Small timeout needed or Trunk8 doesn't always fire on frontend
+
+
+ $(document).on('click', '.profile-grid-read-more', function (event) {
+ $(this).parents(text_selector).trunk8('revert').append(`<a class="profile-grid-read-less arrow-link" href="#">${svg_arrow} ${read_less}</a>`);
+ event.preventDefault();
+ });
+
+ $(document).on('click', '.profile-grid-read-less', function (event) {
+ $(this).parent().trunk8();
+ event.preventDefault();
+ });
+
+
+ });
+ });
+
+ $(document).ready(function() {
+ setTimeout(truncateText, 500); // Just in case it doesn't fire the first time for some reason...
+ });
+
+ // Handle re-trimming text when window resizes
+ $(window).on('resize', debounce(truncateText, 250));
+
+
+})(jQuery);
+
+function truncateText() {
+ $('.truncate-text .profile-grid-body').trunk8();
+}
projects / physioassist-wordpress.git / commitdiff