form.component.ts 4.74 KB
Newer Older
1 2 3
import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import { getDefaultLetter, getDefaultSentence } from '../bean/SentenceBean';
import { getDefaultTile } from '../bean/TitleBean';
limingzhe's avatar
limingzhe committed
4 5


liujiangnan's avatar
liujiangnan committed
6 7 8 9

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
liujiaxin's avatar
liujiaxin committed
10
  styleUrls: ['./form.component.css']
liujiangnan's avatar
liujiangnan committed
11 12 13
})
export class FormComponent implements OnInit, OnChanges, OnDestroy {

limingzhe's avatar
limingzhe committed
14
  // 储存数据用
15
  saveKey = "YM5-17";
limingzhe's avatar
limingzhe committed
16 17
  // 储存对象
  item;
limingzhe's avatar
limingzhe committed
18

19
  indexPanelVisible = false;
limingzhe's avatar
limingzhe committed
20

21 22 23 24 25 26 27
  curSentence;

  renderTo = "";

  hotZoneItemArr = [];

  constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
limingzhe's avatar
limingzhe committed
28 29 30 31

  }


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

limingzhe's avatar
limingzhe committed
34 35
    this.item = {};

36 37 38 39 40 41 42 43
    this.item.title = getDefaultTile();

    this.item.hotZoneItemArr = [];

    this.item.sentenceArr = [];

    this.curSentence = {};

limingzhe's avatar
limingzhe committed
44
    // 获取存储的数据
45
    (<any>window).courseware.getData((data) => {
limingzhe's avatar
limingzhe committed
46 47 48 49

      if (data) {
        this.item = data;
      }
50
      console.log('data:' , data);
limingzhe's avatar
limingzhe committed
51
      this.init();
liujiangnan's avatar
liujiangnan committed
52 53
      this.changeDetectorRef.markForCheck();
      this.changeDetectorRef.detectChanges();
limingzhe's avatar
limingzhe committed
54 55
      this.refresh();

limingzhe's avatar
limingzhe committed
56
    }, this.saveKey);
limingzhe's avatar
limingzhe committed
57 58 59 60

  }


limingzhe's avatar
limingzhe committed
61
  ngOnChanges() {
limingzhe's avatar
limingzhe committed
62 63
  }

limingzhe's avatar
limingzhe committed
64
  ngOnDestroy() {
limingzhe's avatar
limingzhe committed
65 66 67 68
  }



limingzhe's avatar
limingzhe committed
69
  init() {
70 71 72 73 74 75 76 77 78 79 80
    if (!this.item.title) {
      this.item.title = getDefaultTile();
    }

    if (!this.item.hotZoneItemArr) {
      this.item.hotZoneItemArr = [];
    }

    if (!this.item.sentenceArr) {
      this.item.sentenceArr = [];
    }
limingzhe's avatar
limingzhe committed
81

liujiangnan's avatar
liujiangnan committed
82 83
  }

limingzhe's avatar
limingzhe committed
84

limingzhe's avatar
limingzhe committed
85 86 87 88
  /**
   * 储存图片数据
   * @param e
   */
89
  onImageUploadSuccess(e, item, key) {
limingzhe's avatar
limingzhe committed
90

91 92
    item[key] = e.url;
    this.save();
liujiangnan's avatar
liujiangnan committed
93 94
  }

limingzhe's avatar
limingzhe committed
95 96 97 98
  /**
   * 储存音频数据
   * @param e
   */
99
  onAudioUploadSuccess(e, item, key) {
limingzhe's avatar
limingzhe committed
100

101
    item[key] = e.url;
limingzhe's avatar
limingzhe committed
102 103 104 105
    this.save();
  }


