[UPGRADE][Blogger] Robimy system kategorii cz.4 - finał

To już ostatnia część poradnika do stworzenia systemu kategorii w Bloggerze. Mając już przygotowane wszystkie niezbędne funkcje dochodzimy zatem do ostatniej części tutoriala, w której złożymy wszystko w całość i uruchomimy. Wykorzystamy tutaj oczywiście bibliotekę jQuery i zdarzenia ready(). Na samym końcu wpisu znajdzie się również cały przeanalizowany do tej pory kod.

var postLabels = ''; var inPost = false;

Na samym początku deklarujemy domyślnie 2 zmienne:

• postlabels - do której pobierzemy etykiety wyświetlanego posta,
• inPost - przyjmująca TRUE/FALSE w zależności od tego czy oglądamy całość posta, czy listę postów

I teraz malutki trick, który pozwoli na "powiedzenie" Jjavascriptowi, czy znajdujemy się w całości posta, czy na liście postów.
Za pomocą jQuery odwołujemy się do DIV-a o przypisanej klasie CSS inPost. DIV-a tego ukryłem w szablonie bloga w bloku, który odpowiada za wyświetlenie szablonu treści PEŁNEGO posta. Do DIV-a przypisany jest z CSS styl display: none, nie jest więc renderowany na stronie, a mimo to istnieje jako element drzewa DOM. Dodatkowo w DIV-ie zawarty jest ciąg znaków TRUE, czyli wygląda to tak:

<div class='inPost'>TRUE</div>

Co za tym idzie - element ten znajdzie się w strukturze DOM jedynie w przypadku, gdy będziemy w widoku CAŁOŚCI posta, w innym przypadku takiego DIV-a w drzewie DOM zabraknie, a więc poniższy kod nigdy się nie wykona, gdyż zmienna inPostDiv nigdy nie przyjmie wartości TRUE.
Jeśli jednak znajdujemy się w poście, to wykonywane są następujące akcje:

zmienna inPost przyjmuje wartość TRUE - od tej pory w każdej części kodu będziemy już wiedzieć w jakim widoku znajdujemy się obecnie,
do zmiennej postLabels pobierane są etykiety jakimi otagowany jest post. Korzystamy tutaj z metody text(), zamiast z html(), gdyż interesuje nas sam tekst. Etykietki te później przeparsujemy i utwórzymy z nich tablicę.
do DIV-a z przypisaną klasą CSS ifClr dodawana jest kolejna klasa CSS - clr, która "ucieknie" z float:left przypisanego obrazkowi i poprzez clear:both wyświetli resztę posta pod obrazkiem. W widoku listy z tego zrezygnowałem, aby nie było zbyt dużo pustej przestrzeni na stronie. Oczywiście DIV-a tego zaszywamy w treści posta, tuż za <!-- more -->, czyli za dyrektywą, która informuje Bloggera, w ktorym miejscu kończy się skrócona wersja posta.

$("div.inPost").ready(function() {
 
 
 
 var inPostDiv = $("div.inPost").text();
 
 
 
 if(inPostDiv == 'TRUE') {
 
  inPost = true;
 
  postId = $("div.inPostID").text();
 
  postLabels = $("span.post-labels").text(); 
 
  $('div.ifClr').addClass('clr');
 
 } 
 
});

Czas na zabawę

Mając już wszystkie funkcje, pora na właściwą logikę działania.
Szczerze mówiąc, długo zastanawialem się jak poinformować javascript, w jakiej części widoku bloga aktualnie się znajdujemy. Mając do dyspozycji kod po stronie serwera, jak PHP sprawa byłaby banalnie prosta, lecz tutaj niestety, w przypadku Bloggera - dostępu takiego nie posiadamy i pozostaje nam jedynie Javascript działający po stronie przeglądarki. Sposobów wymyśliłem dokładnie 3, z czego wykorzystałem jeden, który tutaj opiszę.
Na początek pomyślmy - możemy znajdować się jednorazowo w którymś z poniższych statusów:

• strona główna
• lista postów oznaczonych daną etykietą/przedziałem czasowym
• widok pojedyńczego posta
• wynik wyszukiwania
• strona

Do każdego z tych widoków prowadzi nieco inny URL i wyświetlane są nieco inne informacje, np. w DIV-ie o klasie CSS status-msg-body wyświetlana jest informacja o wyniku wyszukiwania z wyszukiwarki, lub informacja z jakiej kategorii/etykiety wyświetlamy listę postów. Postanowiłem wykorzystać ten fakt i na podstawie analizy tego DIV-a napisać kod, który odgadnie w jakim obecnie widoku znajduje się oglądający. Innym sposobem moze być analiza adresu URL w jakim się znajdujemy pobierana za pomocą Javascriptu. Ja wybrałem jednak sposób z DIV-em. Zobaczmy jak to zadziała. Na początek czekamy na załadowanie treści DIV-a, gdy będzie już ready() ruszamy do akcji:

Przyjrzyjmy się kodowi:

