Tag Archives: html

webmastering

Lightbox bez użycia linków, rel i title

We wszyst­kich swoich projek­tach WWW mają­cych mieć wodo­try­ski zapewne używa­cie jakichś biblio­tek Java­scrip­to­wych. Ja używam jQuery. Do wywo­ła­nia efektu powięk­sza­ją­cego się obrazka na przy­ciem­nio­nym tle przy­jął się powszech­nie skrypt Light­box. Korzy­sta niestety z biblio­tek Proto­type i Scrip­ta­cu­lous. W efek­cie stwo­rze­nie kilku prostych efek­tów + efekt light­box gene­ro­wał potrzebę pobra­nia przez użyt­kow­nika trzech sporych biblio­tek ze skryp­tami JS.

Dzisiaj chcia­łem zare­kla­mo­wać skrypt, który używa wyłącz­nie jQuery przy tworze­niu light­boksa. Zwie się jQuery light­Box plugin. Sama instruk­cja użycia jest dosyć prosta i nie będę o niej pisał. Zamiast tego napi­szę jak zrobić żeby nie trzeba było otaczać obraz­ków linkami, chociażby po to, że nie chcemy oficjal­nie chwa­lić się adre­sami url do dużych obraz­ków. Opis do ramki weźmiemy z atry­butu alt="", czyli osta­tecz­nie nie musimy doko­ny­wać żadnych zmian w kodzie HTML strony.

Stan­dar­dowe przy­go­to­wa­nie kodu HTML wygląda tak: <a href="duzy_obrazek.jpg" rel="lightbox" title="Tytuł obrazka" ><img src="maly_obrazek.jpg"></a<. Wyżej wymie­nioną przeze mnie biblio­tekę da się w miarę łatwo zmusić do współ­pracy z samymi elemen­tami <img>, a samo wywo­ła­nie light­boksa może robić się auto­ma­gicz­nie na podsta­wie rodzica <div> otacza­ją­cego obrazki. Potrzeba tylko kilku prze­ró­bek kodu biblioteki.

Bierzemy na warsz­tat plik jquery.lightbox-0.5.js. Inte­re­sują nas okolice 77 linijki kodu (lub 15 w wersji zminia­tu­ry­zo­wa­nej pliku), a dokład­niej trzy miej­sca zaczy­na­jące się od objClicked.getAttribute('href'). Zamie­niamy je na objClicked.getAttribute('src').replace("small", "big"), czyli frag­ment orygi­nal­nego linka do zdję­cia w locie zamie­niany jest z small na big. Jeżeli chcemy żeby opis fotek brany był z atry­butu alt="", to musimy dodat­kowo zamie­nić w dwóch miej­scach objClicked.getAttribute('title') na objClicked.getAttribute('alt').

Zakła­damy oczy­wi­ście, że pliki z małymi obraz­kami trzy­mamy w kata­logu images/small/obrazek.jpg, a duże obrazki z taką samą nazwą jak małe mamy w kata­logu images/big/obrazek.jpg.

Taką biblio­tekę trzeba jesz­cze wystar­to­wać, czyli podać jej jakie obrazki powinny być powięk­szane. W sekcji <head> doda­jemy sobie taki skrypt:

$(document).ready(function() {
    $('div.ramkanazdjecia > img').lightBox();
});

Cała zawar­tość „obraz­kowa” <div class="ramkanazdjecia"> stanie się lightboksowa.

webmastering

Weź mi zrób procesor tekstu cz. 2 / 2

Zgod­nie z zapo­wie­dzią, dzisiaj będziemy imple­men­to­wać moduły, które coś z poda­nym tekstem robią. Do tego celu głów­nie używać będziemy wyra­żeń regularnych.

1. Na pierw­szy ogień pójdzie popra­wiacz spacji. Jak często trafiają się wam doku­menty forma­to­wane za pomocą 20 spacji? Za pomocą tego cuda wywa­limy wszystko co ma powy­żej dwóch za koleją.

class SpaceFixer implements TextJob {
   public function process($string) {
      $string = trim($string);
      $string = preg_replace('/\s{2,}/' , ' ' , $string);
      return $string;
   }
}

Zasada dzia­ła­nia prosta: najpierw wyrzuć wszel­kie spacje przed i za strin­giem, a następ­nie poszu­kaj dwie lub więcej spacji za koleją i zamień je na pojedyncze.

2. Teraz coś sporo trud­niej­szego: doda­wacz twar­dych spacji do spój­ni­ków. Zasada dzia­ła­nia taka: znajdź mi spację, poje­dyn­czy znak, znowu spację i jeden lub więcej znaków (np. jedze­nie_i_picie).

class AddNbsps implements TextJob {
   public function process($string) {
      $output = ''; // inicjalizujemy pustą zmienną, zostało mi to po Javie
      foreach ($this->splitStringsByTagChar($string) as $split) {
         $output .= substr($split , 0 , 1) == '<' ? $split : $this->fixLine($split);
      }
      return $output;
   }
   private function splitStringsByTagChar($string) {
      return preg_split('/(<.+?>)/', $string, -1, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE);
   }
   private function fixLine($line) {
      return preg_replace('/(\s{1}[-\("\w]{1})\s{1}([-\)"\w]+)/' , '$1&nbsp;$2' , $line);
   }
}

