zkrášlovadlo diskuzí na sem

18.7.2020 19:55 | Přečteno: 2426× | poslední úprava: 19.7.2020 01:40

mě zaujal takovej ten blogísek vo youtube hele jak se tam používalo tamto tampermonkey na pouštění javascriptu na upravování stránky nóó a napadlo mě že by se takle tady dala udělat víc přehlednější diskuze podle kapici hele :O :O jestli toje jako dobrej nápad ale jako nevim :O :O

akorát sem teda jako nepoužila na pouštění userskriptů tamto tampermonkey ale nějakou jakože prej fakt opensource alternativu která se menuje violentmonkey hele :O ;D

zdrojáček pod vobrázkama :D ;D určitě to asi jako eště neni hotový noa připomínky sou vítaný :D ;D

 

 

jakoby z monitoru

jakoby z mobílku

 

// ==UserScript==
// 
// @name        zkrášlení diskuzí abclinuxu
// @namespace   skript na abclinuxu
// @description skript co dělá že je hežčí diskuze
// @version     1.0
// @author      gréta
// 
// stránky na kterejch se bude skript pouštět
// @match        https://www.abclinuxu.cz/poradna/*/show/*
// @match        https://www.abclinuxu.cz/blog/*/*/*/*
// @match        https://www.abclinuxu.cz/blog/*/*/*/*/*
// @match        https://www.abclinuxu.cz/zpravicky/*
// 
// skript se pouští až po načtení stránky
// @run-at       document-end
// 
// nechceme aby skript běhal i někde ve vnořenejch framech
// @noframes
// 
// ==/UserScript==

// něco jako počítadlo hashů z textovýho stringu
// budem potřebovat nějak udělat různý číslo pro různý řetězce
// vychází to z hashovacího algorytmu djb2 http://www.cse.yorku.ca/~oz/hash.html 
function sumaZnaku(retezec){
  var hash = 5381, len = retezec.length;
  for (var i = 0; i < len; i++) {
    //projdem celej řetězec a každej znak převedem na číslo a jakoby ho nějak strčíme dotoho hashe
    //javascript umí bitový operace
    //tamto << 5 je posun o pět bitů doleva 
    // maximální hodnota co vrátí charCodeAt je 65535
    
    hash = ((hash << 5) - hash) + retezec.charCodeAt(i);
    
    //logický bitový or/nebo na nuličce s hashem
    hash |= 0;
  }
  
  //číslo chceme kladný
  return Math.abs(hash);
}
  

// funkcí querySelectorAll de javascriptem vybrat z dokumentu css selectorem elementy
// vezmeme z dokumentu všecky prvky kterejm atribut id začíná řetězcem 'comment' a je před nima div element s atributem class vobsahujícím substring 'ds_hlavicka'
// no prostě vyberem všecky komentáře :D ;D
var comments=document.querySelectorAll('div[class*="ds_hlavicka"] ~ [id^=comment]');
// seznam všech možnejch css selectorů třeba tady jako https://www.w3schools.com/cssref/css_selectors.asp

// todleto bude slovník kam si budem vždycky skovávat autora a id komentáře by nám stačilo proiterovat komenty jenom jednou až budem přidávat upravenej link na nadřazenej komentář
var autoriKomentaru_dict={};

