Plugson/www/plugson_theme.html

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