Gists
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;
}
On gists
HTML v IE 8, klasické i vlastní značky jako elementy
•
JavaScript
fn.js #
<!--[if lte IE 8]>
<script>
var znacky = "article aside audio bb canvas datagrid datalist details dialog eventsource figure footer header hgroup mark menu meter nav output progress section time video";
znacky.replace(/\w+/g, function(znacka){document.createElement(znacka)});
</script>
<![endif]-->
On gists
Generování cyklů z pole / lists
•
SCSS
SassMeister-output.css #
/*! 1 zpusob pres lists a funkci nth */
.success {
background-image: url(../images/success.png);
}
.error {
background-image: url(../images/error.png);
}
/* 2 zpusob pomoci tzv. multiple assignment */
.puma-icon {
background-image: url("/images/puma.png");
}
.sea-slug-icon {
background-image: url("/images/sea-slug.png");
}
.egret-icon {
background-image: url("/images/egret.png");
}
On gists
Placeholder mixin
•
SCSS
placeholder-mixin.scss #
$placeholders: '-webkit-input-placeholder',
'-moz-placeholder',
'-ms-input-placeholder';
@mixin placeholder {
@each $placeholder in $placeholders {
@if $placeholder == "-webkit-input-placeholder" {
&::#{$placeholder} {
@content;
}
}
@else if $placeholder == "-moz-placeholder" {
// FF 18-
&:#{$placeholder} {
@content;
}
// FF 19+
&::#{$placeholder} {
@content;
}
}
@else {
&:#{$placeholder} {
@content;
}
}
}
}