feat(popup): Added isFlowing and isInline properties (edcarroll#385)

svandeneertwegh · Aug 23, 2018 · 5056e03 · 5056e03
1 parent 0a4045e
commit 5056e03
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 3 deletions.
diff --git a/demo/src/app/pages/modules/popup/popup.page.ts b/demo/src/app/pages/modules/popup/popup.page.ts
@@ -91,6 +91,18 @@ export class PopupPage {
                     description: "When <code>true</code> the popup's arrow is hidden.",
                     defaultValue: "false"
                 },
+                {
+                    name: "popupFlowing",
+                    type: "boolean",
+                    description: "When <code>true</code> have no maximum width and continue to flow to fit its content.",
+                    defaultValue: "false"
+                },
+                {
+                    name: "popupInline",
+                    type: "boolean",
+                    description: "When <code>true</code> popup will be appended as a sibling of the popup trigger element.",
+                    defaultValue: "false"
+                },
                 {
                     name: "popupTransition",
                     type: "string",

diff --git a/src/modules/popup/classes/popup-config.ts b/src/modules/popup/classes/popup-config.ts
@@ -22,6 +22,8 @@ export interface IPopupConfig {
     isBasic?:boolean;
     transition?:string;
     transitionDuration?:number;
+    isFlowing?:boolean;
+    isInline?:boolean;
 }
 
 export class PopupConfig implements IPopupConfig {
@@ -34,6 +36,8 @@ export class PopupConfig implements IPopupConfig {
     public isBasic:boolean;
     public transition:string;
     public transitionDuration:number;
+    public isFlowing:boolean;
+    public isInline:boolean;
 
     constructor(defaults:IPopupConfig = {}) {
         this.placement = PositioningPlacement.TopLeft;
@@ -43,7 +47,8 @@ export class PopupConfig implements IPopupConfig {
         this.isBasic = false;
         this.transition = "scale";
         this.transitionDuration = 200;
-
+        this.isFlowing = false;
+        this.isInline = false;
         Object.assign(this, defaults);
     }
 }
diff --git a/src/modules/popup/classes/popup-controller.ts b/src/modules/popup/classes/popup-controller.ts
@@ -59,8 +59,12 @@ export abstract class SuiPopupController implements IPopup, OnDestroy {
         // Attach the generated component to the current application.
         this._componentFactory.attachToApplication(this._componentRef);
 
-        // Move the generated element to the body to avoid any positioning issues.
-        this._componentFactory.moveToDocumentBody(this._componentRef);
+        if (this.popup.config.isInline) {
+            this._componentFactory.moveToElement(this._componentRef, this._element.nativeElement.parentElement);
+        } else {
+            // Move the generated element to the body to avoid any positioning issues.
+            this._componentFactory.moveToDocumentBody(this._componentRef);
+        }
 
         // Attach a reference to the anchor element. We do it here because IE11 loves to complain.
         this.popup.anchor = this._element;

diff --git a/src/modules/popup/components/popup.ts b/src/modules/popup/components/popup.ts
@@ -115,6 +115,9 @@ export class SuiPopup implements IPopup {
         if (this.config.isBasic) {
             classes.basic = true;
         }
+        if (this.config.isFlowing) {
+            classes.flowing = true;
+        }
         return classes;
     }
 

diff --git a/src/modules/popup/directives/popup.directive.ts b/src/modules/popup/directives/popup.directive.ts
@@ -33,6 +33,16 @@ export class SuiPopupDirective<T> extends SuiPopupTemplateController<T> {
         this.popup.config.isBasic = Util.DOM.parseBooleanAttribute(basic);
     }
 
+    @Input()
+    public set popupInline(inline:boolean) {
+        this.popup.config.isInline = Util.DOM.parseBooleanAttribute(inline);
+    }
+
+    @Input()
+    public set popupFlowing(flowing:boolean) {
+        this.popup.config.isFlowing = Util.DOM.parseBooleanAttribute(flowing);
+    }
+
     @Input()
     public set popupTransition(transition:string) {
         this.popup.config.transition = transition;