From 27103be1935a91db52d405b862a18e06f85e0963 Mon Sep 17 00:00:00 2001 From: salem Date: Mon, 3 Dec 2018 00:56:59 +0100 Subject: [PATCH 1/7] Add changelog file --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..6a236ed --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,4 @@ +# 1.1.0 (2018-12-03) +### New features +* Add styles (CSS) support ([#5](https://github.com/selemxmn/ngx-print/issues/5)) +* Add support printing window position by user input ([#4](https://github.com/selemxmn/ngx-print/issues/4)) From d45d037f0a05573e0a14e5b90c61421fc311c3ae Mon Sep 17 00:00:00 2001 From: salem Date: Mon, 3 Dec 2018 00:59:21 +0100 Subject: [PATCH 2/7] Change version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f051c02..623dfb4 100644 --- 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": { From 8d1b579aa9327d0b28181f386d598eabe7a93e61 Mon Sep 17 00:00:00 2001 From: salem Date: Mon, 3 Dec 2018 01:20:52 +0100 Subject: [PATCH 3/7] Refactor changelog file --- CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6a236ed..97f4410 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,4 @@ # 1.1.0 (2018-12-03) ### New features -* Add styles (CSS) support ([#5](https://github.com/selemxmn/ngx-print/issues/5)) -* Add support printing window position by user input ([#4](https://github.com/selemxmn/ngx-print/issues/4)) +* Support styles (CSS) ([#5](https://github.com/selemxmn/ngx-print/issues/5)) +* Support printing window position by user input ([#4](https://github.com/selemxmn/ngx-print/issues/4)) From 2098f3ebfbdba4ab12c84898ff0b4000840e0d24 Mon Sep 17 00:00:00 2001 From: salem Date: Mon, 3 Dec 2018 01:22:04 +0100 Subject: [PATCH 4/7] Permit a dynamic title of printing window instead of the old static `Print tab` --- CHANGELOG.md | 1 + src/lib/ngx-print.directive.ts | 29 +++++++++++++++++++++++++++-- 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 97f4410..0e9718f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,3 +2,4 @@ ### New features * Support styles (CSS) ([#5](https://github.com/selemxmn/ngx-print/issues/5)) * Support printing window position by user input ([#4](https://github.com/selemxmn/ngx-print/issues/4)) +* Permit a dynamic title of printing window instead of the old static `Print tab` diff --git a/src/lib/ngx-print.directive.ts b/src/lib/ngx-print.directive.ts index a86fa58..dde9f26 100644 --- a/src/lib/ngx-print.directive.ts +++ b/src/lib/ngx-print.directive.ts @@ -1,12 +1,37 @@ import { Directive, HostListener, Input } from '@angular/core'; - +/** + * + * + * @export + * @class NgxPrintDirective + */ @Directive({ selector: 'button[ngxPrint]' }) + export class NgxPrintDirective { + /** + * + * + * @type {string} + * @memberof NgxPrintDirective + */ @Input() printSectionId: string; + /** + * + * + * @type {string} + * @memberof NgxPrintDirective + */ + @Input() windowTitle: string; + + /** + * + * + * @memberof NgxPrintDirective + */ @HostListener('click', ['$event.target']) public print(): void { let printContents, popupWin; @@ -16,7 +41,7 @@ export class NgxPrintDirective { popupWin.document.write(` - Print tab + ${this.windowTitle ? this.windowTitle : ''} ${printContents} ` From 9b384292d1901e2d256b3df216c516cabb111245 Mon Sep 17 00:00:00 2001 From: salem Date: Tue, 4 Dec 2018 00:25:36 +0100 Subject: [PATCH 5/7] Add scripts --- package.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/package.json b/package.json index 623dfb4..c5ef890 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,11 @@ "dependency", "angular-print" ], + "scripts": { + "ng": "ng", + "build": "ng build", + "test": "ng test" + }, "dependencies": { "tslib": "^1.9.3" }, From 71cefdff2c1bd4cfb37cb67c7e461a1ac8a7458b Mon Sep 17 00:00:00 2001 From: salem Date: Tue, 4 Dec 2018 00:27:48 +0100 Subject: [PATCH 6/7] Support styles (CSS) for the printing window --- src/lib/ngx-print.directive.ts | 42 ++++++++++++++++++++++++++-------- 1 file changed, 32 insertions(+), 10 deletions(-) diff --git a/src/lib/ngx-print.directive.ts b/src/lib/ngx-print.directive.ts index dde9f26..c6a12fa 100644 --- a/src/lib/ngx-print.directive.ts +++ b/src/lib/ngx-print.directive.ts @@ -1,20 +1,15 @@ import { Directive, HostListener, Input } from '@angular/core'; -/** - * - * - * @export - * @class NgxPrintDirective - */ @Directive({ selector: 'button[ngxPrint]' }) export class NgxPrintDirective { + private _printStyle = []; + /** * * - * @type {string} * @memberof NgxPrintDirective */ @Input() printSectionId: string; @@ -22,10 +17,34 @@ export class NgxPrintDirective { /** * * - * @type {string} * @memberof NgxPrintDirective */ - @Input() windowTitle: string; + @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(' '); + } /** * @@ -41,7 +60,10 @@ export class NgxPrintDirective { popupWin.document.write(` - ${this.windowTitle ? this.windowTitle : ''} + ${this.printTitle ? this.printTitle : ''} + ${printContents} ` From 854854d950bc07ac764f5c160215e8136520c24f Mon Sep 17 00:00:00 2001 From: salem Date: Tue, 4 Dec 2018 01:06:28 +0100 Subject: [PATCH 7/7] Update Changelog & Readme files --- CHANGELOG.md | 7 +++---- README.md | 41 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0e9718f..a34491a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,4 @@ -# 1.1.0 (2018-12-03) +# 1.1.0 (2018-12-04) ### New features -* Support styles (CSS) ([#5](https://github.com/selemxmn/ngx-print/issues/5)) -* Support printing window position by user input ([#4](https://github.com/selemxmn/ngx-print/issues/4)) -* Permit a dynamic title of printing window instead of the old static `Print tab` +* 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 index 9cc9aac..3d64730 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,47 @@ export class YourAppModule { ``` +## 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 + + + + + +``` + + +- 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 + + + + + +``` + +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