From f5114f75460e122b2bd644c3a596acc6fff7354d Mon Sep 17 00:00:00 2001 From: "De Laet Robby (External)" Date: Fri, 31 Aug 2018 15:17:46 +0200 Subject: [PATCH] fix(stark-demo): hTML highlighting and 'Try it yourself' ISSUES CLOSED: #601 --- showcase/src/app/app.routes.ts | 4 +- showcase/src/app/demo/demo.module.ts | 6 +- .../demo-pretty-print.component.html | 57 +++++++++++++++++++ ....scss => demo-pretty-print.component.scss} | 5 ++ ...nent.ts => demo-pretty-print.component.ts} | 41 ++++++++----- showcase/src/app/demo/pretty-print/index.ts | 2 +- .../pretty-print/pretty-print.component.html | 22 ------- .../src/assets/examples/pretty-print/html.ts | 7 +-- .../src/assets/examples/pretty-print/xml.ts | 8 +-- showcase/src/assets/translations/en.json | 10 +++- showcase/src/assets/translations/fr.json | 10 +++- showcase/src/assets/translations/nl.json | 10 +++- 12 files changed, 123 insertions(+), 59 deletions(-) create mode 100644 showcase/src/app/demo/pretty-print/demo-pretty-print.component.html rename showcase/src/app/demo/pretty-print/{pretty-print.component.scss => demo-pretty-print.component.scss} (54%) rename showcase/src/app/demo/pretty-print/{pretty-print.component.ts => demo-pretty-print.component.ts} (75%) delete mode 100644 showcase/src/app/demo/pretty-print/pretty-print.component.html diff --git a/showcase/src/app/app.routes.ts b/showcase/src/app/app.routes.ts index 43049fc49b..1f0869842a 100644 --- a/showcase/src/app/app.routes.ts +++ b/showcase/src/app/app.routes.ts @@ -9,7 +9,7 @@ import { HeaderComponent, KeyboardDirectivesComponent, LogoutComponent, - PrettyPrintComponent, + DemoPrettyPrintComponent, SliderComponent, TableComponent } from "./demo"; @@ -30,7 +30,7 @@ export const APP_STATES: Ng2StateDeclaration[] = [ { name: "demo-example-viewer", url: "/demo/example-viewer", component: ExampleViewerComponent }, { name: "demo-keyboard-directives", url: "/demo/keyboard-directives", component: KeyboardDirectivesComponent }, { name: "demo-logout", url: "/demo/logout", component: LogoutComponent }, - { name: "demo-pretty-print", url: "/demo/pretty-print", component: PrettyPrintComponent }, + { name: "demo-pretty-print", url: "/demo/pretty-print", component: DemoPrettyPrintComponent }, { name: "demo-slider", url: "/demo/slider", component: SliderComponent }, { name: "demo-table", url: "/demo/table", component: TableComponent }, { name: "demo-dropdown", url: "/demo/dropdown", component: DropdownComponent }, diff --git a/showcase/src/app/demo/demo.module.ts b/showcase/src/app/demo/demo.module.ts index 387b1b30e0..6ee8c9ffc2 100644 --- a/showcase/src/app/demo/demo.module.ts +++ b/showcase/src/app/demo/demo.module.ts @@ -23,7 +23,7 @@ import { ExampleViewerComponent } from "./example-viewer/example-viewer.componen import { HeaderComponent } from "./header/header.component"; import { KeyboardDirectivesComponent } from "./keyboard-directives/keyboard-directives.component"; import { LogoutComponent } from "./logout/logout.component"; -import { PrettyPrintComponent } from "./pretty-print/pretty-print.component"; +import { DemoPrettyPrintComponent } from "./pretty-print/demo-pretty-print.component"; import { SliderComponent } from "./slider/slider.component"; import { TableComponent } from "./table/table.component"; import { SharedModule } from "../shared/shared.module"; @@ -81,7 +81,7 @@ import { MAT_DATE_FORMATS } from "@angular/material/core"; HeaderComponent, KeyboardDirectivesComponent, LogoutComponent, - PrettyPrintComponent, + DemoPrettyPrintComponent, SliderComponent, TableComponent ], @@ -96,7 +96,7 @@ import { MAT_DATE_FORMATS } from "@angular/material/core"; HeaderComponent, KeyboardDirectivesComponent, LogoutComponent, - PrettyPrintComponent, + DemoPrettyPrintComponent, SliderComponent, TableComponent ], diff --git a/showcase/src/app/demo/pretty-print/demo-pretty-print.component.html b/showcase/src/app/demo/pretty-print/demo-pretty-print.component.html new file mode 100644 index 0000000000..13b4e700f2 --- /dev/null +++ b/showcase/src/app/demo/pretty-print/demo-pretty-print.component.html @@ -0,0 +1,57 @@ + +

SHOWCASE.DEMO.PRETTY-PRINT.TRY_IT_YOURSELF

