CODEWITHSUNDEEP
jqueryuser-interfacerefactoringgmail
Josh Smith
Josh Smith

Reputation: 15028

How can I improve this jQuery Gmail-like interface?

EDIT 3: I've gotten this working by ignoring the advice given below and listening on the window, but only when an input, text field, or textarea is not focused. I'm not sure if this is the best way to be handling this issue, though.

http://jsfiddle.net/gXPES/5/

EDIT 2: I've tried addressing the keydown issue by applying focus and blur handlers to inputs. Then I only listen for events when var focus_on_input == true. But it seems that not all is well. This is preventing some behaviors, but causing other, more bizarre behavior. For example, when I tab out of the input field, pressing J and K will jump to the top or bottom of the list. If I click elsewhere and shift focus, this issue is fixed. Any thoughts?

EDIT: Thanks to answerer help, I've limited the selectors when listening for keydown so that I can still type characters elsewhere, but I'm running into a new issue. When I press J or K the arrow nav jumps to the top or bottom of the task list. And when I press C or # it will notify me that no tasks are selected. X functions as it should and does not select a task.

Hosting this code on JSFiddle since there's no possible way to comment on it in its entirety here. I've posted all my JS, CSS, and HTML used for the interface itself.

I'm designing a Gmail-inspired UI for task management using jQuery on the front-end (and PHP on the back-end, though it's largely irrelevant to this).

I'm still relatively new to jQuery development and so I realize I'm doing a number of things wrong. Until now, I simply haven't known what exactly I'm doing wrong nor how to fix it. I was hoping some more learned souls might help me (and others, hopefully) figure out how to refactor jQuery code for a larger-sized application.

To start, here are a number of things I would like to know how to do better:

  1. Call this code only when the task interface is active.

  2. Improve the listening for the keydown event. Currently I listen for J, K, X, Shift+3, and C. I will also be listening on E for task editing, but haven't yet implemented edits. The problem with the listeners is related to my first concern, which is that they are always on. This means that pressing J while in a <textarea>, for example, will not result in the default behavior.

  3. Use less HTML in my code.

  4. Make my code generally more DRY.

Any thoughts, no matter how critical, are more than welcome. Again, I realize I am not following best practices here, but that's because I'm dumb to them. I want to learn, and hope to use this opportunity to do so.

Cheers!

Upvotes: 6

Views: 2163

Answers (4)

KenEucker
KenEucker

Reputation: 5089

I came across this project last night and I was completely inspired! I decided to work on it through the night and today and refactored the code to be a bit more modular and accept any kind of data.

The notion of a task has been removed, as well as anything that was originally attributed to a task. I did this for plans to make it work for any kind of data and allow for further displaying of data and editing of data through other means. This interface is also closer to the more up to date Gmail interface, as far as I could tell.

Noted feature changes:

  • More modular, less specific to a 'task'.
  • Hiding of buttons that are not yet in context, once you check an item the other buttons fade in.
  • Filter box will fade out items not found in the search string.
  • Changed 'Completed' to 'Archive'.
  • The js is called as a function where you pass the parent object that contains the grid (this is done so that multiple grids can exist on the same page).
  • The function also accepts a JSON array that defines the objects to be displayed with the members: id, content, date in the grid. An example is built into my demo:

http://jsfiddle.net/epic720/BfJYV/7/

http://jsfiddle.net/epic720/BfJYV/7/embedded/result/ (Fullscreen, no code)

Would love any and all feedback on this, I plan to continue my work here and make it a full featured data editing UI.

Upvotes: 0

Mottie
Mottie

Reputation: 86443

I like your idea! I made a few changes in your code to make it more streamline (updated demo):

  1. I removed all the input focus binds... then added inside the keydown function a check that ignores the key if the event occurred in a text input or textbox.
  2. Wrapped all the code inside a document ready - so you can add your code to the page head.
  3. Changed keydown from $(this) to $(document) (ref).
  4. Added cached jQuery objects to speed up the script (e.g. container = $('#task-list-container')).
  5. Made a yellowTaskMessage function to add alerts.
  6. Added yellow-task-message div to the HTML.
  7. Added display:none to .yellow-task-message in the CSS.
  8. Streamlined a few other things (e.g. unwrapped next_task as it is already a jQuery object).
  9. Ran the script through JSLint to clean up any errors (not counting the global variables)

Upvotes: 2

Surreal Dreams
Surreal Dreams

Reputation: 26380

I'll be the first to admit that I have not learned how to do this yet (and I really should), but drag and drop would be a nice option to rearrange the tasks in the list. The look is very nice by the way. I'm using IE8 and I can't seem to use the keyboard shortcuts, unfortunately - but it seems like JSFiddle won't let me shift the focus to the result pane, so that may not be your code that's not behaving for IE8.

Upvotes: 0

generalhenry
generalhenry

Reputation: 17319

.keydown doesn't need to be assigned to $(window) it takes a selector such as $(':not(textarea)')

Upvotes: 1

Related Questions