mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-23 23:21:00 +01: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.
|
||||
*/
|
||||
|
||||
"use strict"
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Imports
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
var gulp = require('gulp');
|
||||
var addsrc = require('gulp-add-src');
|
||||
var args = require('yargs').argv;
|
||||
var autoprefix = require('autoprefixer');
|
||||
var changed = require('gulp-changed');
|
||||
var child = require('child_process');
|
||||
var clean = require('del');
|
||||
var compact = require('gulp-remove-empty-lines');
|
||||
var concat = require('gulp-concat');
|
||||
var ignore = require('gulp-ignore');
|
||||
var gulpif = require('gulp-if');
|
||||
var mincss = require('gulp-cssnano');
|
||||
var minhtml = require('gulp-htmlmin');
|
||||
var minsvg = require('gulp-svgmin');
|
||||
var modernizr = require('gulp-modernizr');
|
||||
var mqpacker = require('css-mqpacker');
|
||||
var notifier = require('node-notifier');
|
||||
var path = require('path');
|
||||
var plumber = require('gulp-plumber');
|
||||
var postcss = require('gulp-postcss');
|
||||
var replace = require('gulp-replace');
|
||||
var rev = require('gulp-rev');
|
||||
var sass = require('gulp-sass');
|
||||
var sasslint = require('gulp-sass-lint');
|
||||
var sourcemaps = require('gulp-sourcemaps');
|
||||
var stream = require('webpack-stream');
|
||||
var uglify = require('gulp-uglify');
|
||||
var util = require('gulp-util');
|
||||
var vinyl = require('vinyl-paths');
|
||||
var version = require('gulp-rev-replace');
|
||||
var webpack = require('webpack');
|
||||
var gulp = require("gulp")
|
||||
var args = require("yargs").argv
|
||||
var autoprefix = require("autoprefixer")
|
||||
var changed = require("gulp-changed")
|
||||
var child = require("child_process")
|
||||
var clean = require("del")
|
||||
var compact = require("gulp-remove-empty-lines")
|
||||
var concat = require("gulp-concat")
|
||||
var gulpif = require("gulp-if")
|
||||
var mincss = require("gulp-cssnano")
|
||||
var minhtml = require("gulp-htmlmin")
|
||||
var minsvg = require("gulp-svgmin")
|
||||
var modernizr = require("gulp-modernizr")
|
||||
var mqpacker = require("css-mqpacker")
|
||||
var notifier = require("node-notifier")
|
||||
var path = require("path")
|
||||
var plumber = require("gulp-plumber")
|
||||
var postcss = require("gulp-postcss")
|
||||
var replace = require("gulp-replace")
|
||||
var rev = require("gulp-rev")
|
||||
var sass = require("gulp-sass")
|
||||
var sasslint = require("gulp-sass-lint")
|
||||
var sourcemaps = require("gulp-sourcemaps")
|
||||
var stream = require("webpack-stream")
|
||||
var uglify = require("gulp-uglify")
|
||||
var util = require("gulp-util")
|
||||
var vinyl = require("vinyl-paths")
|
||||
var version = require("gulp-rev-replace")
|
||||
var webpack = require("webpack")
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Locals
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
/* MkDocs server */
|
||||
var server = null;
|
||||
var server = null
|
||||
|
||||
/* Watching context */
|
||||
var watch = false;
|
||||
var watch = false
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Overrides
|
||||
@ -73,28 +73,28 @@ var watch = false;
|
||||
/*
|
||||
* Override gulp.src() for nicer error handling.
|
||||
*/
|
||||
var src = gulp.src;
|
||||
var src = gulp.src // TODO: do this via extension somehow...
|
||||
gulp.src = function() {
|
||||
return src.apply(gulp, arguments)
|
||||
.pipe(
|
||||
plumber(function(error) {
|
||||
util.log(util.colors.red(
|
||||
'Error (' + error.plugin + '): ' + error.message
|
||||
));
|
||||
"Error (" + error.plugin + "): " + error.message
|
||||
))
|
||||
|
||||
/* Extract file where error happened, if existent */
|
||||
var file = error.relativePath
|
||||
? error.relativePath.split('/').pop()
|
||||
: '';
|
||||
? error.relativePath.split("/").pop()
|
||||
: ""
|
||||
|
||||
/* Dispatch system-level notification */
|
||||
notifier.notify({
|
||||
title: 'Error (' + error.plugin + '): ' + file,
|
||||
title: "Error (" + error.plugin + "): " + file,
|
||||
message: error.messageOriginal
|
||||
});
|
||||
this.emit('end');
|
||||
}));
|
||||
};
|
||||
})
|
||||
this.emit("end")
|
||||
}))
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Asset pipeline
|
||||
@ -103,51 +103,51 @@ gulp.src = function() {
|
||||
/*
|
||||
* Clean stylesheets generated by build.
|
||||
*/
|
||||
gulp.task('assets:clean:stylesheets', function() {
|
||||
return gulp.src('material/assets/stylesheets/*')
|
||||
.pipe(vinyl(clean));
|
||||
});
|
||||
gulp.task("assets:clean:stylesheets", () => {
|
||||
return gulp.src("material/assets/stylesheets/*")
|
||||
.pipe(vinyl(clean))
|
||||
})
|
||||
|
||||
/*
|
||||
* Clean javascripts generated by build.
|
||||
*/
|
||||
gulp.task('assets:clean:javascripts', function() {
|
||||
return gulp.src('material/assets/javascripts/*')
|
||||
.pipe(vinyl(clean));
|
||||
});
|
||||
gulp.task("assets:clean:javascripts", () => {
|
||||
return gulp.src("material/assets/javascripts/*")
|
||||
.pipe(vinyl(clean))
|
||||
})
|
||||
|
||||
/*
|
||||
* Clean images generated by build.
|
||||
*/
|
||||
gulp.task('assets:clean:images', function() {
|
||||
return gulp.src('material/assets/images/*')
|
||||
.pipe(vinyl(clean));
|
||||
});
|
||||
gulp.task("assets:clean:images", () => {
|
||||
return gulp.src("material/assets/images/*")
|
||||
.pipe(vinyl(clean))
|
||||
})
|
||||
|
||||
/*
|
||||
* Clean files generated by build.
|
||||
*/
|
||||
gulp.task('assets:clean', [
|
||||
'assets:clean:stylesheets',
|
||||
'assets:clean:javascripts',
|
||||
'assets:clean:images'
|
||||
]);
|
||||
gulp.task("assets:clean", [
|
||||
"assets:clean:stylesheets",
|
||||
"assets:clean:javascripts",
|
||||
"assets:clean:images"
|
||||
])
|
||||
|
||||
/*
|
||||
* Build stylesheets from SASS source.
|
||||
*/
|
||||
gulp.task('assets:build:stylesheets', args.production ? [
|
||||
'assets:clean:stylesheets',
|
||||
'assets:build:images',
|
||||
] : [], function() {
|
||||
return gulp.src('src/assets/stylesheets/*.scss')
|
||||
gulp.task("assets:build:stylesheets", args.production ? [
|
||||
"assets:clean:stylesheets",
|
||||
"assets:build:images"
|
||||
] : [], () => {
|
||||
return gulp.src("src/assets/stylesheets/*.scss")
|
||||
.pipe(gulpif(args.sourcemaps, sourcemaps.init()))
|
||||
.pipe(
|
||||
sass({
|
||||
includePaths: [
|
||||
'node_modules/modularscale-sass/stylesheets',
|
||||
'node_modules/material-design-color',
|
||||
'node_modules/material-shadows'
|
||||
"node_modules/modularscale-sass/stylesheets",
|
||||
"node_modules/material-design-color",
|
||||
"node_modules/material-shadows"
|
||||
]
|
||||
}))
|
||||
.pipe(
|
||||
@ -159,40 +159,44 @@ gulp.task('assets:build:stylesheets', args.production ? [
|
||||
.pipe(gulpif(args.production, mincss()))
|
||||
.pipe(gulpif(args.production, rev()))
|
||||
.pipe(gulpif(args.production,
|
||||
version({ manifest: gulp.src('manifest.json') })))
|
||||
.pipe(gulp.dest('material/assets/stylesheets'))
|
||||
version({ manifest: gulp.src("manifest.json") })))
|
||||
.pipe(gulp.dest("material/assets/stylesheets"))
|
||||
.pipe(gulpif(args.production,
|
||||
rev.manifest('manifest.json', {
|
||||
base: 'material/assets',
|
||||
rev.manifest("manifest.json", {
|
||||
base: "material/assets",
|
||||
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.
|
||||
*/
|
||||
gulp.task('assets:build:javascripts', args.production ? [
|
||||
'assets:clean:javascripts'
|
||||
] : [], function() {
|
||||
return gulp.src('src/assets/javascripts/**/*.js')
|
||||
gulp.task("assets:build:javascripts", args.production ? [
|
||||
"assets:clean:javascripts"
|
||||
] : [], () => {
|
||||
return gulp.src("src/assets/javascripts/**/*.js")
|
||||
.pipe(
|
||||
stream({
|
||||
entry: 'application.js',
|
||||
entry: "application.js",
|
||||
output: {
|
||||
filename: 'application.js'
|
||||
filename: "application.js"
|
||||
},
|
||||
module: {
|
||||
loaders: [{
|
||||
loader: 'babel-loader',
|
||||
test: path.join(__dirname, 'src/assets/javascripts'),
|
||||
loader: "babel-loader",
|
||||
test: path.join(__dirname, "src/assets/javascripts"),
|
||||
query: {
|
||||
presets: 'es2015'
|
||||
presets: "es2015"
|
||||
}
|
||||
}, {
|
||||
test: /\.js$/,
|
||||
loader: "eslint-loader",
|
||||
exclude: /node_modules/
|
||||
}]
|
||||
},
|
||||
plugins: [
|
||||
new webpack.NoErrorsPlugin(),
|
||||
new webpack.NoErrorsPlugin()
|
||||
].concat(
|
||||
args.production ? [
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
@ -206,105 +210,105 @@ gulp.task('assets:build:javascripts', args.production ? [
|
||||
},
|
||||
resolve: {
|
||||
modulesDirectories: [
|
||||
'src/assets/javascripts',
|
||||
'node_modules'
|
||||
"src/assets/javascripts",
|
||||
"node_modules"
|
||||
],
|
||||
extensions: [
|
||||
'', '.js'
|
||||
"", ".js"
|
||||
]
|
||||
},
|
||||
devtool: args.sourcemaps ? 'source-map' : ''
|
||||
devtool: args.sourcemaps ? "source-map" : ""
|
||||
}))
|
||||
.pipe(gulpif(args.production, rev()))
|
||||
.pipe(gulp.dest('material/assets/javascripts'))
|
||||
.pipe(gulp.dest("material/assets/javascripts"))
|
||||
.pipe(gulpif(args.production,
|
||||
rev.manifest('manifest.json', {
|
||||
base: 'material/assets',
|
||||
rev.manifest("manifest.json", {
|
||||
base: "material/assets",
|
||||
merge: true
|
||||
})))
|
||||
.pipe(gulpif(args.production, gulp.dest('material/assets')));
|
||||
});
|
||||
.pipe(gulpif(args.production, gulp.dest("material/assets")))
|
||||
})
|
||||
|
||||
/*
|
||||
* Create a customized modernizr build.
|
||||
*/
|
||||
gulp.task('assets:build:modernizr', [
|
||||
'assets:build:stylesheets',
|
||||
'assets:build:javascripts'
|
||||
], function() {
|
||||
gulp.task("assets:build:modernizr", [
|
||||
"assets:build:stylesheets",
|
||||
"assets:build:javascripts"
|
||||
], () => {
|
||||
return gulp.src([
|
||||
'material/assets/stylesheets/*.css',
|
||||
'material/assets/javascripts/*.js'
|
||||
"material/assets/stylesheets/*.css",
|
||||
"material/assets/javascripts/*.js"
|
||||
]).pipe(
|
||||
modernizr({
|
||||
options: [
|
||||
'addTest', /* Add custom tests */
|
||||
'fnBind', /* Use function.bind */
|
||||
'html5printshiv', /* HTML5 support for IE */
|
||||
'setClasses', /* Add CSS classes to root tag */
|
||||
'testProp' /* Test for properties */
|
||||
"addTest", /* Add custom tests */
|
||||
"fnBind", /* Use function.bind */
|
||||
"html5printshiv", /* HTML5 support for IE */
|
||||
"setClasses", /* Add CSS classes to root tag */
|
||||
"testProp" /* Test for properties */
|
||||
]
|
||||
}))
|
||||
.pipe(concat('modernizr.js'))
|
||||
.pipe(concat("modernizr.js"))
|
||||
.pipe(gulpif(args.production, uglify()))
|
||||
.pipe(gulpif(args.production, rev()))
|
||||
.pipe(gulp.dest('material/assets/javascripts'))
|
||||
.pipe(gulp.dest("material/assets/javascripts"))
|
||||
.pipe(gulpif(args.production,
|
||||
rev.manifest('manifest.json', {
|
||||
base: 'material/assets',
|
||||
rev.manifest("manifest.json", {
|
||||
base: "material/assets",
|
||||
merge: true
|
||||
})))
|
||||
.pipe(gulpif(args.production, gulp.dest('material/assets')));
|
||||
});
|
||||
.pipe(gulpif(args.production, gulp.dest("material/assets")))
|
||||
})
|
||||
|
||||
/*
|
||||
* Copy and minify vector graphics.
|
||||
*/
|
||||
gulp.task('assets:build:images:svg', function() {
|
||||
return gulp.src('src/assets/images/**/*.svg')
|
||||
.pipe(gulpif(watch, changed('material/assets/images')))
|
||||
gulp.task("assets:build:images:svg", () => {
|
||||
return gulp.src("src/assets/images/**/*.svg")
|
||||
.pipe(gulpif(watch, changed("material/assets/images")))
|
||||
.pipe(gulpif(args.production, minsvg()))
|
||||
.pipe(gulpif(args.production, rev()))
|
||||
.pipe(gulp.dest('material/assets/images'))
|
||||
.pipe(gulp.dest("material/assets/images"))
|
||||
.pipe(gulpif(args.production,
|
||||
rev.manifest('manifest.json', {
|
||||
base: 'material/assets',
|
||||
rev.manifest("manifest.json", {
|
||||
base: "material/assets",
|
||||
merge: true
|
||||
})))
|
||||
.pipe(gulpif(args.production, gulp.dest('material/assets')));
|
||||
});
|
||||
.pipe(gulpif(args.production, gulp.dest("material/assets")))
|
||||
})
|
||||
|
||||
/*
|
||||
* Copy favicon.
|
||||
*/
|
||||
gulp.task('assets:build:images:ico', function() {
|
||||
return gulp.src('src/assets/images/**/*.ico')
|
||||
.pipe(gulp.dest('material/assets/images'))
|
||||
});
|
||||
gulp.task("assets:build:images:ico", () => {
|
||||
return gulp.src("src/assets/images/**/*.ico")
|
||||
.pipe(gulp.dest("material/assets/images"))
|
||||
})
|
||||
|
||||
/*
|
||||
* Copy images.
|
||||
*/
|
||||
gulp.task('assets:build:images', [
|
||||
'assets:clean:images'
|
||||
], function() {
|
||||
gulp.task("assets:build:images", [
|
||||
"assets:clean:images"
|
||||
], () => {
|
||||
return gulp.start([
|
||||
'assets:build:images:svg',
|
||||
'assets:build:images:ico'
|
||||
]);
|
||||
});
|
||||
"assets:build:images:svg",
|
||||
"assets:build:images:ico"
|
||||
])
|
||||
})
|
||||
|
||||
/*
|
||||
* Minify views.
|
||||
*/
|
||||
gulp.task('assets:build:views', args.production ? [
|
||||
'assets:build:stylesheets',
|
||||
'assets:build:modernizr',
|
||||
'assets:build:images'
|
||||
] : [], function() {
|
||||
var metadata = require('./package.json');
|
||||
return gulp.src('src/**/*.html')
|
||||
.pipe(gulpif(watch, changed('material')))
|
||||
gulp.task("assets:build:views", args.production ? [
|
||||
"assets:build:stylesheets",
|
||||
"assets:build:modernizr",
|
||||
"assets:build:images"
|
||||
] : [], () => {
|
||||
var metadata = require("./package.json")
|
||||
return gulp.src("src/**/*.html")
|
||||
.pipe(gulpif(watch, changed("material")))
|
||||
.pipe(
|
||||
minhtml({
|
||||
collapseBooleanAttributes: true,
|
||||
@ -313,51 +317,51 @@ gulp.task('assets:build:views', args.production ? [
|
||||
removeStyleLinkTypeAttributes: true,
|
||||
customAttrCollapse: /(content)/
|
||||
}))
|
||||
.pipe(replace('$theme-name$', metadata.name))
|
||||
.pipe(replace('$theme-version$', metadata.version))
|
||||
.pipe(replace("$theme-name$", metadata.name))
|
||||
.pipe(replace("$theme-version$", metadata.version))
|
||||
.pipe(compact())
|
||||
.pipe(gulpif(args.production,
|
||||
version({ manifest: gulp.src('manifest.json') })))
|
||||
.pipe(gulp.dest('material'));
|
||||
});
|
||||
version({ manifest: gulp.src("manifest.json") })))
|
||||
.pipe(gulp.dest("material"))
|
||||
})
|
||||
|
||||
/*
|
||||
* Build assets.
|
||||
*/
|
||||
gulp.task('assets:build', [
|
||||
'assets:build:stylesheets',
|
||||
'assets:build:javascripts',
|
||||
'assets:build:modernizr',
|
||||
'assets:build:images',
|
||||
'assets:build:views'
|
||||
]);
|
||||
gulp.task("assets:build", [
|
||||
"assets:build:stylesheets",
|
||||
"assets:build:javascripts",
|
||||
"assets:build:modernizr",
|
||||
"assets:build:images",
|
||||
"assets:build:views"
|
||||
])
|
||||
|
||||
/*
|
||||
* Watch assets for changes and rebuild on the fly.
|
||||
*/
|
||||
gulp.task('assets:watch', function() {
|
||||
watch = true;
|
||||
gulp.task("assets:watch", () => {
|
||||
watch = true
|
||||
|
||||
/* Rebuild stylesheets */
|
||||
gulp.watch([
|
||||
'src/assets/stylesheets/**/*.scss'
|
||||
], ['assets:build:stylesheets']);
|
||||
"src/assets/stylesheets/**/*.scss"
|
||||
], ["assets:build:stylesheets"])
|
||||
|
||||
/* Rebuild javascripts */
|
||||
gulp.watch([
|
||||
'src/assets/javascripts/**/*.js'
|
||||
], ['assets:build:javascripts']);
|
||||
"src/assets/javascripts/**/*.js"
|
||||
], ["assets:build:javascripts"])
|
||||
|
||||
/* Copy images */
|
||||
gulp.watch([
|
||||
'src/assets/images/**/*'
|
||||
], ['assets:build:images']);
|
||||
"src/assets/images/**/*"
|
||||
], ["assets:build:images"])
|
||||
|
||||
/* Minify views */
|
||||
gulp.watch([
|
||||
'src/**/*.html'
|
||||
], ['assets:build:views']);
|
||||
});
|
||||
"src/**/*.html"
|
||||
], ["assets:build:views"])
|
||||
})
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Application server
|
||||
@ -366,35 +370,35 @@ gulp.task('assets:watch', function() {
|
||||
/*
|
||||
* Build documentation.
|
||||
*/
|
||||
gulp.task('mkdocs:build', [
|
||||
'assets:build'
|
||||
], function() {
|
||||
return child.spawnSync('mkdocs', ['build']);
|
||||
});
|
||||
gulp.task("mkdocs:build", [
|
||||
"assets:build"
|
||||
], () => {
|
||||
return child.spawnSync("mkdocs", ["build"])
|
||||
})
|
||||
|
||||
/*
|
||||
* Restart MkDocs server.
|
||||
*/
|
||||
gulp.task('mkdocs:serve', function() {
|
||||
gulp.task("mkdocs:serve", () => {
|
||||
if (server)
|
||||
server.kill();
|
||||
server.kill()
|
||||
|
||||
/* 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 */
|
||||
server.stdout.on('data', function(data) {
|
||||
var lines = data.toString().split('\n')
|
||||
server.stdout.on("data", data => {
|
||||
var lines = data.toString().split("\n")
|
||||
for (var l in lines)
|
||||
if (lines[l].length)
|
||||
util.log(lines[l]);
|
||||
});
|
||||
util.log(lines[l])
|
||||
})
|
||||
|
||||
/* Print errors to stdout */
|
||||
server.stderr.on('data', function(data) {
|
||||
process.stdout.write(data.toString());
|
||||
});
|
||||
});
|
||||
server.stderr.on("data", data => {
|
||||
process.stdout.write(data.toString())
|
||||
})
|
||||
})
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Interface
|
||||
@ -403,28 +407,28 @@ gulp.task('mkdocs:serve', function() {
|
||||
/*
|
||||
* Build assets and documentation.
|
||||
*/
|
||||
gulp.task('build', [
|
||||
'assets:clean',
|
||||
'assets:build'
|
||||
gulp.task("build", [
|
||||
"assets:clean",
|
||||
"assets:build"
|
||||
].concat(args.mkdocs
|
||||
? 'mkdocs:build'
|
||||
: []));
|
||||
? "mkdocs:build"
|
||||
: []))
|
||||
|
||||
/*
|
||||
* Start asset and MkDocs watchdogs.
|
||||
*/
|
||||
gulp.task('watch', [
|
||||
'assets:clean',
|
||||
'assets:build'
|
||||
], function() {
|
||||
gulp.task("watch", [
|
||||
"assets:clean",
|
||||
"assets:build"
|
||||
], () => {
|
||||
return gulp.start([
|
||||
'assets:watch'
|
||||
"assets:watch"
|
||||
].concat(args.mkdocs
|
||||
? 'mkdocs:serve'
|
||||
: []));
|
||||
});
|
||||
? "mkdocs:serve"
|
||||
: []))
|
||||
})
|
||||
|
||||
/*
|
||||
* 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 *
|
||||
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" %}
|
||||
</div>
|
||||
<script>
|
||||
var base_url = '{{ base_url }}';
|
||||
var repo_url = '{{ repo_url }}';
|
||||
window.baseUrl = '{{ base_url }}'; // TODO: define in global scope and use IIFE
|
||||
window.repoUrl = '{{ repo_url }}';
|
||||
</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 %}
|
||||
<script src="{{ path }}"></script>
|
||||
{% endfor %}
|
||||
|
||||
@ -2,7 +2,14 @@
|
||||
<nav class="md-header-nav md-grid">
|
||||
<div class="md-flex">
|
||||
<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 class="md-flex__cell md-flex__cell--stretch">
|
||||
<span class="md-flex__ellipsis md-header-nav__title">
|
||||
@ -10,7 +17,9 @@
|
||||
</span>
|
||||
</div>
|
||||
<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" %}
|
||||
</div>
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
|
||||
@ -1,20 +1,19 @@
|
||||
<div class="md-search">
|
||||
<div class="md-search__overlay"></div>
|
||||
<div class="md-search__overlay"></div>
|
||||
<div class="md-search__inner">
|
||||
<form class="md-search__form">
|
||||
<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>
|
||||
<div class="md-search__suggest">
|
||||
<div class="md-search-term">
|
||||
change color
|
||||
</div>
|
||||
<div class="md-search-term">
|
||||
fork theme
|
||||
</div>
|
||||
<div class="md-search-term">
|
||||
contributing
|
||||
<input type="text" class="md-search__input" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" id="query">
|
||||
<label class="md-icon md-search__icon" for="query">
|
||||
search
|
||||
</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">
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -10,4 +10,4 @@
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"fastclick": "^1.0.6",
|
||||
"lunr": "^0.7.1",
|
||||
"material-design-color": "^2.3.1",
|
||||
"material-shadows": "^3.0.0",
|
||||
"modularscale-sass": "^2.1.1",
|
||||
@ -26,12 +27,14 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.3.2",
|
||||
"babel-eslint": "^6.1.2",
|
||||
"babel-loader": "^6.2.4",
|
||||
"babel-preset-es2015": "^6.13.2",
|
||||
"css-mqpacker": "^4.0.0",
|
||||
"del": "^2.2.0",
|
||||
"eslint": "^3.6.1",
|
||||
"eslint-loader": "^1.5.0",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-add-src": "^0.2.0",
|
||||
"gulp-changed": "^1.3.2",
|
||||
"gulp-concat": "^2.6.0",
|
||||
"gulp-cssnano": "^2.1.1",
|
||||
|
||||
@ -20,221 +20,313 @@
|
||||
* IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Imports
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
import FastClick from 'fastclick';
|
||||
import Sidebar from './components/sidebar';
|
||||
import ScrollSpy from './components/scrollspy';
|
||||
import Expander from './components/expander';
|
||||
import FastClick from "fastclick"
|
||||
import lunr from "lunr"
|
||||
|
||||
// import Expander from "./components/expander"
|
||||
import Sidebar from "./components/sidebar"
|
||||
import ScrollSpy from "./components/scrollspy"
|
||||
|
||||
// import Search from './components/search';
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Application
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
/* Initialize application upon DOM ready */
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
'use strict';
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
/* Test for iOS */
|
||||
Modernizr.addTest('ios', function() {
|
||||
return !!navigator.userAgent.match(/(iPad|iPhone|iPod)/g);
|
||||
});
|
||||
Modernizr.addTest("ios", () => {
|
||||
return !!navigator.userAgent.match(/(iPad|iPhone|iPod)/g)
|
||||
})
|
||||
|
||||
/* Test for web application context */
|
||||
Modernizr.addTest('standalone', function() {
|
||||
return !!navigator.standalone;
|
||||
});
|
||||
Modernizr.addTest("standalone", () => {
|
||||
return !!navigator.standalone
|
||||
})
|
||||
|
||||
/* 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)");
|
||||
var handler = function() {
|
||||
const sidebar = new Sidebar(".md-sidebar--primary")
|
||||
const handler = function() {
|
||||
if (width.matches) {
|
||||
sidebar.listen();
|
||||
sidebar.listen()
|
||||
} else {
|
||||
sidebar.unlisten();
|
||||
sidebar.unlisten()
|
||||
}
|
||||
}
|
||||
handler() // check listen!
|
||||
|
||||
var sidebar = new Sidebar('.md-sidebar--primary');
|
||||
handler(); // check listen!
|
||||
const toc = new Sidebar(".md-sidebar--secondary")
|
||||
toc.listen()
|
||||
|
||||
var toc = new Sidebar('.md-sidebar--secondary');
|
||||
toc.listen();
|
||||
const spy =
|
||||
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');
|
||||
spy.listen();
|
||||
window.addEventListener("resize", handler)
|
||||
|
||||
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 */
|
||||
var offset = 0;
|
||||
var toggle = document.getElementById('search');
|
||||
toggle.addEventListener('click', function(e) {
|
||||
var list = document.body.classList;
|
||||
var lock = !matchMedia('only screen and (min-width: 960px)').matches;
|
||||
let offset = 0
|
||||
const toggle = document.getElementById("search")
|
||||
toggle.addEventListener("click", ev => {
|
||||
const list = document.body.classList
|
||||
const lock = !matchMedia("only screen and (min-width: 960px)").matches
|
||||
|
||||
/* Exiting search mode */
|
||||
if (list.contains('md-js__body--locked')) {
|
||||
list.remove('md-js__body--locked');
|
||||
if (list.contains("md-js__body--locked")) {
|
||||
list.remove("md-js__body--locked")
|
||||
|
||||
/* Scroll to former position, but wait for 100ms to prevent flashes
|
||||
on iOS. A short timeout seems to do the trick */
|
||||
if (lock)
|
||||
setTimeout(function() {
|
||||
window.scrollTo(0, offset);
|
||||
}, 100);
|
||||
setTimeout(() => {
|
||||
window.scrollTo(0, offset)
|
||||
}, 100)
|
||||
|
||||
/* Entering search mode */
|
||||
} else {
|
||||
offset = window.scrollY;
|
||||
offset = window.scrollY
|
||||
|
||||
/* First timeout: scroll to top after transition, to omit flickering */
|
||||
if (lock)
|
||||
setTimeout(function() {
|
||||
window.scrollTo(0, 0);
|
||||
}, 400);
|
||||
setTimeout(() => {
|
||||
window.scrollTo(0, 0)
|
||||
}, 400)
|
||||
|
||||
/* Second timeout: Lock body after finishing transition and scrolling to
|
||||
top and focus input field. Sadly, the focus event is not dispatched
|
||||
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
|
||||
on the toggle and the timeout to lock the body must be cancelled */
|
||||
if (this.checked) {
|
||||
if (ev.target.checked) {
|
||||
if (lock)
|
||||
list.add('md-js__body--locked');
|
||||
setTimeout(function() {
|
||||
document.getElementById('md-search').focus();
|
||||
}, 200);
|
||||
list.add("md-js__body--locked")
|
||||
setTimeout(() => {
|
||||
document.getElementById("md-search").focus()
|
||||
}, 200)
|
||||
}
|
||||
}.bind(this), 450);
|
||||
}, 450)
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
// var toc = new Sidebar('.md-sidebar--secondary');
|
||||
// toc.listen();
|
||||
|
||||
var toggles = document.querySelectorAll('.md-nav__item--nested > .md-nav__link');
|
||||
[].forEach.call(toggles, (toggle) => {
|
||||
let nav = toggle.nextElementSibling;
|
||||
const toggles =
|
||||
document.querySelectorAll(".md-nav__item--nested > .md-nav__link");
|
||||
[].forEach.call(toggles, togglex => {
|
||||
const nav = togglex.nextElementSibling
|
||||
|
||||
// 1.
|
||||
|
||||
nav.style.maxHeight = nav.getBoundingClientRect().height + 'px';
|
||||
nav.style.maxHeight = `${nav.getBoundingClientRect().height}px`
|
||||
|
||||
toggle.addEventListener('click', function () {
|
||||
let first = nav.getBoundingClientRect().height;
|
||||
togglex.addEventListener("click", () => {
|
||||
const first = nav.getBoundingClientRect().height
|
||||
if (first) {
|
||||
console.log('closing');
|
||||
nav.style.maxHeight = first + 'px'; // reset!
|
||||
// console.log('closing');
|
||||
nav.style.maxHeight = `${first}px` // reset!
|
||||
requestAnimationFrame(() => {
|
||||
|
||||
nav.classList.add('md-nav--transitioning');
|
||||
nav.style.maxHeight = '0px';
|
||||
});
|
||||
nav.classList.add("md-nav--transitioning")
|
||||
nav.style.maxHeight = "0px"
|
||||
})
|
||||
} else {
|
||||
console.log('opening');
|
||||
// console.log('opening');
|
||||
|
||||
/* Toggle and read height */
|
||||
nav.style.maxHeight = '';
|
||||
nav.style.maxHeight = ""
|
||||
|
||||
nav.classList.add('md-nav--toggled');
|
||||
let last = nav.getBoundingClientRect().height;
|
||||
nav.classList.remove('md-nav--toggled');
|
||||
nav.classList.add("md-nav--toggled")
|
||||
const last = nav.getBoundingClientRect().height
|
||||
nav.classList.remove("md-nav--toggled")
|
||||
|
||||
// Initial state
|
||||
nav.style.maxHeight = '0px';
|
||||
nav.style.maxHeight = "0px"
|
||||
|
||||
/* Enable animations */
|
||||
requestAnimationFrame(() => {
|
||||
nav.classList.add('md-nav--transitioning');
|
||||
nav.style.maxHeight = last + 'px';
|
||||
});
|
||||
nav.classList.add("md-nav--transitioning")
|
||||
nav.style.maxHeight = `${last}px`
|
||||
})
|
||||
}
|
||||
|
||||
});
|
||||
})
|
||||
|
||||
// Capture the end with transitionend
|
||||
nav.addEventListener('transitionend', function() {
|
||||
this.classList.remove('md-nav--transitioning');
|
||||
if (this.getBoundingClientRect().height > 0) {
|
||||
this.style.maxHeight = '100%';
|
||||
nav.addEventListener("transitionend", ev => {
|
||||
ev.target.classList.remove("md-nav--transitioning")
|
||||
if (ev.target.getBoundingClientRect().height > 0) {
|
||||
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() {
|
||||
fetch('https://api.github.com/repos/squidfunk/mkdocs-material')
|
||||
.then(function(response) {
|
||||
fetch("https://api.github.com/repos/squidfunk/mkdocs-material")
|
||||
.then(response => {
|
||||
return response.json()
|
||||
}).then(function(data) {
|
||||
var stars = data.stargazers_count;
|
||||
var forks = data.forks_count;
|
||||
})
|
||||
.then(data => {
|
||||
const stars = data.stargazers_count
|
||||
const forks = data.forks_count
|
||||
// store in session!!!
|
||||
var lists = document.querySelectorAll('.md-source__facts');
|
||||
[].forEach.call(lists, function(list) {
|
||||
// list.innerHTML += '<li class="md-source__fact">' + stars + ' Stars</li>\n';
|
||||
// list.innerHTML += '<li>' + forks + ' Forks</li>\n';
|
||||
const lists = document.querySelectorAll(".md-source__facts"); // TODO 2x list in drawer and header
|
||||
[].forEach.call(lists, list => {
|
||||
|
||||
var li = document.createElement('li');
|
||||
li.className = 'md-source__fact md-source__fact--hidden';
|
||||
li.innerText = stars + ' Stars';
|
||||
list.appendChild(li);
|
||||
let li = document.createElement("li")
|
||||
li.className = "md-source__fact md-source__fact--hidden"
|
||||
li.innerText = `${stars} Stars`
|
||||
list.appendChild(li)
|
||||
|
||||
setTimeout(lix => {
|
||||
lix.classList.remove("md-source__fact--hidden")
|
||||
}, 100, li)
|
||||
|
||||
setTimeout(function(li) {
|
||||
li.classList.remove('md-source__fact--hidden');
|
||||
}, 100, li);
|
||||
li = document.createElement("li")
|
||||
li.className = "md-source__fact md-source__fact--hidden"
|
||||
li.innerText = `${forks} Forks`
|
||||
list.appendChild(li)
|
||||
|
||||
li = document.createElement('li');
|
||||
li.className = 'md-source__fact md-source__fact--hidden';
|
||||
li.innerText = forks + ' Forks';
|
||||
list.appendChild(li);
|
||||
|
||||
setTimeout(function(li) {
|
||||
li.classList.remove('md-source__fact--hidden');
|
||||
}, 500, li);
|
||||
setTimeout(lix => {
|
||||
lix.classList.remove("md-source__fact--hidden")
|
||||
}, 500, li)
|
||||
})
|
||||
|
||||
|
||||
// setTimeout(function() {
|
||||
// li.classList.remove('md-source__fact--hidden');
|
||||
// }, 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);
|
||||
|
||||
});
|
||||
})
|
||||
|
||||
@ -20,8 +20,6 @@
|
||||
* IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Navigation expander
|
||||
* ------------------------------------------------------------------------- */
|
||||
@ -35,59 +33,59 @@ class Expander {
|
||||
* @param {(string|HTMLElement)} el - Selector or HTML element
|
||||
*/
|
||||
constructor(el) {
|
||||
this.el_ = (typeof el === 'string') ? document.querySelector(el) : el;
|
||||
this.el_ = (typeof el === "string")
|
||||
? document.querySelector(el)
|
||||
: el
|
||||
|
||||
/* Event listener */
|
||||
this.handler_ = ev => {
|
||||
this.update(ev);
|
||||
};
|
||||
};
|
||||
this.update(ev)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update state of expandable element
|
||||
*
|
||||
* @param {Event} ev - Event
|
||||
* @return {void}
|
||||
*/
|
||||
update(ev) {
|
||||
console.log("foo");
|
||||
};
|
||||
update() {}
|
||||
|
||||
/**
|
||||
* Reset state of expandable element
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
reset() {
|
||||
// this.el_.classList.remove('md-js__sidebar--locked');
|
||||
// this.el_.style.height = '';
|
||||
//
|
||||
// /* Reset parameters */
|
||||
// this.height_ = 0;
|
||||
// this.locked_ = false;
|
||||
};
|
||||
reset() {}
|
||||
|
||||
/**
|
||||
* Register listener for all relevant events
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
listen() {
|
||||
['click'].forEach(name => {
|
||||
window.addEventListener(name, this.handler_, false);
|
||||
});
|
||||
};
|
||||
["click"].forEach(name => {
|
||||
window.addEventListener(name, this.handler_, false)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Unregister listener for all relevant events
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
unlisten() {
|
||||
['click'].forEach(name => {
|
||||
window.removeEventListener(name, this.handler_, false);
|
||||
});
|
||||
["click"].forEach(name => {
|
||||
window.removeEventListener(name, this.handler_, false)
|
||||
})
|
||||
|
||||
/* Perform reset */
|
||||
this.reset();
|
||||
};
|
||||
this.reset()
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Exports
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
export default Expander;
|
||||
export default Expander
|
||||
|
||||
@ -20,8 +20,6 @@
|
||||
* IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Sidebar scroll-spy
|
||||
* ------------------------------------------------------------------------- */
|
||||
@ -35,87 +33,96 @@ class ScrollSpy {
|
||||
* @param {(string|HTMLCollection)} el - Selector or HTML elements
|
||||
*/
|
||||
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 */
|
||||
this.index_ = 0;
|
||||
this.offset_ = window.pageYOffset;
|
||||
this.index_ = 0
|
||||
this.offset_ = window.pageYOffset
|
||||
|
||||
/* Event listener */
|
||||
this.handler_ = ev => {
|
||||
this.update(ev);
|
||||
};
|
||||
this.update(ev)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update state of sidebar and hash
|
||||
*
|
||||
* @param {Event} ev - Event
|
||||
* @param {Event} ev - Event (omitted)
|
||||
* @return {void}
|
||||
*/
|
||||
update(ev) {
|
||||
update() {
|
||||
|
||||
/* Scroll direction is down */
|
||||
if (this.offset_ <= window.pageYOffset) {
|
||||
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 (i > 0)
|
||||
this.el_[i - 1].classList.add('md-nav__link--marked');
|
||||
this.index_ = i;
|
||||
this.el_[i - 1].classList.add("md-nav__link--marked")
|
||||
this.index_ = i
|
||||
} else {
|
||||
break;
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
/* Scroll direction is up */
|
||||
} else {
|
||||
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 (i > 0)
|
||||
this.el_[i - 1].classList.remove('md-nav__link--marked');
|
||||
this.el_[i - 1].classList.remove("md-nav__link--marked")
|
||||
} else {
|
||||
this.index_ = i;
|
||||
break;
|
||||
this.index_ = i
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Remember current offset for next cycle */
|
||||
this.offset_ = window.pageYOffset;
|
||||
this.offset_ = window.pageYOffset
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset state of sidebar
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
reset() {
|
||||
[].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
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
listen() {
|
||||
['scroll', 'resize', 'orientationchange'].forEach(name => {
|
||||
window.addEventListener(name, this.handler_, false);
|
||||
});
|
||||
["scroll", "resize", "orientationchange"].forEach(name => {
|
||||
window.addEventListener(name, this.handler_, false)
|
||||
})
|
||||
|
||||
/* Initial update */
|
||||
this.update();
|
||||
this.update()
|
||||
}
|
||||
|
||||
/**
|
||||
* Unregister listener for all relevant events
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
unlisten() {
|
||||
['scroll', 'resize', 'orientationchange'].forEach(name => {
|
||||
window.removeEventListener(name, this.handler_, false);
|
||||
});
|
||||
["scroll", "resize", "orientationchange"].forEach(name => {
|
||||
window.removeEventListener(name, this.handler_, false)
|
||||
})
|
||||
|
||||
/* Perform reset */
|
||||
this.reset();
|
||||
this.reset()
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,4 +130,4 @@ class ScrollSpy {
|
||||
* 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.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Sidebar sticky-scroll handler
|
||||
* ------------------------------------------------------------------------- */
|
||||
@ -35,101 +33,110 @@ class Sidebar {
|
||||
* @param {(string|HTMLElement)} el - Selector or HTML element
|
||||
*/
|
||||
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 */
|
||||
this.inner_ = this.el_.parentNode;
|
||||
this.outer_ = this.el_.parentNode.parentNode;
|
||||
this.inner_ = this.el_.parentNode
|
||||
this.outer_ = this.el_.parentNode.parentNode
|
||||
|
||||
/* Initialize parameters */
|
||||
this.height_ = 0;
|
||||
this.locked_ = false;
|
||||
this.height_ = 0
|
||||
this.locked_ = false
|
||||
|
||||
/* Event listener */
|
||||
this.handler_ = ev => {
|
||||
this.update(ev);
|
||||
};
|
||||
};
|
||||
this.update(ev)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update state and height of sidebar
|
||||
*
|
||||
* @param {Event} ev - Event
|
||||
* @return {void}
|
||||
*/
|
||||
update(ev) {
|
||||
let bounds = this.inner_.getBoundingClientRect();
|
||||
let parent = this.outer_.offsetTop;
|
||||
update() {
|
||||
const bounds = this.inner_.getBoundingClientRect()
|
||||
const parent = this.outer_.offsetTop
|
||||
|
||||
/* Determine top and bottom offsets */
|
||||
let top = bounds.top + window.pageYOffset,
|
||||
bottom = bounds.bottom + window.pageYOffset;
|
||||
const top = bounds.top + window.pageYOffset,
|
||||
bottom = bounds.bottom + window.pageYOffset
|
||||
|
||||
/* Determine current y-offset at top and bottom of window */
|
||||
let upper = window.pageYOffset,
|
||||
lower = window.pageYOffset + window.innerHeight;
|
||||
const upper = window.pageYOffset,
|
||||
lower = window.pageYOffset + window.innerHeight
|
||||
|
||||
/* Calculate new bounds */
|
||||
let offset = top - upper;
|
||||
let height = window.innerHeight - Math.max(lower - bottom, 0)
|
||||
- Math.max(offset, parent);
|
||||
const offset = top - upper
|
||||
const height = window.innerHeight - Math.max(lower - bottom, 0)
|
||||
- Math.max(offset, parent)
|
||||
|
||||
/* If height changed, update element */
|
||||
if (height != this.height_)
|
||||
this.el_.style.height = (this.height_ = height) + 'px';
|
||||
if (height !== this.height_)
|
||||
this.el_.style.height = `${this.height_ = height}px`
|
||||
|
||||
/* Sidebar should be locked, as we're below parent offset */
|
||||
if (offset < parent) {
|
||||
if (!this.locked_) {
|
||||
this.el_.classList.add('md-js__sidebar--locked');
|
||||
this.locked_ = true;
|
||||
this.el_.classList.add("md-js__sidebar--locked")
|
||||
this.locked_ = true
|
||||
}
|
||||
|
||||
/* Sidebar should be unlocked, if locked */
|
||||
} else if (this.locked_) {
|
||||
this.el_.classList.remove('md-js__sidebar--locked');
|
||||
this.locked_ = false;
|
||||
this.el_.classList.remove("md-js__sidebar--locked")
|
||||
this.locked_ = false
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset state and height of sidebar
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
reset() {
|
||||
this.el_.classList.remove('md-js__sidebar--locked');
|
||||
this.el_.style.height = '';
|
||||
this.el_.classList.remove("md-js__sidebar--locked")
|
||||
this.el_.style.height = ""
|
||||
|
||||
/* Reset parameters */
|
||||
this.height_ = 0;
|
||||
this.locked_ = false;
|
||||
};
|
||||
this.height_ = 0
|
||||
this.locked_ = false
|
||||
}
|
||||
|
||||
/**
|
||||
* Register listener for all relevant events
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
listen() {
|
||||
['scroll', 'resize', 'orientationchange'].forEach(name => {
|
||||
window.addEventListener(name, this.handler_, false);
|
||||
});
|
||||
["scroll", "resize", "orientationchange"].forEach(name => {
|
||||
window.addEventListener(name, this.handler_, false)
|
||||
})
|
||||
|
||||
/* Initial update */
|
||||
this.update();
|
||||
};
|
||||
this.update()
|
||||
}
|
||||
|
||||
/**
|
||||
* Unregister listener for all relevant events
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
unlisten() {
|
||||
['scroll', 'resize', 'orientationchange'].forEach(name => {
|
||||
window.removeEventListener(name, this.handler_, false);
|
||||
});
|
||||
["scroll", "resize", "orientationchange"].forEach(name => {
|
||||
window.removeEventListener(name, this.handler_, false)
|
||||
})
|
||||
|
||||
/* Perform reset */
|
||||
this.reset();
|
||||
};
|
||||
this.reset()
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Exports
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
export default Sidebar;
|
||||
export default Sidebar
|
||||
|
||||
@ -24,29 +24,162 @@
|
||||
// Nothing to see here, move along
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
.md-search__suggest {
|
||||
@include z-depth(8);
|
||||
@include break-from-device(screen) {
|
||||
|
||||
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;
|
||||
// .md-search__form {
|
||||
// background: red;
|
||||
// width: 23.0rem;
|
||||
// transition: width 0.6s;
|
||||
//
|
||||
// .md-js__search--locked & {
|
||||
// background: blue;
|
||||
// width: 66.8rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
// overflow: auto;
|
||||
transition: opacity .3s;
|
||||
// pointer-events: none;
|
||||
// .md-search__input {
|
||||
// width: 100% !important;
|
||||
// }
|
||||
|
||||
.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 ~ & {
|
||||
// animation: anima .3s;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
&__meta {
|
||||
color: $md-color-black--light;
|
||||
padding-left: 4.8rem;
|
||||
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 {
|
||||
border-radius: px2rem(3px) px2rem(3px) 0 0;
|
||||
}
|
||||
@ -100,6 +233,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.checklist {
|
||||
|
||||
li {
|
||||
@ -253,4 +394,8 @@ mark {
|
||||
display: block;
|
||||
margin: 0 -16px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.md-search__output {
|
||||
overflow-y: auto; // necessary for rounded borders
|
||||
}
|
||||
@ -59,9 +59,7 @@
|
||||
@each $ligature, $name in (
|
||||
"arrow_back": "back",
|
||||
"arrow_forward": "forward",
|
||||
"close": "close",
|
||||
"menu": "menu",
|
||||
"search": "search"
|
||||
"close": "close"
|
||||
) {
|
||||
&--#{$name}::before {
|
||||
content: $ligature;
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
.headerlink {
|
||||
display: inline-block;
|
||||
margin-left: 1.0rem;
|
||||
transform: translate3d(0, 0.5rem, 0);
|
||||
transform: translate(0, 0.5rem);
|
||||
transition: transform 0.25s 0.25s,
|
||||
color 0.25s,
|
||||
opacity 0.125s 0.25s;
|
||||
@ -46,7 +46,7 @@
|
||||
&:hover .headerlink,
|
||||
&:target .headerlink,
|
||||
& .headerlink:focus {
|
||||
transform: translate3d(0, 0, 0);
|
||||
transform: translate(0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
@ -55,11 +55,29 @@
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
// [tablet +]: Hide the search icon from tablet
|
||||
// [tablet +]: Hide the search icon
|
||||
@include break-from-device(tablet) {
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -97,7 +97,7 @@
|
||||
}
|
||||
|
||||
// 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"] {
|
||||
display: none;
|
||||
|
||||
@ -159,7 +159,7 @@
|
||||
}
|
||||
|
||||
// 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 {
|
||||
position: relative;
|
||||
padding: 0.4rem 1.6rem 0.4rem 5.6rem;
|
||||
@ -296,7 +296,7 @@
|
||||
}
|
||||
|
||||
// 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"] {
|
||||
display: block;
|
||||
|
||||
@ -331,9 +331,9 @@
|
||||
@include break-from-device(screen) {
|
||||
|
||||
// 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 {
|
||||
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
|
||||
@ -363,10 +363,15 @@
|
||||
// Item contains a nested list
|
||||
.md-nav__item--nested > &::after {
|
||||
display: inline-block;
|
||||
transform-origin: 0.45em 0.485em;
|
||||
transform-origin: 0.45em 0.45em;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.4s;
|
||||
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
|
||||
|
||||
@ -26,46 +26,50 @@
|
||||
|
||||
// Application search
|
||||
.md-search {
|
||||
// position: relative;
|
||||
padding: 0.8rem 0.8rem 0;
|
||||
|
||||
// Hide search, in case JavaScript is not available.
|
||||
.no-js & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// [tablet +]: Header-embedded search
|
||||
@include break-from-device(tablet) {
|
||||
padding: 0.4rem;
|
||||
padding-right: 3.2rem;
|
||||
}
|
||||
|
||||
// Search overlay
|
||||
&__overlay {
|
||||
display: none;
|
||||
|
||||
// [mobile -]: Only show overlay on mobile
|
||||
@include break-to-device(mobile) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
left: 0.4rem;
|
||||
width: 4.0rem;
|
||||
height: 4.0rem;
|
||||
transform-origin: center;
|
||||
transition: transform 0.3s 0.1s,
|
||||
opacity 0.2s 0.2s;
|
||||
border-radius: 2.0rem; // TODO: correct?
|
||||
background: #EEEEEE;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
|
||||
// Expanded overlay
|
||||
.md-toggle--search:checked ~ .md-header & {
|
||||
transform: scale(40);
|
||||
transition: transform 0.4s,
|
||||
opacity 0.1s;
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
// // Search overlay
|
||||
// &__overlay {
|
||||
// display: none;
|
||||
//
|
||||
// // [mobile -]: Only show overlay on mobile
|
||||
// @include break-to-device(mobile) {
|
||||
// display: block;
|
||||
// position: absolute;
|
||||
// top: 0.4rem;
|
||||
// left: 0.4rem;
|
||||
// width: 4.0rem;
|
||||
// height: 4.0rem;
|
||||
// transform-origin: center;
|
||||
// transition: transform 0.3s 0.1s,
|
||||
// opacity 0.2s 0.2s;
|
||||
// border-radius: 2.0rem; // TODO: correct?
|
||||
// background: #EEEEEE;
|
||||
// opacity: 0;
|
||||
// overflow: hidden;
|
||||
// z-index: 0;
|
||||
//
|
||||
// // Expanded overlay
|
||||
// .md-toggle--search:checked ~ .md-header & {
|
||||
// transform: scale(40);
|
||||
// transition: transform 0.4s,
|
||||
// opacity 0.1s;
|
||||
// opacity: 1;
|
||||
// z-index: 1;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// Search form
|
||||
&__form {
|
||||
@ -77,6 +81,17 @@
|
||||
@include break-to-device(mobile) {
|
||||
@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
|
||||
@ -120,11 +135,10 @@
|
||||
|
||||
// [tablet +]: Header-embedded search
|
||||
@include break-from-device(tablet) {
|
||||
width: 23.0rem;
|
||||
width: 100%;
|
||||
height: 4.0rem;
|
||||
padding-left: 4.8rem;
|
||||
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0),
|
||||
background-color 0.25s,
|
||||
transition: background-color 0.25s,
|
||||
color 0.25s;
|
||||
background: $md-color-black--lighter;
|
||||
color: $md-color-white;
|
||||
@ -143,8 +157,8 @@
|
||||
}
|
||||
|
||||
// Active search field
|
||||
&:focus {
|
||||
width: 66.8rem;
|
||||
.md-js__search--locked & {
|
||||
border-radius: px2rem(3px) px2rem(3px) 0 0;
|
||||
background: $md-color-white;
|
||||
color: $md-color-black;
|
||||
text-overflow: none;
|
||||
|
||||
@ -130,7 +130,12 @@
|
||||
|
||||
// Style scrollbar 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;
|
||||
}
|
||||
|
||||
// Necessary for vertical alignment
|
||||
&::before {
|
||||
display: inline-block;
|
||||
height: 4.8rem;
|
||||
content: "";
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Repository is hosted on platform
|
||||
&--bitbucket,
|
||||
&--github,
|
||||
@ -44,14 +52,16 @@
|
||||
|
||||
// Platform icon
|
||||
&::before {
|
||||
display: inline-block;
|
||||
width: 4.8rem;
|
||||
height: 4.8rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
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 {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin-left: -4.4rem;
|
||||
padding-left: 4.0rem;
|
||||
margin-left: 0.8rem;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
@ -170,8 +170,8 @@
|
||||
|
||||
<!-- Theme-related and custom javascripts -->
|
||||
<script>
|
||||
var base_url = '{{ base_url }}';
|
||||
var repo_url = '{{ repo_url }}';
|
||||
window.baseUrl = '{{ base_url }}'; // TODO: define in global scope and use IIFE
|
||||
window.repoUrl = '{{ repo_url }}';
|
||||
</script>
|
||||
<script src="{{ base_url }}/assets/javascripts/application.js"></script>
|
||||
{% for path in extra_javascript %}
|
||||
|
||||
@ -27,10 +27,20 @@
|
||||
<nav class="md-header-nav md-grid">
|
||||
<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 -->
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
<label class="md-icon md-icon--menu md-header-nav__icon"
|
||||
for="drawer"></label>
|
||||
<label class="md-icon md-header-nav__icon md-header-nav__icon--menu"
|
||||
for="drawer">
|
||||
menu
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Header title -->
|
||||
@ -42,8 +52,10 @@
|
||||
|
||||
<!-- Button to open search dialogue -->
|
||||
<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>
|
||||
|
||||
<!-- Search interface -->
|
||||
{% include "partials/search.html" %}
|
||||
|
||||
@ -22,26 +22,79 @@
|
||||
|
||||
<!-- Search interface -->
|
||||
<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 -->
|
||||
<div class="md-search__inner">
|
||||
<form class="md-search__form">
|
||||
<input type="text" class="md-search__input"
|
||||
placeholder="Search" autocapitalize="off" autocorrect="off"
|
||||
autocomplete="off" spellcheck="false" id="query" /> <!-- TODO: write no-js note! -->
|
||||
<label class="md-icon md-icon--search md-search__icon"
|
||||
for="query"></label>
|
||||
<div class="md-search__suggest">
|
||||
autocomplete="off" spellcheck="false" id="query" />
|
||||
<label class="md-icon md-search__icon" for="query">
|
||||
search
|
||||
</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">
|
||||
change color
|
||||
</div>
|
||||
<div class="md-search-term">
|
||||
fork theme
|
||||
</div>
|
||||
<div class="md-search-term"> <!-- TODO: make LIs -->
|
||||
<div class="md-search-term">
|
||||
contributing
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<!-- TODO: search results! -->
|
||||
|
||||
@ -42,4 +42,4 @@
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user