// pro každej komentář zavoláme funkci
comments.forEach(function(cmnt)
{
  // předchozí element na stejný úrovni je hlavička komentáře co vobsahuje méno autora čas link a takový tydlety 
  var hlavicka = cmnt.previousElementSibling;
  
  // komplet všecken textovej vobsah hlavičky komentu
  // .innerText vytahuje text i z dětí elementů :O :O
  var text = hlavicka.innerText;
  
  // regexpem vytáhnem méno autora
  // je to takovej šílenej regexp protože musíme podchytit i komenty vod anonimních lidiček jako sou radovani a podtržítka a taky musíme správně vytáhnout méno z komentu v poradně voznačenýho jako řešení
  var meno=/(?:\d\d:\d\d\s)(.+?)(?:\||$)/gm.exec(text)[1];
  
  //skováme si méno autora do slovníku s klíčem id komentu
  autoriKomentaru_dict[hlavicka.id]=meno;
  
  // kouknem jestli se koment odkazuje na nějakej nadřazenej
  // jakože je reakcí v diskuzi na nějakej jinej nóó a jestli jako jo
  // tak do html textu vodpovědi přidáme vodkaz na ten nadřazenej koment
  
  //vyberem všecky linky z ovládacího panýlku v hlavičce komentu
  var links=hlavicka.querySelector('div[id*="_controls"]').getElementsByTagName('a');
  
  // pokud sou dva linky jeto dotaz v poradně
  // první komenty v diskuzi maj v ovládacím panýlku linků 5
  // pokud maj nějakej nadřazenej komentář tak maj linků o jeden víc
  // vodpovědi v poradně maj taky o link víc na voznačování řešení
  // jestli to maj admini jinak ale nevim :O :O
  if(links.length > 2)
  {
    for (var i = 2; i < 5; i++) 
    {
      if(links[i].innerText === 'Výše')
        {
          var href=links[i].href;
          
          //vyberem ze slovníku méno autora podle id vytaženýho z href linku
          var autor=autoriKomentaru_dict[href.split('#')[1]];
          
          //strčíme do vodpovědi link na nadřazenej koment
          var txtElement=cmnt.querySelector('.ds_text');
          txtElement.innerHTML='<a class="link_na_koment" href="'+href+'">@'+autor+'</a>'+txtElement.innerHTML;
          break;
        }
    }
  }
  

  
  //pokud bude komentář novej tak ho natřem nažluto podobně jak to už jako bylo nóó a když je jako starej tak
  // ho natřem barvou podle ména jeho autora
  
  //pokud neni novej
  if(hlavicka.className !=='ds_hlavicka_novy')
  {
      
  //vypočítáme si hash ména autora
  var suma = sumaZnaku(meno);

  // a získáme z ní barvy který použijem na vobarvení kometáře
  // to modulo %64 nám z hashe získá hodnotu v rosahu 0-63
  var r=Math.floor(suma % 64)+128;
  var g=Math.floor(suma*8 % 64)+128;
  var b=Math.floor(suma*16 % 64)+128;
      
  //pokud nejsme spokojený se získanejma barvama tak mužete něco jakoby před výpočtem ktý sumě přičíst nebo změnit násobicí čísla ve výpočtu rgb nebo tak něco
      
  // použijem tři vodstíny tý barvy
  // tmavej světlej a tak nějak mezi
  var tmavaBarva='rgb('+r.toString()+','+g.toString()+','+b.toString()+')';
  r+=32;g+=32;b+=32;
  var pulBarva='rgb('+r.toString()+','+g.toString()+','+b.toString()+')';
  r+=32;g+=32;b+=32;
  var svetlaBarva='rgb('+r.toString()+','+g.toString()+','+b.toString()+')';
  
  //uděláme kolem komentáře vokraj a nastavíme mu tmavou barvu 
  cmnt.style.border='2px solid '+tmavaBarva;
  
  //napozadí komentu dáme uplně supr linerární gradient :O :O :D ;D
  cmnt.style.backgroundImage='linear-gradient('+svetlaBarva+', '+pulBarva+')';
    
  //stejnej styl vokraje
  hlavicka.style.borderStyle='solid';
  
  //taky mu uděláme vokraj ale ne směrem dolu protože tam už máme vokraj komentu ;D
  hlavicka.style.borderWidth='2px 2px 0 2px';
    
  //nastavíme barvičky pozadí a okraje hlavičky
  hlavicka.style.backgroundColor=svetlaBarva;
  hlavicka.style.borderColor=tmavaBarva;
      
  }
  else
  {
      //pokud je koment novej
    
      var pulBarva='rgb(239,239,144)';
      var svetlaBarva='rgb(255,255,160)';
      
      //uděláme tlusčí vokraj než maj vobyč komenty a uděláme ho jiným stylem
      hlavicka.style.borderStyle='groove groove solid groove';
      hlavicka.style.borderWidth='4px 4px 2px 4px';
      hlavicka.style.borderColor='rgb(200,200,0)';
      hlavicka.style.backgroundColor=svetlaBarva;
      
      cmnt.style.borderStyle='groove';
      cmnt.style.borderColor='rgb(200,200,0)';
      cmnt.style.borderWidth='0px 4px 4px 4px';
  
      cmnt.style.backgroundImage='linear-gradient('+svetlaBarva+', '+pulBarva+')';
  
    
      
  }
  
  
  
});

