Merge pull request #6 from selemxmn/v1.1.0

V1.1.0
selemxmn · Dec 4, 2018 · df0b3c5 · df0b3c5
2 parents 2368192 + 854854d
commit df0b3c5
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,4 @@
+# 1.1.0 (2018-12-04)
+### New features
+*  Support styles (CSS) ([#5](https://github.com/selemxmn/ngx-print/issues/5)) ([71cefdf](https://github.com/selemxmn/ngx-print/commit/71cefdf))
+* Permit a dynamic title of printing window instead of the old static `Print tab` ([2098f3e](https://github.com/selemxmn/ngx-print/commit/2098f3e))
diff --git a/README.md b/README.md
@@ -52,6 +52,47 @@ export class YourAppModule {
 <button printSectionId="print-section" ngxPrint>print</button> 
 
 ```
+## Optional properties
+
+- You want a customized title for your printing window ? you have the choice by adding a new attribute to your print button `printTitle`:
+
+
+```html
+
+<div  id="print-section">
+
+<!-- ... -->
+
+</div>
+
+<button  
+	printTitle="MyTitle"  
+	printSectionId="print-section"  
+	ngxPrint>print</button>
+
+```
+
+
+- Also, if you want to customize the printing window style sheet (CSS) ? Hence you can do so by adding infinite styles to another attribute called `printStyle`:
+
+
+```html
+
+<div  id="print-section">
+
+<!-- ... -->
+
+</div>
+
+<button
+	[printStyle]="{h1 : {'color': 'red'}, h2 : {'border': 'solid 1px'}}"
+	printSectionId="print-section"
+	ngxPrint>print</button>
+
+```
+
+Here some simple styles were added to every `h1` & `h2` tags within the `div` where `print-section` is tagged to its `id` attribute.
+
 ## TODO
 * Disable the print button once the popped window is opened
 * Write tests

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-print",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Plug n' Play Angular (2++) directive to print your stuff",
   "author": "https://github.com/selemxmn/ngx-print/graphs/contributors",
   "repository": {
@@ -22,6 +22,11 @@
     "dependency",
     "angular-print"
   ],
+  "scripts": {
+    "ng": "ng",
+    "build": "ng build",
+    "test": "ng test"
+  },
   "dependencies": {
     "tslib": "^1.9.3"
   },

diff --git a/src/lib/ngx-print.directive.ts b/src/lib/ngx-print.directive.ts
@@ -1,12 +1,56 @@
 import { Directive, HostListener, Input } from '@angular/core';
-
 @Directive({
   selector: 'button[ngxPrint]'
 })
+
 export class NgxPrintDirective {
 
+  private _printStyle = [];
+
+  /**
+   *
+   *
+   * @memberof NgxPrintDirective
+   */
   @Input() printSectionId: string;
 
+  /**
+   *
+   *
+   * @memberof NgxPrintDirective
+   */
+  @Input() printTitle: string;
+
+  /**
+   *
+   *
+   * @memberof NgxPrintDirective
+   */
+  @Input()
+  set printStyle(values: {[key: string]: {[key: string]: string}}) {
+    for (var key in values) {
+      if (values.hasOwnProperty(key)) {
+      this._printStyle.push((key + JSON.stringify(values[key])).replace(/['"]+/g, ''));
+      }
+    }
+    this.returnStyleValues();
+  }
+
+/**
+ *
+ *
+ * @returns
+ * @memberof NgxPrintDirective
+ */
+private returnStyleValues() {
+    return this._printStyle.join(' ');
+  }
+
+  /**
+   *
+   *
+   * @memberof NgxPrintDirective
+   */
   @HostListener('click', ['$event.target'])
   public print(): void {
     let printContents, popupWin;
@@ -16,7 +60,10 @@ export class NgxPrintDirective {
     popupWin.document.write(`
       <html>
         <head>
-          <title>Print tab</title>
+          <title>${this.printTitle ? this.printTitle : ''}</title>
+          <style>
+            ${this.returnStyleValues()}
+          </style>
         </head>
     <body onload="window.print();window.close()">${printContents}</body>
       </html>`