Home Explore Help
Sign In
marcelovbcfilho
/
ivprog-acessible
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

feat: separeted code im modules and fix style errors

Marcelo Vilas Boas Correa Filho 5 years ago
parent
d1fea44029
commit
192afe7acb
5 changed files with 176 additions and 174 deletions
Unified View Show Diff Stats
  1. 9 22
      public/index.html
  2. 0 141
      public/javascripts/code-view.js
  3. 7 0
      public/javascripts/modules/functions.js
  4. 149 0
      public/javascripts/modules/variables.js
  5. 11 11
      public/stylesheets/style.css

+ 9 - 22
public/index.html
View File 

@@ -3,7 +3,9 @@
 
 <head>
 
 <head>
 
     <title>Express</title>
 
     <title>Express</title>
 
     <link rel="stylesheet" href="/stylesheets/style.css">
 
     <link rel="stylesheet" href="/stylesheets/style.css">
 
-    <link rel="stylesheet" href="/stylesheets/bootstrap/bootstrap.min.css">
 
+    <link rel="stylesheet" href="/stylesheets/bootstrap/bootstrap.css">
 
+    <link rel="stylesheet" href="/stylesheets/bootstrap/bootstrap-grid.css">
 
+    <link rel="stylesheet" href="/stylesheets/bootstrap/bootstrap-reboot.css">
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
@@ -13,8 +15,9 @@
 
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
 
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
 
             <ul class="navbar-nav mr-auto">
 
             <ul class="navbar-nav mr-auto">
 
                 <li class="nav-item active">
 
                 <li class="nav-item active">
 
-                    <button class="nav-link" accesskey="s" title="Voltar para essa lista de atalhos Alt + a"
 
-                            data-toggle="tooltip" data-placement="bottom">Lista de Atalhos<span class="sr-only">Lista de Atalhos</span></a>
 
+                    <button class="nav-link" accesskey="a" title="Voltar para essa lista de atalhos Alt + a"
 
+                            data-toggle="tooltip" data-placement="bottom">Lista de Atalhos<span class="sr-only">Lista de Atalhos</span>
 
+                    </button>
 
                 </li>
 
                 </li>
 
                 <li class="nav-item">
 
                 <li class="nav-item">
 
                     <a class="nav-link" href="#" title="Ir para a lista de operações Alt + O" data-toggle="tooltip"
 
                     <a class="nav-link" href="#" title="Ir para a lista de operações Alt + O" data-toggle="tooltip"
 
@@ -38,31 +41,14 @@
 
                                     onclick="addVariable()">Adicionar
 
                                     onclick="addVariable()">Adicionar
 
                             </button>
 
                             </button>
 
                         </li>
 
                         </li>
 
-                        <li class="nav-item">
 
-                            <div class="dropdown">
 
-                                <button class="btn btn-secondary dropdown-toggle" accesskey="o" role="Variáveis"
 
-                                        type="button" id="dropdownMenuButton" data-toggle="dropdown"
 
-                                        aria-haspopup="true" aria-expanded="false">
 
-                                    Operações
 
-                                </button>
 
-                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
 
-                                    <button class="dropdown-item" type="button" onclick="addCodeToScreen({code:`if`})">
 
-                                        Condição (se)
 
-                                    </button>
 
-                                    <button class="dropdown-item" type="button"
 
-                                            onclick="addCodeToScreen({code:`while`})">Loop enquanto (while)
 
-                                    </button>
 
-                                </div>
 
-                            </div>
 
-                        </li>
 
                     </ul>
 
                     </ul>
 
                 </div>
 
                 </div>
 
             </nav>
 
             </nav>
 
             <div id="code" class="col-10 code-editor">
 
             <div id="code" class="col-10 code-editor">
 
-                <div id="main">
 
+                <div id="main" class="row mt-3">
 
 
 
                 </div>
 
                 </div>
 
-                <div id="functions">
 
+                <div id="functions" class="row">
 
 
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
@@ -78,6 +64,7 @@
 
     <script src="/javascripts/shortcuts/shortcuts-events.js"></script>
 
     <script src="/javascripts/shortcuts/shortcuts-events.js"></script>
 
     <script src="/javascripts/data-types.js"></script>
 
     <script src="/javascripts/data-types.js"></script>
 
     <script src="/javascripts/code-view.js"></script>
 
     <script src="/javascripts/code-view.js"></script>
 
+    <script src="/javascripts/modules/variables.js"></script>
 
 </body>
 
 </body>
 
 
 
 </html>
 
 </html>

+ 0 - 141
public/javascripts/code-view.js
View File 

@@ -3,147 +3,6 @@ const $main = $("#main");
 
 const $functions = $("#functions");
 
 const $functions = $("#functions");
 
 
 
 let universalId = 0;
 
 let universalId = 0;
 
