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