Allow files to be collapsable

[adamjimenez]

Allow files to be collapsible.

Ideally this could be just CSS to avoid Javascript usage.
We could then allow an option to choose if the files start open or collapsed.

---

If enabled then the diffs will start as collapsed when there is more than one file.
You would then be able to click the header to toggle the collapse state of the different files.

[rtfpessoa]

I am up for any contributions regarding this.
Seems like an interesting idea 👍
Feel free to throw some ideas here and maybe be a bit more specific about the details.

[adamjimenez]

I'm thinking something along the lines of the github client e.g:

[rtfpessoa]

@adamjimenez it looks good.

Maybe we could have an HTML version without the file summary and where all the files are collapsed.

[adamjimenez]

Yes, that would be good. And if there is only one file then default it to expanded.

[samiraguiar]

For starters, it could be possible to collapse the body of the diffs by clicking on its headers. This should be easy and can be achieved with jQuery. I currently do this with the following code:

function makePanesCollapsible() {
    const fileWrappers = $('.d2h-file-wrapper');

    $.each(fileWrappers, (idx, element) => {
        const header = $(element).children('.d2h-file-header');
        const body = $(element).children('.d2h-files-diff');

        header.click(() => {
            body.slideToggle();
        })
    });
}

If this seems reasonable I can work on it.

[rtfpessoa]

@samiraguiar actually it should not be hard. It is even possible with CSS.

I guess the hardest part is making it look good and usable.

If you have some time, maybe doing something like GitHub has would be easy.

I am always open for new PRs 😄

[alamothe]

If we do this, then files that are linguist-generated could be auto-collapsed, like in Github.

[rtfpessoa]

@alamothe can you extend a bit on what you mean? Sorry, I am not familiar with linguist-generated.

[alamothe]

This article explains it https://help.github.com/en/github/administering-a-repository/customizing-how-changed-files-appear-on-github

Basically, if you have .gitattributes file in the repo root, it can list the files which are autogenerated. Then those will be automatically collapsed in GitHub when doing code review.

[rtfpessoa]

@alamothe I think I see what you meant.
This would not be directly possible since diff2html just gets the text of the diff.

It could probably be done in https://github.com/rtfpessoa/diff2html-cli since it can have access to the filesystem, but for diff2html it would have to be manually passed.