-let creatingVariable = false;
 
-
 
-
 
-function addVariable(variable = {name: "", type: dataTypes.String, value: ""}, id = null) {
 
-    if (creatingVariable === false) {
 
-        // Blocking future variable creation until finish the current creation
 
-        creatingVariable = true;
 
-
 
-        let html = "";
 
-        html += `<div class="card col-3" id="variableCreationDiv">`;
 
-        html += `    <div class="card-header">`;
 
-        html += `       <h3>Adicionar variável</h3>`;
 
-        html += `    </div>`;
 
-        html += `    <div class="card-body">`;
 
-        html += `        <div class="row">`;
 
-        html += `            <div class="col-3">`;
 
-        html += `                <label for="variableName">Nome: </label>`;
 
-        html += `            </div>`;
 
-        html += `            <div class="col-9">`;
 
-        html += `                <input id="varibaleName" type="text" value="${variable.name}">`;
 
-        html += `            </div>`;
 
-        html += `        </div>`;
 
-        html += `        <div class="row">`;
 
-        html += `            <div class="col-3">`;
 
-        html += `                <label for="variableType">Tipo: </label>`;
 
-        html += `            </div>`;
 
-        html += `            <div class="col-9">`;
 
-        html += `                <select id="variableType">`;
 
-        // Filling data type select with available data types in {data-types.js}
 
-        for (let dataType in dataTypes) {
 
-            if (dataType === variable.type)
 
-                html += `                    <option value="${dataType}" selected>${dataTypes[dataType]}</option>`;
 
-            else
 
-                html += `                    <option value="${dataType}">${dataTypes[dataType]}</option>`;
 
-        }
 
-        html += `                </select>`;
 
-        html += `            </div>`;
 
-        html += `        </div>`;
 
-        html += `        <div class="row">`;
 
-        html += `            <div class="col-3">`;
 
-        html += `                <label for="variableValue">Valor: </label>`;
 
-        html += `            </div>`;
 
-        html += `            <div class="col-9">`;
 
-        html += `                <input id="variableValue" type="text" value="${variable.value}">`;
 
-        html += `            </div>`;
 
-        html += `        </div>`;
 
-        html += `    </div>`;
 
-        html += `    <div class="card-footer">`;
 
-        html += `        <div class="row">`;
 
-        html += `            <div class="col-6">`;
 
-        html += `                <button type="button" accesskey="c" onclick="cancelAddVariable(${id})">Cancelar</button>`;
 
-        html += `            </div>`;
 
-        html += `            <div class="col-6">`;
 
-        html += `                <button type="button" accesskey="s" onclick="addVariableTocode({id: ${id}})">Salvar</button>`;
 
-        html += `            </div>`;
 
-        html += `        </div>`;
 
-        html += `    </div>`;
 
-        html += `</div>`;
 
-        $code.append(html);
 
-    }
 
-}
 
-
 
-function addVariableTocode({id = null}) {
 
-    let code = "";
 
-
 
-    let variable = {
 
-        name: $("#varibaleName").val(),
 
-        type: $("#variableType").val(),
 
-        value: $("#variableValue").val()
 
-    };
 
-
 
-    let variableBarrier = getVariableTypeBarrier(variable.type);
 
-
 
-    code += `${variable.type} ${variable.name} = ${variableBarrier}${variable.value}${variableBarrier}`;
 
-
 
-    // Sending code to screen
 
-    addCodeToScreen({id: id, code: code, variable: variable});
 
-
 
-    // Removing div form for variable creation
 
-    $("#variableCreationDiv").remove();
 
-
 
-    // Enabling future variable creation
 
-    creatingVariable = false;
 
-}
 
-
 
-function cancelAddVariable(id = null) {
 
-    // Removing div form for variable creation
 
-    $("#variableCreationDiv").remove();
 
-
 
-    if (id != null)
 
-        $(`#codeLine${id}`).show();
 
-
 
-    // Enabling future variable creation
 
-    creatingVariable = false;
 
-}
 
-
 
-function editVariable(id = null, variable = {name: "", type: dataTypes.String, value: ""}) {
 
-    $(`#codeLine${id}`).hide();
 
-    addVariable(variable, id);
 
-}
 
-
 
-function deleteVariable(id = null) {
 
-    if (id != null)
 
-        $(`#codeLine${id}`).remove();
 
-}
 
-
 
