WIP iframe, und form angefangen

flag.css

@@ -2,6 +2,32 @@
   position: fixed;
   bottom: 0px;
   right: 0px;
-  width: 200px;
+  width: 150px;
   border: 1px solid #fff;
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+  margin-right: -130px;
+  transition: margin-right 1s;
+}
+
+#flag-panel.open {
+  margin-right: 0px !important;
+}
+
+#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);
+}
+
+#flagoverlay iframe {
+
 }

flag.js

@@ -1,4 +1,4 @@
-(function() {
+(function(connector) {
   'use strict';
 
   var panel = document.createElement('div');
@@ -6,11 +6,31 @@
 
   var tab = document.createElement('span');
   tab.innerHTML = '⚑';
+  tab.addEventListener('mouseenter',function(ev) {
+    panel.classList.toggle('open');
+  });
 
   var button = document.createElement('button');
+
+  var flag = false;
   button.innerHTML = 'Problem melden';
+  button.addEventListener('click',function(ev) {
+    flag = document.createElement('div');
+    flag.id = 'flag-overlay';
+    var 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.method = 'POST';
+  })
+
+
   panel.appendChild(tab);
   panel.appendChild(button);
 
   document.body.appendChild(panel);
-})();
+})('https://troy-grunt.de/feedback');

flag.min.css

@@ -1 +1 @@
-#flag-panel{position:fixed;bottom:0;right:0;width:200px;border:1px solid #fff}
+#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;transition:margin-right 1s}#flag-panel.open{margin-right:0!important}#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.min.js

@@ -1,2 +1,2 @@
-!function(){"use strict";var panel=document.createElement("div");panel.id="flag-panel";var button=document.createElement("button");button.innerHTML="Problem melden",panel.appendChild(button),document.body.appendChild(panel)}();
+!function(connector){"use strict";var panel=document.createElement("div");panel.id="flag-panel";var tab=document.createElement("span");tab.innerHTML="⚑",tab.addEventListener("mouseenter",(function(ev){panel.classList.toggle("open")}));var button=document.createElement("button"),flag=!1;button.innerHTML="Problem melden",button.addEventListener("click",(function(ev){(flag=document.createElement("div")).id="flag-overlay";var 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.method="POST"})),panel.appendChild(tab),panel.appendChild(button),document.body.appendChild(panel)}("https://troy-grunt.de/feedback");
 //# sourceMappingURL=flag.min.js.map

flag.min.js.map

@@ -4,15 +4,28 @@
         "flag.js"
     ],
     "names": [
+        "connector",
         "panel",
         "document",
         "createElement",
         "id",
-        "button",
+        "tab",
         "innerHTML",
+        "addEventListener",
+        "ev",
+        "classList",
+        "toggle",
+        "button",
+        "flag",
+        "iframe",
+        "src",
+        "name",
         "appendChild",
-        "body"
+        "body",
+        "form",
+        "action",
+        "method"
     ],
-    "mappings": "CAAA,WACE,aAEA,IAAIA,MAAQC,SAASC,cAAc,OACnCF,MAAMG,GAAK,aAEX,IAAIC,OAASH,SAASC,cAAc,UACpCE,OAAOC,UAAY,iBACnBL,MAAMM,YAAYF,QAElBH,SAASM,KAAKD,YAAYN,OAV5B",
+    "mappings": "CAAA,SAAUA,WACR,aAEA,IAAIC,MAAQC,SAASC,cAAc,OACnCF,MAAMG,GAAK,aAEX,IAAIC,IAAMH,SAASC,cAAc,QACjCE,IAAIC,UAAY,UAChBD,IAAIE,iBAAiB,cAAa,SAASC,IACzCP,MAAMQ,UAAUC,OAAO,WAGzB,IAAIC,OAAST,SAASC,cAAc,UAEhCS,MAAO,EACXD,OAAOL,UAAY,iBACnBK,OAAOJ,iBAAiB,SAAQ,SAASC,KACvCI,KAAOV,SAASC,cAAc,QACzBC,GAAK,eACV,IAAIS,OAASX,SAASC,cAAc,UACpCU,OAAOC,IAAK,GACZD,OAAOE,KAAO,cACdH,KAAKI,YAAYH,QACjBX,SAASe,KAAKD,YAAYJ,MAE1B,IAAIM,KAAOhB,SAASC,cAAc,QAClCe,KAAKC,OAASnB,UACdkB,KAAKE,OAAS,UAIhBnB,MAAMe,YAAYX,KAClBJ,MAAMe,YAAYL,QAElBT,SAASe,KAAKD,YAAYf,OAlC5B,CAmCG",
     "file": "flag.js"
 }