//vyrobení novýho css elementu stylesheetu kam přidáme další extra pravidla navíc :O ;D
var style = document.createElement('style');
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
var sheet = style.sheet;

//blok textu v komentáři bude mit vobyč bílý pozadí
sheet.insertRule('div.ds_text{background-color: white;}');

//vypnutí podtržení u vodkazu na nadřazenej koment
sheet.insertRule('.link_na_koment{text-decoration: none;}');

//pro všecky div elementy kterejm atribut id končí na '_controls'
sheet.insertRule('div[id$="_controls"]{padding:0px;border:none;background-image:none;background-color:none;}');

//pro všecky prvky kterejm atribut id začíná řetězcem 'comment' a je před nima div element s atributem class vobsahujícím substring 'ds_hlavicka' 
sheet.insertRule('div[class*="ds_hlavicka"] ~ [id^=comment]{padding: 0.5%}');

// css pravidla pro malou a velkou šířku vobrazovky
// na malilinkatejch vobrazovečkách vo šířce max 768 pixelů se třeba vypnou takový ty boční panely bude menčí padding prvků a tak
sheet.insertRule('@media only screen and (min-width: 769px){.ds_odsazeni{margin-left: 0;padding: 0.5% 0% 0.5% 2%;}}');
sheet.insertRule('@media only screen and (max-width: 768px) {#ls, .obal_ps {display:none;width:0%;} #st{margin-left: 0;padding: 0%;border-left:none;} .img_ad{width:100%;} .no-col-ad, #menu-wrap{display:none;} .ds_odsazeni{margin-left: 0;padding: 0.125%;}}');

       

Anketa

Obrázky

Komentáře

[Darth Phantom]

No pěkný, já jsem ale těšil na rande na rypadle. Bude ještě nějaký pokračování, kočko?

[Gréta]

když voni teďko spíš frčej černoši a roušky a černoši v rouškách :O :O až zase jako budou lidi zajímat uhlíkový neutrality ekoaktivizmus planeta zelená fylozofie a totleto blbnutí tak připišu :D ;D

[kotrcka]

Tak a nie je možné že by našli po vreckách rúšky a vyhrabal by sa tam nejaký černoško náhodou?

[Gréta]

toje takový laciný ne?? :O :D :D ;D

[Radovan]

Pro Hollywood by to bohatě stačilo

[Aleš Kapica]

Hm. Kdybych chtěl honit data přes nějaký další server, použil bych už dávno svůj, a přiohnul si to k obrazu svému. Ale dík za úsilí. Také mě to napadlo při čtení toho blogpostu o YT.

[Jendа]

Fascinující.

[Bherzet]

:)

[Jendа]

Tak už to vybal, tyhle chyby jsou strašně podobné tomu, co dělá GPT-3. Jenom furt nechápu: 1) kde jsi sehnal tak veliký český korpus, 2) jak jsi to spočítal, když říkali, že trénink by na běžném HW stál už jsem zapomněl kolik milionů dolarů.

[Bherzet]

Já v tom prsty nemám, ale taky mě to fascinuje.

[Aleš Kapica]

Mě zas fascinuje vaše tupá víra ve schopnosti umělé inteligence.

[Gréta]

aže jako nevíš kolik má stéblo trávy vočí?? :O :O :D :D ;D ;D

až vodpovíš mrkni sem hele ;D

[Jendа]

OK problém 1 vyřešen, GPT-3 umí taky česky.

[Gréta]

kapica asi jako myslel že ten vopičí addon šmíruje ale já myslim že ne ale neskoumala sem to :O :O

[⧠ A = 0]

Moc pěkné barvičky! Skoro stejné barevné schema jsem použil na nějakém konferenčním posteru před dávnými lety.

[Gréta]

zatim jako sedí pravidlo že pastelový barvičky se třetině líběj třetině hnusej noa třetině sou jedno :D ;D

[bugme]

Chcete poznat nové gaye? S DISCO je to super jednoduché. Jde o novou aplikaci pro chat a randění pro muže, jako jste vy. Máme přes 20 miliónů členů a více než 100 000 se každý den registruje. S DISCO je jednoduché najít krásného gaye! Oslavujeme rozmanitost a vítáme všechny gaye, bi a transgender, aby se k nám připojili.

