form.component.ts 3.23 KB
Newer Older
liujiangnan's avatar
liujiangnan committed
1
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core';
liujiangnan's avatar
liujiangnan committed
2
import * as _ from 'lodash';
limingzhe's avatar
limingzhe committed
3

liujiangnan's avatar
liujiangnan committed
4 5 6 7

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
liujiangnan's avatar
liujiangnan committed
8
  styleUrls: ['./form.component.scss']
liujiangnan's avatar
liujiangnan committed
9 10
})
export class FormComponent implements OnInit, OnChanges, OnDestroy {
liujiangnan's avatar
liujiangnan committed
11
  
limingzhe's avatar
limingzhe committed
12
  // 储存数据用
liujiangnan's avatar
liujiangnan committed
13
  saveKey = 'spelling';
limingzhe's avatar
limingzhe committed
14 15
  // 储存对象
  item;
limingzhe's avatar
limingzhe committed
16

liujiangnan's avatar
liujiangnan committed
17 18 19 20 21 22
  originContent;
  defaultBoxes = new Array(15);
  words = [];
  bol: number;
  inputs: any;
  wordnum = [];
limingzhe's avatar
limingzhe committed
23 24


liujiangnan's avatar
liujiangnan committed
25 26 27 28
  constructor(private appRef: ApplicationRef,
              private changeDetectorRef: ChangeDetectorRef) {
    this.bol = 0;
    this.inputs = document.getElementsByName('Input');
limingzhe's avatar
limingzhe committed
29 30 31
  }


liujiangnan's avatar
liujiangnan committed
32 33
  ngOnInit() {

liujiangnan's avatar
liujiangnan committed
34 35 36 37
    this.item = {
      contentObj: {
      }
    };
limingzhe's avatar
limingzhe committed
38

limingzhe's avatar
limingzhe committed
39
    // 获取存储的数据
liujiangnan's avatar
liujiangnan committed
40
    (window as any).courseware.getData((data) => {
limingzhe's avatar
limingzhe committed
41 42 43 44 45
      if (data) {
        this.item = data;
      }

      this.init();
liujiangnan's avatar
liujiangnan committed
46 47
      this.changeDetectorRef.markForCheck();
      this.changeDetectorRef.detectChanges();
limingzhe's avatar
limingzhe committed
48 49
      this.refresh();

limingzhe's avatar
limingzhe committed
50
    }, this.saveKey);
limingzhe's avatar
limingzhe committed
51 52 53 54

  }


limingzhe's avatar
limingzhe committed
55
  ngOnChanges() {
limingzhe's avatar
limingzhe committed
56 57
  }

limingzhe's avatar
limingzhe committed
58
  ngOnDestroy() {
limingzhe's avatar
limingzhe committed
59 60 61 62
  }



limingzhe's avatar
limingzhe committed
63
  init() {
liujiangnan's avatar
liujiangnan committed
64 65 66 67 68 69 70
    if (!this.item.contentObj.wordnum) {
      this.item.contentObj.wordnum = [];
      this.AddWord();
    }
  }
  updateVocabulary() {
    this.save();
liujiangnan's avatar
liujiangnan committed
71 72
  }

liujiangnan's avatar
liujiangnan committed
73 74 75 76
  onVocabularyAudioUploadSuccess(e, num) {
    this.item.contentObj.wordnum[num].spelling_audio = e.url;
    this.updateVocabulary();
  }
limingzhe's avatar
limingzhe committed
77

liujiangnan's avatar
liujiangnan committed
78 79 80
  onImageUploadSuccess(e, num) {
    this.item.contentObj.wordnum[num].pic_id = e.url;
    this.updateVocabulary();
liujiangnan's avatar
liujiangnan committed
81 82
  }

liujiangnan's avatar
liujiangnan committed
83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112
  keyup(event, value, num) {
    const word = _.get(this.item, `contentObj.wordnum[${num}]`);
    if (event.keyCode === 13) {
      this.updateVocabulary();
    } else {
      for (let i = 0; i < this.inputs.length; i++) {
        if (event.path[0] === this.inputs[i]) {
          if (value !== '' && event.keyCode <= 90 && event.keyCode >= 65) {
            if (i === this.inputs.length - 1) {
            } else {
              this.inputs[i + 1].focus();
            }
          } else {
            if (event.key === 'Backspace') {
              if (i === 0) {
              } else {
                if (this.bol !== 1) {
                  this.bol++;
                } else {
                  word.words[i].selected = false;
                  this.bol = 0;
                  this.inputs[i - 1].focus();
                }
              }
            }
          }
        }
      }
    }
  }
limingzhe's avatar
limingzhe committed
113

liujiangnan's avatar
liujiangnan committed
114 115 116 117 118 119
  select(i, num) {
    const word = _.get(this.item, `contentObj.wordnum[${num}].words[${i}]`);
    if (word.value !== '') {
      word.selected = !word.selected;
      this.updateVocabulary();
    }
limingzhe's avatar
limingzhe committed
120 121
  }

liujiangnan's avatar
liujiangnan committed
122 123 124 125 126 127 128 129 130 131 132 133 134 135
  AddWord() {
    this.words = [];
    for (let i = 0; i < 15; i++) {
      this.words.push({
        value: '',
        selected: false
      });
    }
    this.item.contentObj.wordnum.push({
      words: this.words,
      spelling_audio: '',
      pic_id: ''
    });
  }
limingzhe's avatar
limingzhe committed
136

liujiangnan's avatar
liujiangnan committed
137 138 139 140
  DeletWord(num) {
    this.item.contentObj.wordnum.splice(num, 1);
    this.updateVocabulary();
  }
limingzhe's avatar
limingzhe committed
141

liujiangnan's avatar
liujiangnan committed
142
  
limingzhe's avatar
limingzhe committed
143 144 145
  /**
   * 储存数据
   */
limingzhe's avatar
limingzhe committed
146
  save() {
limingzhe's avatar
limingzhe committed
147
    (<any> window).courseware.setData(this.item, null, this.saveKey);
limingzhe's avatar
limingzhe committed
148 149 150
    this.refresh();
  }

limingzhe's avatar
limingzhe committed
151 152 153
  /**
   * 刷新 渲染页面
   */
limingzhe's avatar
limingzhe committed
154 155 156 157
  refresh() {
    setTimeout(() => {
      this.appRef.tick();
    }, 1);
liujiangnan's avatar
liujiangnan committed
158 159 160
  }

}
limingzhe's avatar
limingzhe committed
161