From 915a24bda633a3584beb6a195270f99bc10f2cc6 Mon Sep 17 00:00:00 2001
From: Miguel Barão <miguel.barao@gmail.com>
Date: Sat, 27 Jan 2018 22:48:05 +0000
Subject: [PATCH] - moved javascript and css out of html to external files

---
 BUGS.md                   |   3 ++-
 static/css/maintopics.css |   5 +++++
 static/css/topic.css      |  25 +++++++++++++++++++++++++
 static/js/maintopics.js   |  32 ++++++++++++++++++++++++++++++++
 static/js/topic.js        |  88 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 templates/maintopics.html | 104 +++++++++++++++++++++++++++++++-------------------------------------------------------------------------
 templates/topic.html      | 136 +++++-----------------------------------------------------------------------------------------------------------------------------------
 7 files changed, 188 insertions(+), 205 deletions(-)
 create mode 100644 static/css/maintopics.css
 create mode 100644 static/css/topic.css
 create mode 100644 static/js/maintopics.js
 create mode 100644 static/js/topic.js

diff --git a/BUGS.md b/BUGS.md
index 35bde3c..8cce300 100644
--- a/BUGS.md
+++ b/BUGS.md
@@ -1,6 +1,7 @@
 
 # BUGS
 
+- remover learn.css uma vez que nao é usado em lado nenhum?
 - detect questions in questions.yaml without ref -> error ou generate default.
 - topicos virtuais nao deveriam aparecer. na construção da árvore os sucessores seriam ligados directamente aos predecessores.
 - Criar outra estrutura organizada em capítulos (conjuntos de tópicos). Permitir capítulos de capítulos, etc. talvez usar grafos de grafos...
@@ -8,7 +9,6 @@
 - session management. close after inactive time.
 - generators not working: bcrypt (ver blog)
 - tabelas nas perguntas radio/checkbox não ocupam todo o espaço como em question.
-- mover javascript para ficheiros externos e carregar com <script defer src='...'>
 
 # TODO
 
@@ -32,6 +32,7 @@
 
 # FIXED
 