Barvičky pěkné, rozhodně jsou víc inkluzivní než ty současné - ty jsou vhodné tak leda pro bílé heterosexuální rasisty.

[Gréta]

pastelový sou jako vybraný ztoho jednoduchýho důvodu že na nich je krásně čitelnej černej/tmavej text. nóóó ale jestli jako máš pocit že vůči tobě nejsem jakože dost inkulzivní si jako řekni jaký jiný barvičky bys jakoby chtěl :O :D :D ;D stejně asi jako udělám víc různejch skinů kdyžuž se stim jako jednou mažu :D ;D

[Bherzet]

udělám víc různejch skinů

Njn, Švédka…

[Gréta]

myslim jakože vyrobit víc různejch barevnejch témat/motivů nééééééééé 'udělat skiny' :D :D :D :D ;D ;D

[i2041826]

Příloha:

• morph.png (160044 bytů)

Mně by stačila alespoň čitelná podoba v Morph browseru.

[Aleš Kapica]

To není problém abclinuxu, ale tvůj. Kup si mobil s lepším rozlišením.

[Radovan]

Tohle je 100% chyba programátora, v tak malém rozlišení (= mobilní verzi) to nemá co cpát dva sidebary do stran. Nakopat za to.

[Aleš Kapica]

První mobil s androidem prodaný v ČR 30.1.2009. Abclinuxu jede tuším od r. 2003 a to na čem jede teď je tuším v běhu minimálně od r. 2006. Zrovna nedávno jsem linkoval svůj nejstarší blogpost z té doby. Tož asi tak. A na svých mobilech jsem nikdy se zobrazením abclinuxu neměl. Tak nekupujte sračky a nebudete mít podobné problémy.

[Radovan]

Mě tvoje mobily nezajímají, zajímá mě ta odfláknutá práce. To opravdu nemají plešouni normalizovat, jen protože by to sami nezvládli udělat pořádně.

[Aleš Kapica]

Hýčkej si dál svého Aligátora a vyfič. Nikdo tě sem nezval, tak si svoje pindy nechej tam, kde ses realizoval před tím než tě kopli do prdele a přitáhnul jsi sem.

[Radovan]

jj, tebe tu chce každý když nadáváš úplně všem inu, boomer.

[Aleš Kapica]

Náš administrátor shledal tento komentář závadným.

Takhle, prosím, ne

Zobrazit komentář

[Radovan]

Nehádej se s tou atrapou, vydává se za mě aby tě nasral.

[Radovan]

A že je to dřina, dědka vytočit..........

[Gréta]

pravdu máte asi jako voba tak klídek :D ;D

[V.]

Třeba zrovna Roundcube 1.3.x nezvládá přístup z mobilu, řada 1.4.x je už psaná tak, že i na užším rozlišení se dá používat. Jde to.

[Gréta]

máš mobílek tenčejší než 750 pixelů????? :O :O :O :O

 na řádku 68 html abclinuxu se pouští nějakej skript https://www.googletagservices.com/tag/js/gpt.js nóó a ten má v sobě napevno zadrátovanou šířku 750 pixelů hele nóó a když je display menčejší než těch 750 pixelů tak javascript udělá vyjímku a umře a nic dalšího se nepustí :O :O :O :O

googletag.pubads().definePassback('/123456789/abcl_lead', [750, 100]).display();

zkus přidat eště tenhleten jeden skriptík co dělá žeto gpt uplně vypne. fungovat byto mělo na celej webík :D ;D

jestli někdo má nápad jak to jako ještě v document-startu přepsat tamto 750 na něco jinýho tak řeknout :O ;D vložení přepisovacího js <script> do hlavičky html nefungovalo :O :O

// ==UserScript==
// @name           vypinadlo gpt.js
// @version        1.0
// @namespace      blahblah
// stránky na kterejch se bude skript pouštět

// @match        https://www.abclinuxu.cz/
// @match        https://www.abclinuxu.cz/*
// @run-at         document-start
// @noframes
// ==/UserScript==

//todlencto by prej jakože měli mit responzivní weby v hlavičce
document.head.innerHTML +='<meta name="viewport" content="initial-scale=1.0" />';

