Scroll to the top of the body on generator selection.

[Mark Funk]

In a long list of generators, the body is typically scrolled down pretty far on selection of a generator. After the page transition, the scroll position is kept and so the users are met with a blank screen. I whipped up a little solution that works, but maybe a larger discussion should be had about smoothly making the transition. I think that React Router could be used for this app to great effect and would allow it to make transitions in a smart way.

Update

https://github.com/yeoman/yeoman-app/blob/master/src/renderer/app.jsx#L66

to

_onItemSelected: function (generator, questions) {
    this.setState({
      actualFormType: 'cwd',
      questions: questions,
      selectedGenerator: generator
    }, function () {
      /**
       * Scroll to the top of the body
       * Otherwise sometimes with a lot of generators users
       * will see a blank screen.
       */
      document.body.scrollTop = 0;
    });
  },

[Stefan Buck]

First at all, thanks for reporting the issue.

Your solution is kind of hackish, for me (and I think for you too) 😉 I would prefer a CSS solutions like overflow: scroll for <div id="generators-grid">.

@ruyadorno any other idea?

[Mark Funk]

Scrolling here with overflow:scroll would be fine, but there's something in addition worth trying. Even though we don't have URLs here, this is a great case for a Router. The grid would be its own route and then another route for running a generator. As a configuration option, you can maintain scroll position on a specific route and reset on new routes. Also one missing thing of note is a back button once you selected a generator. With routes this is another trivial operation to maintain.

E.g.
/ would be the main page
/generators/:id would be the route for the currently run generator.

[Mark Funk]

Another thing that would be really nice that routes would enable is deep linking to a generator. Imagine clicking on a link on yeoman's search page to immediately launch an install of the generator in the yeoman app, or if it is installed, go directly to running the generator.

[Stefan Buck]

I like your deep linking idea. I see, a router would open us many doors.

[Ruy Adorno]

@mfunkie some nice ideas here 👍 maybe it's a good idea to open a new issue to track the router implementation.

Now, about the original issue, the scrolling to top is indeed a known problem and we need a fix. I agree that the proposed fix is not beautiful but if it fixes the problem and I would merge it. Do you want to open a PR for that? 😊

PS: It would be better to use single line comments as this is the standard within the codebase now

[Mark Funk]

Yeah, I can whip up a PR.

Is there a style guide somewhere that you typically lean on? We use the https://github.com/airbnb/javascript style guide where I work and it has worked pretty well for us.

[Ruy Adorno]

oh, the style guide for now is to look up in the existing code for standards/patterns being used and stick to that, heheheh

it's one of the many areas where we can improve, I would love to see a coding style validation tool such as jscs or esformatter within our build scripts

[Simon Boudrias]

The Yeoman styleguide is here: http://yeoman.io/contributing/style-guide.html - it's very light, but we mostly base ourself on the google styleguide. Any help improving our current one is welcomed.

Also, we have a set of JSCS rules on yeoman/generator you can copy over here if you want automatic validation. And we're working on handling all of this using generator-node new ESLint feature.

[Ruy Adorno]

👍 thanks @SBoudrias I'll try to work on bringing the JSCS validation