Merge branch 'master' of https://git.seemsleg.it/pub/cssjs-func-lib into master

design optionen
Merge branch 'feature/itooltip' into master
2022-03-17 17:41:58 +01:00 · 2022-03-17 17:41:55 +01:00 · 2022-03-12 23:40:38 +01:00 · 2022-03-12 23:39:58 +01:00 · 2022-03-12 22:48:51 +01:00 · 2022-03-12 13:27:08 +01:00
11 changed files with 183 additions and 7 deletions
--- a/README.md
+++ b/README.md
@@ -252,7 +252,38 @@ Suche: <input type="text" onkeyup="myFilter()" id="suchstr" />
 ## problem melden
 einfach ans ende der seite, rest macht das script
 ```
+  <body data-feedbackstyle="default|dark">
+  ...
    <script src="/cssjs/flag.js"></script>
    <link rel="stylesheet" href="/cssjs/flag.css">
  </body>
 ```
+
+## js error sammler
+in den header, am besten vor allen anderen js
+```
+<script src="/cssjs/js-error-logger.min.js"></script>
+```
+
+## Fader
+```
+<link rel="stylesheet" href="/cssjs/fade.min.css" />
+
+<div class="fadeable">...</div>
+```
+
+zum ein und ausfaden einfach die class "visible" hinzufügen oder entfernen
+
+## Ajax ToolTip
+benötigt "Fader"
+
+```
+<link rel="stylesheet" href="/cssjs/itooltip.min.css" />
+...
+
+<a href="bla" class="itooltip" data-url="tooltip-url">blub</a>
+
+...
+<script src="/cssjs/itooltip.min.js"></script>
+
+```
--- a/fade.css
+++ b/fade.css
@@ -0,0 +1,10 @@
+.fadeable {
+  opacity: 0;
+  margin-top: -30px;
+  transition: margin-top 0.2s,opacity 0.2s;
+}
+
+.fadeable.visible {
+  opacity: 1;
+  margin-top: 0;
+}
--- a/fade.min.css
+++ b/fade.min.css
@@ -0,0 +1 @@
+.fadeable{opacity:0;margin-top:-30px;transition:margin-top .2s,opacity .2s}.fadeable.visible{opacity:1;margin-top:0}
--- a/flag.js
+++ b/flag.js
@@ -1,8 +1,16 @@
 (function(connector) {
  'use strict';

+  var style = 'default';
+  if(document.body.dataset.feedbackstyle) {
+    style = document.body.dataset.feedbackstyle;
+  }
+
  var iframe;
  var flag;
+  var col = 'light';
+  //TODO color css
+  //TODO abbrechen close anders

  var closeFlag = function(ev) {
    flag.classList.add('closing');
@@ -12,7 +20,6 @@
        flag.remove();
      },500);
    },3000);
