windyplugin-module-pickertools
Version:
common module for adding stuff to the picker, loaded as dependency
288 lines (227 loc) • 11.9 kB
JavaScript
W.define(
'@plugins/pickerTools',
['map', 'picker', 'rootScope', 'broadcast', 'store'],
function (__exports, mapModule, {emitter: picker}, rs, store ) {
console.log("rs", rs.isMobile);
const $ = (e, t) => { return (t || document).querySelector(e) }
//let pluginVersion='0.1.1';
const map = mapModule.map || map;
/* import map from '@windy/map'
import picker from '@windy/picker'
import $ from '@windy/$'
import rs from '@windy/rootScope'
import bcast from '@windy/broadcast'*/
//load css
/*
if (!document.getElementById('pickerToolsCSS')) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = 'pickerToolsLess';
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = `https://unpkg.com/windyplugin-module-pickertools/dist/pickerTools.css`;
link.media = 'all';
head.appendChild(link);
}
*/
let activePlugin;
let pckEl;
let pt={pckr:{_icon:null}};
let pdr, pdl, mobWrapper;
let mobilePicker;
__exports.onopen = (params) => {
//console.log(activePlugin);
}
__exports.onmount = (node, refs) => {
mobilePicker = rs.isMobileOrTablet;
//console.log(refs);
//let pdl=document.createElement("div");
//pdl.id="picker-div-left";
//pdl.style.position="absolute";
//pdl.classList.add(rs.isMobile?"picker-div-mobl":"picker-div-desk");
pdl = refs["picker-div-left"];
//let pdr=document.createElement("div");
//pdr.id="picker-div-right";
//pdr.classList.add(rs.isMobile?"picker-div-mobl":"picker-div-desk");
pdr = refs["picker-div-right"];
mobWrapper = refs['mobile-div-wrapper'];
////send text to picker div.
function mobileDiv(d){
if (mobilePicker && $(".plugin-content-top")){
pckEl=$(".plugin-content-top");//W.pickerMobile.popup;
if (!pckEl.contains(d)){
//pckEl.style.position="fixed";
//let pda=document.createElement("div");
//pda.classList.add("picker-anchor-mobl");
//pckEl.appendChild(pda);
//pda.appendChild(d);
pckEl.appendChild(d);
}
}
}
function addContent(html,el){
if (html){
let show = true;
if (html.nodeName=="DIV"){
if (html.innerHTML){
for(;el.firstChild;) el.firstChild.remove();
el.appendChild(html);
} else show = false;
} else el.innerHTML=html;
if (show) el.classList.add("show");
} else {
el.classList.remove("show");
}
if(mobilePicker && $("#plugin-picker-mobile")){
mobWrapper.classList[(pdr.classList.contains("show") || pdl.classList.contains("show"))?'remove':'add']("hidden");
}
}
pt.fillRightDiv=function(html, mobStyle){
if(!mobilePicker) {//(!rs.isMobileOrTablet){
if ($(".picker-content")){
pckEl=$(".picker-content");//W.pickerDesktop.popupContent;
if (!pckEl.contains(pdr)){
pckEl.parentNode.style.outlineStyle="none"; //on my tablet long touching picker causes a persistent orange outline. this stops it.
pckEl.appendChild(pdr);
}
}
} else mobileDiv(mobWrapper);
if(mobStyle) Object.assign(pdr.style, mobStyle);
addContent(html,pdr);
}
pt.fillLeftDiv=function(html, pickerBckgCol=false, mobStyle){ //pickerBckgCol=false is transparent, true= "rgba(68,65,65,0.84)"
if (pickerBckgCol && !mobilePicker) pdl.style.backgroundColor="rgba(68,65,65,0.84)";
else pdl.style.backgroundColor="transparent";
if(!mobilePicker){
if ($(".picker-content")){//W.pickerDesktop && W.pickerDesktop.popupContent){
pckEl=$(".picker-content");//W.pickerDesktop.popupContent;
if (!pckEl.contains(pdl)){
pckEl.parentNode.style.outlineStyle="none";
let pda=document.createElement("div");
pckEl.appendChild(pda);
Object.assign(pda.style,{top:"0px",width:"0px",position:"absolute"});
pda.appendChild(pdl);
}
}
} else mobileDiv(mobWrapper);
if(mobStyle) Object.assign(pdl.style, mobStyle);
addContent(html,pdl);
}
pt.hideLeftDiv=function() { pdl.style.display="none"; }
pt.hideRightDiv=function(){ pdr.style.display="none"; }
pt.showLeftDiv=function() { pdl.style.display="inline-block"; }
pt.showRightDiv=function(){ pdr.style.display="inline-block"; }
pt.removeElements=function() {
//console.log("removing pdr and pdl");
pdr.innderHTML = '';
pdl.innerHTML = '';
//if (pdr.parentNode)pdr.parentNode.removeChild(pdr);
//if (pdl.parentNode)pdl.parentNode.removeChild(pdl);
}
pt.isOpen=function(){
return pt.getParams();
}
pt.getParams=function(){
let params = (!mobilePicker && W['@plugins/picker'] && W['@plugins/picker'].getParams()) ||
(mobilePicker && W['@plugins/picker-mobile'] && W['@plugins/picker-mobile'].getParams());
//console.log("picker params", params);
return params;
}
pt.useMobilePicker=function(set){
mobilePicker = set;
document.body.classList.add ( mobilePicker?"pickerTools-mobile":"pickerTools-desk");
document.body.classList.remove (!mobilePicker?"pickerTools-mobile":"pickerTools-desk");
}
pt.useMobilePicker(mobilePicker);
}
let dragFxs=[];
function onDrag(e) {
let getLL = ll => {
if (!mobilePicker){//!rs.isMobileOrTablet){
ll=e.target._latlng;
ll.lon=ll.lng;
} else {
ll = pt.getParams();
}
return ll;
}
dragFxs.forEach(f=>{
if (f.ready){
f.cbf(getLL());
f.ready=false;
clearTimeout(f.sendIfNotMoved);
setTimeout(()=>{
f.ready=true;
f.sendIfNotMoved = setTimeout(()=>{
f.cbf(getLL());
},f.interv)
},f.interv);
}
})
}
function wait4pckr(tries=0){
//console.log("wait for picker to open, then add listeners for picker marker");
if (!mobilePicker){ //!rs.isMobileOrTablet){
if (!pt.pckr._icon){
map.eachLayer(l=>{
if(l.options&&l.options.icon&&l.options.icon.options.className=="picker open"){
pt.pckr=l;
pt.pckr.on("drag", onDrag);
}
});
if (!pt.pckr._icon) {
if(tries<4)setTimeout(wait4pckr,500, tries+1);
}
}
} else {
map.on("move", onDrag)
}
}
function remListeners(){
//if(rs.isMobileOrTablet)
map.off("move", onDrag);
if (pt.pckr.off) pt.pckr.off("drag", onDrag);
}
//--picker drag listener
pt.drag = function(cbf, interv=100, pluginIdent){ //by default the picker is cbf is requested every 100ms when dragged.
dragFxs.push({cbf, interv, ready:true, sendIfNotMoved:null}); //sendIfNotMoved : send coords if map or picker has not moved after the interval.
wait4pckr(0); //in case picker has already been opened;
//bcast.on("pluginOpened",e=>{
// setTimeout(wait4pckr,500);
//});
//seems to be only added if not yet added:
picker.on("pickerOpened", wait4pckr);
picker.on("pickerClosed", remListeners);
}
pt.dragOff = function(cbf){
let ix = dragFxs.findIndex(e=>e.cbf===cbf);
if (ix!=-1) dragFxs.splice(ix,1);
if (dragFxs.length==0){
picker.off("pickerOpened", wait4pckr);
picker.off("pickerClosed", remListeners);
remListeners();
}
}
pt.setActivePlugin = plugin => activePlugin = plugin;
pt.getActivePlugin = () => activePlugin;
__exports.ondestroy = () =>{
pdr.remove();
pdl.remove();
pdr = null;
pdl = null; //why? if picker is closed, then there is no parent to remove from and remove() does not work;
mobWrapper.remove();
remListeners();
picker.off("pickerOpened", wait4pckr);
picker.off("pickerClosed", remListeners);
document.body.classList.remove("pickerTools-mobile", "pickerTools-desk");
}
__exports.pickerTools = pt;
}
,
`<div data-ref="mobile-div-wrapper" id="mobile-div-wrapper" class="rounded-box">
<div data-ref="picker-div-left" id="picker-div-left"></div>
<div data-ref="picker-div-right" id="picker-div-right"></div>
</div>`
,
`#picker-div-right{display:none;white-space:nowrap;padding:4px;font-size:12px;line-height:1.1}#picker-div-right span{padding:0px}#picker-div-right.show{display:inline-block}#picker-div-left{display:none;position:absolute;right:2px;white-space:nowrap;padding:4px;font-size:12px;line-height:1.1}#picker-div-left span{padding:0px}#picker-div-left.show{display:inline-block}.picker-anchor-mobl{position:fixed;top:85px;width:0px;left:50vw}.pickerTools-desk #picker-div-left{background-color:transparent;border-radius:8px 0px 0px 8px;margin-right:1px}.pickerTools-desk #picker-div-right{padding-right:20px}.pickerTools-desk .picker-content [data-ref="content"]{display:table-cell}#mobile-div-wrapper{display:flex;flex-direction:row;justify-content:space-between;margin:0 10px 10px 10px;padding:.5em 1em;border:solid 1px gray;overflow:hidden}#mobile-div-wrapper.hidden{display:none}.pickerTools-mobile #picker-div-left{position:relative;padding:0px;right:auto;background-color:transparent}.pickerTools-mobile #picker-div-right{position:relative;padding:0px;background-color:transparent}`
);