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