-function addCodeToScreen({
 
-                             id = null,
 
-                             code = "Some code",
 
-                             variable = {name: "", type: "String", value: ""}
 
-                         }) {
 
-    let html = ``;
 
-
 
-    if (id != null) {
 
-        $(`#mainCode${id}`).html(`<span>${code}</span>`);
 
-        $(`#editCode${id}`).html(`<button type="button" id="editCodeButton${id}" onclick='editVariable(${id}, ${JSON.stringify(variable)})'>Editar</button>`);
 
-        $(`#codeLine${id}`).show();
 
-    } else {
 
-        html += `<div class="row code-line" id="codeLine${universalId}">`;
 
-        html += `    <div class="col-1 line-number" id="mainLine${universalId}"><span>${getCurrentMainLineNumber()}</span></div>`;
 
-        html += `    <div class="col-7 line-code" id="mainCode${universalId}"><span>${code}</span></div>`;
 
-        html += `    <div class="col-2" id="editCode${universalId}">`;
 
-        html += `        <button type="button" id="editCodeButton${universalId}" onclick='editVariable(${universalId}, ${JSON.stringify(variable)})'>Editar</button>`;
 
-        html += `    </div>`;
 
-        html += `    <div class="col-2" id="deleteCode${universalId}">`;
 
-        html += `        <button type="button" id="deleteCodeButton${universalId}" onclick="deleteVariable(${universalId})">Deletar</button>`;
 
-        html += `    </div>`;
 
-        html += `</div>`;
 
-
 
-        $code.append(html);
 
-    }
 
-
 
-    // Increasing universal id
 
-    universalId += 1;
 
-}
 
-
 
