Merge branch 'feature/flag-btn' into master

README.md

@@ -248,3 +248,11 @@ Suche: <input type="text" onkeyup="myFilter()" id="suchstr" />
 ...
 <script src="/cssjs/backtotop.min.js"></script>
 ```
+
+## problem melden
+einfach ans ende der seite, rest macht das script
+```
+    <script src="/cssjs/flag.js"></script>
+    <link rel="stylesheet" href="/cssjs/flag.css">
+  </body>
+```

flag.css

@@ -0,0 +1,57 @@
+#flag-panel {
+  position: fixed;
+  bottom: 0px;
+  right: 0px;
+  width: 150px;
+  border: 1px solid #fff;
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+  margin-right: -130px;
+}
+
+#flag-panel.open {
+  margin-right: 0px !important;
+}
+
+#flag-panel.opened {
+  transition: margin-right 1s;
+}
+
+#flag-panel span {
+  margin-right: 10px;
+  margin-left: 5px;
+}
+
+#flag-overlay {
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  background-color: rgba(0,0,0,0.5);
+}
+
+#flag-overlay iframe {
+  width: 80%;
+  min-width: 350px;
+  margin: 0 auto;
+  margin-top: 1vh;
+  display: block;
+  background-color: #fff;
+  border: 3px solid #000;
+  border-radius: 1em;
+  overflow-y: scroll;
+  height: 97vh;
+}
+
+#flag-overlay.closing {
+  transition: opacity 0.5s;
+}
+
+#flag-overlay.closing iframe {
+  transition: margin 1s ease, width 1s ease, height 1s ease;
+  width: 350px;
+  height: 170px;
+  margin-top: calc(50vh - 50px);
+  overflow: hidden;
+}

flag.js

@@ -0,0 +1,95 @@
+(function(connector) {
+  'use strict';
+
+  var iframe;
+  var flag;
+
+  var closeFlag = function(ev) {
+    flag.classList.add('closing');
+    setTimeout(function() {
+      flag.style.opacity = 0;
+      setTimeout(function() {
+        flag.remove();
+      },500);
+    },3000);
+    //TODO timeout und vanish
+  }
+
+  var openFlag = function(ev) {
+    flag = document.createElement('div');
+    flag.id = 'flag-overlay';
+    iframe = document.createElement('iframe');
+    iframe.src= '';
+    iframe.name = 'flag-iframe';
+    flag.appendChild(iframe);
+    document.body.appendChild(flag);
+
+    var form = document.createElement('form');
+    form.action = connector;
+    form.target = 'flag-iframe';
+    form.method = 'POST';
+    const screenshotTarget = document.body;
+
+    /*html2canvas(screenshotTarget).then((canvas) => {
+      const base64image = canvas.toDataURL("image/png");
+      window.location.href = base64image;
+    });*/
+    var fields = {};
+    fields['s'] = window.location.hostname;
+    if(document.referrer) {fields['r'] = document.referrer;}
+    if(window.location.href) {fields['u'] = window.location.href;}
+
+    for(var f in fields) {
+      var inp = document.createElement('input');
+      inp.type = 'hidden';
+      inp.name = f;
+      inp.value = fields[f]
+      form.appendChild(inp);
+    }
+
+    form.style = 'display:none';
+    document.body.appendChild(form);
+    form.submit();
+  }
+
+  var panel = document.createElement('div');
+  panel.id = 'flag-panel';
+
+  var tab = document.createElement('span');
+  tab.innerHTML = '⚑';
+  tab.addEventListener('mouseenter',function(ev) {
+    if(!panel.classList.contains('opened')) {
+      panel.classList.add('opened');
+    }
+    panel.classList.toggle('open');
+  });
+
+  var button = document.createElement('button');
+
+  button.innerHTML = 'Problem melden';
+  button.addEventListener('click',openFlag);
+
+  window.addEventListener("message", (event) => {
+    //console.log(event);
+    if(event.data == 'close') {
+      closeFlag();
+    }
+  });
+
+  var links = document.getElementsByClassName('flag-link');
+  if(links.length > 0) {
+    for(var l in links) {
+      console.log(links);
+      links[l].addEventListener('click',function(ev) {
+        openFlag(ev);
+        ev.preventDefault();
+        return false;
+      });
+    }
+  }
+
+  panel.appendChild(tab);
+  panel.appendChild(button);
+
+  document.body.appendChild(panel);
+})('https://troy-grunt.de/feedback');

flag.min.css

@@ -0,0 +1 @@
+#flag-panel{position:fixed;bottom:0;right:0;width:150px;border:1px solid #fff;border-top-left-radius:15px;border-bottom-left-radius:15px;margin-right:-130px}#flag-panel.open{margin-right:0!important}#flag-panel.opened{transition:margin-right 1s}#flag-panel span{margin-right:10px;margin-left:5px}#flag-overlay{position:fixed;width:100%;height:100vh;top:0;left:0;background-color:rgba(0,0,0,.5)}#flag-overlay iframe{width:80%;min-width:350px;margin:0 auto;margin-top:1vh;display:block;background-color:#fff;border:3px solid #000;border-radius:1em;overflow-y:scroll;height:97vh}#flag-overlay.closing{transition:opacity .5s}#flag-overlay.closing iframe{transition:margin 1s ease,width 1s ease,height 1s ease;width:350px;height:170px;margin-top:calc(50vh - 50px);overflow:hidden}

flag.min.js

@@ -0,0 +1,2 @@
+!function(connector){"use strict";var iframe,flag,closeFlag=function(ev){flag.classList.add("closing"),setTimeout((function(){flag.style.opacity=0,setTimeout((function(){flag.remove()}),500)}),3e3)},openFlag=function(ev){(flag=document.createElement("div")).id="flag-overlay",(iframe=document.createElement("iframe")).src="",iframe.name="flag-iframe",flag.appendChild(iframe),document.body.appendChild(flag);var form=document.createElement("form");form.action=connector,form.target="flag-iframe",form.method="POST";const screenshotTarget=document.body;var fields={};for(var f in fields.s=window.location.hostname,document.referrer&&(fields.r=document.referrer),window.location.href&&(fields.u=window.location.href),fields){var inp=document.createElement("input");inp.type="hidden",inp.name=f,inp.value=fields[f],form.appendChild(inp)}form.style="display:none",document.body.appendChild(form),form.submit()},panel=document.createElement("div");panel.id="flag-panel";var tab=document.createElement("span");tab.innerHTML="⚑",tab.addEventListener("mouseenter",(function(ev){panel.classList.contains("opened")||panel.classList.add("opened"),panel.classList.toggle("open")}));var button=document.createElement("button");button.innerHTML="Problem melden",button.addEventListener("click",openFlag),window.addEventListener("message",event=>{"close"==event.data&&closeFlag()});var links=document.getElementsByClassName("flag-link");if(links.length>0)for(var l in links)console.log(links),links[l].addEventListener("click",(function(ev){return openFlag(ev),ev.preventDefault(),!1}));panel.appendChild(tab),panel.appendChild(button),document.body.appendChild(panel)}("https://troy-grunt.de/feedback");
+//# sourceMappingURL=flag.min.js.map

flag.min.js.map

@@ -0,0 +1,61 @@
+{
+    "version": 3,
+    "sources": [
+        "flag.js"
+    ],
+    "names": [
+        "connector",
+        "iframe",
+        "flag",
+        "closeFlag",
+        "ev",
+        "classList",
+        "add",
+        "setTimeout",
+        "style",
+        "opacity",
+        "remove",
+        "openFlag",
+        "document",
+        "createElement",
+        "id",
+        "src",
+        "name",
+        "appendChild",
+        "body",
+        "form",
+        "action",
+        "target",
+        "method",
+        "screenshotTarget",
+        "fields",
+        "f",
+        "window",
+        "location",
+        "hostname",
+        "referrer",
+        "href",
+        "inp",
+        "type",
+        "value",
+        "submit",
+        "panel",
+        "tab",
+        "innerHTML",
+        "addEventListener",
+        "contains",
+        "toggle",
+        "button",
+        "event",
+        "data",
+        "links",
+        "getElementsByClassName",
+        "length",
+        "l",
+        "console",
+        "log",
+        "preventDefault"
+    ],
+    "mappings": "CAAA,SAAUA,WACR,aAEA,IAAIC,OACAC,KAEAC,UAAY,SAASC,IACvBF,KAAKG,UAAUC,IAAI,WACnBC,YAAW,WACTL,KAAKM,MAAMC,QAAU,EACrBF,YAAW,WACTL,KAAKQ,WACL,OACF,MAIAC,SAAW,SAASP,KACtBF,KAAOU,SAASC,cAAc,QACzBC,GAAK,gBACVb,OAASW,SAASC,cAAc,WACzBE,IAAK,GACZd,OAAOe,KAAO,cACdd,KAAKe,YAAYhB,QACjBW,SAASM,KAAKD,YAAYf,MAE1B,IAAIiB,KAAOP,SAASC,cAAc,QAClCM,KAAKC,OAASpB,UACdmB,KAAKE,OAAS,cACdF,KAAKG,OAAS,OACd,MAAMC,iBAAmBX,SAASM,KAMlC,IAAIM,OAAS,GAKb,IAAI,IAAIC,KAJRD,OAAU,EAAIE,OAAOC,SAASC,SAC3BhB,SAASiB,WAAWL,OAAU,EAAIZ,SAASiB,UAC3CH,OAAOC,SAASG,OAAON,OAAU,EAAIE,OAAOC,SAASG,MAE3CN,OAAQ,CACnB,IAAIO,IAAMnB,SAASC,cAAc,SACjCkB,IAAIC,KAAO,SACXD,IAAIf,KAAOS,EACXM,IAAIE,MAAQT,OAAOC,GACnBN,KAAKF,YAAYc,KAGnBZ,KAAKX,MAAQ,eACbI,SAASM,KAAKD,YAAYE,MAC1BA,KAAKe,UAGHC,MAAQvB,SAASC,cAAc,OACnCsB,MAAMrB,GAAK,aAEX,IAAIsB,IAAMxB,SAASC,cAAc,QACjCuB,IAAIC,UAAY,UAChBD,IAAIE,iBAAiB,cAAa,SAASlC,IACrC+B,MAAM9B,UAAUkC,SAAS,WAC3BJ,MAAM9B,UAAUC,IAAI,UAEtB6B,MAAM9B,UAAUmC,OAAO,WAGzB,IAAIC,OAAS7B,SAASC,cAAc,UAEpC4B,OAAOJ,UAAY,iBACnBI,OAAOH,iBAAiB,QAAQ3B,UAEhCe,OAAOY,iBAAiB,UAAYI,QAEjB,SAAdA,MAAMC,MACPxC,cAIJ,IAAIyC,MAAQhC,SAASiC,uBAAuB,aAC5C,GAAGD,MAAME,OAAS,EAChB,IAAI,IAAIC,KAAKH,MACXI,QAAQC,IAAIL,OACZA,MAAMG,GAAGT,iBAAiB,SAAQ,SAASlC,IAGzC,OAFAO,SAASP,IACTA,GAAG8C,kBACI,KAKbf,MAAMlB,YAAYmB,KAClBD,MAAMlB,YAAYwB,QAElB7B,SAASM,KAAKD,YAAYkB,OA7F5B,CA8FG",
+    "file": "flag.js"
+}