1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
function captureApp() {
  return {
    state: 'capture',
    preview: null,
    dragging: false,
    activeRef: null,
    assetNames: [''],
    menuOpen: false,

    // The primary capture action defaults to uploading a file on desktop
    // and taking a photo on mobile; the dropdown exposes the other one.
    get onMobile() { return window.matchMedia('(max-width: 560px)').matches; },
    capturePrimary() { (this.onMobile ? this.$refs.cameraInput : this.$refs.fileInput).click(); },
    captureAlternate() {
      this.menuOpen = false;
      (this.onMobile ? this.$refs.fileInput : this.$refs.cameraInput).click();
    },

    handleFile(file, ref) {
      if (!file) return;
      this.activeRef = ref;
      this.preview = file.type.startsWith('image/') ? URL.createObjectURL(file) : null;
      this.state = 'saved';
    },

    onCameraInput(e) { this.handleFile(e.target.files[0], 'cameraInput'); },
    onFileInput(e)   { this.handleFile(e.target.files[0], 'fileInput'); },

    onDrop(e) {
      this.dragging = false;
      const file = e.dataTransfer?.files[0];
      if (file) {
        this.$refs.fileInput.files = e.dataTransfer.files;
        this.handleFile(file, 'fileInput');
      }
    },

    addAsset() {
      this.assetNames.push('');
      this.$nextTick(() => {
        const inputs = document.querySelectorAll('input[name="asset_names[]"]');
        inputs[inputs.length - 1]?.focus();
      });
    },

    removeAsset(i) {
      if (this.assetNames.length === 1) {
        this.assetNames[0] = '';
      } else {
        this.assetNames.splice(i, 1);
      }
    },

    onSubmit() {
      const inactive = this.activeRef === 'cameraInput' ? this.$refs.fileInput : this.$refs.cameraInput;
      inactive.disabled = true;
    },

    reset() {
      if (this.preview) URL.revokeObjectURL(this.preview);
      this.state = 'capture';
      this.preview = null;
      this.activeRef = null;
      this.assetNames = [];
      this.$refs.fileInput.disabled = false;
      this.$refs.cameraInput.disabled = false;
      this.$refs.fileInput.value = '';
      this.$refs.cameraInput.value = '';
    }
  }
}