doc: auto prompt for available translate doc version

docs/static/pywebio.js

@@ -1,3 +1,5 @@
+// Generate Doc online Demo link
+
 let DEMO_URL;
 if (localStorage.getItem('pywebio_doc_demo_url'))
     DEMO_URL = localStorage.getItem('pywebio_doc_demo_url');
@@ -30,3 +32,65 @@ ready(function () {
         ele.insertBefore(node, ele.firstChild);
     }
 });
+
+// Translated Version Prompt
+const user_lang = (navigator.language || navigator.userLanguage || 'en').toLowerCase().split('-')[0];
+const doc_lang = window.location.pathname.split('/')[1].split('_')[0];
+if (user_lang !== doc_lang && ['zh', 'en'].indexOf(user_lang) !== -1) {
+    let u = new URL(window.location.href);
+    let t = u.pathname.split('/');
+    t[1] = user_lang === 'en' ? 'en' : 'zh_CN';
+    u.pathname = t.join('/');
+
+    let turl = u.href;
+    let target_name, summary;
+    if (user_lang === 'en') {
+        target_name = 'English version';
+        summary = 'The English version of this document is available. Switch to ';
+    } else {
+        target_name = '中文版';
+        summary = '本文档有中文版本可用。切换至';
+    }
+    jQuery.ajax({
+        url: turl,
+        success: function () {
+            jQuery(function () {
+                jQuery('.rst-content>.document').before(`
+<div style="position: relative;
+    padding: 1rem 1rem;
+    margin-bottom: 0.8rem;
+    margin-top: 0.8rem;
+    border: 1px solid transparent;
+    border-radius: .25rem;
+    color: #0f5132;
+    background-color: #d1e7dd;
+    border-color: #badbcc;" role="alert">
+    ${summary}<a href="${turl}" style="color: #0c4128;font-weight: 700;">${target_name}</a>
+</div>`);
+
+                jQuery('body').append(`
+<div style="position: fixed;
+    font-size: 14px;
+    width: auto;
+    right: 1rem;
+    bottom: 0rem;
+    padding: 0.4rem 1rem;
+    margin-bottom: 3rem;
+    border: 1px solid transparent;
+    border-radius: .25rem;
+    color: #0f5132;
+    background-color: #d1e7dd;
+    border-color: #badbcc;" role="alert">
+    <span style="vertical-align:middle">
+        <svg style="width: 1rem;height: 1rem;fill: currentColor;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0014.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04M18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12m-2.62 7l1.62-4.33L19.12 17h-3.24z"></path></svg>
+    </span>
+    <a href="${turl}" style="color: #0c4128;font-weight: 700;">${target_name}</a>
+</div>`);
+            })
+        },
+        dataType: 'html'
+    });
+
+}
+
+