From 458433a9f5ddb5716b2db3e9fc14ce468e5f37c0 Mon Sep 17 00:00:00 2001
From: Peter Ludikovsky <peter@ludikovsky.name>
Date: Wed, 4 May 2016 11:43:01 +0200
Subject: [PATCH] =?UTF-8?q?*=20L=C3=A4ngerer=20Text=20scrollt=20nicht=20me?=
 =?UTF-8?q?hr=20die=20Eingabe=20raus=20*=20Vorschau=20wird=20erst=20nach?=
 =?UTF-8?q?=201=20Sekunde=20ohne=20Tippen=20aktualisiert,=20reduziert=20di?=
 =?UTF-8?q?e=20Calls=20im=20Hintergrund?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mdlive.py         |  2 +-
 static/index.html | 51 ++++++++++++++++++++++++++++++++++++-----------
 2 files changed, 40 insertions(+), 13 deletions(-)
diff --git a/mdlive.py b/mdlive.py
index dce2638..90f0423 100755
--- a/mdlive.py
+++ b/mdlive.py
@@ -20,5 +20,5 @@ def parse():
     return proc.communicate(input=data)
 
 if __name__ == "__main__":
-    app.debug = True
+    app.debug = False
     app.run()
diff --git a/static/index.html b/static/index.html
index 59b6299..5471f38 100644
--- a/static/index.html
+++ b/static/index.html
@@ -7,11 +7,22 @@
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/font-hack/2.018/css/hack.min.css">
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen">
         <link rel="stylesheet" href="https://ludikovsky.name/blog/blog.css" type="text/css" media="screen">
+        <style>
+textarea {
+    width: 100%;
+    height: 800px;
+    font-family: Hack, monospace;
+}
+div.container {
+    height: 800px;
+    overflow-y: scroll;
+}
+        </style>
     </head>
     <body>
         <div class="col-md-2"></div>
         <div id="input" class="col-md-4">
-            <textarea id="markdown" name="markdown" rows="25" cols="80" style="max-width: 100%"></textarea>
+            <textarea id="markdown" name="markdown"></textarea>
         </div>
         <div class="container col-md-4">
             <article>
@@ -21,17 +32,33 @@
         </div>
         <div class="col-md-2"></div>
         <script>
-$('#input').on('input',
-   function(){
-       $.ajax({
-           url: "http://localhost:5000/parse",
-           success: function(result) {
-               $('#output').html(result);
-           },
-           data: { markdown: $('#markdown').val() },
-           type: 'POST'
-       });
-   }
+// Background-Call nur noch wenn der User >= 1 Sekunde nichts tippt.
+// Adaptiert von https://css-tricks.com/snippets/jquery/fire-event-when-user-is-idle/
+idleTimer = null;
+idleState = false;
+idleWait = 1000;
+
+$(document).ready(
+    function(){
+        $('#input').bind('keydown', function() {
+            clearTimeout(idleTimer);
+            if(idleState == true){
+                // User ist wieder aktiv
+            }
+            idleState = false;
+            idleTimer = setTimeout(function(){
+                $.ajax({
+                    url: "http://localhost:5000/parse",
+                    success: function(result) {
+                        $('#output').html(result);
+                    },
+                    data: { markdown: $('#markdown').val() },
+                    type: 'POST'
+                });
+                idleState = true;
+            }, idleWait);
+        });
+    }
 );
         </script>
     </body>
