@ -0,0 +1,56 @@ |
||||
#How to use |
||||
|
||||
Clone this repo and then in command line type: |
||||
|
||||
* `npm install` - install all dependencies |
||||
* `gulp` - run dev-server and let magic happen, or |
||||
* `gulp build` - build project from sources |
||||
|
||||
-- |
||||
|
||||
## List of Gulp tasks |
||||
|
||||
To run separate task type in command line `gulp [task_name]`. |
||||
Almost all tasks also have watch mode - `gulp [task_name]:watch`, but you don't need to use it directly. |
||||
|
||||
### Main tasks |
||||
Task name | Description |
||||
:------------------|:---------------------------------- |
||||
`default` | will start all tasks required by project in dev mode: initial build, watch files, run server with livereload |
||||
`build:dev` | build dev version of project (without code optimizations) |
||||
`build` | build production-ready project (with code optimizations) |
||||
|
||||
### Other tasks |
||||
Task name | Description |
||||
:------------------|:---------------------------------- |
||||
`sass` | compile .sass/.scss to .css. We also use [postcss](https://github.com/postcss/postcss) for [autoprefixer](https://github.com/postcss/autoprefixer), so feel free to include other awesome postcss [plugins](https://github.com/postcss/postcss#plugins) when needed |
||||
`webpack` | compile .js sources into bundle file |
||||
`copy` | copy common files from `./src` path to `./dist` path |
||||
`swig` | compile [swig](http://paularmstrong.github.io/swig/) templates |
||||
`nunjucks` | compile Mozilla's awesome [nunjucks](https://mozilla.github.io/nunjucks/) templates |
||||
`pug` | compile [pug](http://pug-lang.com/) templates |
||||
`svgo` | optimize svg files with [svgo](https://github.com/svg/svgo) |
||||
`iconfont` | compile iconfonts from svg sources |
||||
`sprite:svg` | create svg symbol sprites ([css-tricks](https://css-tricks.com/svg-sprites-use-better-icon-fonts/)) |
||||
`sprite:png` | create png sprites |
||||
`server` | run dev-server powered by [BrowserSync](https://www.browsersync.io/) |
||||
`clean` | remove `./dist` folder |
||||
`index-page` | create index file with links to all project pages |
||||
|
||||
_This is a full list of tasks, that we use in our projects, but not all of them should be available in current project. For example, we only use one template engine out of these three [`pug`, `nunjucks`, `swig`]. All available tasks are placed in a folder `./gulp/tasks` as separate *.js files. Usually, file name = task name._ |
||||
|
||||
|
||||
## Flags |
||||
|
||||
We have several useful flags. |
||||
|
||||
* `gulp --open` or `gulp server --open` - run dev server and then open preview in browser |
||||
* `gulp --tunnel=[name]` or `gulp server --tunnel [name]` - runs dev server and allows you to easily share a web service on your local development machine (powered by [localtunnel.me](https://localtunnel.me/)). Your local site will be available at `[name].localtunnel.me`. |
||||
* `gulp [task_name] --prod` or `gulp [task_name] --production` - run task in production mode. Some of the tasks (like, sass or js compilation) have additional settings for production mode (such as code minification), so with this flag you can force production mode. `gulp build` uses this mode by default. |
||||
|
||||
##Other |
||||
You can also use [npm scripts](https://docs.npmjs.com/misc/scripts): |
||||
|
||||
* `npm run ghpages` to push only `./dist` folder to **gh-pages** branch on github (very useful for previews). |
||||
* `npm run start` - same as `gulp default`. |
||||
* `npm run build` - same as `gulp build`. |
||||
@ -0,0 +1,59 @@ |
||||
var util = require('gulp-util'); |
||||
|
||||
var production = util.env.production || util.env.prod || false; |
||||
var destPath = 'build'; |
||||
|
||||
var config = { |
||||
env : 'development', |
||||
production: production, |
||||
|
||||
src: { |
||||
root : 'src', |
||||
templates : 'src/templates', |
||||
templatesData: 'src/templates/data', |
||||
sass : 'src/sass', |
||||
// path for sass files that will be generated automatically via some of tasks
|
||||
sassGen : 'src/sass/generated', |
||||
js : 'src/js', |
||||
img : 'src/img', |
||||
svg : 'src/img/svg', |
||||
icons : 'src/icons', |
||||
// path to png sources for sprite:png task
|
||||
iconsPng : 'src/icons', |
||||
// path to svg sources for sprite:svg task
|
||||
iconsSvg : 'src/icons', |
||||
// path to svg sources for iconfont task
|
||||
iconsFont : 'src/icons', |
||||
fonts : 'src/fonts', |
||||
lib : 'src/lib' |
||||
}, |
||||
dest: { |
||||
root : destPath, |
||||
html : destPath, |
||||
css : destPath + '/css', |
||||
js : destPath + '/js', |
||||
img : destPath + '/img', |
||||
fonts: destPath + '/css/fonts', |
||||
lib : destPath + '/lib' |
||||
}, |
||||
|
||||
setEnv: function(env) { |
||||
if (typeof env !== 'string') return; |
||||
this.env = env; |
||||
this.production = env === 'production'; |
||||
process.env.NODE_ENV = env; |
||||
}, |
||||
|
||||
logEnv: function() { |
||||
util.log( |
||||
'Environment:', |
||||
util.colors.white.bgRed(' ' + process.env.NODE_ENV + ' ') |
||||
); |
||||
}, |
||||
|
||||
errorHandler: require('./util/handle-errors') |
||||
}; |
||||
|
||||
config.setEnv(production ? 'production' : 'development'); |
||||
|
||||
module.exports = config; |
||||
@ -0,0 +1,28 @@ |
||||
var gulp = require('gulp'); |
||||
var runSequence = require('run-sequence'); |
||||
var config = require('../config'); |
||||
|
||||
function build(cb) { |
||||
runSequence( |
||||
'clean', |
||||
'sprite:svg', |
||||
'svgo', |
||||
'sass', |
||||
'pug', |
||||
'js', |
||||
'copy', |
||||
cb |
||||
); |
||||
} |
||||
|
||||
gulp.task('build', function(cb) { |
||||
config.setEnv('production'); |
||||
config.logEnv(); |
||||
build(cb); |
||||
}); |
||||
|
||||
gulp.task('build:dev', function(cb) { |
||||
config.setEnv('development'); |
||||
config.logEnv(); |
||||
build(cb); |
||||
}); |
||||
@ -0,0 +1,12 @@ |
||||
var gulp = require('gulp'); |
||||
var del = require('del'); |
||||
var util = require('gulp-util'); |
||||
var config = require('../config'); |
||||
|
||||
gulp.task('clean', function(cb) { |
||||
return del([ |
||||
config.dest.root |
||||
]).then(function(paths) { |
||||
util.log('Deleted:', util.colors.magenta(paths.join('\n'))); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,39 @@ |
||||
var gulp = require('gulp'); |
||||
var config = require('../config.js'); |
||||
|
||||
gulp.task('copy:fonts', function() { |
||||
return gulp |
||||
.src(config.src.fonts + '/*.{ttf,eot,woff,woff2}') |
||||
.pipe(gulp.dest(config.dest.fonts)); |
||||
}); |
||||
|
||||
gulp.task('copy:lib', function() { |
||||
return gulp |
||||
.src(config.src.lib + '/**/*.*') |
||||
.pipe(gulp.dest(config.dest.lib)); |
||||
}); |
||||
|
||||
gulp.task('copy:rootfiles', function() { |
||||
return gulp |
||||
.src(config.src.root + '/*.*') |
||||
.pipe(gulp.dest(config.dest.root)); |
||||
}); |
||||
|
||||
gulp.task('copy:img', function() { |
||||
return gulp |
||||
.src([ |
||||
config.src.img + '/**/*.{jpg,png,jpeg,svg,gif}', |
||||
'!' + config.src.img + '/svgo/**/*.*' |
||||
]) |
||||
.pipe(gulp.dest(config.dest.img)); |
||||
}); |
||||
|
||||
gulp.task('copy', [ |
||||
'copy:img', |
||||
// 'copy:rootfiles',
|
||||
// 'copy:lib',
|
||||
'copy:fonts' |
||||
]); |
||||
gulp.task('copy:watch', function() { |
||||
gulp.watch(config.src.img+'/*', ['copy']); |
||||
}); |
||||
@ -0,0 +1,12 @@ |
||||
var gulp = require('gulp'); |
||||
var runSequence = require('run-sequence'); |
||||
var config = require('../config'); |
||||
|
||||
gulp.task('default', function(cb) { |
||||
runSequence( |
||||
'build:dev', |
||||
'watch', |
||||
'server', |
||||
cb |
||||
); |
||||
}); |
||||
@ -0,0 +1,35 @@ |
||||
<html> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>INDEX</title> |
||||
<style> |
||||
body { |
||||
color: #333; |
||||
margin: 0; |
||||
padding: 40px; |
||||
font-family: PT Mono, monospace, sans-serif;; |
||||
} |
||||
h1 { |
||||
font-family: inherit; |
||||
} |
||||
ol { |
||||
font-size: 20px; |
||||
line-height: 1.6; |
||||
} |
||||
a { |
||||
color: inherit; |
||||
} |
||||
a:hover { |
||||
color: red; |
||||
} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<h1>Pages:</h1> |
||||
<ol><% _.each(pages, function(page) { %> |
||||
<li> |
||||
<a href="<%= page %>"><%= _.split(page, '.', 1) %></a> |
||||
</li> |
||||
<% }) %></ol> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,26 @@ |
||||
var gulp = require('gulp'); |
||||
var consolidate = require('gulp-consolidate'); |
||||
var fs = require('fs'); |
||||
var path = require('path'); |
||||
var config = require('../../config'); |
||||
var allowExt = ['.html', '.pug']; |
||||
|
||||
gulp.task('index-page', function() { |
||||
var fullList = fs.readdirSync(config.src.templates); |
||||
var pages = fullList.reduce(function(acc, val) { |
||||
var parsed = path.parse(val); |
||||
var name = parsed.name; |
||||
var ext = parsed.ext; |
||||
if (~allowExt.indexOf(ext)) { |
||||
return acc.concat(name + '.html'); |
||||
} |
||||
return acc; |
||||
}, []); |
||||
|
||||
return gulp |
||||
.src(__dirname + '/__index.html') |
||||
.pipe(consolidate('lodash', { |
||||
pages: pages |
||||
})) |
||||
.pipe(gulp.dest(config.src.root)); |
||||
}); |
||||
@ -0,0 +1,22 @@ |
||||
var gulp = require('gulp'); |
||||
var include = require("gulp-include"); |
||||
// var uglify = require('gulp-uglify');
|
||||
var config = require('../config'); |
||||
var browserSync = require('browser-sync'); |
||||
var babel = require('gulp-babel'); |
||||
reload = browserSync.reload; |
||||
|
||||
|
||||
gulp.task('js', function () { |
||||
gulp.src(config.src.js+'/**/*.js') |
||||
.pipe(include()) |
||||
// .on('error', function(){notify("Javascript include error");})
|
||||
//.pipe(uglify())
|
||||
.pipe(babel()) |
||||
.pipe(gulp.dest(config.dest.js+'/')) |
||||
.pipe(reload({stream: true})); |
||||
}); |
||||
|
||||
gulp.task('js:watch', function() { |
||||
gulp.watch(config.src.js+'/*', ['js']); |
||||
}); |
||||
@ -0,0 +1,38 @@ |
||||
var gulp = require('gulp'); |
||||
var pug = require('gulp-pug'); |
||||
var plumber = require('gulp-plumber'); |
||||
var changed = require('gulp-changed'); |
||||
var gulpif = require('gulp-if'); |
||||
var frontMatter = require('gulp-front-matter'); |
||||
var prettify = require('gulp-prettify'); |
||||
var config = require('../config'); |
||||
|
||||
function renderHtml(onlyChanged) { |
||||
return gulp |
||||
.src([config.src.templates + '/[^_]*.pug']) |
||||
.pipe(plumber({ errorHandler: config.errorHandler })) |
||||
.pipe(gulpif(onlyChanged, changed(config.dest.html, { extension: '.html' }))) |
||||
.pipe(frontMatter({ property: 'data' })) |
||||
.pipe(pug()) |
||||
.pipe(prettify({ |
||||
indent_size: 2, |
||||
wrap_attributes: 'auto', // 'force'
|
||||
preserve_newlines: true, |
||||
// unformatted: [],
|
||||
end_with_newline: true |
||||
})) |
||||
.pipe(gulp.dest(config.dest.html)); |
||||
} |
||||
|
||||
gulp.task('pug', function() { |
||||
return renderHtml(); |
||||
}); |
||||
|
||||
gulp.task('pug:changed', function() { |
||||
return renderHtml(true); |
||||
}); |
||||
|
||||
gulp.task('pug:watch', function() { |
||||
gulp.watch([config.src.templates + '/**/_*.pug'], ['pug']); |
||||
gulp.watch([config.src.templates + '/**/[^_]*.pug'], ['pug:changed']); |
||||
}); |
||||
@ -0,0 +1,60 @@ |
||||
var gulp = require('gulp'); |
||||
var sass = require('gulp-sass'); |
||||
var sourcemaps = require('gulp-sourcemaps'); |
||||
var postcss = require('gulp-postcss'); |
||||
var autoprefixer = require('autoprefixer'); |
||||
var mqpacker = require('css-mqpacker'); |
||||
var config = require('../config'); |
||||
|
||||
var processors = [ |
||||
autoprefixer({ |
||||
browsers: ['last 4 versions'], |
||||
cascade: false |
||||
}), |
||||
mqpacker({ |
||||
sort: sortMediaQueries |
||||
}) |
||||
]; |
||||
|
||||
gulp.task('sass', function() { |
||||
return gulp |
||||
.src(config.src.sass + '/*.{sass,scss}') |
||||
.pipe(sourcemaps.init()) |
||||
.pipe(sass({ |
||||
outputStyle: config.production ? 'compact' : 'expanded', // nested, expanded, compact, compressed
|
||||
precision: 5 |
||||
})) |
||||
.on('error', config.errorHandler) |
||||
.pipe(postcss(processors)) |
||||
.pipe(sourcemaps.write('./')) |
||||
.pipe(gulp.dest(config.dest.css)); |
||||
}); |
||||
|
||||
gulp.task('sass:watch', function() { |
||||
gulp.watch(config.src.sass + '/**/*.{sass,scss}', ['sass']); |
||||
}); |
||||
|
||||
function isMax(mq) { |
||||
return /max-width/.test(mq); |
||||
} |
||||
|
||||
function isMin(mq) { |
||||
return /min-width/.test(mq); |
||||
} |
||||
|
||||
function sortMediaQueries(a, b) { |
||||
A = a.replace(/\D/g, ''); |
||||
B = b.replace(/\D/g, ''); |
||||
|
||||
if (isMax(a) && isMax(b)) { |
||||
return B - A; |
||||
} else if (isMin(a) && isMin(b)) { |
||||
return A - B; |
||||
} else if (isMax(a) && isMin(b)) { |
||||
return 1; |
||||
} else if (isMin(a) && isMax(b)) { |
||||
return -1; |
||||
} |
||||
|
||||
return 1; |
||||
} |
||||
@ -0,0 +1,35 @@ |
||||
var gulp = require('gulp'); |
||||
var server = require('browser-sync').create(); |
||||
var util = require('gulp-util'); |
||||
var config = require('../config'); |
||||
|
||||
// in CL 'gulp server --open' to open current project in browser
|
||||
// in CL 'gulp server --tunnel siteName' to make project available over http://siteName.localtunnel.me
|
||||
|
||||
gulp.task('server', function() { |
||||
server.init({ |
||||
server: { |
||||
baseDir: !config.production ? [config.dest.root, config.src.root] : config.dest.root, |
||||
directory: false, |
||||
serveStaticOptions: { |
||||
extensions: ['html'] |
||||
} |
||||
}, |
||||
files: [ |
||||
config.dest.html + '/*.html', |
||||
config.dest.css + '/*.css', |
||||
config.dest.img + '/**/*' |
||||
], |
||||
port: util.env.port || 3000, |
||||
logLevel: 'info', // 'debug', 'info', 'silent', 'warn'
|
||||
logConnections: false, |
||||
logFileChanges: true, |
||||
open: true, |
||||
notify: false, |
||||
ghostMode: false, |
||||
online: true, |
||||
tunnel: util.env.tunnel || null |
||||
}); |
||||
}); |
||||
|
||||
module.exports = server; |
||||
@ -0,0 +1,6 @@ |
||||
<% _.each(symbols, function(symbol) { %>.<%= symbol.name %> { |
||||
width: <%= symbol.ratio %>em; |
||||
height: 1em; |
||||
fill: <%= symbol.fill %>; |
||||
} |
||||
<% }); %> |
||||
@ -0,0 +1,73 @@ |
||||
var gulp = require('gulp'); |
||||
var plumber = require('gulp-plumber'); |
||||
var svgmin = require('gulp-svgmin'); |
||||
var svgStore = require('gulp-svgstore'); |
||||
var rename = require('gulp-rename'); |
||||
var cheerio = require('gulp-cheerio'); |
||||
var through2 = require('through2'); |
||||
var consolidate = require('gulp-consolidate'); |
||||
var config = require('../../config'); |
||||
|
||||
gulp.task('sprite:svg', function() { |
||||
return gulp |
||||
.src(config.src.iconsSvg + '/*.svg') |
||||
.pipe(plumber({ |
||||
errorHandler: config.errorHandler |
||||
})) |
||||
.pipe(svgmin({ |
||||
js2svg: { |
||||
pretty: true |
||||
}, |
||||
plugins: [{ |
||||
removeDesc: true |
||||
}, { |
||||
cleanupIDs: true |
||||
}, { |
||||
mergePaths: false |
||||
}] |
||||
})) |
||||
.pipe(rename({ prefix: 'icon-' })) |
||||
.pipe(svgStore({ inlineSvg: false })) |
||||
.pipe(through2.obj(function(file, encoding, cb) { |
||||
var $ = file.cheerio; |
||||
var data = $('svg > symbol').map(function() { |
||||
var $this = $(this); |
||||
var size = $this.attr('viewBox').split(' ').splice(2); |
||||
var name = $this.attr('id'); |
||||
var ratio = size[0] / size[1]; // symbol width / symbol height
|
||||
var fill = $this.find('[fill]:not([fill="currentColor"])').attr('fill'); |
||||
var stroke = $this.find('[stroke]').attr('stroke'); |
||||
return { |
||||
name: name, |
||||
ratio: +ratio.toFixed(2), |
||||
fill: fill || 'initial', |
||||
stroke: stroke || 'initial' |
||||
}; |
||||
}).get(); |
||||
this.push(file); |
||||
gulp.src(__dirname + '/_sprite-svg.scss') |
||||
.pipe(consolidate('lodash', { |
||||
symbols: data |
||||
})) |
||||
.pipe(gulp.dest(config.src.sassGen)); |
||||
gulp.src(__dirname + '/sprite.html') |
||||
.pipe(consolidate('lodash', { |
||||
symbols: data |
||||
})) |
||||
.pipe(gulp.dest(config.src.root)); |
||||
cb(); |
||||
})) |
||||
.pipe(cheerio({ |
||||
run: function($, file) { |
||||
$('[fill]:not([fill="currentColor"])').removeAttr('fill'); |
||||
$('[stroke]').removeAttr('stroke'); |
||||
}, |
||||
parserOptions: { xmlMode: true } |
||||
})) |
||||
.pipe(rename({ basename: 'sprite' })) |
||||
.pipe(gulp.dest(config.dest.img)); |
||||
}); |
||||
|
||||
gulp.task('sprite:svg:watch', function() { |
||||
gulp.watch(config.src.iconsSvg + '/*.svg', ['sprite:svg']); |
||||
}); |
||||
@ -0,0 +1,31 @@ |
||||
var gulp = require('gulp'); |
||||
var svgmin = require('gulp-svgmin'); |
||||
var changed = require('gulp-changed'); |
||||
var plumber = require('gulp-plumber'); |
||||
var config = require('../config'); |
||||
|
||||
gulp.task('svgo', function() { |
||||
return gulp |
||||
.src(config.src.img + '/svgo/**/*.svg') |
||||
.pipe(plumber({ |
||||
errorHandler: config.errorHandler |
||||
})) |
||||
.pipe(changed(config.dest.img)) |
||||
.pipe(svgmin({ |
||||
js2svg: { |
||||
pretty: true |
||||
}, |
||||
plugins: [{ |
||||
removeDesc: true |
||||
}, { |
||||
cleanupIDs: true |
||||
}, { |
||||
mergePaths: false |
||||
}] |
||||
})) |
||||
.pipe(gulp.dest(config.dest.img)); |
||||
}); |
||||
|
||||
gulp.task('svgo:watch', function() { |
||||
gulp.watch(config.src.img + '/svgo/**/*.svg', ['svgo']); |
||||
}); |
||||
@ -0,0 +1,11 @@ |
||||
var gulp = require('gulp'); |
||||
var config = require('../config'); |
||||
|
||||
gulp.task('watch', |
||||
['copy:watch', |
||||
'pug:watch', |
||||
'sprite:svg:watch', |
||||
'svgo:watch', |
||||
'js:watch', |
||||
'sass:watch' |
||||
]); |
||||
@ -0,0 +1,11 @@ |
||||
var notify = require('gulp-notify'); |
||||
|
||||
module.exports = function() { |
||||
var args = Array.prototype.slice.call(arguments); |
||||
notify.onError({ |
||||
title: 'Compile Error', |
||||
message: '<%= error.message %>', |
||||
sound: 'Submarine' |
||||
}).apply(this, args); |
||||
this.emit('end'); |
||||
}; |
||||
@ -0,0 +1,2 @@ |
||||
// Require all tasks in gulp/tasks, including subfolders
|
||||
require('require-dir')('./gulp/tasks', {recurse: true}); |
||||
@ -0,0 +1,42 @@ |
||||
{ |
||||
"name": "circles", |
||||
"version": "0.1.0", |
||||
"scripts": { |
||||
"ghpages": "git subtree push --prefix dist origin gh-pages", |
||||
"build": "gulp build --production", |
||||
"start": "gulp" |
||||
}, |
||||
"authors": "Coderiver <html@coderiver.com.ua>", |
||||
"devDependencies": { |
||||
"autoprefixer": "^6.3.3", |
||||
"babel-plugin-transform-runtime": "^6.4.3", |
||||
"babel-preset-es2015": "^6.3.13", |
||||
"browser-sync": "^2.10.0", |
||||
"css-mqpacker": "^5.0.1", |
||||
"del": "^2.2.0", |
||||
"gulp": "^3.9.1", |
||||
"gulp-babel": "^6.1.2", |
||||
"gulp-changed": "^1.3.0", |
||||
"gulp-cheerio": "^0.6.2", |
||||
"gulp-consolidate": "^0.1.2", |
||||
"gulp-filter": "^4.0.0", |
||||
"gulp-front-matter": "^1.3.0", |
||||
"gulp-if": "^2.0.0", |
||||
"gulp-include": "^2.0.3", |
||||
"gulp-notify": "^2.2.0", |
||||
"gulp-plumber": "^1.0.1", |
||||
"gulp-postcss": "^6.2.0", |
||||
"gulp-prettify": "^0.4.0", |
||||
"gulp-pug": "^3.3.0", |
||||
"gulp-rename": "^1.2.2", |
||||
"gulp-sass": "^2.1.1", |
||||
"gulp-sourcemaps": "^1.6.0", |
||||
"gulp-svgmin": "^1.2.0", |
||||
"gulp-svgstore": "^5.0.5", |
||||
"gulp-util": "^3.0.7", |
||||
"lodash": "^4.3.0", |
||||
"require-dir": "^0.3.0", |
||||
"run-sequence": "^1.1.5", |
||||
"through2": "^2.0.1" |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 334 B |
|
After Width: | Height: | Size: 227 B |
|
After Width: | Height: | Size: 360 B |
|
After Width: | Height: | Size: 269 B |
|
After Width: | Height: | Size: 290 B |
|
After Width: | Height: | Size: 671 B |
|
After Width: | Height: | Size: 446 B |
|
After Width: | Height: | Size: 617 B |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 505 B |
|
After Width: | Height: | Size: 315 B |
|
After Width: | Height: | Size: 767 B |
|
After Width: | Height: | Size: 635 B |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 933 B |
|
After Width: | Height: | Size: 548 B |
|
After Width: | Height: | Size: 580 B |
|
After Width: | Height: | Size: 1015 B |
|
After Width: | Height: | Size: 721 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 271 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 860 B |
|
After Width: | Height: | Size: 225 B |
|
After Width: | Height: | Size: 191 B |
|
After Width: | Height: | Size: 759 B |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 663 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 672 B |
|
After Width: | Height: | Size: 280 B |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 572 B |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 626 B |
|
After Width: | Height: | Size: 423 B |
|
After Width: | Height: | Size: 744 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 142 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1008 B |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 370 KiB |
|
After Width: | Height: | Size: 892 B |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 225 KiB |
|
After Width: | Height: | Size: 227 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 78 KiB |
@ -0,0 +1,248 @@ |
||||
// example of simple includes for js
|
||||
//=include lib/jquery.min.js
|
||||
//=include lib/owl.carousel.min.js
|
||||
//=include lib/jquery-ui.min.js
|
||||
//=include lib/datepicker-ru.js
|
||||
|
||||
// global
|
||||
var mobileWidth = 600; |
||||
|
||||
// header
|
||||
(function(){ |
||||
var header = $('.js-header'), |
||||
menu = header.find('.js-header-menu'), |
||||
wrap = header.find('.js-header-wrap'), |
||||
close = header.find('.js-header-close'), |
||||
section = header.find('.js-header-section'), |
||||
list = header.find('.js-header-list'); |
||||
|
||||
menu.on('click', function(e){ |
||||
if ($(window).width() < mobileWidth) { |
||||
e.preventDefault(); |
||||
wrap.addClass('visible'); |
||||
} |
||||
}); |
||||
|
||||
close.on('click', function(e){ |
||||
if ($(window).width() < mobileWidth) { |
||||
e.preventDefault(); |
||||
wrap.removeClass('visible'); |
||||
$(window).scrollTop(0); |
||||
} |
||||
}); |
||||
|
||||
section.on('click', function(e){ |
||||
if ($(window).width() < mobileWidth) { |
||||
e.preventDefault(); |
||||
var _this = $(this); |
||||
|
||||
_this.toggleClass('open'); |
||||
_this.next().slideToggle(); |
||||
} |
||||
}); |
||||
}()); |
||||
|
||||
// search
|
||||
(function(){ |
||||
var search = $('.js-search'), |
||||
input = search.find('.js-search-input'), |
||||
btn = search.find('.js-search-btn'); |
||||
|
||||
btn.on('click', function(e){ |
||||
if ($(window).width() >= mobileWidth) { |
||||
if (!search.hasClass('open')) { |
||||
e.preventDefault(); |
||||
} |
||||
search.addClass('open'); |
||||
setTimeout(function(){ |
||||
input.focus(); |
||||
}, 200); |
||||
} |
||||
}); |
||||
|
||||
search.on('click', function(e){ |
||||
e.stopPropagation(); |
||||
}); |
||||
|
||||
$(document).on('click', function(){ |
||||
search.removeClass('open'); |
||||
input.val(''); |
||||
}); |
||||
}()); |
||||
|
||||
// toggle
|
||||
(function(){ |
||||
$('.js-toggle-head').on('click', function(e){ |
||||
e.preventDefault(); |
||||
var _this = $(this); |
||||
_this.toggleClass('active'); |
||||
_this.next().slideToggle(); |
||||
}); |
||||
}()); |
||||
|
||||
// auth
|
||||
(function(){ |
||||
var auth = $('.js-auth'), |
||||
type = auth.find('.js-auth-type'), |
||||
tab = auth.find('.js-auth-tab'), |
||||
login = auth.find('.js-auth-login'), |
||||
pass = auth.find('.js-auth-pass'), |
||||
goPass = auth.find('.js-auth-go-pass'), |
||||
goEnter = auth.find('.js-auth-go-enter'); |
||||
|
||||
type.on('click', function(e){ |
||||
e.preventDefault(); |
||||
var _this = $(this), |
||||
index = _this.index(); |
||||
|
||||
type.removeClass('active'); |
||||
_this.addClass('active'); |
||||
tab.hide(); |
||||
tab.eq(index).fadeIn(); |
||||
}); |
||||
|
||||
goPass.on('click', function(e){ |
||||
e.preventDefault(); |
||||
|
||||
login.hide(); |
||||
pass.fadeIn(); |
||||
}); |
||||
|
||||
goEnter.on('click', function(e){ |
||||
e.preventDefault(); |
||||
|
||||
pass.hide(); |
||||
login.fadeIn(); |
||||
}); |
||||
}()); |
||||
|
||||
// select
|
||||
(function(){ |
||||
var select = $('.js-select'); |
||||
if (select.length) { |
||||
select.each(function(){ |
||||
var _this = $(this), |
||||
head = _this.find('.js-select-head'), |
||||
option = _this.find('.js-select-option'), |
||||
input = _this.find('.js-select-input'); |
||||
|
||||
head.on('click', function(e){ |
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
|
||||
if (_this.hasClass('active')) { |
||||
_this.removeClass('active'); |
||||
} else { |
||||
select.removeClass('active'); |
||||
_this.addClass('active'); |
||||
} |
||||
}); |
||||
|
||||
option.on('click', function(e){ |
||||
e.preventDefault(); |
||||
_this.addClass('selected'); |
||||
|
||||
var _thisOption = $(this), |
||||
value = _thisOption.text(); |
||||
|
||||
head.text(value); |
||||
|
||||
option.removeClass('active'); |
||||
_thisOption.addClass('active'); |
||||
|
||||
input.val(value); |
||||
}); |
||||
}); |
||||
|
||||
$(document).on('click', function(){ |
||||
select.removeClass('active'); |
||||
}); |
||||
} |
||||
}()); |
||||
|
||||
// datepicker
|
||||
(function(){ |
||||
var datepicker = $('.js-datepicker'); |
||||
if (datepicker.length) { |
||||
$.datepicker.setDefaults( $.datepicker.regional["ru"]); |
||||
datepicker.each(function(){ |
||||
$(this).datepicker({ |
||||
dateFormat: "dd/mm/yy" |
||||
}); |
||||
}); |
||||
} |
||||
}()); |
||||
|
||||
// tabs
|
||||
(function(){ |
||||
var tabs = $('.js-tabs'); |
||||
if (tabs.length) { |
||||
tabs.each(function(){ |
||||
var _this = $(this), |
||||
btn = _this.find('.js-tabs-btn'), |
||||
item = _this.find('.js-tabs-item'); |
||||
|
||||
btn.on('click', function(e){ |
||||
e.preventDefault(); |
||||
|
||||
var _thisBtn = $(this), |
||||
index = _thisBtn.index(); |
||||
|
||||
btn.removeClass('active'); |
||||
_thisBtn.addClass('active'); |
||||
item.hide(); |
||||
item.eq(index).fadeIn(); |
||||
}); |
||||
}); |
||||
} |
||||
}()); |
||||
|
||||
// popup
|
||||
(function(){ |
||||
var body = $('body'), |
||||
popup; |
||||
|
||||
$('body').on('click', '[data-popup]', function(e){ |
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
|
||||
var data = $(this).data('popup'); |
||||
popup = $(data); |
||||
showPopup(); |
||||
}); |
||||
|
||||
$('.js-popup-close').on('click', function(e){ |
||||
e.preventDefault(); |
||||
hidePopup(); |
||||
}); |
||||
|
||||
$('body').on('click', '.js-outer', function(){ |
||||
if (popup != undefined) { |
||||
hidePopup(); |
||||
} |
||||
}); |
||||
|
||||
$('.js-popup-wrap').on('click', function(e){ |
||||
e.stopPropagation(); |
||||
}); |
||||
|
||||
$(document).keyup(function(e){ |
||||
if (e.keyCode === 27) hidePopup(); |
||||
}); |
||||
|
||||
function showPopup(){ |
||||
body.addClass('no-scroll'); |
||||
popup.addClass('open'); |
||||
setTimeout(function(){ |
||||
popup.addClass('visible'); |
||||
}, 100); |
||||
} |
||||
|
||||
function hidePopup(){ |
||||
body.removeClass('no-scroll'); |
||||
popup.removeClass('visible'); |
||||
setTimeout(function(){ |
||||
popup.removeClass('open'); |
||||
}, 300); |
||||
} |
||||
}()); |
||||