From 862d65c8944c26a247bc1a56b7f82864a80a78ee Mon Sep 17 00:00:00 2001 From: titz lapi Date: Fri, 4 Nov 2022 20:36:33 +0100 Subject: [PATCH 1/6] WIP: grundstruktur --- frontlog.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 frontlog.js diff --git a/frontlog.js b/frontlog.js new file mode 100644 index 0000000..9c9eef2 --- /dev/null +++ b/frontlog.js @@ -0,0 +1,20 @@ +let frontlogList = {}; +let frontlog_mxel = document.body.dataset['frontlog']??3; +let frontlog = document.createElement('frontlog'); +document.body.appendChild(frontlog); + +let frontlogAdd = function(title,icon,msg,col, time) { + let elem = document.createElement('flogelem'); + { + let elemid = 'fl_'; + { + let ch = 'abcdefghijklmnopqrstuvwxyz0123456789'; + let chl = ch.length; + for ( let i = 0; i < length; i++ ) { + elemid += ch.charAt(Math.floor(Math.random() * chl)); + } + } + elem.id = elemid; + } + elem.appendChild +} From 67e4e01708096f8116dcc9c04488257963908efa Mon Sep 17 00:00:00 2001 From: troy Date: Fri, 4 Nov 2022 21:55:15 +0100 Subject: [PATCH 2/6] =?UTF-8?q?frontlog,=20m=C3=BCsste=20so=20klappen,=20m?= =?UTF-8?q?it=20pipe=20usw?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontlog.js | 45 ++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 42 insertions(+), 3 deletions(-) diff --git a/frontlog.js b/frontlog.js index 9c9eef2..475907f 100644 --- a/frontlog.js +++ b/frontlog.js @@ -1,9 +1,29 @@ let frontlogList = {}; -let frontlog_mxel = document.body.dataset['frontlog']??3; +let frontlogMaxEl = document.body.dataset['frontlog']||3; let frontlog = document.createElement('frontlog'); document.body.appendChild(frontlog); -let frontlogAdd = function(title,icon,msg,col, time) { +let frontlogVanish = function(elem) { + elem.remove(); + //TODO irgendwann hübscher machen + let elems = document.getElementsByTagName('flogelem'); + if(elems.length < frontlogMaxEl && frontlogList.length) { + let p = frontlogList.shift(); + frontlogPipe(p.title,p.icon,p.msg,p.col,p.time); + } +} + +let frontlogAdd = function(title,icon,msg,col,time) { + let elems = document.getElementsByTagName('flogelem'); + if(elems.length < frontlogMaxEl) { + frontlogPipe(title,icon,msg,col,time); + }else{ + let pElem = {"title":title,"icon":icon,"msg":msg,"col":col,"time":time}; + frontlogList.appendChild(pElem); + } +} + +let frontlogPipe = function(title,icon,msg,col, time) { let elem = document.createElement('flogelem'); { let elemid = 'fl_'; @@ -15,6 +35,25 @@ let frontlogAdd = function(title,icon,msg,col, time) { } } elem.id = elemid; + let flicon = document.createElement('img'); + flicon.src = icon; + elem.appendChild(flicon); + + let fltitle = document.createElement('fltitle'); + fltitle.innerText = title; + elem.appendChild(fltitle); + + let flmsg = document.createElement('flmsg'); + flmsg.innerText = msg; + elem.appendChild(flmsg); } - elem.appendChild + + elem.style = 'border-color: '+col+';'; + elem.addEventListener('click',function(ev){ + frontlogVanish(ev.target); + }); + setTimeout(function(){ + frontlogVanish(elem); + },time*1000) + frontlog.appendChild(elem); } From 2001ed947c52b8f4b9927920a0ed31961edd0153 Mon Sep 17 00:00:00 2001 From: Sebastian Titz Date: Tue, 8 Nov 2022 15:22:55 +0100 Subject: [PATCH 3/6] frontlog css --- frontlog.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 frontlog.css diff --git a/frontlog.css b/frontlog.css new file mode 100644 index 0000000..4da3e90 --- /dev/null +++ b/frontlog.css @@ -0,0 +1,14 @@ +frontlog { + position: fixed; + min-width: 200px; + bottom: 0; + right: 0; +} + +flogelem { + display: log; +} + +flogelem img { + width: 25px; +} \ No newline at end of file From 8e56887b7afc809b6d188eb5d1a2df9422e7cd97 Mon Sep 17 00:00:00 2001 From: Sebastian Titz Date: Tue, 8 Nov 2022 15:45:36 +0100 Subject: [PATCH 4/6] push statt append --- frontlog.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontlog.js b/frontlog.js index 475907f..6c5001b 100644 --- a/frontlog.js +++ b/frontlog.js @@ -1,4 +1,4 @@ -let frontlogList = {}; +let frontlogList = []; let frontlogMaxEl = document.body.dataset['frontlog']||3; let frontlog = document.createElement('frontlog'); document.body.appendChild(frontlog); @@ -19,7 +19,7 @@ let frontlogAdd = function(title,icon,msg,col,time) { frontlogPipe(title,icon,msg,col,time); }else{ let pElem = {"title":title,"icon":icon,"msg":msg,"col":col,"time":time}; - frontlogList.appendChild(pElem); + frontlogList.push(pElem); } } From 1764bbaa242de74aa1a193755d475d0040d3baa8 Mon Sep 17 00:00:00 2001 From: troy Date: Tue, 8 Nov 2022 18:24:16 +0100 Subject: [PATCH 5/6] in animation --- frontlog.css | 26 +++++++++++++++++++++++++- frontlog.js | 11 +++++++++-- 2 files changed, 34 insertions(+), 3 deletions(-) diff --git a/frontlog.css b/frontlog.css index 4da3e90..b19265b 100644 --- a/frontlog.css +++ b/frontlog.css @@ -6,9 +6,33 @@ frontlog { } flogelem { - display: log; + display:block; + border-width: 1px; + border-style: solid; + overflow: hidden; + max-height: 0; + margin-bottom: 0; + padding: 0; + opacity: 0; + -webkit-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s; + -moz-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s; + transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s; +} + +.flshow { + max-height: 100px!important; + margin-bottom: 1em; + padding: 4px; + border-radius: 8px; + opacity: 1; +} + +fltitle { + display: block; + font-size: 120%; } flogelem img { + float: left; width: 25px; } \ No newline at end of file diff --git a/frontlog.js b/frontlog.js index 6c5001b..fd5ac4f 100644 --- a/frontlog.js +++ b/frontlog.js @@ -30,7 +30,7 @@ let frontlogPipe = function(title,icon,msg,col, time) { { let ch = 'abcdefghijklmnopqrstuvwxyz0123456789'; let chl = ch.length; - for ( let i = 0; i < length; i++ ) { + for ( let i = 0; i < 16; i++ ) { elemid += ch.charAt(Math.floor(Math.random() * chl)); } } @@ -50,10 +50,17 @@ let frontlogPipe = function(title,icon,msg,col, time) { elem.style = 'border-color: '+col+';'; elem.addEventListener('click',function(ev){ - frontlogVanish(ev.target); + let tg = ev.target; + if(tg.tagName.toLowerCase() != 'flogelem') { + tg = ev.target.parentNode; + } + frontlogVanish(tg); }); setTimeout(function(){ frontlogVanish(elem); },time*1000) frontlog.appendChild(elem); + setTimeout(function(){ + elem.classList.add('flshow'); + },10); } From 5f60054c1fd2a3c674ead64e95d4c043e730a3a9 Mon Sep 17 00:00:00 2001 From: troy Date: Tue, 8 Nov 2022 18:36:15 +0100 Subject: [PATCH 6/6] out animation --- frontlog.css | 18 +++++++++++++----- frontlog.js | 16 +++++++++------- 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/frontlog.css b/frontlog.css index b19265b..2432dec 100644 --- a/frontlog.css +++ b/frontlog.css @@ -9,23 +9,31 @@ flogelem { display:block; border-width: 1px; border-style: solid; + border-radius: 8px; overflow: hidden; max-height: 0; margin-bottom: 0; padding: 0; opacity: 0; - -webkit-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s; - -moz-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s; - transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s; + position: relative; + bottom: 0; + -webkit-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s, bottom 3s; + -moz-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s, bottom 3s; + transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s, bottom 3s; } .flshow { - max-height: 100px!important; + max-height: 200px!important; margin-bottom: 1em; padding: 4px; - border-radius: 8px; opacity: 1; } +.flvanish { + position: relative; + bottom: 3em; + max-height: 0 !important; + opacity: 0 !important; +} fltitle { display: block; diff --git a/frontlog.js b/frontlog.js index fd5ac4f..1deb409 100644 --- a/frontlog.js +++ b/frontlog.js @@ -4,13 +4,15 @@ let frontlog = document.createElement('frontlog'); document.body.appendChild(frontlog); let frontlogVanish = function(elem) { - elem.remove(); - //TODO irgendwann hübscher machen - let elems = document.getElementsByTagName('flogelem'); - if(elems.length < frontlogMaxEl && frontlogList.length) { - let p = frontlogList.shift(); - frontlogPipe(p.title,p.icon,p.msg,p.col,p.time); - } + elem.classList.add('flvanish'); + setTimeout(function() { + elem.remove(); + let elems = document.getElementsByTagName('flogelem'); + if(elems.length < frontlogMaxEl && frontlogList.length) { + let p = frontlogList.shift(); + frontlogPipe(p.title,p.icon,p.msg,p.col,p.time); + } + },3100); } let frontlogAdd = function(title,icon,msg,col,time) {