add jade files and task

This commit is contained in:
t1m0n 2015-11-20 11:43:24 +03:00
parent 9f1c522138
commit 20427d0c52
12 changed files with 135 additions and 68 deletions

View File

@ -6,7 +6,7 @@ gulp.task('css', require('./tasks/css'));
gulp.task('js', require('./tasks/js'));
gulp.task('i18n', require('./tasks/i18n'));
gulp.task('cssPage', require('./tasks/cssPage'));
gulp.task('jade', require('./tasks/jade'));
gulp.task('watch', function () {
@ -23,6 +23,10 @@ gulp.task('watch', function () {
gulp.watch('page/sass/*.scss', ['cssPage']).on('change', function (file) {
livereload.changed(file)
});
gulp.watch('page/jade/**/*.jade', ['jade']).on('change', function (file) {
livereload.changed(file)
});
});

48
index-ru.html Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<title>Air Datepicker</title>
<meta charset="UTF-8">
<link href="page/css/style.css" rel="stylesheet" type="text/css">
<link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="dist/js/datepicker.min.js"></script>
<script src="dist/js/i18n/datepicker.en.js"></script>
</head>
<body>
<div class="wrapper">
<main role="main" class="main">
<div class="container">
<input type="text" name="start">
<input type="text" name="end">
<script>
var $start = $('[name="start"]'),
$end = $('[name="end"]').hide();
$start.datepicker({
inline: true,
onSelect: function (format, date) {
$end.data('datepicker')
.update('minDate', date)
}
}).data('datepicker').show()
$end.datepicker({
position: 'right top',
onSelect: function (format, date) {
$start.data('datepicker')
.update('maxDate', date)
}
})
$('button').on('click', function () {
$start.data('datepicker').update({
language: 'en'
})
});
</script>
</div>
</main>
</div>
</body>
</html>

View File

@ -1,67 +0,0 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Datepicker</title>
<link rel="stylesheet" href="page/css/style.css"/>
<link rel="stylesheet" href="dist/css/datepicker.css"/>
<script type="text/javascript" src="vendor/jquery/dist/jquery.min.js"></script>
</head>
<body>
<div class="contents">
<article>
<div class="calendar"></div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<input type="text" name="start" placeholder="Start"/>
<input type="text" name="end" placeholder="End"/>
<br/>
<br/>
<button>Update</button>
</article>
</div>
<script type="text/javascript" src="dist/js/datepicker.js"></script>
<script type="text/javascript" src="dist/js/i18n/datepicker.en.js"></script>
<script type="text/javascript">
var $start = $('[name="start"]'),
$end = $('[name="end"]').hide();
$start.datepicker({
inline: true,
onSelect: function (format, date) {
$end.data('datepicker')
.update('minDate', date)
}
}).data('datepicker').show()
$end.datepicker({
position: 'right top',
onSelect: function (format, date) {
$start.data('datepicker')
.update('maxDate', date)
}
})
$('button').on('click', function () {
$start.data('datepicker').update({
language: 'en'
})
});
</script>
</body>
</html>

View File

@ -6,6 +6,7 @@
"gulp": "^3.9.0",
"gulp-clone": "^1.0.0",
"gulp-concat": "^2.6.0",
"gulp-jade": "^1.1.0",
"gulp-livereload": "^3.8.0",
"gulp-minify-css": "^1.2.1",
"gulp-postcss": "^6.0.1",

22
page/jade/layout.jade Normal file
View File

@ -0,0 +1,22 @@
include mixins/example
include mixins/example-content
include mixins/example-code
include mixins/example-inline
include mixins/param
doctype html
html
head
title Air Datepicker
meta(charset='UTF-8')
link(href='page/css/style.css', rel='stylesheet', type='text/css')
link(href='dist/css/datepicker.min.css', rel='stylesheet', type='text/css')
script(src='vendor/jquery/dist/jquery.min.js')
script(src='dist/js/datepicker.min.js')
script(src='dist/js/i18n/datepicker.en.js')
body
div.wrapper
main.main(role='main')
.container
block content

View File

@ -0,0 +1,4 @@
mixin example-code(cl)
pre.example-code
code(class=cl)
block

View File

@ -0,0 +1,3 @@
mixin example-content()
.example-content
block

View File

@ -0,0 +1,4 @@
mixin example-inline(content, type)
span.example-inline
code(class= type).
!{content}

View File

@ -0,0 +1,4 @@
mixin example()
.example
.example--label Пример
block

View File

@ -0,0 +1,5 @@
mixin param(content, type)
span.param
strong= content
if type
i= type

View File

@ -0,0 +1,31 @@
extends ../layout
block content
input(type='text', name='start')
input(type='text', name='end')
script.
var $start = $('[name="start"]'),
$end = $('[name="end"]').hide();
$start.datepicker({
inline: true,
onSelect: function (format, date) {
$end.data('datepicker')
.update('minDate', date)
}
}).data('datepicker').show()
$end.datepicker({
position: 'right top',
onSelect: function (format, date) {
$start.data('datepicker')
.update('maxDate', date)
}
})
$('button').on('click', function () {
$start.data('datepicker').update({
language: 'en'
})
});

8
tasks/jade.js Normal file
View File

@ -0,0 +1,8 @@
var gulp = require('gulp'),
jade = require('gulp-jade');
module.exports = function () {
gulp.src('page/jade/pages/*.jade')
.pipe(jade({pretty: true}))
.pipe(gulp.dest('./'))
};