pub/cssjs-func-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
troy 2022-03-17 17:41:58 +01:00
commit cb5aba50b4
8 changed files with 151 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
README.md
View File

@ -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>
```

10
fade.css Normal file
View File

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

1
fade.min.css vendored Normal file
View File

@ -0,0 +1 @@
.fadeable{opacity:0;margin-top:-30px;transition:margin-top .2s,opacity .2s}.fadeable.visible{opacity:1;margin-top:0}

15
itooltip.css Normal file
View File

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

52
itooltip.js Normal file
View File

@ -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

1
itooltip.min.css vendored Normal file
View File

@ -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}

2
itooltip.min.js vendored Normal file
View File

@ -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

46
itooltip.min.js.map Normal file
View File

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