Okoun news reader

Výhody

• vlákna
• rychost - žádné tuny javascriptového kódu, UIY, loggerů apod.
• žádné reklamy
• všechno v jedné stránce

• kliknutí na jakýkoliv odkaz zruší celý vygenerovaný obsah (otvírejte odkazy v novém okně/tabu prohlížeče)
• zavření okna/tabu zruší celý vygenerovaný obsah (naučte se nepoužívat alt+f4 nebo ctrl+f4 ;-))
• nelze vkládat příspěvky (ostatně, je to jen reader)
• nic moc design, sry

Nejprve je třeba otevřít "Oblíbené kluby s novými", tím se otevře seznam klubů, kde jsou nějaké nové příspěvky. Pak je třeba kód spustit (ideálně přes nějaké bookmark tlačítko). Program si načte seznam klubů, schová původní okounovský obsah a vytvoří nahoře na stránce něco jako taby (pro každý klub jeden). Ve dvousekundových intervalech pak načítá obsahy jednotlivých klubů, vyzobe z toho příspěvky, trochu je upraví, trochu přehází a nově vygeneruje obsah každého tabu.

Pokud některé kluby nechcete zobrazit, před spuštěním programu jednoduše odškrtněte checkbox před názvem klubu.

Jak to pustit

Ideální je vytvoření speciálního bookmarku (záložky, oblíbené atd.) v prohlížeči, úplně stejně jako když přidáváte ručně odkaz na nějakou tu oblíbenou stránku, do pole Name (nebo jméno, název atd.) si dejte libovolný popis a do pole URL (nebo adresa atd.) vložíte tento šílený kód:
javascript:(function(ignores){var i=0;var div={'element':null,'id':'okoun_news_reader','name':'Okoun news reader','interval':2000,'features':{'threads':true,'hide':true}};var items=document.querySelectorAll('div#body div.item');var styles={'main':'background-color: #ffffff; padding: 10px; margin-bottom: 30px;','mainName':'text-decoration: underline; font-weight: bold;','feature':'padding-left: 20px; font-size: x-small; color: #999999;','menu':'overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding: 10px; border-bottom: 3px solid #000000; margin-bottom: 10px;','item':'display: inline; margin-left: 10px; margin-right: 10px; border-right: 3px solid #000000; padding-right: 20px; white-space: nowrap;','content':'display: none','post':'border-top: 1px solid #cccccc; padding: 5px;','postNew':'border-left: 5px solid #0000ff; background-color: #f6f6f6;','postIcon':'max-width: 32px; max-height: 32px; float: left; margin-right: 8px; margin-top: 2px;','postUser':'font-weight: bold;','postDate':'font-size: x-small; color: #999999; padding-left: 5px;','postRe':'font-size: x-small; color: #cccccc;','postShow':'text-decoration: none; font-weight: bold; padding-left: 5px;','postImage':'max-width: 100%; height: auto; padding: 5px;','postTitle':'font-weight: bold; margin-bottom: 5px; display: inline-block;','postData':'padding-left: 34px;','postOrig':'border-left: 5px solid #b85f00; background-color: #ffecbf;'};var functions={'contentSwitch':function(event){var e=null;var i=parseInt(event.target.getAttribute('data-i'));if(!isNaN(i)){if((e=event.target.parentElement.parentElement.querySelector('div#'+div.id+'_content div.'+div.id+'_act'))!==null){e.style.display='none';e.classList.remove(div.id+'_act');}if((e=document.getElementById(div.id+'_content_'+i))!==null){e.style.display='block';e.classList.add(div.id+'_act');}}},'render':function(response){var dom=(new DOMParser()).parseFromString(response,'text/html');var pager=dom.querySelector('div.pager-top div.pager');var posts=dom.querySelectorAll('div#body div.articles div.item');var i=0;var tree={};var prevs={};var done={};var result='<h2>'+'['+'<a href="javascript:void(0);" title="Scroll to most recent" onclick="if((e=this.parentElement.parentElement.querySelector(\'div.'+div.id+'_new\'))!==null){e.scrollIntoView();}">⇟</a>'+(div.features.threads?'| <a href="javascript:void(0);" title="No threads" class="'+div.id+'_nothreads">⇤</a>':'')+'] '+dom.querySelector('h2 a').innerHTML+' '+'<a title="Original page" href="" class="'+div.id+'_origin">⤵</a>'+'</h2>'+((pager!==null)?pager.outerHTML+'<p>':'');var createHTML=function(post,depth){var prev=((depth>0)?null:post.querySelector('div.actions a.prev'));var thread=((depth>0)?null:post.querySelector('div.actions a.thread'));var title=post.querySelector('div.title');var hilite=(post.classList.contains('new')?true:false);var thisLink=post.querySelector('div.meta div.permalink a');return('<div style="'+styles.post+(hilite?' '+styles.postNew:'')+((depth>0)?' margin-left: '+((depth*50)-5)+'px;':'')+'"'+(hilite?' class="'+div.id+'_new"':'')+' id="'+div.id+'_post_'+thisLink.href.split('-').pop()+'">'+'<img style="'+styles.postIcon+'" src="'+post.querySelector('div.ico-wrapper img').src+'">'+'<span style="'+styles.postUser+'">'+post.querySelector('div.meta span.user').innerHTML+'</span>'+'<span style="'+styles.postDate+'">'+thisLink.innerHTML+'</span>'+'<a style="'+styles.postShow+'" href="'+thisLink.href+'" title="This post on original page">⤵</a>'+((prev!==null)?' .. <span style="'+styles.postRe+'" class="'+div.id+'_re">Re: '+prev.outerHTML+'</span>':'')+((thread!==null)?' | <span style="'+styles.postRe+'" class="'+div.id+'_re">'+thread.outerHTML+'</span>':'')+'<br>'+((title!==null)?'<div style="'+styles.postTitle+'">'+title.innerHTML+'</div>':'')+'<div class="'+div.id+'_post" style="'+styles.postData+'">'+post.querySelector('div.content').innerHTML+'</div>'+'</div>');};var createTree=function(postId,depth){var j=0,result='';if(done.hasOwnProperty(postId)&&(done[postId]!==null)){result+=createHTML(done[postId],depth);done[postId]=null;}for(j=(tree[postId].length-1);j>=0;j--){if(tree.hasOwnProperty(tree[postId][j])===true){result+=createTree(tree[postId][j],(depth+1));}else if(done[tree[postId][j]]!==null){result+=createHTML(done[tree[postId][j]],(depth+1));done[tree[postId][j]]=null;}}return(result);};if(div.features.threads===true){for(i=0;i<posts.length;i++){let thisId=posts[i].querySelector('div.meta div.permalink a').href.split('-').pop();let prev=posts[i].querySelector('div.actions a.prev');if(prev!==null){let prevId=prev.href.split('-').pop();if(tree.hasOwnProperty(prevId)===false){tree[prevId]=[thisId];}else{tree[prevId].push(thisId);}prevs[thisId]=prevId;}done[thisId]=posts[i];}for(var key in prevs){if(done.hasOwnProperty(prevs[key])===false){delete(prevs[key]);}}}for(i=0;i<posts.length;i++){let thisId=posts[i].querySelector('div.meta div.permalink a').href.split('-').pop();if(done[thisId]!==null){var topId=(prevs.hasOwnProperty(thisId)?prevs[thisId]:null);while(prevs.hasOwnProperty(topId)===true){topId=prevs[topId];}if(topId===null){result+=createHTML(posts[i],0);done[thisId]=null;}else if(done[topId]!==null){result+=createTree(topId,0);}}}return((result.length>0)?result:'No valid posts found');},'noThreads':function(element){var j=0;var divs=element.querySelectorAll('div');var ids=[];for(j=0;j<divs.length;j++){if(divs[j].id.indexOf(div.id+'_post_')===0){ids.push(divs[j].id.split('_').pop());}}ids=ids.sort(function(a,b){return((parseInt(a)<parseInt(b))?1:(parseInt(b)<parseInt(a))?-1:0);});for(j=0;j<ids.length;j++){let post=document.getElementById(div.id+'_post_'+ids[j]);if(post!==null){post.style.marginLeft='0px';element.appendChild(post);}}},'closeItem':function(event){var item=event.target.parentElement;var next=(item.nextSibling||item.previousSibling||null);var content=document.getElementById(div.id+'_content_'+item.getAttribute('data-i'));if(next===null){functions.closeDiv();}else{if(content!==null){if(content.classList.contains(div.id+'_act')){next.dispatchEvent(new Event('click'));}content.parentNode.removeChild(content);}item.parentNode.removeChild(item);}},'closeDiv':function(){div.element.parentNode.removeChild(div.element);if(div.features.hide===true){let orig=document.getElementById('body');if(orig!==null){orig.style.display='block';}}},};if((document.location.href.indexOf('/favourites.jsp?new=1')>=0)&&(div.element===null)&&(document.getElementById(div.id)===null)&&(items.length>0)){let cookies=document.cookie.split(';');for(i=0;i<cookies.length;i++){let parts=cookies[i].match(/^\s*([^=]+)=([01])$/);if((parts!==null)&&(parts[1].indexOf(div.id)===0)){let feature=parts[1].substr(div.id.length+1);if(div.features.hasOwnProperty(feature)){div.features[feature]=((parts[2]==='1')?true:false);}}}div.element=document.createElement('div');div.element.setAttribute('id',div.id);div.element.setAttribute('style',styles.main);let html='<a href="javascript:void(0);" title="Close" id="'+div.id+'_close" style="float: right; padding: 5px;">[x]</a>'+'<span style="'+styles.mainName+'">'+div.name+'</span>';for(var feature in div.features){html+='<span style="'+styles.feature+'">'+'<input type="checkbox"'+((div.features[feature]===true)?' checked':'')+' onchange="document.cookie=\''+div.id+'_'+feature+'=\'+(this.checked?\'1\':\'0\')+\'; expires='+(new Date(Date.now()+(3600*24*10957*1000))).toGMTString()+'\';">'+' '+feature.charAt(0).toUpperCase()+feature.substr(1)+'</span>';}html+='<p>'+'<div id="'+div.id+'_menu" style="'+styles.menu+'">';let contents=[];let starts=[];let timeout=500;for(i=0;i<items.length;i++){let checkbox=items[i].querySelector('input[type=checkbox]');let anchors=items[i].querySelectorAll('a');if((anchors.length===2)&&((checkbox===null)||((checkbox.checked!==false)&&(ignores.includes(parseInt(checkbox.id.split('-')[1])||0)===false)))){let new_cnt=parseInt(anchors[1].innerHTML);html+='<div data-i="'+i+'" style="'+styles.item+'">'+'<a href="javascript:void(0);" title="Close tab">[x]</a> '+anchors[0].innerHTML+(!isNaN(new_cnt)?' ('+new_cnt+')':'')+'</div>';contents.push(i);(function getBoard(j,url){var xhr=new XMLHttpRequest();var now=new Date(Date.now()+timeout);var openUrl=(url||anchors[1].href.substr(anchors[1].href.indexOf('/boards/')));xhr.open('GET',openUrl,true);xhr.onreadystatechange=function(){var e=document.getElementById(div.id+'_content_'+j);var k=0;var follow=function(id,url){return(function(){getBoard(id,url);});};if(e!==null){if(xhr.readyState===2){e.innerHTML='Loading content ...';}else if(xhr.readyState===4){if(xhr.status!==200){e.innerHTML='Error while getting content ('+xhr.status+')';}else{e.innerHTML=functions.render(xhr.responseText);let images=e.querySelectorAll('div.'+div.id+'_post img');for(k=0;k<images.length;k++){images[k].setAttribute('style',styles.postImage);}let pagers=e.querySelectorAll('div.pager a');for(k=0;k<pagers.length;k++){pagers[k].addEventListener('click',follow(j,pagers[k].href));pagers[k].setAttribute('href','javascript:void(0);');}let reLinks=e.querySelectorAll('span.'+div.id+'_re a');for(k=0;k<reLinks.length;k++){reLinks[k].addEventListener('click',follow(j,reLinks[k].href));reLinks[k].setAttribute('href','javascript:void(0);');}let noThreads=e.querySelector('a.'+div.id+'_nothreads');if(noThreads!==null){noThreads.addEventListener('click',function(){functions.noThreads(noThreads.parentElement.parentElement);});}let origin=e.querySelector('a.'+div.id+'_origin');if(origin!==null){origin.setAttribute('href',openUrl);}if((url!==null)&&((url.indexOf('contextId=')>=0)||(url.indexOf('rootId=')>=0))&&(url.indexOf('#')>=0)){let origPost=e.querySelector('div#'+div.id+'_post_'+(parseInt(url.split('-').pop())||''));if(origPost!=null){origPost.setAttribute('style',(origPost.getAttribute('style')||'')+' '+styles.postOrig);origPost.scrollIntoView();}}}}}};if(url===null){starts.push(now.getHours().toString().padStart(2,'0')+':'+now.getMinutes().toString().padStart(2,'0')+':'+now.getSeconds().toString().padStart(2,'0'));setTimeout(function(){xhr.send();},timeout);timeout+=div.interval;}else{xhr.send();}})(i,null);}}html+='</div>'+'<div id="'+div.id+'_content">';for(i=0;i<contents.length;i++){html+='<div id="'+div.id+'_content_'+contents[i]+'" class="'+((i===0)?div.id+'_act':'')+'" style="'+styles.content+'">Loading will start at '+starts[i]+'</div>';}html+='</div>';div.element.innerHTML=html;document.body.insertBefore(div.element,document.body.firstChild);let menu_items=div.element.querySelectorAll('div#'+div.id+'_menu div');for(i=0;i<menu_items.length;i++){menu_items[i].addEventListener('click',functions.contentSwitch);}let menu_closes=div.element.querySelectorAll('div#'+div.id+'_menu div a');for(i=0;i<menu_closes.length;i++){menu_closes[i].addEventListener('click',functions.closeItem);}let div_close=div.element.querySelector('a#'+div.id+'_close');if(div_close!==null){div_close.addEventListener('click',functions.closeDiv);}if(div.features.hide===true){let orig=document.getElementById('body');if(orig!==null){orig.style.display='none';}}if(contents.length>0){div.element.querySelector('div#'+div.id+'_menu div').dispatchEvent(new Event('click'));}}})([]);

