From 52e9c1e60a274dd2c2d82adff7a7fe6d46b395ab Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Thu, 28 Jun 2018 17:27:29 +0000 Subject: [PATCH] Bug fixes + Done #2098 @5.5 --- .../src/Elementor/Widgets/ProfileGrid.php | 46 +++++++++++++- wp-content/themes/physioassist/package.json | 1 + .../physioassist/resources/assets/config.json | 3 + .../resources/assets/scripts/profile-grid.js | 62 +++++++++++++++++++ .../assets/styles/layouts/header.styl | 6 ++ .../assets/styles/widgets/profile-grid.styl | 7 ++- .../views/widgets/profile-grid.blade.php | 6 +- wp-content/themes/physioassist/yarn.lock | 4 ++ 8 files changed, 130 insertions(+), 5 deletions(-) create mode 100644 wp-content/themes/physioassist/resources/assets/scripts/profile-grid.js diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ProfileGrid.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ProfileGrid.php index fa8fdc16..66669a78 100644 --- a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ProfileGrid.php +++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ProfileGrid.php @@ -40,7 +40,16 @@ class ProfileGrid extends Widget_Base { * @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. @@ -111,6 +120,32 @@ class ProfileGrid extends Widget_Base { '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(); } /** @@ -123,8 +158,9 @@ class ProfileGrid extends Widget_Base { 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 '
'. $html .'
'; } @@ -157,7 +193,11 @@ class ProfileGrid extends Widget_Base {

{{{ item.subtitle }}}

<# } #> -
+
{{{ item.body }}}
diff --git a/wp-content/themes/physioassist/package.json b/wp-content/themes/physioassist/package.json index 90edbf4a..160ecbe3 100644 --- a/wp-content/themes/physioassist/package.json +++ b/wp-content/themes/physioassist/package.json @@ -100,6 +100,7 @@ "stylelint-webpack-plugin": "^0.10.1", "stylus": "^0.54.5", "stylus-loader": "^3.0.1", + "trunk8": "^0.0.1", "url-loader": "^0.6.2", "webpack": "~3.10.0", "webpack-assets-manifest": "^1.0.0", diff --git a/wp-content/themes/physioassist/resources/assets/config.json b/wp-content/themes/physioassist/resources/assets/config.json index 83a0f07c..9fe0d879 100644 --- a/wp-content/themes/physioassist/resources/assets/config.json +++ b/wp-content/themes/physioassist/resources/assets/config.json @@ -7,6 +7,9 @@ "hero-block": [ "./scripts/hero-block.js" ], + "profile-grid": [ + "./scripts/profile-grid.js" + ], "text-block": [ "./scripts/text-block.js" ], diff --git a/wp-content/themes/physioassist/resources/assets/scripts/profile-grid.js b/wp-content/themes/physioassist/resources/assets/scripts/profile-grid.js new file mode 100644 index 00000000..ba58d7ce --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/scripts/profile-grid.js @@ -0,0 +1,62 @@ +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 = ` + + `; + + setTimeout(function() { + $text.trunk8({ + lines: num_lines, + fill: `... ${svg_arrow} ${read_more}`, + }); + }, 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(`${svg_arrow} ${read_less}`); + 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(); +} diff --git a/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl b/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl index b553f957..f65214f5 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl @@ -28,6 +28,12 @@ header.site .elementor-editor-active & pointer-events: none + // When in Elementor editor and we scroll down, there will be + // a gap at the top that is left by the editor controls. This + // isn't needed once we scroll down so reset position to top: 0 + .elementor-editor-active.transparent-header-disabled & + top: 0 + // Main logo // Logo is split into symbol + text so we can hide the symbol when reducing the header height .logo diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/profile-grid.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/profile-grid.styl index 605e6f33..64fd8b66 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/widgets/profile-grid.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/profile-grid.styl @@ -27,6 +27,7 @@ &-text constrain(padding-left, 3.5vw) // Gutter between image and text + flex: 1 // Needed so Firefox behaves (sets flex-basis: 0%) +below(400px) padding-left: 0 @@ -52,6 +53,10 @@ color: $colors.text font-size: 16px - &-cta + &-cta, &-read-more, &-read-less display: block margin-top: 1.4em + + &-read-less + svg + transform: rotate(180deg) diff --git a/wp-content/themes/physioassist/resources/views/widgets/profile-grid.blade.php b/wp-content/themes/physioassist/resources/views/widgets/profile-grid.blade.php index b1279cba..4a5a4a51 100644 --- a/wp-content/themes/physioassist/resources/views/widgets/profile-grid.blade.php +++ b/wp-content/themes/physioassist/resources/views/widgets/profile-grid.blade.php @@ -11,7 +11,11 @@

{{ $item['subtitle'] }}

@endif -
+
{!! $item['body'] !!}
diff --git a/wp-content/themes/physioassist/yarn.lock b/wp-content/themes/physioassist/yarn.lock index 3551ee1f..9f398883 100644 --- a/wp-content/themes/physioassist/yarn.lock +++ b/wp-content/themes/physioassist/yarn.lock @@ -7097,6 +7097,10 @@ trough@^1.0.0: dependencies: glob "^6.0.4" +trunk8@^0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/trunk8/-/trunk8-0.0.1.tgz#710b5614ed3b35a24ee8349769c3cc2a158e9ad5" + tty-browserify@0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6" -- 2.39.5