HTML5 a ajaxové další/předchozí na fotky

1.11.2010 10:04 | Přečteno: 1495× | poslední úprava: 30.11.2010 17:45

Chtěl jsem do webové fotogalerie přidat přepínání fotky pomocí šipek doleva/doprava. Předělal jsem to teda v railsech na ajax... jenže pak se nemění url a nefunguje zpět a vůbec je to takové ošklivé... a tak jsem začal hledat něco (knihovnu) co by to řešila.... byl jsem zděšen co to jsou všecko za hacky:( Nějak jsem to vyřešil pomocí HTML5, budu rád když mi to zkritizujete.

Obecně se to řeší tak že se mění část url za takovou tou mřížkou (#) protože to je jediné co můžete (zatím) měnit bez reloadu stránky. Ale to je ošklivý hack jak píše tady nějaký chlapík: http://www.kylescholz.com/blog/2010/04/html5_history_is_the_future.html

Prolezl jsem různé knihovny - RHS, jQuery history, bbq - ta byla na mě moc složitá.. Ale všecko mělo nějaké chyby, tlačítko zpět u starých IE se třeba řeší tak že je tam nějaký skrytý iframe, různé timery co kontrolují co 100ms jestli jsme nezmáčkli zpět... prostě je to celé ošklivé.

HTML5 přidává (ano, to HTML5 které si nehoní nad tím že všecko je XMLko ale řeší problémy co jsou;)), přidává mocnou věc a to změnu url bez načtení stránky pomocí pushState o kterém píše ten kylescholz.com. Funguje to v novém Chromiu a Firefoxu 4, jiné věci jsem nezkoušel. Sbastlil jsem tedy něco takového:

  Event.observe(window, 'load', function() {
  window.history.pushState(0, 'pryc', 0);
  window.history.pushState(@photo.id, 'pryc', @photo.id );

})

// Respond to a popstate event.
window.onpopstate = function(e) {
  if (e.state == 0) {
    window.location="back_js_url(@back_section)";
  }
  else if (e.state != null){
    var basedir = document.location.href;
    basedir = basedir.substring(0, basedir.lastIndexOf('/')) + '/';
    new Ajax.Request(basedir+e.state, { method:'get' });
  }
  
};

Můžete mě bít, já javascript neumím a taky se něco tak ošklivého nehodlám učit ale funguje to, na odkazy další/předchozí fotka jsem pomocí :after v Railsech navěsil ještě něco takového:

window.history.pushState(#{photo_prev.id}, 'title', #{photo_prev.id})")

Budu moc rád když mi to pomůžete otestovat na http://www.sigut.net/. V prohlížečích které to umí by se vám tedy při posouvání mezi fotkami mělo měnit url a fungovat tlačítko zpět.

Co mi to pokazí je reload, nevíte jak to vyřešit?

zvlášť rád bych byl kdyby něco zkusil IEčka, až to odladím tak tam přidám testování a v prohlížečích kde to bude fungovat nechám ajax, kde ne tak normální statické přepínání stránek.

       

Komentáře

[David Ježek]

Příloha:

• sigut2.png (429971 bytů)

V IE8 WXP udělá kliknutí na fotku tohle...

[phax7]

Moc díky za test, teď ještě musím zjistit proč:( Dělá mi to i IE6, myslel jsem že to je jen nějaká chyba, ale asi mám něco fakt špatně...

[phax7]

http://vladzloteanu.wordpress.com/2009/02/17/ie-unknown-file-type-requestformat-rails-issue/

tohle by mohlo být ono...

[phax7]

jop, už jsem to přehodil, v IE6 to už nedělá (ale furt vyskakuje nějaké podivné okno) mohl bys to zkusit znova prosím?

[David Ježek]

V IE8 se to už chová ok - po kliknutí na fotku se zobrazí a procházení šipkami funguje. akorát to teda hází (dole ikonkou, neruší to): Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Timestamp: Mon, 1 Nov 2010 09:39:49 UTC
Message: Object doesn't support this property or method
Line: 55
Char: 3
Code: 0
URI: http://beta.sigut.net/photos/2048
Message: Object doesn't support this property or method
Line: 88
Char: 202
Code: 0
URI: http://beta.sigut.net/photos/2048
Message: Object doesn't support this property or method
Line: 1
Char: 203
Code: 0
URI: http://beta.sigut.net/photos/2048
...atd...

[phax7]

A url se mění nebo nemění?

Na tu chybu mrknu

díky

[David Ježek]

nemění

[phax7]

Tak snad v IE9:)

[Michal Fecko]

IE8 test na abccku? No OK, OK, a aspon pod Wine?

[Jardík]

64bit IE8 pod 64bit Wine nefunguje.

[kyytaM]

V opere to funguje tusim dobre. :)

[FF]

Ja myslim ze ne. URL se nemeni. Kliknu na fotku a mam URL treba

http://beta.sigut.net/photos/2046

, klinu na dalsi a zmeni se na

http://beta.sigut.net/photos/2046#

a pak uz pri klikani na dalsi to zustava stale takto. Opera 10.63

[phax7]

tak tak, teď jsem zkoušel Operu 10.63 a nemění se to... a zkoušel jsem i Opera 11 a tam to taky nefunguje:(

Takže shrnuto podtrženo to ve stabilních verzích funguje jen v Chrome 7... ale věřím že nakonec se to vyplatí:)

Nemá někdo nainstalovanou tu betu IE9?

[AsciiWolf]

IE9 beta - přepínání šipkami funguje, URL se nemění.

[phax7]

Díky moc... ale nepotěšil si mě:) Možná to budu muset přehodnotit a nasadit něco ošklivého:(...

[Zdeněk Burda]

Máš tam nějaký čurbes v logice přepínání mezi fotkama. Na titulní stránce kliknu na fotku a pak kliknu na další, jsem přepnut na další, kterou jsem viděl v náhledech na titulní stránce. Pak kliknu na předchozí a jsem hozen na jinou fotku než bych očekával. Děje se tak když jsou fotky z různých kategorií/alb, nevím jak tomu říkáš. Kliknutí na "zpět na náhledy" vede k přechodu do stránky s náhledy, ale jen konkrétní kategorie (já jsem ale přišel z titulní stránky, tak bych očekával návrat tam).

Po kliknutí na další/předchozí se mi ve Firefoxu (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12) mění URL na variantu s # na konci. V Safari se to neděje.

[phax7]

jj, máš pravdu je to hafo nemocné:) Kdybych tak uměl psát ty testy asi by se to nestalo, hned to jdu opravit... díky moc.