106 107 108 109 110 111 112 113
  saveData(e, item) {

    const { bgItem, hotZoneItemArr } = e;

    item.bgItem = bgItem;

    item.hotZoneItemArr = hotZoneItemArr;

114 115 116 117 118 119 120 121 122 123 124 125 126 127 128
    let sentenceArr = item.sentenceArr;

    let tempArr = [];

    for(let i = 0; i < hotZoneItemArr.length; ++ i){

      let hotZoneItem = hotZoneItemArr[i];

      let sentence = this.find(hotZoneItem.key, sentenceArr);

      tempArr.push(sentence);
    }

    item.sentenceArr = [...tempArr];

129 130 131
    this.save();
  }

132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151
  private find(key, sentenceArr){

    let sentence;

    for(let i = 0; i < sentenceArr.length; ++ i){
      if(key === sentenceArr[i].renderTo){
        
        sentence = sentenceArr[i];
        break;
      }
    }

    if(!sentence){
      sentence = getDefaultSentence();
      sentence.renderTo = key;
    }

    return sentence;
  }

152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167
  addSentence(item) {
    let sentence = getDefaultSentence();

    item.sentenceArr.push(sentence);

    this.save();
  }

  delSentence(item, index) {
    if (index !== -1) {
      item.sentenceArr.splice(index, 1);

      item.sentenceArr = [...item.sentenceArr];
      this.save();
    }
  }
limingzhe's avatar
limingzhe committed
168

limingzhe's avatar
limingzhe committed
169 170 171
  /**
   * 储存数据
   */
limingzhe's avatar
limingzhe committed
172
  save() {
173
    (<any>window).courseware.setData(this.item, null, this.saveKey);
limingzhe's avatar
limingzhe committed
174 175 176
    this.refresh();
  }

limingzhe's avatar
limingzhe committed
177 178 179
  /**
   * 刷新 渲染页面
   */
limingzhe's avatar
limingzhe committed
180 181 182 183
  refresh() {
    setTimeout(() => {
      this.appRef.tick();
    }, 1);
liujiangnan's avatar
liujiangnan committed
184 185
  }

186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281
  saveContent(item) {

    let val = "";

    if(!item.letterArr){
      item.letterArr = [];
    }

    for (let i = 0; i < item.letterArr.length; ++i) {
      val += item.letterArr[i].val;
    }
   
    //值发生改变,则重新处理数据
    if (item.val != val) {
      item.letterArr = [];

      for (let i = 0; i < item.val.length; ++i) {
        let letter = getDefaultLetter();
        letter.val = item.val.charAt(i);
        item.letterArr.push(letter);
      }

    }

    this.save();
  }

  resetSentence(item){
    item.renderTo = "";
    this.save();
  }

  clickLetter(letter, i) {

    if(letter.fontColor == "#000000"){
      letter.fontColor = "#c8171e";
    }
    else{
      letter.fontColor = "#000000";
    }
   
    this.save();
  }

  setIndexBtnClick(item) {

    this.curSentence = item;   

    this.renderTo = item.renderTo;

    this.indexPanelVisible = true;

    this.hotZoneItemArr = [];

    for(let i = 0; i < this.item.hotZoneItemArr.length; ++ i){

      let hotZoneItem = this.item.hotZoneItemArr[i];

      if(item.renderTo == hotZoneItem.key){
        this.hotZoneItemArr.push(hotZoneItem);
        continue;
      }

      let exist = false;

      for(let j = 0; j < this.item.sentenceArr.length; ++ j){

        let sentence = this.item.sentenceArr[j];

        if(sentence.renderTo == hotZoneItem.key){
          exist = true;
          break;
        }
      }

      if(!exist){
        this.hotZoneItemArr.push(hotZoneItem);
      }
    }
    
    this.refresh();
  }

  indexPanelCancel() {
    this.indexPanelVisible = false;

  }

  indexPanelOk() {

    this.indexPanelVisible = false;

    this.curSentence.renderTo = this.renderTo;

    this.save();
  }
liujiangnan's avatar
liujiangnan committed
282
}
limingzhe's avatar
limingzhe committed
283