xref: /plugin/diagrams/script/DiagramsForm.js (revision d9d1fb0df417152712586b30328761972ac2fb90) 
1class DiagramsForm extends KeyValueForm {
2  constructor(name = 'diagrams-form', fields = []) {
3    if (fields.length === 0) {
4      fields = [
5        {
6          label: LANG.plugins.diagrams.mediaSource, name: 'src'
7        },
8        {
9          type: 'select', 'label': LANG.plugins.diagrams.alignment, 'options':
10            [
11              {name: 'alignment', value: 'left', label: LANG.plugins.diagrams.left},
12              {name: 'alignment', value: 'right', label: LANG.plugins.diagrams.right},
13              {name: 'alignment', value: 'center', label: LANG.plugins.diagrams.center}
14            ]
15        }
16      ];
17    }
18
19    super(name, fields);
20
21    if (!this.instance) {
22      // media manager button
23      const selectButton = document.createElement('button');
24      selectButton.innerText = LANG.plugins.diagrams.selectSource;
25      selectButton.className = 'diagrams-btn-select';
26      selectButton.addEventListener('click', DiagramsForm.openMediaManager);
27      this.$form.find('fieldset').prepend(selectButton);
28      window.dMediaSelect = this.mediaSelect.bind(this);
29
30      // editor button
31      const editButton = document.createElement('button');
32      editButton.className = 'diagrams-btn-edit';
33      editButton.id = 'diagrams__btn-edit';
34      editButton.innerText = LANG.plugins.diagrams.editButton;
35      this.$form.find('fieldset').prepend(editButton);
36
37      editButton.addEventListener('click', event => {
38          event.preventDefault();
39          const diagramsEditor = new DiagramsEditor(async () => {
40              // relaod the image src for all images using it
41              // see https://stackoverflow.com/a/66312176
42              const url = editButton.getAttribute('data-url');
43              await fetch(url, {cache: 'reload', mode: 'no-cors'});
44              document.body.querySelectorAll(`img[src='${url}']`)
45                  .forEach(img => img.src = url)
46          });
47          diagramsEditor.editMediaFile(editButton.getAttribute('data-id'));
48      });
49    }
50
51    return this.instance;
52  }
53
54  setEditButtonUrl(id, url) {
55    const $editButton = jQuery(this.$form.find('#diagrams__btn-edit'));
56    // FIXME show/hide button depending on set url
57    $editButton.attr('data-id', id);
58    $editButton.attr('data-url', url);
59  }
60
61  setSource(id = '') {
62    this.$form.find('[name="src"]').val(id);
63  }
64
65  getSource() {
66    return this.$form.find('[name="src"]').val();
67  }
68
69  setAlignment(align = '') {
70    this.$form.find('[name="alignment"]').prop('selected', '');
71    this.$form.find(`[name="alignment"][value="${align}"]`).prop('selected', 'selected');
72  }
73
74  getAlignment() {
75    return this.$form.find('[name="alignment"]:checked').val();
76  }
77
78  resetForm() {
79    this.setSource();
80    this.setAlignment();
81  }
82
83  static resolveSubmittedLinkData(initialAttrs, $diagramsForm, callback) {
84    return (event) => {
85      event.preventDefault();
86      const newAttrs = { ...initialAttrs };
87      newAttrs.id = $diagramsForm.getSource();
88      // FIXME is this conditional?
89      newAttrs.data = `${DOKU_BASE}lib/exe/fetch.php?cache=nocache&media=` + $diagramsForm.getSource();
90      newAttrs.align = $diagramsForm.getAlignment();
91
92      callback(newAttrs);
93    };
94  }
95
96  static openMediaManager() {
97    window.open(
98      `${DOKU_BASE}lib/exe/mediamanager.php?ns=${encodeURIComponent(JSINFO.namespace)}&onselect=dMediaSelect`,
99      'mediaselect',
100      'width=750,height=500,left=20,top=20,scrollbars=yes,resizable=yes',
101    );
102  }
103
104  mediaSelect(edid, mediaid, opts, align) {
105    this.setSource(mediaid);
106  }
107}
108