Most, hogy gőzerővel készülök az Integral Vision Workshop rendezvénysorozatunkra, úgy gondoltam megosztok egy pár érdekességet, gondolatot a Drupal 7 verziójáról.

Ma a library fogalmáról és pár JavaScript újdonságról lesz szó.

Számos esetben előfordul, hogy kisebb látványelemekkel, felhasználói élményjavítókkal szeretnénk feltuningolni weboldalunkat. Ilyenkor általában a netről összevadászott JavaScript csodákat kell az oldalunkba illeszteni.

Gyakran ezek a csodák nem csak egy JavaScript fájlból álltak, hanem tartalmaztak css fájlokat is. Számos esetben különböző függőségeik voltak. Volt, hogy nem jQuery függvénykönyvtárat, hanem valami mást használtak, ami miatt nehezen tudtuk az oldalainkba illeszteni azokat. Azokról a widgetekről már ne is beszéljünk, amiknél a javascript fájlokat az adott projekt oldaláról kellet beszúrnunk. A Drupal 7 megoldást kínál ezekre a problémákra, egy kis próba modul segítségével nézzük meg hogyan.

A csatolt modul négy fájlt tartalmaz: egy .info és .modul fájlt, valamint egy .js és .css fájlt. E két utóbbi lesz a JavaScript könyvtár, amit az oldalunkba fogunk illeszteni. Ez a kis megoldás semmi mást nem csinál, mint azt a táblázat sort, ami az egér mutatója alatt van, kiemeli.

Vizsgáljuk meg első körben a JavaScript fájlt: [code lang=“javascript”] (function($){ Drupal.behaviors.js_proba = { attach : function (context){ $(’table.row-hover tr’, context).once(‘row-hover’).hover( function (e) { $(this).addClass(‘row-hovered’); }, function (e) { $(this).removeClass(‘row-hovered’); } ); } } })(jQuery)


A kód áttekintésénél mi most elsősorban a Drupal hatoshoz képesti különbözőségekre fogunk koncentrálni. Nézzük mindjárt az elején azt a furcsa kódot, amibe az egész JavaScript fájlunkat burkoltuk:

[code lang="javascript"]
(function($){
})(jQuery)

Amennyiben azt mondom, hogy ez biztosítja azt, hogy más egyéb JavaScriptes keretrendszerekkel is együtt tudjon működni a mi rendszerünk, akkor nyílván elhisszük, de azért talán örülünk egy két magyarázó szónak a miért tekintetében.

Nézzük a következő kódot: [code lang=“javascript”] function fuggveny(szoveg) { alert(szoveg); } valtozo = fuggveny; valtozo(‘írd ki’);

Ami itt az érdekes, hogy a valtozo nevű változóba belerakjuk a fuggveny nevű függvényt és ezáltal a változó tud úgy viselkedni mint egy függvény. Ez nem gondolom, hogy túlzott újdonságot jelentene. Az már talán érdekesebb, hogy a függvény nevét megspórolhatjuk, hisz a JavaScriptben lehet névtelen függvényeket használni.
[code lang="javascript"]
valtozo = function (szoveg) {
  alert(szoveg);
}
valtozo('írd ki');

Most már csak egy lépést kell tennünk a megértés felé: [code lang=“javascript”] szoveg = ’egészen más’; (function (szoveg) { alert(szoveg); })(‘írd ki’)

Ebből a kódból látható, hogy már a változót is kidobtam, a névtelen függvény pusztán önmagában áll, ráadásul egyből meg is hívjuk az 'írd ki' paraméterrel. Ennek látszólag semmi értelme nincsen, ezért is tettem bele a függvényen kívülre a szoveg változót. Ugyanis, ez az egész kódhalom semmi más célt nem szolgál mint, hogy a függvényen belüli névtér segítségével pontosan meg tudjuk mondani, hogy az adott kódrészletben a szoveg nevű változó mit is jelentsen.

A fenti példában a $ nevű változónak az értékét állítjuk be úgy, hogy az mindig a jQuery objektumra mutasson. Ez azért lesz számunkra életmentő, mivel például a prototype függvénykönyvtár is a $ nevű változót használja és így könnyedén meg tudjuk majd mondani, hogy az adott kód a $ nevű változó esetén pontosan melyik könyvtárat szeretné használni.

