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" id='resolution_fit_div'>
  76           <div class="box-header with-border">
  77             <h3 class="box-title" style="font-size: 14px;font-weight: bold;">resolution_fit
  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                       <label class="radio-inline">
  89                           <input type="radio" id="id_ctrl_radio_res_fit0" name="id_ctrl_radio_res_fit" data-type="0" value="0"> <span style="font-weight:bold;">0</span>
  90                       </label>&nbsp;&nbsp;&nbsp;&nbsp;
  91                       <label class="radio-inline">
  92                           <input type="radio" id="id_ctrl_radio_res_fit1" name="id_ctrl_radio_res_fit" data-type="1" value="1"> <span style="font-weight:bold;">1</span>
  93                       </label>
  94                     </td>
  95                   </tr>
  96                   <tr id="tr_title_desc_cn">
  97                     <td class="td_ctrl_col" id="td_title_desc">选项说明</td>
  98                     <td>当设置多个主题时，在随机选择时是否按照当前分辨率过滤。&nbsp;&nbsp;
  99                       <code style="font-weight: bold;">0</code> 不过滤 &nbsp;&nbsp;
 100                       <code style="font-weight: bold;">1</code> 过滤 <br/>
 101                       注意，这个选项必须在上面设置了多个主题配置文件，同时 "默认" 设置为 “随机选择” 时才有效，其他情况下均无效。<br/>
 102                       关于这个选项的详细解释，请参考 <a href="https://www.ventoy.net/cn/plugin_theme.html#vtoy_theme_res_fit">resolution_fit 选项说明</a>
 103                     </td>
 104                   </tr>
 105                   <tr id="tr_title_desc_en">
 106                     <td class="td_ctrl_col">Option Description</td>
 107                     <td>
 108                       Filter by current resolution when you set more than one themes. &nbsp;&nbsp;
 109                       <code style="font-weight: bold;">0</code> No filter &nbsp;&nbsp
 110                       <code style="font-weight: bold;">1</code> Filter <br/>
 111                       You can refer <a href="https://www.ventoy.net/en/plugin_theme.html#vtoy_theme_res_fit">About resolution_fit</a> for details about this option.
 112                     </td>
 113                   </tr>
 114               </table>
 115           </div><!-- /.box-body -->
 116       </div><!-- /.box -->
 117
 118
 119         <div class="box box-primary box-solid">
 120             <div class="box-header with-border">
 121               <h3 class="box-title" style="font-size: 14px;font-weight: bold;">display_mode
 122                 <span id="id_span_desc_cn"> —— 屏幕显示模式</span></h3>
 123               <div class="box-tools pull-right">
 124                 <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
 125               </div><!-- /.box-tools -->
 126             </div><!-- /.box-header -->
 127             <div class="box-body no-padding">
 128                 <table class="table table-bordered  no-padding">
 129                     <tr style="font-weight:bold;">
 130                       <td class="td_ctrl_col" id="td_title_setting">选项设置</td>
 131                       <td>
 132                         <select id="id_theme_sel_dismode" name="name_theme_sel_dismode" class="form-control" >
 133                             <option title="GUI" selected>GUI</option>
 134                             <option title="CLI">CLI</option>
 135                             <option title="serial">serial</option>
 136                             <option title="serial_console">serial_console</option>
 137                         </selec
 138                     </tr>
 139                     <tr id="tr_title_desc_cn">
 140                       <td class="td_ctrl_col">选项说明</td>
 141                       <td>
 142                         菜单显示模式，可以设置为 默认为 GUI 模式。GUI和CLI 分别对应图形模式和文本模式。<br/>
 143                         在有极个别的机器上Ventoy的背景菜单无法显示，或者显示后菜单移动极其缓慢，这种情况可以默认设置为文本模式。<br/>
 144                         不过，不管GUI还是CLI都是基于VGA显示设备的，如果你的机器上只有串口，你可以设置为 <code>serial</code> <br/>
 145                         当然，如果既有串口也有VGA设备，则也可以设置为 <code>serial_console</code> <br/>
 146                         <span style='color:red;font-weight:bold;'>注意：如果菜单名称（文件名）里有中文的话，在文本或serial模式下是无法显示的。</span>
 147                       </td>
 148                     </tr>
 149                     <tr id="tr_title_desc_en">
 150                       <td class="td_ctrl_col">Option Description</td>
 151                       <td>
 152                         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/>
 153                         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/>
 154                         However, both "GUI" and "CLI" need a VGA device, if your machine only has serial, you can use <code>serial</code><br/>
 155                         Also you can use <code>serial_console</code> if you have both serial and VGA device. <br/>
 156                         <span style='color:red;font-weight:bold;'>Attention: Unicode characters will NOT be displayed normally in CLI or serial mode.</span>
 157                       </td>
 158                     </tr>
 159                 </table>
 160             </div><!-- /.box-body -->
 161         </div><!-- /.box -->
 162
 163
 164         <div class="box box-primary box-solid">
 165             <div class="box-header with-border">
 166               <h3 class="box-title" style="font-size: 14px;font-weight: bold;">gfxmode
 167                 <span id="id_span_desc_cn"> —— 屏幕分辨率</span></h3>
 168               <div class="box-tools pull-right">
 169                 <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
 170               </div><!-- /.box-tools -->
 171             </div><!-- /.box-header -->
 172             <div class="box-body no-padding">
 173                 <table class="table table-bordered  no-padding">
 174                     <tr style="font-weight:bold;">
 175                       <td class="td_ctrl_col" id="td_title_setting">选项设置</td>
 176                       <td>
 177                         <select id="id_theme_sel_gfxmode" name="name_theme_sel_gfxmode" class="form-control">
 178                             <option title="max">max</option>
 179                             <option title="1920x1080">1920x1080</option>
 180                             <option title="1680x1050">1680x1050</option>
 181                             <option title="1600x900">1600x900</option>
 182                             <option title="1440x900">1440x900</option>
 183                             <option title="1280x1024">1280x1024</option>
 184                             <option title="1280x960">1280x960</option>
 185                             <option title="1024x768" selected>1024x768</option>
 186                             <option title="800x600">800x600</option>
 187                         </selec
 188                     </tr>
 189                     <tr id="tr_title_desc_cn">
 190                       <td class="td_ctrl_col">选项说明</td>
 191                       <td>
 192                         默认使用的屏幕分辨率，默认为 "1024x768"。只有在上面的 <code>display_mode</code> 选项设置为 <code>GUI</code> 时才有效。
 193                       </td>
 194                     </tr>
 195                     <tr id="tr_title_desc_en">
 196                       <td class="td_ctrl_col">Option Description</td>
 197                       <td>
 198                         Default screen resolution, default is "1024x768". Only take effect when <code>display_mode</code> option is <code>GUI</code>.
 199                       </td>
 200                     </tr>
 201                 </table>
 202             </div><!-- /.box-body -->
 203         </div><!-- /.box -->
 204
 205
 206         <div class="box box-primary box-solid">
 207             <div class="box-header with-border">
 208               <h3 class="box-title" style="font-size: 14px;font-weight: bold;">fonts
 209                 <span id="id_span_desc_cn"> —— 字体文件</span></h3>
 210               <div class="box-tools pull-right">
 211                 <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
 212               </div><!-- /.box-tools -->
 213             </div><!-- /.box-header -->
 214             <div class="box-body no-padding">
 215                 <table class="table table-bordered  no-padding">
 216                     <tr style="font-weight:bold;">
 217                       <td class="td_ctrl_col" id="td_title_setting">选项设置</td>
 218                       <td>
 219                         <table id="id_theme_tbl_fonts" class="table table-bordered">
 220                           <thead>
 221                             <tr>
 222                               <th style="width: 5%">#</th>
 223                               <th id="id_th_file_path">文件路径</th>
 224                               <th style="width: 10%" id="id_th_status">状态</th>
 225                               <th style="width: 10%" id="id_th_operation">操作</th>
 226                             </tr>
 227                           </thead>
 228                           <tbody>
 229                           </tbody>
 230                         </table>
 231                       </td>
 232                     </tr>
 233                     <tr id="tr_title_desc_cn">
 234                       <td class="td_ctrl_col">选项说明</td>
 235                       <td>
 236                         字体文件的全路径。Ventoy在启动时会依次加载这些字体文件。
 237                       </td>
 238                     </tr>
 239                     <tr id="tr_title_desc_en">
 240                       <td class="td_ctrl_col">Option Description</td>
 241                       <td>
 242                         Full path of fonts file. Ventoy will load each of them when boot.
 243                       </td>
 244                     </tr>
 245                 </table>
 246             </div><!-- /.box-body -->
 247         </div><!-- /.box -->
 248
 249
 250     </div>
 251
 252 </div>
 253 <script type="text/javascript">
 254   function VtoyPageLanguageChange(newlang) {
 255     VtoyCommonChangeLanguage(newlang);
 256
 257     $('h1[id=id_h1_page_title]').text(g_vtoy_cur_language.STR_PLUG_THEME);
 258
 259     $("span[id=id_span_file_exist]").each(function(){
 260         $(this).text(g_vtoy_cur_language.STR_FILE_EXIST);
 261     });
 262     $("span[id=id_span_file_nonexist]").each(function(){
 263         $(this).text(g_vtoy_cur_language.STR_FILE_NONEXIST);
 264     });
 265
 266     $("th[id=id_th_default]").text(g_vtoy_cur_language.STR_DEFAULT);
 267
 268     $("span[id=id_span_random_sel]").text(g_vtoy_cur_language.STR_RANDOM_SEL);
 269     $("span[id=id_span_default_sel]").text(g_vtoy_cur_language.STR_DEFAULT_SEL);
 270   }
 271
 272   function VtoyGetCurrentPageItem(data) {
 273     var mode;
 274
 275     data.gfxmode = $('select[id=id_theme_sel_gfxmode').val();
 276
 277     mode = $('select[id=id_theme_sel_dismode').val();
 278     if (mode === 'serial_console') {
 279       data.display_mode = 3;
 280     } else if (mode === 'serial') {
 281       data.display_mode = 2;
 282     } else if (mode === 'CLI') {
 283       data.display_mode = 1;
 284     } else {
 285       data.display_mode = 0;
 286     }
 287
 288     data.resolution_fit = parseInt($('input:radio[name=id_ctrl_radio_res_fit]:checked').val());
 289   }
 290
 291   function VtoySaveCurrentPage() {
 292     VtoyGetCurrentPageItem(m_data_theme[current_tab_index]);
 293     var data = m_data_theme[current_tab_index];
 294
 295     callVtoy({
 296       method : 'save_theme',
 297       index: current_tab_index,
 298       display_mode: data.display_mode,
 299       resolution_fit: data.resolution_fit,
 300       gfxmode: data.gfxmode,
 301       default_file: data.default_file
 302     }, function(e) {
 303       Message.success(g_vtoy_cur_language.STR_SAVE_SUCCESS);
 304     });
 305   }
 306
 307
 308   function FillThemeFileTable(list, default_file) {
 309     var id;
 310     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>';
 311     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>';
 312     var addbtn = ventoy_get_xslg_addbtn('ThemeFileAddBtn');
 313     var delbtn = ventoy_get_xslg_delbtn('ThemeFileDelBtn');
 314
 315     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>';
 316     var td1, td2, td3, td4, td5;
 317     var $tbl = $("#id_theme_tbl_file tbody");
 318     $tbl.empty();
 319
 320     if (list.length > 1) {
 321         $('#resolution_fit_div').show();
 322     } else {
 323         $('#resolution_fit_div').hide();
 324     }
 325
 326     for (var i = 0; i < list.length; i++) {
 327       var $tr;
 328       td1 = '<td>' + (i + 1) + '</td>';
 329       td2 = '<td>' + list[i].path + '</td>';
 330
 331       id = i + 1;
 332       var sel = '<label class="radio-inline"><input type="radio" id="id_theme_file_radio'+ id + '" name="id_theme_file_radio" data-type="'+
 333         id + '" value="'+ id +'"/><span id="id_span_default_sel">' + g_vtoy_cur_language.STR_DEFAULT_SEL + '</span></label>';
 334
 335       td3 = '<td>' + sel + '</td>';
 336
 337       if (list[i].valid === 1) {
 338         td4 = '<td style="vertical-align: middle;">' + exist + '</td>';
 339       } else {
 340         td4 = '<td style="vertical-align: middle;">' + nonexist + '</td>';
 341       }
 342
 343       td5 = '<td>' + delbtn + '</td>';
 344       $tr = $('<tr>' + td1 + td2 + td3 + td4 + td5 + '</tr>');
 345
 346       $tr.data('path', list[i].path);
 347       $tr.data('index', i);
 348       $tbl.append($tr);
 349     }
 350
 351     $tbl.append('<tr><td></td><td></td><td>' + default_random + '</td><td></td><td>' + addbtn + '</td></tr>');
 352
 353     var selid = 'input[type=radio][id=id_theme_file_radio' + default_file + ']';
 354     $(selid)[0].checked = true;
 355
 356     $('input[type=radio]').each(function(){
 357       var id = $(this).attr('id');
 358       if (typeof(id) != 'undefined' && id.startsWith('id_theme_file')) {
 359         $(this).change(function() {
 360           var prelen = 'id_theme_file_radio'.length;
 361           m_data_theme[current_tab_index].default_file = parseInt(id.substr(id.length - 1));
 362           if (id.substr(0, prelen) === 'id_theme_file_radio') {
 363               m_data_theme[current_tab_index].default_file = parseInt(id.substr(prelen));
 364           }
 365
 366           VtoySaveCurrentPage();
 367         });
 368       }
 369     });
 370
 371     if (list.length >= 2) {
 372       $("th[id=id_th_default]").show();
 373       $('#id_theme_tbl_file tr').find('td:eq(2)').show();
 374     } else {
 375       $("th[id=id_th_default]").hide();
 376       $('#id_theme_tbl_file tr').find('td:eq(2)').hide();
 377     }
 378
 379   }
 380
 381   function FillThemeFontTable(list) {
 382     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>';
 383     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>';
 384     var addbtn = ventoy_get_xslg_addbtn('ThemeFontAddBtn');
 385     var delbtn = ventoy_get_xslg_delbtn('ThemeFontDelBtn');
 386     var td1, td2, td3, td4;
 387     var $tbl = $("#id_theme_tbl_fonts tbody");
 388     $tbl.empty();
 389
 390     for (var i = 0; i < list.length; i++) {
 391       var $tr;
 392       td1 = '<td>' + (i + 1) + '</td>';
 393       td2 = '<td>' + list[i].path + '</td>';
 394
 395       if (list[i].valid === 1) {
 396         td3 = '<td style="vertical-align: middle;">' + exist + '</td>';
 397       } else {
 398         td3 = '<td style="vertical-align: middle;">' + nonexist + '</td>';
 399       }
 400
 401       td4 = '<td>' + delbtn + '</td>';
 402
 403       $tr = $('<tr>' + td1 + td2 + td3 + td4 + '</tr>');
 404
 405       $tr.data('path', list[i].path);
 406       $tr.data('index', i);
 407
 408       $tbl.append($tr);
 409     }
 410
 411     $tbl.append('<tr><td></td><td></td><td></td><td>' + addbtn + '</td></tr>');
 412   }
 413
 414   function VtoyFillCurrentPageItem(data) {
 415     $('select[id=id_theme_sel_gfxmode').val(data.gfxmode);
 416
 417     if (data.display_mode === 3) {
 418       $('select[id=id_theme_sel_dismode').val('serial_console');
 419     } else if (data.display_mode === 2) {
 420       $('select[id=id_theme_sel_dismode').val('serial');
 421     } else if (data.display_mode === 1) {
 422       $('select[id=id_theme_sel_dismode').val('CLI');
 423     } else {
 424       $('select[id=id_theme_sel_dismode').val('GUI');
 425     }
 426
 427     $('input:radio[name=id_ctrl_radio_res_fit]')[data.resolution_fit].checked = true;
 428
 429     FillThemeFileTable(data.filelist, data.default_file);
 430     FillThemeFontTable(data.fontslist);
 431   }
 432
 433
 434
 435   function OnClickMultiModeTab() {
 436     var href = $(this).attr('href');
 437     var index = parseInt(href.substr(5, 1));
 438
 439     if (index < 0 || index >= g_vtoy_data_default_index || current_tab_index === index) {
 440       return;
 441     }
 442
 443     current_tab_index = index;
 444     VtoyFillCurrentPageItem(m_data_theme[index]);
 445   }
 446
 447
 448   function OnAddThemeFile(root, valid, extra) {
 449     var list = m_data_theme[current_tab_index].filelist;
 450     var data = {
 451       "path": root.substr(g_current_dir.length),
 452       "valid": 1
 453     };
 454
 455     for (var i = 0; i < list.length; i++) {
 456       if (list[i].path === data.path) {
 457         Message.error(g_vtoy_cur_language.STR_DUPLICATE_PATH);
 458         return;
 459       }
 460     }
 461
 462     callVtoy({
 463       method : 'theme_add_file',
 464       index: current_tab_index,
 465       path: data.path
 466     }, function(e) {
 467         if (e.result === 'success') {
 468             list.push(data);
 469             FillThemeFileTable(list, m_data_theme[current_tab_index].default_file);
 470             Message.success(g_vtoy_cur_language.STR_SAVE_SUCCESS);
 471         } else if (e.result === 'duplicate') {
 472             Message.error(g_vtoy_cur_language.STR_DUPLICATE_PATH);
 473         }
 474     });
 475   }
 476
 477   function OnAddThemeFont(root, valid, extra) {
 478     var list = m_data_theme[current_tab_index].fontslist;
 479     var data = {
 480       "path": root.substr(g_current_dir.length),
 481       "valid": 1
 482     };
 483
 484     for (var i = 0; i < list.length; i++) {
 485       if (list[i].path === data.path) {
 486         Message.error(g_vtoy_cur_language.STR_DUPLICATE_PATH);
 487         return;
 488       }
 489     }
 490
 491     callVtoy({
 492       method : 'theme_add_font',
 493       index: current_tab_index,
 494       path: data.path
 495     }, function(e) {
 496         if (e.result === 'success') {
 497             list.push(data);
 498             FillThemeFontTable(list);
 499             Message.success(g_vtoy_cur_language.STR_SAVE_SUCCESS);
 500         } else if (e.result === 'duplicate') {
 501             Message.error(g_vtoy_cur_language.STR_DUPLICATE_PATH);
 502         }
 503     });
 504   }
 505
 506
 507   //Main process
 508
 509   var m_data_theme;
 510   var current_tab_index = 0;
 511   callVtoySync({method : 'get_theme'}, function(data) {
 512     m_data_theme = data;
 513   });
 514
 515   $("#theme_file_table").on('click', '.ThemeFileAddBtn', function() {
 516                 var tip = (g_current_os === 'windows') ? '\\ventoy\\themes\\test\\theme.txt' : "/ventoy/themes/test/theme.txt";
 517     var para = {
 518         "title": g_vtoy_cur_language.STR_ADD_THEME,
 519         "fuzzy": 0,
 520         "tip1": g_current_dir + tip,
 521         "tip2": '',
 522         "tip3": '',
 523         "extra": false,
 524         "extra_title": ''
 525     };
 526
 527     VtoySelectFilePath(OnAddThemeFile, para);
 528   });
 529
 530   $("#theme_file_table").on('click', '.ThemeFileDelBtn', function() {
 531     var $tr = $(this).closest('tr');
 532                 var path = $tr.data('path');
 533     var index = $tr.data('index');
 534
 535     callVtoySync({
 536           method : 'theme_del_file',
 537           index: current_tab_index,
 538           path: path
 539       }, function(data) {
 540         m_data_theme[current_tab_index].filelist.splice(index, 1);
 541         FillThemeFileTable(m_data_theme[current_tab_index].filelist, m_data_theme[current_tab_index].default_file);
 542         Message.success(g_vtoy_cur_language.STR_SAVE_SUCCESS);
 543       });
 544   });
 545
 546   $("#id_theme_tbl_fonts").on('click', '.ThemeFontAddBtn', function() {
 547                 var tip = (g_current_os === 'windows') ? '\\ventoy\\themes\\blur\\Hack-12.pf2' : "/ventoy/themes/blur/Hack-12.pf2";
 548     var para = {
 549         "title": g_vtoy_cur_language.STR_ADD_FONT,
 550         "fuzzy": 0,
 551         "tip1": g_current_dir + tip,
 552         "tip2": '',
 553         "tip3": '',
 554         "extra": false,
 555         "extra_title": ''
 556     };
 557
 558     VtoySelectFilePath(OnAddThemeFont, para);
 559   });
 560
 561   $("#id_theme_tbl_fonts").on('click', '.ThemeFontDelBtn', function() {
 562     var $tr = $(this).closest('tr');
 563                 var path = $tr.data('path');
 564     var index = $tr.data('index');
 565
 566     callVtoySync({
 567           method : 'theme_del_font',
 568           index: current_tab_index,
 569           path: path
 570       }, function(data) {
 571         m_data_theme[current_tab_index].fontslist.splice(index, 1);
 572         FillThemeFontTable(m_data_theme[current_tab_index].fontslist);
 573         Message.success(g_vtoy_cur_language.STR_SAVE_SUCCESS);
 574       });
 575   });
 576
 577   $('select[id=id_theme_sel_gfxmode]').change(VtoySaveCurrentPage);
 578   $('select[id=id_theme_sel_dismode]').change(VtoySaveCurrentPage);
 579   $('#id_ctrl_radio_res_fit0').change(VtoySaveCurrentPage);
 580   $('#id_ctrl_radio_res_fit1').change(VtoySaveCurrentPage);
 581
 582   $('#id_tab_theme a[href="#tab_0"]').click(OnClickMultiModeTab);
 583   $('#id_tab_theme a[href="#tab_1"]').click(OnClickMultiModeTab);
 584   $('#id_tab_theme a[href="#tab_2"]').click(OnClickMultiModeTab);
 585   $('#id_tab_theme a[href="#tab_3"]').click(OnClickMultiModeTab);
 586   $('#id_tab_theme a[href="#tab_4"]').click(OnClickMultiModeTab);
 587   $('#id_tab_theme a[href="#tab_5"]').click(OnClickMultiModeTab);
 588
 589   function UpdateTabTitleIcon(data) {
 590     CommonUpdateTabTitleIcon(data.exist_theme, '#id_tab_theme a[href="#tab_', 'theme');
 591   }
 592   $('#id_btn_reset').click(function() {
 593     Modal.confirm({msg:GetResetTabConfigTipMsg(current_tab_index, 'theme')}).on(function(e) {
 594         if (e) {
 595             callVtoySync({
 596                 method : 'theme_del_file',
 597                 index: current_tab_index,
 598                 path: g_del_all_path
 599             }, function(data) {
 600
 601             });
 602
 603             callVtoySync({
 604                 method : 'theme_del_font',
 605                 index: current_tab_index,
 606                 path: g_del_all_path
 607             }, function(data) {
 608
 609             });
 610
 611             m_data_theme[current_tab_index].filelist.length = 0;
 612             m_data_theme[current_tab_index].fontslist.length = 0;
 613             VtoyFillCurrentPageItem(m_data_theme[g_vtoy_data_default_index]);
 614             VtoySaveCurrentPage();
 615         }
 616     });
 617   });
 618
 619   $('#id_tab_theme a[href="#tab_0"]').tab('show');
 620   VtoyFillCurrentPageItem(m_data_theme[0]);
 621   VtoyPageLanguageChange(g_current_language);
 622
 623 </script>