Jak widać trochę się pokom­pli­ko­wało. Po co nam te dodat­kowe funk­cje? Ano po to żeby nie popsuły się nasze HTMLowe tagi. Funk­cja splitStringsByTagChar nieza­chłan­nie szuka czegoś co przy­po­mina sekwen­cję <coś> i szat­kuje nam ciąg do tablicy.

Opera­tor trój­ar­gu­men­towy po fore­ach spraw­dza czy element tablicy zaczyna się od znaku < . Jeżeli tak, to zosta­wia go w spokoju, a jak nie, to kieruje do prze­róbki do fixLine. Można zauwa­żyć, że oprócz klasy znaków \w (alfa­nu­me­ryczne i _) doda­łem również ” ( ). Po prze­ana­li­zo­wa­niu kilku tekstów stwier­dzi­łem, że tak lepiej działa (a mogłoby pewnie lepiej gdybym poświę­cił na to jesz­cze trochę czasu).

3. Wyszu­ki­wacz linków.

class AddLinks implements TextJob {
   public function process($string) {
      return preg_replace('`(?<!href="|src=")((https?://|www\.)[\w{1,}./?=#&]+)`i' , '<a href="$1">$1</a>' , $string);
   }
}

Tutaj można zauwa­żyć dziwną konstruk­cję (?<! Jest to aser­cja wsteczna. Działa tak: znajdź mi ciąg znaków zaczy­na­jący się od http:// lub www., a jak znaj­dziesz, to sprawdź czy czasami przed znale­zio­nym ciągiem nie ma konstruk­cji z aser­cji. Po co to? Do wykry­cia, czy link znaj­duje się już w tagu <a href=” lub <img src=”, a więc czy nie popsu­jemy kodu html. Do tego mógł­bym równie dobrze użyć funk­cji szat­ku­ją­cej z poprzed­niego modułu, ale chcia­łem żeby było trudniej :-)

Jak tego wszyst­kiego używać? Dosyć prosto: w atry­bu­tach poda­jemy moduły, które nas inte­re­sują i poda­jemy tekst:

$jakisTekst = 'Ala ma kota, a kot ma HIV';
$txtProcesser = TextProcesser::getInstance(array('SpaceFixer','AddNbsps','AddLinks'));
$processedTxt = $txtProcesser->processJobs($jakisTekst);

Tekst będzie prze­twa­rzany w poda­nej kolej­no­ści. Fajne, co?
[czeka na oklaski]

webmastering

Weź mi zrób procesor tekstu cz. 1 / 2

Dzisiaj będzie wpis o ułatwia­niu życia użyt­kow­ni­kom paneli admi­ni­stra­cyj­nych. Chodzi tutaj o sytu­ację, gdy użyt­kow­nik naszej strony wkleja byle jak jakiś tekst z Worda do TinyMCE, a następ­nie dziwi się, że na stro­nie wycho­dzi kaszana.

Parę rzeczy da się popra­wić z auto­matu poprzez prze­two­rze­nie przez proce­sor tekstu. Skąd taki wziąć? A napi­szemy sobie sami.

W tym wpisie stwo­rzymy „rusz­to­wa­nie”, a w następ­nej części parę modu­łów robią­cych jakieś konkretne rzeczy.

Pierw­sze czego potrze­bu­jemy to inter­fejs poje­dyn­czego modułu prze­twa­rza­ją­cego tekst. Będzie banal­nie prosty: metoda process pobiera stringa i zwraca prze­two­rzo­nego stringa.

interface TextJob {
   public function process($string);
}

Dalej piszemy klasę proce­sora tekstu.

class TextProcesser {
   private $jobsToDo = array();
   private function __construct() {}
   public static function getInstance($params = array()) {
      $textProcesser = new TextProcesser();
      foreach ($params as $param) {
         try {
            if (!class_exists($param)) throw new Exception('Klasa ' . $param . ' nie istnieje!');
            $param = new $param;
            if (!($param instanceof TextJob)) throw new Exception('Klasa ' . $param . ' nie obsluguje interfejsu TextJob!');
         } catch (Exception $e) {
            echo $e->getMessage();
            die();
         }
         $textProcesser->addJob($param);
      }
      return $textProcesser;
   }
 
   private function addJob(TextJob $tj) {
      $this->jobsToDo[] = $tj;
   }
 
   public function processJobs($string) {
      foreach ($this->jobsToDo as $job) {
         $string = $job->process($string);
      }
      return $string;
   }
}

Po kolei:

  1. Zmienna $jobsToDo trzyma tablicę prac do wykonania.
  2. Klasy nie będziemy tworzyć poprzez konstruk­tor, dlatego został zmie­niony na prywatny.
  3. Statyczna metoda getInstance tworzy obiekt proce­sora i przy okazji spraw­dza czy podana tablica $params zawiera istnie­jące klasy i czy imple­men­tują one inter­fejs TextJob.
  4. Metoda addJob dodaje kolejną pracę do wyko­na­nia do kolejki.
  5. processJobs wyko­nuje właściwą robotę — pobiera stringa do prze­two­rze­nia i w kolej­no­ści doda­nia prac prze­twa­rza go.

Co mamy do tej pory? Klasę, do której możemy doda­wać tyle konkret­nych zadań ile chcemy, o ile tylko imple­men­tują inter­fejs TextJob. W następ­nej części będziemy wyrzu­cać zbędne spacje, doda­wać twarde spacje i szukać linków.