A másik újdonság amit megfigyelhetünk, hogy a Drupal.behaviors objektumhoz már nem csak egy függvényt kell hozzáadnunk, hanem kettőt. Az egyik akkor fog meghívódni amikor elemekre eseménykezelőket akarnak akasztani (attach), a másik akkor, amikor ezeket az eseménykezelőket el akarják távolítani (detach).

Mint látható a fenti JavaScript egy row-hovered osztályt ad ahhoz a sorhoz, amelyiken éppen az egérkurzor áll, magát a formázást a CSS fájlban találhatjuk:
[code lang="css"]
tr.row-hovered td {
  background-color: #fcc;
  color: black;
}

No, akkor nézzük a modult.

Az első részben megoldjuk, hogy valahol látható legyen a próba oldal. Ebben semmi ördöngösség nincsen, egy sima hook_menu() implementáció:

[code lang=“drupal6”] function js_proba_menu() { $items = array(); $items[‘js_proba’] = array( ’title’ => ‘JS Próba’, ‘page callback’ => ‘js_proba_page’, ‘access arguments’ => array(‘access content’), ); return $items; }


Az oldalt előállító függvény kódjának a végén viszont már látjuk az újdonságot:
[code lang="drupal6"]
function js_proba_page() {
// adatfeltöltés most csak próba adatokkal
  $oszlop = 10;
  $sor = 10;
  $data = array();
  $data['header'] = array();
  $data['rows'] = array();
  for ($i = 0; $i < $oszlop; $i++) {
    $data['header'][] = 'Oszlop_'. $i;
  }
  for ($j = 0; $j < $sor; $j++) {
    $row = array();
    for ($i = 0; $i < $oszlop; $i++) {
      $row[] = 'Elem_'. $j .'_'. $i;
    }
    $data['rows'][] = $row;
  }
//adatfeltöltés vége, most jön a lényeges rész
  drupal_add_library('js_proba', 'row_hover');
  $data['attributes']['class'] = array('row-hover');
  return theme('table', $data);
}

Túl sok szót erre az újdonságra sem érdemes pazarolni, annyit azonban mindenképpen meg kell említeni, hogy a betöltendő könyvtáron kívül az őt megvalósító modult is meg kell adni. No, és akkor nézzük a tényleges újdonságot, a hook_library kampófüggvényt: [code lang=“drupal6”] function js_proba_library() { $libraries[‘row_hover’] = array( ’title’ => ‘JS Próba’, ‘website’ => ‘http://palocz.hu/taxonomy/term/107', ‘version’ => ‘1.0’, ‘js’ => array( drupal_get_path(‘module’, ‘js_proba’) . ‘/js_proba.js’ => array(), ), ‘css’ => array( drupal_get_path(‘module’, ‘js_proba’) . ‘/js_proba.css’ => array( ’type’ => ‘file’, ‘media’ => ‘all’, ), ), ); return $libraries; }

Egy modul több könyvtárat is megvalósíthat, ezért egy tömböt kell visszaadnunk. Ebben a tömbben a kulcs a könyvtár gépi neve, az érték pedig a könyvtárat leíró adathalmaz lesz. Mi most csak egy könyvtárat valósítunk meg a row_hover-t. A könyvtárat leíró adathalmaznak meg lehet adni egy, az emberek számára is olvasható nevet (title), a projekt weboldalát (website), a verzióját, valamint a js és css fájlokat.

A js és css fájlok szintén tömbök lesznek, ahol a kulcs az adott [drupal_add_js](http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_add_js/7) vagy [drupal_add_css](http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_add_css/7) függvény $data eleme, míg az értéke az előbbi függvényeknek átadott $options paraméter. Mivel a js fájlt csak egyszerűen beszúrjuk, tehát semmilyen paraméter nem adunk át neki, ezért van ott az üres tömb. A css fájlhoz már adunk át némi beállítást, de talán ez is érthető.

Holnap ezt a kódot fogjuk tovább bővíteni, hogy bemutathassak pár sminkeléssel kapcsolatos újdonságot.