Tobias Jeger pushed to branch feature/visual-editing-psp1 at cms-community /
hippo-addon-channel-manager
Commits:
4069866f by Arthur Bogaart at 2016-11-01T16:11:57+01:00
CHANNELMGR-929 Only render .hst-cmseditlink when visible
An element is considered invisible if it or one of it's ancestors has the
CSS style property visibility set to hidden, or it is not found with
jQuery's :visible selector.
The #isVisible check should only be applied to hst-cmseditlink elements (edit
document/menu buttons) and these should be actively hidden when the
iframeElement is not considered visible.
- - - - -
af35377a by Mathijs den Burger at 2016-11-03T10:42:28+01:00
CHANNELMGR-929 Improve performance of isVisible, remove fit'ed test
Pass the jQuery element to avoid querying it again. First check
is(':visible') since that is the more common use case.
- - - - -
5176cf5b by Mathijs den Burger at 2016-11-03T10:42:51+01:00
CHANNELMGR-929 Reintegrate bugfix/CHANNELMGR-929
- - - - -
d820e6ec by Tobias Jeger at 2016-11-07T16:00:06+01:00
CHANNELMGR-840 Merge branch 'master' into feature/visual-editing-psp1
- - - - -
d9cddd34 by Tobias Jeger at 2016-11-07T16:00:28+01:00
CHANNELMGR-840 Merge branch 'master' into feature/visual-editing-psp1
- - - - -
4 changed files:
- frontend-ng/src/angularjs/channel/hippoIframe/overlay/overlaySync.service.js
- frontend-ng/src/angularjs/services/dom.service.fixture.html
- frontend-ng/src/angularjs/services/dom.service.js
- frontend-ng/src/angularjs/services/dom.service.spec.js
Changes:
=====================================
frontend-ng/src/angularjs/channel/hippoIframe/overlay/overlaySync.service.js
=====================================
---
a/frontend-ng/src/angularjs/channel/hippoIframe/overlay/overlaySync.service.js
+++
b/frontend-ng/src/angularjs/channel/hippoIframe/overlay/overlaySync.service.js
@@ -187,8 +187,20 @@ class OverlaySyncService {
const overlayJQueryElement = structureElement.getOverlayElement();
const iframeJQueryElement = structureElement.getBoxElement();
- const rect = iframeJQueryElement[0].getBoundingClientRect();
+ if (iframeJQueryElement.hasClass('hst-cmseditlink')) {
+ if (this.DomService.isVisible(iframeJQueryElement)) {
+ overlayJQueryElement.show();
+ this._drawElement(overlayJQueryElement, iframeJQueryElement);
+ } else {
+ overlayJQueryElement.hide();
+ }
+ } else {
+ this._drawElement(overlayJQueryElement, iframeJQueryElement);
+ }
+ }
+ _drawElement(overlayJQueryElement, iframeJQueryElement) {
+ const rect = iframeJQueryElement[0].getBoundingClientRect();
overlayJQueryElement.css('top', `${rect.top}px`);
overlayJQueryElement.css('left', `${rect.left}px`);
overlayJQueryElement.css('height', `${rect.height}px`);
=====================================
frontend-ng/src/angularjs/services/dom.service.fixture.html
=====================================
--- a/frontend-ng/src/angularjs/services/dom.service.fixture.html
+++ b/frontend-ng/src/angularjs/services/dom.service.fixture.html
@@ -30,6 +30,36 @@
</ul>
</div>
+<div id="isHiddenOrVisible">
+ <div style="display:none" class="shouldBeHidden"></div>
+ <div style="display:none">
+ <ul>
+ <li>
+ <span class="shouldBeHidden"></span>
+ </li>
+ </ul>
+ </div>
+
+ <div style="visibility: hidden" class="shouldBeHidden"></div>
+ <div style="visibility:hidden">
+ <ul>
+ <li>
+ <span class="shouldBeHidden">Text</span>
+ </li>
+ </ul>
+ </div>
+
+ <div class="shouldBeVisible"></div>
+ <div>
+ <ul>
+ <li>
+ <span class="shouldBeVisible">Text</span>
+ </li>
+ </ul>
+ </div>
+
+</div>
+
<div id="bottomEl" style="position: absolute; top: 42px; height: 28px;
margin-bottom: 6px;"></div>
<div id="lowestElement" style="position: absolute; top: 1000px; height: 42px;
margin-bottom: 8px;"></div>
\ No newline at end of file
=====================================
frontend-ng/src/angularjs/services/dom.service.js
=====================================
--- a/frontend-ng/src/angularjs/services/dom.service.js
+++ b/frontend-ng/src/angularjs/services/dom.service.js
@@ -158,6 +158,15 @@ class DomService {
return rectBottom + marginBottom;
}
+ isVisible(jqueryElement) {
+ let isVisible = jqueryElement.is(':visible');
+ if (isVisible) {
+ const style = window.getComputedStyle(jqueryElement[0]);
+ isVisible = style.visibility !== 'hidden';
+ }
+ return isVisible;
+ }
+
getLowestElementBottom(document) {
const allElements = document.querySelectorAll('body *');
const count = allElements.length;
=====================================
frontend-ng/src/angularjs/services/dom.service.spec.js
=====================================
--- a/frontend-ng/src/angularjs/services/dom.service.spec.js
+++ b/frontend-ng/src/angularjs/services/dom.service.spec.js
@@ -178,5 +178,21 @@ describe('DomService', () => {
it('can calculate the bottom of the lowest element in a document', () => {
expect(DomService.getLowestElementBottom(document)).toBe(1050);
});
+
+ it('can check if an element is hidden on the page', () => {
+ $j('.shouldBeHidden').each((index, el) => {
+ expect(DomService.isVisible($j(el))).toBe(false);
+ });
+ });
+
+ it('can check if an element is visible on the page', () => {
+ $j('.shouldBeVisible').each((index, el) => {
+ expect(DomService.isVisible($j(el))).toBe(true);
+ });
+ });
+
+ it('can check whether the body is visible', () => {
+ expect(DomService.isVisible($j(document.body))).toBe(true);
+ });
});
View it on GitLab:
https://code.onehippo.org/cms-community/hippo-addon-channel-manager/compare/691f9458c9e1063115c9278339e6510752dcbb34...d9cddd344c9b781ec34b709f333275fde8e9db94
_______________________________________________
Hippocms-svn mailing list
Hippocms-svn@lists.onehippo.org
https://lists.onehippo.org/mailman/listinfo/hippocms-svn
