Contextual links létrehozása mezőkhöz

Kategória: 
Leírás
Contextual links létrehozása mezőkhöz

A drupal 7 egyik komoly ux újdonsága, a contextual links. Ez gyakorlatilag azt jelenti, hogy egy adott elemen állva (pl egy blokkban, vagy views listában nodeokon) megjelenik néhány olyan link, amikkel az elemre tudunk hatni, például törölhetjük, szerkeszthetjük.

Esetemben konkrétan az volt a feladat, hogyha feltöltünk imagefielden keresztül egy képet, amit a media modul kezel, akkor a node megtekintésekor legyen egy ugyanilyen csini legördülő menü magukon a képeken, amivel egyből szerkeszthetjük azokat.

Na ez azért nem egy egyszerű mutatvány, legalábbis ha elsőre kell ilyet csinálni, de ha megvan a logika, akkor utána könnyebben megy.

Alapértelmezett contextual linkekként olyan útvonalakat tudunk megjeleníteni, amelyek minimum egy adott vonalból származnak. Kell még hozzá egy másik feltétel is, amit a modulfejlesztők a menu felépítésekor adhatnak meg, tehát a hook_menu-ban deklarált menütömbnek tartalmaznia kell a következő elemet:

[geshifilter-code] 'context' => MENU_CONTEXT_PAGE | MENU_CONTEXT_INLINE, [/geshifilter-code]

Ha ez nincsen, akkor nem fog megjelenni a contextual linkek között. Ezt könnyen áthághatjuk, de erről majd máskor.

Akkor lássunk neki! A következő lépésekre van szükségünk:

1. Hozzá kell adni a saját sminkdeklarációnkat ahhoz az elemhez, amihez contextual links-t akarunk kapcsolni.
2. Be kell regisztrálni a sminkdeklarációt.
3. Elő kell készíteni az adatokat a template fájlba íráshoz.
4. Létre kell hozni a szükséges template file-t.
5. Opcionális - belebabrálhatunk a most létrehozott linkekbe

Először a hook_entity_view_alter hookot kell megvalósítanunk. Ebben a hookban tudjuk módosítani a megjelenítendő elemek paramétereit, többek között befolyásolhatjuk, hogy hogyan, milyen sminkfüggvényeket használjon. Mi pontosan ezt fogjuk tenni.

Ez a funkció mindegy egyes entitás megjelenése előtt meghívódik. A $build változó tartalmazza azt a renderable array-t (wtf lehetne ez magyarul???), amiből az egyes elemek sminkelődni fognak. Ez a hook igen érzékeny, mivel akár egy user, akár egy comment akar kirajzolódni az oldalon, ez mindenképpen szaladni fog, szóval bánjunk vele úgy, mint egy hímes tojással, mert könnyen olyan adatokat babrálhatunk benne, ami nem is létezik.

A mi feladatunk ebben a funkcióban, hogy keressük meg azokat az elemeket, amelyek mezők, és media vagy image típusúak, és adjunk hozzá egy saját sminkfüggvényt, mégpedig #theme-wrapperként. Ez azt jelenti, hogy nem magát az elemet fogja a függvényünk sminkelni, hanem az elem köré építünk html-t. Valamint itt hozzuk a drupal tudtára, hogy márpedig nekünk ide contextual links kell.
Most szépen magyarul felkommentelem, ám ezt rendes kódban nem illik. :P

