protected function render($iconClasses)
{
$mode = $this->mode;
$page = new UI_HTML_PageFrame();
$page->addStylesheet('inc/bootstrap/bootstrap.min.css');
$page->addStylesheet('inc/fontawesome/font-awesome.min.css');
$page->addStylesheet('inc/style.css');
$page->addJavaScript('inc/jquery-1.10.2.min.js');
$page->addJavaScript('inc/bootstrap/bootstrap.min.js');
$page->addJavaScript('inc/script.js');
$page->addBody(require_once 'body.phpt');
print $page->build(array('class' => $this->mode));
}
// calculate left crop offset $offsetY = (int) floor(($image->getHeight() - 450) / 2); // calculate top crop offset $processor->crop($offsetX, $offsetY, 980, 450); // crop middle image part $copy = clone $image; // close image for results $processor = new \CeusMedia\Image\Processor($copy); // start processor on result image //$processor->enhance( -10, 10, 0.8, 50 ); // enhance image: preset "old film" //$processor->enhance( 10, -10, 1.25, 10 ); // enhance image: preset "person", $processor->enhance(10, -10, 1.25, 20); // enhance image: preset "nature", $body = ' <div class="container"> <h1 class="muted">CeusMedia Component Demo</h1> <h2>Image</h2> <p>Image Manipulation and Generation</p> <h3>Original <small class="muted">(scaled down and cropped)</small></h3> <img src="' . (string) $image . '"/><br/> <br/> <h3>Enhanced <small class="muted">(using CeusMedia\\Image\\Filter via CeusMedia\\Image\\Processor)</small></h3> <img src="' . (string) $copy . '"/><br/> </div> '; $page = new \UI_HTML_PageFrame(); #$page->addJavaScript( $pathCDN.'js/bootstrap.min.js' ); $page->addStylesheet($pathCDN . 'css/bootstrap.min.css'); //$page->addStylesheet( 'style.css' ); $page->addBody($body); print $page->build();
protected function render($iconClasses, $darkMode = FALSe)
{
$list = array();
foreach ($iconClasses as $item) {
$icon = UI_HTML_Tag::create('i', '', array('class' => 'fa fa-2x fa-' . $item . ($darkMode ? ' fa-inverse' : ''), 'title' => $item));
$list[] = UI_HTML_Tag::create('li', $icon, array('class' => 'icon-container', 'id' => 'icon-' . $item));
}
$list = UI_HTML_Tag::create('ul', $list, array('id' => 'icon-matrix', 'class' => 'unstyled'));
$style = '
body.dark {
background-color: rgba(0,0,0,1);
color: rgba(255,255,255,0.75);
}
#icon-matrix .icon-container {
float: left;
width: 48px;
height: 48px;
vertical-align: middle;
text-align: center;
margin: 3px;
}
.fa-2x {
line-height: 2em;
}
.fa-4x {
line-height: 1em;
}
';
$script = '
$(document).ready(function(){
$(".icon-container").bind("mouseenter", function(){
$(this).children("i").addClass("fa-4x");
}).bind("mouseleave", function(){
$(this).children("i").removeClass("fa-4x");
}).bind("click", function(){
var query = $(this).children("i").prop("title");
$(this).trigger("mouseleave");
$("#search").val(query).trigger("keyup");
});
$("#search").bind("keyup", function(){
var query = $(this).val();
$(".icon-container i").each(function(){
var matching = $(this).prop("title").match(query);
matching ? $(this).parent().show() : $(this).parent().hide();
});
}).focus();
});';
$body = '
<div class="container">
<h2>Font Awesome <span class="muted">Index</span></h2>
<div class="row-fluid">
<div class="span12">
<input type="search" id="search" placeholder="search"></input>
</div>
</div>
<div class="row-fluid">
<div class="span12">
' . $list . '
</div>
</div>
</div>';
$page = new UI_HTML_PageFrame();
$page->addStylesheet('/lib/cmStyles/bootstrap.min.css');
$page->addStylesheet('font-awesome.min.css');
$page->addJavaScript('/lib/cmScripts/jquery/1.10.2.min.js');
$page->addJavaScript('/lib/cmScripts/bootstrap.min.js');
$page->addHead(UI_HTML_Tag::create('style', $style));
$page->addHead(UI_HTML_Tag::create('script', $script));
$page->addBody($body);
print $page->build(array('class' => $darkMode ? 'dark' : 'bright'));
}