$("div.status-msg-body").ready(function() {
 
 
 
 var mode = '';
 
 var msg_str = $("div.status-msg-body" ).text();
 
 var msg_html = $("div.status-msg-body" ).html();
 
 
 
 if(msg_str != '')
 
 {   
 
  if(mode == '' && strstr(msg_str, 'wyszukiwania'))
 
  {
 
   mode = 'search_null';   
 
  
 
  } else {
 
  
 
   if(mode == '' && strstr(msg_str, 'Brak postów'))
 
   {
 
    mode = 'empty'; 
 
    var exploded = msg_str.split('etykietą ');
 
    var label_name = exploded[1].split('. Pokaż');   
 
  
 
   } else {
 
  
 
    if(strstr(msg_str, 'etykietą'))
 
    {
 
     mode = 'label';
 
     var exploded = msg_str.split('etykietą ');
 
     var label_name = exploded[1].split('. Pokaż');   
 
    } 
 
   }
 
  }
 
 
 
  if(mode == '' && strstr(msg_str, 'posortowane'))
 
  {
 
   mode = 'search'; 
 
  } 
 
 
 
  switch(mode)
 
  {
 
  
 
   case 'label': 
 
    var fullname = '';
 
    fullname = getHeader(label_name);   
 
    $("div.status-msg-body" ).html('<h1>' + fullname + '</h1>');   
 
   break;
 
  
 
   case 'search':
 
    $("div.status-msg-body" ).html('<h1>' + msg_html.replace('Sortuj', '</br>Sortuj') + '</h1>');
 
   break;
 
  
 
   case 'empty':
 
    var fullname = '';
 
    fullname = getHeader(label_name);
 
    $("div.status-msg-body" ).html('<h1>' + fullname + ' <br/>Chwilowo brak artykułów w tym dziale.</h1>');   
 
   break;
 
  
 
   case 'search_null':
 
    $("div.status-msg-body" ).html('<h1>' + msg_html.replace('Pokaż', '</br>Pokaż') + '</h1>');         
 
   break; 
 
  
 
  } 
 
 }
 
});

Przeanalizujmy go:

