Add ability to expand/collapse modules #3628

gikaragia · 2020-09-18T13:27:29Z

Changes proposed in this Pull Request

Adds a chevron in the module title which expandes/collapses the module details.

Testing instructions

Open up the editor end add a module.
Test that collapsing expanding works.
Open a course with modules in the frontend.
Repeat the tests.

includes/blocks/class-sensei-course-outline-block.php

assets/js/frontend/single-course.js

renatho · 2020-09-18T14:31:21Z

@jom suggested at some point that we could use the summary/details, so we could use the same approach to the editor and frontend. Just to confirm, Did we try to explore this option?

gikaragia · 2020-09-18T14:51:20Z

@jom suggested at some point that we could use the summary/details, so we could use the same approach to the editor and frontend. Just to confirm, Did we try to explore this option?

Not sure if we can have CSS based animations with the details element. It seems that elements of varying height are hard to animate with CSS. I'll have a look on Monday.

renatho · 2020-09-18T23:43:11Z

@jom suggested at some point that we could use the summary/details, so we could use the same approach to the editor and frontend. Just to confirm, Did we try to explore this option?

Not sure if we can have CSS based animations with the details element. It seems that elements of varying height are hard to animate with CSS. I'll have a look on Monday.

Yeah, if we want to animate the height, it can be hard without JS. I saw that you used max-height: 1000px;, but I think it can be a little risky. If we want animate, we could find some alternative animation, like using translate + scale + opacity, or something like that.

gikaragia · 2020-09-21T09:07:15Z

Yeah, if we want to animate the height, it can be hard without JS. I saw that you used max-height: 1000px;, but I think it can be a little risky. If we want animate, we could find some alternative animation, like using translate + scale + opacity, or something like that.

Hey @renatho I think that we should avoid JS based animations as CSS ones are easily overriden by the user. For this I followed this guide. As explained there the issue with transforms is that no reflow is triggered so the rest of the elements won't move accordingly. We could possibly trigger a reflow but this could cause performance issues.

I increased the default max height to 2000px, it seems that it doesn't affect the animation too much. This would allow for 26 lessons to be added to a single module without max-height being an issue. I imagine that if this becomes an issue for the user, they could always tweak the animation again or remove it entirely.

yscik · 2020-09-21T23:50:30Z

Generally it should be fine to have Javascript drive the animation, performance-wise. In this case, it's probably overkill — maybe we can consider it later if we have heavier animations/interactions on the frontend and decide to include some library for it.

We could add the initial max-height (or the class containing it) from JS though, so if it's disabled, the CSS isn't there either — approaching it as progressive enhancement. But that can be in a PR when we add the option to disable it :)

gikaragia · 2020-09-23T08:19:58Z

Module Block - Add the ability to collapse and expand modules

jom · 2020-09-23T10:47:08Z

assets/blocks/course-outline/frontend.js

+			.children( '.wp-block-sensei-lms-collapsible' );
+
+		moduleDetails.toggleClass( 'collapsed' );
+		jQuery( this ).toggleClass( 'dashicons-arrow-up-alt2' );


We need to add dashicons as a dependency for the frontend stylesheet. It isn't loaded by default for most themes. For example, logged out (admin bar and query monitor both require this), this does not display on Storefront.

We should probably use an svg icon compiled in at some point, but that's worth its own PR

Good catch! 5e8e3b8

We should probably use an svg icon compiled in at some point, but that's worth its own PR

Considered using CSS content attribute but found it a bit hacky.

jom · 2020-09-23T10:48:50Z

includes/blocks/class-sensei-course-outline-block.php

@@ -184,7 +185,7 @@ public function render_course_outline_block( $attributes ) {
 			$block_class .= ' ' . $attributes['className'];
 		}

-		return '
+		return '	


This whitespace will get stripped in my editor due to our .editorconfig. Was it added for a reason?

Nope 😄 Not sure why PHPStorm doesn't respect it, I have the plugin installed. Probably has to do with my project structure 🤷 0e2d7f8

yscik

Ready for this, all looks good! ✈️

yscik · 2020-09-23T14:16:21Z