+- mover javascript para ficheiros externos e carregar com script defer src
 - implementar xsrf. Ver [http://www.tornadoweb.org/en/stable/guide/security.html#cross-site-request-forgery-protection]()
 - se refs de um topic estao invalidos, nao carrega esse topico. devia haver um error nos logs a indicar qual o ref invalido.
 - link directo para topico nao valida se topico esta unlocked.
diff --git a/static/css/maintopics.css b/static/css/maintopics.css
new file mode 100644
index 0000000..c77956e
--- /dev/null
+++ b/static/css/maintopics.css
@@ -0,0 +1,5 @@
+body {
+    margin: 0;
+    padding-top: 100px;
+    margin-bottom: 80px; /* Margin bottom by footer height */
+}
diff --git a/static/css/topic.css b/static/css/topic.css
new file mode 100644
index 0000000..2b6eb5b
--- /dev/null
+++ b/static/css/topic.css
@@ -0,0 +1,25 @@
+.progress {
+    height: 20px;
+    border-radius: 0px;
+}
+body {
+    margin: 0;
+    padding-top: 70px;
+    margin-bottom: 80px; /* Margin bottom by footer height */
+}
+.footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    /* Set the fixed height of the footer here */
+    height: 60px;
+    line-height: 60px; /* Vertically center the text there */
+    background-color: #f5f5f5;
+}
+html {
+    position: relative;
+    min-height: 100%;
+}
+textarea {
+    font-family: monospace;
+}
diff --git a/static/js/maintopics.js b/static/js/maintopics.js
new file mode 100644
index 0000000..b323c14
--- /dev/null
+++ b/static/js/maintopics.js
@@ -0,0 +1,32 @@
+function notify(msg) {
+  $("#notifications").html(msg);
+  $("#notifications").fadeIn(250).delay(5000).fadeOut(500);
+}
+
+function getCookie(name) {
+  var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
+  return r ? r[1] : undefined;
+}
+
+function change_password() {
+  var token = getCookie('_xsrf');
+  $.ajax({
+    type: "POST",
+    url: "/change_password",
+    headers: {'X-XSRFToken' : token },
+    data: {
+      "new_password": $("#new_password").val(),
+    },
+    dataType: "json",
+    success: function(r) {
+      notify(r['msg']);
+    },
+    error: function(r) {
+      notify(r['msg']);
+    },
+  });
+}
+
+$(document).ready(function() {
+  $("#change_password").click(change_password);
+});
diff --git a/static/js/topic.js b/static/js/topic.js
new file mode 100644
index 0000000..19edbd7
--- /dev/null
+++ b/static/js/topic.js
@@ -0,0 +1,88 @@
+$.fn.extend({
+    animateCSS: function (animation) {
+        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
+        this.addClass('animated ' + animation).one(animationEnd, function() {
+            $(this).removeClass('animated ' + animation);
+        });
+    }
+});
+
+// Process response given by the server
+function updateQuestion(response){
+    switch (response["method"]) {
+    case "new_question":
+        $("#question_div").html(response["params"]["question"]);
+        $('#topic_progress').css('width', (100*response["params"]["progress"])+'%').attr('aria-valuenow', 100*response["params"]["progress"]);
+
+        MathJax.Hub.Queue(["Typeset",MathJax.Hub,"question_div"]);
+
+        // enable shift+enter to submit and tab to spaces conversion
+        $("input:text, input:radio, input:checkbox").keydown(function (e) {
+            if (e.keyCode == 13) {
+                e.preventDefault();
+                if (e.shiftKey) postQuestion();
+                return false;
+            }});
+        $("textarea").keydown(function (e) {
+            if (e.keyCode == 13 && e.shiftKey) { // shift enter
+                e.preventDefault();
+                postQuestion();
+            }
+            else if (e.keyCode == 9) { // tab
+                e.preventDefault();     // prevent loosing focus
+                // get caret position/selection
+                var start = this.selectionStart;
+                var end = this.selectionEnd;
+                var value = $(this).val();
+
+                // set textarea value to: text before caret + tab + text after caret
+                $(this).val(value.substring(0, start) + " " + " " + " " + " " + value.substring(end));
+                // put caret at right position again (add one for the tab)
+                this.selectionStart = this.selectionEnd = start + 4;
+            }});
+        $('#question_div').animateCSS('zoomIn');
+        break;
+
+    case "shake":
+        $('#topic_progress').css('width', (100*response["params"]["progress"])+'%').attr('aria-valuenow', 100*response["params"]["progress"]);
+        $('#question_div').animateCSS('shake');
+        break;
+
+    case "finished_topic":
+        $('#submit').css("visibility", "hidden");
+        $("#content").html(response["params"]["question"]);
+        $('#topic_progress').css('width', '100%').attr('aria-valuenow', 100);
+        $("#content").animateCSS('tada');
+        setTimeout(function(){ window.location.replace('/'); }, 2000);
+        break;
+    }
+}
+
+// Get current question
+function getQuestion() {
+    $.ajax({
+        type: "GET",
+        url: "/question",
+        dataType: "json", // expected from server
+        success: updateQuestion,
+        error: function() {alert("O servidor não responde.");}
+    });
+}
+
+// Send answer and receive a response.
+// The response can be a new_question or a shake if the answer is wrong.
+function postQuestion() {
+    $.ajax({
+        type: "POST",
+        url: "/question",
+        data: $("#question_form").serialize(), // {'a':10,'b':20},
+        dataType: "json", // expected from server
+        success: updateQuestion,
+        error: function() {alert("O servidor não responde.");}
+    });
+}
+
+$(document).ready(function() {
+    getQuestion();
+    $("#submit").click(postQuestion);
+});
diff --git a/templates/maintopics.html b/templates/maintopics.html
index 85cad0a..8641ef7 100644
--- a/templates/maintopics.html
+++ b/templates/maintopics.html
@@ -3,58 +3,55 @@
 <!doctype html>
 <html lang="pt-PT">
 <head>
-    <title>iLearn</title>
-    <link rel="icon" href="/static/favicon.ico">
+  <title>iLearn</title>
+  <link rel="icon" href="/static/favicon.ico">
 
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="author" content="Miguel Barão">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="author" content="Miguel Barão">
 
 <!-- Bootstrap, Fontawesome -->
-    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap-material.min.css">
-    <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
+  <link rel="stylesheet" href="/static/bootstrap/css/bootstrap-material.min.css">
+  <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
 
 <!-- Other -->
