Add key listening to button color change on login page
evancofer opened this issue · comments
We want the login and register buttons become green immediately when their respective username and password fields are non-empty. However, it currently only works if we mouse-over the button after their fields are non-empty. We want the buttons to listen for keyup on these fields.
Note that we are doing all DOM styling and effects (such as this) in pure javascript/jquery, NOT in Scala.js. For things such as this we are doing lightweight scripting and as such we need a lightweight scripting language such as javascript. For this, scala.js requires too much setup and is not well enough supported/documented/implemented to guarantee ease of use, and would only serve to create a layer of obfuscation. Therefore, all functions for these effects should go into server/public/javascripts/scripts.js. Note that all native (i.e. non scala.js) javascript functions must be named with js_ prepended to their name like js_foo(). This is to prevent any possibility of conflict with the separate body of scala.js code.
I see two options for this, and I much prefer the latter.
One option is to hardcode this by element id, and change the specific id's of each username/password combo, so that the listeners in their buttons could find them by id. To do this however, we would have to edit their form helpers in the view template index.scala.html. I do not think this modification to the views is necessary though, and this method is inelegant.
The other option (which is more robust and also reusable) is to use jquery and traverse up the DOM element tree from the button to find the specific username/password fields associate with a certain button, and make it so that the buttons listener listens only for those specific fields to change. This could be made more efficient by putting each username/password/button combo into a container or div with a new class like user-action-form-container, so that the button just has to find the first parent of that class, then go down to find that nodes first children of username and password (either by class or by id).
Went ahead and put each username/password/button combo into a div of class user-action-form-container. Styling/effects is still TODO.
I think we fixed this on the last commit.