$("div.status-msg-body").ready(function() {
 
 
 
 var mode = '';
 
 var msg_str = $("div.status-msg-body" ).text();
 
 var msg_html = $("div.status-msg-body" ).html();
 
 
 
 
 
 /*
 
 Na początek definiujemy domyślne wartości zmiennych.
 
 Zmienna mode określać będzie rodzaj widoku, obecnie deklarujemy pustą zmienną.
 
 Do zmiennej msg_str pobieramy zawartość tekstową z DIV-a 'status-msg-body', a do zmiennej msg_html pełną zawartość, wraz z tagami HTML.
 
 Jeśli zawartość naszego DIV-a ze statusem nie jest pusta, co za tym idzie - nie znajdujemy się na stronie głównej, to jedziemy dalej.
 
 Dla lepszych rezultatów DIV ten został przeze mnie domyślnie ukryty, za pomocą ustawienia w jego CSS wartości 'display: none'.
 
 Przywrócimy mu widoczność na samym końcu, gdy już podmienimy całą zawartość.
 
 */
 
 
 
 
 
 if(msg_str != '')
 
 {
 
  /*
 
  STATUS: WYSZUKIWANIE - BRAK WYNIKÓW
 
  Sprawdzamy funkcją strstr(), czy treść DIV-a zawiera ciąg 'wyszukiwania'. Dlaczego akurat taki ciąg?
 
  Ponieważ podczas korzystania z wyszukiwarki, w przypadku nieznalezienia postów odpowiadających zapytaniu wyświetlona zostaje przez Bloggera informacja:
 
 
 
  BLOGGER WYŚWIETLA: Brak postów spełniających kryteria wyszukiwania: SZUKANA_FRAZA. Pokaż wszystkie posty
 
 
 
  Jeśli więc wystąpiło słowo 'wyszukiwania' to znak, że jesteśmy tutaj:
 
 
 
  http://phpmajster.blogspot.com/search?q=SZUKANA_FRAZA
 
 
 
  Zapisujemy do zmiennej mode wartość 'search_null', która określi nam status na "wyszukiwarka - niczego nie znaleziono" 
 
  */ 
 
 
 
  if(mode == '' && strstr(msg_str, 'wyszukiwania'))
 
  {
 
   mode = 'search_null';   
 
  
 
  } else {
 
 
 
   /*
 
   W innym przypadku jeśli znajdziemy ciąg 'Brak postów', znaczy to, że jesteśmy tutaj:
 
   http://phpmajster.blogspot.com/search/label/ETYKIETA_GDZIE_NIE_MA_ANi_JEDNEGO_POSTA
 
  
 
   a komunikatem wyświetlanym jest:
 
  
 
   BLOGGER WYŚWIETLA: Brak postów z etykietą ETYKIETA_GDZIE_NIE_MA_ANi_JEDNEGO_POSTA. Pokaż wszystkie posty
 
  
 
   Wiemy już, że jesteśmy w pustym dziale, do zmiennej mode przypisujemy wartość 'empty'.
 
   Następnie metodą split() dzielimy informację o braku postów na dwie części, rozdzielamy słowem 'etykietą'.
 
   W tablicy exploded znajdzie się więc:
 
   exploded[0] = 'Brak postów z '
 
   exploded[1] = ' ETYKIETA_GDZIE_NIE_MA_ANi_JEDNEGO_POSTA. Pokaż wszystkie posty'
 
  
 
   To co nam zostało exploded[1] znowu rozdzielamy, tym razem stringiem  '. Pokaż', spowoduje to, że do tablicy label_name trafią:
 
  
 
   label_name[0] = ' ETYKIETA_GDZIE_NIE_MA_ANi_JEDNEGO_POSTA'
 
   label_name[1] = ' wszystkie posty'
 
  
 
   Mamy więc już wyciągniętą nazwę kategorii/etykietę z jakiej posty chcieliśmy wyświetlić. 
 
   */ 
 
  
 
   if(mode == '' && strstr(msg_str, 'Brak postów'))
 
   {
 
    mode = 'empty'; 
 
    var exploded = msg_str.split('etykietą ');
 
    var label_name = exploded[1].split('. Pokaż');   
 
  
 
   } else {
 
 
 
    /*
 
    W jeszcze innym przypadku szukamy ciągu 'etykietą'.
 
    Ciąg taki wystąpi jeśli jesteśmy w kategorii/etykiecie i przeglądamy listę postów w niej zawartą.
 
  
 
    BLOGGER WYŚWIETLA: Pokazywanie postów oznaczonych etykietą ETYKIETA. Pokaż wszystkie posty
 
  
 
    I znowu - tniemy za pomocą słowa 'etykietą '.
 
    Do tablicy exploded trafią nam:
 
    exploded[0] = 'Pokazywanie postów oznaczonych ';
 
    exploded[1] = 'ETYKIETA. Pokaż wszystkie posty'
 
  
 
    Ponownie pozbywamy się ciągu 'Pokaż wszystie posty' i do label_name[0] trafia nam nazwa wyświetlanej etykiety.
 
    Zmienną mode ustawiamy na 'label'.   
 
    */   
 
    if(strstr(msg_str, 'etykietą'))
 
    {
 
     mode = 'label';
 
     var exploded = msg_str.split('etykietą ');
 
     var label_name = exploded[1].split('. Pokaż');   
 
    } 
 
   }
 
  }
 
 
 
  /*
 
  Ostatnią możliwością jest wyświetlanie postów z wyszukiwarki w przypadku dopasowania szukanego słowa:
 
 
 
  BLOGGER WYŚWIETLA: Wszystkie posty spełniające kryteria zapytania php, posortowane według trafności. Sortuj według daty Pokaż wszystkie posty
 
  W tym przypadku jednak nic nie robimy z treścią komunikatu, zapisujemy jedynie do zmiennej mode wartość search.
 
  */ 
 
 
 
  if(mode == '' && strstr(msg_str, 'posortowane'))
 
  {
 
   mode = 'search'; 
 
  } 
 
 
 
  // Zauważmy, że w każdym kolejnym warunku sprawdzana jest wartość zmiennej mode - kolejne dopasowania sprawdzamy tylko jeśli do tej pory jeszcze nic nie dopasowano.
 
 
 
 
 
  /*
 
  Wiemy już gdzie jesteśmy, znamy nazwę kategorii, pora więc wykorzystać zdobyte dane: 
 
  */
 
 
 
  switch(mode)
 
  {
 
   /*
 
   W widoku listy postów z daną etykietą, przygotowujemy nagłówek do wyświetlenia i "wstrzykujemy" do DIV-a, zastępując oryginalną zawartość.
 
   Analogicznie w przypadku pozostałych widoków - preparujemy odpowiednio wyświetlane dane:
 
   */ 
 
  
 
   case 'label': 
 
    var fullname = '';
 
    fullname = getHeader(label_name);   
 
    $("div.status-msg-body" ).html('<h1>' + fullname + '</h1>');   
 
   break;
 
  
 
   case 'search':
 
    $("div.status-msg-body" ).html('<h1>' + msg_html.replace('Sortuj', '</br>Sortuj') + '</h1>');
 
   break;
 
  
 
   case 'empty':
 
    var fullname = '';
 
    fullname = getHeader(label_name);
 
    $("div.status-msg-body" ).html('<h1>' + fullname + ' <br/>Chwilowo brak artykułów w tym dziale.</h1>');   
 
   break;
 
  
 
   case 'search_null':
 
    $("div.status-msg-body" ).html('<h1>' + msg_html.replace('Pokaż', '</br>Pokaż') + '</h1>');         
 
   break; 
 
  
 
  }
 
  // Na sam koniec przywracamy widoczność DIV-a z już podmienionym nagłówkiem.
 
  $("div.status-msg-body").css('display', 'block'); 
 
 }
 
});
 

Kolejny problem

Teraz stajemy przed następnym problemem - jak dowiedzieć się do jakiej kategorii należy czytany właśnie post. Rozwiązać to można dość prosto, za pomocą wyciągnięcia tych danych bezpośrednio z ekranu :)
Szablon posta tuż pod jego treścią wyświetla DIV-a z kilkoma fajnymi rzeczami, takimi jak nazwa autora, przyciski do udostępniania oraz nasze szukane etykiety - jest to DIV klasy CSS .postHeaderAd. Wyciągnijmy je więc stamtąd i rozłóżmy na czynniki pierwsze.
Mamy to już za sobą, a etykietki zapisaliśmy do globalnej zmiennej postLabels.
Najpierw moze więc funkcja, która wykona całą robotę na już wyciągniętych etykietach:

