mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Migrate build pipeline to Webpack 2
This commit is contained in:
squidfunk
Martin Donath
parent
7c36b5c4ef
commit
80fe7e010d
5
.babelrc
5
.babelrc
@ -2,9 +2,6 @@
|
||||
"presets": ["es2015"],
|
||||
"plugins": [
|
||||
"add-module-exports",
|
||||
"babel-root-import",
|
||||
["transform-react-jsx", {
|
||||
"pragma": "JSX.createElement"
|
||||
}]
|
||||
"babel-root-import"
|
||||
]
|
||||
}
|
||||
|
||||
@ -50,12 +50,13 @@ export default (gulp, config, args) => {
|
||||
],
|
||||
output: {
|
||||
filename: "application.js",
|
||||
library: "Application"
|
||||
library: "app",
|
||||
libraryTarget: "window"
|
||||
},
|
||||
module: {
|
||||
|
||||
/* Transpile ES6 to ES5 with Babel */
|
||||
loaders: [
|
||||
rules: [
|
||||
{
|
||||
loader: "babel-loader",
|
||||
test: /\.jsx?$/
|
||||
@ -65,7 +66,7 @@ export default (gulp, config, args) => {
|
||||
plugins: [
|
||||
|
||||
/* Don't emit assets that include errors */
|
||||
new webpack.NoErrorsPlugin(),
|
||||
new webpack.NoEmitOnErrorsPlugin(),
|
||||
|
||||
/* Provide JSX helper */
|
||||
new webpack.ProvidePlugin({
|
||||
@ -77,19 +78,30 @@ export default (gulp, config, args) => {
|
||||
args.optimize ? [
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
warnings: false,
|
||||
screw_ie8: true, // eslint-disable-line camelcase
|
||||
conditionals: true,
|
||||
unused: true,
|
||||
comparisons: true,
|
||||
sequences: true,
|
||||
dead_code: true, // eslint-disable-line camelcase
|
||||
evaluate: true,
|
||||
if_return: true, // eslint-disable-line camelcase
|
||||
join_vars: true // eslint-disable-line camelcase
|
||||
},
|
||||
output: {
|
||||
comments: false
|
||||
}
|
||||
})
|
||||
] : []),
|
||||
|
||||
/* Module resolver */
|
||||
resolve: {
|
||||
modulesDirectories: [
|
||||
modules: [
|
||||
"src/assets/javascripts",
|
||||
"node_modules"
|
||||
],
|
||||
extensions: [
|
||||
"",
|
||||
".js",
|
||||
".jsx"
|
||||
]
|
||||
@ -102,7 +114,7 @@ export default (gulp, config, args) => {
|
||||
|
||||
/* Sourcemap support */
|
||||
devtool: args.sourcemaps ? "inline-source-map" : ""
|
||||
}))
|
||||
}, webpack))
|
||||
|
||||
/* Revisioning */
|
||||
.pipe(gulpif(args.revision, rev()))
|
||||
|
||||
3
material/assets/javascripts/application-39a173f6f5.js
Normal file
3
material/assets/javascripts/application-39a173f6f5.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
@ -124,8 +124,8 @@
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% block scripts %}
|
||||
<script src="{{ base_url }}/assets/javascripts/application-7f35cda7dd.js"></script>
|
||||
<script>var config={url:{base:"{{ base_url }}"}},app=new Application(config);app.initialize()</script>
|
||||
<script src="{{ base_url }}/assets/javascripts/application-39a173f6f5.js"></script>
|
||||
<script>app.initialize({url:{base:"{{ base_url }}"}})</script>
|
||||
{% for path in extra_javascript %}
|
||||
<script src="{{ path }}"></script>
|
||||
{% endfor %}
|
||||
|
||||
10
src/.babelrc
Normal file
10
src/.babelrc
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"presets": [
|
||||
["es2015", { "modules": false }]
|
||||
],
|
||||
"plugins": [
|
||||
["transform-react-jsx", {
|
||||
"pragma": "JSX.createElement"
|
||||
}]
|
||||
]
|
||||
}
|
||||
@ -27,215 +27,199 @@ import Material from "./components/Material"
|
||||
* Application
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
export default class Application {
|
||||
export const initialize = config => {
|
||||
|
||||
/**
|
||||
* Create the application
|
||||
*
|
||||
* @constructor
|
||||
* @param {object} config Configuration object
|
||||
*/
|
||||
constructor(config) {
|
||||
this.config_ = config
|
||||
}
|
||||
/* Initialize Modernizr and FastClick */
|
||||
new Material.Event.Listener(document, "DOMContentLoaded", () => {
|
||||
|
||||
/**
|
||||
* Initialize all components and listeners
|
||||
*/
|
||||
initialize() {
|
||||
/* Test for iOS */
|
||||
Modernizr.addTest("ios", () => {
|
||||
return !!navigator.userAgent.match(/(iPad|iPhone|iPod)/g)
|
||||
})
|
||||
|
||||
/* Initialize Modernizr and FastClick */
|
||||
new Material.Event.Listener(document, "DOMContentLoaded", () => {
|
||||
/* Test for web application context */
|
||||
Modernizr.addTest("standalone", () => {
|
||||
return !!navigator.standalone
|
||||
})
|
||||
|
||||
/* Test for iOS */
|
||||
Modernizr.addTest("ios", () => {
|
||||
return !!navigator.userAgent.match(/(iPad|iPhone|iPod)/g)
|
||||
})
|
||||
/* Attach FastClick to mitigate 300ms delay on touch devices */
|
||||
FastClick.attach(document.body)
|
||||
|
||||
/* Test for web application context */
|
||||
Modernizr.addTest("standalone", () => {
|
||||
return !!navigator.standalone
|
||||
})
|
||||
/* Wrap all data tables for better overflow scrolling */
|
||||
const tables = document.querySelectorAll("table:not([class])")
|
||||
Array.prototype.forEach.call(tables, table => {
|
||||
const wrap = document.createElement("div")
|
||||
wrap.classList.add("md-typeset__table")
|
||||
if (table.nextSibling) {
|
||||
table.parentNode.insertBefore(wrap, table.nextSibling)
|
||||
} else {
|
||||
table.parentNode.appendChild(wrap)
|
||||
}
|
||||
wrap.appendChild(table)
|
||||
})
|
||||
|
||||
/* Attack FastClick to mitigate 300ms delay on touch devices */
|
||||
FastClick.attach(document.body)
|
||||
/* Force 1px scroll offset to trigger overflow scrolling */
|
||||
if (Modernizr.ios) {
|
||||
const scrollable = document.querySelectorAll("[data-md-scrollfix]")
|
||||
Array.prototype.forEach.call(scrollable, item => {
|
||||
item.addEventListener("touchstart", () => {
|
||||
const top = item.scrollTop
|
||||
|
||||
/* Wrap all data tables for better overflow scrolling */
|
||||
const tables = document.querySelectorAll("table:not([class])")
|
||||
Array.prototype.forEach.call(tables, table => {
|
||||
const wrap = document.createElement("div")
|
||||
wrap.classList.add("md-typeset__table")
|
||||
if (table.nextSibling) {
|
||||
table.parentNode.insertBefore(wrap, table.nextSibling)
|
||||
} else {
|
||||
table.parentNode.appendChild(wrap)
|
||||
}
|
||||
wrap.appendChild(table)
|
||||
})
|
||||
|
||||
/* Force 1px scroll offset to trigger overflow scrolling */
|
||||
if (Modernizr.ios) {
|
||||
const scrollable = document.querySelectorAll("[data-md-scrollfix]")
|
||||
Array.prototype.forEach.call(scrollable, item => {
|
||||
item.addEventListener("touchstart", () => {
|
||||
const top = item.scrollTop
|
||||
|
||||
/* We're at the top of the container */
|
||||
if (top === 0) {
|
||||
item.scrollTop = 1
|
||||
/* We're at the top of the container */
|
||||
if (top === 0) {
|
||||
item.scrollTop = 1
|
||||
|
||||
/* We're at the bottom of the container */
|
||||
} else if (top + item.offsetHeight === item.scrollHeight) {
|
||||
item.scrollTop = top - 1
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}).listen()
|
||||
|
||||
/* Component: sidebar container */
|
||||
if (!Modernizr.csscalc)
|
||||
new Material.Event.MatchMedia("(min-width: 960px)",
|
||||
new Material.Event.Listener(window, [
|
||||
"resize", "orientationchange"
|
||||
], new Material.Sidebar.Container("[data-md-component=container]")))
|
||||
|
||||
/* Component: sidebar with navigation */
|
||||
new Material.Event.MatchMedia("(min-width: 1220px)",
|
||||
new Material.Event.Listener(window, [
|
||||
"scroll", "resize", "orientationchange"
|
||||
], new Material.Sidebar.Position("[data-md-component=navigation]")))
|
||||
|
||||
/* Component: sidebar with table of contents */
|
||||
new Material.Event.MatchMedia("(min-width: 960px)",
|
||||
new Material.Event.Listener(window, [
|
||||
"scroll", "resize", "orientationchange"
|
||||
], new Material.Sidebar.Position("[data-md-component=toc]")))
|
||||
|
||||
/* Component: link blurring for table of contents */
|
||||
new Material.Event.MatchMedia("(min-width: 960px)",
|
||||
new Material.Event.Listener(window, "scroll",
|
||||
new Material.Nav.Blur("[data-md-component=toc] .md-nav__link")))
|
||||
|
||||
/* Component: collapsible elements for navigation */
|
||||
const collapsibles =
|
||||
document.querySelectorAll("[data-md-component=collapsible]")
|
||||
Array.prototype.forEach.call(collapsibles, collapse => {
|
||||
new Material.Event.MatchMedia("(min-width: 1220px)",
|
||||
new Material.Event.Listener(collapse.previousElementSibling, "click",
|
||||
new Material.Nav.Collapse(collapse)))
|
||||
})
|
||||
|
||||
/* Component: active pane monitor for iOS scrolling fixes */
|
||||
new Material.Event.MatchMedia("(max-width: 1219px)",
|
||||
new Material.Event.Listener(
|
||||
"[data-md-component=navigation] [data-md-toggle]", "change",
|
||||
new Material.Nav.Scrolling("[data-md-component=navigation] nav")))
|
||||
|
||||
/* Component: search body lock for mobile */
|
||||
new Material.Event.MatchMedia("(max-width: 959px)",
|
||||
new Material.Event.Listener("[data-md-toggle=search]", "change",
|
||||
new Material.Search.Lock("[data-md-toggle=search]")))
|
||||
|
||||
/* Component: search results */
|
||||
new Material.Event.Listener(document.forms.search.query, [
|
||||
"focus", "keyup"
|
||||
], new Material.Search.Result("[data-md-component=result]", () => {
|
||||
return fetch(`${this.config_.url.base}/mkdocs/search_index.json`, {
|
||||
credentials: "same-origin"
|
||||
}).then(response => response.json())
|
||||
.then(data => {
|
||||
return data.docs.map(doc => {
|
||||
doc.location = this.config_.url.base + doc.location
|
||||
return doc
|
||||
})
|
||||
})
|
||||
})).listen()
|
||||
|
||||
/* Listener: prevent touches on overlay if navigation is active */
|
||||
new Material.Event.MatchMedia("(max-width: 1219px)",
|
||||
new Material.Event.Listener("[data-md-component=overlay]", "touchstart",
|
||||
ev => ev.preventDefault()))
|
||||
|
||||
/* Listener: close drawer when anchor links are clicked */
|
||||
new Material.Event.MatchMedia("(max-width: 959px)",
|
||||
new Material.Event.Listener("[data-md-component=navigation] [href^='#']",
|
||||
"click", () => {
|
||||
const toggle = document.querySelector("[data-md-toggle=drawer]")
|
||||
if (toggle.checked) {
|
||||
toggle.checked = false
|
||||
toggle.dispatchEvent(new CustomEvent("change"))
|
||||
} else if (top + item.offsetHeight === item.scrollHeight) {
|
||||
item.scrollTop = top - 1
|
||||
}
|
||||
}))
|
||||
|
||||
/* Listener: focus input after opening search */
|
||||
new Material.Event.Listener("[data-md-toggle=search]", "change", ev => {
|
||||
setTimeout(toggle => {
|
||||
const query = document.forms.search.query
|
||||
if (toggle.checked)
|
||||
query.focus()
|
||||
}, 400, ev.target)
|
||||
}).listen()
|
||||
|
||||
/* Listener: open search on focus */
|
||||
new Material.Event.MatchMedia("(min-width: 960px)",
|
||||
new Material.Event.Listener(document.forms.search.query, "focus", () => {
|
||||
const toggle = document.querySelector("[data-md-toggle=search]")
|
||||
if (!toggle.checked) {
|
||||
toggle.checked = true
|
||||
toggle.dispatchEvent(new CustomEvent("change"))
|
||||
}
|
||||
}))
|
||||
|
||||
/* Listener: close search when clicking outside */
|
||||
new Material.Event.MatchMedia("(min-width: 960px)",
|
||||
new Material.Event.Listener(document.body, "click", () => {
|
||||
const toggle = document.querySelector("[data-md-toggle=search]")
|
||||
if (toggle.checked) {
|
||||
toggle.checked = false
|
||||
toggle.dispatchEvent(new CustomEvent("change"))
|
||||
}
|
||||
}))
|
||||
|
||||
/* Listener: disable search when ESC key is pressed */
|
||||
new Material.Event.Listener(window, "keyup", ev => {
|
||||
const code = ev.keyCode || ev.which
|
||||
if (code === 27) {
|
||||
const toggle = document.querySelector("[data-md-toggle=search]")
|
||||
if (toggle.checked) {
|
||||
toggle.checked = false
|
||||
toggle.dispatchEvent(new CustomEvent("change"))
|
||||
document.forms.search.query.blur()
|
||||
}
|
||||
}
|
||||
}).listen()
|
||||
|
||||
/* Listener: fix unclickable toggle due to blur handler */
|
||||
new Material.Event.MatchMedia("(min-width: 960px)",
|
||||
new Material.Event.Listener("[data-md-toggle=search]", "click",
|
||||
ev => ev.stopPropagation()))
|
||||
|
||||
/* Listener: prevent search from closing when clicking */
|
||||
new Material.Event.MatchMedia("(min-width: 960px)",
|
||||
new Material.Event.Listener("[data-md-component=search]", "click",
|
||||
ev => ev.stopPropagation()))
|
||||
|
||||
/* Retrieve facts for the given repository type */
|
||||
;(() => {
|
||||
const el = document.querySelector("[data-md-source]")
|
||||
if (!el) return Promise.resolve([])
|
||||
switch (el.dataset.mdSource) {
|
||||
case "github": return new Material.Source.Adapter.GitHub(el).fetch()
|
||||
default: return Promise.resolve([])
|
||||
}
|
||||
|
||||
/* Render repository source information */
|
||||
})().then(facts => {
|
||||
const sources = document.querySelectorAll("[data-md-source]")
|
||||
Array.prototype.forEach.call(sources, source => {
|
||||
new Material.Source.Repository(source)
|
||||
.initialize(facts)
|
||||
})
|
||||
})
|
||||
}
|
||||
}).listen()
|
||||
|
||||
/* Component: sidebar container */
|
||||
if (!Modernizr.csscalc)
|
||||
new Material.Event.MatchMedia("(min-width: 960px)",
|
||||
new Material.Event.Listener(window, [
|
||||
"resize", "orientationchange"
|
||||
], new Material.Sidebar.Container("[data-md-component=container]")))
|
||||
|
||||
/* Component: sidebar with navigation */
|
||||
new Material.Event.MatchMedia("(min-width: 1220px)",
|
||||
new Material.Event.Listener(window, [
|
||||
"scroll", "resize", "orientationchange"
|
||||
], new Material.Sidebar.Position("[data-md-component=navigation]")))
|
||||
|
||||
/* Component: sidebar with table of contents */
|
||||
new Material.Event.MatchMedia("(min-width: 960px)",
|
||||
new Material.Event.Listener(window, [
|
||||
"scroll", "resize", "orientationchange"
|
||||
], new Material.Sidebar.Position("[data-md-component=toc]")))
|
||||
|
||||
/* Component: link blurring for table of contents */
|
||||
new Material.Event.MatchMedia("(min-width: 960px)",
|
||||
new Material.Event.Listener(window, "scroll",
|
||||
new Material.Nav.Blur("[data-md-component=toc] .md-nav__link")))
|
||||
|
||||
/* Component: collapsible elements for navigation */
|
||||
const collapsibles =
|
||||
document.querySelectorAll("[data-md-component=collapsible]")
|
||||
Array.prototype.forEach.call(collapsibles, collapse => {
|
||||
new Material.Event.MatchMedia("(min-width: 1220px)",
|
||||
new Material.Event.Listener(collapse.previousElementSibling, "click",
|
||||
new Material.Nav.Collapse(collapse)))
|
||||
})
|
||||
|
||||
/* Component: active pane monitor for iOS scrolling fixes */
|
||||
new Material.Event.MatchMedia("(max-width: 1219px)",
|
||||
new Material.Event.Listener(
|
||||
"[data-md-component=navigation] [data-md-toggle]", "change",
|
||||
new Material.Nav.Scrolling("[data-md-component=navigation] nav")))
|
||||
|
||||
/* Component: search body lock for mobile */
|
||||
new Material.Event.MatchMedia("(max-width: 959px)",
|
||||
new Material.Event.Listener("[data-md-toggle=search]", "change",
|
||||
new Material.Search.Lock("[data-md-toggle=search]")))
|
||||
|
||||
/* Component: search results */
|
||||
new Material.Event.Listener(document.forms.search.query, [
|
||||
"focus", "keyup"
|
||||
], new Material.Search.Result("[data-md-component=result]", () => {
|
||||
return fetch(`${config.url.base}/mkdocs/search_index.json`, {
|
||||
credentials: "same-origin"
|
||||
}).then(response => response.json())
|
||||
.then(data => {
|
||||
return data.docs.map(doc => {
|
||||
doc.location = config.url.base + doc.location
|
||||
return doc
|
||||
})
|
||||
})
|
||||
})).listen()
|
||||
|
||||
/* Listener: prevent touches on overlay if navigation is active */
|
||||
new Material.Event.MatchMedia("(max-width: 1219px)",
|
||||
new Material.Event.Listener("[data-md-component=overlay]", "touchstart",
|
||||
ev => ev.preventDefault()))
|
||||
|
||||
/* Listener: close drawer when anchor links are clicked */
|
||||
new Material.Event.MatchMedia("(max-width: 959px)",
|
||||
new Material.Event.Listener("[data-md-component=navigation] [href^='#']",
|
||||
"click", () => {
|
||||
const toggle = document.querySelector("[data-md-toggle=drawer]")
|
||||
if (toggle.checked) {
|
||||
toggle.checked = false
|
||||
toggle.dispatchEvent(new CustomEvent("change"))
|
||||
}
|
||||
}))
|
||||
|
||||
/* Listener: focus input after opening search */
|
||||
new Material.Event.Listener("[data-md-toggle=search]", "change", ev => {
|
||||
setTimeout(toggle => {
|
||||
const query = document.forms.search.query
|
||||
if (toggle.checked)
|
||||
query.focus()
|
||||
}, 400, ev.target)
|
||||
}).listen()
|
||||
|
||||
/* Listener: open search on focus */
|
||||
new Material.Event.MatchMedia("(min-width: 960px)",
|
||||
new Material.Event.Listener(document.forms.search.query, "focus", () => {
|
||||
const toggle = document.querySelector("[data-md-toggle=search]")
|
||||
if (!toggle.checked) {
|
||||
toggle.checked = true
|
||||
toggle.dispatchEvent(new CustomEvent("change"))
|
||||
}
|
||||
}))
|
||||
|
||||
/* Listener: close search when clicking outside */
|
||||
new Material.Event.MatchMedia("(min-width: 960px)",
|
||||
new Material.Event.Listener(document.body, "click", () => {
|
||||
const toggle = document.querySelector("[data-md-toggle=search]")
|
||||
if (toggle.checked) {
|
||||
toggle.checked = false
|
||||
toggle.dispatchEvent(new CustomEvent("change"))
|
||||
}
|
||||
}))
|
||||
|
||||
/* Listener: disable search when ESC key is pressed */
|
||||
new Material.Event.Listener(window, "keyup", ev => {
|
||||
const code = ev.keyCode || ev.which
|
||||
if (code === 27) {
|
||||
const toggle = document.querySelector("[data-md-toggle=search]")
|
||||
if (toggle.checked) {
|
||||
toggle.checked = false
|
||||
toggle.dispatchEvent(new CustomEvent("change"))
|
||||
document.forms.search.query.blur()
|
||||
}
|
||||
}
|
||||
}).listen()
|
||||
|
||||
/* Listener: fix unclickable toggle due to blur handler */
|
||||
new Material.Event.MatchMedia("(min-width: 960px)",
|
||||
new Material.Event.Listener("[data-md-toggle=search]", "click",
|
||||
ev => ev.stopPropagation()))
|
||||
|
||||
/* Listener: prevent search from closing when clicking */
|
||||
new Material.Event.MatchMedia("(min-width: 960px)",
|
||||
new Material.Event.Listener("[data-md-component=search]", "click",
|
||||
ev => ev.stopPropagation()))
|
||||
|
||||
/* Retrieve facts for the given repository type */
|
||||
;(() => {
|
||||
const el = document.querySelector("[data-md-source]")
|
||||
if (!el) return Promise.resolve([])
|
||||
switch (el.dataset.mdSource) {
|
||||
case "github": return new Material.Source.Adapter.GitHub(el).fetch()
|
||||
default: return Promise.resolve([])
|
||||
}
|
||||
|
||||
/* Render repository source information */
|
||||
})().then(facts => {
|
||||
const sources = document.querySelectorAll("[data-md-source]")
|
||||
Array.prototype.forEach.call(sources, source => {
|
||||
new Material.Source.Repository(source)
|
||||
.initialize(facts)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -245,17 +245,7 @@
|
||||
{% block scripts %}
|
||||
<script src="{{ base_url }}/assets/javascripts/application.js"></script>
|
||||
<script>
|
||||
|
||||
/* Configuration for application */
|
||||
var config = {
|
||||
url: {
|
||||
base: "{{ base_url }}",
|
||||
}
|
||||
};
|
||||
|
||||
/* Initialize application */
|
||||
var app = new Application(config);
|
||||
app.initialize();
|
||||
app.initialize({ url: { base: "{{ base_url }}", } });
|
||||
</script>
|
||||
{% for path in extra_javascript %}
|
||||
<script src="{{ path }}"></script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user