Browser Extension: Ordne Tumblr innlegg i kronologisk rekkefølge
to
Del
5
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Lage små nettleserutvidelser er en fin måte å lære Javascript. Du trenger ikke å bekymre deg for kryss-nettleser kompatibilitet, kan du gjøre prosjektet som små eller store som du vil, og du kan fikse problemer i andres nettsteder som bug deg, spesielt. I dette innlegget vil vi lage en kort script som automatisk ordner Tumblr arkivsider å lese i kronologisk rekkefølge -., Og vi vil lære om NodeList på vei
Problemet
Denne uken Ryan North startet en ny Tumblr, hvor han kommer gjennom novelization av den første Back to the Future-filmen, en side av gangen. Dette er en ting jeg ønsker å lese
Klikk for å lese
Men viser Tumblr sine innlegg i omvendt kronologisk rekkefølge -.. Det vil si med de nyeste innleggene først. Dette er fornuftig for mange steder på Tumblr, men i dette tilfellet, jeg virkelig ønsker å lese dem i den rekkefølgen de ble skrevet. Gjeldende område oppsettet betyr at for å gjøre det, jeg må bla ned til toppen av den første (første skriftlige) innlegg, bla nedover da jeg leste den, og bla deretter opp til toppen av den andre innlegg, og bla nedover gjennom at ...
Dette er en liten, liten første verdens problem - helt trivielt og nesten pinlig å nevne. Men det betyr ikke at jeg ikke ønsker å fikse det
Ved slutten av denne opplæringen, vil du gjøre dette Tumblr -. Eller noen Tumblr du velger - vise sine innlegg i kronologisk rekkefølge på siden ., automatisk
Hvordan kan vi gjøre dette
Vi har kontroll over BtotheF site design; det gir ingen alternativer til oss, så vi kan ikke endre rekkefølgen innleggene vises på siden serversiden.
Men når HTML sendes til nettleseren, er det vår. Vi kan manipulere det, men vi ønsker. Og, selvfølgelig, språket som vi kan gjøre dette på er Javascript.
Jeg skal gi en rask demo. Jeg skal bruke Chrome, og anbefaler at du gjør det, også - hvis du ikke kan, eller ikke vil, så ta en kopi av Firebug
Bla til http: //btothef.tumblr. .com /og åpne Javascript-konsoll ( Verktøy > Javascript-konsoll ... og trykk Enter Wow.! ... Ok, greit, som ikke bevise mye. Prøv dette: Dette vil ta HTML-dokumentet < body > element, og legge en ny tekst node - et stykke tekst, i utgangspunktet - som inneholder ordet "Hei". Hvis du ikke følger noe av det, få opp til hastighet med HTML For å se resultatet, bla helt ned til bunnen av Tumblr. Litt mer imponerende, siden vi 've faktisk endret innholdet på siden. Den nye teksten node er rett på bunnen fordi vi har brukt appendChild () - som legger den oppgitte noden etter alt annet inne i < body >. Såvidt nettleseren vår er opptatt av, de siste få linjer med HTML nå se slik ut:! So! Nå har vi to problemer: Vi vil adressere disse i orden. Først, la oss finne ut hvordan du "finne" alle innleggene i HTML. I Chrome, høyreklikker du et sted i den øverste post, og velg "Inspiser element". (Firebug bør legge samme snarvei til Firefox, for andre nettlesere, kan du prøve på forstørrelsesglasset.) The Elements kategorien av utviklerverktøy vises, med elementet du valgte utheves: Som du sveve over ulike elementer i denne HTML-visning, vil du se dem fremhevet i selve siden. Til slutt, vil du finne at hele innlegget er inneholdt i en div med en klasse av innlegget. Som du ser av skjermbildet ovenfor, er det flere andre slike div-elementer, og de er alle inneholdt i en master div med id innholdsfortegnelsen. Vi kan velge alle disse legg elementer på én gang med en eneste linje med kode; skriver dette inn i Javascript-konsoll. (Teknisk, vi kunne bare ha skrevet document.getElementsByClassName ("post"), men hvem bryr seg? ) Du vil se - igjen, i Chrome - noen tilbakemeldinger: Great! Dette indikerer at den virket. Hvis du klikker på pilene, vil du se innholdet i hver div Vi kan like godt overlate dette til en variabel, for å spare oss å måtte skrive den ut igjen og igjen. (Denne gangen konsollen vil returnere udefinert, du kan sjekke at det tildelt variabel riktig ved bare å skrive ordet innlegg i konsollen.) Vi kan sløyfe gjennom alle elementene i innleggene som om det var en rekke: Search for (var i = 0; i < posts.length; i ++) {console.log (innlegg [i] );} Hit Shift-Enter for å legge til en ny linje i koden uten å kjøre det i Javascript-konsoll. console.log () sporer bare innholdet til konsollen, som er langt mindre irriterende enn et varsel () og langt mindre forstyrrende enn å legge tekst til HTML DOM. Resultatet av denne enkle sløyfen vil bare være en liste over alle div-elementer. Kjølig. Så antagelig kan vi gjøre noe som dette ... Prøv det ut! Du vil se dette: Rats. Når vi bruker getElementsByClassName (), kan vi ikke hente en enkelt rekke elementer, vi tar en NodeList. Som en matrise, er det en samling av elementer; i motsetning til en matrise, blir samlingen oppdateres i sanntid. Hvis HTML DOM er endret, innholdet i innleggene blir endret for å matche For eksempel, la oss lage en ny div med en klasse av post og legge det til innholdet div. Kjør det, så skriver innlegg og trykk Enter. Du vil se en ekstra div i listen -. Selv om vi ikke har rørt innleggene variabel Siden en NodeList er ikke en matrise, det har ikke de fleste av de metoder og egenskaper Array, for eksempel push () Faktisk har vi allerede brukt den eneste eiendommen: lengde. Den eneste metoden er .item (n), som bare blir den n'te elementet i listen Men vår tidligere demonstrasjon med appendChild () foreslår en alternativ løsning. Hva om, i stedet for å prøve å omorganisere elementer av NodeList innenfor NodeList, omorganiseres vi dem innenfor side Først vil vi kjøre gjennom listen i motsatt rekkefølge, og føyer hvert element i sin tur til innholdet div; . Da tar vi bort de opprinnelige innleggene Oppdater Tumblr siden for å tømme ut all den ekstra søppel vi har lagt til DOM, så gjør det første skrittet, for å legge elementene i omvendt rekkefølge: Ok, nå er vi ... vent, hva The (kronologisk) første innlegg er allerede på toppen, og det siste innlegget er på bunnen, med ingen innlegg gjentas. Dette kan virke overraskende, men det er fornuftig: vi gjorde ikke klone Så, problemet løst, i fem enkle linjer med kode. Nå la oss automatisere det Tre av de fire øverste nettlesere lar deg lage nettleserutvidelser -. Installerbar add-ons - ved hjelp av Javascript. (Det vil ikke overraske deg å vite at Internet Explorer er unntaket.) Her er instruksjonene for Chrome, instruksjonene for Firefox, og instruksjonene for Safari. Men vi kommer ikke til å bruke noen av de. I stedet vil vi bruke en stor add-on som heter Greasemonkey, som lar deg installere små JS skript uten å måtte pakke dem opp som fullverdig nettleserutvidelser. I hovedsak injiserer det utdrag av Javascript inn på siden, når den er lastet Chrome har allerede Greasemonkey støtte bakt i Opera har noe veldig likt Greasemonkey bakt i.:. UserJS. For Firefox, må du installere Greasemonkey forlengelse. For Safari, installere SIMBL, og deretter GreaseKit. For IE, installere IE7Pro eller Trixie. Lag en ny tekstfil, og gi den navnet ChronologicalTumblr.user.js. Pass på at du fjerner standard .txt, og at du bruker .user.js, snarere enn bare JS - dette er forlengelsen for et Greasemonkey script Kopier våre innlegg omorganisering kode i filen:. Nå må vi legge til litt ekstra metadata på toppen av skriptet - detaljer om manuset selv. Alle disse detaljene skal gå i kommentarer, og starter med == UserScript == og slutter med == /UserScript ==: Først vil vi legge til et navn og en beskrivelse: Deretter vil vi angi en navne Det er vanlig å bruke en URL her, så jeg skal bruke Activetuts + 's. Du bør bruke din egen, siden du er i kontroll over det: Nå må vi spesifisere hvilke nettadresser dette skriptet skal påvirke - det vil si på hvilke nettsider de {document.getElementById ("innholdet") appendChild (innlegg [i]).} Javascript må automatisk bli sprøytet inn. Jeg ønsker dette skriptet til å arbeide på BtotheF hjemmeside, pluss de andre arkivsider, som http://btothef.tumblr.com/page/2: * er et wildcard; det sikrer at manuset vil bli satt inn i hver enkelt arkiv side av BtotheF Tumblr Vi kan bruke et wildcard for å gjøre hver enkelt Tumblr er arkivsider vises i kronologisk rekkefølge. I dette tilfellet kan det være en god idé å forbedre din script for å sette inn en knapp eller lenke til siden som ordner innleggene når klikket. På den måten kan du bruke den når det passer, uten å måtte legge til hver enkelt Tumblr URL manuelt som eninclude parameter. Det er andre metadata parametere du kan legge til, men dette er alt vi trenger for nå. Installere manuset i Chrome er enkelt: bare dra og slippe det fra harddisken inn et nettleservindu. Det vil advare deg om at skript kan potensielt være farlig (bare klikk på Fortsett), og deretter sjekke igjen at du vil installere dette spesifikt: Hit Installer. Hvis du bruker en annen nettleser, se relevant Greasemonkey script Håndbok - i alle fall, vil det være enkelt Når det er installert, kan du se det i listen over utvidelser: Innleggene blir nå automatisk vise i kronologisk rekkefølge! Det er ikke perfekt: du har kanskje lagt merke til at navigasjonsknappene er flyttet til toppen av siden, siden de finnes i en div med en klasse av innlegget. Men hei -. Hvis det bugs deg, har du verktøy for å fikse det nå Anmeldelser
, i Chrome). Type:
alert ("Hi");
document.body.appendChild (document.createTextNode ("Hei"));
≪ - END Tumblr CODE - > Hei < /body > < /html >
Hvordan bruker vi Javascript for å omorganisere alle innleggene i side
Hvordan gjør vi dette skje automatisk, uten å måtte rote rundt i? konsollen hver gang vi leser den Tumblr?
omorganisere innlegg
document.getElementById ("innholdet") getElementsByClassName ("post");
Var innlegg = document.getElementById ("innholdet") getElementsByClassName ("post");.
Var numPosts = posts.length; for (var i = numPosts - 1; i > = 0; I--) {posts.push (innlegg [i]);}
Feiltype: Object # < NodeList > har ingen metode "push"
En NodeList er ikke et Array
Var newPostDiv = dokument .createElement ("div"); newPostDiv.setAttribute ("klasse", "post");. document.getElementById ("innholdet") appendChild (newPostDiv);
//må definere innlegg igjen, siden vi mistet den da vi refreshedvar innlegg = document.getElementById ("innholdet") getElementsByClassName ("post"); Var numPosts = posts.length;. for (var i = numPosts - 1; i > = 0; I--) {document.getElementById ("innholdet") appendChild (innlegg [i]);.}?
noen elementer av NodeList, vi bare føyd dem til innholdet div, i omvendt rekkefølge. Siden NodeList alltid reflekterer innholdet av HTML DOM, vi beveget
hver av de 11 elementene i en ny stilling - 11th element ble tilsatt til slutt (ingen endring i posisjon); deretter den 10. fikk flyttet å være etter at; den niende etter det, og så videre, helt til første element var helt på slutten.
snu den til en nettleserutvidelse
Skrive Greasemonkey Script
Var innlegg = document.getElementById ("innholdet") getElementsByClassName ("post"); Var numPosts = posts.length; for (var i = numPosts - 1; i > = 0; I--). {document. . getElementById ("innholdet") appendChild (innlegg [i]);}
//== UserScript == ////== /UserScript == Var innlegg = dokument. getElementById ("innholdet") getElementsByClassName ("post"); Var numPosts = posts.length; for (var i = numPosts - 1; i > = 0; I--). {document.getElementById ("innhold"). appendChild (innlegg [i]);}
//== UserScript == //name Kronologisk Tumblr //description Viser Tumblr innlegg i kronologisk rekkefølge //== /UserScript == Var innlegg = document.getElementById ("innholdet") getElementsByClassName ("post"); Var numPosts = posts.length; for (var i = numPosts - 1;. i > = 0, jeg -) {document.getElementById ("innholdet") appendChild (innlegg [i]);}.
. Kombinasjonen av navn og navnerommet er det som identifiserer skriptet; hvis du prøver å installere en annen Greasemonkey-skript med samme navn og Selge navnerom som et eksisterende skript, vil den overskrive den gamle - hvis bare navnet eller
navnerom kamp, det vil bare installere den nye sammen med den gamle.
//== UserScript == //name Kronologisk Tumblr //description Viser Tumblr innlegg i kronologisk rekkefølge //namespace http: //aktiv .tutsplus.com ///== /UserScript == Var innlegg = document.getElementById ("innholdet") getElementsByClassName ("post"); Var numPosts = posts.length; for (var i = numPosts - 1;. i > = 0; I--);
//== UserScript == //name Kronologisk Tumblr //description Viser Tumblr innlegg i kronologisk rekkefølge //namespace http://active.tutsplus.com///include http://btothef.tumblr.com///include http://btothef.tumblr.com/side /* //== /UserScript == Var innlegg = document.getElementById ("innholdet") getElementsByClassName ("post"); Var numPosts = posts.length; for (var i = numPosts - 1;. I > = 0; I--) {. document.getElementById ("innholdet") appendChild (innlegg [i]);}
//== UserScript = = //name Kronologisk Tumblr //description Viser Tumblr innlegg i kronologisk rekkefølge //namespace http://active.tutsplus.com///include http: //*.tumblr.com///include http : //*.tumblr.com/page/*//== /UserScript == Var innlegg = document.getElementById ("innholdet") getElementsByClassName ("post"); Var numPosts = posts.length; for (var i. = numPosts - 1; i > = 0; I--) {. document.getElementById ("innhold") appendChild (innlegg [i]);}
Etterbehandling Av
<. p> Leder tilbake til http://btothef.tumblr.com/, eller treffer oppdatere hvis du fortsatt har den åpen.