function searchLabelInCats(labels)
 
{
 
 var tmpA = [];
 
 var lArray = labels.split(',');
 
 var lLen = lArray.length;
 
 var ret = '';
 
 
 
 for(i=0; i<lLen; i++)
 
 {   
 
  tmpA[0] = lArray[i].triaddActive();
 
  ret = getHeaderSub(tmpA);
 
 
 
  if(ret != '') {
 
   $("div.postHeaderAd").html(ret);
 
   $("div.postHeaderAd").css('display', 'block');
 
   return false;
 
  }
 
 }
 
 
 
 for(i=0; i<lLen; i++)
 
 {
 
  tmpA[0] = lArray[i].triaddActive();
 
  ret = getHeader(tmpA);
 
 
 
  if(ret != '') {
 
   $("div.postHeaderAd").html(ret);
 
   $("div.postHeaderAd").css('display', 'block');
 
   return false;
 
  }
 
 }
 
}
 

Przeanalizujmy:

function searchLabelInCats(labels)
 
{
 
 var tmpA = [];
 
 var lArray = labels.split(',');
 
 var lLen = lArray.length;
 
 var ret = '';
 
 
 
 /*
 
 Funkcja jako parametr labels przyjmuje wyciągnięte jako text etykiety bezpośrednio z opisu posta.
 
 Ciąg ten ma postać 'ETKIETA1, ETYKIETA2, ETYKIETA3...', aby więc dostać się do każdej etykiety osobno rozbijemy go na tablicę za pomocą: var lArray = labels.split(',');
 
 Rozdzielamy oczywiście za pomocą przecinka i nasza tablica magicznie wypełnia się naszymi etykietami. Podliczamy od razu ich ilość do zmiennej lLen i ruszamy do pętli:
 
 */
 
 
 
 for(i=0; i<lLen; i++)
 
 { 
 
  /*
 
  Na początek tworzymy sobie tymczasową tablicę tmpA, gdyż funkcja getHeaderSub jako parametr pobiera tablicę, a nie string.
 
  Do tymczasowej tablicy na indexie 0 wrzucamy nazwę etykiety, przy okazji obcinając z niej spacje z początku i końca za pomocą triaddActive().
 
  Najpierw lecimy po podkategoriach: pobieramy kod wygenerowanego nagłówka dla naszej etykietki i sprawdzamy czy nie jest pusty (czy etykieta jest poprawna i czy jest podkategorią).
 
  Jeśli funkcja getHeaderSub() zwróciła nam nagłówek, znaczy to, że nasza etykieta to podkategoria, podmieniamy zatem nagłówek na ten wygenerowany i przywracamy mu widoczność, którą domyślnie wyłaczyliśmy w CSS.
 
  Po całej akcji przerywamy pętlę i wychodzimy z funkcji (return false).
 
  */ 
 
 
 
  tmpA[0] = lArray[i].trim();
 
  ret = getHeaderSub(tmpA);
 
 
 
  if(ret != '') {
 
   $("div.postHeaderAd").html(ret);
 
   $("div.postHeaderAd").css('display', 'block');
 
   return false;
 
  }
 
 }
 
 
 
 /*
 
 Jeśli jednak powyższe niczego nam nie wygenerowało, a funkcja dochodzi do tego momentu, znaczy to, że prawdopodobnie mamy do czynienia z etykietą kategorii nadrzędnej.
 
 Przelećmy pętlą tak jak powyżej, ale tym razem po kategoriach za pomocą getHeader(). Jeśli uda nam się wygenerować nagłówek to analogicznie jak powyżej kończymy działanie i wychodzimy z funkcji.
 
 */
 
 
 
 for(i=0; i<lLen; i++)
 
 {
 
  tmpA[0] = lArray[i].trim();
 
  ret = getHeader(tmpA);
 
 
 
  if(ret != '') {
 
   $("div.postHeaderAd").html(ret);
 
   $("div.postHeaderAd").css('display', 'block');
 
   return false;
 
  }
 
 }
 
}

Pozostaje nam tylko wywołanie całości, które umieszczamy w bloku $(document).ready():

$(document).ready(function() { 
 
 if($("div.status-msg-body").text() == '')
 
 { 
 
  tmpLbls = postLabels.replace("Etykiety:", "");
 
  searchLabelInCats(tmpLbls);
 
 }
 
 $('#neat-menu').html(renderMenu());
 
});
 

I analiza:

$(document).ready(function() {
 
 
 
 if($("div.status-msg-body").text() == '')
 
 {
 
  /*
 
    Sprawdzamy, czy nie jesteśmy w widoku wyszukiwania, lub listy postów i pobieramy string z listą wszystkich etykiet, który wcześniej "ukradliśmy" z posta do zmiennej postLabels.
 
  Usuwamy z niego ciąg Etykiety:, który automatycznie dodaje Blogger i tak oczyszczony ciąg wysyłamy do funkcji powyżej opisanej.
 
  */ 
 
  tmpLbls = postLabels.replace("Etykiety:", "");
 
  searchLabelInCats(tmpLbls);
 
 
 
  /*
 
  W tym momencie mamy pięknie wygenerowany nagłówek dla posta. 
 
  */ 
 
 }
 
 
 
 // Renderujemy menu, możemy pominąć jeśli menu nas nie interesuje:
 
 $('#neat-menu').html(renderMenu()());
 
}); 

