beautify chem

chem/index.html

@@ -34,12 +34,7 @@
         .btn-default:focus-visible,
         .btn-default:focus-within,
         .btn-default:active:focus {
-            outline: 4px dashed rgba(59, 86, 100, 0.5);
-        }
-
-        .btn-default:hover {
-            outline: 10px double rgba(59, 86, 100, 0.5);
-            z-index: 4 !important
+            outline: none;
         }
 
         .btn.disabled {
@@ -90,7 +85,7 @@
             height: 34px;
         }
     </style>
-    <script id="MathJax-script" src="https://cdn.bootcss.com/mathjax/3.2.2/es5/tex-mml-chtml.js"></script>
+    <script id="MathJax-script" src="https://cdn.bootcss.com/mathjax/3.2.0/es5/tex-chtml.js"></script>
     <script src="/js/chem.js"></script>
 
 </head>
@@ -105,12 +100,20 @@
             <p>小提示：<br><code>&lt;e+&gt;</code>、<code>&lt;2e-&gt;</code> 用于标注电荷，<code>.</code> 用于代替水合物等中间的点。输入 ! 快速查询并导入结果。</p>
         </div>
         <div class="col-lg-8 col-md-10 col-xs-12">
-            <h2>化学小工具<small>
-                    <a href="#" onclick="setBal()">配平</a>
-                    <a href="#" onclick="setWeigh()">相对质量</a>
-                    <a href="#" onclick="setWeigh2()" data-toggle="tooltip" data-placement="top" title="四位有效数字">相对质量*</a>
-                    <a href="/chemist" data-toggle="tooltip" data-placement="top" title="将打开新页面">配平接口</a>
-                </small></h2>
+            <h2>化学小工具
+                <div class="btn-group" data-toggle="buttons">
+                    <label class="btn btn-default active" onclick="setBal()">
+                        <input type="radio"> 配平
+                    </label>
+                    <label class="btn btn-default" onclick="setWeigh()">
+                        <input type="radio"> 相对质量
+                    </label>
+                </div>
+                <button type="button" class="btn btn-default" style="display: none;" data-toggle="button" onclick="$(this).toggleClass('btn-info');precise=!precise;input()" id="precise"><span class="glyphicon glyphicon-cog"></span> 高精度</button>
+                <a class="btn btn-default" href="/chemist">
+                    <span class="glyphicon glyphicon-link"></span> 配平接口
+                </a>
+            </h2>
             <div class="input-group">
                 <!-- <span class="input-group-btn">
                     <button type="button" class="btn btn-default" onclick="balUp()" id="balShare" title="导入配平结果"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
@@ -118,7 +121,7 @@
                 <input id="balInput" type="text" class="form-control" oninput="input()" autocomplete="off">
                 <span class="input-group-btn">
                     <button type="button" class="btn btn-default" onclick="balance()" id="balBtn">配平</button>
-                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                    <!-- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                         <span class="caret"></span>
                         <span class="sr-only">切换下拉菜单</span>
                     </button>
@@ -130,30 +133,38 @@
                         <li class="divider"></li>
                         <li><a href="/chemist" data-toggle="tooltip" data-placement="left" title="将打开新页面">配平接口</a>
                         </li>
-                    </ul>
+                    </ul> -->
                 </span>
             </div>
             <hr>
             <div class="well frame">
             </div>
             <hr>
-            <h2>数据库<small>
-                    <a href="#1" onclick="setQryEq()">查询方程式</a>
-                    <a href="#1" onclick="setQryEq2()" data-toggle="tooltip" data-placement="top" title="限制等号左右">查询方程式*</a>
-                    <a href="#5" onclick="setAddEq()">上传方程式</a>
-                    <a href="#1" onclick="setUpdEq()">修改方程式</a>
-                </small></h2>
+            <h2>数据库
+                <div class="btn-group" data-toggle="buttons">
+                    <label class="btn btn-default active" onclick="setQryEq()">
+                        <input type="radio"> 查询
+                    </label>
+                    <label class="btn btn-default" onclick="setAddEq()">
+                        <input type="radio"> 上传
+                    </label>
+                    <label class="btn btn-default" onclick="setUpdEq()">
+                        <input type="radio"> 修改
+                    </label>
+                </div>
+                <button type="button" class="btn btn-default" style="display: none;" data-toggle="button" onclick="$(this).toggleClass('btn-info');strict=!strict;toggl('查询方程式 <span class=\'glyphicon glyphicon-search\'></span>', 0, strict);input()" id="strict"><span class="glyphicon glyphicon-cog"></span> 限制等号左右</button>
+                <button type="button" class="btn btn-default" style="display: none;" data-toggle="button" onclick="$(this).toggleClass('btn-info');qryToggleMatch()" id="qryMatch"><span class="glyphicon glyphicon-cog"></span> 匹配分子</button>
+            </h2>
             <div class="input-group">
                 <span class="input-group-btn">
                     <button type="button" class="btn btn-default" style="border-bottom-left-radius: 0;"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
