OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Implemented basic search modal functionality

Browse Source
This commit is contained in:
squidfunk 2016-10-23 10:21:37 +02:00
parent 46b7e0f5fe
commit 95435e7035
56 changed files with 7298 additions and 790 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.babelrc
View File

@ -2,8 +2,9 @@
"presets": ["es2015"],
"plugins": [
"add-module-exports",
"babel-root-import",
["transform-react-jsx", {
"pragma": "JSX.createElement"
}]
]
}
}

3
.eslintignore
View File

@ -1,3 +1,4 @@
/build
/material
/site
/site
/lib

3
.eslintrc
View File

@ -191,9 +191,10 @@
"virtual": "abstract"
},
"requireParamDescription": true,
"requireReturn": false,
"requireReturnDescription": true
}],
"yield-star-spacing": 2
},
"root": true
}
}

28
.github/ISSUE_TEMPLATE.md vendored Normal file
View File

@ -0,0 +1,28 @@
## Description
[Description of the bug]
### Expected behavior
[What you expected to happen]
### Actual behavior
[What is actually happening]
### Steps to reproduce the bug
1. [First step]
2. [Second step]
3. [and so on...]
### Package versions
- Python: `python --version`
- MkDocs: `mkdocs --version`
- Material: `pip show mkdocs-material | grep -E ^Version`
### System information
- OS: [The operating system you're running]
- Browser: [The browser used, if relevant]

4
.sass-lint.yml
View File

@ -22,7 +22,7 @@ files:
ignore:
- node_modules/**
- src/assets/stylesheets/_shame.scss
- src/assets/stylesheets/extensions/_codehilite.scss # Temporary disabled
- src/assets/stylesheets/extensions/_codehilite.scss
options:
merge-default-rules: true
@ -122,4 +122,4 @@ rules:
- 2
- convention: hyphenatedbem
- allow-leading-underscore: false
zero-unit: 2
zero-unit: 2

4
docs/extensions/codehilite.md
View File

@ -543,7 +543,7 @@ io.write("\n")
``` mysql
SELECT
Employees.EmployeeID`,
Employees.EmployeeID,
Employees.Name,
Employees.Salary,
Manager.Name AS Manager
@ -702,4 +702,4 @@ end
```
[Pygments]: http://pygments.org
[300 languages]: http://pygments.org/languages
[300 languages]: http://pygments.org/languages

4
docs/extensions/footnotes.md
View File

@ -8,7 +8,7 @@ sit amet, consectetur adipiscing elit.
## Headline on fourth level
Footnotes[^1] have a label[^@#$%] and the footnote's content.
### 2nd Headline on fourth level
### Second Headline on fourth level
[^1]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
@ -44,4 +44,4 @@ Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
sit amet, consectetur adipiscing elit.

2
lib/providers/jsx.js
View File

@ -27,7 +27,7 @@
export default /* JSX */ {
/**
* Create a native DOM node
* Create a native DOM node from JSX's intermediate representation
*
* @param {string} tag - Tag name
* @param {object} properties - Properties

72
lib/tasks/tests/regression/foo.js Normal file
View File

@ -0,0 +1,72 @@
import * as selenium from "./selenium"
import path from "path"
import Gemini from "gemini"
export default (gulp, config) => {
return done => {
selenium.start(() => {
// const file = require(
// path.resolve(process.cwd(),
// config.tests.regression.geminiConfigPath,
// ".gemini-local.json"
// ))
const configx = {
"rootUrl": "http://localhost:8000",
"gridUrl": "http://localhost:4444/wd/hub",
"screenshotsDir": "./tests/regression/baseline/local",
"browsers": {
"chrome": {
"desiredCapabilities": {
"browserName": "chrome"
}
}
},
"system": {
"projectRoot": "../../../",
"sourceRoot": "src/assets/stylesheets"
}
}
// https://www.npmjs.com/package/gemini-sauce
console.log("running gemini...")
const gemini = new Gemini(configx)
gemini.test("tests/regression/styleguide.js", {
reporters: ["html"]
})
.then(() => {
console.log("success")
selenium.stop()
done()
}, err => {
console.log("fail")
selenium.stop()
throw err
})
})
// selenium.start(() => {
// const geminiConfig = require(
// path.resolve(
// process.cwd(),
// config.tests.regression.geminiConfigPath,
// ".gemini-local.json"
// ))
// geminiConfig.rootUrl = `http://127.0.0.1:${config.patternlabServer.port}`
//
// const gemini = new Gemini(geminiConfig)
// gemini.test(config.tests.regression.patternlabToGeminiOutput, {
// reporters: ["html"]
// })
// .then(() => {
// selenium.stop()
// done()
// }, err => {
// selenium.stop()
// throw err
// })
// })
}
}

93
src/assets/javascripts/components/expander.js → lib/tasks/tests/regression/selenium.js
View File

@ -20,72 +20,53 @@
* IN THE SOFTWARE.
*/
import selenium from "selenium-standalone"
/* ----------------------------------------------------------------------------
* Navigation expander
* Locals
* ------------------------------------------------------------------------- */
class Expander {
/* Selenium server */
let server = null
/**
* Constructor
*
* @constructor
* @param {(string|HTMLElement)} el - Selector or HTML element
*/
constructor(el) {
this.el_ = (typeof el === "string")
? document.querySelector(el)
: el
/* ----------------------------------------------------------------------------
* Definition
* ------------------------------------------------------------------------- */
/* Event listener */
this.handler_ = ev => {
this.update(ev)
export const start = done => {
selenium.start({}, (err, proc) => {
if (err) {
/* Install selenium, if not present */
if (/^Missing(.*)chromedriver$/.test(err.message)) {
selenium.install(done)
/* Start selenium again */
selenium.start({}, (err_, proc_) => {
server = proc_
})
/* Otherwise, throw error */
} else {
throw err
}
}
}
/**
* Update state of expandable element
*
* @param {Event} ev - Event
* @return {void}
*/
update() {}
/* Remember process handle */
server = server || proc
done()
})
}
/**
* Reset state of expandable element
*
* @return {void}
*/
reset() {}
/**
* Register listener for all relevant events
*
* @return {void}
*/
listen() {
["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)
})
/* Perform reset */
this.reset()
}
export const stop = () => {
if (server)
server.kill()
}
/* ----------------------------------------------------------------------------
* Exports
* Signal handler
* ------------------------------------------------------------------------- */
export default Expander
/* Register signal handler for all relevant events */
for (const signal of ["SIGTERM", "SIGINT", "exit"])
process.on(signal, stop)

1
material/assets/images/icons/bitbucket-black-850dc5f8b2.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="352" height="448" viewBox="0 0 352 448"><path d="M203.75 214.75q2 15.75-12.625 25.25t-27.875 1.5q-9.75-4.25-13.375-14.5t-.125-20.5 13-14.5q9-4.5 18.125-3t16 8.875 6.875 16.875zm27.75-5.25q-3.5-26.75-28.25-41T154 165.25q-15.75 7-25.125 22.125t-8.625 32.375q1 22.75 19.375 38.75t41.375 14q22.75-2 38-21t12.5-42zM291.25 74q-5-6.75-14-11.125t-14.5-5.5T245 54.25q-72.75-11.75-141.5.5-10.75 1.75-16.5 3t-13.75 5.5T60.75 74q7.5 7 19 11.375t18.375 5.5T120 93.75Q177 101 232 94q15.75-2 22.375-3t18.125-5.375T291.25 74zm14.25 258.75q-2 6.5-3.875 19.125t-3.5 21-7.125 17.5-14.5 14.125q-21.5 12-47.375 17.875t-50.5 5.5-50.375-4.625q-11.5-2-20.375-4.5T88.75 412 70.5 401.125t-13-15.375q-6.25-24-14.25-73l1.5-4 4.5-2.25q55.75 37 126.625 37t126.875-37q5.25 1.5 6 5.75t-1.25 11.25-2 9.25zM350.75 92.5q-6.5 41.75-27.75 163.75-1.25 7.5-6.75 14t-10.875 10T291.75 288q-63 31.5-152.5 22-62-6.75-98.5-34.75-3.75-3-6.375-6.625t-4.25-8.75-2.25-8.5-1.5-9.875T25 232.75q-2.25-12.5-6.625-37.5t-7-40.375T5.5 118 0 78.5Q.75 72 4.375 66.375T12.25 57t11.25-7.5T35 43.875t12-4.625q31.25-11.5 78.25-16 94.75-9.25 169 12.5Q333 47.25 348 66.25q4 5 4.125 12.75t-1.375 13.5z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

20
material/assets/images/icons/bitbucket-black.svg Normal file
View File

@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" width="352" height="448"
viewBox="0 0 352 448">
<path d="M203.75 214.75q2 15.75-12.625 25.25t-27.875
1.5q-9.75-4.25-13.375-14.5t-0.125-20.5 13-14.5q9-4.5 18.125-3t16 8.875
6.875 16.875zM231.5 209.5q-3.5-26.75-28.25-41t-49.25-3.25q-15.75
7-25.125 22.125t-8.625 32.375q1 22.75 19.375 38.75t41.375 14q22.75-2
38-21t12.5-42zM291.25
74q-5-6.75-14-11.125t-14.5-5.5-17.75-3.125q-72.75-11.75-141.5 0.5-10.75
1.75-16.5 3t-13.75 5.5-12.5 10.75q7.5 7 19 11.375t18.375 5.5 21.875
2.875q57 7.25 112 0.25 15.75-2 22.375-3t18.125-5.375 18.75-11.625zM305.5
332.75q-2 6.5-3.875 19.125t-3.5 21-7.125 17.5-14.5 14.125q-21.5
12-47.375 17.875t-50.5 5.5-50.375-4.625q-11.5-2-20.375-4.5t-19.125-6.75-18.25-10.875-13-15.375q-6.25-24-14.25-73l1.5-4
4.5-2.25q55.75 37 126.625 37t126.875-37q5.25 1.5 6 5.75t-1.25 11.25-2
9.25zM350.75 92.5q-6.5 41.75-27.75 163.75-1.25 7.5-6.75 14t-10.875
10-13.625 7.75q-63 31.5-152.5
22-62-6.75-98.5-34.75-3.75-3-6.375-6.625t-4.25-8.75-2.25-8.5-1.5-9.875-1.375-8.75q-2.25-12.5-6.625-37.5t-7-40.375-5.875-36.875-5.5-39.5q0.75-6.5
4.375-12.125t7.875-9.375 11.25-7.5 11.5-5.625 12-4.625q31.25-11.5
78.25-16 94.75-9.25 169 12.5 38.75 11.5 53.75 30.5 4 5 4.125
12.75t-1.375 13.5z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
material/assets/images/icons/bitbucket-white-42306ad0de.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="352" height="448" viewBox="0 0 352 448"><path d="M203.75 214.75q2 15.75-12.625 25.25t-27.875 1.5q-9.75-4.25-13.375-14.5t-.125-20.5 13-14.5q9-4.5 18.125-3t16 8.875 6.875 16.875zm27.75-5.25q-3.5-26.75-28.25-41T154 165.25q-15.75 7-25.125 22.125t-8.625 32.375q1 22.75 19.375 38.75t41.375 14q22.75-2 38-21t12.5-42zM291.25 74q-5-6.75-14-11.125t-14.5-5.5T245 54.25q-72.75-11.75-141.5.5-10.75 1.75-16.5 3t-13.75 5.5T60.75 74q7.5 7 19 11.375t18.375 5.5T120 93.75Q177 101 232 94q15.75-2 22.375-3t18.125-5.375T291.25 74zm14.25 258.75q-2 6.5-3.875 19.125t-3.5 21-7.125 17.5-14.5 14.125q-21.5 12-47.375 17.875t-50.5 5.5-50.375-4.625q-11.5-2-20.375-4.5T88.75 412 70.5 401.125t-13-15.375q-6.25-24-14.25-73l1.5-4 4.5-2.25q55.75 37 126.625 37t126.875-37q5.25 1.5 6 5.75t-1.25 11.25-2 9.25zM350.75 92.5q-6.5 41.75-27.75 163.75-1.25 7.5-6.75 14t-10.875 10T291.75 288q-63 31.5-152.5 22-62-6.75-98.5-34.75-3.75-3-6.375-6.625t-4.25-8.75-2.25-8.5-1.5-9.875T25 232.75q-2.25-12.5-6.625-37.5t-7-40.375T5.5 118 0 78.5Q.75 72 4.375 66.375T12.25 57t11.25-7.5T35 43.875t12-4.625q31.25-11.5 78.25-16 94.75-9.25 169 12.5Q333 47.25 348 66.25q4 5 4.125 12.75t-1.375 13.5z" fill="#fff"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

20
material/assets/images/icons/bitbucket-white.svg Normal file
View File

@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" width="352" height="448"
viewBox="0 0 352 448">
<path d="M203.75 214.75q2 15.75-12.625 25.25t-27.875
1.5q-9.75-4.25-13.375-14.5t-0.125-20.5 13-14.5q9-4.5 18.125-3t16 8.875
6.875 16.875zM231.5 209.5q-3.5-26.75-28.25-41t-49.25-3.25q-15.75
7-25.125 22.125t-8.625 32.375q1 22.75 19.375 38.75t41.375 14q22.75-2
38-21t12.5-42zM291.25
74q-5-6.75-14-11.125t-14.5-5.5-17.75-3.125q-72.75-11.75-141.5 0.5-10.75
1.75-16.5 3t-13.75 5.5-12.5 10.75q7.5 7 19 11.375t18.375 5.5 21.875
2.875q57 7.25 112 0.25 15.75-2 22.375-3t18.125-5.375 18.75-11.625zM305.5
332.75q-2 6.5-3.875 19.125t-3.5 21-7.125 17.5-14.5 14.125q-21.5
12-47.375 17.875t-50.5 5.5-50.375-4.625q-11.5-2-20.375-4.5t-19.125-6.75-18.25-10.875-13-15.375q-6.25-24-14.25-73l1.5-4
4.5-2.25q55.75 37 126.625 37t126.875-37q5.25 1.5 6 5.75t-1.25 11.25-2
9.25zM350.75 92.5q-6.5 41.75-27.75 163.75-1.25 7.5-6.75 14t-10.875
10-13.625 7.75q-63 31.5-152.5
22-62-6.75-98.5-34.75-3.75-3-6.375-6.625t-4.25-8.75-2.25-8.5-1.5-9.875-1.375-8.75q-2.25-12.5-6.625-37.5t-7-40.375-5.875-36.875-5.5-39.5q0.75-6.5
4.375-12.125t7.875-9.375 11.25-7.5 11.5-5.625 12-4.625q31.25-11.5
78.25-16 94.75-9.25 169 12.5 38.75 11.5 53.75 30.5 4 5 4.125
12.75t-1.375 13.5z" fill="white" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
material/assets/images/icons/github-black-da331b3ec4.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448" viewBox="0 0 416 448"><path d="M160 304q0 10-3.125 20.5t-10.75 19T128 352t-18.125-8.5-10.75-19T96 304t3.125-20.5 10.75-19T128 256t18.125 8.5 10.75 19T160 304zm160 0q0 10-3.125 20.5t-10.75 19T288 352t-18.125-8.5-10.75-19T256 304t3.125-20.5 10.75-19T288 256t18.125 8.5 10.75 19T320 304zm40 0q0-30-17.25-51T296 232q-10.25 0-48.75 5.25Q229.5 240 208 240t-39.25-2.75Q130.75 232 120 232q-29.5 0-46.75 21T56 304q0 22 8 38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0 37.25-1.75t35-7.375 30.5-15 20.25-25.75T360 304zm56-44q0 51.75-15.25 82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5T212 416q-19.5 0-35.5-.75t-36.875-3.125-38.125-7.5-34.25-12.875T37 371.5t-21.5-28.75Q0 312 0 260q0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25 30.875Q171.5 96 212 96q37 0 70 8 26.25-20.5 46.75-30.25T376 64q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34 99.5z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 959 B

18
material/assets/images/icons/github-black.svg Normal file
View File

@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448"
viewBox="0 0 416 448">
<path d="M160 304q0 10-3.125 20.5t-10.75 19-18.125
8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19 18.125-8.5
18.125 8.5 10.75 19 3.125 20.5zM320 304q0 10-3.125 20.5t-10.75
19-18.125 8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19
18.125-8.5 18.125 8.5 10.75 19 3.125 20.5zM360
304q0-30-17.25-51t-46.75-21q-10.25 0-48.75 5.25-17.75 2.75-39.25
2.75t-39.25-2.75q-38-5.25-48.75-5.25-29.5 0-46.75 21t-17.25 51q0 22 8
38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0
37.25-1.75t35-7.375 30.5-15 20.25-25.75 8-38.375zM416 260q0 51.75-15.25
82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5-41.75
1.125q-19.5 0-35.5-0.75t-36.875-3.125-38.125-7.5-34.25-12.875-30.25-20.25-21.5-28.75q-15.5-30.75-15.5-82.75
0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25
30.875q36.75-8.75 77.25-8.75 37 0 70 8 26.25-20.5
46.75-30.25t47.25-9.75q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34
99.5z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
material/assets/images/icons/github-white-1cfc8ff99e.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448" viewBox="0 0 416 448"><path d="M160 304q0 10-3.125 20.5t-10.75 19T128 352t-18.125-8.5-10.75-19T96 304t3.125-20.5 10.75-19T128 256t18.125 8.5 10.75 19T160 304zm160 0q0 10-3.125 20.5t-10.75 19T288 352t-18.125-8.5-10.75-19T256 304t3.125-20.5 10.75-19T288 256t18.125 8.5 10.75 19T320 304zm40 0q0-30-17.25-51T296 232q-10.25 0-48.75 5.25Q229.5 240 208 240t-39.25-2.75Q130.75 232 120 232q-29.5 0-46.75 21T56 304q0 22 8 38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0 37.25-1.75t35-7.375 30.5-15 20.25-25.75T360 304zm56-44q0 51.75-15.25 82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5T212 416q-19.5 0-35.5-.75t-36.875-3.125-38.125-7.5-34.25-12.875T37 371.5t-21.5-28.75Q0 312 0 260q0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25 30.875Q171.5 96 212 96q37 0 70 8 26.25-20.5 46.75-30.25T376 64q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34 99.5z" fill="#fff"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 971 B

18
material/assets/images/icons/github-white.svg Normal file
View File

@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448"
viewBox="0 0 416 448">
<path d="M160 304q0 10-3.125 20.5t-10.75 19-18.125
8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19 18.125-8.5
18.125 8.5 10.75 19 3.125 20.5zM320 304q0 10-3.125 20.5t-10.75
19-18.125 8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19
18.125-8.5 18.125 8.5 10.75 19 3.125 20.5zM360
304q0-30-17.25-51t-46.75-21q-10.25 0-48.75 5.25-17.75 2.75-39.25
2.75t-39.25-2.75q-38-5.25-48.75-5.25-29.5 0-46.75 21t-17.25 51q0 22 8
38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0
37.25-1.75t35-7.375 30.5-15 20.25-25.75 8-38.375zM416 260q0 51.75-15.25
82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5-41.75
1.125q-19.5 0-35.5-0.75t-36.875-3.125-38.125-7.5-34.25-12.875-30.25-20.25-21.5-28.75q-15.5-30.75-15.5-82.75
0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25
30.875q36.75-8.75 77.25-8.75 37 0 70 8 26.25-20.5
46.75-30.25t47.25-9.75q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34
99.5z" fill="white" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
material/assets/images/icons/gitlab-black-81ba4a278f.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><path d="M249.865 474.507l90.684-279.097H159.18l90.684 279.097z"/><path d="M249.864 474.506L159.18 195.41H32.088l217.776 279.095z" opacity=".7"/><path d="M32.089 195.41l-27.56 84.816a18.773 18.773 0 0 0 6.822 20.99l238.514 173.29L32.089 195.41z" opacity=".5"/><path d="M32.089 195.412H159.18L104.56 27.314c-2.81-8.65-15.046-8.65-17.855 0L32.089 195.412z"/><path d="M249.865 474.506l90.684-279.095H467.64L249.865 474.506z" opacity=".7"/><path d="M467.641 195.41l27.56 84.816a18.772 18.772 0 0 1-6.822 20.99l-238.515 173.29L467.641 195.41z" opacity=".5"/><path d="M467.64 195.412H340.55l54.618-168.098c2.81-8.65 15.047-8.65 17.856 0l54.618 168.098z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 742 B

31
material/assets/images/icons/gitlab-black.svg Normal file
View File

@ -0,0 +1,31 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"
viewBox="0 0 500 500">
<g transform="translate(156.197863, 1.160267)">
<path d="M93.667,473.347L93.667,473.347l90.684-279.097H2.983L93.667,
473.347L93.667,473.347z" />
</g>
<g transform="translate(28.531199, 1.160800)" opacity="0.7">
<path d="M221.333,473.345L130.649,194.25H3.557L221.333,473.345L221.333,
473.345z" />
</g>
<g transform="translate(0.088533, 0.255867)" opacity="0.5">
<path d="M32,195.155L32,195.155L4.441,279.97c-2.513,7.735,0.24,16.21,6.821,
20.99l238.514,173.29 L32,195.155L32,195.155z" />
</g>
<g transform="translate(29.421866, 280.255593)">
<path d="M2.667-84.844h127.092L75.14-252.942c-2.811-8.649-15.047-8.649-17.856,
0L2.667-84.844 L2.667-84.844z" />
</g>
<g transform="translate(247.197860, 1.160800)" opacity="0.7">
<path d="M2.667,473.345L93.351,194.25h127.092L2.667,473.345L2.667,
473.345z" />
</g>
<g transform="translate(246.307061, 0.255867)" opacity="0.5">
<path d="M221.334,195.155L221.334,195.155l27.559,84.815c2.514,7.735-0.24,
16.21-6.821,20.99 L3.557,474.25L221.334,195.155L221.334,195.155z" />
</g>
<g transform="translate(336.973725, 280.255593)">
<path d="M130.667-84.844H3.575l54.618-168.098c2.811-8.649,15.047-8.649,
17.856,0L130.667-84.844 L130.667-84.844z" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
material/assets/images/icons/gitlab-white-d65054b8fe.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><path d="M249.865 474.507l90.684-279.097H159.18l90.684 279.097z" fill="#fff"/><path d="M249.864 474.506L159.18 195.41H32.088l217.776 279.095z" fill="#fff" opacity=".7"/><path d="M32.089 195.41l-27.56 84.816a18.773 18.773 0 0 0 6.822 20.99l238.514 173.29L32.089 195.41z" fill="#fff" opacity=".5"/><path d="M32.089 195.412H159.18L104.56 27.314c-2.81-8.65-15.046-8.65-17.855 0L32.089 195.412z" fill="#fff"/><path d="M249.865 474.506l90.684-279.095H467.64L249.865 474.506z" fill="#fff" opacity=".7"/><path d="M467.641 195.41l27.56 84.816a18.772 18.772 0 0 1-6.822 20.99l-238.515 173.29L467.641 195.41z" fill="#fff" opacity=".5"/><path d="M467.64 195.412H340.55l54.618-168.098c2.81-8.65 15.047-8.65 17.856 0l54.618 168.098z" fill="#fff"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 826 B

32
material/assets/images/icons/gitlab-white.svg Normal file
View File

@ -0,0 +1,32 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"
viewBox="0 0 500 500">
<g transform="translate(156.197863, 1.160267)">
<path d="M93.667,473.347L93.667,473.347l90.684-279.097H2.983L93.667,
473.347L93.667,473.347z" fill="white" />
</g>
<g transform="translate(28.531199, 1.160800)" opacity="0.7">
<path d="M221.333,473.345L130.649,194.25H3.557L221.333,473.345L221.333,
473.345z" fill="white" />
</g>
<g transform="translate(0.088533, 0.255867)" opacity="0.5">
<path d="M32,195.155L32,195.155L4.441,279.97c-2.513,7.735,0.24,16.21,6.821,
20.99l238.514,173.29 L32,195.155L32,195.155z" fill="white" />
</g>
<g transform="translate(29.421866, 280.255593)">
<path d="M2.667-84.844h127.092L75.14-252.942c-2.811-8.649-15.047-8.649-17.856,
0L2.667-84.844 L2.667-84.844z" fill="white" />
</g>
<g transform="translate(247.197860, 1.160800)" opacity="0.7">
<path d="M2.667,473.345L93.351,194.25h127.092L2.667,473.345L2.667,
473.345z" fill="white" />
</g>
<g transform="translate(246.307061, 0.255867)" opacity="0.5">
<path d="M221.334,195.155L221.334,195.155l27.559,84.815c2.514,7.735-0.24,
16.21-6.821,20.99 L3.557,474.25L221.334,195.155L221.334,195.155z"
fill="white" />
</g>
<g transform="translate(336.973725, 280.255593)">
<path d="M130.667-84.844H3.575l54.618-168.098c2.811-8.649,15.047-8.649,
17.856,0L130.667-84.844 L130.667-84.844z" fill="white" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

58
material/assets/javascripts/application-2ff8f6a9f1.js
View File

File diff suppressed because one or more lines are too long

3756
material/assets/javascripts/application.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
material/assets/javascripts/application.js.map Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/javascripts/modernizr-dede1352ed.js
View File

File diff suppressed because one or more lines are too long

1220
material/assets/javascripts/modernizr.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
material/assets/stylesheets/application-2ebf05d4b7.css
View File

File diff suppressed because one or more lines are too long

1576
material/assets/stylesheets/application.css Normal file
View File

File diff suppressed because it is too large Load Diff

1
material/assets/stylesheets/application.css.map Normal file
View File

File diff suppressed because one or more lines are too long

6
material/base.html
View File

@ -20,11 +20,11 @@
<meta name="author" content="{{ site_author }}">
{% endif %}
<meta name="generator" content="mkdocs+mkdocs-material#0.2.1">
<script src="{{ base_url }}/assets/javascripts/modernizr-dede1352ed.js"></script>
<script src="{{ base_url }}/assets/javascripts/modernizr.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-2ebf05d4b7.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.css">
{% for path in extra_css %}
<link rel="stylesheet" href="{{ path }}">
{% endfor %}
@ -87,7 +87,7 @@
</main>
{% include "partials/footer.html" %}
</div>
<script src="{{ base_url }}/assets/javascripts/application-2ff8f6a9f1.js"></script>
<script src="{{ base_url }}/assets/javascripts/application.js"></script>
<script>
/* Configuration for application */
var config = {

21
material/partials/search.html
View File

@ -3,17 +3,16 @@
<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-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>
<label class="md-icon md-search__icon" for="query"></label>
</form>
<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>
</form></div>
</div>
</div>
</div>

3
mkdocs.yml
View File

@ -53,6 +53,7 @@ markdown_extensions:
- markdown.extensions.meta
- markdown.extensions.toc:
permalink: '¶'
- pymdownx.superfences
# Page tree
pages:
@ -70,4 +71,4 @@ pages:
- Meta: index.md
- Specimen: specimen.md
- Customization: customization.md
- License: license.md
- License: license.md

3
package.json
View File

@ -46,6 +46,7 @@
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.13.2",
"babel-register": "^6.16.3",
"babel-root-import": "^4.1.3",
"chai": "^3.5.0",
"css-mqpacker": "^4.0.0",
"del": "^2.2.0",
@ -90,7 +91,7 @@
"yargs": "^3.32.0"
},
"engines": {
"node": ">=4.5.0"
"node": ">= 4.5.0"
},
"private": true
}

60
src/assets/javascripts/application.js
View File

@ -71,19 +71,19 @@ document.addEventListener("DOMContentLoaded", () => {
const query = document.getElementById("query")
query.addEventListener("focus", () => {
document.querySelector(".md-search").classList.add("md-js__search--locked")
document.querySelector(".md-search").dataset.mdLocked = ""
})
/* Intercept click on search mode toggle */
let offset = 0
const toggle = document.getElementById("search")
toggle.addEventListener("click", ev => {
const list = document.body.classList
toggle.addEventListener("click", () => { // TODO: click may be the wrong event...
const list = document.body // classList md bla
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.dataset.mdLocked) {
delete list.dataset.mdLocked
/* Scroll to former position, but wait for 100ms to prevent flashes
on iOS. A short timeout seems to do the trick */
@ -109,17 +109,28 @@ document.addEventListener("DOMContentLoaded", () => {
/* This additional check is necessary to handle fast subsequent clicks
on the toggle and the timeout to lock the body must be cancelled */
if (ev.target.checked) {
if (lock)
list.add("md-js__body--locked")
setTimeout(() => {
document.getElementById("md-search").focus()
}, 200)
}
// if (ev.target.checked) {
if (lock)
list.dataset.mdLocked = ""
setTimeout(() => {
document.getElementById("query").focus()
}, 200)
// }
}, 450)
}
})
// TODO: only do this on MOBILE and TABLET
const toggleSearchClose = document.querySelector(".md-search__icon")
toggleSearchClose.setAttribute("for", "search") // TODO: override query with search, when on mobile!!!
// toggleSearchClose.addEventListener("click", ev => {
// ev.preventDefault()
// // ev.target
//
// const search = document.getElementById("search")
// search.checked = false
// })
// var toc = new Sidebar('.md-sidebar--secondary');
// toc.listen();
@ -179,6 +190,7 @@ document.addEventListener("DOMContentLoaded", () => {
return response.json()
})
.then(data => {
// console.log(data)
const stars = data.stargazers_count
const forks = data.forks_count
// store in session!!!
@ -223,7 +235,7 @@ document.addEventListener("DOMContentLoaded", () => {
// console.log(data)
/* Create index */
const index = lunr(() => {
const index = lunr(function() {
/* eslint-disable no-invalid-this, lines-around-comment */
this.field("title", { boost: 10 })
this.field("text")
@ -290,10 +302,21 @@ document.addEventListener("DOMContentLoaded", () => {
title.innerHTML = article.title
link.appendChild(title)
/* Truncate a string after the given number of characters */
const truncate = function(string, n) {
let i = n
if (string.length > i) {
while (string[i] !== " " && --i > 0);
return `${string.substring(0, i)}&hellip;`
}
return string
}
/* Create text element */
const text = document.createElement("p")
text.classList.add("md-search-result__description")
text.innerHTML = article.text // .truncate(140);
text.innerHTML = truncate(article.text) // .truncate(140);
text.innerHTML = truncate(article.text, 140) // .truncate(140);
link.appendChild(text)
container.appendChild(li)
@ -324,4 +347,13 @@ document.addEventListener("DOMContentLoaded", () => {
})
// }, 1000);
fetch(
"https://api.github.com/repos/squidfunk/mkdocs-material/releases/latest")
.then(response => {
return response.json()
})
// .then(data => {
// // console.log(data)
// })
})

13
src/assets/javascripts/components/Material/Sidebar/Abstract.js
View File

@ -24,8 +24,7 @@
* Definition
* ------------------------------------------------------------------------- */
export default
class Abstract {
export default class Abstract {
/**
* Dispatch update on next repaint
@ -33,8 +32,8 @@ class Abstract {
* @constructor
*/
constructor() {
// if (new.target === this.constructor)
// throw new TypeError("Cannot construct abstract instance")
if (this === Abstract)
throw new TypeError("Cannot construct abstract instance")
/* Dispatch update on next repaint */
this.handler_ = ev => {
@ -48,7 +47,6 @@ class Abstract {
* Update state
*
* @abstract
* @return {void}
*/
update() {
throw new Error("update(): not implemented")
@ -58,7 +56,6 @@ class Abstract {
* Reset state
*
* @abstract
* @return {void}
*/
reset() {
throw new Error("reset(): not implemented")
@ -66,8 +63,6 @@ class Abstract {
/**
* Register listener for all relevant events
*
* @return {void}
*/
listen() {
["scroll", "resize", "orientationchange"].forEach(name => {
@ -80,8 +75,6 @@ class Abstract {
/**
* Unregister listener for all relevant events
*
* @return {void}
*/
unlisten() {
["scroll", "resize", "orientationchange"].forEach(name => {

19
src/assets/javascripts/components/Material/Sidebar/Marker.js
View File

@ -26,14 +26,13 @@ import Abstract from "./Abstract"
* Definition
* ------------------------------------------------------------------------- */
export default
class Marker extends Abstract {
export default class Marker extends Abstract {
/**
* Mark anchors within the table of contents above current page y-offset
*
* @constructor
* @param {(string|HTMLCollection)} els - Selector or HTML elements
* @param {(string|NodeList<HTMLElement>)} els - Selector or HTML elements
*/
constructor(els) {
super()
@ -57,16 +56,16 @@ class Marker extends Abstract {
* Update anchor states
*
* @param {Event} ev - Event (omitted)
* @return {void}
*/
update() {
const offset = window.pageYOffset
/* Scroll direction is down */
if (this.offset_ <= window.pageYOffset) {
if (this.offset_ <= offset) {
for (let i = this.index_ + 1; i < this.els_.length; i++) {
if (this.anchors_[i].offsetTop <= window.pageYOffset) {
if (this.anchors_[i].offsetTop <= offset) {
if (i > 0)
this.els_[i - 1].dataset.mdMarked = true
this.els_[i - 1].dataset.mdMarked = ""
this.index_ = i
} else {
break
@ -76,7 +75,7 @@ class Marker extends Abstract {
/* Scroll direction is up */
} else {
for (let i = this.index_; i >= 0; i--) {
if (this.anchors_[i].offsetTop > window.pageYOffset) {
if (this.anchors_[i].offsetTop > offset) {
if (i > 0)
delete this.els_[i - 1].dataset.mdMarked
} else {
@ -87,13 +86,11 @@ class Marker extends Abstract {
}
/* Remember current offset for next iteration */
this.offset_ = window.pageYOffset
this.offset_ = offset
}
/**
* Reset anchor states
*
* @return {void}
*/
reset() {
[].forEach.call(this.els_, el => {

43
src/assets/javascripts/components/Material/Sidebar/Position.js
View File

@ -26,8 +26,7 @@ import Abstract from "./Abstract"
* Definition
* ------------------------------------------------------------------------- */
export default
class Position extends Abstract {
export default class Position extends Abstract {
/**
* Set sidebars to locked state and limit height to parent node
@ -44,8 +43,15 @@ class Position extends Abstract {
: el
/* Index inner and outer container */
this.inner_ = this.el_.parentNode
this.outer_ = this.el_.parentNode.parentNode
const inner = this.el_.parentNode
const outer = this.el_.parentNode.parentNode
/* Get top and bottom bounds */
this.offset_ = outer.offsetTop
this.bounds_ = {
top: inner.offsetTop,
bottom: inner.offsetTop + inner.offsetHeight
}
/* Initialize current height */
this.height_ = 0
@ -55,45 +61,34 @@ class Position extends Abstract {
* Update locked state and height
*
* @param {Event} ev - Event (omitted)
* @return {void}
*/
update() {
const bounds = this.inner_.getBoundingClientRect() // TODO: thresholds can be calculated as a function
const parent = this.outer_.offsetTop
/* Determine top and bottom offsets */
const top = bounds.top + window.pageYOffset,
bottom = bounds.bottom + window.pageYOffset
/* Determine current y-offset at top and bottom of window */
const upper = window.pageYOffset,
lower = window.pageYOffset + window.innerHeight
const scroll = window.pageYOffset
const expand = window.innerHeight
/* Calculate new bounds */
const offset = top - upper
const height = window.innerHeight
- Math.max(lower - bottom, 0)
- Math.max(offset, parent)
const offset = this.bounds_.top - scroll
const height = expand
- Math.max(0, scroll + expand - this.bounds_.bottom)
- Math.max(offset, this.offset_)
/* If height changed, update element */
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 (offset < this.offset_) {
if (!this.el_.dataset.mdLocked)
this.el_.dataset.mdLocked = true
this.el_.dataset.mdLocked = ""
/* Sidebar should be unlocked, if locked */
} else if (this.el_.dataset.mdLocked) {
} else if (typeof this.el_.dataset.mdLocked === "string") {
delete this.el_.dataset.mdLocked
}
}
/**
* Reset locked state and height
*
* @return {void}
*/
reset() {
delete this.el_.dataset.mdLocked

72
src/assets/javascripts/components/search.js → src/assets/javascripts/components/Material/Source/Abstract.js
View File

@ -21,76 +21,18 @@
*/
/* ----------------------------------------------------------------------------
* Search
* Definition
* ------------------------------------------------------------------------- */
class Search {
export default
class Abstract {
/**
* Constructor
* Dispatch update on next repaint
*
* @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()
}
// constructor() {
//
// }
}
/* ----------------------------------------------------------------------------
* Exports
* ------------------------------------------------------------------------- */
export default Search

0
src/assets/javascripts/components/Material/Source/GitHub.js Normal file
View File

0
src/assets/javascripts/components/Material/Source/GitLab.js Normal file
View File

131
src/assets/javascripts/components/scrollspy.js
View File

@ -1,131 +0,0 @@
/*
* 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.
*/
/* ----------------------------------------------------------------------------
* Sidebar scroll-spy
* ------------------------------------------------------------------------- */
export default
class ScrollSpy {
/**
* Constructor
*
* @constructor
* @param {(string|HTMLCollection)} els - Selector or HTML elements
*/
constructor(els) {
this.els_ = (typeof els === "string")
? document.querySelectorAll(els)
: els
/* Initialize index for currently active element */
this.index_ = 0
this.offset_ = window.pageYOffset
/* Index anchor nodes for fast lookup */
this.anchors_ = [].map.call(this.els_, el => {
return document.querySelector(el.hash)
})
/* Event listener */
this.handler_ = ev => {
this.update(ev)
}
}
/**
* Update state of sidebar
*
* @param {Event} ev - Event (omitted)
* @return {void}
*/
update() {
/* Scroll direction is down */
if (this.offset_ <= window.pageYOffset) {
for (let i = this.index_ + 1; i < this.els_.length; i++) {
if (this.anchors_[i].offsetTop <= window.pageYOffset) {
if (i > 0)
this.els_[i - 1].dataset.mdMarked = true
this.index_ = i
} else {
break
}
}
/* Scroll direction is up */
} else {
for (let i = this.index_; i >= 0; i--) {
if (this.anchors_[i].offsetTop > window.pageYOffset) {
if (i > 0)
delete this.els_[i - 1].dataset.mdMarked
} else {
this.index_ = i
break
}
}
}
/* Remember current offset for next cycle */
this.offset_ = window.pageYOffset
}
/**
* Reset state of sidebar
*
* @return {void}
*/
reset() {
[].forEach.call(this.els_, el => {
delete el.dataset.mdMarked
})
}
/**
* 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()
}
}

142
src/assets/javascripts/components/sidebar.js
View File

@ -1,142 +0,0 @@
/*
* 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.
*/
/* ----------------------------------------------------------------------------
* Sidebar sticky-scroll handler
* ------------------------------------------------------------------------- */
class Sidebar {
/**
* Constructor
*
* @constructor
* @param {(string|HTMLElement)} el - Selector or HTML element
*/
constructor(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
/* Initialize parameters */
this.height_ = 0
this.locked_ = false
/* Event listener */
this.handler_ = ev => {
this.update(ev)
}
}
/**
* Update state and height of sidebar
*
* @param {Event} ev - Event
* @return {void}
*/
update() {
const bounds = this.inner_.getBoundingClientRect()
const parent = this.outer_.offsetTop
/* Determine top and bottom offsets */
const top = bounds.top + window.pageYOffset,
bottom = bounds.bottom + window.pageYOffset
/* Determine current y-offset at top and bottom of window */
const upper = window.pageYOffset,
lower = window.pageYOffset + window.innerHeight
/* Calculate new bounds */
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`
/* 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
}
/* Sidebar should be unlocked, if locked */
} else if (this.locked_) {
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 = ""
/* Reset parameters */
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)
})
/* 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 Sidebar

239
src/assets/stylesheets/_shame.scss
View File

@ -24,42 +24,85 @@
// Rules
// ----------------------------------------------------------------------------
@include break-from-device(screen) {
// TODO: cleanup redundant data-md-locked,
// --> use hidden checkbox for reasons of label/button/trigger easyness...
// TODO: set label for magnifying glasses onto search toggle
// --> this way we can always use the search toggle and only need the locked state on the body!
// --> question: how does this play with directly focusing the search field!?
// .md-search__form {
// background: red;
// width: 23.0rem;
// transition: width 0.6s;
//
// .md-js__search--locked & {
// background: blue;
// width: 66.8rem;
// }
.md-search__output {
overflow-y: auto; // necessary for rounded borders
// &::after {
// display: block;
// content: "";
// width: 100%;
// height: 20px;
// background: red; // TODO: white shadow overlay to fade out result scrolling
// }
// .md-search__input {
// width: 100% !important;
// }
[data-md-locked] & {
opacity: 1;
}
width: 100%;
opacity: 0;
transition: opacity .4s, max-height .4s;
text-align: left; // TODO: wrap with another div for this effect
z-index: -1; // ??? wherefor? probably not necessary anymore.
}
@include break-to-device(tablet portrait) {
.md-search__output {
position: absolute;
top: 5.6rem;
bottom: 0;
background:
linear-gradient(white 10%, rgba(255,255,255,0)), // cover
linear-gradient(to bottom, rgba(0, 0, 0, 0.25),
rgba(0, 0, 0, 0.125) 20%,
rgba(0, 0, 0, 0) 60%); // shadow
background-repeat: no-repeat;
background-color: white;
background-size: 100% 20px, 100% 10px;
// Opera doesn't support this in the shorthand
background-attachment: local, scroll;
}
.md-search-result__item {
// margin: 0.8rem;
}
.md-search-result__link {
padding: 0 1.6rem;
// background: white;
// border-radius: 0.2rem;
// @include z-depth(2);
}
.md-search-result__meta {
padding-left: 1.6rem;
border-top: 0.1rem solid rgba(0, 0, 0, 0.07);
}
}
@include break-from-device(tablet landscape) {
// Scroll shadow - WIP
.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;
[data-md-locked] & {
max-height: 75vh;
opacity: 1;
}
position: absolute; // must be absolute, or header nav will stretch
background: $md-color-white;
// color: red;
border-top: 0.1rem solid $md-color-black--lightest; // TODO: box-shadow inset!
text-align: left; // TODO: wrap with another div for this effect
border-radius: 0 0 0.3rem 0.3rem;
z-index: -1;
border-radius: 0 0 0.3rem 0.3rem; // ???
position: absolute; // must be absolute, or header nav will stretch
max-height: 0vh; // TODO: can this be done in percent!?!?!?
[data-md-locked] & {
max-height: 75vh;
}
// Override native scrollbar styles
&::-webkit-scrollbar {
@ -76,10 +119,6 @@
}
}
}
}
// Scroll shadow!
.md-search__output {
background:
linear-gradient(white 10%, rgba(255,255,255,0)), // cover
@ -91,57 +130,58 @@
/* Opera doesn't support this in the shorthand */
background-attachment: local, scroll;
}
}
.md-search-result {
.md-search-result {
&__meta {
color: $md-color-black--light;
padding-left: 4.8rem;
padding-right: 1.6rem;
line-height: 4.0rem;
font-size: ms(-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: 0.1rem solid $md-color-black--lightest;
}
&__item {
// background: yellow;
// border-top: 0.1rem solid $md-color-black--lightest;
}
&__link {
overflow: auto;
display: block;
padding-left: 4.8rem;
padding-right: 1.6rem;
transition: background 0.25s;
&:hover {
background: transparentize($md-color-accent, 0.9);
}
}
&__list {
margin: 0;
padding: 0;
list-style-type: none;
border-top: 0.1rem solid $md-color-black--lightest;
}
&__title {
color: $md-color-black;
font-size: ms(0);
line-height: 1.4;
margin-top: 0.5em;
}
&__item {
// background: yellow;
// border-top: 0.1rem 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;;
}
&__description {
color: $md-color-black--light;
font-size: ms(-1);
line-height: 1.4;
margin: 0.5em 0;;
}
}
@ -180,28 +220,12 @@
// }
// }
.md-search__input:focus {
border-radius: 0.3rem 0.3rem 0 0;
}
// TODO: only on tablet and bind to search active state!
// .md-search__input:focus {
// border-radius: 0.3rem 0.3rem 0 0;
// }
@include break-to-device(mobile landscape) {
.md-search__inner {
position: fixed;
top: 0;
left: 100%;
width: 100%;
height: 56px;
opacity: 0;
z-index: 2;
transform: translate3d(5%, 0, 0);
transition: transform .3s .15s cubic-bezier(0.1, 0.7, 0.1, 1.0), opacity .15s .15s;
.md-toggle--search:checked ~ .md-header & {
transform: translate3d(0, 0, 0);
left: 0;
opacity: 1;
}
}
.md-search__suggest {
position: relative;
@ -396,8 +420,29 @@ mark {
padding: 0 16px;
}
.md-search__output {
overflow-y: auto; // necessary for rounded borders
// TODO: integrate stylelint and property order!
.md-typeset {
sup {
// background: $md-color-black--lighter;
padding: 0 0.125em;
border-radius: 0.2em;
// font-weight: bold;
// color: $md-color-white;
&[id]:target {
background: orange;
}
a {
// color: white;
}
}
}
// TODO: integrate stylelint and property order!
// TODO: remove jitter
// .md-search,
// .md-search__inner,
// .md-search__form {
// text-align: right;
// }

3
src/assets/stylesheets/base/_icons.scss
View File

@ -58,8 +58,7 @@
// Build representational classes
@each $ligature, $name in (
"arrow_back": "back",
"arrow_forward": "forward",
"close": "close"
"arrow_forward": "forward"
) {
&--#{$name}::before {
content: $ligature;

8
src/assets/stylesheets/base/_typeset.scss
View File

@ -25,7 +25,8 @@
// ----------------------------------------------------------------------------
// Default fonts
body {
body,
input {
color: $md-color-black;
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 400;
@ -160,8 +161,9 @@ kbd {
background: $md-code-background;
color: $md-code-color;
font-size: 85%;
box-shadow: 0.4rem 0 0 $md-code-background,
-0.4rem 0 0 $md-code-background;
box-shadow:
0.4rem 0 0 $md-code-background,
-0.4rem 0 0 $md-code-background;
word-break: break-word;
box-decoration-break: clone;
}

4
src/assets/stylesheets/extensions/_footnotes.scss
View File

@ -48,7 +48,7 @@
// Make back references visible on hover
&:hover .footnote-backref,
&:target .footnote-backref {
transform: translate3d(0, 0, 0);
transform: translateX(0);
opacity: 1;
}
@ -73,7 +73,7 @@
@extend %md-icon;
position: absolute;
transform: translate3d(0.5rem, 0, 0);
transform: translateX(0.5rem);
transition: transform 0.25s 0.125s,
color 0.25s,
opacity 0.125s 0.125s;

14
src/assets/stylesheets/layout/_base.scss
View File

@ -101,9 +101,10 @@ hr {
top: 0;
width: 0;
height: 0;
transition: width 0.0s 0.25s,
height 0.0s 0.25s,
opacity 0.25s;
transition:
width 0s 0.25s,
height 0s 0.25s,
opacity 0.25s;
background: $md-color-black--light;
opacity: 0;
z-index: 2;
@ -115,9 +116,10 @@ hr {
.md-toggle--drawer:checked ~ & {
width: 100%;
height: 100%;
transition: width 0.0s,
height 0.0s,
opacity 0.25s;
transition:
width 0s,
height 0s,
opacity 0.25s;
opacity: 1;
}
}

2
src/assets/stylesheets/layout/_content.scss
View File

@ -37,7 +37,7 @@
margin-left: 24.2rem;
}
// Define padding
// Define spacing
&__inner {
margin: 2.4rem 1.6rem;

2
src/assets/stylesheets/layout/_footer.scss
View File

@ -81,7 +81,7 @@
}
}
// Link icon
// Icons
&__icon {
@extend %md-icon__button;

11
src/assets/stylesheets/layout/_header.scss
View File

@ -42,7 +42,7 @@
.md-header-nav {
padding: 0.4rem;
// Header icon
// Icons
&__icon {
@extend %md-icon__button;
@ -55,8 +55,13 @@
opacity: 0.7;
}
// [tablet +]: Hide the search icon
@include break-from-device(tablet) {
// Hide search icon, if JavaScript is not available.
.no-js &--search {
display: none;
}
// [tablet landscape +]: Hide the search icon
@include break-from-device(tablet landscape) {
// Search icon
&--search {

14
src/assets/stylesheets/layout/_nav.scss
View File

@ -259,9 +259,10 @@
// Animate appearance, if browser supports 3D transforms
.csstransforms3d & {
display: block;
transform: translate3d(100%, 0, 0);
transition: transform 0.25s cubic-bezier(0.8, 0.0, 0.6, 1.0),
opacity 0.125s 0.05s;
transform: translateX(100%);
transition:
transform 0.25s cubic-bezier(0.8, 0.0, 0.6, 1.0),
opacity 0.125s 0.05s;
opacity: 0;
}
}
@ -272,9 +273,10 @@
// Animate appearance, if browser supports 3D transforms
.csstransforms3d & {
transform: translate3d(0, 0, 0);
transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
opacity 0.125s 0.125s;
transform: translateX(0);
transition:
transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
opacity 0.125s 0.125s;
opacity: 1;
}
}

176
src/assets/stylesheets/layout/_search.scss
View File

@ -26,66 +26,114 @@
// Search container
.md-search {
padding: 0.8rem 0.8rem 0;
// Hide search, in case JavaScript is not available.
// Hide search, if JavaScript is not available.
.no-js & {
display: none;
}
// [tablet +]: Header-embedded search
@include break-from-device(tablet) {
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
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 modal overlay
&__overlay {
display: none;
pointer-events: none;
// [tablet portrait -]: Show overlay
@include break-to-device(tablet portrait) {
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;
background: $md-color-white;
opacity: 0;
overflow: hidden;
z-index: 1;
// Expanded overlay
.md-toggle--search:checked ~ .md-header & {
transition:
transform 0.4s,
opacity 0.1s;
opacity: 1;
}
}
// Set scale factors (currently selected by trial)
.md-toggle--search:checked ~ .md-header & {
// [mobile portrait -]: Scale up 45 times
@include break-to-device(mobile portrait) {
transform: scale(45);
}
// [mobile landscape]: Scale up 60 times
@include break-at-device(mobile landscape) {
transform: scale(60);
}
// [mobile landscape]: Scale up 75 times
@include break-at-device(tablet portrait) {
transform: scale(75);
}
}
}
// Search modal wrapper
&__inner {
width: 100%;
// [tablet portrait -]: Put search modal off-canvas by default
@include break-to-device(tablet portrait) {
position: fixed;
top: 0;
left: 100%;
height: 100%;
transform: translateX(5%);
transition:
left 0s 0.3s,
transform 0.15s 0.15s cubic-bezier(0.4, 0.0, 0.2, 1.0),
opacity 0.15s 0.15s;
opacity: 0;
z-index: 2;
// Active search modal
.md-toggle--search:checked ~ .md-header & {
left: 0;
transform: translateX(0);
transition:
left 0s 0s,
transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1.0),
opacity 0.15s 0.15s;
opacity: 1;
}
}
// [tablet landscape +]: Make relative for inner positioning
@include break-from-device(tablet landscape) {
position: relative;
}
}
// Search form
&__form {
position: relative;
border-radius: 0.2rem;
text-align: right;
// [mobile -]: Add drop-shadow on mobile
@include break-to-device(mobile) {
@include z-depth(2);
}
// [tablet +]: Header-embedded search
@include break-from-device(tablet) {
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
width: 23.0rem;
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
border-radius: 0.2rem;
// Active search field
[data-md-locked] & {
@ -98,16 +146,23 @@
&__icon {
position: absolute;
top: $md-icon-padding;
left: $md-icon-padding + $md-icon-margin;
left: $md-icon-padding + $md-icon-margin; // TODO: solve in some other way...
transition: color 0.25s;
font-size: $md-icon-size;
cursor: pointer;
// [mobile -]: Use back arrow as search icon
@include break-to-device(mobile) {
top: 1.2rem;
// Set search icon on pseudo class, so it can be overridden for mobile
// and tablet when the search is rendered in an overlay
&::before {
content: "search";
}
// Hack: @extend doesn't work in media queries, so override manually
// [tablet portrait -]: Use back arrow as search icon
@include break-to-device(tablet portrait) {
top: 1.6rem;
left: 1.6rem;
// Show back arrow instead of search icon
&::before {
content: "arrow_back";
}
@ -116,8 +171,7 @@
// Search field
&__input {
padding: 0 1.6rem 0 6.4rem;
border-radius: 0.2rem;
padding: 0 1.6rem 0 7.2rem;
text-overflow: ellipsis;
// Placeholder and icon color in active state
@ -126,20 +180,22 @@
color: $md-color-black--light;
}
// [mobile -]: Full-screen search bar
@include break-to-device(mobile) {
// [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) {
width: 100%;
height: 4.8rem;
height: 5.6rem;
font-size: 1.8rem;
}
// [tablet +]: Header-embedded search
@include break-from-device(tablet) {
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
width: 100%;
height: 4.0rem;
padding-left: 4.8rem;
transition: background-color 0.25s,
color 0.25s;
transition:
background-color 0.25s,
color 0.25s;
border-radius: 0.2rem;
background: $md-color-black--lighter;
color: $md-color-white;
font-size: ms(0);
@ -158,7 +214,7 @@
// Active search field
[data-md-locked] & {
border-radius: 0.3rem 0.3rem 0 0;
border-radius: 0.2rem 0.2rem 0 0;
background: $md-color-white;
color: $md-color-black;
text-overflow: none;

11
src/assets/stylesheets/layout/_sidebar.scss
View File

@ -53,9 +53,10 @@
left: -24.2rem;
width: 24.2rem;
height: 100%;
transform: translate3d(0, 0, 0);
transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
box-shadow 0.25s;
transform: translateX(0);
transition:
transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
box-shadow 0.25s;
background: $md-color-white;
z-index: 2;
@ -68,7 +69,7 @@
.md-toggle--drawer:checked ~ .md-container & {
@include z-depth(8);
transform: translate3d(24.2rem, 0, 0);
transform: translateX(24.2rem);
// Just show drawer, if browser doesn't support 3D transforms
.no-csstransforms3d & {
@ -146,7 +147,7 @@
}
}
// Actual sidebar content
// Sidebar content
&__inner {
// [screen +]: Add line for reference

5
src/assets/stylesheets/layout/_source.scss
View File

@ -105,8 +105,9 @@
&__fact {
float: left;
transform: translateY(0%);
transition: opacity 0.25s,
transform 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
transition:
transform 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0),
opacity 0.25s;
opacity: 1;
// Facts are hidden by default

111
src/partials/search.html
View File

@ -30,61 +30,7 @@
<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"> <!-- 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>
<label class="md-icon md-search__icon" for="query"></label>
<!--<div class="md-search__suggest">
<div class="md-search-term">
change color
@ -95,9 +41,60 @@
<div class="md-search-term">
contributing
</div>-->
</div>
<!-- TODO: search results! -->
</form>
<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>
</div>
</div>