I to już koniec zabawy z kategoriami, jak widać wymagało to napisania dość dużo kodu i kilku tricków, ale koncepcję taką można sobie dowolnie rozbudować.
Zachęcam do eksperymentowania. Na sam koniec umieszczam jeszcze opisany tutaj kod w całości:

Finalny kod w całości:

<script>
 
var counter = [];
 
var counterCats = [];
 
var counterIndex = 0;
 
var counterCatIndex = 0;
 
var subcategories = [];
 
var categories = [];
 
var global_label = 'start';
 
var global_sublabel = 'start';
 
var menuRendered = false;
 
 
 
categories['PHP'] = new Array('PHP5', 0); //0
 
categories['HTML5_CSS3'] = new Array('HTML5/CSS3', 0); //1
 
categories['JAVASCRIPT'] = new Array('Javascript', 0); //2
 
categories['APACHE2'] = new Array('Apache 2', 0); //3
 
categories['SQL'] = new Array('SQL', 0); //4
 
categories['XML_JSON_SOAP'] = new Array('XML/JSON/SOAP', 0); //5
 
categories['GIT_SVN'] = new Array('Git/SVN', 0); //6
 
categories['API'] = new Array('API', 0); //7
 
categories['UPGRADE'] = new Array('Upgrade', 0); //8
 
categories['OTHER'] = new Array('Różności', 0); //9
 
 
 
subcategories['PHP_podstawy'] = new Array(0, 0, 'Podstawy');
 
subcategories['PHP_zaawansowane'] = new Array(1, 0, 'Zaawansowane');
 
subcategories['PHP_OOP'] = new Array(2, 0, 'Programowanie obiektowe');
 
subcategories['PDO'] = new Array(3, 0, 'PDO i bazy danych');
 
subcategories['PHP_wyrazenia_regularne'] = new Array(4, 0, 'Wyrażenia regularne');
 
subcategories['PHP_bezpieczenstwo'] = new Array(5, 0, 'Bezpieczeństwo');
 
subcategories['Smarty'] = new Array(6, 0, 'Smarty');
 
subcategories['ZendFramework'] = new Array(7, 0, 'Zend Framework');
 
subcategories['Symfony2'] = new Array(8, 0, 'Symfony2 Framework');
 
subcategories['Composer'] = new Array(9, 0, 'Composer');
 
subcategories['Propel'] = new Array(10, 0, 'Propel');
 
subcategories['Doctrine'] = new Array(11, 0, 'Doctrine');
 
subcategories['cURL'] = new Array(12, 0, 'cURL');
 
subcategories['GD2'] = new Array(13, 0, 'GD2');
 
subcategories['PHP_wzorce_projektowe'] = new Array(14, 0, 'Wzorce projektowe');
 
subcategories['PHP_pozostale'] = new Array(15, 0, 'Pozostałe');
 
 
 
subcategories['HTML5'] = new Array(16, 1, 'HTML5');
 
subcategories['CSS3'] = new Array(17, 1, 'CSS3');
 
 
 
subcategories['jQuery'] = new Array(18, 2, 'jQuery');
 
subcategories['Prototype'] = new Array(19, 2, 'Prototype');
 
subcategories['AJAX'] = new Array(20, 2, 'AJAX');
 
 
 
subcategories['APACHE2_httpd'] = new Array(21, 3, 'Konfiguracja - httpd.conf');
 
subcategories['APACHE2_htaccess'] = new Array(22, 3, 'Pliki .htaccess');
 
subcategories['APACHE2_rewrite'] = new Array(23, 3, 'Moduł RewriteEngine');
 
subcategories['APACHE2_vhosts'] = new Array(24, 3, 'Wirtualne hosty - vhosts.conf');
 
subcategories['APACHE2_auth'] = new Array(25, 3, 'Uwierzytelnianie / SSL');
 
 
 
subcategories['MySQL'] = new Array(26, 4, 'MySQL');
 
subcategories['SQL_zaawansowane'] = new Array(27, 4, 'Złożone zapytania');
 
 
 
subcategories['XML'] = new Array(28, 5, 'XML');
 
subcategories['JSON'] = new Array(29, 5, 'JSON');
 
subcategories['SOAP'] = new Array(30, 5, 'SOAP');
 
 
 
subcategories['GIT'] = new Array(31, 6, 'Git');
 
subcategories['SVN'] = new Array(32, 6, 'Subversion');
 
 
 
subcategories['API_Facebook'] = new Array(33, 7, 'Facebook API');
 
subcategories['API_Google'] = new Array(34, 7, 'Google API');
 
subcategories['API_Allegro'] = new Array(35, 7, 'Allegro API');
 
 
 
subcategories['Blogger'] = new Array(36, 8, 'Blogger');
 
subcategories['OTHERS'] = new Array(37, 9, 'Różności');
 
 
 
subcategories['QUICKTIPS'] = new Array(38, 9, 'QuickTips');
 
 
 
subcategories['QUICKLINKS'] = new Array(39, 9, 'QuickLinks');
 
 
 
 
 