-                    <button type="button" class="btn btn-default" data-toggle="button" onclick="qryToggleMatch()" id="qryMatch">匹配分子</button>
                 </span>
                 <input id="qryInput" type="text" class="form-control qryInput" autocomplete="off" oninput="input2()">
                 <span class="input-group-addon qryInputHidable" style="display:none">=</span>
                 <input id="qryInput2" type="text" class="form-control qryInput qryInputHidable" style="display:none" autocomplete="off" oninput="input2()">
                 <span class="input-group-btn">
                     <button type="button" class="btn btn-default" onclick="query()" id="qryBtn">查询方程式</button>
-                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="border-bottom-right-radius: 0;">
+                    <!-- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="border-bottom-right-radius: 0;">
                         <span class="caret"></span>
                         <span class="sr-only">切换下拉菜单</span>
                     </button>
@@ -161,15 +172,15 @@
                         <li class="dropdown-header">功能</li>
                         <li><a href="#1" onclick="setQryEq()">查询方程式</a></li>
                         <li><a href="#1" onclick="setQryEq2()" data-toggle="tooltip" data-placement="left" title="限制等号左右">查询方程式*</a></li>
-                        <!-- <li><a href="#4" onclick="setQryMo()">查询分子</a></li> -->
+                        <li><a href="#4" onclick="setQryMo()">查询分子</a></li>
                         <li class="divider"></li>
                         <li><a href="#5" onclick="setAddEq()">上传方程式</a></li>
-                        <!-- <li><a href="#5" onclick="setAddMo()">上传分子</a></li> -->
+                        <li><a href="#5" onclick="setAddMo()">上传分子</a></li>
                         <li class="divider"></li>
                         <li><a href="#1" onclick="setUpdEq()">修改方程式</a></li>
-                        <!-- <li><a href="#4" onclick="setUpdMo()">修改分子</a></li> -->
+                        <li><a href="#4" onclick="setUpdMo()">修改分子</a></li>
                         </li>
-                    </ul>
+                    </ul> -->
                 </span>
             </div>
             <div class="input-group addInput">

js/chem.js

@@ -26,7 +26,7 @@ var weighList2 = {
     Fr: 223, Ra: 226.0, Ac: 227.0, Th: 232.0, Pa: 231.0, U: 238.0, Np: 237.0, Pu: 244, Am: 243, Cm: 247, Bk: 247, Cf: 251, Es: 252, Fm: 257, Md: 258, No: 259, Lr: 260, Rf: 261, Db: 262, Sg: 263, Bh: 262, Hs: 265, Mt: 266, Ds: 269, Rg: 272, Cn: 285, Nh: 284, Fl: 289, Mc: 288, Lv: 293, Ts: 291, Og: 294
 }
 