-function addFunctionToScreen({
 
-                                 name = "functionName",
 
-                             }) {
 
-
 
-}
 
 
 
 function getCurrentMainLineNumber() {
 
 function getCurrentMainLineNumber() {
 
     // TO DO: Find a way to know in wath line the main code is
 
     // TO DO: Find a way to know in wath line the main code is

+ 7 - 0
public/javascripts/modules/functions.js
View File 

@@ -0,0 +1,7 @@
 
+let creatingFunction = false;
 
+
 
+function addFunctionToScreen({
 
+                                 name = "functionName",
 
+                             }) {
 
+
 
+}

+ 149 - 0
public/javascripts/modules/variables.js
View File 

@@ -0,0 +1,149 @@
 
+let creatingVariable = false;
 
+
 
+function addVariable(variable = {name: "", type: dataTypes.String, value: ""}, id = null) {
 
+    if (creatingVariable === false) {
 
+        // Blocking future variable creation until finish the current creation
 
+        creatingVariable = true;
 
+
 
+        let html = "";
 
+        html += `<div class="col-3" id="variableCreationDiv">`;
 
+        html += `    <div class="card">`;
 
+        html += `        <div class="card-header">`;
 
+        html += `            <h3>Adicionar variável</h3>`;
 
+        html += `        </div>`;
 
+        html += `        <div class="card-body">`;
 
+        html += `            <div class="row">`;
 
+        html += `                <div class="col-3">`;
 
+        html += `                    <label for="variableName">Nome: </label>`;
 
+        html += `                </div>`;
 
+        html += `                <div class="col-9">`;
 
+        html += `                    <input id="varibaleName" type="text" value="${variable.name}">`;
 
+        html += `                </div>`;
 
+        html += `            </div>`;
 
+        html += `            <div class="row">`;
 
+        html += `                <div class="col-3">`;
 
+        html += `                    <label for="variableType">Tipo: </label>`;
 
+        html += `                </div>`;
 
+        html += `                <div class="col-9">`;
 
+        html += `                    <select id="variableType">`;
 
+        // Filling data type select with available data types in {data-types.js}
 
+        for (let dataType in dataTypes) {
 
+            if (dataType === variable.type)
 
+                html += `                        <option value="${dataType}" selected>${dataTypes[dataType]}</option>`;
 
+            else
 
+                html += `                        <option value="${dataType}">${dataTypes[dataType]}</option>`;
 
+        }
 
+        html += `                    </select>`;
 
+        html += `                </div>`;
 
+        html += `            </div>`;
 
+        html += `            <div class="row">`;
 
+        html += `                <div class="col-3">`;
 
+        html += `                    <label for="variableValue">Valor: </label>`;
 
+        html += `                </div>`;
 
+        html += `                <div class="col-9">`;
 
+        html += `                    <input id="variableValue" type="text" value="${variable.value}">`;
 
+        html += `                </div>`;
 
+        html += `            </div>`;
 
+        html += `        </div>`;
 
+        html += `        <div class="card-footer">`;
 
+        html += `            <div class="row">`;
 
+        html += `                <div class="col-6">`;
 
+        html += `                    <button type="button" accesskey="c" onclick="cancelAddVariable(${id})">Cancelar</button>`;
 
+        html += `                </div>`;
 
+        html += `                <div class="col-6">`;
 
+        html += `                    <button type="button" accesskey="s" onclick="addVariableTocode({id: ${id}})">Salvar</button>`;
 
+        html += `                </div>`;
 
+        html += `            </div>`;
 
+        html += `        </div>`;
 
+        html += `    </div>`;
 
+        html += `</div>`;
 
+        $main.append(html);
 
+    }
 
+}
 
+
 
+function addVariableTocode({id = null}) {
 
+    let code = "";
 
+
 
+    let variable = {
 
+        name: $("#varibaleName").val(),
 
+        type: $("#variableType").val(),
 
+        value: $("#variableValue").val()
 
+    };
 
+
 
+    let variableBarrier = getVariableTypeBarrier(variable.type);
 
+
 
+    code += `${variable.type} ${variable.name} = ${variableBarrier}${variable.value}${variableBarrier}`;
 
+
 
+    // Sending code to screen
 
+    addCodeToScreen({id: id, code: code, variable: variable});
 
+
 
+    // Removing div form for variable creation
 
+    $("#variableCreationDiv").remove();
 
+
 
+    // Enabling future variable creation
 
+    creatingVariable = false;
 
+}
 
+
 
+function cancelAddVariable(id = null) {
 
+    // Removing div form for variable creation
 
+    $("#variableCreationDiv").remove();
 
+
 
+    if (id != null)
 
+        $(`#variableDiv${id}`).show();
 
+
 
+    // Enabling future variable creation
 
+    creatingVariable = false;
 
+}
 
+
 
+function editVariable(id = null, variable = {name: "", type: dataTypes.String, value: ""}) {
 
+    $(`#variableDiv${id}`).hide();
 
+    addVariable(variable, id);
 
+}
 
+
 
+function deleteVariable(id = null) {
 
+    if (id != null)
 
+        $(`#variableDiv${id}`).remove();
 
+}
 
+
 
+function addCodeToScreen({
 
+                             id = null,
 
+                             code = "Some code",
 
+                             variable = {name: "", type: "String", value: ""}
 
+                         }) {
 
+    let html = ``;
 
+
 
+    if (id != null) {
 
+        $(`#mainCode${id}`).html(`<span>${code}</span>`);
 
+        $(`#editCode${id}`).html(`<button type="button" id="editCodeButton${id}" onclick='editVariable(${id}, ${JSON.stringify(variable)})'>Editar</button>`);
 
+        $(`#variableDiv${id}`).show();
 
+    } else {
 
+        html += `<div class="col-3 p-2" id="variableDiv${universalId}">`;
 
+        html += `    <div class="card" id="variableCard${universalId}">`;
 
+        html += `        <div class="card-header" id="variableCardHeader${universalId}">`;
 
+        html += `            <h4>Variável</h4>`;
 
+        html += `        </div>`;
 
+        html += `        <div class="card-body" id="variableCardBody${universalId}">`;
 
+        html += `            <div class="row code-line" id="codeLine${universalId}">`;
 
+        html += `                <div class="col-2 line-number" id="mainLine${universalId}"><span>${getCurrentMainLineNumber()}</span></div>`;
 
+        html += `                <div class="col-10 line-code" id="mainCode${universalId}"><span>${code}</span></div>`;
 
+        html += `            </div>`;
 
+        html += `        </div>`;
 
+        html += `        <div class="card-footer" id="variableCardFooter${universalId}">`;
 
+        html += `            <div class="row">`;
 
+        html += `                <div class="col-6" id="deleteCode${universalId}">`;
 
+        html += `                    <button type="button" id="deleteCodeButton${universalId}" onclick="deleteVariable(${universalId})">Deletar</button>`;
 
+        html += `                </div>`;
 
+        html += `                <div class="col-6" id="editCode${universalId}">`;
 
+        html += `                    <button type="button" id="editCodeButton${universalId}" onclick='editVariable(${universalId}, ${JSON.stringify(variable)})'>Editar</button>`;
 
+        html += `                </div>`;
 
+        html += `            </div>`;
 
+        html += `        </div>`;
 
+        html += `    </div>`;
 
+        html += `</div>`;
 
+
 
+        $main.append(html);
 
+    }
 
+
 
+    // Increasing universal id
 
+    universalId += 1;
 
+}

+ 11 - 11
public/stylesheets/style.css
View File 

@@ -7,16 +7,16 @@ a {
 
     color: #00B7FF;
 
     color: #00B7FF;
 
 }
 
 }
 
 
 
-.code-editor {}
 
+/*.code-editor {}*/
 
 
 
-.code-line {
 
-    border: 1px;
 
-    border-style: solid;
 
-    border-color: black;
 
-}
 
+/*.code-line {*/
 
+/*    border: 1px;*/
 
+/*    border-style: solid;*/
 
+/*    border-color: black;*/
 
+/*}*/
 
 
 
-.col-1.line-number {
 
-    background-color: black;
 
-    color: white;
 
-    text-align: center;
 
-}
 
+/*.col-1.line-number {*/
 
+/*    background-color: black;*/
 
+/*    color: white;*/
 
+/*    text-align: center;*/
 
+/*}*/