chem tweak

chem/index.html

@@ -31,10 +31,7 @@
             white-space: pre-wrap;
         }
 
-        .btn-default:focus,
-        .btn-default:focus-visible,
-        .btn-default:focus-within,
-        .btn-default:active:focus {
+        .btn:is(:active, :focus, :active:focus, .active, .active:focus) {
             outline: none;
         }
 
@@ -44,7 +41,7 @@
             z-index: 0;
         }
 
-        .text-muted a {
+        .text-muted .MathJax {
             color: rgb(173, 173, 173);
         }
 
@@ -251,10 +248,10 @@
                     <label class="btn btn-default" onclick="modeq='upd';setQry()"><input type="radio">修改</label>
                 </div>
                 <div class="qry-group btn-group" data-toggle="buttons">
-                    <label class="btn btn-default active" onclick="nameq='eq';setQry()"><input type="radio">化学式</label>
-                    <label class="btn btn-default" onclick="nameq='mo';setQry()"><input type="radio">分子</label>
-                    <label class="btn btn-default" onclick="nameq='io';setQry()"><input type="radio">离子</label>
-                    <label class="btn btn-default" onclick="nameq='el';setQry()"><input type="radio">元素</label>
+                    <label class="btn btn-default active" onclick="nameq='eq';setQry(1)"><input type="radio">化学式</label>
+                    <label class="btn btn-default" onclick="nameq='mo';setQry(1)"><input type="radio">分子</label>
+                    <label class="btn btn-default" onclick="nameq='io';setQry(1)"><input type="radio">离子</label>
+                    <label class="btn btn-default" onclick="nameq='el';setQry(1)"><input type="radio">元素</label>
                 </div>
                 <button type="button" class="btn btn-default op op-query-eq" style="display: none;" data-toggle="button" onclick="$(this).toggleClass('btn-info');strict=!strict;toggl('查询 <span class=\'glyphicon glyphicon-search\'></span>', strict);input()" id="strict"><span class="glyphicon glyphicon-cog"></span> 限制等号左右</button>
                 <button type="button" class="btn btn-default op op-query-eq" style="display: none;" data-toggle="button" onclick="$(this).toggleClass('btn-info');qryToggleMatch()" id="qryMatch"><span class="glyphicon glyphicon-cog"></span> 匹配元素</button>
@@ -271,6 +268,7 @@
             </div>
             <div>
                 <span class="input-group add upd-eq upd-mo" id="addId"><span class="input-group-addon">id</span>
+                    <span class="input-group-btn add add-reload"><button style="border-radius: 0;margin-right:-1px" class="btn btn-default" onclick="$('.add-reload').hide();inputId()"><span class="glyphicon glyphicon-refresh normal"></span></button></span>
                     <input type="text" class="form-control" id="addIdText" oninput="inputId()" autocomplete="off" placeholder="输入 id">
                 </span>
                 <span class="input-group add add-eq">
@@ -295,46 +293,27 @@
                 </span>
                 <span class="input-group add add-mo" style="background-color: white;border-right: 1px solid #ccc;">
                     <span class="input-group-addon">类型</span>
-                    <div class="btn-group" data-toggle="buttons">
-                        <label class="btn btn-default type type-单质 add add-mo active" onclick="type=$(this).text().replace(/[ \n]/g,'')">
-                            <input type="radio"> 单质
-                        </label>
-                        <label class="btn btn-default type type-酸 add add-mo" onclick="type=$(this).text().replace(/[ \n]/g,'')">
-                            <input type="radio"> 酸
-                        </label>
-                        <label class="btn btn-default type type-碱 add add-mo" onclick="type=$(this).text().replace(/[ \n]/g,'')">
-                            <input type="radio"> 碱
-                        </label>
-                        <label class="btn btn-default type type-盐 add add-mo" onclick="type=$(this).text().replace(/[ \n]/g,'')">
-                            <input type="radio"> 盐
-                        </label>
-                        <label class="btn btn-default type type-氧化物 add add-mo" onclick="type=$(this).text().replace(/[ \n]/g,'')">
-                            <input type="radio"> 氧化物
-                        </label>
-                        <label class="btn btn-default type type-氢化物 add add-mo" onclick="type=$(this).text().replace(/[ \n]/g,'')">
-                            <input type="radio"> 氢化物
-                        </label>
-                    </div>
+                    <div class="btn-group type-list" data-toggle="buttons"></div>
                 </span>
                 <span class="input-group add add-eq add-mo">
                     <span class="input-group-addon">描述</span>
                     <textarea id="addDescription" type="text" class="form-control" autocomplete="off" style="resize:vertical"></textarea>
                 </span>
             </div>
-            <pre class="ok op op-query-eq op-query-mo op-query-io op-query-el" style="font-family: Chalkduster,Consolas;top: -1px;position: relative;border-top-left-radius: 0;border-top-right-radius: 0;"></pre>
+            <pre class="ok op" style="font-family: Chalkduster,Consolas;top: -1px;position: relative;border-top-left-radius: 0;border-top-right-radius: 0;"></pre>
             <hr>
             <button class="btn btn-default btn-xs pull-right" onclick="collapse=!collapse;setQry();$(this).children().toggle(300)">
                 <span><span class="glyphicon glyphicon-chevron-left"></span> 隐藏无关项</span>
                 <span style="display: none;"><span class="glyphicon glyphicon-chevron-right"></span> 显示</span>
             </button>
             <div class="has">
-                <span onclick="nameq='eq';setQry()">化学式</span>
+                <span onclick="nameq='eq';setQry(1)">化学式</span>
                 <div class="well frame active">
                     <span id="qryInputRender"></span>
                 </div>
             </div>
             <div class="has">
-                <span onclick="nameq='mo';setQry()">分子
+                <span onclick="nameq='mo';setQry(1)">分子
                     <button class="btn btn-default btn-xs" onclick="$('.ions').toggle()">
                         <span class="glyphicon glyphicon-chevron-down"></span> 离子组成
                     </button>
@@ -344,13 +323,13 @@
                 </div>
             </div>
             <div class="has">
-                <span onclick="nameq='io';setQry()">离子</span>
+                <span onclick="nameq='io';setQry(1)">离子</span>
                 <div class="well frame">
                     <span id="qryInputRender-io">...</span>
                 </div>
             </div>
             <div class="has">
-                <span onclick="nameq='el';setQry()">元素 </span>
+                <span onclick="nameq='el';setQry(1)">元素</span>
                 <div class="well frame frame-el">
                     <table class="table table-el"></table>
                 </div>

js/chem.js

@@ -194,6 +194,9 @@ $().ready(function () {
             $(e.currentTarget).children('span').click()
         }
     })
