windyplugin-module-infobox
Version:
common module for the infobox lower left screen
85 lines (67 loc) • 3.6 kB
JavaScript
W.define(
'@plugins/infobox',
[ 'rootScope', 'broadcast','store' ],
function (__exports, rs, bcast, store ) {
console.log("infobox opened initially");
const $ = (e, t) => { return (t || document).querySelector(e) }
let info, activeIdent, hideWhenPluginOpens;
__exports.onmount = (node, refs) => {
info = refs.infobox;
}
const hide=()=>{
Object.assign(info?.style,{visibility: 'hidden',opacity: '0', transition: 'visibility 0s 0.5s, opacity 0.5s linear'});
}
const show=()=>{
Object.assign(info?.style,{visibility: 'visible', opacity: '1', transition: 'opacity 0.5s linear'});
}
__exports.hide = hide;
__exports.show = show;
bcast.on("pluginOpened",e=>{if (hideWhenPluginOpens && e==activeIdent)hide() });
bcast.on("pluginClosed",e=>{if (e==activeIdent)show() });
/**
* returns the div containing the infobox
*/
__exports.infobox = function(content, startId, ident, hwo = false){ //startId = provide plug in element id to show or hide plugin, on clicking box
activeIdent = ident;
hideWhenPluginOpens = hwo;
//let info=document.createElement("div");
info.innerHTML=content;
/*
if (rs.isMobile){
info.style.bottom="160px";
//setTimeout(()=>{ //move down if enough space
// console.log(
// info.offsetWidth,(window.innerWidth-$(".timecode", $("#plugin-mobile-calendar")).offsetWidth)/2
// );
// if(info.offsetWidth<(window.innerWidth-$(".timecode", $("#plugin-mobile-calendar")).offsetWidth)/2) info.style.bottom="110px";
//});
} else if (rs.isTablet){
info.style.bottom=((store.get('overlay')=="radar")?180:110)+"px";
} else info.style.bottom=((store.get('overlay')=="radar")?140:70)+"px";
if (rs.isMobile) $("#plugin-mobile-calendar").appendChild(info);
else{
$('#plugins-bottom-desktop').appendChild(info);
store.on('overlay',e=>{
if ($('#rh-bottom').style.bottom=="-100px"){
info.style.bottom=(rs.isTablet?200:160)+"px";
} else {
info.style.bottom=(rs.isTablet?110:70)+"px";
}
});
}
*/
if (hideWhenPluginOpens) hide();
if (startId){
Object.assign($("#"+startId).style,{cursor:"pointer",pointerEvents:"auto"});
$("#"+startId).addEventListener("click",()=>{
bcast.fire('rqstOpen',ident, {source: 'infobox'});
});
}
return info;
}
}
,
`<div data-ref="infobox"></div>`
,
`[data-ref="infobox"]{position:absolute;pointer-events:none ;width:calc(100% - 5px);background-color:transparent ;padding:3px ;line-height:1.1;white-space:nowrap }#device-desktop [data-ref="infobox"]{bottom:70px}#device-mobile [data-ref="infobox"],#device-tablet [data-ref="infobox"]{bottom:120px;width:calc(100% - 80px)}.ondetail [data-ref="infobox"],.onrplanner [data-ref="infobox"],.onr_planner [data-ref="infobox"]{display:none}#device-tablet #plugin-infobox,#device-mobile #plugin-infobox{width:auto !important}`
)