Mirrors/super-productivity
1
0
Fork 0
mirror of https://github.com/johannesjo/super-productivity.git synced 2026-07-25 08:53:50 +00:00
Code Issues Projects Releases Wiki Activity

refactor(notes): refactor inline markdown to use viewChild

Browse source
This commit is contained in:
Johannes Millan 2018-11-20 22:34:49 +01:00
parent 57055752ff
commit 859cd3484c
2 changed files with 25 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/app/ui/inline-markdown/inline-markdown.component.html
View file

@ -1,5 +1,7 @@
<div class="markdown-wrapper">
<div class="markdown-wrapper"
#wrapperEl>
<textarea *ngIf="isShowEdit"
#textareaEl
tabindex="1"
[@fade]
(focus)="setFocus($event)"
@ -9,6 +11,7 @@
rows="5"></textarea>
<div markdown
#previewEl
tabindex="1"
[data]="model"
[hidden]="isShowEdit"

39
src/app/ui/inline-markdown/inline-markdown.component.ts
View file

@ -1,5 +1,6 @@
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { fadeAnimation } from '../animations/fade.ani';
import { MarkdownComponent } from 'ngx-markdown';
@Component({
@ -15,10 +16,19 @@ export class InlineMarkdownComponent implements OnInit {
@Output() onChanged: EventEmitter<any> = new EventEmitter();
@Output() focus: EventEmitter<Event> = new EventEmitter();
@Output() blur: EventEmitter<Event> = new EventEmitter();
@ViewChild('wrapperEl') wrapperEl: ElementRef;
@ViewChild('textareaEl') textareaEl: ElementRef;
@ViewChild('previewEl') previewEl: MarkdownComponent;
isShowEdit = false;
modelCopy: string;
el: HTMLElement;
textareaEl: HTMLTextAreaElement;
@Input() set isFocus(val: boolean) {
if (!this.isShowEdit && val) {
this.toggleShowEdit();
}
}
constructor(el: ElementRef) {
this.el = el.nativeElement;
@ -50,11 +60,8 @@ export class InlineMarkdownComponent implements OnInit {
this.modelCopy = this.model || '';
setTimeout(() => {
const textareaEls = this.el.querySelectorAll('textarea');
this.textareaEl = textareaEls[0];
this.textareaEl.value = this.modelCopy;
this.textareaEl.focus();
this.textareaEl.nativeElement.value = this.modelCopy;
this.textareaEl.nativeElement.focus();
this.resizeTextareaToFit();
});
}
@ -66,7 +73,7 @@ export class InlineMarkdownComponent implements OnInit {
this.resizeParsedToFit();
this.isShowEdit = false;
}
this.modelCopy = this.textareaEl.value;
this.modelCopy = this.textareaEl.nativeElement.value;
if (this.modelCopy !== this.model) {
this.model = this.modelCopy;
@ -77,21 +84,17 @@ export class InlineMarkdownComponent implements OnInit {
resizeTextareaToFit() {
const wrapperEl: HTMLElement = this.el.querySelectorAll('div')[0];
this.textareaEl.style.height = 'auto';
this.textareaEl.style.height = this.textareaEl.scrollHeight + 'px';
wrapperEl.style.height = this.textareaEl.offsetHeight + 'px';
this.textareaEl.nativeElement.style.height = 'auto';
this.textareaEl.nativeElement.style.height = this.textareaEl.nativeElement.scrollHeight + 'px';
this.wrapperEl.nativeElement.style.height = this.textareaEl.nativeElement.offsetHeight + 'px';
}
resizeParsedToFit() {
setTimeout(() => {
const previewEl: any = this.el.querySelectorAll('.markdown-parsed')[0];
const wrapperEl: HTMLElement = this.el.querySelectorAll('div')[0];
previewEl.style.height = 'auto';
wrapperEl.style.height = previewEl.offsetHeight + 'px';
previewEl.style.height = '';
this.previewEl.element.nativeElement.style.height = 'auto';
this.wrapperEl.nativeElement.style.height = this.previewEl.element.nativeElement.offsetHeight + 'px';
this.previewEl.element.nativeElement.style.height = '';
});
}