melloware
commented
5 years ago - When the CodeMirror and CKEditor have got a fixed height and their content exceeds that height, scroll bars appear that let you scroll the content.
- When updating a CodeMirror or CKEditor component via an AJAX update, the DOMElement is replaced and the editor is rendered again. This resets the scrolling position to the top. When editing longer documents or longer code, having to scroll to the position you were working on every time you save your progress can get tedious.
- This commit fixes this by storing the current scroll position before the DOMElement is replaced and restores it after the editor was reinitialized.
- This is done via the PrimeFaces.widget.BaseWidget.prototype.refresh method. That method is called after an AJAX request finishes and before the DOMElement is replaced. Here we query for the current scroll position and save it in the widget state. Then, at the end of the render method, we check if a stored scroll position exists, and if so, restore it.
- PF 7.0 added a bit more logic to the refresh and destroy methods that now call the listeners that can be registered via "addRefreshListener" and "addDestroyListener". For the CodeMirror widget, I used the "addRefreshListener" method. The CKEditor widget, on the other hand, already overrides the "destroy" method (and doesn't use "addDestroyListener"). Perhaps this could be update at a later time, but for now, to keep consistency and not chaning too much, I just override the "refresh" method as well.
- To test this for CodeMirror, go to the showcase for CodeMirror, use case "Code Completion". Enter some longer code into the editor, scroll down and click on "Change mode with AJAX". The scroll position should now stay the same.
- To test this for CKEditor, go to the showcase for CKEditor, use case "Basic Usage". Enter some longer paragraphs into the editor, scroll down and click on "Change color with AJAX". The scroll position should now stay the same.