Preview refactor #1346
Merged
Preview refactor #1346
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Fixes two code quality issues \o/
|
|
Dang, we should switch to headless chrome. The tests fail because phantomjs does not support modern javascript 😩 |
|
Builds will be fixed once we merge #1347 |
tvdeyen
force-pushed
the
preview-refactor
branch
2 times, most recently
from
8d5b67c
to
36121ae
Compare
tvdeyen
force-pushed
the
preview-refactor
branch
2 times, most recently
from
264780b
to
1df9a19
Compare
We used to rely on jQuery being present in the preview window. If it's not present we loaded jQuery via our custon jQuery loader. This removes support for IE (even 11), but we never officially supported IE anyways and Edge should work as any other modern browser. We can now remove the custom jQuery loader and lower the page load we inject into the preview window dom.
As we do not use jQuery in the preview window js anymore, we can now remove the custom jQuery loader.
Outline is widley supported nowadays and we don't need vendor specific prefixes anymore. This let us remove the browser sniffing module from the JS we inject into the preview frame.
A little less intrusive
In order to be able to provide better UI we focus the element editor (aka. highlighting it) on click anywhere on the element, not only on the header like we did before.
Blurs (deselects) the element editor and the element preview if user clicks on somewhere else as the element body.
If we stop event propagation then the event does not bubble up the dom and will never reach other event handlers, like the blur elements event on the body. Still prevents default browser click event handler.
The reload preview button always caused the whole page to be reloaded because the event was never told to stop default event.
tvdeyen
force-pushed
the
preview-refactor
branch
from
1df9a19
to
59aa1db
Compare
mamhoff
approved these changes
Jan 18, 2018
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Refactors the preview window JS code and adds a nice little UX feature.
The preview window JS code we inject into the page we are previewing was using jQuery for DOM querying and manipulating. For that to work on pages not using jQuery (very common these days) we have our oen custom jQuery loader that loads jQuery on demand. Javascript of modern browsers widely supports ES5 features that makes jQuery nearly obsolote. This change drops support for IE (even 11), but we never supported IE anyways and the market share is very low. Edge, IEs succesor supports all of the used features. Firefox and Chrome as well. Long story short: We can remove lots of custom code and the jQuery dependency from the code we inject into the DOM of a page we do not own.
Includes a feature that blurs the elements (aka. removes the frame of selected elements) in preview and element editors if user clicks somewhere else than the element editor body. Before the "selected element frame" could never be removed after the user clicks the element in the preview or on the element editors head. Also the element itself now gets highlighted if the user clicks anywhere on the element body, not only on click of the element head. Nice little UI enhancement that will help users better understand which element she currently is working with.