Gists
On gists
Nette rendering - containers (form)
•
Nette-Forms
form.latte #
{form ratingForm}
<div class="rating-form">
{foreach $form['container']->components as $name => $container}
<div class="double-line">
<div class="headline">
{$form["container-$name-question"]->caption}
</div>
<div class="inputs">
{* <textarea placeholder="Komentář" class="common autosize" rows="1"></textarea> *}
{input container-$name-question class => "common autosize", rows => "1"}
<!-- <input type="text" class="common" placeholder="Komentář" /> -->
<div class="radio-group">
<label class="fakeradio">
{input container-$name-question_checkbox_yes}
<span class="fakeradio">
<span></span>
</span>
<span class="text">{$form["container-$name-question_checkbox_yes"]->caption}</span>
</label>
<label class="fakeradio">
{input container-$name-question_checkbox_no}
<span class="fakeradio">
<span></span>
</span>
<span class="text">{$form["container-$name-question_checkbox_no"]->caption}</span>
</label>
</div>
</div>
</div>
{/foreach}
<div>
<a class="cart-button arrow-right blue formSubmit" href=""><span class="inner">{_}Odeslat{/_}</span></a>
</div>
</div>
{input submit class => "nod"}
{/form}
On gists
js-object-examples.js
•
JavaScript-OOP
jQuery-plugins
js-object-hamburger.js #
/* Mobile version, MENU
---------------------------------------------------------------------------------------------------- */
var hamburger = {
init: function(el) {
this.elements = {};
this.elements.el = $(el);
this.elements.header = $('#header-mobile');
this.elements.closeButton = $('.hamburger-close');
},
open: function(e) {
this.elements.header.fadeIn();
e.preventDefault();
},
close: function(e) {
this.elements.header.fadeOut();
e.preventDefault();
},
getElement: function(el)
{
return this.elements[el];
}
};
// init
hamburger.init('.hamburger');
// open
hamburger.getElement('el').click(function(e){
hamburger.open(e);
$('#bg-overlay').show();
});
// close
hamburger.getElement('closeButton').click(function(e){
hamburger.close(e);
$('#bg-overlay').hide();
});
$(document).click(function(e){
var $hamburgerLink = $('a.hamburger .icon-11');
var $mobileNav = $('.navigation--mobile');
if ($hamburgerLink.is(e.target))
{
// nic
}
else if (!$mobileNav.is(e.target)
&& $mobileNav.has(e.target).length === 0)
{
if ($('#bg-overlay').is(':visible') && $('#header-mobile').is(':visible'))
{
$('#bg-overlay').hide();
hamburger.close(e);
}
}
});
On gists
gulpfile.js
•
JavaScript
gulpfile.js #
var gulp = require('gulp');
var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var neon = require('neon-js');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var fs = require('fs');
var livereload = require('gulp-livereload');
var gulpFilter = require('gulp-filter');
var gulpif = require('gulp-if');
var autoprefixer = require('gulp-autoprefixer');
var runSequence = require('run-sequence');
var gzip = require('gulp-gzip');
var tar = require('gulp-tar');
var path = require('path');
var addsrc = require('gulp-add-src');
var shell = require('gulp-shell');
var options = {
autoprefix: false,
sourcemaps: true,
compress: false
};
var files = ['app/**', 'temp/.*', 'vendor/**', 'www/**', 'www/webtemp/.*', 'composer.*', 'console', 'update',
'!dist', '!www/vendor/**', '!app/config/config.local.neon', '!www/webtemp/css*', '!www/webtemp/js*', '!**/tests/**',
'!www/images/**', 'www/images/.*',
'!www/assets/**/*.less', '!www/dist/**/*.map', '!vendor/*/*/vendor/**', '!vendor/*/*/tests/**', '!vendor/*/*/Tests/**',
'!vendor/videlalvaro/php-amqplib/PhpAmqpLib/Tests/**', '!vendor/symfony/*/*/*/*/Tests/**', '!vendor/**/composer.lock',
'!vendor/*/*/docs/**'
];
var buildLess = function (module) {
return gulp.src('www/assets/' + module + '/style/main.less')
.pipe(gulpif(options.sourcemaps, sourcemaps.init()))
.pipe(less({
relativeUrls: true,
compress: options.compress,
rootpath: '/assets/' + module + '/style/'
}))
.pipe(rename(function (path) {
path.basename = "style";
}))
.pipe(gulpif(options.sourcemaps, sourcemaps.write('./', {
includeContent: true,
sourceRoot: "/assets/" + module + "/style/"
})))
.pipe(gulpif(options.autoprefix, autoprefixer({cascade: false})))
.pipe(gulp.dest('./www/dist/' + module))
.pipe(gulpFilter(['*.css']))
.pipe(livereload());
};
gulp.task('less:front', function () {
return buildLess('front');
});
gulp.task('less:admin', function () {
return buildLess('admin');
});
gulp.task('less', ['less:front', 'less:admin']);
var buildJs = function (module) {
var content = fs.readFileSync("./www/assets/" + module + "/js.neon", 'utf8');
var data = neon.decode(content);
return gulp.src(data.values(), {base: 'www/'})
.pipe(sourcemaps.init())
.pipe(uglify({compress: options.compress, mangle: options.compress}))
.pipe(concat("output.js"))
.pipe(sourcemaps.write('./', {
sourceRoot: "/"
}))
.pipe(gulp.dest('www/dist/' + module))
.pipe(livereload());
};
gulp.task('js:admin', function () {
return buildJs('admin');
});
gulp.task('js:front', function () {
return buildJs('front');
});
gulp.task('js', ['js:front', 'js:admin']);
gulp.task('watch', function () {
livereload.listen();
gulp.watch('www/assets/front/**/*.less', ['less:front']);
gulp.watch(['www/**/*.less', '!www/assets/front/**/*'], ['less']);
gulp.watch(['www/assets/front/**/*.js'], ['js:front']);
gulp.watch(['www/**/*.js', '!www/dist/**/*.js', '!www/webtemp/**/*.js', '!www/assets/front/**/*'], ['uglify']);
});
gulp.task('compress', function () {
return gulp.src(files, {base: '.'})
.pipe(addsrc('www/vendor/font-awesome/fonts/**', {base: '.'}))
.pipe(tar('update.tar'))
.pipe(gzip())
.pipe(gulp.dest('./dist'));
});
gulp.task('optimize', function () {
return gulp.src(['composer.json'])
.pipe(shell('composer dump-autoload -o'));
});
gulp.task('build', function () {
options.compress = true;
options.autoprefix = true;
options.sourcemaps = false;
runSequence(
['js', 'less', 'optimize'],
'compress'
);
});
On gists
Bootstrap renderer
•
Nette
nette-bs-renderer.php #
<?php
/**
* Nette Forms & Bootstap 3 rendering example.
*/
if (@!include __DIR__ . '/../vendor/autoload.php') {
die('Install packages using `composer update --dev`');
}
use Nette\Forms\Form,
Nette\Forms\Controls,
Tracy\Debugger,
Tracy\Dumper;
Debugger::enable();
$form = new Form;
$form->addGroup('Personal data');
$form->addText('name', 'Your name')
->setRequired('Enter your name');
$form->addRadioList('gender', 'Your gender', array(
'male', 'female',
));
$form->addCheckboxList('colors', 'Favorite colors:', array(
'red', 'green', 'blue',
));
$form->addSelect('country', 'Country', array(
'Buranda', 'Qumran', 'Saint Georges Island',
));
$form->addCheckbox('send', 'Ship to address');
$form->addGroup('Your account');
$form->addPassword('password', 'Choose password');
$form->addUpload('avatar', 'Picture');
$form->addTextArea('note', 'Comment');
$form->addGroup();
$form->addSubmit('submit', 'Send');
$form->addSubmit('cancel', 'Cancel');
if ($form->isSuccess()) {
echo '<h2>Form was submitted and successfully validated</h2>';
Dumper::dump($form->getValues());
exit;
}
// setup form rendering
$renderer = $form->getRenderer();
$renderer->wrappers['controls']['container'] = NULL;
$renderer->wrappers['pair']['container'] = 'div class=form-group';
$renderer->wrappers['pair']['.error'] = 'has-error';
$renderer->wrappers['control']['container'] = 'div class=col-sm-9';
$renderer->wrappers['label']['container'] = 'div class="col-sm-3 control-label"';
$renderer->wrappers['control']['description'] = 'span class=help-block';
$renderer->wrappers['control']['errorcontainer'] = 'span class=help-block';
// make form and controls compatible with Twitter Bootstrap
$form->getElementPrototype()->class('form-horizontal');
foreach ($form->getControls() as $control) {
if ($control instanceof Controls\Button) {
$control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn btn-default');
$usedPrimary = TRUE;
} elseif ($control instanceof Controls\TextBase || $control instanceof Controls\SelectBox || $control instanceof Controls\MultiSelectBox) {
$control->getControlPrototype()->addClass('form-control');
} elseif ($control instanceof Controls\Checkbox || $control instanceof Controls\CheckboxList || $control instanceof Controls\RadioList) {
$control->getSeparatorPrototype()->setName('div')->addClass($control->getControlPrototype()->type);
}
}
?>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Nette Forms & Bootstrap 3 rendering example</title>
<link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<style>
form {
max-width: 50em;
}
</style>
<div class="container">
<div class="page-header">
<h1>Nette Forms & Bootstrap 3 rendering example</h1>
</div>
<?php echo $form ?>
</div>
On gists
form.latte
•
Nette-Forms
form.latte #
<form n:name=$form class="form">
<div class="row">
<div class="col-md-12">
<ul class=error n:if="$form->ownErrors">
<li n:foreach="$form->ownErrors as $error">{$error}</li>
</ul>
</div>
</div>
<div class="row">
{foreach $form->controls as $input}
{* get_class($input) *}
<div n:if="$input instanceof Nette\Forms\Controls\Checkbox" class="form-group {$class} {$input->required ? required}">
<label n:if="$input->caption" n:name="$input->name">
<input type="checkbox" n:name="$input">
{$input->caption}
</label>
<span class=error n:ifcontent>{$input->error}</span>
</div>
<div n:if="$input instanceof Nette\Forms\Controls\TextInput" class="form-group {$class} {$input->required ? required}">
<label n:if="$input->label" n:name="$input" class="control-label">{$input->caption}</label>
<input n:if="$input instanceof Nette\Forms\Controls\TextInput" n:name="$input" class="form-control">
<span class=error n:ifcontent>{$input->error}</span>
</div>
{/foreach}
</div>
<div class="row">
{foreach $form->controls as $input}
<div n:if="$input instanceof Nette\Forms\Controls\SubmitButton" class="col-md-3">
<input n:name="$input" class="btn btn-success">
</div>
{/foreach}
</div>
</form>
On gists
HTML seznam do selectboxu (např. pro responsivní navigaci)
•
jQuery
ordered-list-2-selectbox.js #
$(function(){
var select = $("select");
$("nav a").each(function(){
var $this = $(this);
var text = $this.text();
var level = $this.parents("ul").length;
var indent = '';
if (level > 1)
{
indent = str_repeat("\u2013", level);
}
select.append('<option>'+indent + text+'</option>');
});
});
function str_repeat (input, multiplier) {
// http://kevin.vanzonneveld.net
// + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
// + improved by: Ian Carter (http://euona.com/)
// * example 1: str_repeat('-=', 10);
// * returns 1: '-=-=-=-=-=-=-=-=-=-='
var y = '';
while (true) {
if (multiplier & 1) {
y += input;
}
multiplier >>= 1;
if (multiplier) {
input += input;
}
else {
break;
}
}
return y;
}