import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core'; @Component({ selector: 'app-form', templateUrl: './form.component.html', styleUrls: ['./form.component.css'] }) export class FormComponent implements OnInit, OnChanges, OnDestroy { // 储存数据用 saveKey = "test_00111"; // 储存对象 item; sideByIndex = ['左上', '右上', '左下', '右下']; constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) { } createLine(groupIdx) { this.item.group[groupIdx].push({ word: '', img: '', audio: '', groups: [0], letterDataList: [] }); this.save(); } removeLine(groupIdx, lineIdx) { this.item.group[groupIdx].splice(lineIdx, 1); this.save(); } ngOnInit() { this.item = { title: '', titleAudio: '', titleLetter: '', titleLetterAudio: '', middleImg: '', middleImgAudio: '', totalAudio: '', group: [[], [], [], []], groupTitle: ['', '', '', ''], groupAudio: ['', '', '', ''], }; // 获取存储的数据 (<any>window).courseware.getData((data) => { if (data) { this.item = data; } this.init(); this.changeDetectorRef.markForCheck(); this.changeDetectorRef.detectChanges(); this.refresh(); }, this.saveKey); } ngOnChanges() { } ngOnDestroy() { } onTitleLetterAudioUploadSuccess(event) { this.item.titleLetterAudio = event.url; this.save(); } onTitleAudioUploadSuccess(event) { this.item.titleAudio = event.url; this.save(); } onTotalAudioUploadSuccess(event) { this.item.totalAudio = event.url; this.save(); } onMiddleAudioUploadSuccess(event) { this.item.middleImgAudio = event.url; this.save(); } init() { } onWordTyped(groupIdx, lineIdx) { const lineData = this.item.group[groupIdx][lineIdx]; if (lineData.word == lineData.letterDataList.map(data => data.letter).join('')) { return; } lineData.letterDataList = lineData.word.split('').map(letter => { return { letter: letter, color: '#696363', // 颜色 line: false, // 下划线 number: 0, // 下划线下方的数字 group: 0, // 分组 point: false // 重音符号 } }); this.save(); } onLetterClicked(groupIdx, lineIdx, letterIdx) { const data = this.item.group[groupIdx][lineIdx].letterDataList[letterIdx]; if (data.showOptions) { data.showOptions = false; } else { this.item.group.forEach(group => { group.forEach(line => { line.letterDataList.forEach(letterData => { letterData.showOptions = false; }); }); }); data.showOptions = true; } this.save(); } changeLetterBlack(groupIdx, lineIdx, letterIdx) { this.item.group[groupIdx][lineIdx].letterDataList[letterIdx].color = '#696363'; this.save(); } changeLetterRed(groupIdx, lineIdx, letterIdx) { this.item.group[groupIdx][lineIdx].letterDataList[letterIdx].color = '#c8161e'; this.save(); } changeLetterGrey(groupIdx, lineIdx, letterIdx) { this.item.group[groupIdx][lineIdx].letterDataList[letterIdx].color = '#b8aeae'; this.save(); } changeLetterLine(groupIdx, lineIdx, letterIdx) { const data = this.item.group[groupIdx][lineIdx].letterDataList[letterIdx]; data.line = !data.line; data.number = 0; this.save(); } changeLetterLineNumber(groupIdx, lineIdx, letterIdx, number) { const data = this.item.group[groupIdx][lineIdx].letterDataList[letterIdx]; data.line = true; data.number = number; this.save(); } changeLetterPoint(groupIdx, lineIdx, letterIdx) { const data = this.item.group[groupIdx][lineIdx].letterDataList[letterIdx]; data.point = !data.point; this.save(); } changeLetterGroup(groupIdx, lineIdx, letterIdx) { if (letterIdx == 0) { return; } const letterDataList = this.item.group[groupIdx][lineIdx].letterDataList; const data = letterDataList[letterIdx]; const dataBefore = letterDataList[letterIdx - 1]; let step = 1; if (dataBefore.group != data.group) { step = -1; } let maxGroup = 0; for (let i = letterIdx; i < letterDataList.length; i++) { letterDataList[i].group += step; maxGroup = Math.max(letterDataList[i].group, maxGroup) } this.item.group[groupIdx][lineIdx].groups = new Array(maxGroup + 1).fill('0'); this.save(); } /** * 储存图片数据 * @param e */ onImageUploadSuccess(e, key) { this.item[key] = e.url; this.save(); } onMiddleImageUploadSuccess(e) { this.item.middleImg = e.url; this.save(); } onWordImgUploadSuccess(e, groupIdx, lineIdx) { this.item.group[groupIdx][lineIdx].img = e.url; this.save(); } onGroupAudioUploadSuccess(e, groupIdx) { this.item.groupAudio[groupIdx] = e.url; this.save(); } onLineAudioUploadSuccess(e, groupIdx, lineIdx) { this.item.group[groupIdx][lineIdx].audio = e.url; this.save(); } /** * 储存音频数据 * @param e */ onAudioUploadSuccess(e, key) { this.item[key] = e.url; this.save(); } /** * 储存数据 */ save() { (<any>window).courseware.setData(this.item, null, this.saveKey); console.log(JSON.stringify(this.item)); this.refresh(); } /** * 刷新 渲染页面 */ refresh() { setTimeout(() => { this.appRef.tick(); }, 1); } }