Skip to content

Commit

Permalink
flip the restoreFocus option to default to true.
Browse files Browse the repository at this point in the history
  • Loading branch information
@botandrose-machine
botandrose-machine committed Feb 13, 2025
1 parent 00ac0be commit 926a303
Show file tree
Hide file tree
Showing 6 changed files with 542 additions and 231 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* Remove `beforeNodePantried` callback option. This addition in v0.4.0 was an unfortunate necessity of the old `twoPass` mode, but is no longer needed with the new algorithm. (@botandrose)

* Added:
* New `restoreFocus` option. On older browsers, moving the focused element (or one of its parents) can result in loss of focus and selection state. This option will restore this state for IDed elements, at the cost of firing extra `focus` and `selection` events. (@botandrose)
* New on-by-default `restoreFocus` option. On older browsers, moving the focused element (or one of its parents) can result in loss of focus and selection state. This option restores this state for IDed elements, at the cost of firing extra `focus` and `selection` events. (@botandrose)

* Fixed:
* Boolean attributes are now correctly set to `""` instead of `"true"`. https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML (@MichaelWest22)
Expand Down
34 changes: 17 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,29 +89,29 @@ This will replace the _inner_ content of the existing node with the new content.

Idiomorph supports the following options:

| option | meaning | example |
|---------------------|-------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------|
| `morphStyle` | The style of morphing to use, either `innerHTML` or `outerHTML` | `Idiomorph.morph(..., {morphStyle:'innerHTML'})` |
| `ignoreActive` | If set to `true`, idiomorph will skip the active element | `Idiomorph.morph(..., {ignoreActive:true})` |
| `ignoreActiveValue` | If set to `true`, idiomorph will not update the active element's value | `Idiomorph.morph(..., {ignoreActiveValue:true})` |
| `restoreFocus` | If set to `true`, idiomorph will attempt to restore any lost focus and selection state after the morph. | `Idiomorph.morph(..., {restoreFocus:true})` |
| `head` | Allows you to control how the `head` tag is merged. See the [head](#the-head-tag) section for more details | `Idiomorph.morph(..., {head:{style:merge}})` |
| `callbacks` | Allows you to insert callbacks when events occur in the morph life cycle, see the callback table below | `Idiomorph.morph(..., {callbacks:{beforeNodeAdded:function(node){...}})` |
| option (with default) | meaning | example |
|-------------------------------|------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------|
| `morphStyle: 'outerHTML'` | The style of morphing to use, either `outerHTML` or `innerHTML` | `Idiomorph.morph(..., {morphStyle:'innerHTML'})` |
| `ignoreActive: false` | If `true`, idiomorph will skip the active element | `Idiomorph.morph(..., {ignoreActive:true})` |
| `ignoreActiveValue: false` | If `true`, idiomorph will not update the active element's value | `Idiomorph.morph(..., {ignoreActiveValue:true})` |
| `restoreFocus: true` | If `true`, idiomorph will attempt to restore any lost focus and selection state after the morph. | `Idiomorph.morph(..., {restoreFocus:true})` |
| `head: {style: 'merge', ...}` | Allows you to control how the `head` tag is merged. See the [head](#the-head-tag) section for more details | `Idiomorph.morph(..., {head:{style:'merge'}})` |
| `callbacks: {...}` | Allows you to insert callbacks when events occur in the morph lifecycle. See the callback table below | `Idiomorph.morph(..., {callbacks:{beforeNodeAdded:function(node){...}})` |

#### Callbacks

Idiomorph provides the following callbacks, which can be used to intercept and, for some callbacks, modify the swapping behavior
of the algorithm.

| callback | description | return value meaning |
|--------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------|
| beforeNodeAdded(node) | Called before a new node is added to the DOM | return false to not add the node |
| afterNodeAdded(node) | Called after a new node is added to the DOM | none |
| beforeNodeMorphed(oldNode, newNode) | Called before a node is morphed in the DOM | return false to skip morphing the node |
| afterNodeMorphed(oldNode, newNode) | Called after a node is morphed in the DOM | none |
| beforeNodeRemoved(node) | Called before a node is removed from the DOM | return false to not remove the node |
| afterNodeRemoved(node) | Called after a node is removed from the DOM | none |
| beforeAttributeUpdated(attributeName, node, mutationType) | Called before an attribute on an element is updated or removed (`mutationType` is either "update" or "remove") | return false to not update or remove the attribute |
| callback | description | return value meaning |
|-----------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|----------------------------------------------------|
| beforeNodeAdded(node) | Called before a new node is added to the DOM | return false to not add the node |
| afterNodeAdded(node) | Called after a new node is added to the DOM | none |
| beforeNodeMorphed(oldNode, newNode) | Called before a node is morphed in the DOM | return false to skip morphing the node |
| afterNodeMorphed(oldNode, newNode) | Called after a node is morphed in the DOM | none |
| beforeNodeRemoved(node) | Called before a node is removed from the DOM | return false to not remove the node |
| afterNodeRemoved(node) | Called after a node is removed from the DOM | none |
| beforeAttributeUpdated(attributeName, node, mutationType) | Called before an attribute on an element is updated or removed (`mutationType` is either "update" or "remove") | return false to not update or remove the attribute |

### The `head` tag

Expand Down
2 changes: 1 addition & 1 deletion src/idiomorph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ var Idiomorph = (function () {
shouldRemove: noOp,
afterHeadMorphed: noOp,
},
restoreFocus: false,
restoreFocus: true,
};

/**
Expand Down
3 changes: 2 additions & 1 deletion test/preserve-focus.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
describe("Preserves focus where possible", function () {
describe("Preserves focus algorithmically where possible", function () {
setup();

function assertFocusPreservation(
Expand All @@ -12,6 +12,7 @@ describe("Preserves focus where possible", function () {
setFocusAndSelection(focusId, selection);
Idiomorph.morph(getWorkArea(), after, {
morphStyle: "innerHTML",
restoreFocus: false,
});
getWorkArea().innerHTML.should.equal(after);
// for when we fall short of the ideal
Expand Down
Loading

0 comments on commit 926a303

Please sign in to comment.