function getCatLabel(catIndex)
 
{
 
 var cIndex = 0;
 
   for(cKey in categories)
 
   {
 
    if(catIndex == cIndex) return cKey;
 
    cIndex ++;
 
   }
 
}
 
 
 
function getCatIndex(catKey)
 
{
 
 var cIndex = 0; a
 
   for(cKey in categories)
 
   {
 
    if(cKey == catKey) return cIndex;
 
    cIndex ++;
 
   }
 
}
 
 
 
function arrayInverse(obj) {
 
 
 
  var new_obj = [];
 
  var j = 0;
 
  for(i in obj)
 
  {
 
   new_obj[j] = i;
 
   j++;
 
  }
 
  return new_obj;
 
}
 
 
 
var counterNames = arrayInverse(subcategories);
 
 
 
function writeCount(label)
 
{
 
 var sKey = parseInt(subcategories[label][0]);
 
 document.write(' (' + counter[sKey]  + ')');
 
}
 
 
 
function getCount(label)
 
{
 
 var sKey = parseInt(subcategories[label][0]);
 
 return counter[sKey];
 
}
 
 
 
function countPosts(json) {
 
 counter[counterIndex] = json.feed.openSearch$totalResults.$t;
 
 var sLabel = counterNames[counterIndex];
 
 var pIndex = parseInt(subcategories[sLabel][1]);
 
 var pLabel = getCatLabel(pIndex);
 
 categories[pLabel][1] = categories[pLabel][1] + parseInt(counter[counterIndex]); 
 
 counterIndex++;
 
}
 
 
 
function getCatLabel(catIndex)
 
{
 
 var cIndex = 0;
 
   for(cKey in categories)
 
   {
 
    if(catIndex == cIndex) return cKey;
 
    cIndex ++;
 
   }
 
}
 
</script>
 
 
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/PHP_podstawy?alt=json-in-script&callback=countPosts">//0</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/PHP_zaawansowane?alt=json-in-script&callback=countPosts">//1</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/PHP_OOP?alt=json-in-script&callback=countPosts">//2</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/PDO?alt=json-in-script&callback=countPosts">//3</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/PHP_wyrazenia_regularne?alt=json-in-script&callback=countPosts">//4</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/PHP_bezpieczenstwo?alt=json-in-script&callback=countPosts">//5</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/Smarty?alt=json-in-script&callback=countPosts">//6</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/ZendFramework?alt=json-in-script&callback=countPosts">//7</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/Symfony2?alt=json-in-script&callback=countPosts">//8</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/Composer?alt=json-in-script&callback=countPosts">//9</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/Propel?alt=json-in-script&callback=countPosts">//10</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/Doctrine?alt=json-in-script&callback=countPosts">//11</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/cURL?alt=json-in-script&callback=countPosts">//12</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/GD2?alt=json-in-script&callback=countPosts">//13</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/PHP_wzorce_projektowe?alt=json-in-script&callback=countPosts">//14</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/PHP_pozostale?alt=json-in-script&callback=countPosts">//15</script>
 
 
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/HTML5?alt=json-in-script&callback=countPosts">//16</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/CSS3?alt=json-in-script&callback=countPosts">//17</script>
 
 
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/jQuery?alt=json-in-script&callback=countPosts">//18</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/Prototype?alt=json-in-script&callback=countPosts">//19</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/AJAX?alt=json-in-script&callback=countPosts">//20</script>
 
 
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/Konfiguracja?alt=json-in-script&callback=countPosts">//21</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/APACHE2_htaccess?alt=json-in-script&callback=countPosts">//22</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/APACHE2_rewrite?alt=json-in-script&callback=countPosts">//23</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/APACHE2_vhosts?alt=json-in-script&callback=countPosts">//24</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/APACHE2_auth?alt=json-in-script&callback=countPosts">//25</script>
 
 
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/MySQL?alt=json-in-script&callback=countPosts">//26</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/SQL_zaawansowane?alt=json-in-script&callback=countPosts">//27</script>
 
 
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/XML?alt=json-in-script&callback=countPosts">//28</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/JSON?alt=json-in-script&callback=countPosts">//29</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/SOAP?alt=json-in-script&callback=countPosts">//30</script>
 
 
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/GIT?alt=json-in-script&callback=countPosts">//31</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/SVN?alt=json-in-script&callback=countPosts">//32</script>
 
 
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/API_Facebook?alt=json-in-script&callback=countPosts">//33</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/API_Google?alt=json-in-script&callback=countPosts">//34</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/API_Allegro?alt=json-in-script&callback=countPosts">//35</script>
 
 
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/Blogger?alt=json-in-script&callback=countPosts">//36</script>
 
 
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/OTHER?alt=json-in-script&callback=countPosts">//37</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/QUICKTIPS?alt=json-in-script&callback=countPosts">//38</script>
 
<script src="http://phpmajster.blogspot.com/feeds/posts/summary/-/QUICKLINKS?alt=json-in-script&callback=countPosts">//39</script>
 
 
 
<script>
 
function addActive(labelId)
 
{
 
 var activeClass = 'active';
 
 var actuaLabel = 'PHP';
 
 
 
 if(labelId == actualLabel)
 
 {
 
  document.write(' class=' + activeClass);
 
 }
 
}
 
 
 