-var bracket = {}, preview = 1
+var bracket = {}, preview = 1, precise = 0
 
 function getco(str) {
     var n = str.length, ret = 0
@@ -211,17 +211,19 @@ $().ready(function () {
     $(function () { $("[data-toggle='tooltip']").tooltip(); });
 })
 function setBal() {
+    $('#precise').hide()
     $('.frame')[0].innerHTML = renderEquation(balText);
-    MathJax.typeset()
-    $('#balBtn').text('配平')
+    $('#balBtn').html('配平 <span class="glyphicon glyphicon-transfer"></span>')
     $('#balShare').removeClass('disabled')
     $('#balInput').attr('placeholder', case1 + '（输入化学式以配平）')
     $('#balBtn').attr('href', '/chem?' + case1)
     $('#balBtn').removeClass('disabled')
     mode = 'bal'
     input()
+    MathJax.typeset()
 }
 function setWeigh() {
+    $('#precise').show()
     $('#balBtn').text('相对质量')
     $('#balShare').addClass('disabled')
     $('#balInput').attr('placeholder', case2 + '（输入化学式以计算相对质量）')
@@ -230,15 +232,6 @@ function setWeigh() {
     mode = 'weigh'
     input()
 }
-function setWeigh2() {
-    $('#balBtn').text('相对质量*')
-    $('#balShare').addClass('disabled')
-    $('#balInput').attr('placeholder', case2 + '（输入化学式以计算相对质量）')
-    $('#balBtn').attr('href', '')
-    $('#balBtn').addClass('disabled')
-    mode = 'weigh2'
-    input()
-}
 function input() {
     inputText = balInput.value
     if (mode == 'bal') {
@@ -246,10 +239,7 @@ function input() {
             + '<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span><br>' + ((balText != '') ? (renderEquation(balText)) : ('...'));
     } else if (mode == 'weigh') {
         $('.frame')[0].innerHTML = renderEquation((inputText == '') ? case2 : inputText) + '<br>'
-            + weighEquation((inputText == '') ? case2 : inputText);
-    } else if (mode == 'weigh2') {
-        $('.frame')[0].innerHTML = renderEquation((inputText == '') ? case2 : inputText) + '<br>'
-            + weighEquation((inputText == '') ? case2 : inputText, 1);
+            + weighEquation((inputText == '') ? case2 : inputText, precise);
     }
     if (preview) MathJax.typeset()
     if (inputText.match('!')) {
@@ -280,13 +270,13 @@ function balance() {
     }).then(
         res => res.text()
     ).then(e => {
-        if(e=='{}')e='"!Description: Invalid Character."'
+        if (e == '{}') e = '"!Description: Invalid Character."'
         e = e.split('"')[1].replace(/\\n/g, '\n')
         $('.frame')[0].innerHTML = (e.charAt(0) == '!') ? ('<pre class="text-danger bg-danger">' + e.slice(1, e.length) + '</pre>') : (renderEquation((inputText == '') ? case1 : inputText)
             + '<br><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span><br>' + renderEquation(e));
         if (e.charAt(0) != '!') balText = e
         MathJax.typeset()
-        $('#balBtn').text('配平')
+        $('#balBtn').html('配平 <span class="glyphicon glyphicon-transfer"></span>')
         $('#balBtn').removeClass('disabled')
         $('.frame').removeClass('text-muted')
         running = 0;
@@ -304,35 +294,35 @@ function balUp() {
 
 var modeq = 'query', nameq = 'eq', strict = false, matchMode = 'mole'
 function toggl(str, e = 0, f = 0) {
-    $('#qryBtn').text(str)
+    $('#qryBtn').html(str)
     if (e) {
+        $('#strict').hide()
         $('#qryMatch').hide(), $('.addInput').show(), $('.ok').hide()
         if (e == 2) $('#addId').show()
         else $('#addId').hide()
     }
-    else $('#qryMatch').show(), $('.addInput').hide(), $('.ok').show()
+    else {
+        $('#strict').show()
+        $('#qryMatch').show(), $('.addInput').hide(), $('.ok').show()
+    }
     if (f) $('.qryInputHidable').show()
     else $('.qryInputHidable').hide()
 }
 function setQryEq() {
-    toggl('查询方程式')
+    toggl('查询方程式 <span class="glyphicon glyphicon-search"></span>')
     modeq = 'query', nameq = 'eq', strict = false
+    $('#strict').removeClass('btn-primary').removeClass('active')
+    $('#qryMatch').removeClass('btn-primary').removeClass('active')
     $('#qryInput').attr('placeholder', 'O2=H2O' + '（输入化学式查询数据库，也可输入 id）')
     input2();
 }
-function setQryEq2() {
-    toggl('查询方程式*', 0, 1)
-    modeq = 'query', nameq = 'eq', strict = true
-    $('#qryInput').attr('placeholder', 'H2O')
-    input2();
-}
 function setQryMo() {
     toggl('查询分子')
     modeq = 'query', nameq = 'mo'
     input2();
 }
 function setAddEq() {
-    toggl('上传方程式', 1)
+    toggl('上传方程式 <span class="glyphicon glyphicon-plus"></span>', 1)
     modeq = 'add', nameq = 'eq'
     $('#qryInput').attr('placeholder', 'H2+O2=H2O' + '（输入化学式上传至数据库）')
 }
@@ -341,7 +331,7 @@ function setAddMo() {
     modeq = 'add', nameq = 'mo'
 }
 function setUpdEq() {
-    toggl('修改方程式', 2)
+    toggl('修改方程式 <span class="glyphicon glyphicon-pencil"></span>', 2)
     modeq = 'upd', nameq = 'eq'
     $('#qryInput').attr('placeholder', '（输入 id 修改已有化学式）')
 }
@@ -542,10 +532,10 @@ function inputId() {
 
 function qryToggleMatch() {
     if (matchMode == 'mole') {
-        $('#qryMatch')[0].innerHTML = '匹配元素'
+        $('#qryMatch').html('<span class="glyphicon glyphicon-cog"></span> 匹配元素')
         matchMode = 'elem'
     } else {
-        $('#qryMatch')[0].innerHTML = '匹配分子'
+        $('#qryMatch').html('<span class="glyphicon glyphicon-cog"></span> 匹配分子')
         matchMode = 'mole'
     }
 }