flarum-ext-server-side-highlight/js/admin.js at c92a851d75231f2d333aa0f116175970cd7c393f · club-1/flarum-ext-server-side-highlight · GitHub

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
let hljsStyle;
let themes;

app.initializers.add('server-side-highlight', function(app) {
  themes = JSON.parse(app.data.settings['club-1-server-side-highlight.available_themes']);
  app.extensionData
    .for('club-1-server-side-highlight')
    .registerSetting(function () {
      return [
        m('div.Form-group', [
          m('label', app.translator.trans('club-1-server-side-highlight.admin.download_theme')),
          m('span.Select', {
            onchange: e => hljsStyle = e.target.value,
            value: hljsStyle,
          }, [
            m('select.Select-input.FormControl', [
              m('option', {disabled: true, selected: !hljsStyle}, app.translator.trans('club-1-server-side-highlight.admin.choose_theme')),
              hljsStyles.map(x => m('option', x)),
            ]),
            m('i.icon.fas.fa-sort.Select-caret'),
          ]),
        ]),
        m('button.Button.Button--primary', {
          onclick: () => download.bind(this)(hljsStyle),
          disabled: !hljsStyle,
        }, app.translator.trans('club-1-server-side-highlight.admin.download')),
        m('hr')
      ];
    })
    .registerSetting({
      setting: 'club-1-server-side-highlight.light_theme_bg_color',
      label: app.translator.trans('club-1-server-side-highlight.admin.light_theme_bg_color'),
      type: 'color-preview',
    })
    .registerSetting({
      setting: 'club-1-server-side-highlight.light_theme_text_color',
      label: app.translator.trans('club-1-server-side-highlight.admin.light_theme_text_color'),
      type: 'color-preview',
    })
    .registerSetting({
      setting: 'club-1-server-side-highlight.light_theme_highlight_theme',
      label: app.translator.trans('club-1-server-side-highlight.admin.light_theme_highlight_theme'),
      type: 'select',
      options: themes,
    })
    .registerSetting(function () {
      return preview.bind(this)('light');
    })
    .registerSetting({
      setting: 'club-1-server-side-highlight.dark_theme_bg_color',
      label: app.translator.trans('club-1-server-side-highlight.admin.dark_theme_bg_color'),
      type: 'color-preview',
    })
    .registerSetting({
      setting: 'club-1-server-side-highlight.dark_theme_text_color',
      label: app.translator.trans('club-1-server-side-highlight.admin.dark_theme_text_color'),
      type: 'color-preview',
    })
    .registerSetting({
      setting: 'club-1-server-side-highlight.dark_theme_highlight_theme',
      label: app.translator.trans('club-1-server-side-highlight.admin.dark_theme_highlight_theme'),
      type: 'select',
      options: themes,
    })
    .registerSetting(function () {
      return preview.bind(this)('dark');
    });
});

function preview(mode) {
  let bg = encodeURIComponent(this.setting(`club-1-server-side-highlight.${mode}_theme_bg_color`)());
  let text = encodeURIComponent(this.setting(`club-1-server-side-highlight.${mode}_theme_text_color`)());
  let theme = encodeURIComponent(this.setting(`club-1-server-side-highlight.${mode}_theme_highlight_theme`)());
  return m('div.Form-group', m('iframe.highlight-preview', {
    src: app.forum.attribute('baseUrl') + `/api/highlight-preview?bg=${bg}&text=${text}&theme=${theme}`,
  }));
}

function download(style) {
  hljsStyle = null;
  app.request({
    method: 'GET',
    url: '/api/highlight-download',
    params: {name: style},
    errorHandler,
  })
    .then(res => {
      for (const [key, value] of Object.entries(res)) {
        themes[key] = value;
      }
      app.alerts.show({type: 'success'}, app.translator.trans('club-1-server-side-highlight.admin.download_success'));
      m.redraw();
    })
}

function errorHandler(err) {
  let msgs = err.response.errors.filter(e => e.message).map(e => e.message);
  if (msgs.length == 0) {
    app.alerts.show({type: err.alert.type}, err.alert.content);
  } else {
    msgs.forEach(m => app.alerts.show({type: 'error'}, m));
  }
}


 module.exports = {}