Allowing dialogs to be inside a container #1513

divdavem · 2015-07-28T16:03:11Z

This PR adds a new container property for the @aria:Dialog widget.
If this property is defined, the dialog is inserted as a child of the corresponding DOM element (which must have the position:relative or position: absolute style), and the dialog can only be moved or resized inside this element. If the dialog is modal, the modal mask is only above the container, and focusing elements outside the container is still possible.
This PR also contains a commit which fixes issues in the Resize/Drag utilities.

…utilities This commit fixes the following issues: - when dragging an element inside a container, the borders of the container were not properly taken into account to limit the area in which the element can be dragged - when resizing an element outside its boundaries, the size could increase at the opposite side of the mouse instead of being properly limited, because the aria.utils.Dom.fitInside method was called (which only changes the position, and keeps the size) whereas it is needed to limit the size when the boundaries are reached.

MovableDialogTestCase was part of ContainerTestSuite instead of being part of the MovableDialogTestSuite.

…utilities This commit fixes the following issues: - when dragging an element inside a container, the borders of the container were not properly taken into account to limit the area in which the element can be dragged - when resizing an element outside its boundaries, the size could increase at the opposite side of the mouse instead of being properly limited, because the aria.utils.Dom.fitInside method was called (which only changes the position, and keeps the size) whereas it is needed to limit the size when the boundaries are reached.

MovableDialogTestCase was part of ContainerTestSuite instead of being part of the MovableDialogTestSuite.

This commit adds a new `container` property for the `@aria:Dialog` widget. If this property is defined, the dialog is inserted as a child of the corresponding DOM element (which must have the `position:relative` or `position: absolute` style), and the dialog can only be moved or resized inside this element. If the dialog is modal, the modal mask is only above the container, and focusing elements outside the container is still possible. close ariatemplates#1513

benouat · 2015-07-30T08:04:36Z

@divdavem this PR is fine for me. Don't squash the commits to push to master. Leave it like that.

divdavem · 2015-07-30T08:05:53Z

@benouat Thank you for your review!

…utilities This commit fixes the following issues: - when dragging an element inside a container, the borders of the container were not properly taken into account to limit the area in which the element can be dragged - when resizing an element outside its boundaries, the size could increase at the opposite side of the mouse instead of being properly limited, because the aria.utils.Dom.fitInside method was called (which only changes the position, and keeps the size) whereas it is needed to limit the size when the boundaries are reached. (cherry picked from commit 97fce1a) Conflicts: src/aria/utils/dragdrop/Drag.js src/aria/utils/resize/Resize.js

MovableDialogTestCase was part of ContainerTestSuite instead of being part of the MovableDialogTestSuite. (cherry picked from commit 36dfd72)

This commit adds a new `container` property for the `@aria:Dialog` widget. If this property is defined, the dialog is inserted as a child of the corresponding DOM element (which must have the `position:relative` or `position: absolute` style), and the dialog can only be moved or resized inside this element. If the dialog is modal, the modal mask is only above the container, and focusing elements outside the container is still possible. close ariatemplates#1513 (cherry picked from commit ef6ceed) Conflicts: src/aria/popups/Popup.js src/aria/popups/PopupManager.js src/aria/utils/resize/Resize.js src/aria/widgets/container/Dialog.js test/aria/widgets/container/dialog/DialogTestSuite.js test/attester-nophantom.yml test/attester-packaged.yml