Unify access via data attributes

material/base.html

@@ -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 = {

material/partials/search.html

@@ -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>

src/assets/javascripts/application.js

@@ -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 */

src/base.html

@@ -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" %}

src/partials/search.html

@@ -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>