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

README.md

@@ -262,5 +262,28 @@ einfach ans ende der seite, rest macht das script
 ## js error sammler
 in den header, am besten vor allen anderen js
 ```
-    <script src="/cssjs/js-error-logger.min.js"></script>
+<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>
+
 ```

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;
+}

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}

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;
+}

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

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}

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

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"
+}