Unify access via data attributes

This commit is contained in:
squidfunk 2016-12-26 14:47:50 +01:00
parent 72cfa5b7bc
commit f6d9a91995
6 changed files with 27 additions and 27 deletions

View File

@ -30,7 +30,7 @@
{% endif %}
{% endblock %}
{% block libs %}
<script src="{{ base_url }}/assets/javascripts/modernizr-c5e6000d9f.js"></script>
<script src="{{ base_url }}/assets/javascripts/modernizr-934476c231.js"></script>
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700">
@ -56,16 +56,16 @@
{% endif %}
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="drawer">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="search">
<label class="md-overlay" data-md-overlay for="drawer"></label>
<label class="md-overlay" data-md-component="overlay" for="drawer"></label>
{% block header %}
{% include "partials/header.html" %}
{% endblock %}
<div class="md-container">
<main class="md-main">
<div class="md-main__inner md-grid" data-md-container>
<div class="md-main__inner md-grid" data-md-component="container">
{% block site_nav %}
{% if nav %}
<div class="md-sidebar md-sidebar--primary" data-md-sidebar="primary">
<div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
{% include "partials/nav.html" %}
@ -74,7 +74,7 @@
</div>
{% endif %}
{% if page.toc %}
<div class="md-sidebar md-sidebar--secondary" data-md-sidebar="secondary">
<div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
{% include "partials/toc.html" %}
@ -124,7 +124,7 @@
<script src="https://cdn.mathjax.org/{{ path }}"></script>
{% endif %}
{% endfor %}
<script src="{{ base_url }}/assets/javascripts/application-e2d270ac30.js"></script>
<script src="{{ base_url }}/assets/javascripts/application-0df6fd955b.js"></script>
<script>
/* Configuration for application */
var config = {

View File

@ -1,4 +1,4 @@
<div class="md-search" data-md-search>
<div class="md-search" data-md-component="search">
<div class="md-search__overlay"></div>
<div class="md-search__inner">
<form class="md-search__form" name="search">
@ -7,7 +7,7 @@
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap">
<div class="md-search-result" data-md-search-result></div>
<div class="md-search-result" data-md-component="result"></div>
</div>
</div>
</div>

View File

@ -99,24 +99,24 @@ export default class Application {
new Material.Event.MatchMedia("(min-width: 960px)",
new Material.Event.Listener(window, [
"resize", "orientationchange"
], new Material.Sidebar.Container("[data-md-container]")))
], new Material.Sidebar.Container("[data-md-component=container]")))
/* Component: sidebar with navigation */
new Material.Event.MatchMedia("(min-width: 1200px)",
new Material.Event.Listener(window, [
"scroll", "resize", "orientationchange"
], new Material.Sidebar.Position("[data-md-sidebar=primary]")))
], 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-sidebar=secondary]")))
], 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-sidebar=secondary] .md-nav__link")))
new Material.Nav.Blur("[data-md-component=toc] .md-nav__link")))
/* Component: collapsible elements for navigation */
const collapsibles = document.querySelectorAll("[data-md-collapse]")
@ -133,7 +133,7 @@ export default class Application {
/* Component: search results */
new Material.Event.Listener(document.forms.search.query, [
"focus", "keyup"
], new Material.Search.Result("[data-md-search-result]", () => {
], new Material.Search.Result("[data-md-component=result]", () => {
return fetch(`${this.config_.url.base}/mkdocs/search_index.json`)
.then(response => response.json())
.then(data => {
@ -147,12 +147,12 @@ export default class Application {
/* Listener: prevent touches on overlay if navigation is active */
new Material.Event.MatchMedia("(max-width: 1199px)",
new Material.Event.Listener("[data-md-overlay]", "touchstart",
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-sidebar=primary] [href^='#']",
new Material.Event.Listener("[data-md-component=navigation] [href^='#']",
"click", () => {
const toggle = document.querySelector("[data-md-toggle=drawer]")
if (toggle.checked) {
@ -197,7 +197,7 @@ export default class Application {
/* Listener: prevent search from closing when clicking */
new Material.Event.MatchMedia("(min-width: 960px)",
new Material.Event.Listener("[data-md-search]", "click",
new Material.Event.Listener("[data-md-component=search]", "click",
ev => ev.stopPropagation()))
/* Retrieve the facts for the given repository type */

View File

@ -120,7 +120,7 @@
type="checkbox" id="search" />
<!-- Overlay for expanded drawer -->
<label class="md-overlay" data-md-overlay for="drawer"></label>
<label class="md-overlay" data-md-component="overlay" for="drawer"></label>
<!-- Application header -->
{% block header %}
@ -132,7 +132,7 @@
<!-- Main container -->
<main class="md-main">
<div class="md-main__inner md-grid" data-md-container>
<div class="md-main__inner md-grid" data-md-component="container">
<!-- Block: navigation -->
{% block site_nav %}
@ -140,7 +140,7 @@
<!-- Main navigation -->
{% if nav %}
<div class="md-sidebar md-sidebar--primary"
data-md-sidebar="primary">
data-md-component="navigation">
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
{% include "partials/nav.html" %}
@ -152,7 +152,7 @@
<!-- Table of contents -->
{% if page.toc %}
<div class="md-sidebar md-sidebar--secondary"
data-md-sidebar="secondary">
data-md-component="toc">
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
{% include "partials/toc.html" %}

View File

@ -21,7 +21,7 @@
-->
<!-- Search interface -->
<div class="md-search" data-md-search>
<div class="md-search" data-md-component="search">
<div class="md-search__overlay"></div>
<div class="md-search__inner">
<form class="md-search__form" name="search">
@ -32,7 +32,7 @@
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap">
<div class="md-search-result" data-md-search-result></div>
<div class="md-search-result" data-md-component="result"></div>
</div>
</div>
</div>