Mathijs den Burger pushed to branch feature/cmng-psp1-CHANNELMGR-571 at
cms-community / hippo-addon-channel-manager
Commits:
1f8cdf11 by Mathijs den Burger at 2016-04-11T15:41:25+02:00
CHANNELMGR-571 show dragged mirror outside iframe
The mirror used to be cut off because it was rendered inside the
channel-iframe-scroll element.
This could not be fixed by setting overflow-x property of the scroll
element to 'visible' because the 'auto' value is needed to render a
scrollbar when the contents is too wide (e.g. the site is not
responsive).
The mirror wrapper is now rendered outside the channel-iframe-scroll
element, and positioned on top of the iframe whenever dragging
starts.
- - - - -
58f0f3ba by Mathijs den Burger at 2016-04-11T15:42:03+02:00
CHANNELMGR-571 don't use 0px
- - - - -
3 changed files:
- frontend-ng/src/angularjs/channel/hippoIframe/dragDrop.service.js
- frontend-ng/src/angularjs/channel/hippoIframe/hippoIframe.html
- frontend-ng/src/styles/_iframe.scss
Changes:
=====================================
frontend-ng/src/angularjs/channel/hippoIframe/dragDrop.service.js
=====================================
--- a/frontend-ng/src/angularjs/channel/hippoIframe/dragDrop.service.js
+++ b/frontend-ng/src/angularjs/channel/hippoIframe/dragDrop.service.js
@@ -16,6 +16,7 @@
const COMPONENT_QA_CLASS = 'qa-dragula-component';
const MOUSEUP_EVENT_NAME = 'mouseup.dragDropService';
+const MIRROR_WRAPPER_SELECTOR = '.channel-dragula-mirror';
export class DragDropService {
@@ -70,7 +71,7 @@ export class DragDropService {
this.drake = this.iframe.dragula(iframeContainerElements, {
ignoreInputTextSelection: false,
- mirrorContainer: $('.channel-dragula-mirror')[0],
+ mirrorContainer: $(MIRROR_WRAPPER_SELECTOR)[0],
});
this.drake.on('drag', () => this._onStartDrag());
this.drake.on('cloned', (clone, original) =>
this._onMirrorCreated(clone, original));
@@ -137,6 +138,9 @@ export class DragDropService {
_onMirrorCreated(mirrorElement, originalElement) {
this.DomService.copyComputedStyleExcept(originalElement, mirrorElement,
['border-[a-z]*', 'box-shadow', 'height', 'margin-[a-z]*', 'overflow',
'opacity', 'pointer-events', 'position', '[a-z\\\-]*user-select', 'width']);
this.DomService.copyComputedStyleOfDescendantsExcept(originalElement,
mirrorElement, ['opacity', 'pointer-events', '[a-z\\\-]*user-select']);
+
+ const iframeOffset = this.iframeJQueryElement.offset();
+ $(MIRROR_WRAPPER_SELECTOR).offset(iframeOffset);
}
_onStopDrag(element) {
=====================================
frontend-ng/src/angularjs/channel/hippoIframe/hippoIframe.html
=====================================
--- a/frontend-ng/src/angularjs/channel/hippoIframe/hippoIframe.html
+++ b/frontend-ng/src/angularjs/channel/hippoIframe/hippoIframe.html
@@ -37,8 +37,8 @@
</div>
</div>
</div>
-
- <div class="channel-dragula-mirror cm-scale"></div>
</div>
+
+ <div class="channel-dragula-mirror cm-scale"></div>
</div>
</md-content>
=====================================
frontend-ng/src/styles/_iframe.scss
=====================================
--- a/frontend-ng/src/styles/_iframe.scss
+++ b/frontend-ng/src/styles/_iframe.scss
@@ -17,7 +17,7 @@
iframe {
border: 0;
- box-shadow: 0px 0px 20px $black-shadow;
+ box-shadow: 0 0 20px $black-shadow;
}
}
@@ -29,5 +29,5 @@
position: relative;
overflow-x: auto;
background-color: $scroll-bgcolor;
- box-shadow: 0px 0px 20px $black-shadow;
-}
\ No newline at end of file
+ box-shadow: 0 0 20px $black-shadow;
+}
View it on GitLab:
https://code.onehippo.org/cms-community/hippo-addon-channel-manager/compare/1db5999c5b27277eae343e44f8e9f30047d4e356...58f0f3bae24df4197f84fb39e61508e53822633f
_______________________________________________
Hippocms-svn mailing list
Hippocms-svn@lists.onehippo.org
https://lists.onehippo.org/mailman/listinfo/hippocms-svn
