ng2-sidebar - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

dist/ng2-sidebar.d.ts

@@ -1,13 +0,21 @@
-import { EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChange } from '@angular/core';
+import { ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChange } from '@angular/core';
 export default class Sidebar implements OnInit, OnChanges, OnDestroy {
+    private _el;
     open: boolean;
+    openChange: EventEmitter<boolean>;
     pullRight: boolean;
+    closeOnClickOutside: boolean;
+    sidebarClassName: string;
     onOpen: EventEmitter<any>;
     onClose: EventEmitter<any>;
-    constructor();
+    private _onClickOutsideAttached;
+    constructor(_el: ElementRef);
     ngOnInit(): void;
+    ngOnDestroy(): void;
     ngOnChanges(changes: {
         [propName: string]: SimpleChange;
     }): void;
-    ngOnDestroy(): void;
+    private _initCloseOnClickOutside();
+    private _destroyCloseOnClickOutside();
+    private _onClickOutside(e);
 }

dist/ng2-sidebar.js

@@ -13,22 +13,57 @@ "use strict";
 var Sidebar = (function () {
-    function Sidebar() {
+    function Sidebar(_el) {
+        this._el = _el;
         this.open = false;
+        this.openChange = new core_1.EventEmitter();
         this.pullRight = false;
+        this.closeOnClickOutside = false;
         this.onOpen = new core_1.EventEmitter();
         this.onClose = new core_1.EventEmitter();
+        this._onClickOutsideAttached = false;
+        this._onClickOutside = this._onClickOutside.bind(this);
     }
     Sidebar.prototype.ngOnInit = function () {
+        this._initCloseOnClickOutside();
     };
+    Sidebar.prototype.ngOnDestroy = function () {
+        this._destroyCloseOnClickOutside();
+    };
     Sidebar.prototype.ngOnChanges = function (changes) {
-        if (changes['open'] !== undefined) {
-            if (changes['open']) {
+        if (changes['open']) {
+            if (this.open) {
                 this.onOpen.emit(null);
+                this._initCloseOnClickOutside();
             }
             else {
                 this.onClose.emit(null);
+                this._destroyCloseOnClickOutside();
             }
         }
+        if (changes['closeOnClickOutside']) {
+            this._initCloseOnClickOutside();
+        }
     };
-    Sidebar.prototype.ngOnDestroy = function () {
+    Sidebar.prototype._initCloseOnClickOutside = function () {
+        var _this = this;
+        if (this.open && this.closeOnClickOutside && !this._onClickOutsideAttached) {
+            setTimeout(function () {
+                document.body.addEventListener('click', _this._onClickOutside);
+                _this._onClickOutsideAttached = true;
+            }, 0);
+        }
     };
+    Sidebar.prototype._destroyCloseOnClickOutside = function () {
+        if (this._onClickOutsideAttached) {
+            document.body.removeEventListener('click', this._onClickOutside);
+            this._onClickOutsideAttached = false;
+        }
+    };
+    Sidebar.prototype._onClickOutside = function (e) {
+        if (this._onClickOutsideAttached && !this._el.nativeElement.contains(e.target)) {
+            this.open = false;
+            this.openChange.emit(false);
+            this.onClose.emit(null);
+            this._destroyCloseOnClickOutside();
+        }
+    };
     __decorate([
@@ -39,2 +74,6 @@ core_1.Input(),
     __decorate([
+        core_1.Output(), 
+        __metadata('design:type', core_1.EventEmitter)
+    ], Sidebar.prototype, "openChange", void 0);
+    __decorate([
         core_1.Input(), 
@@ -44,2 +83,10 @@ __metadata('design:type', Boolean)
     __decorate([
+        core_1.Input(), 
+        __metadata('design:type', Boolean)
+    ], Sidebar.prototype, "closeOnClickOutside", void 0);
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', String)
+    ], Sidebar.prototype, "sidebarClassName", void 0);
+    __decorate([
         core_1.Output(), 
@@ -55,6 +102,6 @@ __metadata('design:type', core_1.EventEmitter)
             selector: 'ng2-sidebar',
-            styles: ["\n    .ng2-sidebar {\n      background: #fff;\n      bottom: 0;\n      left: 0;\n      max-width: 250px;\n      overflow: auto;\n      padding: 2em 1em;\n      pointer-events: none;\n      position: fixed;\n      top: 0;\n      transform: translateX(-100%);\n      transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);\n      width: 100%;\n      will-change: transform;\n    }\n\n      .ng2-sidebar--pull-right {\n        left: auto;\n        right: 0;\n        transform: translateX(100%);\n      }\n\n      .ng2-sidebar.ng2-sidebar--open {\n        pointer-events: auto;\n        transform: none;\n        will-change: initial;\n      }\n  "],
-            template: "\n    <div [ngClass]=\"{ 'ng2-sidebar': true, 'ng2-sidebar--open': open, 'ng2-sidebar--pull-right': pullRight }\">\n      <ng-content></ng-content>\n    </div>\n  "
+            styles: ["\n    .ng2-sidebar {\n      background: #fff;\n      bottom: 0;\n      box-shadow: 0 0 2.5em rgba(84,85,85,0.5);\n      left: 0;\n      max-width: 250px;\n      overflow: auto;\n      padding: 2em 1em;\n      pointer-events: none;\n      position: fixed;\n      top: 0;\n      transform: translateX(-110%);\n      transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);\n      width: 100%;\n      will-change: transform;\n      z-index: 99999999;\n    }\n\n      .ng2-sidebar--pull-right {\n        left: auto;\n        right: 0;\n        transform: translateX(110%);\n      }\n\n      .ng2-sidebar.ng2-sidebar--open {\n        pointer-events: auto;\n        transform: none;\n        will-change: initial;\n      }\n  "],
+            template: "\n    <aside class=\"ng2-sidebar\"\n      [class.ng2-sidebar--open]=\"open\"\n      [class.ng2-sidebar--pull-right]=\"pullRight\"\n      [ngClass]=\"sidebarClassName\">\n      <ng-content></ng-content>\n    </aside>\n  "
         }), 
-        __metadata('design:paramtypes', [])
+        __metadata('design:paramtypes', [core_1.ElementRef])
     ], Sidebar);
@@ -61,0 +108,0 @@ return Sidebar;

package.json

 {
   "name": "ng2-sidebar",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "A sidebar component for Angular 2.",
@@ -28,3 +28,3 @@ "repository": {
   "scripts": {
-    "start": "typings install && tsc --p ./tsconfig.json",
+    "start": "tsc --p ./tsconfig.json",
     "prepublish": "npm start"
@@ -31,0 +31,0 @@ },

src/ng2-sidebar.ts

@@ -10,3 +10,2 @@ import {
   Output,
-  Renderer,
   SimpleChange
@@ -21,2 +20,3 @@ } from '@angular/core';
       bottom: 0;
+      box-shadow: 0 0 2.5em rgba(84,85,85,0.5);
       left: 0;
@@ -29,6 +29,7 @@ max-width: 250px;
       top: 0;
-      transform: translateX(-100%);
+      transform: translateX(-110%);
       transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);
       width: 100%;
       will-change: transform;
+      z-index: 99999999;
     }
@@ -39,3 +40,3 @@
         right: 0;
-        transform: translateX(100%);
+        transform: translateX(110%);
       }
@@ -50,10 +51,18 @@
   template: `
-    <div [ngClass]="{ 'ng2-sidebar': true, 'ng2-sidebar--open': open, 'ng2-sidebar--pull-right': pullRight }">
+    <aside class="ng2-sidebar"
+      [class.ng2-sidebar--open]="open"
+      [class.ng2-sidebar--pull-right]="pullRight"
+      [ngClass]="sidebarClassName">
       <ng-content></ng-content>
-    </div>
+    </aside>
   `
 })
 export default class Sidebar implements OnInit, OnChanges, OnDestroy {
+  // `openChange` allows for 2-way data binding
   @Input() open: boolean = false;
+  @Output() openChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
   @Input() pullRight: boolean = false;
+  @Input() closeOnClickOutside: boolean = false;
+  @Input() sidebarClassName: string;
 
@@ -63,20 +72,65 @@ @Output() onOpen: EventEmitter<any> = new EventEmitter<any>();
 
-  constructor() {
+  private _onClickOutsideAttached: boolean = false;
+
+  constructor(private _el: ElementRef) {
+    this._onClickOutside = this._onClickOutside.bind(this);
   }
 
   ngOnInit() {
+    this._initCloseOnClickOutside();
   }
 
+  ngOnDestroy() {
+    this._destroyCloseOnClickOutside();
+  }
+
   ngOnChanges(changes: { [propName: string]: SimpleChange }) {
-    if (changes['open'] !== undefined) {
-      if (changes['open']) {
+    if (changes['open']) {
+      if (this.open) {
         this.onOpen.emit(null);
+
+        this._initCloseOnClickOutside();
       } else {
         this.onClose.emit(null);
+
+        this._destroyCloseOnClickOutside();
       }
     }
+
+    if (changes['closeOnClickOutside']) {
+      this._initCloseOnClickOutside();
+    }
   }
 
-  ngOnDestroy() {
+
+  // On click outside
+  // ==============================================================================================
+
+  private _initCloseOnClickOutside() {
+    if (this.open && this.closeOnClickOutside && !this._onClickOutsideAttached) {
+      // timeout so that things render first
+      setTimeout(() => {
+        document.body.addEventListener('click', this._onClickOutside);
+        this._onClickOutsideAttached = true;
+      }, 0);
+    }
   }
+
+  private _destroyCloseOnClickOutside() {
+    if (this._onClickOutsideAttached) {
+      document.body.removeEventListener('click', this._onClickOutside);
+      this._onClickOutsideAttached = false;
+    }
+  }
+
+  private _onClickOutside(e: Event) {
+    if (this._onClickOutsideAttached && !this._el.nativeElement.contains(e.target)) {
+      this.open = false;
+      this.openChange.emit(false);
+
+      this.onClose.emit(null);
+
+      this._destroyCloseOnClickOutside();
+    }
+  }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11029

increased by55.45%

Lines of code

240

increased by69.01%

No dependency changes