Plugson/www/plugson_menu_tip.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-commenting">&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/en/plugin_menutip.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       <div class="nav-tabs-custom">
  16         <ul class="nav nav-tabs" id="id_tab_menu_tip">
  17             <li class=""><a href="#tab_0" data-toggle="tab" aria-expanded="false" style="font-weight:bold" >menu_tip</a></li>
  18             <li class=""><a href="#tab_1" data-toggle="tab" aria-expanded="false"  style="font-weight:bold">menu_tip_legacy</a></li>
  19             <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false"  style="font-weight:bold">menu_tip_uefi</a></li>
  20             <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false"  style="font-weight:bold">menu_tip_ia32</a></li>
  21             <li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="false"  style="font-weight:bold">menu_tip_aa64</a></li>
  22             <li class=""><a href="#tab_5" data-toggle="tab" aria-expanded="false"  style="font-weight:bold">menu_tip_mips</a></li>
  23         </ul>
  24       </div>
  25
  26       <div class="box box-primary box-solid">
  27         <div class="box-header with-border">
  28           <h3 class="box-title" style="font-size: 14px;font-weight: bold;">Menu Tips
  29             <span id="id_span_desc_cn"> —— 菜单提示信息</span></h3>
  30           <div class="box-tools pull-right">
  31             <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
  32           </div><!-- /.box-tools -->
  33         </div><!-- /.box-header -->
  34         <div class="box-body no-padding">
  35           <table id="id_tip_tbl" class="table table-bordered">
  36             <thead>
  37               <tr>
  38                 <th style="width: 2%;">#</th>
  39                 <th id="id_th_tip_type" style="width: 5%;"></th>
  40                 <th id="id_th_tip_path" style="width: 35%;"></th>
  41                 <th id="id_th_status" style="width: 5%;"></th>
  42                 <th id="id_th_tip_tip" style="width: 40%;"></th>
  43                 <th id="id_th_operation" style="width: 5%;"></th>
  44               </tr>
  45             </thead>
  46             <tbody>
  47             </tbody>
  48           </table>
  49         </div>
  50       </div>
  51       <br/><br/>
  52
  53       <div class="box box-primary box-solid">
  54         <div class="box-header with-border">
  55           <h3 class="box-title" style="font-size: 14px;font-weight: bold;">Tip Style
  56             <span id="id_span_desc_cn"> —— 提示信息显示位置</span></h3>
  57           <div class="box-tools pull-right">
  58             <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
  59           </div><!-- /.box-tools -->
  60         </div><!-- /.box-header -->
  61         <div class="box-body no-padding">
  62           <table id="id_tip_style" class="table table-bordered">
  63             <thead>
  64               <tr>
  65                 <th id="id_th_tip_opt" style="width: 10%;"></th>
  66                 <th id="id_th_tip_set" style="width: 20%;"></th>
  67                 <th id="id_th_tip_notes" style="width: 70%;"></th>
  68               </tr>
  69             </thead>
  70             <tbody>
  71               <tr>
  72                 <td>left</td>
  73                 <td>
  74                     <input type="text" class="form-control" id="id_tip_text_left"/>
  75                 </td>
  76                 <td>
  77                   <span id="id_span_desc_cn">提示信息显示的 X 坐标百分比（相对于左上角）</span>
  78                   <span id="id_span_desc_en">X position of the tip message. (Percentage form relative to the upper left corner)</span>
  79                 </td>
  80               </tr>
  81               <tr>
  82                 <td>top</td>
  83                 <td>
  84                     <input type="text" class="form-control" id="id_tip_text_top"/>
  85                 </td>
  86                 <td>
  87                   <span id="id_span_desc_cn">提示信息显示的 Y 坐标百分比（相对于左上角）</span>
  88                   <span id="id_span_desc_en">Y position of the tip message. (Percentage form relative to the upper left corner)</span>
  89                 </td>
  90               </tr>
  91               <tr>
  92                 <td>color</td>
  93                 <td>
  94                     <input type="text" class="form-control" id="id_tip_text_color"/>
  95                 </td>
  96                 <td>
  97                   <span id="id_span_desc_cn">提示信息的颜色。可以是 <code>blue/red/green/...</code> 等这种格式，也可以设置为 <code>#00ff00</code> 这种格式。</span>
  98                   <span id="id_span_desc_en">Color of the tip message. Can be in <code>blue/red/green/...</code> or <code>#00ff00</code> format.</span>
  99                 </td>
 100               </tr>
 101             </tbody>
 102           </table>
 103         </div>
 104       </div>
 105
 106
 107     </div>
 108 </div>
 109 <script type="text/javascript">
 110
 111   function VtoyPageLanguageChange(newlang) {
 112     VtoyCommonChangeLanguage(newlang);
 113     $('h1[id=id_h1_page_title]').text(g_vtoy_cur_language.STR_PLUG_TIP);
 114
 115     $("span[id=id_span_file_exist]").each(function(){
 116         $(this).text(g_vtoy_cur_language.STR_FILE_EXIST);
 117     });
 118     $("span[id=id_span_file_nonexist]").each(function(){
 119         $(this).text(g_vtoy_cur_language.STR_FILE_NONEXIST);
 120     });
 121     $("span[id=id_span_file_fuzzy]").each(function(){
 122         $(this).text(g_vtoy_cur_language.STR_FILE_FUZZY);
 123     });
 124
 125     $("span[id=id_span_dir_exist]").each(function(){
 126         $(this).text(g_vtoy_cur_language.STR_DIR_EXIST);
 127     });
 128
 129     $("span[id=id_span_dir_nonexist]").each(function(){
 130         $(this).text(g_vtoy_cur_language.STR_DIR_NONEXIST);
 131     });
 132
 133
 134
 135     if (newlang === 'en') {
 136       $('#id_th_tip_path').text('Absolute Path');
 137       $('#id_th_tip_tip').text('Tip');
 138       $('#id_th_tip_type').text('Type');
 139       $("th[id=id_th_tip_opt]").text('Option');
 140       $("th[id=id_th_tip_set]").text('Setting');
 141       $("th[id=id_th_tip_notes]").text('Notes');
 142
 143       $("span[id=id_span_desc_cn]").each(function(){
 144           $(this).hide();
 145       });
 146       $("span[id=id_span_desc_en]").each(function(){
 147           $(this).show();
 148       });
 149     } else {
 150       $('#id_th_tip_path').text('绝对路径');
 151       $('#id_th_tip_tip').text('提示');
 152       $('#id_th_tip_type').text('类型');
 153       $("th[id=id_th_tip_opt]").text('选项');
 154       $("th[id=id_th_tip_set]").text('设置');
 155       $("th[id=id_th_tip_notes]").text('说明');
 156       $("span[id=id_span_desc_en]").each(function(){
 157           $(this).hide();
 158       });
 159       $("span[id=id_span_desc_cn]").each(function(){
 160           $(this).show();
 161       });
 162     }
 163   }
 164
 165   function FillTipTable(data) {
 166     var addbtn = ventoy_get_xslg_addbtn('TipAddBtn');
 167     var delbtn = ventoy_get_xslg_delbtn('TipDelBtn');
 168
 169     var td1, td2, td3, td4, td5, td6;
 170     var $tbl = $("#id_tip_tbl tbody");
 171     $tbl.empty();
 172
 173     for (var i = 0; i < data.length; i++) {
 174       var $tr;
 175       td1 = '<td>' + (i + 1) + '</td>';
 176       td2 = (data[i].type === 0) ? '<td>image</td>' : '<td>dir</td>';
 177       td3 = '<td>' + data[i].path + '</td>';
 178       td4 = '<td>' + ventoy_get_status_line(data[i].type, data[i].valid) + '</td>';
 179       td5 = '<td>' + data[i].tip + '</td>';
 180       td6 = '<td>' + delbtn + '</td>';
 181
 182       $tr = $('<tr>' + td1 + td2 + td3 + td4 + td5 + td6 + '</tr>');
 183
 184       $tr.data('path', data[i].path);
 185       $tr.data('index', i);
 186       $tbl.append($tr);
 187     }
 188
 189     $tbl.append('<tr><td></td><td></td><td></td><td></td><td></td><td>' + addbtn + '</td></tr>');
 190   }
 191
 192   function VtoyFillCurrentPageItem(data) {
 193
 194     $('input:text[id=id_tip_text_left]').val(data.left);
 195     $('input:text[id=id_tip_text_top]').val(data.top);
 196     $('input:text[id=id_tip_text_color]').val(data.color);
 197
 198     FillTipTable(data);
 199   }
 200
 201
 202   function OnClickMultiModeTab() {
 203     var href = $(this).attr('href');
 204     var index = parseInt(href.substr(5, 1));
 205
 206     if (index < 0 || index >= g_vtoy_data_default_index || current_tab_index === index) {
 207       return;
 208     }
 209
 210     current_tab_index = index;
 211     VtoyFillCurrentPageItem(m_data_tip[index].tips);
 212   }
 213
 214   //Main process
 215   var m_data_tip;
 216   var current_tab_index = 0;
 217   callVtoySync({method : 'get_tip'}, function(data) {
 218     m_data_tip = data;
 219   });
 220
 221
 222   function AddTipEntry(root, type, valid, extra) {
 223     var list = m_data_tip[current_tab_index].tips;
 224     var data = {
 225       "path": root.substr(g_current_dir.length),
 226       "tip": extra,
 227       "type": type,
 228       "valid": valid
 229     };
 230
 231     for (var i = 0; i < list.length; i++) {
 232       if (list[i].path === data.path) {
 233         Message.error(g_vtoy_cur_language.STR_DUPLICATE_PATH);
 234         return;
 235       }
 236     }
 237
 238     callVtoy({
 239       method : 'tip_add',
 240       index: current_tab_index,
 241       path: data.path,
 242       tip: data.tip,
 243       type: type
 244     }, function(e) {
 245       list.push(data);
 246       FillTipTable(list);
 247       Message.success(g_vtoy_cur_language.STR_SAVE_SUCCESS);
 248     });
 249   }
 250
 251   function OnAddImageTip(root, valid, extra) {
 252     AddTipEntry(root, 0, valid, extra);
 253   }
 254
 255   function OnAddDirTip(root, extra) {
 256     AddTipEntry(root, 1, 1, extra);
 257   }
 258
 259   function OnAddTipBtnClick(sel)  {
 260     if (sel === 0) {
 261       var tip1 = (g_current_os === 'windows') ? '\\ISO\\Windows11.iso' : "/ISO/Ubuntu-20.04-desktop-amd64.iso";
 262       var tip2 = (g_current_os === 'windows') ? '\\ISO\\Windows**.iso' : "/ISO/Ubuntu-*****-desktop-amd64.iso";
 263       var para = {
 264           "title": g_vtoy_cur_language.STR_SET_TIP,
 265           "fuzzy": 1,
 266           "tip1": g_current_dir + tip1,
 267           "tip2": g_current_dir + tip2,
 268           "tip3": '',
 269           "extra": true,
 270           "extra_title": g_vtoy_cur_language.STR_TIP
 271       };
 272       VtoySelectFilePath(OnAddImageTip, para);
 273     } else {
 274       var tip = (g_current_os === 'windows') ? '\\ISO\\Windows' : "/ISO/Linux";
 275       var para = {
 276           "title": g_vtoy_cur_language.STR_SET_TIP,
 277           "tip": g_current_dir + tip,
 278           "tip3": '',
 279           "extra": true,
 280           "extra_title": g_vtoy_cur_language.STR_TIP
 281       };
 282       VtoySelectDirPath(OnAddDirTip, para);
 283     }
 284   }
 285
 286   $("#id_tip_tbl").on('click', '.TipAddBtn', function() {
 287     var para = [
 288       {
 289         "selected": true,
 290         "tip": g_vtoy_cur_language.STR_SET_TIP_FOR_FILE
 291       },
 292       {
 293         "selected": false,
 294         "tip": g_vtoy_cur_language.STR_SET_TIP_FOR_DIR
 295       }
 296     ];
 297
 298     VtoySelectType(OnAddTipBtnClick, para);
 299   });
 300
 301   $("#id_tip_tbl").on('click', '.TipDelBtn', function() {
 302     var $tr = $(this).closest('tr');
 303                 var path = $tr.data('path');
 304     var index = $tr.data('index');
 305
 306     callVtoySync({
 307         method : 'tip_del',
 308         index: current_tab_index,
 309         path: path
 310     }, function(data) {
 311       m_data_tip[current_tab_index].tips.splice(index, 1);
 312       FillTipTable(m_data_tip[current_tab_index].tips);
 313       Message.success(g_vtoy_cur_language.STR_SAVE_SUCCESS);
 314     });
 315   });
 316
 317   function VtoySaveCurrentPage() {
 318     var left = $('input:text[id=id_tip_text_left]').val();
 319     var top = $('input:text[id=id_tip_text_top]').val();
 320     var color = $('input:text[id=id_tip_text_color]').val();
 321
 322     callVtoy({
 323       method : 'save_tip',
 324       index: current_tab_index,
 325       left: left,
 326       top: top,
 327       color: color
 328     }, function(e) {
 329       Message.success(g_vtoy_cur_language.STR_SAVE_SUCCESS);
 330     });
 331   }
 332
 333   $('input:text[id=id_tip_text_left]').change(function() {
 334     var value = $('input:text[id=id_tip_text_left]').val();
 335     if (ventoy_check_percent(value)) {
 336       VtoySaveCurrentPage();
 337     } else {
 338       Message.error(g_vtoy_cur_language.STR_INVALID_PERCENT);
 339       $('input:text[id=id_tip_text_left]').val(m_data_tip[current_tab_index].left);
 340     }
 341   });
 342   $('input:text[id=id_tip_text_top]').change(function() {
 343     var value = $('input:text[id=id_tip_text_top]').val();
 344     if (ventoy_check_percent(value)) {
 345       VtoySaveCurrentPage();
 346     } else {
 347       Message.error(g_vtoy_cur_language.STR_INVALID_PERCENT);
 348       $('input:text[id=id_tip_text_top]').val(m_data_tip[current_tab_index].top);
 349     }
 350   });
 351   $('input:text[id=id_tip_text_color]').change(function() {
 352     var value = $('input:text[id=id_tip_text_color]').val();
 353     if (value.length > 0) {
 354       if (ventoy_check_color(value)) {
 355         VtoySaveCurrentPage();
 356       } else {
 357         Message.error(g_vtoy_cur_language.STR_INVALID_COLOR);
 358         $('input:text[id=id_tip_text_color]').val(m_data_tip[current_tab_index].color);
 359       }
 360     } else {
 361       $('input:text[id=id_tip_text_color]').val(m_data_tip[current_tab_index].color);
 362     }
 363   });
 364
 365
 366   $('#id_tab_menu_tip a[href="#tab_0"]').click(OnClickMultiModeTab);
 367   $('#id_tab_menu_tip a[href="#tab_1"]').click(OnClickMultiModeTab);
 368   $('#id_tab_menu_tip a[href="#tab_2"]').click(OnClickMultiModeTab);
 369   $('#id_tab_menu_tip a[href="#tab_3"]').click(OnClickMultiModeTab);
 370   $('#id_tab_menu_tip a[href="#tab_4"]').click(OnClickMultiModeTab);
 371   $('#id_tab_menu_tip a[href="#tab_5"]').click(OnClickMultiModeTab);
 372
 373   $('#id_tab_menu_tip a[href="#tab_0"]').tab('show');
 374   VtoyFillCurrentPageItem(m_data_tip[0]);
 375   VtoyPageLanguageChange(g_current_language);
 376
 377 </script>