-    //TODO timeout und vanish
  }

  var openFlag = function(ev) {
@@ -25,7 +32,7 @@
    document.body.appendChild(flag);

    var form = document.createElement('form');
-    form.action = connector;
+    form.action = connector+"?style="+style;
    form.target = 'flag-iframe';
    form.method = 'POST';
    const screenshotTarget = document.body;
@@ -38,6 +45,8 @@
    fields['s'] = window.location.hostname;
    if(document.referrer) {fields['r'] = document.referrer;}
    if(window.location.href) {fields['u'] = window.location.href;}
+    if(navigator.userAgent) {fields['a'] = navigator.userAgent;}
+    fields['d'] = ''+window.screen.width+'x'+window.screen.height+' ('+window.screen.colorDepth+'bit)';

    for(var f in fields) {
      var inp = document.createElement('input');
--- a/flag.min.js
+++ b/flag.min.js
@@ -1,2 +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="&#9873;",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");
+!function(connector){"use strict";var style="default",iframe,flag;document.body.dataset.feedbackstyle&&(style=document.body.dataset.feedbackstyle);var col="light",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+"?style="+style,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),navigator.userAgent&&(fields.a=navigator.userAgent),fields.d=window.screen.width+"x"+window.screen.height+" ("+window.screen.colorDepth+"bit)",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="&#9873;",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
--- a/flag.min.js.map
+++ b/flag.min.js.map
@@ -5,24 +5,27 @@
    ],
    "names": [
        "connector",
+        "style",
        "iframe",
        "flag",
+        "document",
+        "body",
+        "dataset",
+        "feedbackstyle",
+        "col",
        "closeFlag",
        "ev",
        "classList",
        "add",
        "setTimeout",
-        "style",
        "opacity",
        "remove",
        "openFlag",
-        "document",
        "createElement",
        "id",
        "src",
        "name",
        "appendChild",
-        "body",
        "form",
        "action",
        "target",
@@ -35,6 +38,12 @@
        "hostname",
        "referrer",
        "href",
+        "navigator",
+        "userAgent",
+        "screen",
+        "width",
+        "height",
+        "colorDepth",
        "inp",
        "type",
        "value",
@@ -56,6 +65,6 @@
        "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",
+    "mappings": "CAAA,SAAUA,WACR,aAEA,IAAIC,MAAQ,UAKRC,OACAC,KALDC,SAASC,KAAKC,QAAQC,gBACvBN,MAAQG,SAASC,KAAKC,QAAQC,eAKhC,IAAIC,IAAM,QAINC,UAAY,SAASC,IACvBP,KAAKQ,UAAUC,IAAI,WACnBC,YAAW,WACTV,KAAKF,MAAMa,QAAU,EACrBD,YAAW,WACTV,KAAKY,WACL,OACF,MAGAC,SAAW,SAASN,KACtBP,KAAOC,SAASa,cAAc,QACzBC,GAAK,gBACVhB,OAASE,SAASa,cAAc,WACzBE,IAAK,GACZjB,OAAOkB,KAAO,cACdjB,KAAKkB,YAAYnB,QACjBE,SAASC,KAAKgB,YAAYlB,MAE1B,IAAImB,KAAOlB,SAASa,cAAc,QAClCK,KAAKC,OAASvB,UAAU,UAAUC,MAClCqB,KAAKE,OAAS,cACdF,KAAKG,OAAS,OACd,MAAMC,iBAAmBtB,SAASC,KAMlC,IAAIsB,OAAS,GAOb,IAAI,IAAIC,KANRD,OAAU,EAAIE,OAAOC,SAASC,SAC3B3B,SAAS4B,WAAWL,OAAU,EAAIvB,SAAS4B,UAC3CH,OAAOC,SAASG,OAAON,OAAU,EAAIE,OAAOC,SAASG,MACrDC,UAAUC,YAAYR,OAAU,EAAIO,UAAUC,WACjDR,OAAU,EAAOE,OAAOO,OAAOC,MAAM,IAAIR,OAAOO,OAAOE,OAAO,KAAKT,OAAOO,OAAOG,WAAW,OAE/EZ,OAAQ,CACnB,IAAIa,IAAMpC,SAASa,cAAc,SACjCuB,IAAIC,KAAO,SACXD,IAAIpB,KAAOQ,EACXY,IAAIE,MAAQf,OAAOC,GACnBN,KAAKD,YAAYmB,KAGnBlB,KAAKrB,MAAQ,eACbG,SAASC,KAAKgB,YAAYC,MAC1BA,KAAKqB,UAGHC,MAAQxC,SAASa,cAAc,OACnC2B,MAAM1B,GAAK,aAEX,IAAI2B,IAAMzC,SAASa,cAAc,QACjC4B,IAAIC,UAAY,UAChBD,IAAIE,iBAAiB,cAAa,SAASrC,IACrCkC,MAAMjC,UAAUqC,SAAS,WAC3BJ,MAAMjC,UAAUC,IAAI,UAEtBgC,MAAMjC,UAAUsC,OAAO,WAGzB,IAAIC,OAAS9C,SAASa,cAAc,UAEpCiC,OAAOJ,UAAY,iBACnBI,OAAOH,iBAAiB,QAAQ/B,UAEhCa,OAAOkB,iBAAiB,UAAYI,QAEjB,SAAdA,MAAMC,MACP3C,cAIJ,IAAI4C,MAAQjD,SAASkD,uBAAuB,aAC5C,GAAGD,MAAME,OAAS,EAChB,IAAI,IAAIC,KAAKH,MACXI,QAAQC,IAAIL,OACZA,MAAMG,GAAGT,iBAAiB,SAAQ,SAASrC,IAGzC,OAFAM,SAASN,IACTA,GAAGiD,kBACI,KAKbf,MAAMvB,YAAYwB,KAClBD,MAAMvB,YAAY6B,QAElB9C,SAASC,KAAKgB,YAAYuB,OAtG5B,CAuGG",
    "file": "flag.js"
 }
--- a/itooltip.css
+++ b/itooltip.css
@@ -0,0 +1,15 @@
+tooltip {
+  display:block;
+  width: 300px;
+  background-color: rgba(0,0,0,0.8);
+  color: #fff;
+  border: 3px solid #fff;
+  border-radius: 0.5em;
+  padding: 0.5em;
+
+}
+
+tooltip h3 {
+  margin: 0;
+  color: #fff;
+}
--- a/itooltip.js
+++ b/itooltip.js
@@ -0,0 +1,52 @@
+( function() {
+  'use strict';
+
+  var loadToolTip = function(ev) {
+    //destroyToolTip(ev);
+    if(!ev.target.dataset.url) return;
+
+    var tt = document.createElement('tooltip');
+    tt.classList.add('fadeable');
+    tt.style.cssText= "position:absolute; top: "+(ev.pageY+10)+"px; left: "+ (ev.pageX+10) +"px;";
+    document.body.appendChild(tt);
+
+    var url = ev.target.dataset.url;
+    //console.log('URL:',url);
+    var xmlhttp = new XMLHttpRequest();
+    xmlhttp.onreadystatechange = function() {
+      if (this.readyState == 4) {
+        if(this.status == 200) {
+          tt.innerHTML = this.responseText;
+          tt.classList.add('visible');
+        }
+      }
+    };
+    xmlhttp.open("GET", url, true);
+    xmlhttp.send();
+  }
+
+  var destroyToolTip = function(ev) {
+    var tts = document.getElementsByTagName('tooltip');
+    if(tts[0]) {
+      tts[0].classList.remove('visible');
+      setTimeout(function() {
+        if(tts[0]) tts[0].remove();
+      },500);
+    }
+  }
+
+  //class itooltip
+  var elems = document.getElementsByClassName('itooltip');
+  for (var i =0;i<elems.length;i++) {
+    elems[i].addEventListener('mouseenter',function(ev){
+      loadToolTip(ev);
+    });
+    elems[i].addEventListener('mouseleave',function(ev){
+      destroyToolTip(ev);
+    });
+  }
+})();
+
+//TODO lade daten von url in data-url
+//TODO in der obenhälfte tooltip down untehälte up
+//TODO linke hälte tooltip richts sondt links
--- a/itooltip.min.css
+++ b/itooltip.min.css
@@ -0,0 +1 @@
+tooltip{display:block;width:300px;background-color:rgba(0,0,0,.8);color:#fff;border:3px solid #fff;border-radius:.5em;padding:.5em}tooltip h3{margin:0}
--- a/itooltip.min.js
+++ b/itooltip.min.js
@@ -0,0 +1,2 @@
+!function(){"use strict";for(var loadToolTip=function(ev){if(ev.target.dataset.url){var tt=document.createElement("tooltip");tt.classList.add("fadeable"),tt.style.cssText="position:absolute; top: "+(ev.pageY+10)+"px; left: "+(ev.pageX+10)+"px;",document.body.appendChild(tt);var url=ev.target.dataset.url,xmlhttp=new XMLHttpRequest;xmlhttp.onreadystatechange=function(){4==this.readyState&&200==this.status&&(tt.innerHTML=this.responseText,tt.classList.add("visible"))},xmlhttp.open("GET",url,!0),xmlhttp.send()}},destroyToolTip=function(ev){var tts=document.getElementsByTagName("tooltip");tts[0]&&(tts[0].classList.remove("visible"),setTimeout((function(){tts[0]&&tts[0].remove()}),500))},elems=document.getElementsByClassName("itooltip"),i=0;i<elems.length;i++)elems[i].addEventListener("mouseenter",(function(ev){loadToolTip(ev)})),elems[i].addEventListener("mouseleave",(function(ev){destroyToolTip(ev)}))}();
+//# sourceMappingURL=itooltip.min.js.map
--- a/itooltip.min.js.map
+++ b/itooltip.min.js.map
@@ -0,0 +1,46 @@
+{
+    "version": 3,
+    "sources": [
+        "itooltip.js"
+    ],
+    "names": [
+        "loadToolTip",
+        "ev",
+        "target",
+        "dataset",
+        "url",
+        "tt",
+        "document",
+        "createElement",
+        "classList",
+        "add",
+        "style",
+        "cssText",
+        "pageY",
+        "pageX",
+        "body",
+        "appendChild",
+        "xmlhttp",
+        "XMLHttpRequest",
+        "onreadystatechange",
+        "this",
+        "readyState",
+        "status",
+        "innerHTML",
+        "responseText",
+        "open",
+        "send",
+        "destroyToolTip",
+        "tts",
+        "getElementsByTagName",
+        "remove",
+        "setTimeout",
+        "elems",
+        "getElementsByClassName",
+        "i",
+        "length",
+        "addEventListener"
+    ],
+    "mappings": "CAAA,WACE,aAsCA,IApCA,IAAIA,YAAc,SAASC,IAEzB,GAAIA,GAAGC,OAAOC,QAAQC,IAAtB,CAEA,IAAIC,GAAKC,SAASC,cAAc,WAChCF,GAAGG,UAAUC,IAAI,YACjBJ,GAAGK,MAAMC,QAAS,4BAA4BV,GAAGW,MAAM,IAAI,cAAeX,GAAGY,MAAM,IAAK,MACxFP,SAASQ,KAAKC,YAAYV,IAE1B,IAAID,IAAMH,GAAGC,OAAOC,QAAQC,IAExBY,QAAU,IAAIC,eAClBD,QAAQE,mBAAqB,WACJ,GAAnBC,KAAKC,YACW,KAAfD,KAAKE,SACNhB,GAAGiB,UAAYH,KAAKI,aACpBlB,GAAGG,UAAUC,IAAI,aAIvBO,QAAQQ,KAAK,MAAOpB,KAAK,GACzBY,QAAQS,SAGNC,eAAiB,SAASzB,IAC5B,IAAI0B,IAAMrB,SAASsB,qBAAqB,WACrCD,IAAI,KACLA,IAAI,GAAGnB,UAAUqB,OAAO,WACxBC,YAAW,WACNH,IAAI,IAAIA,IAAI,GAAGE,WAClB,OAKFE,MAAQzB,SAAS0B,uBAAuB,YACnCC,EAAG,EAAEA,EAAEF,MAAMG,OAAOD,IAC3BF,MAAME,GAAGE,iBAAiB,cAAa,SAASlC,IAC9CD,YAAYC,OAEd8B,MAAME,GAAGE,iBAAiB,cAAa,SAASlC,IAC9CyB,eAAezB,OA5CrB",
+    "file": "itooltip.js"
+}
Author	SHA1	Message	Date
troy	cb5aba50b4	Merge branch 'master' of https://git.seemsleg.it/pub/cssjs-func-lib into master	2022-03-17 17:41:58 +01:00
troy	0110d04bd6	design optionen	2022-03-17 17:41:55 +01:00
troy	ed3bd14fc7	Merge branch 'feature/itooltip' into master	2022-03-12 23:40:38 +01:00
troy	1f76d6a942	readme	2022-03-12 23:39:58 +01:00
troy	a7c3f4dd02	fade in out css	2022-03-12 22:48:51 +01:00
troy	768e1bb464	bosschen style	2022-03-12 13:27:08 +01:00
troy	6a7a13a09c	grundfunktion tooltip	2022-03-12 13:12:47 +01:00
troy	81c619228b	boah ka	2022-03-11 21:33:53 +01:00
titz lapi	d4577caff3	.	2022-03-11 18:06:45 +01:00
Sebastian Titz	b07f92f492	.	2022-03-10 14:40:09 +01:00
Sebastian Titz	e890a581a4	TODOs	2022-03-10 14:21:02 +01:00
troy	15dbeee834	auflösung in flag	2022-03-06 11:50:24 +01:00
troy	90ade370d7	user agent	2022-03-06 11:42:44 +01:00
troy	c1a64450d2	Merge branch 'master' of https://git.seemsleg.it/pub/cssjs-func-lib into master	2022-03-05 23:05:29 +01:00
troy	475c959420	unTODO	2022-03-05 23:05:27 +01:00
titz lapi	d8a9ba6619	TODOs	2022-02-28 20:03:59 +01:00
titz lapi	dbe3aee539	#29 mir fehlt noch die option zu erkennen ob hell oder dunkel	2022-02-28 19:42:34 +01:00
troy	142ba0bd8a	js error readme	2022-02-27 00:12:02 +01:00
troy	ca6fb42493	Merge branch 'feature/flag-btn' into master	2022-02-26 12:53:21 +01:00
				`@@ -0,0 +1 @@`
				`.fadeable{opacity:0;margin-top:-30px;transition:margin-top .2s,opacity .2s}.fadeable.visible{opacity:1;margin-top:0}`
				`@@ -0,0 +1 @@`
				`tooltip{display:block;width:300px;background-color:rgba(0,0,0,.8);color:#fff;border:3px solid #fff;border-radius:.5em;padding:.5em}tooltip h3{margin:0}`