Problem/Motivation

The new issues fieldsets on the node view don't keep persistent states when opened/closed (when things like AJAX replace the entire form due to the project field losing focus).

Proposed resolution

Keep the fieldset states persistent using localStorage.
Save the focused element when the AJAX form has been replaced.

Example of changes can be seen on:
http://form-drupal.redesign.devdrupal.org/node/2130811 (dev)

Without the changes:
http://page-drupal.redesign.devdrupal.org/node/2130811 (stage)

htaccess: drupal/drupal
login: bacon/bacon

Steps to reproduce

(go to dev site example issue links, log in, log in)

  1. open files fieldset
  2. open issue summary fieldset (and edit something)
  3. open meta data fieldset (change issue from bug to task or something)
  4. click into the project field
  5. tab out
  6. wait

before fix: page reloads with the fieldsets closed. annoying.
after fix: page reloads and the fieldsets are as I left them. much better.

Remaining tasks

None

User interface changes

Open/closed fieldsets will be persistent with page refreshes and AJAX replacements.

API changes

Original report by Mark Carver

https://drupal.org/comment/8300357#comment-8300357

Comments

markhalliwell’s picture

Status: Needs work » Needs review
StatusFileSize
new2.67 KB
markhalliwell’s picture

Issue #2163197 by Mark Carver: Allow fieldsets to be persistent and save focus when AJAXing.
Committed to master and stage:
https://github.com/dreditor/drupal_org/commit/306579bb2804e70d842e8ed85b...

Example of changes can be seen on both sites:
http://form-drupal.redesign.devdrupal.org/node/2130811 (dev)
http://page-drupal.redesign.devdrupal.org/node/2130811 (stage)

drumm’s picture

Status: Needs review » Needs work

This looks like some great JS code, but I'm not sure what the goal is without digging.

The "Issue node view fields." comment should be expanded to briefly explain what is being done to them.

The issue summary could use some steps to reproduce, so we know where to look.

markhalliwell’s picture

I've rolled back staging to before the patch, so you can see a "before" and "after".

Basically, if you refresh the page or purposefully/accidentally focus or change the project field the entire form is replaced, thus collapsing the fieldset again. It also loses where the focus is (ie: if you tab from the project field, you go to the version version, but it's no longer focused when it's replaced via AJAX).

This patch fixes all that and keeps persistent fieldset collapsed states (leveraging the browser's localStorage) and persistent input focus (on AJAX replacements).

markhalliwell’s picture

I'll update the patch to be a little more descriptive.

markhalliwell’s picture

Project: Drupal.org customizations » Project issue tracking
Version: 7.x-3.x-dev » 7.x-2.x-dev
Component: Code » Issues

Moving to project_issue after discussing this with @drumm. This is generic code that can be used by all, not drupalorg specific.

markhalliwell’s picture

Status: Needs work » Needs review
StatusFileSize
new3.95 KB

Ok, here's a new patch against the project_issue module instead. Interdiff is useless.

markhalliwell’s picture

StatusFileSize
new2.29 KB
new4 KB

Changed some of the namespacing to be consistent.

markhalliwell’s picture

Example of changes can be seen on:
http://form-drupal.redesign.devdrupal.org/node/2130811 (dev)

Without the changes:
http://page-drupal.redesign.devdrupal.org/node/2130811 (stage)

htaccess: drupal/drupal
login: bacon/bacon

markhalliwell’s picture

Issue summary: View changes
yesct’s picture

Issue summary: View changes

I tried it on the before site (page)

And on the after site (form)

Much better with this fix.

Did not do a code review.
===
added steps to reproduce to issue summary

webchick’s picture

This actually sounds like a neat potential future addition to field_group module as a user-configurable setting on a per-field group basis. (NOT as a blocker for this deployment. :P~)

I mention this because while I love this feature for both issue metadata + files, it always makes me fall out of my chair when the issue summary & relations one gets expanded by default because the last issue I edited 8 hours ago happened to have one of those changes in it.

I don't think this is a huge deal though. Most people who routinely edit issue summaries probably like the fact that it stays open.

markhalliwell’s picture

Yes, I think this should be fixed upstream (while putting this in for now, until we can). Honestly though, I think this should really should just be part of core period as part of the FAPI (like https://drupal.org/sandbox/arshad/1202674 does), it's relatively small code. The reason I didn't use that sandbox was mostly for time. I would have to rewrite a lot of it to not use DB variables. Using the DB for storage seems a completely unnecessary waste and ultimately a high cost considering issues are probably the most active part of d.o. It could also be somewhat unpleasant if we had to do AJAX calls each time the state was retrieved or saved, not really my cup-o'-tea.

The thing I really liked about it though is the #persistent value, I could incorporate something similar and ad a data-collapsible="true" to the fieldset tag:

$form['block'] = array(
  '#type' => 'fieldset',
  '#title' => t('Block configuration'),
  '#weight' => 3,
  '#collapsible' => TRUE,
  '#collapsed' => FALSE,
  '#persistent' => TRUE,
  '#tree' => TRUE,
);

Then we could specifically target only the fieldsets we want (ie: metadata, files).

Another thing I ran into is that, technically, the form is same for both the view and edit aspects of the node. If one expands or collapses the fieldset say on the node view the same will be applied if they go to the node edit. I think maybe we should add a new key value: #persistent_prefix which, by default, would use the form_id. This way we could amend the form_id with _embeded for use '#persistent_prefix' => $form['#form_id'] . '_embeded' for the node view.

Thoughts?

yesct’s picture

@Mark Carver can you open that upstream issue and link it here? I'm not sure what queue it would go in.
Maybe we could put in a @todo, to remove the special code, in this code that links to that new issue.

drumm’s picture

Status: Needs review » Fixed

Committed & deploying.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.