-    <!-- <link rel="stylesheet" href="/static/css/learn.css"> -->
+  <link rel="stylesheet" href="/static/css/maintopics.css">
 
-    <style>
-        body {
-            margin: 0;
-            padding-top: 100px;
-        }
-    </style>
+  <script defer src="/static/js/jquery.min.js"></script>
+  <script defer src="/static/popper/umd/popper.min.js"></script>
+  <script defer src="/static/bootstrap/js/bootstrap.min.js"></script>
+  <script defer src="/static/js/maintopics.js"></script>
 
 </head>
 <!-- ===================================================================== -->
 <body>
 <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-primary">
   <!-- <a class="navbar-brand" href="#"> -->
-    <img src="/static/logo_horizontal10.png" class="navbar-brand" alt="UEvora">
+  <img src="/static/logo_horizontal10.png" class="navbar-brand" alt="UEvora">
   <!-- </a> -->
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
 
+  <div class="collapse navbar-collapse" id="navbarText">
+    <ul class="navbar-nav mr-auto"></ul>
 
-    <div class="collapse navbar-collapse" id="navbarText">
-        <ul class="navbar-nav mr-auto"></ul>
-
-        <ul class="navbar-nav">
-            <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    <i class="fa fa-user" aria-hidden="true"></i>
-                    <span id="name">{{ escape(name) }}</span>
-                    (<span id="number">{{ escape(uid) }}</span>)
-                    <span class="caret"></span>
-                </a>
-                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                    <a class="dropdown-item" data-toggle="modal" data-target="#password_modal">Mudar Password</a>
-                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="/logout">Sair</a>
-                </div>
-            </li>
-        </ul>
-    </div>
+    <ul class="navbar-nav">
+      <li class="nav-item dropdown">
+        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <i class="fa fa-user" aria-hidden="true"></i>
+          <span id="name">{{ escape(name) }}</span>
+          (<span id="number">{{ escape(uid) }}</span>)
+          <span class="caret"></span>
+        </a>
+        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+          <a class="dropdown-item" data-toggle="modal" data-target="#password_modal">Mudar Password</a>
+          <div class="dropdown-divider"></div>
+          <a class="dropdown-item" href="/logout">Sair</a>
+        </div>
+      </li>
+    </ul>
+  </div>
 </nav>
 <!-- ===================================================================== -->
 <div class="container">
@@ -127,44 +124,5 @@
   </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
 
-<!-- Scripts -->
-<script src="/static/js/jquery.min.js"></script>
-<script src="/static/popper/umd/popper.min.js"></script>
-<script src="/static/bootstrap/js/bootstrap.min.js"></script>
-
-<script>
-  function notify(msg) {
-    $("#notifications").html(msg);
-    $("#notifications").fadeIn(250).delay(5000).fadeOut(500);
-  }
-
-  function getCookie(name) {
-    var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
-    return r ? r[1] : undefined;
-  }
-
-  function change_password() {
-      var token = getCookie('_xsrf');
-      $.ajax({
-          type: "POST",
-          url: "/change_password",
-          headers: {'X-XSRFToken' : token },
-          data: {
-              "new_password": $("#new_password").val(),
-          },
-          dataType: "json",
-          success: function(r) {
-            notify(r['msg']);
-          },
-          error: function(r) {
-            notify(r['msg']);
-          },
-      });
-  }
-
-  $(document).ready(function() {
-    $("#change_password").click(change_password);
-  });
-</script>
 </body>
 </html>
diff --git a/templates/topic.html b/templates/topic.html
index b8567a8..cf828c6 100644
--- a/templates/topic.html
+++ b/templates/topic.html
@@ -25,36 +25,12 @@
     <link rel="stylesheet" href="/static/css/github.css">
 
 <!-- Other -->
-    <!-- <link rel="stylesheet" href="/static/css/learn.css"> -->
-
-    <style>
-        .progress {
-            height: 20px;
-            border-radius: 0px;
-        }
-        body {
-            margin: 0;
-            padding-top: 70px;
-            margin-bottom: 80px; /* Margin bottom by footer height */
-        }
-        .footer {
-            position: absolute;
-            bottom: 0;
-            width: 100%;
-            /* Set the fixed height of the footer here */
-            height: 60px;
-            line-height: 60px; /* Vertically center the text there */
-            background-color: #f5f5f5;
-        }
-        html {
-            position: relative;
-            min-height: 100%;
-        }
-        textarea {
-            font-family: monospace;
-        }
-    </style>
+    <link rel="stylesheet" href="/static/css/topic.css">
 
