Added support for adding overlays to a container (other than the body).

GetmeUK · Aug 12, 2018 · f1990fd · f1990fd
1 parent 20d7aaf
commit f1990fd
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 23 deletions.
diff --git a/module/ui/image-editor.js b/module/ui/image-editor.js
@@ -18,9 +18,10 @@ export class ImageEditor extends Overlay {
         imageURL,
         cropAspectRatio=1.0,
         fixCropAspectRatio=false,
-        maxPreviewSize=[600, 600]
+        maxPreviewSize=[600, 600],
+        container=null
     ) {
-        super()
+        super(container)
 
         // The URL of the image being edited (typically a working draft
         // version of the image to keep load times optimal).

diff --git a/module/ui/metadata.js b/module/ui/metadata.js
@@ -134,8 +134,8 @@ MetaProp.css = {
  */
 export class Metadata extends Overlay {
 
-    constructor(props) {
-        super()
+    constructor(props, container=null) {
+        super(container)
 
         // A list meta properties to present, the format of the list should be
         // as follows:

diff --git a/module/ui/overlay.js b/module/ui/overlay.js
@@ -9,7 +9,7 @@ import * as $ from 'manhattan-essentials'
 
 export class Overlay {
 
-    constructor() {
+    constructor(container=null) {
 
         // Flag indicating if the overlay is transitioning between hidden and
         // visible state.
@@ -22,6 +22,7 @@ export class Overlay {
         this._dom = {
             'buttons': null,
             'close': null,
+            'container': container || document.body,
             'content': null,
             'overlay': null
         }
@@ -130,7 +131,7 @@ export class Overlay {
 
         // Remove the overlay
         if (this.overlay) {
-            document.body.removeChild(this.overlay)
+            this._dom.container.removeChild(this.overlay)
         }
 
         // Clear DOM references
@@ -180,7 +181,7 @@ export class Overlay {
         this.overlay.appendChild(this._dom.buttons)
 
         // Add the overlay to the page
-        document.body.appendChild(this.overlay)
+        this._dom.container.appendChild(this.overlay)
 
         // Prevent the page from scrolling whilst the overlay is open
         document.body.style.overflow = 'hidden'

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "manhattan-assets",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.8",
   "description": "File and image uploads for forms.",
   "engines": {
     "node": ">=8.9.4"

diff --git a/scss/ui/_acceptor.scss b/scss/ui/_acceptor.scss
@@ -49,24 +49,25 @@
         z-index: 1;
     }
 
+    &--file-inbound {
+        .mh-acceptor__drop-zone {
+            opacity: 1;
+            z-index: 2;
+        }
+    }
+
     &--disabled {
         opacity: 0.5;
 
         .mh-acceptor {
             &__input {
                 cursor: not-allowed;
                 pointer-events: none;
+                z-index: 1;
             }
         }
     }
 
-    &--file-inbound:not(&--disabled) {
-        .mh-acceptor__drop-zone {
-            opacity: 1;
-            z-index: 2;
-        }
-    }
-
     .mh-file-field--file & {
         &__drop-zone,
         &__faceplate {

diff --git a/scss/ui/_crop_tool.scss b/scss/ui/_crop_tool.scss
@@ -57,25 +57,25 @@
     }
 
     &__control {
+        background: #f8f8f8;
+        border-radius: 8px;
+        box-shadow:
+            inset 0 1px 0 0 #fff,
+            0 1px 1px rgba(0,0,0,.15);
         position: absolute;
         z-index: 2;
 
         &--c {
+            background: transparent;
+            border-radius: 0;
+            box-shadow: none;
             bottom: 8px;
             cursor: move;
             left: 8px;
             right: 8px;
             top: 8px;
         }
 
-        &:not(&--c) {
-            background: #f8f8f8;
-            border-radius: 8px;
-            box-shadow:
-                inset 0 1px 0 0 #fff,
-                0 1px 1px rgba(0,0,0,.15);
-        }
-
         &--n,
         &--s {
             cursor: ns-resize;