ng2-material-dropdown - npm Package Compare versions

Comparing version 0.3.2 to 0.3.3

dist/ng2-dropdown.bundle.js

@@ -673,6 +673,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	    Ng2DropdownMenu.prototype.updatePosition = function (position) {
-	        var element = this.getMenuElement();
-	        var _a = this.calcPositionOffset(position), top = _a.top, left = _a.left;
-	        this.renderer.setElementStyle(element, 'top', top);
-	        this.renderer.setElementStyle(element, 'left', left);
+	        this.position = position;
 	    };
@@ -694,13 +691,25 @@ Ng2DropdownMenu.prototype.handleKeypress = function ($event) {
 	    Ng2DropdownMenu.prototype.calcPositionOffset = function (position) {
-	        var top = (position.top + window.scrollY - 15) + "px", left = (position.left + window.scrollX - 5) + "px";
-	        if (this.offset) {
-	            var offset = this.offset.split(' ');
-	            if (!offset[1]) {
-	                offset[1] = '0';
-	            }
-	            top = (parseInt(top.replace('px', '')) + parseInt(offset[0])) + "px";
-	            left = (parseInt(left.replace('px', '')) + parseInt(offset[1])) + "px";
+	        var _a = this.applyOffset((position.top + window.scrollY - 15) + "px", (position.left + window.scrollX - 5) + "px"), top = _a.top, left = _a.left;
+	        var element = this.getMenuElement(), clientWidth = element.clientWidth, clientHeight = element.clientHeight, marginFromBottom = parseInt(top) + clientHeight, marginFromRight = parseInt(left) + clientWidth;
+	        if (marginFromBottom >= window.innerHeight) {
+	            top = (parseInt(top.replace('px', '')) - clientHeight) + "px";
 	        }
+	        if (marginFromRight >= window.innerWidth) {
+	            var marginRight = marginFromRight - window.innerWidth + 30;
+	            left = (parseInt(left.replace('px', '')) - marginRight) + "px";
+	        }
 	        return { top: top, left: left };
 	    };
+	    Ng2DropdownMenu.prototype.applyOffset = function (top, left) {
+	        if (!this.offset) {
+	            return { top: top, left: left };
+	        }
+	        var offset = this.offset.split(' ');
+	        if (!offset[1]) {
+	            offset[1] = '0';
+	        }
+	        top = (parseInt(top.replace('px', '')) + parseInt(offset[0])) + "px";
+	        left = (parseInt(left.replace('px', '')) + parseInt(offset[1])) + "px";
+	        return { top: top, left: left };
+	    };
 	    Ng2DropdownMenu.prototype.ngOnInit = function () {
@@ -711,2 +720,10 @@ var body = document.querySelector('body');
 	    };
+	    Ng2DropdownMenu.prototype.ngAfterViewChecked = function () {
+	        if (this.state.isVisible) {
+	            var element = this.getMenuElement();
+	            var _a = this.calcPositionOffset(this.position), top_1 = _a.top, left = _a.left;
+	            this.renderer.setElementStyle(element, 'top', top_1);
+	            this.renderer.setElementStyle(element, 'left', left);
+	        }
+	    };
 	    __decorate([
@@ -713,0 +730,0 @@ core_1.Input(),

dist/src/modules/components/menu/ng2-dropdown-menu.d.ts

@@ -16,2 +16,3 @@ import { ElementRef, Renderer, QueryList } from '@angular/core';
     };
+    private position;
     constructor(dropdown: Ng2Dropdown, element: ElementRef, renderer: Renderer);
@@ -24,3 +25,5 @@ show(): void;
     private calcPositionOffset(position);
+    private applyOffset(top, left);
     ngOnInit(): void;
+    ngAfterViewChecked(): void;
 }

dist/src/modules/components/menu/ng2-dropdown-menu.js

@@ -47,6 +47,3 @@ "use strict";
     Ng2DropdownMenu.prototype.updatePosition = function (position) {
-        var element = this.getMenuElement();
-        var _a = this.calcPositionOffset(position), top = _a.top, left = _a.left;
-        this.renderer.setElementStyle(element, 'top', top);
-        this.renderer.setElementStyle(element, 'left', left);
+        this.position = position;
     };
@@ -68,13 +65,25 @@ Ng2DropdownMenu.prototype.handleKeypress = function ($event) {
     Ng2DropdownMenu.prototype.calcPositionOffset = function (position) {
-        var top = (position.top + window.scrollY - 15) + "px", left = (position.left + window.scrollX - 5) + "px";
-        if (this.offset) {
-            var offset = this.offset.split(' ');
-            if (!offset[1]) {
-                offset[1] = '0';
-            }
-            top = (parseInt(top.replace('px', '')) + parseInt(offset[0])) + "px";
-            left = (parseInt(left.replace('px', '')) + parseInt(offset[1])) + "px";
+        var _a = this.applyOffset((position.top + window.scrollY - 15) + "px", (position.left + window.scrollX - 5) + "px"), top = _a.top, left = _a.left;
+        var element = this.getMenuElement(), clientWidth = element.clientWidth, clientHeight = element.clientHeight, marginFromBottom = parseInt(top) + clientHeight, marginFromRight = parseInt(left) + clientWidth;
+        if (marginFromBottom >= window.innerHeight) {
+            top = (parseInt(top.replace('px', '')) - clientHeight) + "px";
         }
+        if (marginFromRight >= window.innerWidth) {
+            var marginRight = marginFromRight - window.innerWidth + 30;
+            left = (parseInt(left.replace('px', '')) - marginRight) + "px";
+        }
         return { top: top, left: left };
     };
+    Ng2DropdownMenu.prototype.applyOffset = function (top, left) {
+        if (!this.offset) {
+            return { top: top, left: left };
+        }
+        var offset = this.offset.split(' ');
+        if (!offset[1]) {
+            offset[1] = '0';
+        }
+        top = (parseInt(top.replace('px', '')) + parseInt(offset[0])) + "px";
+        left = (parseInt(left.replace('px', '')) + parseInt(offset[1])) + "px";
+        return { top: top, left: left };
+    };
     Ng2DropdownMenu.prototype.ngOnInit = function () {
@@ -85,2 +94,10 @@ var body = document.querySelector('body');
     };
+    Ng2DropdownMenu.prototype.ngAfterViewChecked = function () {
+        if (this.state.isVisible) {
+            var element = this.getMenuElement();
+            var _a = this.calcPositionOffset(this.position), top_1 = _a.top, left = _a.left;
+            this.renderer.setElementStyle(element, 'top', top_1);
+            this.renderer.setElementStyle(element, 'left', left);
+        }
+    };
     __decorate([
@@ -87,0 +104,0 @@ core_1.Input(),

package.json

 {
   "name": "ng2-material-dropdown",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Angular 2 material-like Dropdown Component",
@@ -5,0 +5,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

128704

increased by3.06%

Lines of code

1561

increased by2.43%

No dependency changes