log-file-reader.mjs 2.25 KB
Newer Older
zeynepCankara's avatar
zeynepCankara committed
1 2 3
// Copyright 2020 the V8 project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
4
import {DOM, V8CustomElement} from './helper.mjs';
zeynepCankara's avatar
zeynepCankara committed
5

6
DOM.defineCustomElement('view/log-file-reader',
7 8 9 10 11 12 13 14 15 16 17
                        (templateText) =>
                            class LogFileReader extends V8CustomElement {
  constructor() {
    super(templateText);
    this.addEventListener('click', e => this.handleClick(e));
    this.addEventListener('dragover', e => this.handleDragOver(e));
    this.addEventListener('drop', e => this.handleChange(e));
    this.$('#file').addEventListener('change', e => this.handleChange(e));
    this.$('#fileReader')
        .addEventListener('keydown', e => this.handleKeyEvent(e));
  }
zeynepCankara's avatar
zeynepCankara committed
18

19
  set error(message) {
20
    this._updateLabel(message);
21 22
    this.root.className = 'fail';
  }
23

24
  _updateLabel(text) {
25 26
    this.$('#label').innerText = text;
  }
zeynepCankara's avatar
zeynepCankara committed
27

28 29 30
  handleKeyEvent(event) {
    if (event.key == 'Enter') this.handleClick(event);
  }
zeynepCankara's avatar
zeynepCankara committed
31

32 33 34
  handleClick(event) {
    this.$('#file').click();
  }
zeynepCankara's avatar
zeynepCankara committed
35

36 37 38 39 40
  handleChange(event) {
    // Used for drop and file change.
    event.preventDefault();
    this.dispatchEvent(
        new CustomEvent('fileuploadstart', {bubbles: true, composed: true}));
41
    const host = event.dataTransfer ? event.dataTransfer : event.target;
42 43
    this.readFile(host.files[0]);
  }
zeynepCankara's avatar
zeynepCankara committed
44

45 46 47
  handleDragOver(event) {
    event.preventDefault();
  }
zeynepCankara's avatar
zeynepCankara committed
48

49 50 51
  connectedCallback() {
    this.fileReader.focus();
  }
52

53 54 55
  get fileReader() {
    return this.$('#fileReader');
  }
56

57 58 59
  get root() {
    return this.$('#root');
  }
60

61 62 63 64
  readFile(file) {
    if (!file) {
      this.error = 'Failed to load file.';
      return;
zeynepCankara's avatar
zeynepCankara committed
65
    }
66 67 68 69 70 71 72
    this.fileReader.blur();
    this.root.className = 'loading';
    const reader = new FileReader();
    reader.onload = (e) => this.handleFileLoad(e, file);
    // Delay the loading a bit to allow for CSS animations to happen.
    setTimeout(() => reader.readAsText(file), 0);
  }
73

74 75
  handleFileLoad(e, file) {
    const chunk = e.target.result;
76
    this._updateLabel(`Finished loading '${file.name}'.`);
77 78 79 80 81 82 83 84
    this.dispatchEvent(new CustomEvent('fileuploadend', {
      bubbles: true,
      composed: true,
      detail: chunk,
    }));
    this.root.className = 'done';
  }
});