]> glassweightruler.freedombox.rocks Git - Ventoy.git/blob - Plugson/www/plugson_theme.html
added Georgian (ka_GE) translation (json/txt) for grub menu (#2044)
[Ventoy.git] / Plugson / www / plugson_theme.html
1 <div class="box box-primary" id="control">
2 <div class="box-header">
3 <div class="col-sm-9" style="padding-top:8px;">
4 <i class="fa fa-file-image-o">&nbsp;&nbsp;</i>
5 <h1 class="box-title" style="font-weight:bold;" id="id_h1_page_title">主题插件</h1>
6 </div>
7 <div class="col-sm-1" style="padding-top:2px;">
8 <button id="id_btn_reset" class="btn btn-sm btn-danger btn-del"><i class="fa fa-trash"></i><span id="id_btn_span_reset">Reset</span></button>
9 </div>
10 <div class="col-sm-2" style="font-size:16px;padding-top:8px;">
11 <a id="id_a_official_doc" target="_blank" href="https://www.ventoy.net/cn/plugin_theme.html"><span class="fa fa-link"></span><span id="id_span_official_doc">官网文档</span></a>
12 </div>
13 </div>
14 <legend></legend>
15
16 <div class="box-body">
17
18 <div class="nav-tabs-custom">
19 <ul class="nav nav-tabs" id="id_tab_theme">
20 <li class=""><a href="#tab_0" data-toggle="tab" aria-expanded="false" style="font-weight:bold" >theme</a></li>
21 <li class=""><a href="#tab_1" data-toggle="tab" aria-expanded="false" style="font-weight:bold">theme_legacy</a></li>
22 <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false" style="font-weight:bold">theme_uefi</a></li>
23 <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false" style="font-weight:bold">theme_ia32</a></li>
24 <li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="false" style="font-weight:bold">theme_aa64</a></li>
25 <li class=""><a href="#tab_5" data-toggle="tab" aria-expanded="false" style="font-weight:bold">theme_mips</a></li>
26 </ul>
27 </div>
28
29 <div class="box box-primary box-solid">
30 <div class="box-header with-border">
31 <h3 class="box-title" style="font-size: 14px;font-weight: bold;">file
32 <span id="id_span_desc_cn"> —— 主题配置文件</span></h3>
33 <div class="box-tools pull-right">
34 <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
35 </div><!-- /.box-tools -->
36 </div><!-- /.box-header -->
37 <div class="box-body no-padding">
38 <table class="table table-bordered no-padding" id="theme_file_table">
39 <tr style="font-weight:bold;">
40 <td class="td_ctrl_col" id="td_title_setting">选项设置</td>
41 <td>
42 <table id="id_theme_tbl_file" class="table table-bordered">
43 <thead>
44 <tr>
45 <th style="width: 5%">#</th>
46 <th id="id_th_file_path">文件路径</th>
47 <th style="width: 10%" id="id_th_default">默认</th>
48 <th style="width: 10%" id="id_th_status">状态</th>
49 <th style="width: 10%" id="id_th_operation">操作</th>
50 </tr>
51 </thead>
52 <tbody>
53
54 </tbody>
55 </table>
56 </td>
57 </tr>
58 <tr id="tr_title_desc_cn">
59 <td class="td_ctrl_col">选项说明</td>
60 <td>
61 theme.txt 文件的全路径。可以设置1个或者多个。当设置为多个时,启动之后还可以通过 <code>F5 Tools --> Theme Select</code> 菜单进行切换。
62 </td>
63 </tr>
64 <tr id="tr_title_desc_en">
65 <td class="td_ctrl_col">Option Description</td>
66 <td>
67 The theme.txt file path. You can add one or more files. You can switch between themes with <code>F5 Tools --> Theme Select</code> menu if you set more than one themes.
68 </td>
69 </tr>
70 </table>
71 </div><!-- /.box-body -->
72 </div><!-- /.box -->
73
74
75 <div class="box box-primary box-solid">
76 <div class="box-header with-border">
77 <h3 class="box-title" style="font-size: 14px;font-weight: bold;">display_mode
78 <span id="id_span_desc_cn"> —— 屏幕显示模式</span></h3>
79 <div class="box-tools pull-right">
80 <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
81 </div><!-- /.box-tools -->
82 </div><!-- /.box-header -->
83 <div class="box-body no-padding">
84 <table class="table table-bordered no-padding">
85 <tr style="font-weight:bold;">
86 <td class="td_ctrl_col" id="td_title_setting">选项设置</td>
87 <td>
88 <select id="id_theme_sel_dismode" name="name_theme_sel_dismode" class="form-control" >
89 <option title="GUI" selected>GUI</option>
90 <option title="CLI">CLI</option>
91 <option title="serial">serial</option>
92 <option title="serial_console">serial_console</option>
93 </selec
94 </tr>
95 <tr id="tr_title_desc_cn">
96 <td class="td_ctrl_col">选项说明</td>
97 <td>
98 菜单显示模式,可以设置为 默认为 GUI 模式。GUI和CLI 分别对应图形模式和文本模式。<br/>
99 在有极个别的机器上Ventoy的背景菜单无法显示,或者显示后菜单移动极其缓慢,这种情况可以默认设置为文本模式。<br/>
100 不过,不管GUI还是CLI都是基于VGA显示设备的,如果你的机器上只有串口,你可以设置为 <code>serial</code> <br/>
101 当然,如果既有串口也有VGA设备,则也可以设置为 <code>serial_console</code> <br/>
102 <span style='color:red;font-weight:bold;'>注意:如果菜单名称(文件名)里有中文的话,在文本或serial模式下是无法显示的。</span>
103 </td>
104 </tr>
105 <tr id="tr_title_desc_en">
106 <td class="td_ctrl_col">Option Description</td>
107 <td>
108 Boot menu display mode, default is <code>GUI</code>. <code>GUI</code> or <code>CLI</code> corresponding to the GUI mode and TEXT mode respectively.<br/>
109 On very few machines Ventoy's menu can't be shown or the cursor moves extremely slow. In this case you can set the default mode to "CLI". <br/>
110 However, both "GUI" and "CLI" need a VGA device, if your machine only has serial, you can use <code>serial</code><br/>
111 Also you can use <code>serial_console</code> if you have both serial and VGA device. <br/>
112 <span style='color:red;font-weight:bold;'>Attention: Unicode characters will NOT be displayed normally in CLI or serial mode.</span>
113 </td>
114 </tr>
115 </table>
116 </div><!-- /.box-body -->
117 </div><!-- /.box -->
118
119
120 <div class="box box-primary box-solid">
121 <div class="box-header with-border">
122 <h3 class="box-title" style="font-size: 14px;font-weight: bold;">gfxmode
123 <span id="id_span_desc_cn"> —— 屏幕分辨率</span></h3>
124 <div class="box-tools pull-right">
125 <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
126 </div><!-- /.box-tools -->
127 </div><!-- /.box-header -->
128 <div class="box-body no-padding">
129 <table class="table table-bordered no-padding">
130 <tr style="font-weight:bold;">
131 <td class="td_ctrl_col" id="td_title_setting">选项设置</td>
132 <td>
133 <select id="id_theme_sel_gfxmode" name="name_theme_sel_gfxmode" class="form-control">
134 <option title="1920x1080">1920x1080</option>
135 <option title="1680x1050">1680x1050</option>
136 <option title="1600x900">1600x900</option>
137 <option title="1440x900">1440x900</option>
138 <option title="1280x1024">1280x1024</option>
139 <option title="1280x960">1280x960</option>
140 <option title="1024x768" selected>1024x768</option>
141 <option title="800x600">800x600</option>
142 </selec
143 </tr>
144 <tr id="tr_title_desc_cn">
145 <td class="td_ctrl_col">选项说明</td>
146 <td>
147 默认使用的屏幕分辨率,默认为 "1024x768"。只有在上面的 <code>display_mode</code> 选项设置为 <code>GUI</code> 时才有效。
148 </td>
149 </tr>
150 <tr id="tr_title_desc_en">
151 <td class="td_ctrl_col">Option Description</td>
152 <td>
153 Default screen resolution, default is "1024x768". Only take effect when <code>display_mode</code> option is <code>GUI</code>.
154 </td>
155 </tr>
156 </table>
157 </div><!-- /.box-body -->
158 </div><!-- /.box -->
159
160
161 <div class="box box-primary box-solid">
162 <div class="box-header with-border">
163 <h3 class="box-title" style="font-size: 14px;font-weight: bold;">fonts
164 <span id="id_span_desc_cn"> —— 字体文件</span></h3>
165 <div class="box-tools pull-right">
166 <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
167 </div><!-- /.box-tools -->
168 </div><!-- /.box-header -->
169 <div class="box-body no-padding">
170 <table class="table table-bordered no-padding">
171 <tr style="font-weight:bold;">
172 <td class="td_ctrl_col" id="td_title_setting">选项设置</td>
173 <td>
174 <table id="id_theme_tbl_fonts" class="table table-bordered">
175 <thead>
176 <tr>
177 <th style="width: 5%">#</th>
178 <th id="id_th_file_path">文件路径</th>
179 <th style="width: 10%" id="id_th_status">状态</th>
180 <th style="width: 10%" id="id_th_operation">操作</th>
181 </tr>
182 </thead>
183 <tbody>
184 </tbody>
185 </table>
186 </td>
187 </tr>
188 <tr id="tr_title_desc_cn">
189 <td class="td_ctrl_col">选项说明</td>
190 <td>
191 字体文件的全路径。Ventoy在启动时会依次加载这些字体文件。
192 </td>
193 </tr>
194 <tr id="tr_title_desc_en">
195 <td class="td_ctrl_col">Option Description</td>
196 <td>
197 Full path of fonts file. Ventoy will load each of them when boot.
198 </td>
199 </tr>
200 </table>
201 </div><!-- /.box-body -->
202 </div><!-- /.box -->
203
204
205 </div>
206
207 </div>
208 <script type="text/javascript">
209 function VtoyPageLanguageChange(newlang) {
210 VtoyCommonChangeLanguage(newlang);
211
212 $('h1[id=id_h1_page_title]').text(g_vtoy_cur_language.STR_PLUG_THEME);
213
214 $("span[id=id_span_file_exist]").each(function(){
215 $(this).text(g_vtoy_cur_language.STR_FILE_EXIST);
216 });
217 $("span[id=id_span_file_nonexist]").each(function(){
218 $(this).text(g_vtoy_cur_language.STR_FILE_NONEXIST);
219 });
220
221 $("th[id=id_th_default]").text(g_vtoy_cur_language.STR_DEFAULT);
222
223 $("span[id=id_span_random_sel]").text(g_vtoy_cur_language.STR_RANDOM_SEL);
224 $("span[id=id_span_default_sel]").text(g_vtoy_cur_language.STR_DEFAULT_SEL);
225 }
226
227 function VtoyGetCurrentPageItem(data) {
228 var mode;
229
230 data.gfxmode = $('select[id=id_theme_sel_gfxmode').val();
231
232 mode = $('select[id=id_theme_sel_dismode').val();
233 if (mode === 'serial_console') {
234 data.display_mode = 3;
235 } else if (mode === 'serial') {
236 data.display_mode = 2;
237 } else if (mode === 'CLI') {
238 data.display_mode = 1;
239 } else {
240 data.display_mode = 0;
241 }
242 }
243
244 function VtoySaveCurrentPage() {
245 VtoyGetCurrentPageItem(m_data_theme[current_tab_index]);
246 var data = m_data_theme[current_tab_index];
247
248 callVtoy({
249 method : 'save_theme',
250 index: current_tab_index,
251 display_mode: data.display_mode,
252 gfxmode: data.gfxmode,
253 default_file: data.default_file
254 }, function(e) {
255 Message.success(g_vtoy_cur_language.STR_SAVE_SUCCESS);
256 });
257 }
258
259
260 function FillThemeFileTable(list, default_file) {
261 var id;
262 var exist = '<span id="id_span_file_exist" style="line-height: 1.5;" class="label pull-left bg-green">' + g_vtoy_cur_language.STR_FILE_EXIST + '</span>';
263 var nonexist = '<span id="id_span_file_nonexist" style="line-height: 1.5;" class="label pull-left bg-red">' + g_vtoy_cur_language.STR_FILE_NONEXIST + '</span>';
264 var addbtn = ventoy_get_xslg_addbtn('ThemeFileAddBtn');
265 var delbtn = ventoy_get_xslg_delbtn('ThemeFileDelBtn');
266
267 var default_random = '<label class="radio-inline"><input type="radio" id="id_theme_file_radio0" name="id_theme_file_radio" data-type="0" value="0"/><span id="id_span_random_sel">' + g_vtoy_cur_language.STR_RANDOM_SEL + '</span></label>';
268 var td1, td2, td3, td4, td5;
269 var $tbl = $("#id_theme_tbl_file tbody");
270 $tbl.empty();
271
272 for (var i = 0; i < list.length; i++) {
273 var $tr;
274 td1 = '<td>' + (i + 1) + '</td>';
275 td2 = '<td>' + list[i].path + '</td>';
276
277 id = i + 1;
278 var sel = '<label class="radio-inline"><input type="radio" id="id_theme_file_radio'+ id + '" name="id_theme_file_radio" data-type="'+
279 id + '" value="'+ id +'"/><span id="id_span_default_sel">' + g_vtoy_cur_language.STR_DEFAULT_SEL + '</span></label>';
280
281 td3 = '<td>' + sel + '</td>';
282
283 if (list[i].valid === 1) {
284 td4 = '<td style="vertical-align: middle;">' + exist + '</td>';
285 } else {
286 td4 = '<td style="vertical-align: middle;">' + nonexist + '</td>';
287 }
288
289 td5 = '<td>' + delbtn + '</td>';
290 $tr = $('<tr>' + td1 + td2 + td3 + td4 + td5 + '</tr>');
291
292 $tr.data('path', list[i].path);
293 $tr.data('index', i);
294 $tbl.append($tr);
295 }
296
297 $tbl.append('<tr><td></td><td></td><td>' + default_random + '</td><td></td><td>' + addbtn + '</td></tr>');
298
299 var selid = 'input[type=radio][id=id_theme_file_radio' + default_file + ']';
300 $(selid)[0].checked = true;
301
302 $('input[type=radio]').each(function(){
303 var id = $(this).attr('id');
304 if (typeof(id) != 'undefined' && id.startsWith('id_theme_file')) {
305 $(this).change(function() {
306 m_data_theme[current_tab_index].default_file =parseInt(id.substr(id.length - 1));
307 VtoySaveCurrentPage();
308 });
309 }
310 });
311
312 if (list.length >= 2) {
313 $("th[id=id_th_default]").show();
314 $('#id_theme_tbl_file tr').find('td:eq(2)').show();
315 } else {
316 $("th[id=id_th_default]").hide();
317 $('#id_theme_tbl_file tr').find('td:eq(2)').hide();
318 }
319
320 }
321
322 function FillThemeFontTable(list) {
323 var exist = '<span id="id_span_file_exist" style="line-height: 1.5;" class="label pull-left bg-green">' + g_vtoy_cur_language.STR_FILE_EXIST + '</span>';
324 var nonexist = '<span id="id_span_file_nonexist" style="line-height: 1.5;" class="label pull-left bg-red">' + g_vtoy_cur_language.STR_FILE_NONEXIST + '</span>';
325 var addbtn = ventoy_get_xslg_addbtn('ThemeFontAddBtn');
326 var delbtn = ventoy_get_xslg_delbtn('ThemeFontDelBtn');
327 var td1, td2, td3, td4;
328 var $tbl = $("#id_theme_tbl_fonts tbody");
329 $tbl.empty();
330
331 for (var i = 0; i < list.length; i++) {
332 var $tr;
333 td1 = '<td>' + (i + 1) + '</td>';
334 td2 = '<td>' + list[i].path + '</td>';
335
336 if (list[i].valid === 1) {
337 td3 = '<td style="vertical-align: middle;">' + exist + '</td>';
338 } else {
339 td3 = '<td style="vertical-align: middle;">' + nonexist + '</td>';
340 }
341
342 td4 = '<td>' + delbtn + '</td>';
343
344 $tr = $('<tr>' + td1 + td2 + td3 + td4 + '</tr>');
345
346 $tr.data('path', list[i].path);
347 $tr.data('index', i);
348
349 $tbl.append($tr);
350 }
351
352 $tbl.append('<tr><td></td><td></td><td></td><td>' + addbtn + '</td></tr>');
353 }
354
355 function VtoyFillCurrentPageItem(data) {
356 $('select[id=id_theme_sel_gfxmode').val(data.gfxmode);
357
358 if (data.display_mode === 3) {
359 $('select[id=id_theme_sel_dismode').val('serial_console');
360 } else if (data.display_mode === 2) {
361 $('select[id=id_theme_sel_dismode').val('serial');
362 } else if (data.display_mode === 1) {
363 $('select[id=id_theme_sel_dismode').val('CLI');
364 } else {
365 $('select[id=id_theme_sel_dismode').val('GUI');
366 }
367
368 FillThemeFileTable(data.filelist, data.default_file);
369 FillThemeFontTable(data.fontslist);
370 }
371
372
373
374 function OnClickMultiModeTab() {
375 var href = $(this).attr('href');
376 var index = parseInt(href.substr(5, 1));
377
378 if (index < 0 || index >= g_vtoy_data_default_index || current_tab_index === index) {
379 return;
380 }
381
382 current_tab_index = index;
383 VtoyFillCurrentPageItem(m_data_theme[index]);
384 }
385
386
387 function OnAddThemeFile(root, valid, extra) {
388 var list = m_data_theme[current_tab_index].filelist;
389 var data = {
390 "path": root.substr(g_current_dir.length),
391 "valid": 1
392 };
393
394 for (var i = 0; i < list.length; i++) {
395 if (list[i].path === data.path) {
396 Message.error(g_vtoy_cur_language.STR_DUPLICATE_PATH);
397 return;
398 }
399 }
400
401 callVtoy({
402 method : 'theme_add_file',
403 index: current_tab_index,
404 path: data.path
405 }, function(e) {
406 list.push(data);
407 FillThemeFileTable(list, m_data_theme[current_tab_index].default_file);
408 Message.success(g_vtoy_cur_language.STR_SAVE_SUCCESS);
409 });
410 }
411
412 function OnAddThemeFont(root, valid, extra) {
413 var list = m_data_theme[current_tab_index].fontslist;
414 var data = {
415 "path": root.substr(g_current_dir.length),
416 "valid": 1
417 };
418
419 for (var i = 0; i < list.length; i++) {
420 if (list[i].path === data.path) {
421 Message.error(g_vtoy_cur_language.STR_DUPLICATE_PATH);
422 return;
423 }
424 }
425
426 callVtoy({
427 method : 'theme_add_font',
428 index: current_tab_index,
429 path: data.path
430 }, function(e) {
431 list.push(data);
432 FillThemeFontTable(list);
433 Message.success(g_vtoy_cur_language.STR_SAVE_SUCCESS);
434 });
435 }
436
437
438 //Main process
439
440 var m_data_theme;
441 var current_tab_index = 0;
442 callVtoySync({method : 'get_theme'}, function(data) {
443 m_data_theme = data;
444 });
445
446 $("#theme_file_table").on('click', '.ThemeFileAddBtn', function() {
447 var tip = (g_current_os === 'windows') ? '\\ventoy\\themes\\test\\theme.txt' : "/ventoy/themes/test/theme.txt";
448 var para = {
449 "title": g_vtoy_cur_language.STR_ADD_THEME,
450 "fuzzy": 0,
451 "tip1": g_current_dir + tip,
452 "tip2": '',
453 "tip3": '',
454 "extra": false,
455 "extra_title": ''
456 };
457
458 VtoySelectFilePath(OnAddThemeFile, para);
459 });
460
461 $("#theme_file_table").on('click', '.ThemeFileDelBtn', function() {
462 var $tr = $(this).closest('tr');
463 var path = $tr.data('path');
464 var index = $tr.data('index');
465
466 callVtoySync({
467 method : 'theme_del_file',
468 index: current_tab_index,
469 path: path
470 }, function(data) {
471 m_data_theme[current_tab_index].filelist.splice(index, 1);
472 FillThemeFileTable(m_data_theme[current_tab_index].filelist, m_data_theme[current_tab_index].default_file);
473 Message.success(g_vtoy_cur_language.STR_SAVE_SUCCESS);
474 });
475 });
476
477 $("#id_theme_tbl_fonts").on('click', '.ThemeFontAddBtn', function() {
478 var tip = (g_current_os === 'windows') ? '\\ventoy\\themes\\blur\\Hack-12.pf2' : "/ventoy/themes/blur/Hack-12.pf2";
479 var para = {
480 "title": g_vtoy_cur_language.STR_ADD_FONT,
481 "fuzzy": 0,
482 "tip1": g_current_dir + tip,
483 "tip2": '',
484 "tip3": '',
485 "extra": false,
486 "extra_title": ''
487 };
488
489 VtoySelectFilePath(OnAddThemeFont, para);
490 });
491
492 $("#id_theme_tbl_fonts").on('click', '.ThemeFontDelBtn', function() {
493 var $tr = $(this).closest('tr');
494 var path = $tr.data('path');
495 var index = $tr.data('index');
496
497 callVtoySync({
498 method : 'theme_del_font',
499 index: current_tab_index,
500 path: path
501 }, function(data) {
502 m_data_theme[current_tab_index].fontslist.splice(index, 1);
503 FillThemeFontTable(m_data_theme[current_tab_index].fontslist);
504 Message.success(g_vtoy_cur_language.STR_SAVE_SUCCESS);
505 });
506 });
507
508 $('select[id=id_theme_sel_gfxmode]').change(VtoySaveCurrentPage);
509 $('select[id=id_theme_sel_dismode]').change(VtoySaveCurrentPage);
510
511 $('#id_tab_theme a[href="#tab_0"]').click(OnClickMultiModeTab);
512 $('#id_tab_theme a[href="#tab_1"]').click(OnClickMultiModeTab);
513 $('#id_tab_theme a[href="#tab_2"]').click(OnClickMultiModeTab);
514 $('#id_tab_theme a[href="#tab_3"]').click(OnClickMultiModeTab);
515 $('#id_tab_theme a[href="#tab_4"]').click(OnClickMultiModeTab);
516 $('#id_tab_theme a[href="#tab_5"]').click(OnClickMultiModeTab);
517
518 function UpdateTabTitleIcon(data) {
519 CommonUpdateTabTitleIcon(data.exist_theme, '#id_tab_theme a[href="#tab_', 'theme');
520 }
521 $('#id_btn_reset').click(function() {
522 Modal.confirm({msg:GetResetTabConfigTipMsg(current_tab_index, 'theme')}).on(function(e) {
523 if (e) {
524 callVtoySync({
525 method : 'theme_del_file',
526 index: current_tab_index,
527 path: g_del_all_path
528 }, function(data) {
529
530 });
531
532 callVtoySync({
533 method : 'theme_del_font',
534 index: current_tab_index,
535 path: g_del_all_path
536 }, function(data) {
537
538 });
539
540 m_data_theme[current_tab_index].filelist.length = 0;
541 m_data_theme[current_tab_index].fontslist.length = 0;
542 VtoyFillCurrentPageItem(m_data_theme[g_vtoy_data_default_index]);
543 VtoySaveCurrentPage();
544 }
545 });
546 });
547
548 $('#id_tab_theme a[href="#tab_0"]').tab('show');
549 VtoyFillCurrentPageItem(m_data_theme[0]);
550 VtoyPageLanguageChange(g_current_language);
551
552 </script>