xref: /plugin/diagrams/script/DiagramsForm.js (revision c99a58385afec17cf933874171da67a6ee839258) 
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
23      const selectButton = jQuery('<button>', {
24        type: 'button',
25      });
26      selectButton.text(LANG.plugins.diagrams.selectSource);
27      selectButton.on('click', DiagramsForm.openMediaManager);
28      this.$form.find('fieldset').prepend(selectButton);
29      window.dMediaSelect = this.mediaSelect.bind(this);
30    }
31
32    return this.instance;
33  }
34
35  setSource(id = '') {
36    this.$form.find('[name="src"]').val(id);
37  }
38
39  getSource() {
40    return this.$form.find('[name="src"]').val();
41  }
42
43  setAlignment(align = '') {
44    this.$form.find('[name="alignment"]').prop('selected', '');
45    this.$form.find(`[name="alignment"][value="${align}"]`).prop('selected', 'selected');
46  }
47
48  getAlignment() {
49    return this.$form.find('[name="alignment"]:checked').val();
50  }
51
52  resetForm() {
53    this.setSource();
54    this.setAlignment();
55  }
56
57  static resolveSubmittedLinkData(initialAttrs, $diagramsForm, callback) {
58    return (event) => {
59      event.preventDefault();
60      const newAttrs = { ...initialAttrs };
61      newAttrs.id = $diagramsForm.getSource();
62      // FIXME is this conditional?
63      newAttrs.data = `${DOKU_BASE}lib/exe/fetch.php?cache=nocache&media=` + $diagramsForm.getSource();
64      newAttrs.align = $diagramsForm.getAlignment();
65
66      this.resolveImageAttributes(newAttrs, callback);
67    };
68  }
69
70  static resolveImageAttributes(newAttrs, callback) {
71    const ajaxEndpoint = `${DOKU_BASE}lib/exe/ajax.php`;
72    const ajaxParams = {
73      call: 'plugin_prosemirror',
74      actions: ['resolveMedia'],
75      attrs: newAttrs,
76      id: JSINFO.id,
77    };
78
79    jQuery.get(
80      ajaxEndpoint,
81      ajaxParams,
82    ).done((data) => {
83      const resolvedAttrs = {
84        ...newAttrs,
85        'data-resolvedHtml': data.resolveMedia['data-resolvedHtml'],
86      };
87      callback(resolvedAttrs);
88    }).fail((jqXHR, textStatus, errorThrown) => {
89      let errorMsg = `There was an error resolving this image -- ${errorThrown}: ${textStatus}.`;
90      if (window.SentryPlugin) {
91        window.SentryPlugin.logSentryException(new Error('Ajax Request failed'), {
92          tags: {
93            plugin: 'prosemirror',
94            id: JSINFO.id,
95          },
96          extra: {
97            ajaxEndpoint,
98            ajaxParams,
99            textStatus,
100            errorThrown,
101          },
102        });
103        errorMsg += ' The error has been logged to Sentry.';
104      }
105      errorMsg += ' You may want to continue your work in the syntax editor.';
106      jQuery('#draft__status').after(jQuery('<div class="error"></div>').text(errorMsg));
107    });
108  }
109
110  static openMediaManager() {
111    window.open(
112      `${DOKU_BASE}lib/exe/mediamanager.php?ns=${encodeURIComponent(JSINFO.namespace)}&onselect=dMediaSelect`,
113      'mediaselect',
114      'width=750,height=500,left=20,top=20,scrollbars=yes,resizable=yes',
115    );
116  }
117
118  mediaSelect(edid, mediaid, opts, align) {
119    this.setSource(mediaid);
120  }
121}
122