Samozřejmě to nemusíte přepisovat, stačí, pokud celý kód zkopírujete (můžete použít i tlačítko) a pak vložíte (tj. pastnete). Bookmark samozřejmě uložte a následně se přesuňte na stránku s oblíbenými kluby s novými příspěvky a klikněte na nově vytvořený bookmark.

Pokud to kopírování nějak nejde, tak si ten kód přímo stáhněte.

Pozor, pokud zrovna nic nového nebo oblíbeného nemáte, nespustí se nic. Pokud omylem kliknete na bookmark, když jste na nějaké jiné stránce, nestane se taky nic. A když se to pokusíte spustit víckrát najednou - taky nic. Aspoň doufejme teda ;-))

Vychytávky

• jednotlivé taby se nahrávají s dvousekundovými intervaly, přeci jenom budeme tu rybu trochu šetřit, aby se moc nezakuckávala
• zavřením aktuálně zobrazeného tabu (pomocí [x]) se nahraje automaticky další tab, pokud už žádný není k dispozici, celé se to zavře
• zobrazování diskuze ve vláknech (threads) je zapnutá, ale můžete to snadno vypnout zaškrtnutím Threads (projeví se to ale až při příštím puštění kódu)
• kliknutím na ⇟ odscrolluje stránka na nejnovější nový příspěvek (užitečné, když je jediný nový příspěvek hluboko ve vláknu a není na první pohled vidět)
• kliknutím na ⇤ se v aktuálním tabu zruší vlákna a příspěvky se setřídí podle data sestupně (výborné hlavně v klubech typu Poznej něco podle něčeho) - ale pozor, to je jednorázová akce, vlákna se zpět už nijak nevyvolají
• kliknutím na ⤵ se dostanete na originální stránku diskuzního klubu - ale pozor, nechte to otevírat v novém okně/tabu prohlížeče, jinak se celý vygenerovaný obsah ztratí (užitečné, pokud se rozhodnete vložit nějaký ten příspěvek nebo reakci)
• kliknutím na Nejnovější, Novější, 1, 2, 3, Starší nebo Nejstarší zobrazíte v daném tabu příslušné příspěvky (prostě to funguje tak, jak se dá čekat)
• původní seznam klubiki je schovaný, když se celý vygenerovaný obsah zavře ([x] vpravo nahoře), tak se zase zobrazí - ale pokud ho chcete mít zobrazný stále (dole na stránce), tak si odklikněte Hide (projeví se to ale až při příštím puštění kódu)
• pokud některé kluby nechcete otevírat (např. kvůli závadnému obsahu nebo nebezpečné symbolice, nad čímž by vaši kolegové v práci mohli zvednout obočí), zjistěte si IDčka daných klubů (přes Inspect element na checkboxu u daného klubu) a jejich seznam oddělený čárkou dejte do hranatých závorek na konci kódu - místo ([]); tam pak můžete mít třeba ([4105,4567]); (honící klub a nemravné gify)

Jestli chcete něco přidělat nebo předělat, tak vzkazniki, ale nic neslibuju. Ostatně, kód je plně k dispozici, takže si ho můžete upravit sami dle libosti, máme i jakž takž okomentovanou a jakž takž přehlednou verzi.