+
+
+ + + +
+
+ + + + {{ 'SHOWCASE.DEMO.PRETTY-PRINT.ENABLE_HIGHLIGHTING' | translate }} + +
+
+ + +
+
+ + + + + +
{{ fileType.rawData }}
+ + +
+ +
+ + + + + + diff --git a/showcase/src/app/demo/pretty-print/pretty-print.component.scss b/showcase/src/app/demo/pretty-print/demo-pretty-print.component.scss similarity index 54% rename from showcase/src/app/demo/pretty-print/pretty-print.component.scss rename to showcase/src/app/demo/pretty-print/demo-pretty-print.component.scss index 080e86af4d..e7bab72142 100644 --- a/showcase/src/app/demo/pretty-print/pretty-print.component.scss +++ b/showcase/src/app/demo/pretty-print/demo-pretty-print.component.scss @@ -1,3 +1,8 @@ +.pretty-print-input { + display: flex; + flex-direction: column; +} + .code-block { background-color: #e6e6e6; overflow-x: auto; diff --git a/showcase/src/app/demo/pretty-print/pretty-print.component.ts b/showcase/src/app/demo/pretty-print/demo-pretty-print.component.ts similarity index 75% rename from showcase/src/app/demo/pretty-print/pretty-print.component.ts rename to showcase/src/app/demo/pretty-print/demo-pretty-print.component.ts index f360dcd530..34a6fdaddc 100644 --- a/showcase/src/app/demo/pretty-print/pretty-print.component.ts +++ b/showcase/src/app/demo/pretty-print/demo-pretty-print.component.ts @@ -10,13 +10,18 @@ export interface FileType { } @Component({ - selector: "showcase-demo-pretty-print", - templateUrl: "./pretty-print.component.html", - styleUrls: ["./pretty-print.component.scss"] + selector: "demo-pretty-print", + templateUrl: "./demo-pretty-print.component.html", + styleUrls: ["./demo-pretty-print.component.scss"] }) -export class PrettyPrintComponent implements OnInit { +export class DemoPrettyPrintComponent implements OnInit { public fileTypes: FileType[] = []; + public dataFormats: StarkPrettyPrintFormat[] = []; + public selectedDataFormat: string; + public highlightingEnabled: boolean; + public unformattedData: string; + public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {} public ngOnInit(): void { @@ -28,6 +33,19 @@ export class PrettyPrintComponent implements OnInit { this.addJson(); this.addXml(); this.addSql(); + + this.unformattedData = ""; + this.selectedDataFormat = ""; + this.highlightingEnabled = false; + this.dataFormats = this.fileTypes.map((fileType: FileType) => fileType.format); + } + + public dataFormatDropdownOnChange(selectedValue: string): void { + this.selectedDataFormat = selectedValue; + } + + public toggleHighlightingEnabled(): void { + this.highlightingEnabled = !this.highlightingEnabled; } public trackFileTypes(_index: number, fileType: any): string { @@ -64,10 +82,9 @@ export class PrettyPrintComponent implements OnInit { format: "html", title: "SHOWCASE.DEMO.PRETTY-PRINT.HTML", path: "pretty-print/html", - rawData: [ - "

This is a heading

This is a paragraph.

" - ].join("") + rawData: `

This is a heading

+ This is a flashy paragraph.

` }; this.fileTypes.push(fileType); } @@ -128,11 +145,9 @@ export class PrettyPrintComponent implements OnInit { format: "xml", title: "SHOWCASE.DEMO.PRETTY-PRINT.XML", path: "pretty-print/xml", - rawData: [ - '', - '', - '' - ].join("") + rawData: ` + + ` }; this.fileTypes.push(fileType); } diff --git a/showcase/src/app/demo/pretty-print/index.ts b/showcase/src/app/demo/pretty-print/index.ts index adbfb99261..46fa1fa181 100644 --- a/showcase/src/app/demo/pretty-print/index.ts +++ b/showcase/src/app/demo/pretty-print/index.ts @@ -1 +1 @@ -export * from "./pretty-print.component"; +export * from "./demo-pretty-print.component"; diff --git a/showcase/src/app/demo/pretty-print/pretty-print.component.html b/showcase/src/app/demo/pretty-print/pretty-print.component.html deleted file mode 100644 index 1ce39d8937..0000000000 --- a/showcase/src/app/demo/pretty-print/pretty-print.component.html +++ /dev/null @@ -1,22 +0,0 @@ - - - -
{{ fileType.rawData }}
- - -
- -
- - - - - - diff --git a/showcase/src/assets/examples/pretty-print/html.ts b/showcase/src/assets/examples/pretty-print/html.ts index 011b3077fa..3c70db4b1d 100644 --- a/showcase/src/assets/examples/pretty-print/html.ts +++ b/showcase/src/assets/examples/pretty-print/html.ts @@ -9,9 +9,8 @@ export class PrettyPrintComponent implements OnInit { public rawHtmlData: string; public ngOnInit(): void { - this.rawHtmlData = [ - "

This is a heading

This is a paragraph.

" - ].join(""); + this.rawHtmlData = `

This is a heading

+ This is a flashy paragraph.

`; } } diff --git a/showcase/src/assets/examples/pretty-print/xml.ts b/showcase/src/assets/examples/pretty-print/xml.ts index d509d68871..9bf68ead3b 100644 --- a/showcase/src/assets/examples/pretty-print/xml.ts +++ b/showcase/src/assets/examples/pretty-print/xml.ts @@ -9,10 +9,8 @@ export class PrettyPrintComponent implements OnInit { public rawXmlData: string; public ngOnInit(): void { - this.rawXmlData = [ - '', - '', - '' - ].join(""); + this.rawXmlData = ` + + `; } } diff --git a/showcase/src/assets/translations/en.json b/showcase/src/assets/translations/en.json index 79010e6886..41710a822f 100644 --- a/showcase/src/assets/translations/en.json +++ b/showcase/src/assets/translations/en.json @@ -80,15 +80,19 @@ "LOGOUT_CUSTOM_ICON": "Logout button - Custom icon" }, "PRETTY-PRINT": { - "ORIGINAL_CODE": "Original Code", - "PRETTY_PRINTED": "Formatted", - "PRETTY_PRINTED_WITH_HIGHLIGHTING": "Formatted with highlighting", "CSS": "Pretty-Print CSS", + "ENABLE_HIGHLIGHTING": "Enable highlighting", + "ENTER_DATA": "Type or copy/paste unformatted code", "HTML": "Pretty-Print HTML", "JAVASCRIPT": "Pretty-Print Javascript", "JSON": "Pretty-Print JSON", + "ORIGINAL_CODE": "Original Code", + "PRETTY_PRINTED": "Formatted", + "PRETTY_PRINTED_WITH_HIGHLIGHTING": "Formatted with highlighting", "SCSS": "Pretty-Print SCSS", + "SELECT_DATAFORMAT": "Select a format", "SQL": "Pretty-Print SQL", + "TRY_IT_YOURSELF": "Try it yourself", "TYPESCRIPT": "Pretty-Print Typescript", "XML": "Pretty-Print XML" }, diff --git a/showcase/src/assets/translations/fr.json b/showcase/src/assets/translations/fr.json index 926b53cc25..5ceac8fbc5 100644 --- a/showcase/src/assets/translations/fr.json +++ b/showcase/src/assets/translations/fr.json @@ -80,15 +80,19 @@ } }, "PRETTY-PRINT": { - "ORIGINAL_CODE": "Code original", - "PRETTY_PRINTED": "Formaté", - "PRETTY_PRINTED_WITH_HIGHLIGHTING": "Formaté avec surbrillance", "CSS": "Pretty-Print CSS", + "ENABLE_HIGHLIGHTING": "Mettre en surbrillance", + "ENTER_DATA": "Tapez ou copiez/collez du code non formaté", "HTML": "Pretty-Print HTML", "JAVASCRIPT": "Pretty-Print Javascript", "JSON": "Pretty-Print JSON", + "ORIGINAL_CODE": "Code original", + "PRETTY_PRINTED": "Formaté", + "PRETTY_PRINTED_WITH_HIGHLIGHTING": "Formaté avec surbrillance", "SCSS": "Pretty-Print SCSS", + "SELECT_DATAFORMAT": "Sélectionner un format", "SQL": "Pretty-Print SQL", + "TRY_IT_YOURSELF": "Essayez vous-même", "TYPESCRIPT": "Pretty-Print Typescript", "XML": "Pretty-Print XML" }, diff --git a/showcase/src/assets/translations/nl.json b/showcase/src/assets/translations/nl.json index 1b66c5a9b6..a545845f2b 100644 --- a/showcase/src/assets/translations/nl.json +++ b/showcase/src/assets/translations/nl.json @@ -80,15 +80,19 @@ "LOGOUT_CUSTOM_ICON": "Logout-knop - Aangepast pictogram" }, "PRETTY-PRINT": { - "ORIGINAL_CODE": "Originele Code", - "PRETTY_PRINTED": "Geformatteerd", - "PRETTY_PRINTED_WITH_HIGHLIGHTING": "Geformatteerd en gehighlight", "CSS": "Pretty-Print CSS", + "ENABLE_HIGHLIGHTING": "Highlighting activeren", + "ENTER_DATA": "Typ of kopieer/plak ongeformatteerde code", "HTML": "Pretty-Print HTML", "JAVASCRIPT": "Pretty-Print Javascript", "JSON": "Pretty-Print JSON", + "ORIGINAL_CODE": "Originele Code", + "PRETTY_PRINTED": "Geformatteerd", + "PRETTY_PRINTED_WITH_HIGHLIGHTING": "Geformatteerd en gehighlight", "SCSS": "Pretty-Print SCSS", + "SELECT_DATAFORMAT": "Selecteer een formaat", "SQL": "Pretty-Print SQL", + "TRY_IT_YOURSELF": "Probeer het zelf", "TYPESCRIPT": "Pretty-Print Typescript", "XML": "Pretty-Print XML" },