Skip to content

Commit

Permalink
minor #1049 [Site] Fix CodeExpander without expandCodeButton target (…
Browse files Browse the repository at this point in the history
…smnandre)

This PR was merged into the 2.x branch.

Discussion
----------

[Site] Fix CodeExpander without expandCodeButton target

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| License       | MIT

The CodeBlock component uses the "code-expander" Stimulus controller, which is responsible to... expand the code.

But on the [LazyImage](https://ux.symfony.com/lazy-image) page, the button usually present is replaced by an informational div.

| Common usage | LazyImage page |
| - | - |
| ![with-button](https://github.com/symfony/ux/assets/1359581/b960d8b0-5250-4ac9-b6ac-061f602b4123) | ![without-button](https://github.com/symfony/ux/assets/1359581/7d74b931-7a1b-4185-a879-be8872d0b291) |

Hence the following JS error

```console
Error connecting controller

 Error: Missing target element "expandCodeButton" for "code-expander" controller
    get stimulus.js:2153
    connect code-expander-controller-402db0232698738a8988bbaba08c533d.js:1
   [...]
    start stimulus.js:1974
    startStimulusApp loader-e1ee9ace0562f2e6a52301e4ccc8627d.js:2
    <anonymous> bootstrap-9ce723d68588a7672b3759b7a06e85c3.js:1

Object { identifier: "code-expander", controller: {…}, element: div.terminal-body }
stimulus.js:2017:20
```

I propose to make the code-expander controller work even when the button is not connected, thus allowing to decouple the "expand" action from its origin.

Commits
-------

9e7f7c1 Fix CodeExpander without expandCodeButton target
  • Loading branch information
weaverryan committed Aug 15, 2023
2 parents c9f79e6 + 9e7f7c1 commit 8dc7bb1
Showing 1 changed file with 5 additions and 3 deletions.
8 changes: 5 additions & 3 deletions ux.symfony.com/assets/controllers/code-expander-controller.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export default class extends Controller {
static targets = ['useStatements', 'expandCodeButton', 'codeContent'];

connect() {
if (this.#isOverflowing(this.codeContentTarget)) {
if (this.hasExpandCodeButtonTarget && this.#isOverflowing(this.codeContentTarget)) {
this.expandCodeButtonTarget.style.display = 'block';
// add extra padding so the button doesn't block the code
this.codeContentTarget.classList.add('pb-5');
Expand All @@ -18,8 +18,10 @@ export default class extends Controller {

expandCode(event) {
this.codeContentTarget.style.height = 'auto';
this.codeContentTarget.classList.remove('pb-5');
this.expandCodeButtonTarget.remove();
if (this.hasExpandCodeButtonTarget) {
this.expandCodeButtonTarget.remove();
this.codeContentTarget.classList.remove('pb-5');
}
}

#isOverflowing(element) {
Expand Down

0 comments on commit 8dc7bb1

Please sign in to comment.