diff --git a/flag.css b/flag.css index 895455f..38352e7 100644 --- a/flag.css +++ b/flag.css @@ -21,6 +21,7 @@ #flag-panel span { margin-right: 10px; margin-left: 5px; + float: left; } #flag-overlay { diff --git a/flag.js b/flag.js index 4c6c87f..e49c0db 100644 --- a/flag.js +++ b/flag.js @@ -86,17 +86,24 @@ var tab = document.createElement('span'); tab.innerHTML = '⚑'; tab.addEventListener('mouseenter',function(ev) { - if(!panel.classList.contains('opened')) { - panel.classList.add('opened'); + if(!panel.classList.contains('tapped')) { + if(!panel.classList.contains('opened')) { + panel.classList.add('open'); + panel.classList.add('opened'); + }else{ + panel.classList.toggle('open'); + } } - panel.classList.toggle('open'); }); //TODO open feedback btn with click tab.addEventListener('click',function(ev) { if(!panel.classList.contains('opened')) { + panel.classList.add('tapped'); + panel.classList.add('open'); panel.classList.add('opened'); + }else{ + panel.classList.toggle('open'); } - panel.classList.toggle('open'); }); var button = document.createElement('button'); diff --git a/flag.min.css b/flag.min.css index fe2a6cc..1a5b4bf 100644 --- a/flag.min.css +++ b/flag.min.css @@ -1 +1 @@ -#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;z-index:99999}#flag-panel.open{margin-right:0!important}#flag-panel.opened{transition:margin-right 1s}#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);z-index:9999}#flag-iframe{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:10000;background-color:#000;border:3px solid #fff;border-radius:1em;overflow-y:scroll;height:97vh;min-width:350px;width:80%;display:block;margin:0 auto;margin-top:1vh}#flag-overlay.closing{transition:opacity .5s}#flag-iframe.closing{transition:margin 1s ease,width 1s ease,height 1s ease;width:350px;height:170px;margin-top:calc(50vh - 50px);overflow:hidden} \ No newline at end of file +#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;z-index:99999}#flag-panel.open{margin-right:0!important}#flag-panel.opened{transition:margin-right 1s}#flag-panel span{margin-right:10px;margin-left:5px;float:left}#flag-overlay{position:fixed;width:100%;height:100vh;top:0;left:0;background-color:rgba(0,0,0,.5);z-index:9999}#flag-iframe{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:10000;background-color:#000;border:3px solid #fff;border-radius:1em;overflow-y:scroll;height:97vh;min-width:350px;width:80%;display:block;margin:0 auto;margin-top:1vh}#flag-overlay.closing{transition:opacity .5s}#flag-iframe.closing{transition:margin 1s ease,width 1s ease,height 1s ease;width:350px;height:170px;margin-top:calc(50vh - 50px);overflow:hidden} \ No newline at end of file diff --git a/flag.min.js b/flag.min.js index 7adcb06..75e834a 100644 --- a/flag.min.js +++ b/flag.min.js @@ -1,2 +1,2 @@ -!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"),iframe.classList.add("closing"),setTimeout((function(){flag.style.opacity=0,iframe.style.opacity=0,setTimeout((function(){flag.remove(),iframe.remove(),document.body.style.overflowY="auto"}),500)}),1e3)},openFlag=function(ev,infos=!1){flag=document.createElement("div"),document.body.style.overflowY="hidden",flag.id="flag-overlay",(iframe=document.createElement("iframe")).src="",iframe.name="flag-iframe",iframe.id="flag-iframe",document.body.appendChild(flag),setTimeout((function(){flag.addEventListener("click",(function(){closeFlag()}))}),3e3),document.body.appendChild(iframe);var form=document.createElement("form");form.action=connector+"?style="+style,form.target="flag-iframe",form.method="POST";const screenshotTarget=document.body;var fields={};if(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)",infos&&typeof infos==typeof{})for(var i in infos)fields[i]=infos[i];for(var f in console.log("Fields",fields),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(),form.remove()},panel=document.createElement("div");panel.id="flag-panel";var tab=document.createElement("span");tab.innerHTML="⚑",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=0;l{"close"==event.data&&closeFlag()});var links=document.getElementsByClassName("flag-link");if(links.length>0)for(var l=0;l