Added "positioning" property to View interface.

Author: azaslonov

src/ko/bindingHandlers/bindingHandlers.helpCenter.ts

@@ -19,9 +19,10 @@ export class HelpCenterBindingHandler {
                         },
                         resizing: {
                             directions: "vertically horizontally",
-                            initialWidth: 500,
-                            initialHeight: 700
+                            initialWidth: 600,
+                            initialHeight: 700,
                         },
+                        positioning: "center",
                         scrolling: false
                     };
 

src/ko/bindingHandlers/bindingHandlers.surface.ts

@@ -2,6 +2,7 @@
 import { View } from "@paperbits/common/ui";
 import "@paperbits/common/extensions";
 import { ISettingsProvider } from "@paperbits/common/configuration";
+import { PositioningOptions } from "@paperbits/common/ui/positioningOptions";
 
 
 interface EditorSettings {
@@ -52,6 +53,58 @@ export class SurfaceBindingHandler {
                 element.style.top = editorSettings.top + "px";
             }
         }
+        else {
+            if (view.positioning) {
+                let positioning: PositioningOptions;
+
+                const defaultOffset = 20;
+                const rect = element.getBoundingClientRect();
+
+                if (typeof view.positioning === "string") {
+                    switch (view.positioning) {
+                        case "left":
+                            positioning = {
+                                left: defaultOffset,
+                                top: (document.body.clientHeight / 2) - (rect.height / 2)
+                            };
+                            break;
+                        case "right":
+                            positioning = {
+                                right: defaultOffset,
+                                top: (document.body.clientHeight / 2) - (rect.height / 2)
+                            };
+                            break;
+                        case "top":
+                            positioning = {
+                                top: defaultOffset,
+                                left: (document.body.clientWidth / 2) - (rect.width / 2)
+                            };
+                            break;
+                        case "bottom":
+                            positioning = {
+                                bottom: defaultOffset,
+                                left: (document.body.clientWidth / 2) - (rect.width / 2)
+                            };
+                            break;
+                        case "center":
+                            positioning = {
+                                left: (document.body.clientWidth / 2) - (rect.width / 2),
+                                top: (document.body.clientHeight / 2) - (rect.height / 2)
+                            };
+                    }
+                }
+                else {
+                    positioning = view.positioning as PositioningOptions;
+                }
+
+                element.style.left = (document.body.clientWidth / 2) - (rect.width / 2) + "px";
+                element.style.top = document.body.clientHeight / 2 - rect.height / 2 + "px";
+                element.style.left = positioning.left ? positioning.left + "px" : null;
+                element.style.top = positioning.top ? positioning.top + "px" : null;
+                element.style.right = positioning.right ? positioning.right + "px" : null;
+                element.style.bottom = positioning.bottom ? positioning.bottom + "px" : null;
+            }
+        }
 
         ko.applyBindingsToNode(element, {
             dragsource: {

src/ko/ui/defaultViewManager.html

@@ -33,7 +33,7 @@ <h1 class="toast-header" data-bind="text: title"></h1>
 
 <!-- ko with: activeView() -->
 <div role="dialog" aria-labelledby="popupHeading" tabindex="-1"
-    class="toolbox toolbox-popup toolbox-position-left-offset"
+    class="toolbox toolbox-popup"
     data-bind="resizable: resizing, surface: $data, dialog: {}">
     <div role="document" class="editor resizable-content flex flex-column">
         <!-- ko if: heading -->

src/ko/ui/defaultViewManager.ts

@@ -17,6 +17,7 @@ import { ViewStack } from "@paperbits/common/ui/viewStack";
 import { ISettingsProvider } from "@paperbits/common/configuration";
 
 declare let uploadDialog: HTMLInputElement;
+const defaultEditorWidth = 320;
 
 
 @Component({
@@ -375,7 +376,25 @@ export class DefaultViewManager implements ViewManager {
         }
 
         if (!view.resizing) {
-            view.resizing = "vertically horizontally";
+            view.resizing = {
+                directions: "vertically horizontally",
+                initialWidth: defaultEditorWidth
+            }
+        }
+        else {
+            if (typeof view.resizing === "string" && view.name !== "text-block-editor") {
+                view.resizing = {
+                    directions: view.resizing,
+                    initialWidth: defaultEditorWidth
+                };
+            }
+        }
+
+        if (!view.positioning) {
+            view.positioning = {
+                top: 20,
+                left: 150
+            }
         }
 
         this.clearContextualCommands();
@@ -443,7 +462,7 @@ export class DefaultViewManager implements ViewManager {
             },
             scrolling: "editorScrolling" in binding ? <boolean>binding.editorScrolling : true,
             heading: binding.displayName,
-            resizing: <string>binding.editorResizing || "vertically horizontally",
+            resizing: <string>binding.editorResizing,
             returnFocusTo: document.getElementById("contentEditor")
         };