Bizonyára sokunk fejében megfordult már a gondolat, hogy a honlapon lévő belépési modul sok értékes helyet foglal, és jobban szeretnék helyette csak egy diszkrét gombot kitenni a megfelelő pozícióba, mellyel a belépési modul előugró ablakkal lenne megjeleníthető. 

A leírásban bemutatjuk, hogyan lehet a RokBox felhasználásával ezt az egyedi képességet elkészíteni, amellyel egy modulpozíciót jeleníthetünk meg egy modális előugró ablakban, amelyet egy gombbal tudunk aktivizálni.

Megjegyzés: A Popup Login működéséhez a RokBox beépülőnek telepítve kell lenni a honlapon. Mielőtt elkezdenénk a tulajdonság elkészítését, győződjünk meg arról, hgy a RokBox legfrissebb verziója telepíve van-e oldalunkon.

1. lépés: Az egyedi szolgáltatás elkészítése

A hivatkozást/gombot működtető szkriptet - amely az előugró modult fogja megjeleníteni - a login.php nevű fájlba fogjuk elhelyezni, melyet a features/ mappában helyezünk el. Készítsük el ezt a login.php fájlt az alábbi tartalommal:

<?php
defined('JPATH_BASE') or die();

gantry_import('core.gantryfeature');
class GantryFeatureLogin extends GantryFeature {
    var $_feature_name = 'login';

    function render($position="") {
	ob_start();
	$user =& JFactory::getUser();
	?>
	<div class="rt-block">
		<div class="rt-popupmodule-button">
		<?php if ($user->guest) : ?>
			<a data-rokbox href="#" class="buttontext button" data-rokbox-element="#rt-popuplogin">
				<span class="desc"><?php echo $this->get('text'); ?></span>
			</a>
		<?php else : ?>
			<a data-rokbox href="#" class="buttontext button" data-rokbox-element="#rt-popuplogin">
				<span class="desc"><?php echo $this->get('logouttext'); ?> <?php echo JText::sprintf($user->get('username')); ?></span>
			</a>
		<?php endif; ?>
		</div>
	</div>
	<?php
	return ob_get_clean();
    }
}

Lényegében, ha ez a funkció engedélyezve van és hozzárendelt, ez fogja összerakni a hivatkozás/gomb stílushoz és szerkezethez szükséges megfelelő HTML-t forrást, valamint a RokBoxhivatkozás szintaxisát, amely kiváltja az előugró hatást.

Míg ez a kód főleg a szabványos div-ek formázását biztosítja, van néhány kulcsfontosságú RokBox szintaktikai elem néhány dinamikus elem számára az alábbiak szerint:

RokBox szintaxis

<a data-rokbox href="#" class="buttontext button" data-rokbox-element="#rt-popuplogin">

