Skip to content

Instantly share code, notes, and snippets.

@Kedrigern
Last active April 7, 2016 19:25
Show Gist options
  • Save Kedrigern/4735415 to your computer and use it in GitHub Desktop.
Save Kedrigern/4735415 to your computer and use it in GitHub Desktop.
Modální okna vyplňována dynamicky AJAXem bez JS kodu :)
{**
* My Application layout template.
*
* @param string $basePath web base path
* @param string $robots tell robots how to index the content of a page (optional)
* @param array $flashes flash messages
*}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="robots" content="{$robots}" n:ifset="$robots">
<title>{block title|striptags|upper}Nette Application Skeleton{/block}</title>
<link rel="stylesheet" media="screen,projection,tv" href="{$basePath}/css/screen.css">
<link rel="stylesheet" media="print" href="{$basePath}/css/print.css">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="{$basePath}/js/nette.ajax.js"></script>
<script src="{$basePath}/js/main.js"></script>
{block head}{/block}
</head>
<body>
<script> document.body.className+=' js' </script>
{snippet flash}
<div n:foreach="$flashes as $flash" class="flash {$flash->type}">{$flash->message}</div>
{/snippet}
{include #content}
{block scripts}{/block}
</body>
</html>

Modální okna vyplňována dynamicky AJAXem téměř bez JS kodu - čili využívají signály a knihovnu nette.ajax.js.

##Instalace

  1. nainstalovat nette/sandbox, např. skrz Compozer:
composer create-project nette/sandbox modalniOkna

(poslední parametr je jméno složky v které se projekt vytvoří) 2. Nahraďte příslušné soubory ze sandboxu těmi odsud.

##TODO

  1. neajaxovou podobu
  2. více snippetů najednou (např. flashMessages)

##Problémy

  1. Nefungovalo to, když se parametr funkce handle pojmenoval $id.
{**
* My homepage:default layout template.
*
* @author: Ondřej Profant, 201
*
* @param string $basePath web base path
* @param string $robots tell robots how to index the content of a page (optional)
* @param array $flashes flash messages
* @param date $now rendering time
* @param array $ids ids in repository
*}
{block content}
<script>
function myShow()
{
$('#myModal').modal('show'); // z dokumentace bootstrapu
}
</script>
<div class=container>
<h1>Ukázka modálních oken</h1>
<p><strong>Čas vykreslení: {$now|date:'%H:%M:%S'}</strong></p>
<p>Dynamicky (foreach) generovaná tlačítka, která otevírají stejné modální okno, které se překreslí při kliknutí (handle a snippet).</p>
<p>Pozor, pokud je <code>public function handleViewItem($id) {}</code>, tak to nefunguje, neb název parametru musí být jiný než <code>$id</code> (nevím proč).</p>
{foreach $ids as $id}
<a n:href="zobraz! $id" class="ajax btn btn-large" onclick="myShow()">Klikni id: {$id}</a>
{/foreach}
{* modální okno *}
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel2">Jedeme!</h3>
</div>
<div class="modal-body">
{snippet zobraz}
{**
* @param string $var
*}
<p>Čas vykreslení snippetu: {$now|date:'%H:%M:%S'}</p>
<p n:if="isset($var)">ID: {$var}</p>
{/snippet}
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
{/block}
<?php
/**
* @author: Ondřej Profant, 2013
*
* Homepage presenter
*/
class HomepagePresenter extends BasePresenter
{
/**
* @var array
*/
private $rep = array(
1 => "jedna",
2 => "dva",
3 => "tri",
4 => "čtyři"
);
public function renderDefault()
{
$this->template->now = date(DATE_RFC1036); // aktuální čas pro ukázku AJAX
$this->template->ids = array(1, 2, 3, 4); // idčka kterými budeme iterovat
}
/**
* @param int $itemId
*/
public function handleZobraz( $itemId )
{
$this->template->var = $this->rep[$itemId]; // nová proměná, např. vytažená z DB
if( $this->isAjax() ) {
$this->invalidateControl('zobraz'); // invalidace snippetu
} else {
/** TODO Jak vypsat modal bez AJAXu? */
}
}
}
/**
* @author: Ondřej Profant, 2013
*/
$(function(){
// spuštění knihovny: nette.ajax.js
$.nette.init();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment