LeonardoCA\BootstrapExtension

LeonardoCA

LeonardoCA\BootstrapExtension

Pár tříd pro zjednodušení použití prvků Bootstrap from Twitter v šablonách i kódu

Preview verze: Github Demo

Flash Messages

vypisuje flash messages jako bootstrap alerts

// insert in your Base presenter and/or Base Control following code:
public function createComponentFlashMessages()
{
	return new \LeonardoCA\Bootstrap\Components\FlashMessagesControl;
}

// to remove old flash message while using ajax and no new flash message is to be displayed
protected function afterRender()
{
	if ($this->isAjax()) {
		$this->invalidateControl('flashMessages');
	}
}

// insert in your template:
{snippet flashMessages}{control flashMessages}{/snippet}

// generate Flash Messages using Bootstrap alert classes, but instead of "alert alert-success" just "success"
$this->flashMessage("Page was saved", 'success');

BootstrapMacros

zjednodušuje zápis label, badge, icon, alert

// include in your bootstrap.php or do it however you want
$configurator->onCompile[] = function ($configurator, $compiler) {
   $compiler->addExtension('bootstrap', new LeonardoCA\Bootstrap\BootstrapCompilerExtension);
};

// in templates
{bslabel success}...{/bslabel}
{bsbadge success}...{/bsbadge}
{bsalert info}...{/bsalert}
{bsicon thumbs-up}
{bsiconw fire}

LeonardoCA\Bootstrap\Html

rozšiřuje Nette\Utils\Html
zatím umí icon, label, badge, button, experimentálně link vygenerovaný jako button

\LeonardoCA\Bootstrap\Html::bsLabel('deleted', 'important')
\LeonardoCA\Bootstrap\Html::bsLinkMini('undelete it', $this->link('undelete!', array('id' => $id)), 'primary')

LeonardoCA\Bootstrap\Components\Alerts

control fungující podobně jako flash messages, ale zobrazuje alerts hned ve stránce a ne až po redirectu
text alertu může být i html, takže vyrenderuje správně i odkazy

public function createComponentAlerts()
{
	return new \LeonardoCA\Bootstrap\Components\Alerts;
}

public function render()
{
	$this['alerts']->add('Some information', 'info');
	$this['alerts']->add('Other information', 'success', TRUE);
}

// v template se zobrazí obě hlášky, druhá s křížkem pro zavření
{control alerts}

Postupně budu rozšiřovat podle toho co budu potřebovat. Podle zájmu můžu přidat do doplňků.

Editoval LeonardoCA (9. 9. 2012 18:04)

LeonardoCA

Přidána komponenta pro navList.

Kromě standartních prvků header, link, divider si může hodit možnost přidat si vlastní libovolný kontrol. Jen o nastylování css se pak musíte postarat sami.

příklad použití:

class SideMenu extends \LeonardoCA\Bootstrap\Components\NavList
{
    protected function configure(\Nette\ComponentModel\Container $container)
    {
        $this->addHeader('Administration');
        $this->addLink('View logs', $container->lazyLink('Admin:logs'));
        $this->addHeader('Local websites');
        $this->addLink('Manage local websites', $container->lazyLink('Admin:websitesList'));
        $this->addLink('Add local website', $container->lazyLink('Admin:websitesDetail'));
        $this->addDivider();
        $this->addControl('DomainSwitch');
    }

    protected function createComponentDomainSwitch() {
        return new DomainSwitch;
    }
}

// a v šabloně už jen
{control sideMenu}

LeonardoCA

Konečně trochu zajimavější update. LeonardoCA\Bootstrap\Html nově podporuje tvorbu Dropdowns.

Příklad použití:

// some user data used in example
$userRoleId = 1;
$roles = array(
                -1 => 'Blocked',
                1 => 'User',
                2 => 'Moderator',
                5 => 'Admin',
                6 => 'SuperAdmin'
);

$roleButtonClasses = array(
                -1 => 'inverse',
                1 => 'info',
                2 => 'success',
                5 => 'warning',
                6 => 'danger'
);


// create Dropdown
$userOptionsDropdown = Html::bsDropdownMenu();

foreach ($roles as $roleId => $name) {
    if ($roleId != $userRoleId)	{
        $userOptionsDropdown->addMenuItem($name,
                                          $this->lazyLink('UserRole',
                                          array('newRole' => $roleId)), true);
    }
}

$userOptionsDropdown
	->addDevider()
	->addMenuItem('Delete User', $this->lazyLink('Delete'), true);


// create button and add Dropdown to it
$userOptionsButton = Html::bsButton(
			'a',
			$roles[$userRoleId],
			'btn btn-'.$roleButtonClasses[$userRoleId],
			Html::bsIconw('user')
	)->addDropDown($userOptionsDropdown);

Výsledek

Vygenerovaný html kód:

Pro ladění jsem si vytvořil pomůcku pro formátování a výstup výsledného html kódu s využitím laděnky, Tidy, Twitter Bootstrap a google prettyPrint: dumpHtml

// to see result including html code
dumpHtml($userOptionsButton, false, 0, true);

Třetí parametr je pro nastavení Debugger::$maxDepth – pokud je 0 nezobrazí se nic pokud je vyšší, zobrazí se dump výsledný Html elementu.