Az aktuális hivatkozás a RokBox szintaxist használja a modul behívását az előugró ablakba. A data-rokbox és a data-rokbox-element adatkészlet használatával a modult körbevevő div-ekre hivatkozunk, melyek megmondják a RokBoxnak, melyik elemet kell az előugró ablakban helyezni. A környező div (példánkban az #rt-popuplogin) később tesszük bele az elrendezésbe.

Hivatkozás/Gomb szöveg

<span class="desc"><?php echo $this->get('text'); ?></span>

Példánkban egy dinamikus hívást készítünk a span-ok között a megjelenő szöveg beillesztésére. Ez a módszer lehetővé teszi számunkra, hogy egy szép egyedi szövegmezőt készítsünk, a sablon adminisztrációban a hivatkozás szövegének könnyű megváltoztatása érdekében, a működtető kód szerkesztése nélkül. A dinamikus szöveg beállítását egy későbbi lépésben mutatjuk be. Egyébként egyszerűen beilleszthetjük a kívánt szöveget is idézőjelek között az echo utasítás után a $... helyére.

2. lépés: Egyedi elrendezés elkészítése

Ezután készítünk egy egyedi elrendezést, kihasználva a Gantry azon képességét, hogy nagyobb rugalmasságot tesz lehetővé a pozíciók egyéni elrendezésének meghatározásában. Készítenünk kell egy mod_login.php nevű fájlt, melyet majd a sablon /html/layouts mappájába kell helyeznünk. A fájlnak a következő kódot kell tartalmaznia:

<?php
defined('JPATH_BASE') or die();

gantry_import('core.gantrylayout');
/**
*
* @package gantry
* @subpackage html.layouts
*/
class GantryLayoutMod_Login extends GantryLayout {
	var $render_params = array(
		'contents' => null,
		'position' => null,
		'gridCount' => null,
		'pushPull' => ''
	);
	function render($params = array()){
		global $gantry;

		$rparams = $this-> _getParams($params);
		ob_start();
	// XHTML LAYOUT
?>

<div id="rt-popuplogin"> <?php echo $rparams->contents; ?> </div>
<?php
		return ob_get_clean();
	}
}

Ez az egyedi elrendezés teszi lehetővé, hogy hivatkozzunk rá az index.php-ban a mod_ utáni név használatával, ami egyszerűen 'login'. Ezután ez fogja felépíteni az teljes HTML tartalmat az egész pozíció körül. Ez teszi számunkra lehetővé az index.php még nagyobb tömörségének megtartását.
Az egyszerű #rt-popuplogin formázó div-et használjuk, de szükség szerint annyi elemet adtahunk hozzá, amennyire szükségünk van a tervezési szempontoktól függően.

3. lépés: A Chrome modul beállítása

Beállíthatunk egy chrome modult az előző részben meghatározott login tulajdonsághoz. Ehhez nyissuk meg a /html/modules.php fájlt, és a végén lévő ?> zárótag elé illesszük be a következő kódot:

function modChrome_login($module, &$params, &$attribs)
{
	if (!empty ($module->content)) : ?>
	<div class="rt-block">
		<div class="module-content">
			<?php if ($module->showtitle != 0) : ?>
			<h2 class="title"><?php echo $module->title; ?></h2>
			<?php endif; ?>
			<div class="module-inner">
				<?php echo $module->content; ?>
			</div>
		</div>
	</div>
	<?php endif;
}

4. lépés: Pozíció elhelyezése az index.php fájlban

Most az új modulpozíciót kell hozzáadnunk az index.php-hez, melybe a RokBox előugró behívásra kerül. Fontos az új modulpozíció elkészítése, mert mindaddig, míg be nem kapcsoljuk, rejtett marad a CSS-el az oldal felépítésének normális folyamatától függetlenül.
A modulpozíció neve egyszerűen 'login' lesz. A sablon index.php fájljának legvégére, közvetlenül a body tag elé illesszük be a következő kódot:

<?php /** Begin Popup **/
	echo $gantry->displayModules('login','login','login');
	/** End Popup **/ ?>

A displayModules függvénynek három paramétert adunk át. Az első a modulpozícióra hivatkozik, a második az elrendezésre, melyet ebben a pozícióban használni kívánunk (az előzőekben leírt mod_login.php-ban készítettük el), a harmadik paraméter a modul felépítését végző szkriptre hivatkozik, amelyet a /html/modules.php kódjában helyeztünk el.

5. lépés: Paraméterek beállítása

Most már csak az adminisztrációs felületen használatos paraméterek beállítása van hátra. Ez az extra beállítás lehetővé teszi számunkra, hogy hasznosítsuk a popup helyzetét, valamint testre szabhassuk a hivatkozás szövegét, engedélyezzük/tiltsuk a a Popup Login gombot, és meghatározhassuk, mely oldal(ak)on jelenjen meg. A kód módosítása nélkül mindezeket beállíthatjuk az adminisztrációs felületen.

Sablon lehetőségek

Nyissuk meg a sablon gyökérkönyvtárában lévő templateDetails.xml fájlt. A positions szakasz végéhez adjuk hozzá a következő sort:

<position>login</position>

Most magának a tulajdonságnak a paramétereit adjuk hozzá a FEATURES szakaszban. Keressük meg a következő sort a template-options.xml fájlban:

<fieldset name="features" label="FEATURES">

Közvetlenül e sor után szúrjuk be a következő kódot:

<fields name="login" type="chain" label="LOGIN">
    <field name="enabled" type="toggle" default="1" label="SHOW" />
    <field name="position" type="position" default="utility-c" label="POSITION" />
    <field name="text" type="text" default="Member Login" label="LOGIN_TEXT" class="text-medium" />
    <field name="logouttext" type="text" default="Logout" label="LOGOUT_TEXT" class="text-medium" />
</fields>

ez a kód állítja be a login tulajdonság paramétereit. Jelzi, hogy melyik modulpozícióban jelenik meg a hivatkozás/gomb, megmutatja, mi a hivatkozás szövege, ami itt a beviteli mezőben szerkeszthető.

6. lépés: CSS hozzáadása

Végül, tekintettel a kódolásra, adjunk stílust a modulnak. helyezzük a stílus definíciót a megfelelő fájlba. Ha LESS-t használunk, akkor a /less/template.css-be, ha csak CSS-t használonk, akkor a /css/template.css-be illesszük be a következő utasítást:

#rt-popuplogin { display: none; }

7. lépés: Az egész összerakása

Most az összes szükséges összetevő a helyén van. Készen állunk a login modul közzétételére. Menjünk a Bővítmények > Modulkezelőbe, és készítsünk egy új login modult, vagy szerkesszük a meglévőt. Állítsuk a pozíciót a z új 'login'-ra és rendeljük hozzá az összes menü oldalhoz.
Ezután lépjünk be a sablonkezelőbe (Bővítmények > Sablonkezelő) válasszuk ki a sablonunkat és lépjünk a Features (Szolgáltatások) fülre. E lap tetején jelenik meg a Login szolgáltatás. Módosítsuk a beállításait igény szerint, majd mentsük el. Frissítsük a frontenden és ellenőrizzük a megjelenést.