Ebobalik
/
uweb
forked from torappinfo/uweb


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
							<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <base href="https://fastly.jsdelivr.net/gh/fengdh/mdict-js/">
    <title>mdict</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="selectize.default.css" media="screen">
    <style>
      #btnLookup {
        border: none;
        height: 36px;
        font-size: 12pt;
        font-weight: bold;
        vertical-align: top;
        border-radius: 3px;
      }

      #btnLookup:not([disabled]) {
        background: #1A4FDD;
        color: white;
      }

      #dict-title {
        position: fixed;
        bottom: 0;
        right: 0;
        max-width: 300px;
        font-size: 10px;
        opacity: 0.9;
        background: #DDD;
        box-shadow: -2px -2px 4px 4px rgba(0, 0, 0, 0.3);
      }

      #dict-title * {
        font-size: 10px!important;
      }
      
      #mdict-online-viewer {
        font-size: 14px;
        font-family: "Georgia", "Times New Roman";
        height: 100%;
        width: 100%;
      }
      
      #mdict-online-viewer #definition {
        font-size: 14px;
        height: 100%;
        overflow: auto;
      }
      
      #word + .selectize-control {
        display: inline-block;
        min-width: 18em;
      }

    </style>
    <script type="text/javascript" src="conf.js"></script>
    <script src="require.js" data-main="mdict"></script>
  </head>
  <body>
    <section class="main-content">

      <div id="mdict-online-viewer">
        Choose a dictionary file (*.mdx + optional *.mdd): <input id="dictfile" type="file" multiple>
        <p>
        <input id="word" type="text" value="">
        <input id="btnLookup" type="button" value="look up" disabled="false">

        <div id="dict-title"></div>
        <div id="definition">
        </div>
      </div>
      
    </section>
    <script>
      //?file=./xxx/xx.xx,./xx/xx.xxx#word=
      let dictinput = document.getElementById('dictfile');
      let wordinput = document.getElementById('word');
      let btnLookup = document.getElementById('btnLookup');
      let v = location.hash.substring(6);
      wordinput.value = v;
      window.onhashchange = function() {
        let v = location.hash.substring(6);
        if(v.length>0){
          wordinput.value = v;
          //wordinput.dispatchEvent(new Event('change', {'bubbles': true}));
          btnLookup.click();
        }
      };

      //dictinput.onClick = {(e)=>{e.target.value="";}};
      let filenames = location.search.substring(6);
      if(filenames.length>0){
        dictinput.setAttribute('accept',filenames);
        setTimeout(()=>{location.href="i:5fdictinput.click();"},100);
        setTimeout(()=>{location.href="i:5fdictinput.click();"},300);
        setTimeout(()=>{dictinput.dispatchEvent(new Event('change'));dictinput.removeAttribute('accept')},500);
      }
      
    </script>
  </body>
</html>