To Safari mě zajímá, tam to normálně přepíná url? tj třeba z http://beta.sigut.net/sections/10-beskydy/photos/2043 se stane po kliknutí na další http://beta.sigut.net/sections/10-beskydy/photos/2042 ?

[Zdeněk Burda]

V Safari mění celé URL, tak jak píšeš.

Když už budeš u úprav, zvaž kontrastnější zvýraznění aktuálně prohlížené stránky. Teď je to jen mírně světlejší a musím hledat na které stránce zrovna jsem...

[phax7]

> V Safari mění celé URL, tak jak píšeš. luxus, webkit rulez, jaká je to verze prosímtě?

>Když už budeš u úprav, zvaž kontrastnější zvýraznění aktuálně >prohlížené stránky. Teď je to jen mírně světlejší a musím hledat na >které stránce zrovna jsem... máš asi pravdu, zvýrazním to víc, díky.

[Zdeněk Burda]

Safari Version 5.0.2 (6533.18.5)

[phax7]

Tak snad jsem to spravil.

> zvýraznění aktuálně prohlížené stránky. teď si ale nejsem jist co myslíš, to "Všechny fotografie Beskydy Portrét a akt" a tak? Tam kromě barvy ještě zmizí podtržení... čili to jde docela dobře vidět - ale když by měl někdo nařízené podtrhávání všude tak to bude slabší, to je fakt.

[AsciiWolf]

V IE9 je to stále rozbité - nemění se URL při přepínání šipkami.

[phax7]

reagoval jsem nejasně, opravil jsem bug že se ukazovaly jiné fotky než měly... to že se nemění to url s tím asi nic nenadělám a pro IEčka to přepnu na standardní verzi bez ajaxu...:(

a netuší někdo z webvývojářů co to sledují jestli by to IE9 měl umět?

[Neel]

V opeře(10.10) se url nemění. Je to ten případ s #.

V Midori (webkit) se url nemění, ale je to jiný případ. Když jsem kliknul na fotku, tak jsem měl zobrazenou pořád url alba a stránky, na které jsem byl. Poklikal jsem parkrát na předchozí a url ukazovala pořád stránku alba, tak jsem dal aktualizaovat stránku a url se spravila, jenže při dalším přepnutí se zase nezaktualizovala. Ještě zkusím zkompilovat novou verzi z gitu.

[chrono]

Aj najnovšia verzia Midori sa správa úplne rovnako.

[phax7]

Hmm, to je škoda, ale Midorimu taky předhodím statickou verzi teda.

jo a díky všem za testy...

[Neel]

I Uzbl.

[Gilhad]

ve Firefoxu 3.5.6 s vypnutym Javascriptem (muj defaultni prohlizec) se po kliknuti na fotku tato otevre, po kliknuti na predchozi/nasledujici se v URL objevi na konci mriz # a fotka tam zustane ta sama. Takova galerie by me fakt nenadchla.

[Konqui]

Je nějaký důvod mít vypnutý JavaScript?

[chrono]

Je nejaký dôvod, prečo to nemôže fungovať aj bez javascriptu? (navyše keď ide len o tak malú úpravu toho kódu)

[Gilhad]

Protože ho spousta webu zneužívá na nejrůznější otravné účely a zároveň většina zajímavých webů funguje dobře i bez něj. Normálně mám z tohoto důvodu vypnuté i obrázky a najednou je Internet rychlý a přehledný. (O flashi ani nemluvě)

[phax7]

Stoprocentně to ošetřím i pro lidi bez javascriptu, teď jen testuju něco jiného...

[gtz]

Opera 10.53 ,URL se nemění

FireFox 3.6.6 ,URL se nemění

[petr_p]

Ono je totiž ve specifikaci napsáno, že agent nemusí změnu stavu relace (například hodnota URL) promítnout do uživatelského rozhraní. Pouze se po něm požaduje, aby adresa byla vložena do lokální historie a třeba při obnově po pádu použita ta (všimněte si poznámky v části 3.1).

[phax7]

>Ono je totiž ve specifikaci napsáno, že agent nemusí změnu stavu >relace (například hodnota URL) promítnout do uživatelského rozhraní.

však já mu změním url a zároveň zavolám ajax.request, ne? Nebo úplně nerozumím na co reaguješ:)

[chrono]

Reaguje na to, že napr. v Midori to funguje dobre, ale zobrazované URL sa nemení (vlastne sa zmení až vtedy, keď sa použije reload). Takže z toho, či sa mení zobrazované URL sa nedá posúdiť, či to funguje, alebo nie.

[phax7]

Aha, to mě nenapadlo... ale v těch nových Chrome a Firefoxu se to chová tak že se to mění a přijde mi že takhle to budou nakonec dělat všichni, ne...? Lepší řešení zatím nemám...