Selfies: Difference between revisions

   #m-photo{padding:8px;border:1px solid #ccc;border-radius:6px;font-size:15px;background:#fff}

   #toast{position:fixed;top:10px;left:50%;transform:translateX(-50%);

   .tv-popup .leaflet-popup-content{margin:10px 12px; width:380px !important; max-width:380px !important}

   @media (max-width:520px){

     .tv-popup .leaflet-popup-content{width:72vw !important; max-width:72vw !important}

   <div class="tv-panel" id="tv-panel">

     <input id="m-title" class="tv-input tv-text" placeholder="Enter Player Username *" required>

     <textarea id="m-desc" class="tv-input tv-text" rows="2" placeholder="Add description"></textarea>

     <input type="file" id="m-photo" class="tv-input" accept="image/jpeg,image/png,image/webp">

     <button id="m-add" class="tv-btn btn-add">Add to Map</button>

   function toast(msg="Saved ✅"){ const t=document.getElementById('toast'); t.textContent=msg; t.classList.add('show'); setTimeout(()=>t.classList.remove('show'),1500); }

   function icon(){ return L.divIcon({ className:'tv-icon', html:'<span>📸</span>', iconSize:[30,30], iconAnchor:[15,30], popupAnchor:[0,-24] }); }

     const t=(title||'').trim();

     const d=(desc||'').trim().replace(/</g,'&lt;').replace(/>/g,'&gt;');

     return `<b>${t||'Untitled'}</b>${d?`<div style="margin-top:6px">${d}</div>`:''}${img}`;

   }

     delBtn.onclick=()=>{ deleteMode=!deleteMode; delBtn.textContent='Delete mode: '+(deleteMode?'ON':'OFF'); delBtn.classList.toggle('on', deleteMode); };

       m.on('click', () => m.openPopup());

       m.on('contextmenu', () => { if(deleteMode){ selfies.removeLayer(m); saveShared().catch(console.warn); } });

     function collectMarkers(){

       const all=[]; selfies.eachLayer(l=>{ const ll=l.getLatLng();

       }); return all;

     }

     }

     const tI=document.getElementById('m-title'),

           dI=document.getElementById('m-desc'),

           pI=document.getElementById('m-photo'),

           addBtn=document.getElementById('m-add');

     function validateInputs(){

     addBtn.onclick = () => {

       if(!validateInputs()) return;

       addBtn.textContent='Click map…'; addBtn.disabled=true; map.getContainer().style.cursor='crosshair';

         try{

           const imgUrl = await uploadPhotoIfAny();

           await saveShared();

         }catch(err){ alert('Could not add selfie: ' + err.message); }

       });

     };