From d318faca2ca4d2c16eb5c839cf4ec519b3d7e9f6 Mon Sep 17 00:00:00 2001
From: troy <git@seemsleg.it>
Date: Mon, 14 Feb 2022 12:23:22 +0100
Subject: [PATCH] backtotop

---
 README.md            | 13 ++++++++++---
 backtotop.css        | 24 ++++++++++++++++++++++++
 backtotop.js         | 31 +++++++++++++++++++++++++++++++
 backtotop.min.css    |  1 +
 backtotop.min.js     |  2 ++
 backtotop.min.js.map | 33 +++++++++++++++++++++++++++++++++
 feedback.js          |  7 +++----
 7 files changed, 104 insertions(+), 7 deletions(-)
 create mode 100644 backtotop.css
 create mode 100644 backtotop.js
 create mode 100644 backtotop.min.css
 create mode 100644 backtotop.min.js
 create mode 100644 backtotop.min.js.map

diff --git a/README.md b/README.md
index 47d9f3e..d6c6994 100644
--- a/README.md
+++ b/README.md
@@ -121,7 +121,7 @@ git submodule add https://git.seemsleg.it/pub/cssjs-func-lib cssjs
 
 <script>ClassicEditor
 	.create( document.querySelector( '.editor' ), {
-		
+
 		toolbar: {
 			items: [
 				'heading',
@@ -178,7 +178,7 @@ git submodule add https://git.seemsleg.it/pub/cssjs-func-lib cssjs
 			]
 		},
 		licenseKey: '',
-		
+
 	} )
 	.then( editor => {
 		window.editor = editor;
@@ -240,4 +240,11 @@ Suche: <input type="text" onkeyup="myFilter()" id="suchstr" />
   <div class="row">b</row>
   <div class="row">c</row>
 </div>
-```
\ No newline at end of file
+```
+
+## back to Top Button
+```
+<link href="/cssjs/backtotop.min.css" rel="stylesheet">
+...
+<script src="/cssjs/backtotop.min.js"></script>
+```
diff --git a/backtotop.css b/backtotop.css
new file mode 100644
index 0000000..7dd20f6
--- /dev/null
+++ b/backtotop.css
@@ -0,0 +1,24 @@
+#back_to_top {
+    position: fixed;
+    bottom: 40px;
+    right: 40px;
+    z-index: 9999;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    line-height: 30px;
+    background: #f5f5f5;
+    color: #444;
+    cursor: pointer;
+    border-radius: 15px;
+    padding-top: 4px;
+    display: none;
+  }
+
+  #back_to_top:hover {
+    background: #e9ebec;
+  }
+
+  #back_to_top.back_to_top-show {
+    display: block;
+  }
\ No newline at end of file
diff --git a/backtotop.js b/backtotop.js
new file mode 100644
index 0000000..5a841ff
--- /dev/null
+++ b/backtotop.js
@@ -0,0 +1,31 @@
+(function() {
+  'use strict';
+
+  function trackScroll() {
+    var scrolled = window.pageYOffset;
+    var coords = document.documentElement.clientHeight;
+    console.log(coords,scrolled);
+
+    if (scrolled > coords) {
+      goTopBtn.classList.add('back_to_top-show');
+    }
+    if (scrolled < coords) {
+      goTopBtn.classList.remove('back_to_top-show');
+    }
+  }
+
+  function backToTop() {
+    if (window.pageYOffset > 0) {
+      window.scrollBy(0, -30);
+      setTimeout(backToTop, 0);
+    }
+  }
+
+  var goTopBtn = document.createElement("div");
+  goTopBtn.id = 'back_to_top';
+  goTopBtn.innerHTML = 'UP';
+  document.body.appendChild(goTopBtn);
+
+  window.addEventListener('scroll', trackScroll);
+  goTopBtn.addEventListener('click', backToTop);
+})();
\ No newline at end of file
diff --git a/backtotop.min.css b/backtotop.min.css
new file mode 100644
index 0000000..e4441b4
--- /dev/null
+++ b/backtotop.min.css
@@ -0,0 +1 @@
+#back_to_top{position:fixed;bottom:40px;right:40px;z-index:9999;width:30px;height:30px;text-align:center;line-height:30px;background:#f5f5f5;color:#444;cursor:pointer;border-radius:15px;padding-top:4px;display:none}#back_to_top:hover{background:#e9ebec}#back_to_top.back_to_top-show{display:block}
\ No newline at end of file
diff --git a/backtotop.min.js b/backtotop.min.js
new file mode 100644
index 0000000..99dd846
--- /dev/null
+++ b/backtotop.min.js
@@ -0,0 +1,2 @@
+!function(){"use strict";function trackScroll(){var scrolled=window.pageYOffset,coords=document.documentElement.clientHeight;console.log(coords,scrolled),scrolled>coords&&goTopBtn.classList.add("back_to_top-show"),scrolled<coords&&goTopBtn.classList.remove("back_to_top-show")}function backToTop(){window.pageYOffset>0&&(window.scrollBy(0,-30),setTimeout(backToTop,0))}var goTopBtn=document.createElement("div");goTopBtn.id="back_to_top",goTopBtn.innerHTML="UP",document.body.appendChild(goTopBtn),window.addEventListener("scroll",trackScroll),goTopBtn.addEventListener("click",backToTop)}();
+//# sourceMappingURL=backtotop.min.js.map
\ No newline at end of file
diff --git a/backtotop.min.js.map b/backtotop.min.js.map
new file mode 100644
index 0000000..d50031b
--- /dev/null
+++ b/backtotop.min.js.map
@@ -0,0 +1,33 @@
+{
+    "version": 3,
+    "sources": [
+        "backtotop.js"
+    ],
+    "names": [
+        "trackScroll",
+        "scrolled",
+        "window",
+        "pageYOffset",
+        "coords",
+        "document",
+        "documentElement",
+        "clientHeight",
+        "console",
+        "log",
+        "goTopBtn",
+        "classList",
+        "add",
+        "remove",
+        "backToTop",
+        "scrollBy",
+        "setTimeout",
+        "createElement",
+        "id",
+        "innerHTML",
+        "body",
+        "appendChild",
+        "addEventListener"
+    ],
+    "mappings": "CAAA,WACE,aAEA,SAASA,cACP,IAAIC,SAAWC,OAAOC,YAClBC,OAASC,SAASC,gBAAgBC,aACtCC,QAAQC,IAAIL,OAAOH,UAEfA,SAAWG,QACbM,SAASC,UAAUC,IAAI,oBAErBX,SAAWG,QACbM,SAASC,UAAUE,OAAO,oBAI9B,SAASC,YACHZ,OAAOC,YAAc,IACvBD,OAAOa,SAAS,GAAI,IACpBC,WAAWF,UAAW,IAI1B,IAAIJ,SAAWL,SAASY,cAAc,OACtCP,SAASQ,GAAK,cACdR,SAASS,UAAY,KACrBd,SAASe,KAAKC,YAAYX,UAE1BR,OAAOoB,iBAAiB,SAAUtB,aAClCU,SAASY,iBAAiB,QAASR,WA7BrC",
+    "file": "backtotop.js"
+}
\ No newline at end of file
diff --git a/feedback.js b/feedback.js
index 4c074f0..5db212b 100644
--- a/feedback.js
+++ b/feedback.js
@@ -24,7 +24,6 @@ function ajaxFeedback(e,url,css) {
 
 function formFeedback(e,f,url,css) {
   var formData = {}
-  //TODO form erkennen und auslesen und disablen
   $(f).each(function(i, obj) {
      console.log(obj);
     formData[obj.name] = obj.value
@@ -115,7 +114,7 @@ function successMarker(e,css) {
   var cursorX = p.x
   var cursorY = p.y
   console.log('OK',cursorX,cursorY);
-  
+
   o = $('<div style="position: absolute; top:'+cursorY+'px; left: '+ cursorX +'px; width: 40px; height: 40px; z-index: 999; fill: green; pointer-events: none;'+css+'"><svg version="1.1" style="-webkit-filter: drop-shadow( 0 0 4px rgba(0, 0, 0, .9)); filter: drop-shadow( 0 0 4px rgba(0, 0, 0, .9));" x="0px" y="0px" viewBox="0 0 1000 1000" xml:space="preserve"><g><path d="M959.4,469.4c-16.9,0-30.6,13.7-30.6,30.6c0,236.4-192.3,428.7-428.7,428.7S71.3,736.4,71.3,500C71.3,263.6,263.6,71.3,500,71.3c93.7,0,182.7,29.7,257.4,85.8c13.5,10.2,32.7,7.4,42.9-6.1c10.2-13.5,7.4-32.7-6.1-42.8C708.8,43.9,607.1,10,500,10C229.8,10,10,229.8,10,500c0,270.2,219.8,490,490,490s490-219.8,490-490C990,483.1,976.3,469.4,959.4,469.4z"/><path d="M215.4,447.7c-12-12-31.3-12-43.3,0c-12,12-12,31.3,0,43.3l245,245c6,6,13.8,9,21.7,9c7.8,0,15.7-3,21.7-9L981,215.4c12-12,12-31.3,0-43.3c-12-12-31.3-12-43.3,0l-499,499L215.4,447.7z"/></g></svg></div>');
   $( "body" ).append( o );
   $(o).fadeOut(5000);
@@ -127,7 +126,7 @@ function warnMarker(e,css) {
   var cursorX = p.x
   var cursorY = p.y
   console.log('WARN',cursorX,cursorY);
-  
+
   o = $('<div style="position: absolute; top:'+cursorY+'px; left: '+ cursorX +'px; width: 40px; height: 40px; fill: #ff0; z-index: 999; pointer-events: none;'+css+'"><svg version="1.1" style="-webkit-filter: drop-shadow( 0 0 4px rgba(0, 0, 0, .9)); filter: drop-shadow( 0 0 4px rgba(0, 0, 0, .9));" x="0px" y="0px" viewBox="0 0 100 125"><g transform="translate(0,-952.36218)"><path style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:#000000;enable-background:accumulate;" d="m 49.999548,962.36215 c -2.77446,0 -5.29918,1.3853 -6.71875,3.7812 L 5.0307975,1030.7997 c -1.41991,2.4028 -1.39108,5.3495 0.0312,7.75 1.27219,2.1453 3.65785,3.8194 6.4374995,3.8125 l 77.000001,0 c 2.77928,0.01 5.16552,-1.6676 6.4375,-3.8125 1.42362,-2.4007 1.45245,-5.347 0.0312,-7.75 l -38.25,-64.65635 c -1.41947,-2.3959 -3.94419,-3.7812 -6.71865,-3.7812 z m 0,6 c 0.56422,0 1.30991,0.4174 1.5625,0.8438 l 38.21875,64.65625 c 0.25251,0.427 0.25314,1.1981 0,1.625 -0.40478,0.6826 -0.71493,0.8764 -1.28125,0.875 l -77.000001,0 c -0.56593,10e-4 -0.8767,-0.1928 -1.28125,-0.875 -0.2530395,-0.427 -0.2524095,-1.1979 0,-1.625 l 38.218751,-64.65625 c 0.25257,-0.4263 0.99828,-0.8438 1.5625,-0.8438 z m 0,16 c -3.31371,0 -6,2.6863 -6,6 l 1,22.00005 c 0,2.7614 2.23857,5 5,5 2.76143,0 5,-2.2386 5,-5 l 1,-22.00005 c 0,-3.3137 -2.68629,-6 -6,-6 z m 0,35.00005 c -3.86598,0 -7,3.134 -7,7 0,3.8659 3.13402,7 7,7 3.86598,0 7,-3.1341 7,-7 0,-3.866 -3.13402,-7 -7,-7 z" /></g></svg></div>');
   $( "body" ).append( o );
   $(o).fadeOut(5000);
@@ -139,7 +138,7 @@ function errorMarker(e,css) {
   var cursorX = p.x
   var cursorY = p.y
   console.log('ERR',cursorX,cursorY);
-  
+
   o = $('<div style="position: absolute; top:'+cursorY+'px; left: '+ cursorX +'px; width: 40px; height: 40px; fill: red; z-index: 999; pointer-events: none;'+css+'"><svg version="1.0" style="-webkit-filter: drop-shadow( 0 0 4px rgba(0, 0, 0, .9)); filter: drop-shadow( 0 0 4px rgba(0, 0, 0, .9));" x="0px" y="0px" viewBox="0 0 100 125" xml:space="preserve"><g><path fill="#000000" d="M50,14.996c-19.333,0-35.004,15.671-35.004,35.004c0,19.332,15.671,35.004,35.004,35.004   c19.332,0,35.004-15.672,35.004-35.004C85.004,30.667,69.332,14.996,50,14.996z M50,79.004c-15.993,0-29.004-13.012-29.004-29.004   c0-15.993,13.011-29.004,29.004-29.004c15.992,0,29.004,13.011,29.004,29.004C79.004,65.992,65.992,79.004,50,79.004z"/><polygon fill="#000000" points="70.578,36.423 63.578,29.419 50,42.998 36.421,29.419 29.421,36.423 43,50.002 29.421,63.576    36.421,70.58 50,57.002 63.578,70.58 70.578,63.576 57.004,50.002  "/></g></svg></div>');
   $( "body" ).append( o );
   $(o).fadeOut(5000);