כתבתי קוד JS בשביל ליצור תפריט לבלוג הזה:
javascript:(()=>{const style=document.createElement('style');style.textContent=`#floatingMenu{position:fixed;top:100px;right:10px;width:300px;max-height:450px;background:rgba(0,0,0,0.7);color:white;font-family:Arial,sans-serif;font-size:14px;border-radius:6px;box-shadow:0 0 12px black;display:flex;flex-direction:column;user-select:none;z-index:999999;overflow:hidden;transition:max-height 0.4s ease;}#floatingMenu.collapsed{max-height:40px;}#floatingMenuHeader{padding:8px 10px;background:rgba(0,0,0,0.85);cursor:move;display:flex;justify-content:space-between;align-items:center;font-weight:bold;}#floatingMenuTitle{flex-grow:1;}#floatingMenuControls{display:flex;align-items:center;}#floatingMenuControls>button{cursor:pointer;color:white; margin-left:12px;font-weight:bold;user-select:none;background:none;border:none;color:white;font-size:16px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;}#searchInput{margin:0 10px;padding:5px 8px;border-radius:4px;border:none;font-size:14px;width:calc(100% - 20px);box-sizing:border-box;direction:rtl;}#floatingMenuList{padding:5px 10px;transition:opacity 0.4s ease;flex-grow:1;display:flex;flex-direction:column;overflow:hidden;}#floatingMenuList.fade{opacity:0;}#floatingMenuList.scrollable{overflow-y:auto;max-height:380px;}#floatingMenuList div{padding:5px 8px;border-radius:4px;margin-bottom:4px;background:rgba(255,255,255,0.1);cursor:pointer;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:background 0.2s ease,opacity 0.3s ease;}#floatingMenuList div:hover{background:rgba(255,255,255,0.25);}#highlight{background:yellow;color:black;font-weight:bold;}#floatingMenu.collapsed #searchInput,#floatingMenu.collapsed #floatingMenuList{opacity:0;pointer-events:none;height:0;padding:0 10px;overflow:hidden !important;transition:opacity 0.4s ease,height 0.4s ease,padding 0.4s ease,margin 0.4s ease;}#floatingMenuList .active{background:orange !important;color:black !important;}`;document.head.appendChild(style);const menu=document.createElement('div');menu.id='floatingMenu';const header=document.createElement('div');header.id='floatingMenuHeader';const title=document.createElement('div');title.id='floatingMenuTitle';title.textContent='פוסטים';const controls=document.createElement('div');const collapseBtn=document.createElement('button');collapseBtn.textContent='-';const closeBtn=document.createElement('button');closeBtn.textContent='×';controls.appendChild(collapseBtn);controls.appendChild(closeBtn);header.appendChild(title);header.appendChild(controls);const searchInput=document.createElement('input');searchInput.id='searchInput';searchInput.placeholder='חפש פוסטים...';const listContainer=document.createElement('div');listContainer.id='floatingMenuList';menu.appendChild(header);menu.appendChild(searchInput);menu.appendChild(listContainer);document.body.appendChild(menu);function isHebrew(t){return/[\u0590-\u05FF]/.test(t);}function escapeRegExp(s){return s.replace(/[.*+?^${}()|[\]\\]/g,'\\$&');}function getPosts(){const posts=document.querySelectorAll('h2.post-title,h3.post-title');const results=[];posts.forEach((p,i)=>{const link=p.querySelector('a');const text=link?link.textContent.trim():p.textContent.trim();results.push({el:p,text,index:i});});return results;}function highlightText(text,term){if(!term)return text;const re=new RegExp('('+escapeRegExp(term)+')','gi');return text.replace(re,'$1');}let activeIndex=-1;function updateList(){const term=searchInput.value.trim().toLowerCase();const posts=getPosts();listContainer.classList.add('fade');setTimeout(()=>{listContainer.innerHTML='';const filtered=posts.filter(p=>p.text.toLowerCase().includes(term));listContainer.classList.toggle('scrollable',filtered.length>10);if(filtered.length===0){const noResult=document.createElement('div');noResult.textContent='לא נמצאו פוסטים';noResult.style.textAlign='center';noResult.style.opacity='0.7';listContainer.appendChild(noResult);}else{filtered.forEach(({el,text,index})=>{const item=document.createElement('div');item.innerHTML=highlightText(text,term);item.style.textAlign=isHebrew(text[0])?'right':'left';item.style.direction=isHebrew(text[0])?'rtl':'ltr';item.addEventListener('click',()=>{el.scrollIntoView({behavior:'smooth',block:'center'});highlightPost(el);});listContainer.appendChild(item);});}},200);setTimeout(()=>listContainer.classList.remove('fade'),250);updateActive();}function highlightPost(el){el.style.transition='background-color 1.5s ease';el.style.backgroundColor='yellow';setTimeout(()=>{el.style.backgroundColor='';},1500);}function updateActive(){const posts=getPosts();let mid=window.innerHeight/2;let closest=-1;let minDist=Infinity;posts.forEach((p,i)=>{const rect=p.el.getBoundingClientRect();const dist=Math.abs(rect.top+rect.height/2-mid);if(distmenu.remove());collapseBtn.addEventListener('click',()=>menu.classList.toggle('collapsed'));searchInput.addEventListener('input',updateList);updateList();let drag=false,sx,sy,mx,my;header.addEventListener('mousedown',e=>{drag=true;sx=e.clientX;sy=e.clientY;const r=menu.getBoundingClientRect();mx=r.left;my=r.top;e.preventDefault();});window.addEventListener('mousemove',e=>{if(!drag)return;let nx=mx+(e.clientX-sx),ny=my+(e.clientY-sy);nx=Math.max(0,Math.min(nx,window.innerWidth-menu.offsetWidth));ny=Math.max(0,Math.min(ny,window.innerHeight-menu.offsetHeight));menu.style.left=nx+'px';menu.style.top=ny+'px';menu.style.right='auto';});window.addEventListener('mouseup',()=>drag=false);window.addEventListener('scroll',()=>updateActive());})();
