mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Introduced ESLint for code style checks
This commit is contained in:
squidfunk
parent
02915210f4
commit
46f45bb8a9
183
.eslintrc
Normal file
183
.eslintrc
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
{
|
||||||
|
"extends": "eslint:recommended",
|
||||||
|
"ecmaFeatures": {
|
||||||
|
"globalReturn": true,
|
||||||
|
"modules": true
|
||||||
|
},
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es6": true,
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"globals": {
|
||||||
|
"describe": true,
|
||||||
|
"before": true,
|
||||||
|
"it": true,
|
||||||
|
"expect": true,
|
||||||
|
"Modernizr": true,
|
||||||
|
"navigator": true
|
||||||
|
},
|
||||||
|
"parser": "babel-eslint",
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": 6,
|
||||||
|
"impliedStrict": true,
|
||||||
|
"sourceType": "module"
|
||||||
|
},
|
||||||
|
"plugins": [],
|
||||||
|
"rules": {
|
||||||
|
"array-callback-return": 2,
|
||||||
|
"array-bracket-spacing": 2,
|
||||||
|
"arrow-body-style": [2, "always"],
|
||||||
|
"arrow-parens": [2, "as-needed"],
|
||||||
|
"arrow-spacing": 2,
|
||||||
|
"block-scoped-var": 2,
|
||||||
|
"block-spacing": 2,
|
||||||
|
"brace-style": 2,
|
||||||
|
"camelcase": [2, {
|
||||||
|
"properties": "always",
|
||||||
|
}],
|
||||||
|
"comma-dangle": [2, "never"],
|
||||||
|
"comma-style": [2, "last"],
|
||||||
|
"complexity": 2,
|
||||||
|
"computed-property-spacing": 2,
|
||||||
|
"consistent-this": 2,
|
||||||
|
"dot-notation": 2,
|
||||||
|
"eol-last": 2,
|
||||||
|
"eqeqeq": 2,
|
||||||
|
"func-call-spacing": 2,
|
||||||
|
"func-names": [2, "never"],
|
||||||
|
"func-style": 2,
|
||||||
|
"generator-star-spacing": 2,
|
||||||
|
"indent": [2, 2, {
|
||||||
|
"FunctionDeclaration": {
|
||||||
|
"body": 1,
|
||||||
|
"parameters": 2
|
||||||
|
},
|
||||||
|
"FunctionExpression": {
|
||||||
|
"body": 1,
|
||||||
|
"parameters": 2
|
||||||
|
},
|
||||||
|
"MemberExpression": 1,
|
||||||
|
"VariableDeclarator": {
|
||||||
|
"var": 2,
|
||||||
|
"let": 2,
|
||||||
|
"const": 3
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
"init-declarations": 2,
|
||||||
|
"key-spacing": 2,
|
||||||
|
"keyword-spacing": 2,
|
||||||
|
"linebreak-style": 2,
|
||||||
|
"lines-around-comment": 2,
|
||||||
|
"lines-around-directive": 2,
|
||||||
|
"max-depth": 2,
|
||||||
|
"max-len": [2, {
|
||||||
|
"ignorePattern": "\/\/ TODO"
|
||||||
|
}],
|
||||||
|
"max-nested-callbacks": 2,
|
||||||
|
"max-params": 2,
|
||||||
|
"max-statements-per-line": 2,
|
||||||
|
"multiline-ternary": 2,
|
||||||
|
"new-cap": 2,
|
||||||
|
"newline-per-chained-call": 2,
|
||||||
|
"no-array-constructor": 2,
|
||||||
|
"no-alert": 2,
|
||||||
|
"no-caller": 2,
|
||||||
|
"no-confusing-arrow": [2, {
|
||||||
|
"allowParens": false
|
||||||
|
}],
|
||||||
|
"no-duplicate-imports": 2,
|
||||||
|
"no-eq-null": 2,
|
||||||
|
"no-eval": 2,
|
||||||
|
"no-extend-native": 2,
|
||||||
|
"no-extra-bind": 2,
|
||||||
|
"no-floating-decimal": 2,
|
||||||
|
"no-global-assign": 2,
|
||||||
|
"no-invalid-this": 2,
|
||||||
|
"no-labels": 2,
|
||||||
|
"no-lone-blocks": 2,
|
||||||
|
"no-loop-func": 2,
|
||||||
|
"no-multiple-empty-lines": [2, {
|
||||||
|
"max": 1
|
||||||
|
}],
|
||||||
|
"no-nested-ternary": 2,
|
||||||
|
"no-new": 2,
|
||||||
|
"no-new-object": 2,
|
||||||
|
"no-param-reassign": 2,
|
||||||
|
"no-prototype-builtins": 2,
|
||||||
|
"no-shadow": 2,
|
||||||
|
"no-tabs": 2,
|
||||||
|
"no-template-curly-in-string": 2,
|
||||||
|
"no-throw-literal": 2,
|
||||||
|
"no-trailing-spaces": 2,
|
||||||
|
"no-undefined": 2,
|
||||||
|
"no-underscore-dangle": [2, {
|
||||||
|
"allowAfterThis": true,
|
||||||
|
"allowAfterSuper": true
|
||||||
|
}],
|
||||||
|
"no-unneeded-ternary": 2,
|
||||||
|
"no-unsafe-negation": 2,
|
||||||
|
"no-unused-expressions": 2,
|
||||||
|
"no-use-before-define": 2,
|
||||||
|
"no-useless-call": 2,
|
||||||
|
"no-useless-computed-key": 2,
|
||||||
|
"no-useless-constructor": 2,
|
||||||
|
"no-useless-rename": 2,
|
||||||
|
"no-var": 2,
|
||||||
|
"no-whitespace-before-property": 2,
|
||||||
|
"no-with": 2,
|
||||||
|
"object-curly-newline": 2,
|
||||||
|
"object-curly-spacing": 2,
|
||||||
|
"object-property-newline": 2,
|
||||||
|
"object-shorthand": 2,
|
||||||
|
"one-var-declaration-per-line": 2,
|
||||||
|
"operator-assignment": 2,
|
||||||
|
"prefer-arrow-callback": 2,
|
||||||
|
"prefer-const": 2,
|
||||||
|
"prefer-numeric-literals": 2,
|
||||||
|
"prefer-spread": 2,
|
||||||
|
"prefer-template": 2,
|
||||||
|
"quotes": [2, "double"],
|
||||||
|
"radix": 2,
|
||||||
|
"require-jsdoc": [2, {
|
||||||
|
"require": {
|
||||||
|
"FunctionDeclaration": true,
|
||||||
|
"MethodDefinition": true,
|
||||||
|
"ClassDeclaration": false
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
"rest-spread-spacing": 2,
|
||||||
|
"semi": [2, "never"],
|
||||||
|
"semi-spacing": 2,
|
||||||
|
"space-before-function-paren": [2, "never"],
|
||||||
|
"space-in-parens": 2,
|
||||||
|
"space-infix-ops": 2,
|
||||||
|
"space-unary-ops": 2,
|
||||||
|
"spaced-comment": [2, "always", {
|
||||||
|
"line": {
|
||||||
|
"markers": ["/"],
|
||||||
|
"exceptions": ["-", "+"]
|
||||||
|
},
|
||||||
|
"block": {
|
||||||
|
"markers": ["!"],
|
||||||
|
"exceptions": ["*"],
|
||||||
|
"balanced": true
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
"strict": 2,
|
||||||
|
"template-curly-spacing": 2,
|
||||||
|
"unicode-bom": 2,
|
||||||
|
"valid-jsdoc": [2, {
|
||||||
|
"prefer": {
|
||||||
|
"arg": "param",
|
||||||
|
"argument": "param",
|
||||||
|
"class": "constructor",
|
||||||
|
"returns": "return",
|
||||||
|
"virtual": "abstract"
|
||||||
|
},
|
||||||
|
"requireParamDescription": true,
|
||||||
|
"requireReturnDescription": true
|
||||||
|
}],
|
||||||
|
"yield-star-spacing": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
384
Gulpfile.js
384
Gulpfile.js
@ -20,51 +20,51 @@
|
|||||||
* IN THE SOFTWARE.
|
* IN THE SOFTWARE.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
"use strict"
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Imports
|
* Imports
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
var gulp = require('gulp');
|
var gulp = require("gulp")
|
||||||
var addsrc = require('gulp-add-src');
|
var args = require("yargs").argv
|
||||||
var args = require('yargs').argv;
|
var autoprefix = require("autoprefixer")
|
||||||
var autoprefix = require('autoprefixer');
|
var changed = require("gulp-changed")
|
||||||
var changed = require('gulp-changed');
|
var child = require("child_process")
|
||||||
var child = require('child_process');
|
var clean = require("del")
|
||||||
var clean = require('del');
|
var compact = require("gulp-remove-empty-lines")
|
||||||
var compact = require('gulp-remove-empty-lines');
|
var concat = require("gulp-concat")
|
||||||
var concat = require('gulp-concat');
|
var gulpif = require("gulp-if")
|
||||||
var ignore = require('gulp-ignore');
|
var mincss = require("gulp-cssnano")
|
||||||
var gulpif = require('gulp-if');
|
var minhtml = require("gulp-htmlmin")
|
||||||
var mincss = require('gulp-cssnano');
|
var minsvg = require("gulp-svgmin")
|
||||||
var minhtml = require('gulp-htmlmin');
|
var modernizr = require("gulp-modernizr")
|
||||||
var minsvg = require('gulp-svgmin');
|
var mqpacker = require("css-mqpacker")
|
||||||
var modernizr = require('gulp-modernizr');
|
var notifier = require("node-notifier")
|
||||||
var mqpacker = require('css-mqpacker');
|
var path = require("path")
|
||||||
var notifier = require('node-notifier');
|
var plumber = require("gulp-plumber")
|
||||||
var path = require('path');
|
var postcss = require("gulp-postcss")
|
||||||
var plumber = require('gulp-plumber');
|
var replace = require("gulp-replace")
|
||||||
var postcss = require('gulp-postcss');
|
var rev = require("gulp-rev")
|
||||||
var replace = require('gulp-replace');
|
var sass = require("gulp-sass")
|
||||||
var rev = require('gulp-rev');
|
var sasslint = require("gulp-sass-lint")
|
||||||
var sass = require('gulp-sass');
|
var sourcemaps = require("gulp-sourcemaps")
|
||||||
var sasslint = require('gulp-sass-lint');
|
var stream = require("webpack-stream")
|
||||||
var sourcemaps = require('gulp-sourcemaps');
|
var uglify = require("gulp-uglify")
|
||||||
var stream = require('webpack-stream');
|
var util = require("gulp-util")
|
||||||
var uglify = require('gulp-uglify');
|
var vinyl = require("vinyl-paths")
|
||||||
var util = require('gulp-util');
|
var version = require("gulp-rev-replace")
|
||||||
var vinyl = require('vinyl-paths');
|
var webpack = require("webpack")
|
||||||
var version = require('gulp-rev-replace');
|
|
||||||
var webpack = require('webpack');
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Locals
|
* Locals
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
/* MkDocs server */
|
/* MkDocs server */
|
||||||
var server = null;
|
var server = null
|
||||||
|
|
||||||
/* Watching context */
|
/* Watching context */
|
||||||
var watch = false;
|
var watch = false
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Overrides
|
* Overrides
|
||||||
@ -73,28 +73,28 @@ var watch = false;
|
|||||||
/*
|
/*
|
||||||
* Override gulp.src() for nicer error handling.
|
* Override gulp.src() for nicer error handling.
|
||||||
*/
|
*/
|
||||||
var src = gulp.src;
|
var src = gulp.src // TODO: do this via extension somehow...
|
||||||
gulp.src = function() {
|
gulp.src = function() {
|
||||||
return src.apply(gulp, arguments)
|
return src.apply(gulp, arguments)
|
||||||
.pipe(
|
.pipe(
|
||||||
plumber(function(error) {
|
plumber(function(error) {
|
||||||
util.log(util.colors.red(
|
util.log(util.colors.red(
|
||||||
'Error (' + error.plugin + '): ' + error.message
|
"Error (" + error.plugin + "): " + error.message
|
||||||
));
|
))
|
||||||
|
|
||||||
/* Extract file where error happened, if existent */
|
/* Extract file where error happened, if existent */
|
||||||
var file = error.relativePath
|
var file = error.relativePath
|
||||||
? error.relativePath.split('/').pop()
|
? error.relativePath.split("/").pop()
|
||||||
: '';
|
: ""
|
||||||
|
|
||||||
/* Dispatch system-level notification */
|
/* Dispatch system-level notification */
|
||||||
notifier.notify({
|
notifier.notify({
|
||||||
title: 'Error (' + error.plugin + '): ' + file,
|
title: "Error (" + error.plugin + "): " + file,
|
||||||
message: error.messageOriginal
|
message: error.messageOriginal
|
||||||
});
|
})
|
||||||
this.emit('end');
|
this.emit("end")
|
||||||
}));
|
}))
|
||||||
};
|
}
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Asset pipeline
|
* Asset pipeline
|
||||||
@ -103,51 +103,51 @@ gulp.src = function() {
|
|||||||
/*
|
/*
|
||||||
* Clean stylesheets generated by build.
|
* Clean stylesheets generated by build.
|
||||||
*/
|
*/
|
||||||
gulp.task('assets:clean:stylesheets', function() {
|
gulp.task("assets:clean:stylesheets", () => {
|
||||||
return gulp.src('material/assets/stylesheets/*')
|
return gulp.src("material/assets/stylesheets/*")
|
||||||
.pipe(vinyl(clean));
|
.pipe(vinyl(clean))
|
||||||
});
|
})
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Clean javascripts generated by build.
|
* Clean javascripts generated by build.
|
||||||
*/
|
*/
|
||||||
gulp.task('assets:clean:javascripts', function() {
|
gulp.task("assets:clean:javascripts", () => {
|
||||||
return gulp.src('material/assets/javascripts/*')
|
return gulp.src("material/assets/javascripts/*")
|
||||||
.pipe(vinyl(clean));
|
.pipe(vinyl(clean))
|
||||||
});
|
})
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Clean images generated by build.
|
* Clean images generated by build.
|
||||||
*/
|
*/
|
||||||
gulp.task('assets:clean:images', function() {
|
gulp.task("assets:clean:images", () => {
|
||||||
return gulp.src('material/assets/images/*')
|
return gulp.src("material/assets/images/*")
|
||||||
.pipe(vinyl(clean));
|
.pipe(vinyl(clean))
|
||||||
});
|
})
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Clean files generated by build.
|
* Clean files generated by build.
|
||||||
*/
|
*/
|
||||||
gulp.task('assets:clean', [
|
gulp.task("assets:clean", [
|
||||||
'assets:clean:stylesheets',
|
"assets:clean:stylesheets",
|
||||||
'assets:clean:javascripts',
|
"assets:clean:javascripts",
|
||||||
'assets:clean:images'
|
"assets:clean:images"
|
||||||
]);
|
])
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Build stylesheets from SASS source.
|
* Build stylesheets from SASS source.
|
||||||
*/
|
*/
|
||||||
gulp.task('assets:build:stylesheets', args.production ? [
|
gulp.task("assets:build:stylesheets", args.production ? [
|
||||||
'assets:clean:stylesheets',
|
"assets:clean:stylesheets",
|
||||||
'assets:build:images',
|
"assets:build:images"
|
||||||
] : [], function() {
|
] : [], () => {
|
||||||
return gulp.src('src/assets/stylesheets/*.scss')
|
return gulp.src("src/assets/stylesheets/*.scss")
|
||||||
.pipe(gulpif(args.sourcemaps, sourcemaps.init()))
|
.pipe(gulpif(args.sourcemaps, sourcemaps.init()))
|
||||||
.pipe(
|
.pipe(
|
||||||
sass({
|
sass({
|
||||||
includePaths: [
|
includePaths: [
|
||||||
'node_modules/modularscale-sass/stylesheets',
|
"node_modules/modularscale-sass/stylesheets",
|
||||||
'node_modules/material-design-color',
|
"node_modules/material-design-color",
|
||||||
'node_modules/material-shadows'
|
"node_modules/material-shadows"
|
||||||
]
|
]
|
||||||
}))
|
}))
|
||||||
.pipe(
|
.pipe(
|
||||||
@ -159,40 +159,44 @@ gulp.task('assets:build:stylesheets', args.production ? [
|
|||||||
.pipe(gulpif(args.production, mincss()))
|
.pipe(gulpif(args.production, mincss()))
|
||||||
.pipe(gulpif(args.production, rev()))
|
.pipe(gulpif(args.production, rev()))
|
||||||
.pipe(gulpif(args.production,
|
.pipe(gulpif(args.production,
|
||||||
version({ manifest: gulp.src('manifest.json') })))
|
version({ manifest: gulp.src("manifest.json") })))
|
||||||
.pipe(gulp.dest('material/assets/stylesheets'))
|
.pipe(gulp.dest("material/assets/stylesheets"))
|
||||||
.pipe(gulpif(args.production,
|
.pipe(gulpif(args.production,
|
||||||
rev.manifest('manifest.json', {
|
rev.manifest("manifest.json", {
|
||||||
base: 'material/assets',
|
base: "material/assets",
|
||||||
merge: true
|
merge: true
|
||||||
})))
|
})))
|
||||||
.pipe(gulpif(args.production, gulp.dest('material/assets')));
|
.pipe(gulpif(args.production, gulp.dest("material/assets")))
|
||||||
});
|
})
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Build javascripts by transpiling ES6 with babel.
|
* Build javascripts by transpiling ES6 with babel.
|
||||||
*/
|
*/
|
||||||
gulp.task('assets:build:javascripts', args.production ? [
|
gulp.task("assets:build:javascripts", args.production ? [
|
||||||
'assets:clean:javascripts'
|
"assets:clean:javascripts"
|
||||||
] : [], function() {
|
] : [], () => {
|
||||||
return gulp.src('src/assets/javascripts/**/*.js')
|
return gulp.src("src/assets/javascripts/**/*.js")
|
||||||
.pipe(
|
.pipe(
|
||||||
stream({
|
stream({
|
||||||
entry: 'application.js',
|
entry: "application.js",
|
||||||
output: {
|
output: {
|
||||||
filename: 'application.js'
|
filename: "application.js"
|
||||||
},
|
},
|
||||||
module: {
|
module: {
|
||||||
loaders: [{
|
loaders: [{
|
||||||
loader: 'babel-loader',
|
loader: "babel-loader",
|
||||||
test: path.join(__dirname, 'src/assets/javascripts'),
|
test: path.join(__dirname, "src/assets/javascripts"),
|
||||||
query: {
|
query: {
|
||||||
presets: 'es2015'
|
presets: "es2015"
|
||||||
}
|
}
|
||||||
|
}, {
|
||||||
|
test: /\.js$/,
|
||||||
|
loader: "eslint-loader",
|
||||||
|
exclude: /node_modules/
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
new webpack.NoErrorsPlugin(),
|
new webpack.NoErrorsPlugin()
|
||||||
].concat(
|
].concat(
|
||||||
args.production ? [
|
args.production ? [
|
||||||
new webpack.optimize.UglifyJsPlugin({
|
new webpack.optimize.UglifyJsPlugin({
|
||||||
@ -206,105 +210,105 @@ gulp.task('assets:build:javascripts', args.production ? [
|
|||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
modulesDirectories: [
|
modulesDirectories: [
|
||||||
'src/assets/javascripts',
|
"src/assets/javascripts",
|
||||||
'node_modules'
|
"node_modules"
|
||||||
],
|
],
|
||||||
extensions: [
|
extensions: [
|
||||||
'', '.js'
|
"", ".js"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
devtool: args.sourcemaps ? 'source-map' : ''
|
devtool: args.sourcemaps ? "source-map" : ""
|
||||||
}))
|
}))
|
||||||
.pipe(gulpif(args.production, rev()))
|
.pipe(gulpif(args.production, rev()))
|
||||||
.pipe(gulp.dest('material/assets/javascripts'))
|
.pipe(gulp.dest("material/assets/javascripts"))
|
||||||
.pipe(gulpif(args.production,
|
.pipe(gulpif(args.production,
|
||||||
rev.manifest('manifest.json', {
|
rev.manifest("manifest.json", {
|
||||||
base: 'material/assets',
|
base: "material/assets",
|
||||||
merge: true
|
merge: true
|
||||||
})))
|
})))
|
||||||
.pipe(gulpif(args.production, gulp.dest('material/assets')));
|
.pipe(gulpif(args.production, gulp.dest("material/assets")))
|
||||||
});
|
})
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Create a customized modernizr build.
|
* Create a customized modernizr build.
|
||||||
*/
|
*/
|
||||||
gulp.task('assets:build:modernizr', [
|
gulp.task("assets:build:modernizr", [
|
||||||
'assets:build:stylesheets',
|
"assets:build:stylesheets",
|
||||||
'assets:build:javascripts'
|
"assets:build:javascripts"
|
||||||
], function() {
|
], () => {
|
||||||
return gulp.src([
|
return gulp.src([
|
||||||
'material/assets/stylesheets/*.css',
|
"material/assets/stylesheets/*.css",
|
||||||
'material/assets/javascripts/*.js'
|
"material/assets/javascripts/*.js"
|
||||||
]).pipe(
|
]).pipe(
|
||||||
modernizr({
|
modernizr({
|
||||||
options: [
|
options: [
|
||||||
'addTest', /* Add custom tests */
|
"addTest", /* Add custom tests */
|
||||||
'fnBind', /* Use function.bind */
|
"fnBind", /* Use function.bind */
|
||||||
'html5printshiv', /* HTML5 support for IE */
|
"html5printshiv", /* HTML5 support for IE */
|
||||||
'setClasses', /* Add CSS classes to root tag */
|
"setClasses", /* Add CSS classes to root tag */
|
||||||
'testProp' /* Test for properties */
|
"testProp" /* Test for properties */
|
||||||
]
|
]
|
||||||
}))
|
}))
|
||||||
.pipe(concat('modernizr.js'))
|
.pipe(concat("modernizr.js"))
|
||||||
.pipe(gulpif(args.production, uglify()))
|
.pipe(gulpif(args.production, uglify()))
|
||||||
.pipe(gulpif(args.production, rev()))
|
.pipe(gulpif(args.production, rev()))
|
||||||
.pipe(gulp.dest('material/assets/javascripts'))
|
.pipe(gulp.dest("material/assets/javascripts"))
|
||||||
.pipe(gulpif(args.production,
|
.pipe(gulpif(args.production,
|
||||||
rev.manifest('manifest.json', {
|
rev.manifest("manifest.json", {
|
||||||
base: 'material/assets',
|
base: "material/assets",
|
||||||
merge: true
|
merge: true
|
||||||
})))
|
})))
|
||||||
.pipe(gulpif(args.production, gulp.dest('material/assets')));
|
.pipe(gulpif(args.production, gulp.dest("material/assets")))
|
||||||
});
|
})
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Copy and minify vector graphics.
|
* Copy and minify vector graphics.
|
||||||
*/
|
*/
|
||||||
gulp.task('assets:build:images:svg', function() {
|
gulp.task("assets:build:images:svg", () => {
|
||||||
return gulp.src('src/assets/images/**/*.svg')
|
return gulp.src("src/assets/images/**/*.svg")
|
||||||
.pipe(gulpif(watch, changed('material/assets/images')))
|
.pipe(gulpif(watch, changed("material/assets/images")))
|
||||||
.pipe(gulpif(args.production, minsvg()))
|
.pipe(gulpif(args.production, minsvg()))
|
||||||
.pipe(gulpif(args.production, rev()))
|
.pipe(gulpif(args.production, rev()))
|
||||||
.pipe(gulp.dest('material/assets/images'))
|
.pipe(gulp.dest("material/assets/images"))
|
||||||
.pipe(gulpif(args.production,
|
.pipe(gulpif(args.production,
|
||||||
rev.manifest('manifest.json', {
|
rev.manifest("manifest.json", {
|
||||||
base: 'material/assets',
|
base: "material/assets",
|
||||||
merge: true
|
merge: true
|
||||||
})))
|
})))
|
||||||
.pipe(gulpif(args.production, gulp.dest('material/assets')));
|
.pipe(gulpif(args.production, gulp.dest("material/assets")))
|
||||||
});
|
})
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Copy favicon.
|
* Copy favicon.
|
||||||
*/
|
*/
|
||||||
gulp.task('assets:build:images:ico', function() {
|
gulp.task("assets:build:images:ico", () => {
|
||||||
return gulp.src('src/assets/images/**/*.ico')
|
return gulp.src("src/assets/images/**/*.ico")
|
||||||
.pipe(gulp.dest('material/assets/images'))
|
.pipe(gulp.dest("material/assets/images"))
|
||||||
});
|
})
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Copy images.
|
* Copy images.
|
||||||
*/
|
*/
|
||||||
gulp.task('assets:build:images', [
|
gulp.task("assets:build:images", [
|
||||||
'assets:clean:images'
|
"assets:clean:images"
|
||||||
], function() {
|
], () => {
|
||||||
return gulp.start([
|
return gulp.start([
|
||||||
'assets:build:images:svg',
|
"assets:build:images:svg",
|
||||||
'assets:build:images:ico'
|
"assets:build:images:ico"
|
||||||
]);
|
])
|
||||||
});
|
})
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Minify views.
|
* Minify views.
|
||||||
*/
|
*/
|
||||||
gulp.task('assets:build:views', args.production ? [
|
gulp.task("assets:build:views", args.production ? [
|
||||||
'assets:build:stylesheets',
|
"assets:build:stylesheets",
|
||||||
'assets:build:modernizr',
|
"assets:build:modernizr",
|
||||||
'assets:build:images'
|
"assets:build:images"
|
||||||
] : [], function() {
|
] : [], () => {
|
||||||
var metadata = require('./package.json');
|
var metadata = require("./package.json")
|
||||||
return gulp.src('src/**/*.html')
|
return gulp.src("src/**/*.html")
|
||||||
.pipe(gulpif(watch, changed('material')))
|
.pipe(gulpif(watch, changed("material")))
|
||||||
.pipe(
|
.pipe(
|
||||||
minhtml({
|
minhtml({
|
||||||
collapseBooleanAttributes: true,
|
collapseBooleanAttributes: true,
|
||||||
@ -313,51 +317,51 @@ gulp.task('assets:build:views', args.production ? [
|
|||||||
removeStyleLinkTypeAttributes: true,
|
removeStyleLinkTypeAttributes: true,
|
||||||
customAttrCollapse: /(content)/
|
customAttrCollapse: /(content)/
|
||||||
}))
|
}))
|
||||||
.pipe(replace('$theme-name$', metadata.name))
|
.pipe(replace("$theme-name$", metadata.name))
|
||||||
.pipe(replace('$theme-version$', metadata.version))
|
.pipe(replace("$theme-version$", metadata.version))
|
||||||
.pipe(compact())
|
.pipe(compact())
|
||||||
.pipe(gulpif(args.production,
|
.pipe(gulpif(args.production,
|
||||||
version({ manifest: gulp.src('manifest.json') })))
|
version({ manifest: gulp.src("manifest.json") })))
|
||||||
.pipe(gulp.dest('material'));
|
.pipe(gulp.dest("material"))
|
||||||
});
|
})
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Build assets.
|
* Build assets.
|
||||||
*/
|
*/
|
||||||
gulp.task('assets:build', [
|
gulp.task("assets:build", [
|
||||||
'assets:build:stylesheets',
|
"assets:build:stylesheets",
|
||||||
'assets:build:javascripts',
|
"assets:build:javascripts",
|
||||||
'assets:build:modernizr',
|
"assets:build:modernizr",
|
||||||
'assets:build:images',
|
"assets:build:images",
|
||||||
'assets:build:views'
|
"assets:build:views"
|
||||||
]);
|
])
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Watch assets for changes and rebuild on the fly.
|
* Watch assets for changes and rebuild on the fly.
|
||||||
*/
|
*/
|
||||||
gulp.task('assets:watch', function() {
|
gulp.task("assets:watch", () => {
|
||||||
watch = true;
|
watch = true
|
||||||
|
|
||||||
/* Rebuild stylesheets */
|
/* Rebuild stylesheets */
|
||||||
gulp.watch([
|
gulp.watch([
|
||||||
'src/assets/stylesheets/**/*.scss'
|
"src/assets/stylesheets/**/*.scss"
|
||||||
], ['assets:build:stylesheets']);
|
], ["assets:build:stylesheets"])
|
||||||
|
|
||||||
/* Rebuild javascripts */
|
/* Rebuild javascripts */
|
||||||
gulp.watch([
|
gulp.watch([
|
||||||
'src/assets/javascripts/**/*.js'
|
"src/assets/javascripts/**/*.js"
|
||||||
], ['assets:build:javascripts']);
|
], ["assets:build:javascripts"])
|
||||||
|
|
||||||
/* Copy images */
|
/* Copy images */
|
||||||
gulp.watch([
|
gulp.watch([
|
||||||
'src/assets/images/**/*'
|
"src/assets/images/**/*"
|
||||||
], ['assets:build:images']);
|
], ["assets:build:images"])
|
||||||
|
|
||||||
/* Minify views */
|
/* Minify views */
|
||||||
gulp.watch([
|
gulp.watch([
|
||||||
'src/**/*.html'
|
"src/**/*.html"
|
||||||
], ['assets:build:views']);
|
], ["assets:build:views"])
|
||||||
});
|
})
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Application server
|
* Application server
|
||||||
@ -366,35 +370,35 @@ gulp.task('assets:watch', function() {
|
|||||||
/*
|
/*
|
||||||
* Build documentation.
|
* Build documentation.
|
||||||
*/
|
*/
|
||||||
gulp.task('mkdocs:build', [
|
gulp.task("mkdocs:build", [
|
||||||
'assets:build'
|
"assets:build"
|
||||||
], function() {
|
], () => {
|
||||||
return child.spawnSync('mkdocs', ['build']);
|
return child.spawnSync("mkdocs", ["build"])
|
||||||
});
|
})
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Restart MkDocs server.
|
* Restart MkDocs server.
|
||||||
*/
|
*/
|
||||||
gulp.task('mkdocs:serve', function() {
|
gulp.task("mkdocs:serve", () => {
|
||||||
if (server)
|
if (server)
|
||||||
server.kill();
|
server.kill()
|
||||||
|
|
||||||
/* Spawn MkDocs server */
|
/* Spawn MkDocs server */
|
||||||
server = child.spawn('mkdocs', ['serve', '-a', '0.0.0.0:8000']);
|
server = child.spawn("mkdocs", ["serve", "-a", "0.0.0.0:8000"])
|
||||||
|
|
||||||
/* Pretty print server log output */
|
/* Pretty print server log output */
|
||||||
server.stdout.on('data', function(data) {
|
server.stdout.on("data", data => {
|
||||||
var lines = data.toString().split('\n')
|
var lines = data.toString().split("\n")
|
||||||
for (var l in lines)
|
for (var l in lines)
|
||||||
if (lines[l].length)
|
if (lines[l].length)
|
||||||
util.log(lines[l]);
|
util.log(lines[l])
|
||||||
});
|
})
|
||||||
|
|
||||||
/* Print errors to stdout */
|
/* Print errors to stdout */
|
||||||
server.stderr.on('data', function(data) {
|
server.stderr.on("data", data => {
|
||||||
process.stdout.write(data.toString());
|
process.stdout.write(data.toString())
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Interface
|
* Interface
|
||||||
@ -403,28 +407,28 @@ gulp.task('mkdocs:serve', function() {
|
|||||||
/*
|
/*
|
||||||
* Build assets and documentation.
|
* Build assets and documentation.
|
||||||
*/
|
*/
|
||||||
gulp.task('build', [
|
gulp.task("build", [
|
||||||
'assets:clean',
|
"assets:clean",
|
||||||
'assets:build'
|
"assets:build"
|
||||||
].concat(args.mkdocs
|
].concat(args.mkdocs
|
||||||
? 'mkdocs:build'
|
? "mkdocs:build"
|
||||||
: []));
|
: []))
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Start asset and MkDocs watchdogs.
|
* Start asset and MkDocs watchdogs.
|
||||||
*/
|
*/
|
||||||
gulp.task('watch', [
|
gulp.task("watch", [
|
||||||
'assets:clean',
|
"assets:clean",
|
||||||
'assets:build'
|
"assets:build"
|
||||||
], function() {
|
], () => {
|
||||||
return gulp.start([
|
return gulp.start([
|
||||||
'assets:watch'
|
"assets:watch"
|
||||||
].concat(args.mkdocs
|
].concat(args.mkdocs
|
||||||
? 'mkdocs:serve'
|
? "mkdocs:serve"
|
||||||
: []));
|
: []))
|
||||||
});
|
})
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Build assets by default.
|
* Build assets by default.
|
||||||
*/
|
*/
|
||||||
gulp.task('default', ['build']);
|
gulp.task("default", ["build"])
|
||||||
@ -1,2 +1,2 @@
|
|||||||
recursive-include material *.ico *.js *.css *.html *.eot *.svg *.ttf *.woff
|
recursive-include material *.ico *.js *.css *.html *.svg
|
||||||
recursive-exclude site *
|
recursive-exclude site *
|
||||||
58
material/assets/javascripts/application-29b6c4d53e.js
Normal file
58
material/assets/javascripts/application-29b6c4d53e.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
material/assets/javascripts/modernizr-29976e9007.js
Normal file
1
material/assets/javascripts/modernizr-29976e9007.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
material/assets/stylesheets/application-bcbe056a5b.css
Normal file
1
material/assets/stylesheets/application-bcbe056a5b.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -88,10 +88,10 @@
|
|||||||
{% include "partials/footer.html" %}
|
{% include "partials/footer.html" %}
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
var base_url = '{{ base_url }}';
|
window.baseUrl = '{{ base_url }}'; // TODO: define in global scope and use IIFE
|
||||||
var repo_url = '{{ repo_url }}';
|
window.repoUrl = '{{ repo_url }}';
|
||||||
</script>
|
</script>
|
||||||
<script src="{{ base_url }}/assets/javascripts/application-db87fe00d3.js"></script>
|
<script src="{{ base_url }}/assets/javascripts/application-29b6c4d53e.js"></script>
|
||||||
{% for path in extra_javascript %}
|
{% for path in extra_javascript %}
|
||||||
<script src="{{ path }}"></script>
|
<script src="{{ path }}"></script>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|||||||
@ -2,7 +2,14 @@
|
|||||||
<nav class="md-header-nav md-grid">
|
<nav class="md-header-nav md-grid">
|
||||||
<div class="md-flex">
|
<div class="md-flex">
|
||||||
<div class="md-flex__cell md-flex__cell--shrink">
|
<div class="md-flex__cell md-flex__cell--shrink">
|
||||||
<label class="md-icon md-icon--menu md-header-nav__icon" for="drawer"></label>
|
<a href="{{ homepage_url }}" title="{{ site_name }}" class="md-icon md-header-nav__icon md-header-nav__icon--home">
|
||||||
|
layers
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="md-flex__cell md-flex__cell--shrink">
|
||||||
|
<label class="md-icon md-header-nav__icon md-header-nav__icon--menu" for="drawer">
|
||||||
|
menu
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="md-flex__cell md-flex__cell--stretch">
|
<div class="md-flex__cell md-flex__cell--stretch">
|
||||||
<span class="md-flex__ellipsis md-header-nav__title">
|
<span class="md-flex__ellipsis md-header-nav__title">
|
||||||
@ -10,7 +17,9 @@
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="md-flex__cell md-flex__cell--shrink">
|
<div class="md-flex__cell md-flex__cell--shrink">
|
||||||
<label class="md-icon md-icon--search md-header-nav__icon" for="search"></label>
|
<label class="md-icon md-header-nav__icon md-header-nav__icon--search" for="search">
|
||||||
|
search
|
||||||
|
</label>
|
||||||
{% include "partials/search.html" %}
|
{% include "partials/search.html" %}
|
||||||
</div>
|
</div>
|
||||||
<div class="md-flex__cell md-flex__cell--shrink">
|
<div class="md-flex__cell md-flex__cell--shrink">
|
||||||
|
|||||||
@ -1,20 +1,19 @@
|
|||||||
<div class="md-search">
|
<div class="md-search">
|
||||||
<div class="md-search__overlay"></div>
|
<div class="md-search__overlay"></div>
|
||||||
<div class="md-search__inner">
|
<div class="md-search__inner">
|
||||||
<form class="md-search__form">
|
<form class="md-search__form">
|
||||||
<input type="text" class="md-search__input" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" id="query">
|
<input type="text" class="md-search__input" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" id="query">
|
||||||
<label class="md-icon md-icon--search md-search__icon" for="query"></label>
|
<label class="md-icon md-search__icon" for="query">
|
||||||
<div class="md-search__suggest">
|
search
|
||||||
<div class="md-search-term">
|
</label>
|
||||||
change color
|
<div class="md-search__output">
|
||||||
</div>
|
<div class="md-search-result">
|
||||||
<div class="md-search-term">
|
<div class="md-search-result__meta">
|
||||||
fork theme
|
3 Search results
|
||||||
</div>
|
</div>
|
||||||
<div class="md-search-term">
|
<ol class="md-search-result__list">
|
||||||
contributing
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
@ -10,4 +10,4 @@
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -19,6 +19,7 @@
|
|||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"fastclick": "^1.0.6",
|
"fastclick": "^1.0.6",
|
||||||
|
"lunr": "^0.7.1",
|
||||||
"material-design-color": "^2.3.1",
|
"material-design-color": "^2.3.1",
|
||||||
"material-shadows": "^3.0.0",
|
"material-shadows": "^3.0.0",
|
||||||
"modularscale-sass": "^2.1.1",
|
"modularscale-sass": "^2.1.1",
|
||||||
@ -26,12 +27,14 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "^6.3.2",
|
"autoprefixer": "^6.3.2",
|
||||||
|
"babel-eslint": "^6.1.2",
|
||||||
"babel-loader": "^6.2.4",
|
"babel-loader": "^6.2.4",
|
||||||
"babel-preset-es2015": "^6.13.2",
|
"babel-preset-es2015": "^6.13.2",
|
||||||
"css-mqpacker": "^4.0.0",
|
"css-mqpacker": "^4.0.0",
|
||||||
"del": "^2.2.0",
|
"del": "^2.2.0",
|
||||||
|
"eslint": "^3.6.1",
|
||||||
|
"eslint-loader": "^1.5.0",
|
||||||
"gulp": "^3.9.1",
|
"gulp": "^3.9.1",
|
||||||
"gulp-add-src": "^0.2.0",
|
|
||||||
"gulp-changed": "^1.3.2",
|
"gulp-changed": "^1.3.2",
|
||||||
"gulp-concat": "^2.6.0",
|
"gulp-concat": "^2.6.0",
|
||||||
"gulp-cssnano": "^2.1.1",
|
"gulp-cssnano": "^2.1.1",
|
||||||
|
|||||||
@ -20,221 +20,313 @@
|
|||||||
* IN THE SOFTWARE.
|
* IN THE SOFTWARE.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Imports
|
* Imports
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
import FastClick from 'fastclick';
|
import FastClick from "fastclick"
|
||||||
import Sidebar from './components/sidebar';
|
import lunr from "lunr"
|
||||||
import ScrollSpy from './components/scrollspy';
|
|
||||||
import Expander from './components/expander';
|
// import Expander from "./components/expander"
|
||||||
|
import Sidebar from "./components/sidebar"
|
||||||
|
import ScrollSpy from "./components/scrollspy"
|
||||||
|
|
||||||
|
// import Search from './components/search';
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Application
|
* Application
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
/* Initialize application upon DOM ready */
|
/* Initialize application upon DOM ready */
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
'use strict';
|
|
||||||
|
|
||||||
/* Test for iOS */
|
/* Test for iOS */
|
||||||
Modernizr.addTest('ios', function() {
|
Modernizr.addTest("ios", () => {
|
||||||
return !!navigator.userAgent.match(/(iPad|iPhone|iPod)/g);
|
return !!navigator.userAgent.match(/(iPad|iPhone|iPod)/g)
|
||||||
});
|
})
|
||||||
|
|
||||||
/* Test for web application context */
|
/* Test for web application context */
|
||||||
Modernizr.addTest('standalone', function() {
|
Modernizr.addTest("standalone", () => {
|
||||||
return !!navigator.standalone;
|
return !!navigator.standalone
|
||||||
});
|
})
|
||||||
|
|
||||||
/* Attack FastClick to mitigate 300ms delay on touch devices */
|
/* Attack FastClick to mitigate 300ms delay on touch devices */
|
||||||
FastClick.attach(document.body);
|
FastClick.attach(document.body)
|
||||||
|
|
||||||
|
const width = window.matchMedia("(min-width: 1200px)")
|
||||||
|
|
||||||
var width = window.matchMedia("(min-width: 1200px)");
|
const sidebar = new Sidebar(".md-sidebar--primary")
|
||||||
var handler = function() {
|
const handler = function() {
|
||||||
if (width.matches) {
|
if (width.matches) {
|
||||||
sidebar.listen();
|
sidebar.listen()
|
||||||
} else {
|
} else {
|
||||||
sidebar.unlisten();
|
sidebar.unlisten()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
handler() // check listen!
|
||||||
|
|
||||||
var sidebar = new Sidebar('.md-sidebar--primary');
|
const toc = new Sidebar(".md-sidebar--secondary")
|
||||||
handler(); // check listen!
|
toc.listen()
|
||||||
|
|
||||||
var toc = new Sidebar('.md-sidebar--secondary');
|
const spy =
|
||||||
toc.listen();
|
new ScrollSpy(".md-sidebar--secondary .md-nav--secondary .md-nav__link")
|
||||||
|
spy.listen()
|
||||||
|
|
||||||
var spy = new ScrollSpy('.md-sidebar--secondary .md-nav--secondary .md-nav__link');
|
window.addEventListener("resize", handler)
|
||||||
spy.listen();
|
|
||||||
|
|
||||||
window.addEventListener('resize', handler);
|
const query = document.getElementById("query")
|
||||||
|
query.addEventListener("focus", () => {
|
||||||
|
document.querySelector(".md-search").classList.add("md-js__search--locked")
|
||||||
|
})
|
||||||
|
|
||||||
/* Intercept click on search mode toggle */
|
/* Intercept click on search mode toggle */
|
||||||
var offset = 0;
|
let offset = 0
|
||||||
var toggle = document.getElementById('search');
|
const toggle = document.getElementById("search")
|
||||||
toggle.addEventListener('click', function(e) {
|
toggle.addEventListener("click", ev => {
|
||||||
var list = document.body.classList;
|
const list = document.body.classList
|
||||||
var lock = !matchMedia('only screen and (min-width: 960px)').matches;
|
const lock = !matchMedia("only screen and (min-width: 960px)").matches
|
||||||
|
|
||||||
/* Exiting search mode */
|
/* Exiting search mode */
|
||||||
if (list.contains('md-js__body--locked')) {
|
if (list.contains("md-js__body--locked")) {
|
||||||
list.remove('md-js__body--locked');
|
list.remove("md-js__body--locked")
|
||||||
|
|
||||||
/* Scroll to former position, but wait for 100ms to prevent flashes
|
/* Scroll to former position, but wait for 100ms to prevent flashes
|
||||||
on iOS. A short timeout seems to do the trick */
|
on iOS. A short timeout seems to do the trick */
|
||||||
if (lock)
|
if (lock)
|
||||||
setTimeout(function() {
|
setTimeout(() => {
|
||||||
window.scrollTo(0, offset);
|
window.scrollTo(0, offset)
|
||||||
}, 100);
|
}, 100)
|
||||||
|
|
||||||
/* Entering search mode */
|
/* Entering search mode */
|
||||||
} else {
|
} else {
|
||||||
offset = window.scrollY;
|
offset = window.scrollY
|
||||||
|
|
||||||
/* First timeout: scroll to top after transition, to omit flickering */
|
/* First timeout: scroll to top after transition, to omit flickering */
|
||||||
if (lock)
|
if (lock)
|
||||||
setTimeout(function() {
|
setTimeout(() => {
|
||||||
window.scrollTo(0, 0);
|
window.scrollTo(0, 0)
|
||||||
}, 400);
|
}, 400)
|
||||||
|
|
||||||
/* Second timeout: Lock body after finishing transition and scrolling to
|
/* Second timeout: Lock body after finishing transition and scrolling to
|
||||||
top and focus input field. Sadly, the focus event is not dispatched
|
top and focus input field. Sadly, the focus event is not dispatched
|
||||||
on iOS Safari and there's nothing we can do about it. */
|
on iOS Safari and there's nothing we can do about it. */
|
||||||
setTimeout(function() {
|
setTimeout(() => {
|
||||||
|
|
||||||
/* This additional check is necessary to handle fast subsequent clicks
|
/* This additional check is necessary to handle fast subsequent clicks
|
||||||
on the toggle and the timeout to lock the body must be cancelled */
|
on the toggle and the timeout to lock the body must be cancelled */
|
||||||
if (this.checked) {
|
if (ev.target.checked) {
|
||||||
if (lock)
|
if (lock)
|
||||||
list.add('md-js__body--locked');
|
list.add("md-js__body--locked")
|
||||||
setTimeout(function() {
|
setTimeout(() => {
|
||||||
document.getElementById('md-search').focus();
|
document.getElementById("md-search").focus()
|
||||||
}, 200);
|
}, 200)
|
||||||
}
|
}
|
||||||
}.bind(this), 450);
|
}, 450)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
// var toc = new Sidebar('.md-sidebar--secondary');
|
// var toc = new Sidebar('.md-sidebar--secondary');
|
||||||
// toc.listen();
|
// toc.listen();
|
||||||
|
|
||||||
var toggles = document.querySelectorAll('.md-nav__item--nested > .md-nav__link');
|
const toggles =
|
||||||
[].forEach.call(toggles, (toggle) => {
|
document.querySelectorAll(".md-nav__item--nested > .md-nav__link");
|
||||||
let nav = toggle.nextElementSibling;
|
[].forEach.call(toggles, togglex => {
|
||||||
|
const nav = togglex.nextElementSibling
|
||||||
|
|
||||||
// 1.
|
// 1.
|
||||||
|
|
||||||
nav.style.maxHeight = nav.getBoundingClientRect().height + 'px';
|
nav.style.maxHeight = `${nav.getBoundingClientRect().height}px`
|
||||||
|
|
||||||
toggle.addEventListener('click', function () {
|
togglex.addEventListener("click", () => {
|
||||||
let first = nav.getBoundingClientRect().height;
|
const first = nav.getBoundingClientRect().height
|
||||||
if (first) {
|
if (first) {
|
||||||
console.log('closing');
|
// console.log('closing');
|
||||||
nav.style.maxHeight = first + 'px'; // reset!
|
nav.style.maxHeight = `${first}px` // reset!
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
|
|
||||||
nav.classList.add('md-nav--transitioning');
|
nav.classList.add("md-nav--transitioning")
|
||||||
nav.style.maxHeight = '0px';
|
nav.style.maxHeight = "0px"
|
||||||
});
|
})
|
||||||
} else {
|
} else {
|
||||||
console.log('opening');
|
// console.log('opening');
|
||||||
|
|
||||||
/* Toggle and read height */
|
/* Toggle and read height */
|
||||||
nav.style.maxHeight = '';
|
nav.style.maxHeight = ""
|
||||||
|
|
||||||
nav.classList.add('md-nav--toggled');
|
nav.classList.add("md-nav--toggled")
|
||||||
let last = nav.getBoundingClientRect().height;
|
const last = nav.getBoundingClientRect().height
|
||||||
nav.classList.remove('md-nav--toggled');
|
nav.classList.remove("md-nav--toggled")
|
||||||
|
|
||||||
// Initial state
|
// Initial state
|
||||||
nav.style.maxHeight = '0px';
|
nav.style.maxHeight = "0px"
|
||||||
|
|
||||||
/* Enable animations */
|
/* Enable animations */
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
nav.classList.add('md-nav--transitioning');
|
nav.classList.add("md-nav--transitioning")
|
||||||
nav.style.maxHeight = last + 'px';
|
nav.style.maxHeight = `${last}px`
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
})
|
||||||
|
|
||||||
// Capture the end with transitionend
|
// Capture the end with transitionend
|
||||||
nav.addEventListener('transitionend', function() {
|
nav.addEventListener("transitionend", ev => {
|
||||||
this.classList.remove('md-nav--transitioning');
|
ev.target.classList.remove("md-nav--transitioning")
|
||||||
if (this.getBoundingClientRect().height > 0) {
|
if (ev.target.getBoundingClientRect().height > 0) {
|
||||||
this.style.maxHeight = '100%';
|
ev.target.style.maxHeight = "100%"
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
||||||
// document.querySelector('[for="nav-3"]').addEventListener('click', function() {
|
|
||||||
// var el = document.querySelector('[for="nav-3"] + nav');
|
|
||||||
//
|
|
||||||
// // TODO: do via class and disable transforms!!!
|
|
||||||
// el.style.maxHeight = '100%'; // class !?
|
|
||||||
//
|
|
||||||
// var rect = el.getBoundingClientRect();
|
|
||||||
//
|
|
||||||
// console.log(rect);
|
|
||||||
//
|
|
||||||
// el.style.maxHeight = '0px';
|
|
||||||
// requestAnimationFrame(function() {
|
|
||||||
// el.classList.add('md-nav--transitioning');
|
|
||||||
// el.style.maxHeight = rect.height + 'px';
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// // Capture the end with transitionend
|
|
||||||
// el.addEventListener('transitionend', function() {
|
|
||||||
// el.classList.remove('md-nav--transitioning');
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
|
|
||||||
|
|
||||||
// setTimeout(function() {
|
// setTimeout(function() {
|
||||||
fetch('https://api.github.com/repos/squidfunk/mkdocs-material')
|
fetch("https://api.github.com/repos/squidfunk/mkdocs-material")
|
||||||
.then(function(response) {
|
.then(response => {
|
||||||
return response.json()
|
return response.json()
|
||||||
}).then(function(data) {
|
})
|
||||||
var stars = data.stargazers_count;
|
.then(data => {
|
||||||
var forks = data.forks_count;
|
const stars = data.stargazers_count
|
||||||
|
const forks = data.forks_count
|
||||||
// store in session!!!
|
// store in session!!!
|
||||||
var lists = document.querySelectorAll('.md-source__facts');
|
const lists = document.querySelectorAll(".md-source__facts"); // TODO 2x list in drawer and header
|
||||||
[].forEach.call(lists, function(list) {
|
[].forEach.call(lists, list => {
|
||||||
// list.innerHTML += '<li class="md-source__fact">' + stars + ' Stars</li>\n';
|
|
||||||
// list.innerHTML += '<li>' + forks + ' Forks</li>\n';
|
|
||||||
|
|
||||||
var li = document.createElement('li');
|
let li = document.createElement("li")
|
||||||
li.className = 'md-source__fact md-source__fact--hidden';
|
li.className = "md-source__fact md-source__fact--hidden"
|
||||||
li.innerText = stars + ' Stars';
|
li.innerText = `${stars} Stars`
|
||||||
list.appendChild(li);
|
list.appendChild(li)
|
||||||
|
|
||||||
|
setTimeout(lix => {
|
||||||
|
lix.classList.remove("md-source__fact--hidden")
|
||||||
|
}, 100, li)
|
||||||
|
|
||||||
setTimeout(function(li) {
|
li = document.createElement("li")
|
||||||
li.classList.remove('md-source__fact--hidden');
|
li.className = "md-source__fact md-source__fact--hidden"
|
||||||
}, 100, li);
|
li.innerText = `${forks} Forks`
|
||||||
|
list.appendChild(li)
|
||||||
|
|
||||||
li = document.createElement('li');
|
setTimeout(lix => {
|
||||||
li.className = 'md-source__fact md-source__fact--hidden';
|
lix.classList.remove("md-source__fact--hidden")
|
||||||
li.innerText = forks + ' Forks';
|
}, 500, li)
|
||||||
list.appendChild(li);
|
|
||||||
|
|
||||||
setTimeout(function(li) {
|
|
||||||
li.classList.remove('md-source__fact--hidden');
|
|
||||||
}, 500, li);
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
// setTimeout(function() {
|
// setTimeout(function() {
|
||||||
// li.classList.remove('md-source__fact--hidden');
|
// li.classList.remove('md-source__fact--hidden');
|
||||||
// }, 100);
|
// }, 100);
|
||||||
|
|
||||||
}).catch(function(ex) {
|
})
|
||||||
console.log('parsing failed', ex)
|
.catch(() => {
|
||||||
});
|
// console.log("parsing failed", ex)
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
// setTimeout(function() {
|
||||||
|
fetch("/mkdocs/search_index.json") // TODO: prepend BASE URL!!!
|
||||||
|
.then(response => {
|
||||||
|
return response.json()
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
// console.log(data)
|
||||||
|
|
||||||
|
/* Create index */
|
||||||
|
const index = lunr(() => {
|
||||||
|
/* eslint-disable no-invalid-this, lines-around-comment */
|
||||||
|
this.field("title", {boost: 10})
|
||||||
|
this.field("text")
|
||||||
|
this.ref("location")
|
||||||
|
/* eslint-enable no-invalid-this, lines-around-comment */
|
||||||
|
})
|
||||||
|
|
||||||
|
/* Index articles */
|
||||||
|
const articles = {}
|
||||||
|
data.docs.forEach(article => {
|
||||||
|
|
||||||
|
// TODO: match for two whitespaces, then replace unnecessary whitespace after string
|
||||||
|
article.text = article.text.replace(/\s(\.,\:)\s/gi, (string, g1) => {
|
||||||
|
return `${g1} `
|
||||||
|
})
|
||||||
|
// TODO: window.baseUrl sucks...
|
||||||
|
article.location = window.baseUrl + article.location
|
||||||
|
articles[article.location] = article
|
||||||
|
index.add(article)
|
||||||
|
})
|
||||||
|
|
||||||
|
/* Register keyhandler to execute search on key up */
|
||||||
|
const queryx = document.getElementById("query")
|
||||||
|
queryx.addEventListener("keyup", () => {
|
||||||
|
const container = document.querySelector(".md-search-result__list")
|
||||||
|
while (container.firstChild)
|
||||||
|
container.removeChild(container.firstChild)
|
||||||
|
|
||||||
|
// /* Abort, if the query is empty */
|
||||||
|
// var bar = document.querySelector('.bar.search');
|
||||||
|
// if (!query.value.length) {
|
||||||
|
// while (meta.firstChild)
|
||||||
|
// meta.removeChild(meta.firstChild);
|
||||||
|
//
|
||||||
|
// /* Restore state */
|
||||||
|
// bar.classList.remove('non-empty');
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
/* Show reset button */
|
||||||
|
// bar.classList.add('non-empty');
|
||||||
|
|
||||||
|
/* Execute search */
|
||||||
|
const results = index.search(query.value)
|
||||||
|
results.forEach(result => {
|
||||||
|
const article = articles[result.ref]
|
||||||
|
|
||||||
|
/* Create a link referring to the article */
|
||||||
|
const link = document.createElement("a")
|
||||||
|
link.classList.add("md-search-result__link")
|
||||||
|
link.href = article.location
|
||||||
|
|
||||||
|
// /* Create article container */
|
||||||
|
const li = document.createElement("li")
|
||||||
|
li.classList.add("md-search-result__item")
|
||||||
|
li.appendChild(link)
|
||||||
|
|
||||||
|
/* Create title element */
|
||||||
|
const title = document.createElement("div")
|
||||||
|
title.classList.add("md-search-result__title")
|
||||||
|
|
||||||
|
// article.title.split(//)
|
||||||
|
|
||||||
|
title.innerHTML = article.title
|
||||||
|
link.appendChild(title)
|
||||||
|
|
||||||
|
/* Create text element */
|
||||||
|
const text = document.createElement("p")
|
||||||
|
text.classList.add("md-search-result__description")
|
||||||
|
text.innerHTML = article.text // .truncate(140);
|
||||||
|
link.appendChild(text)
|
||||||
|
|
||||||
|
container.appendChild(li)
|
||||||
|
})
|
||||||
|
|
||||||
|
/* Show number of search results */
|
||||||
|
// var number = document.createElement('strong');
|
||||||
|
|
||||||
|
const meta = document.querySelector(".md-search-result__meta")
|
||||||
|
meta.innerHTML = `${results.length} search result${
|
||||||
|
results.length !== 1
|
||||||
|
? "s"
|
||||||
|
: ""}`
|
||||||
|
|
||||||
|
/* Update number */
|
||||||
|
// while (meta.firstChild)
|
||||||
|
// meta.removeChild(meta.firstChild);
|
||||||
|
// meta.appendChild(number);
|
||||||
|
})
|
||||||
|
|
||||||
|
// setTimeout(function() {
|
||||||
|
// li.classList.remove('md-source__fact--hidden');
|
||||||
|
// }, 100);
|
||||||
|
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
// console.log("parsing failed", ex)
|
||||||
|
})
|
||||||
// }, 1000);
|
// }, 1000);
|
||||||
|
|
||||||
});
|
})
|
||||||
|
|||||||
@ -20,8 +20,6 @@
|
|||||||
* IN THE SOFTWARE.
|
* IN THE SOFTWARE.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Navigation expander
|
* Navigation expander
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
@ -35,59 +33,59 @@ class Expander {
|
|||||||
* @param {(string|HTMLElement)} el - Selector or HTML element
|
* @param {(string|HTMLElement)} el - Selector or HTML element
|
||||||
*/
|
*/
|
||||||
constructor(el) {
|
constructor(el) {
|
||||||
this.el_ = (typeof el === 'string') ? document.querySelector(el) : el;
|
this.el_ = (typeof el === "string")
|
||||||
|
? document.querySelector(el)
|
||||||
|
: el
|
||||||
|
|
||||||
/* Event listener */
|
/* Event listener */
|
||||||
this.handler_ = ev => {
|
this.handler_ = ev => {
|
||||||
this.update(ev);
|
this.update(ev)
|
||||||
};
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Update state of expandable element
|
* Update state of expandable element
|
||||||
*
|
*
|
||||||
* @param {Event} ev - Event
|
* @param {Event} ev - Event
|
||||||
|
* @return {void}
|
||||||
*/
|
*/
|
||||||
update(ev) {
|
update() {}
|
||||||
console.log("foo");
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Reset state of expandable element
|
* Reset state of expandable element
|
||||||
|
*
|
||||||
|
* @return {void}
|
||||||
*/
|
*/
|
||||||
reset() {
|
reset() {}
|
||||||
// this.el_.classList.remove('md-js__sidebar--locked');
|
|
||||||
// this.el_.style.height = '';
|
|
||||||
//
|
|
||||||
// /* Reset parameters */
|
|
||||||
// this.height_ = 0;
|
|
||||||
// this.locked_ = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Register listener for all relevant events
|
* Register listener for all relevant events
|
||||||
|
*
|
||||||
|
* @return {void}
|
||||||
*/
|
*/
|
||||||
listen() {
|
listen() {
|
||||||
['click'].forEach(name => {
|
["click"].forEach(name => {
|
||||||
window.addEventListener(name, this.handler_, false);
|
window.addEventListener(name, this.handler_, false)
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Unregister listener for all relevant events
|
* Unregister listener for all relevant events
|
||||||
|
*
|
||||||
|
* @return {void}
|
||||||
*/
|
*/
|
||||||
unlisten() {
|
unlisten() {
|
||||||
['click'].forEach(name => {
|
["click"].forEach(name => {
|
||||||
window.removeEventListener(name, this.handler_, false);
|
window.removeEventListener(name, this.handler_, false)
|
||||||
});
|
})
|
||||||
|
|
||||||
/* Perform reset */
|
/* Perform reset */
|
||||||
this.reset();
|
this.reset()
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Exports
|
* Exports
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
export default Expander;
|
export default Expander
|
||||||
|
|||||||
@ -20,8 +20,6 @@
|
|||||||
* IN THE SOFTWARE.
|
* IN THE SOFTWARE.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Sidebar scroll-spy
|
* Sidebar scroll-spy
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
@ -35,87 +33,96 @@ class ScrollSpy {
|
|||||||
* @param {(string|HTMLCollection)} el - Selector or HTML elements
|
* @param {(string|HTMLCollection)} el - Selector or HTML elements
|
||||||
*/
|
*/
|
||||||
constructor(el) {
|
constructor(el) {
|
||||||
this.el_ = (typeof el === 'string') ? document.querySelectorAll(el) : el;
|
this.el_ = (typeof el === "string")
|
||||||
|
? document.querySelectorAll(el)
|
||||||
|
: el
|
||||||
|
|
||||||
/* Initialize index for currently active element */
|
/* Initialize index for currently active element */
|
||||||
this.index_ = 0;
|
this.index_ = 0
|
||||||
this.offset_ = window.pageYOffset;
|
this.offset_ = window.pageYOffset
|
||||||
|
|
||||||
/* Event listener */
|
/* Event listener */
|
||||||
this.handler_ = ev => {
|
this.handler_ = ev => {
|
||||||
this.update(ev);
|
this.update(ev)
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Update state of sidebar and hash
|
* Update state of sidebar and hash
|
||||||
*
|
*
|
||||||
* @param {Event} ev - Event
|
* @param {Event} ev - Event (omitted)
|
||||||
|
* @return {void}
|
||||||
*/
|
*/
|
||||||
update(ev) {
|
update() {
|
||||||
|
|
||||||
/* Scroll direction is down */
|
/* Scroll direction is down */
|
||||||
if (this.offset_ <= window.pageYOffset) {
|
if (this.offset_ <= window.pageYOffset) {
|
||||||
for (let i = this.index_ + 1; i < this.el_.length; i++) {
|
for (let i = this.index_ + 1; i < this.el_.length; i++) {
|
||||||
let anchor = document.querySelector(this.el_[i].hash); // TODO: improve performance by caching
|
const anchor = document.querySelector(this.el_[i].hash) // TODO: improve performance by caching
|
||||||
if (anchor.offsetTop <= window.pageYOffset) {
|
if (anchor.offsetTop <= window.pageYOffset) {
|
||||||
if (i > 0)
|
if (i > 0)
|
||||||
this.el_[i - 1].classList.add('md-nav__link--marked');
|
this.el_[i - 1].classList.add("md-nav__link--marked")
|
||||||
this.index_ = i;
|
this.index_ = i
|
||||||
} else {
|
} else {
|
||||||
break;
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scroll direction is up */
|
/* Scroll direction is up */
|
||||||
} else {
|
} else {
|
||||||
for (let i = this.index_; i >= 0; i--) {
|
for (let i = this.index_; i >= 0; i--) {
|
||||||
let anchor = document.querySelector(this.el_[i].hash);
|
const anchor = document.querySelector(this.el_[i].hash)
|
||||||
if (anchor.offsetTop > window.pageYOffset) {
|
if (anchor.offsetTop > window.pageYOffset) {
|
||||||
if (i > 0)
|
if (i > 0)
|
||||||
this.el_[i - 1].classList.remove('md-nav__link--marked');
|
this.el_[i - 1].classList.remove("md-nav__link--marked")
|
||||||
} else {
|
} else {
|
||||||
this.index_ = i;
|
this.index_ = i
|
||||||
break;
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Remember current offset for next cycle */
|
/* Remember current offset for next cycle */
|
||||||
this.offset_ = window.pageYOffset;
|
this.offset_ = window.pageYOffset
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Reset state of sidebar
|
* Reset state of sidebar
|
||||||
|
*
|
||||||
|
* @return {void}
|
||||||
*/
|
*/
|
||||||
reset() {
|
reset() {
|
||||||
[].forEach.call(this.el_, el => {
|
[].forEach.call(this.el_, el => {
|
||||||
el.classList.remove('md-nav__link--marked');
|
el.classList.remove("md-nav__link--marked")
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Register listener for all relevant events
|
* Register listener for all relevant events
|
||||||
|
*
|
||||||
|
* @return {void}
|
||||||
*/
|
*/
|
||||||
listen() {
|
listen() {
|
||||||
['scroll', 'resize', 'orientationchange'].forEach(name => {
|
["scroll", "resize", "orientationchange"].forEach(name => {
|
||||||
window.addEventListener(name, this.handler_, false);
|
window.addEventListener(name, this.handler_, false)
|
||||||
});
|
})
|
||||||
|
|
||||||
/* Initial update */
|
/* Initial update */
|
||||||
this.update();
|
this.update()
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Unregister listener for all relevant events
|
* Unregister listener for all relevant events
|
||||||
|
*
|
||||||
|
* @return {void}
|
||||||
*/
|
*/
|
||||||
unlisten() {
|
unlisten() {
|
||||||
['scroll', 'resize', 'orientationchange'].forEach(name => {
|
["scroll", "resize", "orientationchange"].forEach(name => {
|
||||||
window.removeEventListener(name, this.handler_, false);
|
window.removeEventListener(name, this.handler_, false)
|
||||||
});
|
})
|
||||||
|
|
||||||
/* Perform reset */
|
/* Perform reset */
|
||||||
this.reset();
|
this.reset()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -123,4 +130,4 @@ class ScrollSpy {
|
|||||||
* Exports
|
* Exports
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
export default ScrollSpy;
|
export default ScrollSpy
|
||||||
|
|||||||
98
src/assets/javascripts/components/search.js
Normal file
98
src/assets/javascripts/components/search.js
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
||||||
|
*
|
||||||
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
* of this software and associated documentation files (the "Software"), to
|
||||||
|
* deal in the Software without restriction, including without limitation the
|
||||||
|
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||||
|
* sell copies of the Software, and to permit persons to whom the Software is
|
||||||
|
* furnished to do so, subject to the following conditions:
|
||||||
|
*
|
||||||
|
* The above copyright notice and this permission notice shall be included in
|
||||||
|
* all copies or substantial portions of the Software.
|
||||||
|
*
|
||||||
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||||
|
* IN THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use strict"
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Search
|
||||||
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
class Search {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*
|
||||||
|
* @constructor
|
||||||
|
* @param {(string|HTMLElement)} el - Selector or HTML element
|
||||||
|
*/
|
||||||
|
constructor(el) {
|
||||||
|
this.el_ = (typeof el === "string") ? document.querySelector(el) : el
|
||||||
|
|
||||||
|
/* Event listener */
|
||||||
|
this.handler_ = ev => {
|
||||||
|
this.update(ev)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update state and height of sidebar
|
||||||
|
*
|
||||||
|
* @param {Event} ev - Event
|
||||||
|
* @return {void}
|
||||||
|
*/
|
||||||
|
update() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reset state and height of sidebar
|
||||||
|
*
|
||||||
|
* @return {void}
|
||||||
|
*/
|
||||||
|
reset() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register listener for all relevant events
|
||||||
|
*
|
||||||
|
* @return {void}
|
||||||
|
*/
|
||||||
|
listen() {
|
||||||
|
// ['scroll', 'resize', 'orientationchange'].forEach(name => {
|
||||||
|
// window.addEventListener(name, this.handler_, false);
|
||||||
|
// });
|
||||||
|
|
||||||
|
/* Initial update */
|
||||||
|
this.update()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Unregister listener for all relevant events
|
||||||
|
*
|
||||||
|
* @return {void}
|
||||||
|
*/
|
||||||
|
unlisten() {
|
||||||
|
// ['scroll', 'resize', 'orientationchange'].forEach(name => {
|
||||||
|
// window.removeEventListener(name, this.handler_, false);
|
||||||
|
// });
|
||||||
|
|
||||||
|
/* Perform reset */
|
||||||
|
this.reset()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Exports
|
||||||
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
export default Search
|
||||||
@ -20,8 +20,6 @@
|
|||||||
* IN THE SOFTWARE.
|
* IN THE SOFTWARE.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Sidebar sticky-scroll handler
|
* Sidebar sticky-scroll handler
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
@ -35,101 +33,110 @@ class Sidebar {
|
|||||||
* @param {(string|HTMLElement)} el - Selector or HTML element
|
* @param {(string|HTMLElement)} el - Selector or HTML element
|
||||||
*/
|
*/
|
||||||
constructor(el) {
|
constructor(el) {
|
||||||
this.el_ = (typeof el === 'string') ? document.querySelector(el) : el;
|
this.el_ = (typeof el === "string")
|
||||||
|
? document.querySelector(el)
|
||||||
|
: el
|
||||||
|
|
||||||
/* Grab inner and outer container */
|
/* Grab inner and outer container */
|
||||||
this.inner_ = this.el_.parentNode;
|
this.inner_ = this.el_.parentNode
|
||||||
this.outer_ = this.el_.parentNode.parentNode;
|
this.outer_ = this.el_.parentNode.parentNode
|
||||||
|
|
||||||
/* Initialize parameters */
|
/* Initialize parameters */
|
||||||
this.height_ = 0;
|
this.height_ = 0
|
||||||
this.locked_ = false;
|
this.locked_ = false
|
||||||
|
|
||||||
/* Event listener */
|
/* Event listener */
|
||||||
this.handler_ = ev => {
|
this.handler_ = ev => {
|
||||||
this.update(ev);
|
this.update(ev)
|
||||||
};
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Update state and height of sidebar
|
* Update state and height of sidebar
|
||||||
*
|
*
|
||||||
* @param {Event} ev - Event
|
* @param {Event} ev - Event
|
||||||
|
* @return {void}
|
||||||
*/
|
*/
|
||||||
update(ev) {
|
update() {
|
||||||
let bounds = this.inner_.getBoundingClientRect();
|
const bounds = this.inner_.getBoundingClientRect()
|
||||||
let parent = this.outer_.offsetTop;
|
const parent = this.outer_.offsetTop
|
||||||
|
|
||||||
/* Determine top and bottom offsets */
|
/* Determine top and bottom offsets */
|
||||||
let top = bounds.top + window.pageYOffset,
|
const top = bounds.top + window.pageYOffset,
|
||||||
bottom = bounds.bottom + window.pageYOffset;
|
bottom = bounds.bottom + window.pageYOffset
|
||||||
|
|
||||||
/* Determine current y-offset at top and bottom of window */
|
/* Determine current y-offset at top and bottom of window */
|
||||||
let upper = window.pageYOffset,
|
const upper = window.pageYOffset,
|
||||||
lower = window.pageYOffset + window.innerHeight;
|
lower = window.pageYOffset + window.innerHeight
|
||||||
|
|
||||||
/* Calculate new bounds */
|
/* Calculate new bounds */
|
||||||
let offset = top - upper;
|
const offset = top - upper
|
||||||
let height = window.innerHeight - Math.max(lower - bottom, 0)
|
const height = window.innerHeight - Math.max(lower - bottom, 0)
|
||||||
- Math.max(offset, parent);
|
- Math.max(offset, parent)
|
||||||
|
|
||||||
/* If height changed, update element */
|
/* If height changed, update element */
|
||||||
if (height != this.height_)
|
if (height !== this.height_)
|
||||||
this.el_.style.height = (this.height_ = height) + 'px';
|
this.el_.style.height = `${this.height_ = height}px`
|
||||||
|
|
||||||
/* Sidebar should be locked, as we're below parent offset */
|
/* Sidebar should be locked, as we're below parent offset */
|
||||||
if (offset < parent) {
|
if (offset < parent) {
|
||||||
if (!this.locked_) {
|
if (!this.locked_) {
|
||||||
this.el_.classList.add('md-js__sidebar--locked');
|
this.el_.classList.add("md-js__sidebar--locked")
|
||||||
this.locked_ = true;
|
this.locked_ = true
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sidebar should be unlocked, if locked */
|
/* Sidebar should be unlocked, if locked */
|
||||||
} else if (this.locked_) {
|
} else if (this.locked_) {
|
||||||
this.el_.classList.remove('md-js__sidebar--locked');
|
this.el_.classList.remove("md-js__sidebar--locked")
|
||||||
this.locked_ = false;
|
this.locked_ = false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Reset state and height of sidebar
|
* Reset state and height of sidebar
|
||||||
|
*
|
||||||
|
* @return {void}
|
||||||
*/
|
*/
|
||||||
reset() {
|
reset() {
|
||||||
this.el_.classList.remove('md-js__sidebar--locked');
|
this.el_.classList.remove("md-js__sidebar--locked")
|
||||||
this.el_.style.height = '';
|
this.el_.style.height = ""
|
||||||
|
|
||||||
/* Reset parameters */
|
/* Reset parameters */
|
||||||
this.height_ = 0;
|
this.height_ = 0
|
||||||
this.locked_ = false;
|
this.locked_ = false
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Register listener for all relevant events
|
* Register listener for all relevant events
|
||||||
|
*
|
||||||
|
* @return {void}
|
||||||
*/
|
*/
|
||||||
listen() {
|
listen() {
|
||||||
['scroll', 'resize', 'orientationchange'].forEach(name => {
|
["scroll", "resize", "orientationchange"].forEach(name => {
|
||||||
window.addEventListener(name, this.handler_, false);
|
window.addEventListener(name, this.handler_, false)
|
||||||
});
|
})
|
||||||
|
|
||||||
/* Initial update */
|
/* Initial update */
|
||||||
this.update();
|
this.update()
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Unregister listener for all relevant events
|
* Unregister listener for all relevant events
|
||||||
|
*
|
||||||
|
* @return {void}
|
||||||
*/
|
*/
|
||||||
unlisten() {
|
unlisten() {
|
||||||
['scroll', 'resize', 'orientationchange'].forEach(name => {
|
["scroll", "resize", "orientationchange"].forEach(name => {
|
||||||
window.removeEventListener(name, this.handler_, false);
|
window.removeEventListener(name, this.handler_, false)
|
||||||
});
|
})
|
||||||
|
|
||||||
/* Perform reset */
|
/* Perform reset */
|
||||||
this.reset();
|
this.reset()
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ----------------------------------------------------------------------------
|
/* ----------------------------------------------------------------------------
|
||||||
* Exports
|
* Exports
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
export default Sidebar;
|
export default Sidebar
|
||||||
|
|||||||
@ -24,29 +24,162 @@
|
|||||||
// Nothing to see here, move along
|
// Nothing to see here, move along
|
||||||
// ----------------------------------------------------------------------------
|
// ----------------------------------------------------------------------------
|
||||||
|
|
||||||
.md-search__suggest {
|
@include break-from-device(screen) {
|
||||||
@include z-depth(8);
|
|
||||||
|
|
||||||
background: $md-color-white;
|
// .md-search__form {
|
||||||
border-radius: 0 0 px2rem(3px) px2rem(3px);
|
// background: red;
|
||||||
color: #000000;
|
// width: 23.0rem;
|
||||||
text-align: left;
|
// transition: width 0.6s;
|
||||||
border-top: px2rem(1px) solid $md-color-black--lightest;
|
//
|
||||||
display: none; // TODO: doesnt work due to display: none;
|
// .md-js__search--locked & {
|
||||||
opacity: 0;
|
// background: blue;
|
||||||
|
// width: 66.8rem;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
// overflow: auto;
|
// .md-search__input {
|
||||||
transition: opacity .3s;
|
// width: 100% !important;
|
||||||
// pointer-events: none;
|
// }
|
||||||
|
|
||||||
|
.md-search__output {
|
||||||
|
@include z-depth(6);
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
max-height: 0vh; // TODO: can this be done in percent!?!?!?
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity .4s, max-height .4s;
|
||||||
|
.md-js__search--locked & {
|
||||||
|
max-height: 75vh;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
position: absolute; // must be absolute, or header nav will stretch
|
||||||
|
background: $md-color-white;
|
||||||
|
// color: red;
|
||||||
|
border-top: px2rem(1px) solid $md-color-black--lightest; // TODO: box-shadow inset!
|
||||||
|
text-align: left; // TODO: wrap with another div for this effect
|
||||||
|
border-radius: 0 0 px2rem(3px) px2rem(3px);
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
|
// Override native scrollbar styles
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
|
||||||
|
// Style scrollbar thumb
|
||||||
|
&-thumb {
|
||||||
|
background-color: $md-color-black--lighter;
|
||||||
|
|
||||||
|
// Hovered scrollbar thumb
|
||||||
|
&:hover {
|
||||||
|
background-color: $md-color-accent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Scroll shadow!
|
||||||
|
.md-search__output {
|
||||||
|
|
||||||
|
background:
|
||||||
|
linear-gradient(white 10%, rgba(255,255,255,0)), // cover
|
||||||
|
linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0) 60%); // shadow
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-color: white;
|
||||||
|
background-size: 100% 20px, 100% 5px;
|
||||||
|
|
||||||
|
/* Opera doesn't support this in the shorthand */
|
||||||
|
background-attachment: local, scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-search-result {
|
||||||
|
|
||||||
|
|
||||||
.md-search__input:focus ~ & {
|
&__meta {
|
||||||
// animation: anima .3s;
|
color: $md-color-black--light;
|
||||||
display: block;
|
padding-left: 4.8rem;
|
||||||
opacity: 1;
|
padding-right: 1.6rem;
|
||||||
|
line-height: 4.0rem;
|
||||||
|
font-size: ms(-1);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&__list {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
border-top: px2rem(1px) solid $md-color-black--lightest;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
// background: yellow;
|
||||||
|
|
||||||
|
// border-top: px2rem(1px) solid $md-color-black--lightest;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
&__link {
|
||||||
|
overflow: auto;
|
||||||
|
display: block;
|
||||||
|
padding-left: 4.8rem;
|
||||||
|
padding-right: 1.6rem;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: yellow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
color: $md-color-black;
|
||||||
|
font-size: ms(0);
|
||||||
|
line-height: 1.4;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__description {
|
||||||
|
color: $md-color-black--light;
|
||||||
|
font-size: ms(-1);
|
||||||
|
line-height: 1.4;
|
||||||
|
margin: 0.5em 0;;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// .md-nav--secondary > .md-nav__title {
|
||||||
|
// // -webkit-overflow-scrolling: touch;
|
||||||
|
// @include z-depth(1);
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
// // add light border for more contrast
|
||||||
|
// .md-typeset pre {
|
||||||
|
// border: 1px solid rgba(0,0,0,0.0125);
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
// .md-search__suggest {
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// background: $md-color-white;
|
||||||
|
// border-radius: 0 0 px2rem(3px) px2rem(3px);
|
||||||
|
// color: #000000;
|
||||||
|
// text-align: left;
|
||||||
|
// border-top: px2rem(1px) solid $md-color-black--lightest;
|
||||||
|
// display: none; // TODO: doesnt work due to display: none;
|
||||||
|
// opacity: 0;
|
||||||
|
//
|
||||||
|
// // overflow: auto;
|
||||||
|
// transition: opacity .3s;
|
||||||
|
// // pointer-events: none;
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// .md-search__input:focus ~ & {
|
||||||
|
// // animation: anima .3s;
|
||||||
|
// display: block;
|
||||||
|
// opacity: 1;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
.md-search__input:focus {
|
.md-search__input:focus {
|
||||||
border-radius: px2rem(3px) px2rem(3px) 0 0;
|
border-radius: px2rem(3px) px2rem(3px) 0 0;
|
||||||
}
|
}
|
||||||
@ -100,6 +233,14 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.checklist {
|
.checklist {
|
||||||
|
|
||||||
li {
|
li {
|
||||||
@ -253,4 +394,8 @@ mark {
|
|||||||
display: block;
|
display: block;
|
||||||
margin: 0 -16px;
|
margin: 0 -16px;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-search__output {
|
||||||
|
overflow-y: auto; // necessary for rounded borders
|
||||||
}
|
}
|
||||||
@ -59,9 +59,7 @@
|
|||||||
@each $ligature, $name in (
|
@each $ligature, $name in (
|
||||||
"arrow_back": "back",
|
"arrow_back": "back",
|
||||||
"arrow_forward": "forward",
|
"arrow_forward": "forward",
|
||||||
"close": "close",
|
"close": "close"
|
||||||
"menu": "menu",
|
|
||||||
"search": "search"
|
|
||||||
) {
|
) {
|
||||||
&--#{$name}::before {
|
&--#{$name}::before {
|
||||||
content: $ligature;
|
content: $ligature;
|
||||||
|
|||||||
@ -31,7 +31,7 @@
|
|||||||
.headerlink {
|
.headerlink {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: 1.0rem;
|
margin-left: 1.0rem;
|
||||||
transform: translate3d(0, 0.5rem, 0);
|
transform: translate(0, 0.5rem);
|
||||||
transition: transform 0.25s 0.25s,
|
transition: transform 0.25s 0.25s,
|
||||||
color 0.25s,
|
color 0.25s,
|
||||||
opacity 0.125s 0.25s;
|
opacity 0.125s 0.25s;
|
||||||
@ -46,7 +46,7 @@
|
|||||||
&:hover .headerlink,
|
&:hover .headerlink,
|
||||||
&:target .headerlink,
|
&:target .headerlink,
|
||||||
& .headerlink:focus {
|
& .headerlink:focus {
|
||||||
transform: translate3d(0, 0, 0);
|
transform: translate(0, 0);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -55,11 +55,29 @@
|
|||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
// [tablet +]: Hide the search icon from tablet
|
// [tablet +]: Hide the search icon
|
||||||
@include break-from-device(tablet) {
|
@include break-from-device(tablet) {
|
||||||
|
|
||||||
// Search icon
|
// Search icon
|
||||||
&.md-icon--search {
|
&--search {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// [tablet -]: Hide the home icon
|
||||||
|
@include break-to-device(tablet) {
|
||||||
|
|
||||||
|
// Home icon
|
||||||
|
&--home {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// [screen +]: Hide the menu icon
|
||||||
|
@include break-from-device(screen) {
|
||||||
|
|
||||||
|
// Menu icon
|
||||||
|
&--menu {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -97,7 +97,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Hide link to table of contents by default - this will only match the
|
// Hide link to table of contents by default - this will only match the
|
||||||
// table of contents inside the drawer below and including tablet portrait.
|
// table of contents inside the drawer below and including tablet portrait
|
||||||
html &[for="toc"] {
|
html &[for="toc"] {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
@ -159,7 +159,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// List title - higher specificity is necessary to ensure that the title
|
// List title - higher specificity is necessary to ensure that the title
|
||||||
// inside the drawer is always styled accordingly.
|
// inside the drawer is always styled accordingly
|
||||||
html & .md-nav__title {
|
html & .md-nav__title {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0.4rem 1.6rem 0.4rem 5.6rem;
|
padding: 0.4rem 1.6rem 0.4rem 5.6rem;
|
||||||
@ -296,7 +296,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Show link to table of contents - higher specificity is necessary to
|
// Show link to table of contents - higher specificity is necessary to
|
||||||
// display the table of contents inside the drawer.
|
// display the table of contents inside the drawer
|
||||||
html &__link[for="toc"] {
|
html &__link[for="toc"] {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
@ -331,9 +331,9 @@
|
|||||||
@include break-from-device(screen) {
|
@include break-from-device(screen) {
|
||||||
|
|
||||||
// Animation is only possible if JavaScript is available, as the max-height
|
// Animation is only possible if JavaScript is available, as the max-height
|
||||||
// property must be calculated before transitioning.
|
// property must be calculated before transitioning
|
||||||
&.md-nav--transitioning {
|
&.md-nav--transitioning {
|
||||||
transition: max-height 0.4s cubic-bezier(0.86, 0.0, 0.07, 1.0);
|
transition: max-height 0.25s cubic-bezier(0.86, 0.0, 0.07, 1.0);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide nested navigation by default
|
// Hide nested navigation by default
|
||||||
@ -363,10 +363,15 @@
|
|||||||
// Item contains a nested list
|
// Item contains a nested list
|
||||||
.md-nav__item--nested > &::after {
|
.md-nav__item--nested > &::after {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
transform-origin: 0.45em 0.485em;
|
transform-origin: 0.45em 0.45em;
|
||||||
transform-style: preserve-3d;
|
transform-style: preserve-3d;
|
||||||
transition: transform 0.4s;
|
|
||||||
vertical-align: -0.125em;
|
vertical-align: -0.125em;
|
||||||
|
|
||||||
|
// Only animate icon when JavaScript is available, as the height can
|
||||||
|
// not be animated anyway, and better no fun than half the fun
|
||||||
|
.js & {
|
||||||
|
transition: transform 0.4s;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Rotate icon for expanded lists
|
// Rotate icon for expanded lists
|
||||||
|
|||||||
@ -26,46 +26,50 @@
|
|||||||
|
|
||||||
// Application search
|
// Application search
|
||||||
.md-search {
|
.md-search {
|
||||||
// position: relative;
|
|
||||||
padding: 0.8rem 0.8rem 0;
|
padding: 0.8rem 0.8rem 0;
|
||||||
|
|
||||||
|
// Hide search, in case JavaScript is not available.
|
||||||
|
.no-js & {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
// [tablet +]: Header-embedded search
|
// [tablet +]: Header-embedded search
|
||||||
@include break-from-device(tablet) {
|
@include break-from-device(tablet) {
|
||||||
padding: 0.4rem;
|
padding: 0.4rem;
|
||||||
padding-right: 3.2rem;
|
padding-right: 3.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Search overlay
|
// // Search overlay
|
||||||
&__overlay {
|
// &__overlay {
|
||||||
display: none;
|
// display: none;
|
||||||
|
//
|
||||||
// [mobile -]: Only show overlay on mobile
|
// // [mobile -]: Only show overlay on mobile
|
||||||
@include break-to-device(mobile) {
|
// @include break-to-device(mobile) {
|
||||||
display: block;
|
// display: block;
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 0.4rem;
|
// top: 0.4rem;
|
||||||
left: 0.4rem;
|
// left: 0.4rem;
|
||||||
width: 4.0rem;
|
// width: 4.0rem;
|
||||||
height: 4.0rem;
|
// height: 4.0rem;
|
||||||
transform-origin: center;
|
// transform-origin: center;
|
||||||
transition: transform 0.3s 0.1s,
|
// transition: transform 0.3s 0.1s,
|
||||||
opacity 0.2s 0.2s;
|
// opacity 0.2s 0.2s;
|
||||||
border-radius: 2.0rem; // TODO: correct?
|
// border-radius: 2.0rem; // TODO: correct?
|
||||||
background: #EEEEEE;
|
// background: #EEEEEE;
|
||||||
opacity: 0;
|
// opacity: 0;
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
z-index: 0;
|
// z-index: 0;
|
||||||
|
//
|
||||||
// Expanded overlay
|
// // Expanded overlay
|
||||||
.md-toggle--search:checked ~ .md-header & {
|
// .md-toggle--search:checked ~ .md-header & {
|
||||||
transform: scale(40);
|
// transform: scale(40);
|
||||||
transition: transform 0.4s,
|
// transition: transform 0.4s,
|
||||||
opacity 0.1s;
|
// opacity 0.1s;
|
||||||
opacity: 1;
|
// opacity: 1;
|
||||||
z-index: 1;
|
// z-index: 1;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Search form
|
// Search form
|
||||||
&__form {
|
&__form {
|
||||||
@ -77,6 +81,17 @@
|
|||||||
@include break-to-device(mobile) {
|
@include break-to-device(mobile) {
|
||||||
@include z-depth(2);
|
@include z-depth(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// [tablet +]: Header-embedded search
|
||||||
|
@include break-from-device(tablet) {
|
||||||
|
width: 23.0rem;
|
||||||
|
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
|
||||||
|
|
||||||
|
// Active search field
|
||||||
|
.md-js__search--locked & {
|
||||||
|
width: 66.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Icon
|
// Icon
|
||||||
@ -120,11 +135,10 @@
|
|||||||
|
|
||||||
// [tablet +]: Header-embedded search
|
// [tablet +]: Header-embedded search
|
||||||
@include break-from-device(tablet) {
|
@include break-from-device(tablet) {
|
||||||
width: 23.0rem;
|
width: 100%;
|
||||||
height: 4.0rem;
|
height: 4.0rem;
|
||||||
padding-left: 4.8rem;
|
padding-left: 4.8rem;
|
||||||
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0),
|
transition: background-color 0.25s,
|
||||||
background-color 0.25s,
|
|
||||||
color 0.25s;
|
color 0.25s;
|
||||||
background: $md-color-black--lighter;
|
background: $md-color-black--lighter;
|
||||||
color: $md-color-white;
|
color: $md-color-white;
|
||||||
@ -143,8 +157,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Active search field
|
// Active search field
|
||||||
&:focus {
|
.md-js__search--locked & {
|
||||||
width: 66.8rem;
|
border-radius: px2rem(3px) px2rem(3px) 0 0;
|
||||||
background: $md-color-white;
|
background: $md-color-white;
|
||||||
color: $md-color-black;
|
color: $md-color-black;
|
||||||
text-overflow: none;
|
text-overflow: none;
|
||||||
|
|||||||
@ -130,7 +130,12 @@
|
|||||||
|
|
||||||
// Style scrollbar thumb
|
// Style scrollbar thumb
|
||||||
&-thumb {
|
&-thumb {
|
||||||
background: $md-color-black--lighter;
|
background-color: $md-color-black--lighter;
|
||||||
|
|
||||||
|
// Hovered scrollbar thumb
|
||||||
|
&:hover {
|
||||||
|
background-color: $md-color-accent;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -37,6 +37,14 @@
|
|||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Necessary for vertical alignment
|
||||||
|
&::before {
|
||||||
|
display: inline-block;
|
||||||
|
height: 4.8rem;
|
||||||
|
content: "";
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
// Repository is hosted on platform
|
// Repository is hosted on platform
|
||||||
&--bitbucket,
|
&--bitbucket,
|
||||||
&--github,
|
&--github,
|
||||||
@ -44,14 +52,16 @@
|
|||||||
|
|
||||||
// Platform icon
|
// Platform icon
|
||||||
&::before {
|
&::before {
|
||||||
display: inline-block;
|
|
||||||
width: 4.8rem;
|
width: 4.8rem;
|
||||||
height: 4.8rem;
|
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: $md-icon-size $md-icon-size;
|
background-size: $md-icon-size $md-icon-size;
|
||||||
content: "";
|
}
|
||||||
vertical-align: middle;
|
|
||||||
|
// Adjust repository information for platform icon
|
||||||
|
.md-source__repository {
|
||||||
|
margin-left: -4.4rem;
|
||||||
|
padding-left: 4.0rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -74,8 +84,7 @@
|
|||||||
&__repository {
|
&__repository {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin-left: -4.4rem;
|
margin-left: 0.8rem;
|
||||||
padding-left: 4.0rem;
|
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|||||||
@ -170,8 +170,8 @@
|
|||||||
|
|
||||||
<!-- Theme-related and custom javascripts -->
|
<!-- Theme-related and custom javascripts -->
|
||||||
<script>
|
<script>
|
||||||
var base_url = '{{ base_url }}';
|
window.baseUrl = '{{ base_url }}'; // TODO: define in global scope and use IIFE
|
||||||
var repo_url = '{{ repo_url }}';
|
window.repoUrl = '{{ repo_url }}';
|
||||||
</script>
|
</script>
|
||||||
<script src="{{ base_url }}/assets/javascripts/application.js"></script>
|
<script src="{{ base_url }}/assets/javascripts/application.js"></script>
|
||||||
{% for path in extra_javascript %}
|
{% for path in extra_javascript %}
|
||||||
|
|||||||
@ -27,10 +27,20 @@
|
|||||||
<nav class="md-header-nav md-grid">
|
<nav class="md-header-nav md-grid">
|
||||||
<div class="md-flex">
|
<div class="md-flex">
|
||||||
|
|
||||||
|
<!-- Link to home -->
|
||||||
|
<div class="md-flex__cell md-flex__cell--shrink">
|
||||||
|
<a href="{{ homepage_url }}" title="{{ site_name }}"
|
||||||
|
class="md-icon md-header-nav__icon md-header-nav__icon--home">
|
||||||
|
layers
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Button to toggle drawer -->
|
<!-- Button to toggle drawer -->
|
||||||
<div class="md-flex__cell md-flex__cell--shrink">
|
<div class="md-flex__cell md-flex__cell--shrink">
|
||||||
<label class="md-icon md-icon--menu md-header-nav__icon"
|
<label class="md-icon md-header-nav__icon md-header-nav__icon--menu"
|
||||||
for="drawer"></label>
|
for="drawer">
|
||||||
|
menu
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Header title -->
|
<!-- Header title -->
|
||||||
@ -42,8 +52,10 @@
|
|||||||
|
|
||||||
<!-- Button to open search dialogue -->
|
<!-- Button to open search dialogue -->
|
||||||
<div class="md-flex__cell md-flex__cell--shrink">
|
<div class="md-flex__cell md-flex__cell--shrink">
|
||||||
<label class="md-icon md-icon--search md-header-nav__icon"
|
<label class="md-icon md-header-nav__icon md-header-nav__icon--search"
|
||||||
for="search"></label>
|
for="search">
|
||||||
|
search
|
||||||
|
</label>
|
||||||
|
|
||||||
<!-- Search interface -->
|
<!-- Search interface -->
|
||||||
{% include "partials/search.html" %}
|
{% include "partials/search.html" %}
|
||||||
|
|||||||
@ -22,26 +22,79 @@
|
|||||||
|
|
||||||
<!-- Search interface -->
|
<!-- Search interface -->
|
||||||
<div class="md-search">
|
<div class="md-search">
|
||||||
<div class="md-search__overlay"></div> <!-- name this header overlay? the other one search? -->
|
<div class="md-search__overlay"></div>
|
||||||
|
|
||||||
<!-- Include search input -->
|
<!-- Include search input -->
|
||||||
<div class="md-search__inner">
|
<div class="md-search__inner">
|
||||||
<form class="md-search__form">
|
<form class="md-search__form">
|
||||||
<input type="text" class="md-search__input"
|
<input type="text" class="md-search__input"
|
||||||
placeholder="Search" autocapitalize="off" autocorrect="off"
|
placeholder="Search" autocapitalize="off" autocorrect="off"
|
||||||
autocomplete="off" spellcheck="false" id="query" /> <!-- TODO: write no-js note! -->
|
autocomplete="off" spellcheck="false" id="query" />
|
||||||
<label class="md-icon md-icon--search md-search__icon"
|
<label class="md-icon md-search__icon" for="query">
|
||||||
for="query"></label>
|
search
|
||||||
<div class="md-search__suggest">
|
</label>
|
||||||
|
<div class="md-search__output">
|
||||||
|
<div class="md-search-result">
|
||||||
|
<div class="md-search-result__meta">
|
||||||
|
3 Search results
|
||||||
|
</div>
|
||||||
|
<ol class="md-search-result__list"> <!-- TODO: use semantic tags -->
|
||||||
|
<!--<li class="md-search-result__item">
|
||||||
|
<a href="#" class="md-search-result__link">
|
||||||
|
<div class="md-search-result__title">
|
||||||
|
Changing the color palette
|
||||||
|
</div>
|
||||||
|
<p class="md-search-result__description">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
|
||||||
|
maximus ante vel tortor lacinia porttitor. Aenean sed faucibus
|
||||||
|
orci. Vestibulum ante ipsum primis in faucibus orci luctus et
|
||||||
|
ultrices posuere cubilia Curae; Donec pellentesque orci id
|
||||||
|
sodales hendrerit. Proin facilisis eleifend arcu id tincidunt.
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="md-search-result__item">
|
||||||
|
<a href="#" class="md-search-result__link">
|
||||||
|
<div class="md-search-result__title">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
|
||||||
|
maximus ante vel tortor lacinia porttitor.
|
||||||
|
</div>
|
||||||
|
<p class="md-search-result__description">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
|
||||||
|
maximus ante vel tortor lacinia porttitor. Aenean sed faucibus
|
||||||
|
orci. Vestibulum ante ipsum primis in faucibus orci luctus et
|
||||||
|
ultrices posuere cubilia Curae; Donec pellentesque orci id
|
||||||
|
sodales hendrerit. Proin facilisis eleifend arcu id tincidunt.
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="md-search-result__item">
|
||||||
|
<a href="#" class="md-search-result__link">
|
||||||
|
<div class="md-search-result__title">
|
||||||
|
Admonition
|
||||||
|
</div>
|
||||||
|
<p class="md-search-result__description">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
|
||||||
|
maximus ante vel tortor lacinia porttitor. Aenean sed faucibus
|
||||||
|
orci. Vestibulum ante ipsum primis in faucibus orci luctus et
|
||||||
|
ultrices posuere cubilia Curae; Donec pellentesque orci id
|
||||||
|
sodales hendrerit. Proin facilisis eleifend arcu id tincidunt.
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</li>-->
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--<div class="md-search__suggest">
|
||||||
<div class="md-search-term">
|
<div class="md-search-term">
|
||||||
change color
|
change color
|
||||||
</div>
|
</div>
|
||||||
<div class="md-search-term">
|
<div class="md-search-term">
|
||||||
fork theme
|
fork theme
|
||||||
</div>
|
</div>
|
||||||
<div class="md-search-term"> <!-- TODO: make LIs -->
|
<div class="md-search-term">
|
||||||
contributing
|
contributing
|
||||||
</div>
|
</div>-->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- TODO: search results! -->
|
<!-- TODO: search results! -->
|
||||||
|
|||||||
@ -42,4 +42,4 @@
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user