From c269053d64aa626dea8a3bea76a0c0da2480a8bb Mon Sep 17 00:00:00 2001 From: Corey Franco <42871786+Core121@users.noreply.github.com> Date: Wed, 22 Nov 2023 12:36:08 -0500 Subject: [PATCH 01/12] Added ngxPrintService and IPrintOptions --- src/lib/iprint-options.ts | 9 ++ src/lib/ngx-print.base.ts | 133 +++++++++++++++++++ src/lib/ngx-print.directive.spec.ts | 49 +++---- src/lib/ngx-print.directive.ts | 195 ++++++---------------------- src/lib/ngx-print.service.spec.ts | 16 +++ src/lib/ngx-print.service.ts | 14 ++ 6 files changed, 230 insertions(+), 186 deletions(-) create mode 100644 src/lib/iprint-options.ts create mode 100644 src/lib/ngx-print.base.ts create mode 100644 src/lib/ngx-print.service.spec.ts create mode 100644 src/lib/ngx-print.service.ts diff --git a/src/lib/iprint-options.ts b/src/lib/iprint-options.ts new file mode 100644 index 0000000..96ed5dd --- /dev/null +++ b/src/lib/iprint-options.ts @@ -0,0 +1,9 @@ +export interface IPrintOptions { + printSectionId: string; + printTitle?: string; + useExistingCss: boolean; + bodyClass: string; + previewOnly: boolean; + closeWindow: boolean; + printDelay: number; + } \ No newline at end of file diff --git a/src/lib/ngx-print.base.ts b/src/lib/ngx-print.base.ts new file mode 100644 index 0000000..7ad819b --- /dev/null +++ b/src/lib/ngx-print.base.ts @@ -0,0 +1,133 @@ +import { Injectable } from "@angular/core"; +import { IPrintOptions } from "./iprint-options"; + +@Injectable({ + providedIn: 'root' +}) +export class PrintBase { + + private _printStyle: string[] = []; + private _styleSheetFile: string = ''; + + protected setPrintStyle(values: { [key: string]: { [key: string]: string } }): void { + this._printStyle = []; + for (let key in values) { + if (values.hasOwnProperty(key)) { + this._printStyle.push((key + JSON.stringify(values[key])).replace(/['"]+/g, '')); + } + } + } + + protected setStyleSheetFile(cssList: string): void { + let linkTagFn = function (cssFileName) { + return ``; + }; + + if (cssList.indexOf(',') !== -1) { + const valueArr = cssList.split(','); + this._styleSheetFile = valueArr.map(val => linkTagFn(val)).join(''); + } else { + this._styleSheetFile = linkTagFn(cssList); + } + } + + protected updateInputDefaults(elements: HTMLCollectionOf): void { + for (let i = 0; i < elements.length; i++) { + const element = elements[i]; + element['defaultValue'] = element.value; + if (element['checked']) element['defaultChecked'] = true; + } + } + + protected updateSelectDefaults(elements: HTMLCollectionOf): void { + for (let i = 0; i < elements.length; i++) { + const element = elements[i]; + const selectedIdx = element.selectedIndex; + const selectedOption: HTMLOptionElement = element.options[selectedIdx]; + + selectedOption.defaultSelected = true; + } + } + + protected updateTextAreaDefaults(elements: HTMLCollectionOf): void { + for (let i = 0; i < elements.length; i++) { + const element = elements[i]; + element['defaultValue'] = element.value; + } + } + + protected getHtmlContents(printSectionId: string): string | null { + const printContents = document.getElementById(printSectionId); + if (!printContents) return null; + + const inputEls = printContents.getElementsByTagName('input'); + const selectEls = printContents.getElementsByTagName('select'); + const textAreaEls = printContents.getElementsByTagName('textarea'); + + this.updateInputDefaults(inputEls); + this.updateSelectDefaults(selectEls); + this.updateTextAreaDefaults(textAreaEls); + + return printContents.innerHTML; + } + + protected getElementTag(tag: keyof HTMLElementTagNameMap): string { + const html: string[] = []; + const elements = document.getElementsByTagName(tag); + for (let index = 0; index < elements.length; index++) { + html.push(elements[index].outerHTML); + } + return html.join('\r\n'); + } + + /** + * @returns string which contains the link tags containing the css which will + * be injected later within tag. + * + */ + protected returnStyleSheetLinkTags() { + return this._styleSheetFile; + } + + public print(printOptions: IPrintOptions): void { + + let printContents, popupWin, styles = '', links = ''; + const baseTag = this.getElementTag('base'); + + if (printOptions.useExistingCss) { + styles = this.getElementTag('style'); + links = this.getElementTag('link'); + } + + printContents = this.getHtmlContents(printOptions.printSectionId); + popupWin = window.open("", "_blank", "top=0,left=0,height=auto,width=auto"); + popupWin.document.open(); + popupWin.document.write(` + + + ${printOptions.printTitle ? printOptions.printTitle : ""} + ${baseTag} + + ${this.returnStyleSheetLinkTags()} + ${styles} + ${links} + + + ${printContents} + + + `); + popupWin.document.close(); + } +} diff --git a/src/lib/ngx-print.directive.spec.ts b/src/lib/ngx-print.directive.spec.ts index 4e7d845..70fe023 100644 --- a/src/lib/ngx-print.directive.spec.ts +++ b/src/lib/ngx-print.directive.spec.ts @@ -23,7 +23,7 @@ import { NgxPrintDirective } from './ngx-print.directive';

Angular blog

- +
@@ -78,41 +78,34 @@ describe('NgxPrintDirective', () => { expect(directive).toBeTruthy(); }); - it('should test the @Input printStyle', () => { - const directive = new NgxPrintDirective(); + // it('should test the @Input printStyle', () => { + // const directive = new NgxPrintDirective(); - // Define styleSheet before using it - const styleSheet = {/* Define your styles here */ }; + // // Define styleSheet before using it + // const styleSheet = {/* Define your styles here */ }; - directive.printStyle = styleSheet; + // directive.printStyle = styleSheet; - // Iterate through printStyle and push values to _printStyle - for (var key in directive.printStyle) { - if (directive.printStyle.hasOwnProperty(key)) { - directive._printStyle.push((key + JSON.stringify(directive.printStyle[key])).replace(/['"]+/g, '')); - } - } + // // Create a spy on the instance's method + // spyOn(directive, 'returnStyleValues').and.callThrough(); - // Create a spy on the instance's method - spyOn(directive, 'returnStyleValues').and.callThrough(); + // // Call the function before checking if it has been called + // directive.returnStyleValues(); - // Call the function before checking if it has been called - directive.returnStyleValues(); + // // Check if returnStyleValues has been called + // expect(directive.returnStyleValues).toHaveBeenCalled(); + // }); - // Check if returnStyleValues has been called - expect(directive.returnStyleValues).toHaveBeenCalled(); - }); + // it('should returns a string from array of objects', () => { + // const directive = new NgxPrintDirective(); + // directive.printStyle = [ + // "h2{border:solid 1px}", + // "h1{color:red,border:1px solid}" + // ]; - it('should returns a string from array of objects', () => { - const directive = new NgxPrintDirective(); - directive._printStyle = [ - "h2{border:solid 1px}", - "h1{color:red,border:1px solid}" - ]; - - expect((() => { return directive.returnStyleValues() })()).toEqual(''); - }); + // expect((() => { return directive.returnStyleValues() })()).toEqual(''); + // }); it(`should popup a new window`, () => { spyOn(window, 'open').and.callThrough(); diff --git a/src/lib/ngx-print.directive.ts b/src/lib/ngx-print.directive.ts index a9882bd..281e2cb 100644 --- a/src/lib/ngx-print.directive.ts +++ b/src/lib/ngx-print.directive.ts @@ -1,58 +1,81 @@ import { Directive, HostListener, Input } from '@angular/core'; +import { PrintBase } from './ngx-print.base'; +import { IPrintOptions } from './iprint-options'; @Directive({ selector: "button[ngxPrint]", standalone: true }) -export class NgxPrintDirective { - - public _printStyle = []; - +export class NgxPrintDirective extends PrintBase { + private printOptions: IPrintOptions = { + printSectionId: null, + printTitle: null, + useExistingCss: false, + bodyClass: '', + previewOnly: false, + closeWindow: true, + printDelay: 0, + }; + /** * Prevents the print dialog from opening on the window * * @memberof NgxPrintDirective */ - @Input() previewOnly: boolean = false; + @Input() set previewOnly(value: boolean) { + this.printOptions = {...this.printOptions, previewOnly: value}; + } /** * * * @memberof NgxPrintDirective */ - @Input() printSectionId: string; + @Input() set printSectionId(value: string) { + this.printOptions = {...this.printOptions, printSectionId: value}; + } /** * * * @memberof NgxPrintDirective */ - @Input() printTitle: string; + @Input() set printTitle(value: string) { + this.printOptions = {...this.printOptions, printSectionId: value}; + } /** * * * @memberof NgxPrintDirective */ - @Input() useExistingCss = false; + @Input() set useExistingCss(value: boolean) { + this.printOptions = {...this.printOptions, useExistingCss: value}; + } /** * A delay in milliseconds to force the print dialog to wait before opened. Default: 0 * * @memberof NgxPrintDirective */ - @Input() printDelay: number = 0; + @Input() set printDelay(value: number) { + this.printOptions = {...this.printOptions, printDelay: value}; + } /** * Whether to close the window after print() returns. * */ - @Input() closeWindow: boolean = true; + @Input() set closeWindow(value: boolean) { + this.printOptions = {...this.printOptions, closeWindow: value}; + } /** * Class attribute to apply to the body element. * */ - @Input() bodyClass: string = ''; + @Input() set bodyClass(value: string) { + this.printOptions = {...this.printOptions, bodyClass: value}; + } /** * @@ -61,36 +84,9 @@ export class NgxPrintDirective { */ @Input() set printStyle(values: { [key: string]: { [key: string]: string } }) { - for (let key in values) { - if (values.hasOwnProperty(key)) { - this._printStyle.push((key + JSON.stringify(values[key])).replace(/['"]+/g, '')); - } - } - this.returnStyleValues(); - } - - /** - * - * - * @returns the string that create the stylesheet which will be injected - * later within tag. - * - * -join/replace to transform an array objects to css-styled string - * - * @memberof NgxPrintDirective - */ - public returnStyleValues() { - return ``; + this.setPrintStyle(values); } - /** - * - * - * @returns html for the given tag - * - * @memberof NgxPrintDirective - */ - private _styleSheetFile = ''; /** * @memberof NgxPrintDirective @@ -98,87 +94,7 @@ export class NgxPrintDirective { */ @Input() set styleSheetFile(cssList: string) { - let linkTagFn = function (cssFileName) { - return ``; - } - if (cssList.indexOf(',') !== -1) { - const valueArr = cssList.split(','); - for (let val of valueArr) { - this._styleSheetFile = this._styleSheetFile + linkTagFn(val); - } - } else { - this._styleSheetFile = linkTagFn(cssList); - } - } - - /** - * @returns string which contains the link tags containing the css which will - * be injected later within tag. - * - */ - private returnStyleSheetLinkTags() { - return this._styleSheetFile; - } - private getElementTag(tag: keyof HTMLElementTagNameMap): string { - const html: string[] = []; - const elements = document.getElementsByTagName(tag); - for (let index = 0; index < elements.length; index++) { - html.push(elements[index].outerHTML); - } - return html.join('\r\n'); - } - - /** - * - * @description When printing, the default option of form elements are printed. - * Here we update what that default is to print the current values. - * - * @param elements the html element collection to save defaults to - * - */ - private updateInputDefaults(elements: HTMLCollectionOf): void { - for (let i = 0; i < elements.length; i++) { - const element = elements[i]; - element['defaultValue'] = element.value; - if (element['checked']) element['defaultChecked'] = true; - } - } - private updateSelectDefaults(elements: HTMLCollectionOf): void { - for (let i = 0; i < elements.length; i++) { - const element = elements[i]; - const selectedIdx = element.selectedIndex; - const selectedOption: HTMLOptionElement = element.options[selectedIdx]; - - selectedOption.defaultSelected = true; - } - } - private updateTextAreaDefaults(elements: HTMLCollectionOf): void { - for (let i = 0; i < elements.length; i++) { - const element = elements[i]; - element['defaultValue'] = element.value; - } - } - - /** - * @description Retrieves the html contents of the print section id. - * Updates the html elements to default their form values to the current form values - * - * @returns {string | null} html section to be printed - * - */ - private getHtmlContents(): string | null { - const printContents = document.getElementById(this.printSectionId); - if (!printContents) return null; - - const inputEls = printContents.getElementsByTagName('input'); - const selectEls = printContents.getElementsByTagName('select'); - const textAreaEls = printContents.getElementsByTagName('textarea'); - - this.updateInputDefaults(inputEls); - this.updateSelectDefaults(selectEls); - this.updateTextAreaDefaults(textAreaEls); - - return printContents.innerHTML; + super.setStyleSheetFile(cssList); } /** @@ -188,43 +104,6 @@ export class NgxPrintDirective { */ @HostListener('click') public print(): void { - let printContents, popupWin, styles = '', links = ''; - const baseTag = this.getElementTag('base'); - - if (this.useExistingCss) { - styles = this.getElementTag('style'); - links = this.getElementTag('link'); - } - - printContents = this.getHtmlContents(); - popupWin = window.open("", "_blank", "top=0,left=0,height=auto,width=auto"); - popupWin.document.open(); - popupWin.document.write(` - - - ${this.printTitle ? this.printTitle : ""} - ${baseTag} - ${this.returnStyleValues()} - ${this.returnStyleSheetLinkTags()} - ${styles} - ${links} - - - ${printContents} - - - `); - popupWin.document.close(); + super.print(this.printOptions); } } diff --git a/src/lib/ngx-print.service.spec.ts b/src/lib/ngx-print.service.spec.ts new file mode 100644 index 0000000..8cbe96c --- /dev/null +++ b/src/lib/ngx-print.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { NgxPrintService } from './ngx-print.service'; + +describe('NgxPrintService', () => { + let service: NgxPrintService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(NgxPrintService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/lib/ngx-print.service.ts b/src/lib/ngx-print.service.ts new file mode 100644 index 0000000..1f7029d --- /dev/null +++ b/src/lib/ngx-print.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from "@angular/core"; +import { IPrintOptions } from "./iprint-options"; +import { PrintBase } from "./ngx-print.base"; + +@Injectable({ + providedIn: "root", +}) +export class NgxPrintService extends PrintBase { + + public print(printOptions: IPrintOptions): void { + // Call the print method in the parent class + super.print(printOptions); + } +} From 11781162d1e5b49913514b732a07c3f04f2a4345 Mon Sep 17 00:00:00 2001 From: Corey Franco <42871786+Core121@users.noreply.github.com> Date: Wed, 22 Nov 2023 15:07:36 -0500 Subject: [PATCH 02/12] Export printservice and interface --- src/public_api.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/public_api.ts b/src/public_api.ts index 1265888..a4a66de 100644 --- a/src/public_api.ts +++ b/src/public_api.ts @@ -1,6 +1,7 @@ /* * Public API Surface of ngx-print */ - +export * from './lib/ngx-print.service'; export * from './lib/ngx-print.directive'; export * from './lib/ngx-print.module'; +export * from './lib/iprint-options'; From 210a2b82b148df33937ba745e8bc4c6e4c62463b Mon Sep 17 00:00:00 2001 From: Corey Franco <42871786+Core121@users.noreply.github.com> Date: Mon, 27 Nov 2023 15:17:23 -0500 Subject: [PATCH 03/12] PrintOptions is now a class rather than interface to ensure defaults --- src/lib/iprint-options.ts | 9 ----- src/lib/ngx-print.base.ts | 4 +- src/lib/ngx-print.directive.ts | 13 +----- src/lib/ngx-print.service.spec.ts | 67 ++++++++++++++++++++++++++++++- src/lib/ngx-print.service.ts | 4 +- src/lib/print-options.ts | 15 +++++++ src/public_api.ts | 2 +- 7 files changed, 87 insertions(+), 27 deletions(-) delete mode 100644 src/lib/iprint-options.ts create mode 100644 src/lib/print-options.ts diff --git a/src/lib/iprint-options.ts b/src/lib/iprint-options.ts deleted file mode 100644 index 96ed5dd..0000000 --- a/src/lib/iprint-options.ts +++ /dev/null @@ -1,9 +0,0 @@ -export interface IPrintOptions { - printSectionId: string; - printTitle?: string; - useExistingCss: boolean; - bodyClass: string; - previewOnly: boolean; - closeWindow: boolean; - printDelay: number; - } \ No newline at end of file diff --git a/src/lib/ngx-print.base.ts b/src/lib/ngx-print.base.ts index 7ad819b..0119d4a 100644 --- a/src/lib/ngx-print.base.ts +++ b/src/lib/ngx-print.base.ts @@ -1,5 +1,5 @@ import { Injectable } from "@angular/core"; -import { IPrintOptions } from "./iprint-options"; +import { PrintOptions } from "./print-options"; @Injectable({ providedIn: 'root' @@ -89,7 +89,7 @@ export class PrintBase { return this._styleSheetFile; } - public print(printOptions: IPrintOptions): void { + public print(printOptions: PrintOptions): void { let printContents, popupWin, styles = '', links = ''; const baseTag = this.getElementTag('base'); diff --git a/src/lib/ngx-print.directive.ts b/src/lib/ngx-print.directive.ts index 281e2cb..f1873c6 100644 --- a/src/lib/ngx-print.directive.ts +++ b/src/lib/ngx-print.directive.ts @@ -1,21 +1,12 @@ import { Directive, HostListener, Input } from '@angular/core'; import { PrintBase } from './ngx-print.base'; -import { IPrintOptions } from './iprint-options'; +import { PrintOptions } from './print-options'; @Directive({ selector: "button[ngxPrint]", standalone: true }) export class NgxPrintDirective extends PrintBase { - private printOptions: IPrintOptions = { - printSectionId: null, - printTitle: null, - useExistingCss: false, - bodyClass: '', - previewOnly: false, - closeWindow: true, - printDelay: 0, - }; - + private printOptions = new PrintOptions(); /** * Prevents the print dialog from opening on the window * diff --git a/src/lib/ngx-print.service.spec.ts b/src/lib/ngx-print.service.spec.ts index 8cbe96c..176f50e 100644 --- a/src/lib/ngx-print.service.spec.ts +++ b/src/lib/ngx-print.service.spec.ts @@ -1,16 +1,79 @@ -import { TestBed } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { NgxPrintService } from './ngx-print.service'; +import { Component } from '@angular/core'; +import { PrintOptions } from './print-options'; +@Component({ + template: ` +
Row 1, Column 1 Row 1, Column 2
+ + + + + + + + +
Row 1, Column 1Row 1, Column 2
Row 2, Column 1Row 2, Column 2
+ + ` +}) +class TestNgxPrintServiceComponent { + constructor(private printService: NgxPrintService) { } + + printMe(printOptions: PrintOptions) { + this.printService.print(printOptions); + } +} describe('NgxPrintService', () => { let service: NgxPrintService; + let component: TestNgxPrintServiceComponent; + let fixture: ComponentFixture; beforeEach(() => { - TestBed.configureTestingModule({}); + TestBed.configureTestingModule({ + declarations: [TestNgxPrintServiceComponent], + providers: [NgxPrintService] + }); service = TestBed.inject(NgxPrintService); + // Create a fixture object (that is going to allows us to create an instance of that component) + fixture = TestBed.createComponent(TestNgxPrintServiceComponent); + + // Create a component instance ( ~ new Component) + component = fixture.componentInstance; }); it('should be created', () => { expect(service).toBeTruthy(); }); + + it('should print with custom options', () => { + spyOn(service, 'print'); + + const customPrintOptions: PrintOptions = new PrintOptions({ + printSectionId: 'print-section' + }); + + component.printMe(customPrintOptions); + + expect(service.print).toHaveBeenCalledWith(customPrintOptions); + }); }); diff --git a/src/lib/ngx-print.service.ts b/src/lib/ngx-print.service.ts index 1f7029d..0f8caf0 100644 --- a/src/lib/ngx-print.service.ts +++ b/src/lib/ngx-print.service.ts @@ -1,13 +1,13 @@ import { Injectable } from "@angular/core"; -import { IPrintOptions } from "./iprint-options"; import { PrintBase } from "./ngx-print.base"; +import { PrintOptions } from "./print-options"; @Injectable({ providedIn: "root", }) export class NgxPrintService extends PrintBase { - public print(printOptions: IPrintOptions): void { + public print(printOptions: PrintOptions): void { // Call the print method in the parent class super.print(printOptions); } diff --git a/src/lib/print-options.ts b/src/lib/print-options.ts new file mode 100644 index 0000000..bf67bc9 --- /dev/null +++ b/src/lib/print-options.ts @@ -0,0 +1,15 @@ +export class PrintOptions { + printSectionId: string = null; + printTitle: string = null; + useExistingCss: boolean = false; + bodyClass: string = ''; + previewOnly: boolean = false; + closeWindow: boolean = true; + printDelay: number = 0; + + constructor(options?: Partial) { + if (options) { + Object.assign(this, options); + } + } +} diff --git a/src/public_api.ts b/src/public_api.ts index a4a66de..7913d81 100644 --- a/src/public_api.ts +++ b/src/public_api.ts @@ -4,4 +4,4 @@ export * from './lib/ngx-print.service'; export * from './lib/ngx-print.directive'; export * from './lib/ngx-print.module'; -export * from './lib/iprint-options'; +export * from './lib/print-options'; From 18b16d85d861439023cee33234fe76a5fef30257 Mon Sep 17 00:00:00 2001 From: Corey Franco <42871786+Core121@users.noreply.github.com> Date: Mon, 27 Nov 2023 15:24:33 -0500 Subject: [PATCH 04/12] Added test cases --- src/lib/ngx-print.service.spec.ts | 67 ++++++++++++++++++++++++++++++- 1 file changed, 66 insertions(+), 1 deletion(-) diff --git a/src/lib/ngx-print.service.spec.ts b/src/lib/ngx-print.service.spec.ts index 176f50e..c4c0d64 100644 --- a/src/lib/ngx-print.service.spec.ts +++ b/src/lib/ngx-print.service.spec.ts @@ -65,7 +65,7 @@ describe('NgxPrintService', () => { expect(service).toBeTruthy(); }); - it('should print with custom options', () => { + it('should print', () => { spyOn(service, 'print'); const customPrintOptions: PrintOptions = new PrintOptions({ @@ -76,4 +76,69 @@ describe('NgxPrintService', () => { expect(service.print).toHaveBeenCalledWith(customPrintOptions); }); + + it('should print with title', () => { + spyOn(service, 'print'); + + const customPrintOptions: PrintOptions = new PrintOptions({ + printSectionId: 'print-section', + printTitle: "Test Title" + }); + + component.printMe(customPrintOptions); + + expect(service.print).toHaveBeenCalledWith(customPrintOptions); + }); + + it('should print with existing css', () => { + spyOn(service, 'print'); + + const customPrintOptions: PrintOptions = new PrintOptions({ + printSectionId: 'print-section', + useExistingCss: true + }); + + component.printMe(customPrintOptions); + + expect(service.print).toHaveBeenCalledWith(customPrintOptions); + }); + + it('should print with delay', () => { + spyOn(service, 'print'); + + const customPrintOptions: PrintOptions = new PrintOptions({ + printSectionId: 'print-section', + printDelay: 2000 + }); + + component.printMe(customPrintOptions); + + expect(service.print).toHaveBeenCalledWith(customPrintOptions); + }); + + it('should print with previewOnly', () => { + spyOn(service, 'print'); + + const customPrintOptions: PrintOptions = new PrintOptions({ + printSectionId: 'print-section', + previewOnly: true + }); + + component.printMe(customPrintOptions); + + expect(service.print).toHaveBeenCalledWith(customPrintOptions); + }); + + it('should not close', () => { + spyOn(service, 'print'); + + const customPrintOptions: PrintOptions = new PrintOptions({ + printSectionId: 'print-section', + closeWindow: false + }); + + component.printMe(customPrintOptions); + + expect(service.print).toHaveBeenCalledWith(customPrintOptions); + }); }); From 30a5743455c67d26a584e814c154df49b60201ed Mon Sep 17 00:00:00 2001 From: Corey Franco <42871786+Core121@users.noreply.github.com> Date: Tue, 28 Nov 2023 10:11:43 -0500 Subject: [PATCH 05/12] Added comments and made inner functions private --- src/lib/ngx-print.base.ts | 117 +++++++++++++++++++++++++++++++------- 1 file changed, 96 insertions(+), 21 deletions(-) diff --git a/src/lib/ngx-print.base.ts b/src/lib/ngx-print.base.ts index 0119d4a..4aa73aa 100644 --- a/src/lib/ngx-print.base.ts +++ b/src/lib/ngx-print.base.ts @@ -9,7 +9,14 @@ export class PrintBase { private _printStyle: string[] = []; private _styleSheetFile: string = ''; - protected setPrintStyle(values: { [key: string]: { [key: string]: string } }): void { + //#region Getters and Setters + /** + * Sets the print styles based on the provided values. + * + * @param {Object} values - Key-value pairs representing print styles. + * @protected + */ + protected setPrintStyle(values: { [key: string]: { [key: string]: string } }) { this._printStyle = []; for (let key in values) { if (values.hasOwnProperty(key)) { @@ -18,7 +25,34 @@ export class PrintBase { } } - protected setStyleSheetFile(cssList: string): void { + /** + * + * + * @returns the string that create the stylesheet which will be injected + * later within tag. + * + * -join/replace to transform an array objects to css-styled string + */ + public returnStyleValues() { + return ``; + } + + /** + * @returns string which contains the link tags containing the css which will + * be injected later within tag. + * + */ + private returnStyleSheetLinkTags() { + return this._styleSheetFile; + } + + /** + * Sets the style sheet file based on the provided CSS list. + * + * @param {string} cssList - CSS file or list of CSS files. + * @protected + */ + protected setStyleSheetFile(cssList: string) { let linkTagFn = function (cssFileName) { return ``; }; @@ -31,7 +65,17 @@ export class PrintBase { } } - protected updateInputDefaults(elements: HTMLCollectionOf): void { + //#endregion + + //#region Private methods used by PrintBase + + /** + * Updates the default values for input elements. + * + * @param {HTMLCollectionOf} elements - Collection of input elements. + * @private + */ + private updateInputDefaults(elements: HTMLCollectionOf): void { for (let i = 0; i < elements.length; i++) { const element = elements[i]; element['defaultValue'] = element.value; @@ -39,7 +83,13 @@ export class PrintBase { } } - protected updateSelectDefaults(elements: HTMLCollectionOf): void { + /** + * Updates the default values for select elements. + * + * @param {HTMLCollectionOf} elements - Collection of select elements. + * @private + */ + private updateSelectDefaults(elements: HTMLCollectionOf): void { for (let i = 0; i < elements.length; i++) { const element = elements[i]; const selectedIdx = element.selectedIndex; @@ -49,14 +99,27 @@ export class PrintBase { } } - protected updateTextAreaDefaults(elements: HTMLCollectionOf): void { + /** + * Updates the default values for textarea elements. + * + * @param {HTMLCollectionOf} elements - Collection of textarea elements. + * @private + */ + private updateTextAreaDefaults(elements: HTMLCollectionOf): void { for (let i = 0; i < elements.length; i++) { const element = elements[i]; element['defaultValue'] = element.value; } } - protected getHtmlContents(printSectionId: string): string | null { + /** + * Retrieves the HTML content of a specified printing section. + * + * @param {string} printSectionId - Id of the printing section. + * @returns {string | null} - HTML content of the printing section, or null if not found. + * @private + */ + private getHtmlContents(printSectionId: string): string | null { const printContents = document.getElementById(printSectionId); if (!printContents) return null; @@ -71,7 +134,14 @@ export class PrintBase { return printContents.innerHTML; } - protected getElementTag(tag: keyof HTMLElementTagNameMap): string { + /** + * Retrieves the HTML content of elements with the specified tag. + * + * @param {keyof HTMLElementTagNameMap} tag - HTML tag name. + * @returns {string} - Concatenated outerHTML of elements with the specified tag. + * @private + */ + private getElementTag(tag: keyof HTMLElementTagNameMap): string { const html: string[] = []; const elements = document.getElementsByTagName(tag); for (let index = 0; index < elements.length; index++) { @@ -79,19 +149,18 @@ export class PrintBase { } return html.join('\r\n'); } + //#endregion - /** - * @returns string which contains the link tags containing the css which will - * be injected later within tag. - * - */ - protected returnStyleSheetLinkTags() { - return this._styleSheetFile; - } - - public print(printOptions: PrintOptions): void { - let printContents, popupWin, styles = '', links = ''; + /** + * Prints the specified content using the provided print options. + * + * @param {PrintOptions} printOptions - Options for printing. + * @public + */ + protected print(printOptions: PrintOptions): void { + + let styles = '', links = ''; const baseTag = this.getElementTag('base'); if (printOptions.useExistingCss) { @@ -99,15 +168,21 @@ export class PrintBase { links = this.getElementTag('link'); } - printContents = this.getHtmlContents(printOptions.printSectionId); - popupWin = window.open("", "_blank", "top=0,left=0,height=auto,width=auto"); + const printContents = this.getHtmlContents(printOptions.printSectionId); + if (!printContents) { + // Handle the case where the specified print section is not found. + console.error(`Print section with id ${printOptions.printSectionId} not found.`); + return; + } + + const popupWin = window.open("", "_blank", "top=0,left=0,height=auto,width=auto"); popupWin.document.open(); popupWin.document.write(` ${printOptions.printTitle ? printOptions.printTitle : ""} ${baseTag} - + ${this.returnStyleValues()} ${this.returnStyleSheetLinkTags()} ${styles} ${links} From 46c8c66779d953b23837fd8b5c51a8160888e001 Mon Sep 17 00:00:00 2001 From: Corey Franco <42871786+Core121@users.noreply.github.com> Date: Tue, 28 Nov 2023 10:12:03 -0500 Subject: [PATCH 06/12] Fixed issues with directive tests --- src/lib/ngx-print.directive.spec.ts | 37 ++++++++++++----------------- 1 file changed, 15 insertions(+), 22 deletions(-) diff --git a/src/lib/ngx-print.directive.spec.ts b/src/lib/ngx-print.directive.spec.ts index 70fe023..cb8e2d9 100644 --- a/src/lib/ngx-print.directive.spec.ts +++ b/src/lib/ngx-print.directive.spec.ts @@ -78,34 +78,27 @@ describe('NgxPrintDirective', () => { expect(directive).toBeTruthy(); }); - // it('should test the @Input printStyle', () => { - // const directive = new NgxPrintDirective(); - - // // Define styleSheet before using it - // const styleSheet = {/* Define your styles here */ }; - - // directive.printStyle = styleSheet; + it('should test the @Input printStyle', () => { + const directive = new NgxPrintDirective(); - // // Create a spy on the instance's method - // spyOn(directive, 'returnStyleValues').and.callThrough(); + // Create a spy on the instance's method + spyOn(directive, 'returnStyleValues').and.callThrough(); - // // Call the function before checking if it has been called - // directive.returnStyleValues(); + // Call the function before checking if it has been called + directive.returnStyleValues(); - // // Check if returnStyleValues has been called - // expect(directive.returnStyleValues).toHaveBeenCalled(); - // }); + // Check if returnStyleValues has been called + expect(directive.returnStyleValues).toHaveBeenCalled(); + }); - // it('should returns a string from array of objects', () => { - // const directive = new NgxPrintDirective(); - // directive.printStyle = [ - // "h2{border:solid 1px}", - // "h1{color:red,border:1px solid}" - // ]; + it('should returns a string from array of objects', () => { + const directive = new NgxPrintDirective(); + directive.printStyle = styleSheet; - // expect((() => { return directive.returnStyleValues() })()).toEqual(''); - // }); + // Ensure the print styles are correctly formatted in the document + expect(directive.returnStyleValues()).toEqual(''); + }); it(`should popup a new window`, () => { spyOn(window, 'open').and.callThrough(); From 0ec032fc1dd8bb66b4138c486d8c259a77c70bc7 Mon Sep 17 00:00:00 2001 From: Corey Franco <42871786+Core121@users.noreply.github.com> Date: Tue, 28 Nov 2023 10:12:59 -0500 Subject: [PATCH 07/12] Added methods for setting printStyle on service and added comments --- src/lib/ngx-print.directive.ts | 16 ++++++------- src/lib/ngx-print.service.spec.ts | 26 +++++++++++++++++++++ src/lib/ngx-print.service.ts | 38 +++++++++++++++++++++++++++++++ 3 files changed, 72 insertions(+), 8 deletions(-) diff --git a/src/lib/ngx-print.directive.ts b/src/lib/ngx-print.directive.ts index f1873c6..a958652 100644 --- a/src/lib/ngx-print.directive.ts +++ b/src/lib/ngx-print.directive.ts @@ -13,7 +13,7 @@ export class NgxPrintDirective extends PrintBase { * @memberof NgxPrintDirective */ @Input() set previewOnly(value: boolean) { - this.printOptions = {...this.printOptions, previewOnly: value}; + this.printOptions = { ...this.printOptions, previewOnly: value }; } /** @@ -22,7 +22,7 @@ export class NgxPrintDirective extends PrintBase { * @memberof NgxPrintDirective */ @Input() set printSectionId(value: string) { - this.printOptions = {...this.printOptions, printSectionId: value}; + this.printOptions = { ...this.printOptions, printSectionId: value }; } /** @@ -31,7 +31,7 @@ export class NgxPrintDirective extends PrintBase { * @memberof NgxPrintDirective */ @Input() set printTitle(value: string) { - this.printOptions = {...this.printOptions, printSectionId: value}; + this.printOptions = { ...this.printOptions, printSectionId: value }; } /** @@ -40,7 +40,7 @@ export class NgxPrintDirective extends PrintBase { * @memberof NgxPrintDirective */ @Input() set useExistingCss(value: boolean) { - this.printOptions = {...this.printOptions, useExistingCss: value}; + this.printOptions = { ...this.printOptions, useExistingCss: value }; } /** @@ -49,7 +49,7 @@ export class NgxPrintDirective extends PrintBase { * @memberof NgxPrintDirective */ @Input() set printDelay(value: number) { - this.printOptions = {...this.printOptions, printDelay: value}; + this.printOptions = { ...this.printOptions, printDelay: value }; } /** @@ -57,7 +57,7 @@ export class NgxPrintDirective extends PrintBase { * */ @Input() set closeWindow(value: boolean) { - this.printOptions = {...this.printOptions, closeWindow: value}; + this.printOptions = { ...this.printOptions, closeWindow: value }; } /** @@ -65,7 +65,7 @@ export class NgxPrintDirective extends PrintBase { * */ @Input() set bodyClass(value: string) { - this.printOptions = {...this.printOptions, bodyClass: value}; + this.printOptions = { ...this.printOptions, bodyClass: value }; } /** @@ -75,7 +75,7 @@ export class NgxPrintDirective extends PrintBase { */ @Input() set printStyle(values: { [key: string]: { [key: string]: string } }) { - this.setPrintStyle(values); + super.setPrintStyle(values); } diff --git a/src/lib/ngx-print.service.spec.ts b/src/lib/ngx-print.service.spec.ts index c4c0d64..c95f79f 100644 --- a/src/lib/ngx-print.service.spec.ts +++ b/src/lib/ngx-print.service.spec.ts @@ -48,6 +48,12 @@ describe('NgxPrintService', () => { let component: TestNgxPrintServiceComponent; let fixture: ComponentFixture; + let styleSheet: { [key: string]: { [key: string]: string } } + = { + 'h2': { 'border': 'solid 1px' }, + 'h1': { 'color': 'red', 'border': '1px solid' } + }; + beforeEach(() => { TestBed.configureTestingModule({ declarations: [TestNgxPrintServiceComponent], @@ -141,4 +147,24 @@ describe('NgxPrintService', () => { expect(service.print).toHaveBeenCalledWith(customPrintOptions); }); + + it('should test the printStyle', () => { + + // Create a spy on the instance's method + spyOn(service, 'returnStyleValues').and.callThrough(); + + // Call the function before checking if it has been called + service.returnStyleValues(); + + // Check if returnStyleValues has been called + expect(service.returnStyleValues).toHaveBeenCalled(); + }); + + + it('should return a string from array of objects', () => { + service.printStyle = styleSheet; + + // Ensure the print styles are correctly formatted in the document + expect(service.returnStyleValues()).toEqual(''); + }); }); diff --git a/src/lib/ngx-print.service.ts b/src/lib/ngx-print.service.ts index 0f8caf0..ed613e2 100644 --- a/src/lib/ngx-print.service.ts +++ b/src/lib/ngx-print.service.ts @@ -2,13 +2,51 @@ import { Injectable } from "@angular/core"; import { PrintBase } from "./ngx-print.base"; import { PrintOptions } from "./print-options"; +/** + * Service for handling printing functionality in Angular applications. + * Extends the base printing class (PrintBase). + * + * @export + * @class NgxPrintService + * @extends {PrintBase} + */ @Injectable({ providedIn: "root", }) export class NgxPrintService extends PrintBase { + /** + * Initiates the printing process using the provided print options. + * + * @param {PrintOptions} printOptions - Options for configuring the printing process. + * @memberof NgxPrintService + * @returns {void} + */ public print(printOptions: PrintOptions): void { // Call the print method in the parent class super.print(printOptions); } + + /** + * Sets the print style for the printing process. + * + * @param {{ [key: string]: { [key: string]: string } }} values - A dictionary representing the print styles. + * @memberof NgxPrintService + * @setter + */ + set printStyle(values: { [key: string]: { [key: string]: string } }) { + super.setPrintStyle(values); + } + + + /** + * Sets the stylesheet file for the printing process. + * + * @param {string} cssList - A string representing the path to the stylesheet file. + * @memberof NgxPrintService + * @setter + */ + set styleSheetFile(cssList: string) { + super.setStyleSheetFile(cssList); + } } From c5eef5a7ae9cb51d588c8f79e5f35c1249f41138 Mon Sep 17 00:00:00 2001 From: Corey Franco <42871786+Core121@users.noreply.github.com> Date: Tue, 28 Nov 2023 10:47:25 -0500 Subject: [PATCH 08/12] Iterated version --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 956a5db..2aea8ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ngx-print", - "version": "1.3.1", + "version": "1.4.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "ngx-print", - "version": "1.3.1", + "version": "1.4.0", "license": "MIT", "dependencies": { "tslib": "^2.3.0" diff --git a/package.json b/package.json index ee2f5ad..697d17e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngx-print", - "version": "1.3.1", + "version": "1.4.0", "description": "Plug n' Play Angular (2++) directive to print your stuff", "author": "https://github.com/selemxmn/ngx-print/graphs/contributors", "repository": { From f7e9a37afbf91942bbd5dd5bed94946d99edec7b Mon Sep 17 00:00:00 2001 From: Corey Franco <42871786+Core121@users.noreply.github.com> Date: Tue, 28 Nov 2023 11:15:46 -0500 Subject: [PATCH 09/12] Updated README --- README.md | 44 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 4f62386..57486e2 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ This directive makes printing your HTML sections smooth and easy in your Angular | ------------ | ------------ | | 1.2.1 | 7.0.0 - 14.1.0 | | 1.3.x | 15.0.0 | +| 1.4.x | 17.0.0 | ## Setup **1-** In your root application folder run: @@ -185,9 +186,50 @@ Here some simple styles were added to every `h1` & `h2` tags within the `div` wh ngxPrint>print ``` +## Using NgxPrint as a service +Inject the NgxPrintService in the constructor of your component or service: + +```typescript +constructor(private printService: NgxPrintService) { } +``` + +### Printing a Section +```typescript +import { PrintOptions } from './path-to-your/print-options.model'; + +printMe() { + const customPrintOptions: PrintOptions = new PrintOptions({ + printSectionId: 'print-section', + // Add any other print options as needed + }); + this.printService.print(customPrintOptions) +} +``` + +### Print Options Object +The print options object allows you to specify how the print job should be handled. All of which have default values that you can optionally override, although printSectionId is required. It contains the following properties: +```typescript + printSectionId: string = null; + printTitle: string = null; + useExistingCss: boolean = false; + bodyClass: string = ''; + previewOnly: boolean = false; + closeWindow: boolean = true; + printDelay: number = 0; +``` + +### Setting PrintStyles or StyleSheets +```typescript +// Optional property for css as a key-value pair +this.printService.printStyle = styleSheet; + +// Optional property for a css file location +this.printService.styleSheetFile = fileLocation; +``` + ## Contributors :1st_place_medal: -Huge thanks to: [deeplotia](https://github.com/deeplotia) , [Ben L](https://github.com/broem) , [Gavyn McKenzie](https://github.com/gavmck) , [silenceway](https://github.com/silenceway), [Muhammad Ahsan Ayaz](https://github.com/AhsanAyaz) and to all `ngx-print` users +Huge thanks to: [deeplotia](https://github.com/deeplotia) , [Ben L](https://github.com/broem) , [Gavyn McKenzie](https://github.com/gavmck) , [silenceway](https://github.com/silenceway), [Muhammad Ahsan Ayaz](https://github.com/AhsanAyaz), [Core121](https://github.com/Core121) and to all `ngx-print` users ## Donation From 3e088ea4d5f109245d2c6050f530eb95d35deb8a Mon Sep 17 00:00:00 2001 From: Corey Franco <42871786+Core121@users.noreply.github.com> Date: Wed, 29 Nov 2023 09:15:40 -0500 Subject: [PATCH 10/12] Updated package version to leave room for ang 16 release --- README.md | 3 ++- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 57486e2..fa819c8 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,8 @@ This directive makes printing your HTML sections smooth and easy in your Angular | ------------ | ------------ | | 1.2.1 | 7.0.0 - 14.1.0 | | 1.3.x | 15.0.0 | -| 1.4.x | 17.0.0 | +| 1.4.x | 16.0.0 | +| 1.5.x | 17.0.0 | ## Setup **1-** In your root application folder run: diff --git a/package-lock.json b/package-lock.json index 2aea8ac..c770d3f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ngx-print", - "version": "1.4.0", + "version": "1.5.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "ngx-print", - "version": "1.4.0", + "version": "1.5.0", "license": "MIT", "dependencies": { "tslib": "^2.3.0" diff --git a/package.json b/package.json index 697d17e..eb89d9b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngx-print", - "version": "1.4.0", + "version": "1.5.0", "description": "Plug n' Play Angular (2++) directive to print your stuff", "author": "https://github.com/selemxmn/ngx-print/graphs/contributors", "repository": { From 90e5ebf7945d613bca87579aaea229e56cb50e4d Mon Sep 17 00:00:00 2001 From: Corey Franco <42871786+Core121@users.noreply.github.com> Date: Wed, 29 Nov 2023 09:28:36 -0500 Subject: [PATCH 11/12] Added ang v16 release version --- CHANGELOG.md | 7 +++++++ README.md | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e908ddb..21241e1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +# 1.5.0 (2023-11-29) +* Now supports Angular 17 +* Added printService + +# 1.4.0 (2023-11-29) +* Now supports Angular 16 + # 1.3.0 (2022-12-20) ### New features * Supports previewOnly tag, allowing for the print preview to show without the print dialog diff --git a/README.md b/README.md index fa819c8..7fc98a4 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ This directive makes printing your HTML sections smooth and easy in your Angular | 1.2.1 | 7.0.0 - 14.1.0 | | 1.3.x | 15.0.0 | | 1.4.x | 16.0.0 | -| 1.5.x | 17.0.0 | +| 1.5.x | 17.0.0 | ## Setup **1-** In your root application folder run: From 6268b5c5a55b42334c82a8f05db3a5fb720233b6 Mon Sep 17 00:00:00 2001 From: Corey Franco <42871786+Core121@users.noreply.github.com> Date: Thu, 30 Nov 2023 18:32:05 -0500 Subject: [PATCH 12/12] Included MarkAdams closeWindow fix in PrintBase --- src/lib/ngx-print.base.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/ngx-print.base.ts b/src/lib/ngx-print.base.ts index 4aa73aa..e6fba73 100644 --- a/src/lib/ngx-print.base.ts +++ b/src/lib/ngx-print.base.ts @@ -192,12 +192,12 @@ export class PrintBase {