[geshifilter-drupal6]/* * Implements hook_view_entity_alter */ function mymodule_hooks_entity_view_alter(&$build, $type) { //Végigszaladunk az elemeken, amik nem paraméterek, tehát nem #-vel kezdődnek. foreach (element_children($build) as $field) { //Ez az a feltétel, ami nekünk kell. A media gallery tartalomtípust azért vesszük ki, // mert azt a media_gallery modul szolgáltatja, és ő csinál hozzá saját contextual linkeket. if (isset($build[$field]['#field_type']) && ($build[$field]['#field_type'] == 'image' || $build[$field]['#field_type'] == 'media') && $build['#bundle'] != 'media_gallery') { //Mivel egy mezőben akár több érték is lehet, tehát egy mezőhöz több kép is kapcsolható, // végigmegyünk az összesen, mert minden képnek saját menüt akarunk foreach (element_children($build[$field]) as $delta) { //Ez azért kell, mert lehetnek a tömbben olyan segédváltozók, //amik valójában nem egy-egy elemet jelentenek. if (is_numeric($delta)) { //És íme a lényeg: a contextual links deklaráció, magyarázat a kód alatt $build[$field][$delta]['#contextual_links']['field_image'] = array('media', array($build[$field]['#items'][$delta]['fid'])); //Ő lesz a mi kis saját sminkfüggvényünk. $build[$field][$delta]['#theme_wrappers'] = array('mymodule_contextual_links'); } } } } }[/geshifilter-drupal6]

Ezt a részt vesézzük ki, mert baromira nem egyértelmű elsőre:

[geshifilter-drupal6] $build[$field][$delta]['#contextual_links']['field_image'] = array( 'media', array($build[$field]['#items'][$delta]['fid']) ); [/geshifilter-drupal6]

Mi itt most egy field_image nevű contextual links elemet gyártunk A contextual links deklarációja egy tömb, ami minimum két értéket kíván. Az első az az útvonal, aminek a 'context' => MENU_CONTEXT_PAGE | MENU_CONTEXT_INLINE, paraméterrel ellátott gyermekei fognak megjelenni a menüben. A media útvonalhoz jelen esetben a media/[fid]/edit útvonal tartozik. A másodikban az útvonal argumentumait adjuk meg szintén egy tömbben. Itt és most azt mondtuk neki, hogy argumentumként használd az adott mezőhöz tartozó file azonosítóját.

Akkor a kövi, hozzuk létre a saját sminkdeklarációnkat. Ez itt olyan hülyén hangzik, ha jobbat mondasz, lecserélem. A lényeg, hogy a hook_theme megvalósításával tudatjuk a drupallal, hogy helló, nekünk van egy template fájlunk, használd légyszi.

[geshifilter-drupal6]/** * Implements hook_theme(). */ function mymodule_hooks_theme() { $items = array( //nézd csak vissza, 'mymodule_contextual_links', ezt adtuk meg az előbb a #theme_wrapper változónak 'mymodule_contextual_links' => array( 'render element' => 'element', //contextual_links_wrapper.tpl.php - ez lesz a fáljunk, amit létre fogunk hozni. 'template' => 'contextual_links_wrapper', ), ); return $items; }[/geshifilter-drupal6]

Na, mivel szépen akarunk csinálni mindent, nem csak úgy belehányunk fűt-fát a tpl.php fáljunkba, hanem előtte szépen előkészítjük az adatokat. Minden .tpl.php fájlhoz tartozik egy előfeldolgozó, aminek a neve [mymodule]_preprocess_[fájlneve].

@todo: ahogy ez most leírtam, rájöttem, hogy én nem így csináltam, de működik. Szóval most vagy nem tartozik automatikusan minden .tpl.php-hez előfeldogozó, hanem a _theme-ben beállított változóhoz tartozik (mymodule_contextual_links), vagy mindkettőt lehet használni, vagy egyszerűen én bénáztam, hogy kiléptem a namespaceből, és a templatenek is 'mymodule_contextual_links'-t kellett volna megadni, illetve mymodule_contextual_links.tpl.php-t használni.

Valósítsuk hát meg:

[geshifilter-drupal6]/** * Implements template_preprocess_contextual_links */ function mymodule_preprocess_mymodule_contextual_links(&$variables) { //Ezzel lehetőséget adunk más moduloknak is, hogy extra css classt adjanak a mi tpl.php-nkhez. if (isset($variables['element']['class'])) { $variables['classes_array'][] = $variables['element']['class']; } //Ő lesz maga a tartalom, tehát a renderelt, megsminkelt mező. Miután #theme-wrapperként adtunk //hozzá a sminkdeklarációnkat, ezért az eredeti tömb #children-ként szerepel benne $variables['content'] = $variables['element']['#children']; }[/geshifilter-drupal6]

Eddig csúcs, már csak a .tpl.php-nk hiányzik, hozzuk hát létre, és tegyük bele a kövit:

[geshifilter-drupal6]<?php /** * @file contextual_links_wrapper.tpl.php * Default template implementation to display contextual links around image fields. * */ ?> <div class="<?php print $classes; ?>" <?php print $attributes; ?>> <?php print render($title_prefix); ?> <?php print $content ?> <?php print render($title_suffix); ?> </div>[/geshifilter-drupal6]

Azért itt látszik, hogy sokat nem csináltunk. Ami a lényeg, az a $title_prefix, és $title_suffix. Hogy ez gyárilag mit csinál lövésem nincs. Valószínűnek tartom, hogy a drupal ezeket a változókat magának tartja fenn, ugyanis ezekben írja ki a contextual linkekhez szükséges html-t.

Ha ez megvan, akkor egy smink gyorstár ürítés, és már ott is vannak a képeken a csini linkek. És miután megtelt a node, a belebabrálásról máskor mesélek majd.

Hozzászólások

Hozzászólás

A mező tartalma nem nyilvános.
  • Internal paths in double quotes, written as "internal:node/99", for example, are replaced with the appropriate absolute URL or relative path.
  • Engedélyezett HTML elemek: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <del> <img>
  • A webcímek és email címek automatikusan linkekké alakulnak.
  • A sorokat és bekezdéseket a rendszer automatikusan felismeri.
  • Engedélyezett HTML elemek: <a> <blockquote> <br> <cite> <code> <dd> <del> <div> <dl> <dt> <em> <li> <ol> <p> <span> <strong> <ul>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <bash>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <mysql>, <php>, <python>, <ruby>, <sql>. The supported tag styles are: <foo>, [foo].
  • Minden email cím át lesz alakítva ember által olvasható módon, vagy (ha a JavaScript engedélyezett) ki lesz cserélve kattintható, de biztonságos hivatkozásra.
Type the characters you see in this picture. (verify using audio)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.