Enable wide editor and flat MathML in home page.

site/index.html

@@ -137,6 +137,9 @@ <h1 id="title">
       <path fill="#000000" d="M6.879 9.934c-0.208 0-0.416-0.079-0.575-0.238-1.486-1.486-1.486-3.905 0-5.392l3-3c0.72-0.72 1.678-1.117 2.696-1.117s1.976 0.397 2.696 1.117c1.486 1.487 1.486 3.905 0 5.392l-1.371 1.371c-0.317 0.317-0.832 0.317-1.149 0s-0.317-0.832 0-1.149l1.371-1.371c0.853-0.853 0.853-2.241 0-3.094-0.413-0.413-0.963-0.641-1.547-0.641s-1.134 0.228-1.547 0.641l-3 3c-0.853 0.853-0.853 2.241 0 3.094 0.317 0.317 0.317 0.832 0 1.149-0.159 0.159-0.367 0.238-0.575 0.238z"></path>
       <path fill="#000000" d="M4 15.813c-1.018 0-1.976-0.397-2.696-1.117-1.486-1.486-1.486-3.905 0-5.392l1.371-1.371c0.317-0.317 0.832-0.317 1.149 0s0.317 0.832 0 1.149l-1.371 1.371c-0.853 0.853-0.853 2.241 0 3.094 0.413 0.413 0.962 0.641 1.547 0.641s1.134-0.228 1.547-0.641l3-3c0.853-0.853 0.853-2.241 0-3.094-0.317-0.317-0.317-0.832 0-1.149s0.832-0.317 1.149 0c1.486 1.486 1.486 3.905 0 5.392l-3 3c-0.72 0.72-1.678 1.117-2.696 1.117z"></path>
       </svg></button>
+    <span>   </span>
+    <input type="checkbox" id="wide" name="wide">
+    <label for="wide">Wide</label>&nbsp;
     <div style="float: right;">
       <input type="checkbox" id="displayMode" name="displayMode" checked>
       <label for="displayMode">Display Mode</label>&nbsp;
@@ -150,6 +153,7 @@ <h1 id="title">
       <select id="OutputType" onchange="reprocess()">
         <option value="Math">Math</option>
         <option value="MathML">MathML</option>
+        <option value="Flat MML">Flat MML</option>
       </select>&nbsp;
       <button onclick="copyMathML()" style="width: 30px; height: 30px; margin-top: 4px; border: 0.5px solid; border-radius: 5px" title="Copy MathML"><svg width="16" height="16"><!-- Generated by IcoMoon.io -->
         <path fill="#000000" d="M10 4v-4h-7l-3 3v9h6v4h10v-12h-6zM3 1.414v1.586h-1.586l1.586-1.586zM1 11v-7h3v-3h5v3l-3 3v4h-5zM9 5.414v1.586h-1.586l1.586-1.586zM15 15h-8v-7h3v-3h5v10z"></path>
@@ -210,6 +214,11 @@ <h1 id="title">
   const input = document.getElementById("demoSource");
   const math = document.getElementById("math");
   const mode = document.querySelector('input[id="displayMode"]');
+  const output = document.getElementById("OutputType")
+
+  const wide = document.getElementById("wide");
+  const demo = document.getElementById("demo");
+  wide.addEventListener('change', () => {  demo.classList.toggle("wide") });
 
   const hash = location.hash
   if (hash && hash.length > 1) {
@@ -228,16 +237,18 @@ <h1 id="title">
   window.addEventListener('hashchange', () => { getHash() }, false)
 
   function reprocess() {
-    if (document.getElementById("OutputType").value === "Math") {
+    if (output.value === "Math") {
       temml.render(input.value, math, {displayMode: mode.checked});
       temml.postProcess(math)
     } else {
       math.innerHTML = ""
-      const format = require('xml-formatter');
       math.appendChild(document.createElement("pre"))
-      math.firstChild.innerText = format(
-        temml.renderToString(input.value, {displayMode: mode.checked}),
-        { indentation: '  ', collapseContent: true, lineSeparator: '\n' });
+      let mml = temml.renderToString(input.value, {displayMode: mode.checked})
+      if (output.value === "MathML") {
+        const format = require('xml-formatter');
+        mml = format(mml, { indentation: '  ', collapseContent: true, lineSeparator: '\n' });
+      }
+      math.firstChild.innerText = mml
     }
   }
 
@@ -253,12 +264,12 @@ <h1 id="title">
   }
 
   function copyMathML() {
-    const format = require('xml-formatter');
-    var copyText = format(
-      temml.renderToString(input.value, {displayMode: mode.checked}),
-      { indentation: '  ', collapseContent: true, lineSeparator: '\n' }
-    )
-    navigator.clipboard.writeText(copyText)
+    let mml = temml.renderToString(input.value, {displayMode: mode.checked})
+    if (output.value !== "Flat MML") {
+      const format = require('xml-formatter');
+      mml = format(mml, { indentation: '  ', collapseContent: true, lineSeparator: '\n' })
+    }
+    navigator.clipboard.writeText(mml)
   }
 
   const symbols = /[\r\n%#"()<>?[\\\]^`{|}]/g

site/indexStyles.css

@@ -97,12 +97,21 @@ a {
   flex-wrap: wrap;
 }
 
+.wide #demo {
+  flex-direction: column;
+}
+
 #input,
 #output {
   width: 395px;
   flex-basis: auto;
 }
 
+.wide #input,
+.wide #output {
+  width: 100%;
+}
+
 #spacer {
   width: 10px;
 }
@@ -120,6 +129,10 @@ a {
     overflow: auto;
 }
 
+.wide .ioArea {
+  width: 760px;
+}
+
 math {
   font-size: 115%;
 }