diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f72c50f2f731bfba4826c922bd89b42c56e228da..4d258b9c3dd5b1979823b1027fc39a53b86c51a4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -89,6 +89,7 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { MarkdownModule } from 'ngx-markdown'; import { MarkdownToolbarComponent } from './components/fragments/markdown-toolbar/markdown-toolbar.component'; +import { MarkdownHelpDialogComponent } from './components/dialogs/markdown-help-dialog/markdown-help-dialog.component'; @NgModule({ declarations: [ @@ -127,7 +128,8 @@ import { MarkdownToolbarComponent } from './components/fragments/markdown-toolba AnswerEditComponent, ContentDeleteComponent, FeedbackBarometerPageComponent, - MarkdownToolbarComponent + MarkdownToolbarComponent, + MarkdownHelpDialogComponent ], entryComponents: [ RegisterComponent, @@ -140,7 +142,8 @@ import { MarkdownToolbarComponent } from './components/fragments/markdown-toolba ContentLikertCreatorComponent, ContentTextCreatorComponent, ContentYesNoCreatorComponent, - ContentDeleteComponent + ContentDeleteComponent, + MarkdownHelpDialogComponent ], imports: [ AppRoutingModule, diff --git a/src/app/components/dialogs/markdown-help-dialog/markdown-help-dialog.component.html b/src/app/components/dialogs/markdown-help-dialog/markdown-help-dialog.component.html new file mode 100644 index 0000000000000000000000000000000000000000..3d4b4ef0450226f73fe386eb000a75f8ac2cd40d --- /dev/null +++ b/src/app/components/dialogs/markdown-help-dialog/markdown-help-dialog.component.html @@ -0,0 +1,5 @@ +<p> + You can use <a href="https://guides.github.com/features/mastering-markdown/" title="Markdown GitHub" target="_blank"> + Markdown</a> to style your texts. The shown buttons offer shortcuts to insert commonly used tags. +</p> +<button mat-raised-button (click)="onNoClick();">Okay!</button> diff --git a/src/app/components/dialogs/markdown-help-dialog/markdown-help-dialog.component.scss b/src/app/components/dialogs/markdown-help-dialog/markdown-help-dialog.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/app/components/dialogs/markdown-help-dialog/markdown-help-dialog.component.spec.ts b/src/app/components/dialogs/markdown-help-dialog/markdown-help-dialog.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..0a17c707803ce32dd9b7594dd795e925522e9cb4 --- /dev/null +++ b/src/app/components/dialogs/markdown-help-dialog/markdown-help-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MarkdownHelpDialogComponent } from './markdown-help-dialog.component'; + +describe('MarkdownHelpDialogComponent', () => { + let component: MarkdownHelpDialogComponent; + let fixture: ComponentFixture<MarkdownHelpDialogComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MarkdownHelpDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MarkdownHelpDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/dialogs/markdown-help-dialog/markdown-help-dialog.component.ts b/src/app/components/dialogs/markdown-help-dialog/markdown-help-dialog.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..f2e2cc50e74da338dd2d75d8fc9b805cd905f57a --- /dev/null +++ b/src/app/components/dialogs/markdown-help-dialog/markdown-help-dialog.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; +import { GenericDataDialogComponent } from '../generic-data-dialog/generic-data-dialog.component'; +import { MatDialogRef } from '@angular/material'; + +@Component({ + selector: 'app-markdown-help-dialog', + templateUrl: './markdown-help-dialog.component.html', + styleUrls: ['./markdown-help-dialog.component.scss'] +}) +export class MarkdownHelpDialogComponent { + + constructor(public dialogRef: MatDialogRef<GenericDataDialogComponent>) { } + + onNoClick(): void { + this.dialogRef.close(); + } +} diff --git a/src/app/components/fragments/markdown-toolbar/markdown-toolbar.component.ts b/src/app/components/fragments/markdown-toolbar/markdown-toolbar.component.ts index 22755da4d05a339df84c79630ff1acb82d4a6ef0..316f6b778d11027087b9df04454617072226f37b 100644 --- a/src/app/components/fragments/markdown-toolbar/markdown-toolbar.component.ts +++ b/src/app/components/fragments/markdown-toolbar/markdown-toolbar.component.ts @@ -1,4 +1,6 @@ import { Component, Input } from '@angular/core'; +import { MarkdownHelpDialogComponent } from '../../dialogs/markdown-help-dialog/markdown-help-dialog.component'; +import { MatDialog } from '@angular/material'; @Component({ selector: 'app-markdown-toolbar', @@ -33,8 +35,11 @@ export class MarkdownToolbarComponent { new Button('code', 'Code', 'code', '`'), new Button('quote', 'Quote', 'format_quote', '> ', ''), new Button('image', 'Image', 'insert_photo', ''), + new Button('help', 'Help', 'help', '') ]; + constructor(public dialog: MatDialog) { } + /** * Gets called in template, run action when a button gets pressed * @param $event @@ -52,6 +57,19 @@ export class MarkdownToolbarComponent { return; } + // Handle different buttons here + switch (button.id) { + case 'help': + // Open help dialog and prevent default action + this.dialog.open(MarkdownHelpDialogComponent); + break; + default: + // Insert the text associated to the button + this.insertTag(button.textBefore, button.textAfter); + } + } + + private insertTag(before: string, after: string) { // Get the textarea's text selection positions (no selection when selectionStart == selectionEnd) const selectionStart = this.textarea.selectionStart; const selectionEnd = this.textarea.selectionEnd; @@ -59,12 +77,12 @@ export class MarkdownToolbarComponent { const text = this.textarea.value; // Insert the action's text at the cursor's position - this.textarea.value = [text.slice(0, selectionStart), button.textBefore, text.slice(selectionStart, selectionEnd), - button.textAfter, text.slice(selectionEnd)].join(''); + this.textarea.value = [text.slice(0, selectionStart), before, text.slice(selectionStart, selectionEnd), + after, text.slice(selectionEnd)].join(''); // Focus the textarea this.textarea.focus(); // Calculate the new cursor position (based on the action's text length and the previous cursor position) - const cursorPosition = selectionStart + button.textBefore.length; + const cursorPosition = selectionStart + before.length; // Set the cursor to the calculated position this.textarea.setSelectionRange(cursorPosition, cursorPosition); }