String.prototype.replaceArray = function(find, replace) {
 
  var replaceString = this;
 
  for (var i = 0; i < find.length; i++) {
 
    replaceString = replaceString.replace(find[i], replace[i]);
 
  }
 
  return replaceString;
 
};
 
 
 
String.prototype.replaceArrayReg = function(find, replace) {
 
  var replaceString = this;
 
  var regex;
 
  for (var i = 0; i < find.length; i++) {
 
    regex = new RegExp(find[i]);
 
    replaceString = replaceString.replace(regex, replace[i]);
 
  }
 
  return replaceString;
 
};
 
 
 
String.prototype.replaceAll = function( token, newToken, ignoreCase ) {
 
    var _token;
 
    var str = this + "";
 
    var i = -1;
 
 
 
    if ( typeof token === "string" ) {
 
 
 
        if ( ignoreCase ) {
 
 
 
            _token = token.toLowerCase();
 
 
 
            while( (
 
                i = str.toLowerCase().indexOf(
 
                    token, i >= 0 ? i + newToken.length : 0
 
                ) ) !== -1
 
            ) {
 
                str = str.substring( 0, i ) +
 
                    newToken +
 
                    str.substring( i + token.length );
 
            }
 
 
 
        } else {
 
            return this.split( token ).join( newToken );
 
        }
 
 
 
    }
 
 return str;
 
};
 
 
 
function strip_tags(input, allowed) {
 
  allowed = (((allowed || '') + '')
 
    .toLowerCase()
 
    .match(/<[a-z][a-z0-9]*>/g) || [])
 
    .join('');
 
  var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
 
    commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
 
  return input.replace(commentsAndPhpTags, '')
 
    .replace(tags, function($0, $1) {
 
      return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
 
    });
 
}
 
 
 
 
 
function br2nl(t) {
 
 return t.replace(/<br \/>/g, "\r");
 
}
 
 
 
function getRandomArbitary (min, max) {
 
    return Math.floor(Math.random() * (max - min + 1)) + min;
 
}
 
 
 
function strstr(haystack, needle, bool) {
 
    var pos = 0;
 
    haystack += "";
 
    pos = haystack.indexOf(needle); if (pos == -1) {
 
        return false;
 
    } else {
 
        if (bool) {
 
            return haystack.substr(0, pos);
 
        } else {
 
            return haystack.slice(pos);
 
        }
 
    }
 
}
 
 
 
function renderSubCats(parentIndex)
 
{ 
 
 var subCatData = new Array();
 
 var str = '';
 
 
 
 for(subKey in subcategories)
 
 {
 
  subCatData = subcategories[subKey];
 
  if(subCatData[1] == parentIndex)
 
  {
 
   if(subKey == global_sublabel) {
 
    str = str.concat("<li class='active'><a class='active_sub' href='http://phpmajster.blogspot.com/search/label/" + subKey + "'><b>" + subCatData[2] + " (" + getCount(subKey) + ")</b></a></li>");
 
    $("li[subid='" + global_sublabel +"']").addClass('left_sub_active');
 
  
 
   } else {
 
    str = str.concat("<li><a href='http://phpmajster.blogspot.com/search/label/" + subKey + "'>" + subCatData[2] + " (" + getCount(subKey) + ")</a></li>"); 
 
   } 
 
  } 
 
 }
 
 if(str != '')
 
 {
 
  return '<ul>' + str + '</ul>';
 
 } else {
 
 
 
  return ''; 
 
 } 
 
}
 
 
 
 
 
function renderMenu()()
 
{
 
 var pIndex = null;
 
 var str = '';
 
 var home_str = '<li class="active"><a href="/">Home</a></li>';
 
 
 
 for(key in categories)
 
 { 
 
  if(global_label == key) {
 
   str = str.concat("<li class='active'><a href='http://phpmajster.blogspot.com/search/label/" + key + "'>" + categories[key][0] + "</a>");   
 
  } else { 
 
   str = str.concat("<li><a href='http://phpmajster.blogspot.com/search/label/" + key + "'>" + categories[key][0] + "</a>");
 
  }
 
 
 
  str = str.concat(renderSubCats(pIndex));
 
  str = str.concat("</li>"); 
 
 }
 
 
 
 if(global_label != 'start')
 
 {
 
  home_str = '<li><a href="/">Home</a></li>'; 
 
 }
 
 
 
 return '<ul>' + home_str + str + '<li><a href="http://phpmajster.blogspot.com/p/autorkontakt.html">Redakcja</a></li></ul>';
 
}
 
 
 
 
 
function getSubcatName(catIndex)
 
{
 
 var tmpKey = counterNames[catIndex];
 
 return subcategories[tmpKey][2];
 
}
 
 
 
function getHeader(label_name)
 
