Adding a TOC to Component pages that have multiple elements. (Closes #434)

master
Nicolas Garnier 2015-06-23 16:34:58 +01:00 committed by Addy Osmani
parent a082fc960e
commit 387d98ee2a
4 changed files with 74 additions and 35 deletions

View File

@ -41,6 +41,15 @@
min-height: 1000px;
}
.mdl-components .docs-toc {
margin-bottom: 60px;
}
.mdl-components .component-title {
margin-bottom: 60px;
margin-top: 30px;
}
.mdl-components .mdl-components__page.is-active {
display: block;
}

View File

@ -14,16 +14,18 @@
* limitations under the License.
*/
function MaterialComponents() {
function MaterialComponentsNav() {
'use strict';
this.element_ = document.querySelector('.mdl-js-components');
this.componentLinks = this.element_.querySelectorAll('.mdl-components__link');
if (this.element_) {
this.componentLinks = this.element_.querySelectorAll('.mdl-components__link');
this.activeLink = null;
this.activePage = null;
this.activeLink = null;
this.activePage = null;
this.init();
this.init();
}
}
/**
@ -32,7 +34,7 @@ function MaterialComponents() {
* @type {Object.<string, HTMLElement>}
* @private
*/
MaterialComponents.prototype.linksMap_ = {};
MaterialComponentsNav.prototype.linksMap_ = {};
/**
* Store strings for class names defined by this component that are used in
@ -41,14 +43,14 @@ MaterialComponents.prototype.linksMap_ = {};
* @enum {string}
* @private
*/
MaterialComponents.prototype.CssClasses_ = {
MaterialComponentsNav.prototype.CssClasses_ = {
ACTIVE: 'is-active'
};
/**
* Initializes the MaterialComponents component.
* Initializes the MaterialComponentsNav component.
*/
MaterialComponents.prototype.init = function() {
MaterialComponentsNav.prototype.init = function() {
'use strict';
this.activeLink = this.componentLinks[0];
@ -58,20 +60,20 @@ MaterialComponents.prototype.init = function() {
this.componentLinks[i].addEventListener('click',
this.clickHandler(this.componentLinks[i]));
// Mapping the list of links using their hash fragment.
this.linksMap_["#" + this.componentLinks[i].href.split("#")[1]]
= this.componentLinks[i];
this.linksMap_['#' + this.componentLinks[i].href.split('#')[1]] =
this.componentLinks[i];
}
// If a Hash fragment is available on the page then display the section.
this.displaySectionForFragment(window.location.hash);
this.displaySectionForFragment(window.location.hash.split('/')[0]);
// If the hash fragment changes we display the corresponding section.
// We won't support older browser as it's not efficient.
if ("onhashchange" in window) {
if ('onhashchange' in window) {
var this_ = this;
window.onhashchange = function () {
this_.displaySectionForFragment(window.location.hash);
}
this_.displaySectionForFragment(window.location.hash.split('/')[0]);
};
}
};
@ -79,13 +81,15 @@ MaterialComponents.prototype.init = function() {
* Displays the section for the given hash fragment.
* @param {String} fragment The hash fragment used in the link to the section
*/
MaterialComponents.prototype.displaySectionForFragment = function(fragment) {
if (fragment
&& this.linksMap_[fragment]
&& this.linksMap_[fragment].click) {
MaterialComponentsNav.prototype.displaySectionForFragment = function(fragment) {
'use strict';
if (fragment &&
this.linksMap_[fragment] &&
this.linksMap_[fragment].click) {
this.linksMap_[fragment].click();
} else {
document.getElementsByClassName("mdl-components__link")[0].click();
document.getElementsByClassName('mdl-components__link')[0].click();
}
};
@ -94,7 +98,7 @@ MaterialComponents.prototype.displaySectionForFragment = function(fragment) {
* @param {HTMLElement} link the navigation link
* @return {function} the click handler
*/
MaterialComponents.prototype.clickHandler = function(link) {
MaterialComponentsNav.prototype.clickHandler = function(link) {
'use strict';
var ctx = this;
@ -112,11 +116,12 @@ MaterialComponents.prototype.clickHandler = function(link) {
page.classList.add(ctx.CssClasses_.ACTIVE);
// Add an history entry and display the hash fragment in the URL.
if (window.location.hash != "#"+link.href.split("#")[1]) {
if (link != document.getElementsByClassName("mdl-components__link")[0]) {
history.pushState(null, "Material Design Lite", link);
} else if (ctx.linksMap_[window.location.hash] != null) {
history.pushState(null, "Material Design Lite", "./");
var section = window.location.hash.split('/')[0];
if (section !== '#' + link.href.split('#')[1]) {
if (link !== document.getElementsByClassName('mdl-components__link')[0]) {
history.pushState(null, 'Material Design Lite', link);
} else if (ctx.linksMap_[section] !== null) {
history.pushState(null, 'Material Design Lite', './');
}
}
};
@ -127,7 +132,7 @@ MaterialComponents.prototype.clickHandler = function(link) {
* @param {HTMLElement} link the navigation link
* @return {HTMLElement} the corresponding page
*/
MaterialComponents.prototype.findPage = function(link) {
MaterialComponentsNav.prototype.findPage = function(link) {
'use strict';
var href = link.href.split('#')[1];
@ -137,5 +142,5 @@ MaterialComponents.prototype.findPage = function(link) {
window.addEventListener('load', function() {
'use strict';
new MaterialComponents();
new MaterialComponentsNav();
});

View File

@ -27,20 +27,26 @@ categories:
description: Building blocks for constructing a page layout.
components:
- name: footer
caption: Footer
class: mdl-mega-footer / mdl-mini-footer
- name: grid
caption: Grid
class: mdl-grid
- name: layout
caption: Layout
class: mdl-layout
- name: tabs
caption: Tabs
class: mdl-tabs
- name: loading
title: Loading
description: Indicate loading and progress states.
components:
- name: progress
caption: Progress bar
class: mdl-progress
- name: spinner
caption: Spinner
class: mdl-spinner
- name: menus
title: Menus
@ -59,12 +65,16 @@ categories:
description: Choose between states.
components:
- name: checkbox
caption: Checkbox
class: mdl-checkbox
- name: icon-toggle
caption: Icon toggle
class: mdl-icon-toggle
- name: radio
caption: Radio button
class: mdl-radio
- name: switch
caption: Switch
class: mdl-switch
- name: tables
title: Tables

View File

@ -28,12 +28,30 @@
{% for category in page.categories -%}
<section id="{{ category.name }}-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<span class="docs-text-styling">
<div class="mdl-typography--display-3">{{ category.title }}</div>
<div class="docs-text-styling component-title">
<div class="mdl-typography--display-2">{{ category.title }}</div>
<p>{{ category.description }}</p>
<br><br>
</span>
</div>
{% if category.components.length > 1 %}
<section class="docs-toc docs-text-styling">
<h3>Elements</h3>
<nav class="section-content">
<ul>
{% for component in category.components %}
<li><a href="#{{ category.name }}-section/{{ component.name }}">{{ component.caption }}</a></li>
{%- endfor %}
</ul>
</nav>
</section>
{%- endif %}
{% for component in category.components %}
{% if component.caption %}
<span class="docs-text-styling">
<h1 class="mdl-components__classname" id="{{ category.name }}-section/{{ component.name }}">{{ component.caption }}</h1>
</span>
{%- endif %}
{% set demo_css = "../../dist/components/" + component.name + "/demo.css" %}
<style>
{% include demo_css ignore missing %}
@ -42,9 +60,6 @@
<script>
{% include demo_js ignore missing %}
</script>
<span class="docs-text-styling">
<h1 class="mdl-components__classname">{{ component.class }}</h1>
</span>
{% set demo = "../../src/" + component.name + "/demo.html" %}
{% include demo ignore missing %}
<span class="docs-text-styling">