//vypnem provádění skriptu google tag services
// je tam zadrátovaná šířka 750 pixelů a když je display menčí js udělá vyjímku a umře a nic dalšího se nepustí :O :O :O :O
window.addEventListener('beforescriptexecute', function(e) {

	src = e.target.src;
  if (src.search(/googletagservices\.com.*gpt\.js/) != -1) {
		e.preventDefault();
		e.stopPropagation();
	};


}, true);

//vyrobení novýho css elementu stylesheetu kam přidáme další extra pravidla navíc :O ;D
var style = document.createElement('style');
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
var sheet = style.sheet;

//blok textu v komentáři bude mit vobyč bílý pozadí
sheet.insertRule('div.ds_text{background-color: white;}');

//vypnutí podtržení u vodkazu na nadřazenej koment
sheet.insertRule('.link_na_koment{text-decoration: none;}');

//pro všecky div elementy kterejm atribut id končí na '_controls'
sheet.insertRule('div[id$="_controls"]{padding:0px;border:none;background-image:none;background-color:none;}');

//pro všecky prvky kterejm atribut id začíná řetězcem 'comment' a je před nima div element s atributem class vobsahujícím substring 'ds_hlavicka' 
sheet.insertRule('div[class*="ds_hlavicka"] ~ [id^=comment]{padding: 0.5%}');

// css pravidla pro malou a velkou šířku vobrazovky
// na malilinkatejch vobrazovečkách vo šířce max 768 pixelů se třeba vypnou takový ty boční panely bude menčí padding prvků a tak
sheet.insertRule('@media only screen and (min-width: 769px){.ds_odsazeni{margin-left: 0;padding: 0.5% 0% 0.5% 2%;}}');

if(window.location.href.search(/https:\/\/www\.abclinuxu.cz[\/]*$/) != -1) // pokud sme na hlavní straně ukážeme levej sloupeček se zprávičkama a anketou atěmahle věcma
{
    sheet.insertRule('@media only screen and (max-width: 768px) {#ls{width:100%;} .obal_ps {display:none;width:0%;} #st{margin-left: 0;padding: 0%;border-left:none;} .img_ad{width:100%;} .no-col-ad, #menu-wrap{display:none;} .ds_odsazeni{margin-left: 0;padding: 0.125%;}}');
}
else
{
    sheet.insertRule('@media only screen and (max-width: 768px) {#ls, .obal_ps {display:none;width:0%;} #st{margin-left: 0;padding: 0%;border-left:none;} .img_ad{width:100%;} .no-col-ad, #menu-wrap{display:none;} .ds_odsazeni{margin-left: 0;padding: 0.125%;}}');

}

[i2041826]

Bohužel jsem se nedostal k reakci dříve, abych to uvedl na pravou míru, ale i tak moc děkuji za snahu, třeba to využije někdo jinej. Je to FullHD displej (Sony Xperia X). Pouze jsem ze staré školy, tak jsem ten screenshot zmenšil o 50%, abych ušetřil nějaké ty kilobajty. Morph browser nepodporuje žádné addony, pokud se nepletu. Jediná možnost, jak na tomto serveru mohu obstojně číst obsah, je použít mobil na šířku.

[Gréta]

no voni ty pixely v html asi jako nejsou fyzický ale nějaký takový pomyslný co už vobsahujou přepočet s dpi nebo co hele :O ;D

Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels

takže jako když ten mobílek je tlustej našířku 1080 pixelů hele ale má na palec normální fyzický dýlky +-441 fyzickejch pixelů misto 96 co má obyč monitor nóó tak html asi jako vidí tloušťku 1080 / (441 / 96) = +-235.1 těch zobrazovacích pixelů :O :O :D ;D

nevim teda jako jaký sou webový prohlížeče v ubuntu touch a jestli uměj nějak pouštět userscripty ale bojim se že s ubuntu touch budeš asi mit smůlu :O :O :'( :'(

[Gréta]

přepsat to de takle jako ten argument a asi to jako i funguje :O ;D

window.addEventListener('beforescriptexecute', function(e) {

    src = e.target.src;
    if (src.search(/googletagservices\.com.*gpt\.js/) != -1) 
    {
        var txt = e.target.childNodes[0].nodeValue;
        e.target.childNodes[0].nodeValue = txt.replace(/(\d\d\d)(?=,)/,'window.screen.availWidth * 0.8');
    };

}, true);