+    <script defer src="/static/js/jquery.min.js"></script>
+    <script defer src="/static/popper/umd/popper.min.js"></script>
+    <script defer src="/static/bootstrap/js/bootstrap.min.js"></script>
+    <script defer src="/static/js/topic.js"></script>
 </head>
 <!-- ===================================================================== -->
 <body>
@@ -114,107 +90,5 @@
     </div>
 </footer>
 
-
-
-<!-- ===================================================================== -->
-<!--                          JAVASCRIPT                                   -->
-<!-- ===================================================================== -->
-
-<script src="/static/js/jquery.min.js"></script>
-<script src="/static/popper/umd/popper.min.js"></script>
-<script src="/static/bootstrap/js/bootstrap.min.js"></script>
-
-<script>
-    $.fn.extend({
-        animateCSS: function (animation) {
-            var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
-            this.addClass('animated ' + animation).one(animationEnd, function() {
-                $(this).removeClass('animated ' + animation);
-            });
-        }
-    });
-
-    // Process response given by the server
-    function updateQuestion(response){
-        switch (response["method"]) {
-        case "new_question":
-            $("#question_div").html(response["params"]["question"]);
-            $('#topic_progress').css('width', (100*response["params"]["progress"])+'%').attr('aria-valuenow', 100*response["params"]["progress"]);
-
-            MathJax.Hub.Queue(["Typeset",MathJax.Hub,"question_div"]);
-
-            // enable shift+enter to submit and tab to spaces conversion
-            $("input:text, input:radio, input:checkbox").keydown(function (e) {
-                if (e.keyCode == 13) {
-                    e.preventDefault();
-                    if (e.shiftKey) postQuestion();
-                    return false;
-                }});
-            $("textarea").keydown(function (e) {
-                if (e.keyCode == 13 && e.shiftKey) { // shift enter
-                    e.preventDefault();
-                    postQuestion();
-                }
-                else if (e.keyCode == 9) { // tab
-                    e.preventDefault();     // prevent loosing focus
-                    // get caret position/selection
-                    var start = this.selectionStart;
-                    var end = this.selectionEnd;
-                    var value = $(this).val();
-
-                    // set textarea value to: text before caret + tab + text after caret
-                    $(this).val(value.substring(0, start) + " " + " " + " " + " " + value.substring(end));
-                    // put caret at right position again (add one for the tab)
-                    this.selectionStart = this.selectionEnd = start + 4;
-                }});
-            $('#question_div').animateCSS('zoomIn');
-            break;
-
-        case "shake":
-            $('#topic_progress').css('width', (100*response["params"]["progress"])+'%').attr('aria-valuenow', 100*response["params"]["progress"]);
-            $('#question_div').animateCSS('shake');
-            break;
-
-        case "finished_topic":
-            $('#submit').css("visibility", "hidden");
-            $("#content").html(response["params"]["question"]);
-            $('#topic_progress').css('width', '100%').attr('aria-valuenow', 100);
-            $("#content").animateCSS('tada');
-            setTimeout(function(){ window.location.replace('/'); }, 2000);
-            break;
-        }
-    }
-
-    // Get current question
-    function getQuestion() {
-        $.ajax({
-            type: "GET",
-            url: "/question",
-            dataType: "json", // expected from server
-            success: updateQuestion,
-            error: function() {alert("O servidor não responde.");}
-        });
-    }
-
-    // Send answer and receive a response.
-    // The response can be a new_question or a shake if the answer is wrong.
-    function postQuestion() {
-        $.ajax({
-            type: "POST",
-            url: "/question",
-            data: $("#question_form").serialize(), // {'a':10,'b':20},
-            dataType: "json", // expected from server
-            success: updateQuestion,
-            error: function() {alert("O servidor não responde.");}
-        });
-    }
-
-    $(document).ready(function() {
-        getQuestion();
-        $("#submit").click(postQuestion);
-    });
-</script>
-
-
 </body>
 </html>
--
libgit2 0.21.2