grammar UI added

Author: amirkabiri

app.css

@@ -213,3 +213,72 @@ ul {
     margin-top: 10px;
     color: #444;
 }
+
+
+
+#grammar{
+    position: fixed;
+    width:100%;
+    height:100%;
+    right: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0,0,0,.5);
+    z-index: 999;
+    display: none;
+}
+#grammar-content{
+    position: fixed;
+    width:calc(100% - 60px);
+    height:calc(100% - 60px);
+    right: 30px;
+    left: 30px;
+    top: 30px;
+    bottom: 30px;
+    background: white;
+    z-index: 5;
+    box-sizing: border-box;
+    padding: 30px;
+    display: flex;
+    justify-content: space-between;
+}
+#grammar-close{
+    position: relative;
+    z-index: 10;
+    margin:15px 0 0 15px;
+    cursor: pointer;
+    width:30px;
+    height:30px;
+    background: white;
+    border-radius:50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size:20px;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3);
+}
+#grammar-source, #grammar-result{
+    width:100%;
+    height:100%;
+    box-sizing: border-box;
+    padding:10px;
+    font-size:16px;
+    font-weight: normal;
+}
+#grammar-result{
+    height:auto;
+    margin-top:20px;
+    background: rgba(0,0,0,.1);
+    user-select: text;
+}
+.col-6{
+    width:calc(50% - 10px);
+}
+#grammar-actions{
+    display: flex;
+    flex-direction: column;
+}
+#grammar-actions > *{
+    margin-bottom:10px;
+}

index.html

@@ -47,6 +47,39 @@ <h1>Finite Automata Designer</h1>
                 <button data-key="move" class="active">move</button>
                 <button data-key="design">design</button>
             </div>
+            <button id="grammar-view">Grammar</button>
+        </div>
+
+        <div id="grammar">
+            <div id="grammar-close">×</div>
+            <div id="grammar-content">
+                <div class="col-6">
+                    <textarea placeholder="Enter grammar here ..." id="grammar-source"></textarea>
+                </div>
+                <div class="col-6">
+                    <div id="grammar-actions">
+                        <label>
+                            <input type="radio" name="grammar-action" value="chomsky">
+                            To Chomsky
+                        </label>
+                        <label>
+                            <input type="radio" name="grammar-action" value="greibach">
+                            To Greibach
+                        </label>
+                        <label>
+                            <input type="radio" name="grammar-action" value="simplify">
+                            Simplify
+                        </label>
+                        <label>
+                            <input type="radio" name="grammar-action" value="right-linear">
+                            To Right Linear
+                        </label>
+                    </div>
+                    <div id="grammar-result">
+                        Result  :
+                    </div>
+                </div>
+            </div>
         </div>
 
         <div id="copyright">

js/app.js

@@ -472,3 +472,50 @@ cnv.oncontextmenu = function (e) {
         });
     }
 };
+
+
+
+let grammarAction = '';
+$('#grammar-source').value = loadGrammar() ? loadGrammar() : '';
+
+$('#grammar-source').onkeyup = executeGrammarAction;
+$$('input[name="grammar-action"]').forEach(el => el.onchange = function(){
+    switch (this.value) {
+        case 'simplify':
+            grammarAction = 'simplify';
+            break;
+
+        case 'right-linear':
+            grammarAction = 'toRightLinear';
+            break;
+
+        case 'chomsky':
+            grammarAction = 'toCNF';
+            break;
+
+        case 'greibach':
+            grammarAction = 'toGNF';
+            break;
+    }
+    executeGrammarAction();
+});
+$('#grammar-view').onclick = () => $('#grammar').style.display = 'block';
+$('#grammar-close').onclick = () => $('#grammar').style.display = 'none';
+
+function executeGrammarAction(){
+    const grammarSource = $('#grammar-source').value;
+
+    saveGrammar(grammarSource);
+
+    if(!grammarAction) return;
+
+    try{
+        let grammar = new Grammar().parse(grammarSource);
+
+        grammar = grammar[grammarAction]();
+        $('#grammar-result').innerHTML = 'Result : <br><br>' + grammar.stringify().replace(/\n/g, '<br>');
+    }catch (e) {
+        console.log(e)
+        $('#grammar-result').innerHTML = e;
+    }
+}

js/storage.js

@@ -37,3 +37,20 @@ function isFirstVisit() {
         return true;
     }
 }
+
+function saveGrammar(grammar){
+    try{
+        localStorage.grammar = grammar;
+
+        return true;
+    }catch (e) {
+        return false;
+    }
+}
+function loadGrammar() {
+    try {
+        return localStorage.grammar;
+    }catch (e) {
+        return undefined;
+    }
+}