+    for (let i = 0; i < typelist.length; i++) {
+        $('.type-list').append(`<label class="btn btn-default type type-${typelist[i]} add add-mo${i ? '' : ' active'}" onclick="type=${typelist[i]}"><input type="radio"> ${typelist[i]} </label>`)
+    }
 })
 function setBal() {
     $('#precise').hide()
@@ -289,7 +292,7 @@ function toggl(str, is = 0) {
     if (is) $('.qryInputHidable').show()
     else $('.qryInputHidable').hide()
 }
-function setQry() {
+function setQry(f = 0) {
     $('.qry-group>label').removeClass('active')
     $('.frame').removeClass('active')
     $('.frame')[0].classList.add('active')
@@ -344,7 +347,7 @@ function setQry() {
         }
     }
     input2()
-    if (modeq == 'upd') inputId()
+    if (modeq == 'upd' && f) $('.add-reload').show(300)
     if (collapse) $('.frame:not(.active)').parent().hide(300), $('.frame.active:not(#balFrame)').parent().show(200);
     else $('.frame:not(#balFrame)').parent().show(300)
 }
@@ -415,11 +418,8 @@ function procClass(e) {
     getClass(1)
 }
 function renderTable(bd, e) {
-    bd = JSON.parse(bd).content.split('(')[0]
-    console.log(bd, e)
     var uc = [], ut = []
     for (i = 0; i < e.length; i++) {
-        console.log(JSON.parse(e[i].class).filter(e => e[bd])[0])
         let k = JSON.parse(e[i].class).filter(e => e[bd])[0][bd]
         if (!uc.includes(k)) uc.push(k)
         if (!ut.includes(e[i].type)) ut.push(e[i].type)
@@ -444,7 +444,7 @@ function renderTable(bd, e) {
             for (let k = 0; k < f.length; k++) {
                 g += `${f[k].content}`
                 if (k < f.length - 1) g += ';'
-                if (k % 5 == 0) {
+                if (k % 5 == 4) {
                     str += renderEquation(g)
                     g = ''
                 }
@@ -550,7 +550,7 @@ function renderResult(bd, e, isId, replace, insAfter) {
             str += e[i].title + '<br>';
             ionClass[e[i].id] = e[i].class
             if (useIonId) {
-                okstr += e[i].content + ' / ';
+                // okstr += e[i].content + ' / ';
                 ionRegex += '(?=.*"id":' + e[i].id + ',.*)'
             } else if (isId) {
                 if (replace) $('#qryInput').val(e[0].content)
@@ -567,8 +567,17 @@ function renderResult(bd, e, isId, replace, insAfter) {
         }
         ionRegex += '.*'
         if (insAfter == -1) $('.frame')[3].innerHTML += str
-        $('.ok').text(okstr)
-    } else renderTable(bd, e)
+        // $('.ok').text(okstr)
+    } else {
+        str = ''
+        bd = JSON.parse(bd).content.split('(')[0]
+        str += `${bd} - ${list.indexOf(bd) > 0 ? `第 ${list.indexOf(bd)} 号` : '未知'}元素`
+        if (list.indexOf(bd) > 0) {
+
+        }
+        $('.frame')[4].innerHTML = str + '<table class="table table-el"></table>'
+        renderTable(bd, e)
+    }
     MathJax.typeset()
     return e.length
 }
@@ -655,7 +664,7 @@ function query() {
             })
         } else {
             var cont = getRegex();
-            $('.ok').text(cont);
+            // $('.ok').text(cont);
             if (cont == '') return
             bd = JSON.stringify({
                 content: cont,
@@ -803,7 +812,7 @@ function input2() {
         getOkIons()
     } else {
         if (modeq == 'query') {
-            $('.ok').text(getRegex())
+            // $('.ok').text(getRegex())
         }
         if ($('#qryInput').val() && $('#qryInput').val().match(/^\d+!?$/g)) {
             doQuery(JSON.stringify({ content: $('#qryInput').val().split('!')[0] }), 'id', 0)
@@ -853,4 +862,4 @@ function qryToggleMatch() {
     }
 }
 
-var type = '酸';
+var typelist = ['单质', '酸', '碱', '盐', '氧化物', '氢化物'], type = typelist[0];