Add Element Editor Custom Element #2614
Conversation
tvdeyen
force-pushed
the
element-editor-component
branch
2 times, most recently
from
f35e9ab
to
bf8738d
Compare
tvdeyen
force-pushed
the
element-editor-component
branch
from
3e19f84
to
6bd6dc5
Compare
tvdeyen
changed the title
tvdeyen
force-pushed
the
element-editor-component
branch
4 times, most recently
from
e86392e
to
aa7b7ff
Compare
tvdeyen
force-pushed
the
element-editor-component
branch
12 times, most recently
from
6160be7
to
10ca3cc
Compare
tvdeyen
force-pushed
the
element-editor-component
branch
2 times, most recently
from
76bb488
to
cb60676
Compare
Introduce a custom element for element editors and handle all render and event logic inside of this instance instead of delegating from the outside. That way we can now also get rid of re-rendering the element after update or collapse/expand.
Splitting toggle fold into two methods (expand and collapse) with dedicated endpoints that make it easier to separate the logic and handle the response accordingly.
This button helps to clean up the elements window with one click. Compact and fixed always elements stay expanded.
By storing the targets only once per base node we spare some unneccessary dom queries.
sessionStorage gets emptied after the user closes the browser. Using localStorage the groups state persists even after the user logs out.
Using the configuration to calculate the space tinymce will use if it is initialized upfront, so we can reserve the space for calculating the element editor height correctly so the browser is able to scroll to it when we click on the element in the preview.
tvdeyen
force-pushed
the
element-editor-component
branch
2 times, most recently
from
af2d60c
to
cf71ffb
Compare
This makes it nicer to read and fixes a bug where the button disable callback was not working after dragndrop of an element editor.
These native components let us remove all the custom event handling and state management from the element editor.
This helps to still pass the localStorage test that is failing because of a jsdom issue.
tvdeyen
force-pushed
the
element-editor-component
branch
from
4c8843e
to
83469dd
Compare
![codeclimate[bot]](https://avatars.githubusercontent.com/in/9403?s=60&v=4){kind=small}
| import { createHtmlElement } from "../utils/dom_helpers" | ||
|
|
||
| export class ElementEditor extends HTMLElement { | ||
| connectedCallback() { |
There was a problem hiding this comment.
Function connectedCallback has 54 lines of code (exceeds 25 allowed). Consider refactoring.
| @@ -0,0 +1,532 @@ | |||
| import TagsAutocomplete from "alchemy_admin/tags_autocomplete" | |||
There was a problem hiding this comment.
File element_editor.js has 316 lines of code (exceeds 250 allowed). Consider refactoring.
| import { post } from "alchemy_admin/utils/ajax" | ||
| import { createHtmlElement } from "../utils/dom_helpers" | ||
|
|
||
| export class ElementEditor extends HTMLElement { |
There was a problem hiding this comment.
ElementEditor has 36 functions (exceeds 20 allowed). Consider refactoring.
| * Collapses the element editor and persists the state on the server | ||
| * @returns {Promise} | ||
| */ | ||
| collapse() { |
There was a problem hiding this comment.
Function collapse has 29 lines of code (exceeds 25 allowed). Consider refactoring.
| * Collapses the element editor and persists the state on the server | ||
| * @* @returns {Promise} | ||
| */ | ||
| expand() { |
There was a problem hiding this comment.
Function expand has 37 lines of code (exceeds 25 allowed). Consider refactoring.
| @@ -0,0 +1,544 @@ | |||
| import TagsAutocomplete from "alchemy_admin/tags_autocomplete" | |||
There was a problem hiding this comment.
File element_editor.js has 326 lines of code (exceeds 250 allowed). Consider refactoring.
| TagsAutocomplete(this) | ||
| } | ||
|
|
||
| handleEvent(event) { |
There was a problem hiding this comment.
Function handleEvent has a Cognitive Complexity of 11 (exceeds 5 allowed). Consider refactoring.
| import { post } from "alchemy_admin/utils/ajax" | ||
| import { createHtmlElement } from "../utils/dom_helpers" | ||
|
|
||
| export class ElementEditor extends HTMLElement { |
There was a problem hiding this comment.
ElementEditor has 38 functions (exceeds 20 allowed). Consider refactoring.
| TagsAutocomplete(this) | ||
| } | ||
|
|
||
| handleEvent(event) { |
There was a problem hiding this comment.
Function handleEvent has 35 lines of code (exceeds 25 allowed). Consider refactoring.
This native callback is used by event listeners in classes and makes code cleaner and less error prone.
Now that we use handleEvent we can use the constructor to attach event listeners. This runs once on init instead of every time it renders with the connectedCallback.
tvdeyen
force-pushed
the
element-editor-component
branch
from
aba0b5e
to
8698935
Compare
| @@ -0,0 +1,543 @@ | |||
| import TagsAutocomplete from "alchemy_admin/tags_autocomplete" | |||
There was a problem hiding this comment.
File element_editor.js has 325 lines of code (exceeds 250 allowed). Consider refactoring.
|
We can split parts of the element editor in the future to reduce the size of the ElementEditor - component. It is now huge step forward. |
This has been removed during refactoring the element editor into a custom web-component in AlchemyCMS#2614 This restores the behavior.
This has been removed during refactoring the element editor into a custom web-component in AlchemyCMS#2614 This restores the behavior.
What is this pull request for?
Refactors the imperative coffeescript file into a custom element that maintains its own state and
can be simply rendered without initialization from the outside.
This made it possible to remove the re-rendering of the element editor from the server and simply
collapse and expand the element visually instead.
As a bonus this adds a collapse all elements button.
Removes the fold action from admin elements controller and adds two new actions (collapse and expand)
Checklist