Found a problem with Wordpress 5.3, the frontend JS is not loaded. Maybe the registration is too late in Sensei_Frontend? Tried moving it to an enqueue in enqueue_block_assets and that seems to work, but that won't pick up the Disable JS setting. We can tackle this in another PR, since we also need to adjust the block CSS loading to respect the Disable Sensei CSS option.

gikaragia requested a review from a team September 18, 2020 13:27

jom reviewed Sep 18, 2020

View reviewed changes

includes/blocks/class-sensei-course-outline-block.php Outdated Show resolved Hide resolved

gikaragia force-pushed the add/progress-preview-button branch from 5718536 to 4dc2b48 Compare September 18, 2020 14:13

jom reviewed Sep 18, 2020

View reviewed changes

assets/js/frontend/single-course.js Outdated Show resolved Hide resolved

gikaragia force-pushed the add/progress-preview-button branch from 4dc2b48 to d5b0ec6 Compare September 21, 2020 07:20

gikaragia force-pushed the add/collapsible-module branch from f3e93e8 to 7e12159 Compare September 21, 2020 08:16

gikaragia requested a review from jom September 21, 2020 08:17

gikaragia force-pushed the add/collapsible-module branch from e9bf715 to 6fa34ea Compare September 21, 2020 08:59

jom changed the base branch from add/progress-preview-button to master September 21, 2020 14:37

gikaragia force-pushed the add/collapsible-module branch from 6fa34ea to a6ba4e8 Compare September 21, 2020 15:56

gikaragia added 3 commits September 22, 2020 13:50

Add expand/collapse button in modules

e9ea2fd

Use register_block_type to enqueue script and rename it

d979779

Increase max height to 2000

69c68d8

gikaragia force-pushed the add/collapsible-module branch from a6ba4e8 to 69c68d8 Compare September 22, 2020 10:50

gikaragia requested a review from a team September 23, 2020 10:17

jom reviewed Sep 23, 2020

View reviewed changes

gikaragia added 2 commits September 23, 2020 14:38

Remove whitespace

0e2d7f8

Add dashicons dependency

5e8e3b8

yscik approved these changes Sep 23, 2020

View reviewed changes

gikaragia merged commit 92a14fe into master Sep 23, 2020

gikaragia deleted the add/collapsible-module branch September 23, 2020 14:21

gikaragia mentioned this pull request Sep 23, 2020

Add setting to course outline block that disables module animation #3641

Merged

donnapep added this to the 3.6.0 milestone Sep 28, 2020

donnapep changed the title ~~Add expand/collapse button in modules~~ Add ability to expand/collapse modules Sep 28, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add ability to expand/collapse modules #3628

Add ability to expand/collapse modules #3628

gikaragia commented Sep 18, 2020

renatho commented Sep 18, 2020

gikaragia commented Sep 18, 2020

renatho commented Sep 18, 2020 •

edited

gikaragia commented Sep 21, 2020

yscik commented Sep 21, 2020

gikaragia commented Sep 23, 2020

jom Sep 23, 2020

yscik Sep 23, 2020

gikaragia Sep 23, 2020

jom Sep 23, 2020

gikaragia Sep 23, 2020 •

edited

yscik left a comment

yscik commented Sep 23, 2020

Add ability to expand/collapse modules #3628

Add ability to expand/collapse modules #3628

Conversation

gikaragia commented Sep 18, 2020

Changes proposed in this Pull Request

Testing instructions

renatho commented Sep 18, 2020

gikaragia commented Sep 18, 2020

renatho commented Sep 18, 2020 • edited

gikaragia commented Sep 21, 2020

yscik commented Sep 21, 2020

gikaragia commented Sep 23, 2020

jom Sep 23, 2020

Choose a reason for hiding this comment

yscik Sep 23, 2020

Choose a reason for hiding this comment

gikaragia Sep 23, 2020

Choose a reason for hiding this comment

jom Sep 23, 2020

Choose a reason for hiding this comment

gikaragia Sep 23, 2020 • edited

Choose a reason for hiding this comment

yscik left a comment

Choose a reason for hiding this comment

yscik commented Sep 23, 2020

renatho commented Sep 18, 2020 •

edited

gikaragia Sep 23, 2020 •

edited