{
 
 var fullname = '';
 
 
 
 if(label_name[0] in categories) {
 
 
 
  fullname = categories[label_name[0]][0] + ' ('+ categories[label_name[0]][1] + ')' ; // a
 
  global_label =  label_name[0]; // b 
 
 
 
 } else { 
 
 
 
  if(label_name[0] in subcategories) {
 
  
 
   var tmpParentIndex = parseInt(subcategories[label_name[0]][1]); //a
 
   var tmpParentLabel = getCatLabel(tmpParentIndex); //b
 
   global_label = tmpParentLabel; //c
 
   global_sublabel = label_name[0]; //d
 
  
 
   fullname = '<a href="http://phpmajster.blogspot.com/search/label/' + tmpParentLabel +'">' + categories[tmpParentLabel][0] + '</a> / ' + subcategories[label_name[0]][2] + ' ('+ getCount(label_name[0]) +')'; // e
 
  }   
 
 }
 
 return fullname;
 
}
 
 
 
function getHeaderSub(label_name)
 
{
 
 var fullname = ''; 
 
  if(label_name[0] in subcategories) {
 
  
 
   var tmpParentIndex = parseInt(subcategories[label_name[0]][1]);
 
   var tmpParentLabel = getCatLabel(tmpParentIndex);
 
   global_label = tmpParentLabel;
 
   global_sublabel = label_name[0]; 
 
  
 
   fullname = '<a href="http://phpmajster.blogspot.com/search/label/' + tmpParentLabel +'">' + categories[tmpParentLabel][0] + '</a> / <a href="http://phpmajster.blogspot.com/search/label/' + label_name[0] +'">' + subcategories[label_name[0]][2] + ' ('+ getCount(label_name[0]) +')</a>';
 
  }   
 
 
 
 return fullname;
 
}
 
 
 
$("div.status-msg-body").ready(function() {
 
 
 
 var mode = '';
 
 var msg_str = $("div.status-msg-body" ).text();
 
 var msg_html = $("div.status-msg-body" ).html();
 
 
 
 if(msg_str != '')
 
 {   
 
  if(mode == '' && strstr(msg_str, 'wyszukiwania'))
 
  {
 
   mode = 'search_null';   
 
  
 
  } else {
 
  
 
   if(mode == '' && strstr(msg_str, 'Brak postów'))
 
   {
 
    mode = 'empty'; 
 
    var exploded = msg_str.split('etykietą ');
 
    var label_name = exploded[1].split('. Pokaż');   
 
  
 
   } else {
 
  
 
    if(strstr(msg_str, 'etykietą'))
 
    {
 
     mode = 'label';
 
     var exploded = msg_str.split('etykietą ');
 
     var label_name = exploded[1].split('. Pokaż');   
 
    } 
 
   }
 
  }
 
 
 
  if(mode == '' && strstr(msg_str, 'posortowane'))
 
  {
 
   mode = 'search'; 
 
  } 
 
 
 
  switch(mode)
 
  {
 
  
 
   case 'label': 
 
    var fullname = '';
 
    fullname = getHeader(label_name);   
 
    $("div.status-msg-body" ).html('<h1>' + fullname + '</h1>');   
 
   break;
 
  
 
   case 'search':
 
    $("div.status-msg-body" ).html('<h1>' + msg_html.replace('Sortuj', '</br>Sortuj') + '</h1>');
 
   break;
 
  
 
   case 'empty':
 
    var fullname = '';
 
    fullname = getHeader(label_name);
 
    $("div.status-msg-body" ).html('<h1>' + fullname + ' <br/>Chwilowo brak artykułów w tym dziale.</h1>');   
 
   break;
 
  
 
   case 'search_null':
 
    $("div.status-msg-body" ).html('<h1>' + msg_html.replace('Pokaż', '</br>Pokaż') + '</h1>');         
 
   break; 
 
  
 
  } 
 
 }
 
});
 
 
 
var postLabels = '';
 
var inPost = false;
 
 
 
$("div.inPost").ready(function() {
 
 
 
 var inPostDiv = $("div.inPost").text();
 
 
 
 if(inPostDiv == 'TRUE') {
 
  inPost = true;
 
  postId = $("div.inPostID").text();
 
  postLabels = $("span.post-labels").text(); 
 
  $('div.ifClr').addClass('clr');
 
 } 
 
});
 
 
 
function searchLabelInCats(labels)
 
{
 
 var tmpA = [];
 
 var lArray = labels.split(',');
 
 var lLen = lArray.length;
 
 var ret = '';
 
 
 
 for(i=0; i<lLen; i++)
 
 {   
 
  tmpA[0] = lArray[i].trim();
 
  ret = getHeaderSub(tmpA);
 
 
 
  if(ret != '') {
 
   $("div.postHeaderAd").html(ret);
 
   $("div.postHeaderAd").css('display', 'block');
 
   return false;
 
  }
 
 }
 
 
 
 for(i=0; i<lLen; i++)
 
 {
 
  tmpA[0] = lArray[i].trim();
 
  ret = getHeader(tmpA);
 
 
 
  if(ret != '') {
 
   $("div.postHeaderAd").html(ret);
 
   $("div.postHeaderAd").css('display', 'block');
 
   return false;
 
  }
 
 }
 
}
 
 
 
$(document).ready(function() { 
 
 if($("div.status-msg-body").text() == '')
 
 { 
 
  tmpLbls = postLabels.replace("Etykiety:", "");
 
  searchLabelInCats(tmpLbls);
 
 }
 
 $('#neat-menu').html(renderMenu()());
 
});
 
</script>

<< Część 3: dynamicznie generowany nagłówek