mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Prototyped animation for navigation on desktop
This commit is contained in:
parent
e32562fb1e
commit
fc7fb28edb
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -91,7 +91,7 @@
|
||||
var base_url = '{{ base_url }}';
|
||||
var repo_url = '{{ repo_url }}';
|
||||
</script>
|
||||
<script src="{{ base_url }}/assets/javascripts/application-caa33c61a6.js"></script>
|
||||
<script src="{{ base_url }}/assets/javascripts/application-db87fe00d3.js"></script>
|
||||
{% for path in extra_javascript %}
|
||||
<script src="{{ path }}"></script>
|
||||
{% endfor %}
|
||||
|
@ -1,22 +1,10 @@
|
||||
{% if nav_item.children or nav_item == current_page %}
|
||||
{% if nav_item.children %}
|
||||
<li class="md-nav__item md-nav__item--nested">
|
||||
{% if nav_item == current_page %}
|
||||
{% set path = "toc" %}
|
||||
{% endif %}
|
||||
{% if nav_item.active and not nav_item == current_page %}
|
||||
{% if nav_item.active %}
|
||||
<input class="md-toggle md-nav__toggle" type="checkbox" id="{{ path }}" checked>
|
||||
{% else %}
|
||||
<input class="md-toggle md-nav__toggle" type="checkbox" id="{{ path }}">
|
||||
{% endif %}
|
||||
{% if nav_item == current_page %}
|
||||
<label class="md-nav__link md-nav__link--active" for="{{ path }}">
|
||||
{{ nav_item.title }}
|
||||
</label>
|
||||
<a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link md-nav__link--active">
|
||||
{{ nav_item.title }}
|
||||
</a>
|
||||
{% include "partials/toc.html" %}
|
||||
{% else %}
|
||||
<label class="md-nav__link" for="{{ path }}">
|
||||
{{ nav_item.title }}
|
||||
</label>
|
||||
@ -33,7 +21,17 @@
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% elif nav_item == current_page %}
|
||||
<li class="md-nav__item">
|
||||
<input class="md-toggle md-nav__toggle" type="checkbox" id="toc">
|
||||
<label class="md-nav__link md-nav__link--active" for="toc">
|
||||
{{ nav_item.title }}
|
||||
</label>
|
||||
<a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link md-nav__link--active">
|
||||
{{ nav_item.title }}
|
||||
</a>
|
||||
{% include "partials/toc.html" %}
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="md-nav__item">
|
||||
|
@ -29,6 +29,7 @@
|
||||
import FastClick from 'fastclick';
|
||||
import Sidebar from './components/sidebar';
|
||||
import ScrollSpy from './components/scrollspy';
|
||||
import Expander from './components/expander';
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Application
|
||||
@ -118,16 +119,78 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
});
|
||||
|
||||
// var toc = new Sidebar('.md-sidebar--secondary');
|
||||
// toc.listen();
|
||||
|
||||
var toggles = document.querySelectorAll('.md-nav__item--nested > .md-nav__link');
|
||||
[].forEach.call(toggles, (toggle) => {
|
||||
let nav = toggle.nextElementSibling;
|
||||
|
||||
// 1.
|
||||
|
||||
nav.style.maxHeight = nav.getBoundingClientRect().height + 'px';
|
||||
|
||||
toggle.addEventListener('click', function () {
|
||||
let first = nav.getBoundingClientRect().height;
|
||||
if (first) {
|
||||
console.log('closing');
|
||||
nav.style.maxHeight = first + 'px'; // reset!
|
||||
requestAnimationFrame(() => {
|
||||
|
||||
nav.classList.add('md-nav--transitioning');
|
||||
nav.style.maxHeight = '0px';
|
||||
});
|
||||
} else {
|
||||
console.log('opening');
|
||||
|
||||
/* Toggle and read height */
|
||||
nav.style.maxHeight = '';
|
||||
|
||||
nav.classList.add('md-nav--toggled');
|
||||
let last = nav.getBoundingClientRect().height;
|
||||
nav.classList.remove('md-nav--toggled');
|
||||
|
||||
// Initial state
|
||||
nav.style.maxHeight = '0px';
|
||||
|
||||
/* Enable animations */
|
||||
requestAnimationFrame(() => {
|
||||
nav.classList.add('md-nav--transitioning');
|
||||
nav.style.maxHeight = last + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Capture the end with transitionend
|
||||
nav.addEventListener('transitionend', function() {
|
||||
this.classList.remove('md-nav--transitioning');
|
||||
if (this.getBoundingClientRect().height > 0) {
|
||||
this.style.maxHeight = '100%';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// document.querySelector('[for="nav-3"]').addEventListener('click', function() {
|
||||
// var el = document.querySelector('[for="nav-3"] + nav');
|
||||
//
|
||||
// // TODO: do via class and disable transforms!!!
|
||||
// el.style.maxHeight = '100%';
|
||||
// var rect = el.getBoundingClientRect();
|
||||
// el.style.maxHeight = '0';
|
||||
// el.style.maxHeight = '100%'; // class !?
|
||||
//
|
||||
// // console.log(rect.height);
|
||||
// el.style.maxHeight = '120px';
|
||||
// var rect = el.getBoundingClientRect();
|
||||
//
|
||||
// console.log(rect);
|
||||
//
|
||||
// el.style.maxHeight = '0px';
|
||||
// requestAnimationFrame(function() {
|
||||
// el.classList.add('md-nav--transitioning');
|
||||
// el.style.maxHeight = rect.height + 'px';
|
||||
// });
|
||||
//
|
||||
// // Capture the end with transitionend
|
||||
// el.addEventListener('transitionend', function() {
|
||||
// el.classList.remove('md-nav--transitioning');
|
||||
// });
|
||||
// });
|
||||
|
||||
|
||||
|
93
src/assets/javascripts/components/expander.js
Normal file
93
src/assets/javascripts/components/expander.js
Normal file
@ -0,0 +1,93 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Navigation expander
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
class Expander {
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @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 of expandable element
|
||||
*
|
||||
* @param {Event} ev - Event
|
||||
*/
|
||||
update(ev) {
|
||||
console.log("foo");
|
||||
};
|
||||
|
||||
/**
|
||||
* Reset state of expandable element
|
||||
*/
|
||||
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
|
||||
*/
|
||||
listen() {
|
||||
['click'].forEach(name => {
|
||||
window.addEventListener(name, this.handler_, false);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Unregister listener for all relevant events
|
||||
*/
|
||||
unlisten() {
|
||||
['click'].forEach(name => {
|
||||
window.removeEventListener(name, this.handler_, false);
|
||||
});
|
||||
|
||||
/* Perform reset */
|
||||
this.reset();
|
||||
};
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Exports
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
export default Expander;
|
@ -42,7 +42,7 @@ class ScrollSpy {
|
||||
this.offset_ = window.pageYOffset;
|
||||
|
||||
/* Event listener */
|
||||
this.handler_ = (ev) => {
|
||||
this.handler_ = ev => {
|
||||
this.update(ev);
|
||||
};
|
||||
}
|
||||
@ -57,7 +57,7 @@ class ScrollSpy {
|
||||
/* Scroll direction is down */
|
||||
if (this.offset_ <= window.pageYOffset) {
|
||||
for (let i = this.index_ + 1; i < this.el_.length; i++) {
|
||||
let anchor = document.querySelector(this.el_[i].hash);
|
||||
let anchor = document.querySelector(this.el_[i].hash); // TODO: improve performance by caching
|
||||
if (anchor.offsetTop <= window.pageYOffset) {
|
||||
if (i > 0)
|
||||
this.el_[i - 1].classList.add('md-nav__link--marked');
|
||||
@ -89,7 +89,7 @@ class ScrollSpy {
|
||||
* Reset state of sidebar
|
||||
*/
|
||||
reset() {
|
||||
[].forEach.call(this.el_, (el) => {
|
||||
[].forEach.call(this.el_, el => {
|
||||
el.classList.remove('md-nav__link--marked');
|
||||
});
|
||||
}
|
||||
@ -98,7 +98,7 @@ class ScrollSpy {
|
||||
* Register listener for all relevant events
|
||||
*/
|
||||
listen() {
|
||||
['scroll', 'resize', 'orientationchange'].forEach((name) => {
|
||||
['scroll', 'resize', 'orientationchange'].forEach(name => {
|
||||
window.addEventListener(name, this.handler_, false);
|
||||
});
|
||||
|
||||
@ -110,7 +110,7 @@ class ScrollSpy {
|
||||
* Unregister listener for all relevant events
|
||||
*/
|
||||
unlisten() {
|
||||
['scroll', 'resize', 'orientationchange'].forEach((name) => {
|
||||
['scroll', 'resize', 'orientationchange'].forEach(name => {
|
||||
window.removeEventListener(name, this.handler_, false);
|
||||
});
|
||||
|
||||
|
@ -42,7 +42,7 @@ class Sidebar {
|
||||
this.locked_ = false;
|
||||
|
||||
/* Event listener */
|
||||
this.handler_ = (ev) => {
|
||||
this.handler_ = ev => {
|
||||
this.update(ev);
|
||||
};
|
||||
};
|
||||
@ -103,7 +103,7 @@ class Sidebar {
|
||||
* Register listener for all relevant events
|
||||
*/
|
||||
listen() {
|
||||
['scroll', 'resize', 'orientationchange'].forEach((name) => {
|
||||
['scroll', 'resize', 'orientationchange'].forEach(name => {
|
||||
window.addEventListener(name, this.handler_, false);
|
||||
});
|
||||
|
||||
@ -115,7 +115,7 @@ class Sidebar {
|
||||
* Unregister listener for all relevant events
|
||||
*/
|
||||
unlisten() {
|
||||
['scroll', 'resize', 'orientationchange'].forEach((name) => {
|
||||
['scroll', 'resize', 'orientationchange'].forEach(name => {
|
||||
window.removeEventListener(name, this.handler_, false);
|
||||
});
|
||||
|
||||
|
@ -330,6 +330,12 @@
|
||||
// [screen +]: Tree-like navigation
|
||||
@include break-from-device(screen) {
|
||||
|
||||
// Animation is only possible if JavaScript is available, as the max-height
|
||||
// property must be calculated before transitioning.
|
||||
&.md-nav--transitioning {
|
||||
transition: max-height 0.4s cubic-bezier(0.86, 0.0, 0.07, 1.0);
|
||||
}
|
||||
|
||||
// Hide nested navigation by default
|
||||
.md-nav__toggle ~ & {
|
||||
max-height: 0;
|
||||
@ -337,7 +343,8 @@
|
||||
}
|
||||
|
||||
// Expand nested navigation, if toggle is checked
|
||||
.md-nav__toggle:checked ~ & {
|
||||
.md-nav__toggle:checked ~ &,
|
||||
&.md-nav--toggled {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
@ -356,14 +363,15 @@
|
||||
// Item contains a nested list
|
||||
.md-nav__item--nested > &::after {
|
||||
display: inline-block;
|
||||
transform-origin: 0.5em 0.475em;
|
||||
transition: transform 0.25s;
|
||||
transform-origin: 0.45em 0.485em;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.4s;
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
|
||||
// Rotate icon for expanded lists
|
||||
.md-nav__item--nested .md-nav__toggle:checked ~ &::after {
|
||||
transform: rotate(180deg);
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -21,14 +21,11 @@
|
||||
-->
|
||||
|
||||
<!-- Main navigation item with nested items -->
|
||||
{% if nav_item.children or nav_item == current_page %}
|
||||
{% if nav_item.children %}
|
||||
<li class="md-nav__item md-nav__item--nested">
|
||||
{% if nav_item == current_page %}
|
||||
{% set path = "toc" %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Active checkbox expands items contained within nested section -->
|
||||
{% if nav_item.active and not nav_item == current_page %}
|
||||
{% if nav_item.active %}
|
||||
<input class="md-toggle md-nav__toggle" type="checkbox"
|
||||
id="{{ path }}" checked />
|
||||
{% else %}
|
||||
@ -37,19 +34,6 @@
|
||||
{% endif %}
|
||||
|
||||
<!-- Expand active pages -->
|
||||
{% if nav_item == current_page %}
|
||||
<label class="md-nav__link md-nav__link--active"
|
||||
for="{{ path }}">
|
||||
{{ nav_item.title }}
|
||||
</label>
|
||||
<a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
|
||||
class="md-nav__link md-nav__link--active">
|
||||
{{ nav_item.title }}
|
||||
</a>
|
||||
|
||||
<!-- Show table of contents -->
|
||||
{% include "partials/toc.html" %}
|
||||
{% else %}
|
||||
<label class="md-nav__link" for="{{ path }}">
|
||||
{{ nav_item.title }}
|
||||
</label>
|
||||
@ -68,7 +52,26 @@
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
</li>
|
||||
|
||||
<!-- Main navigation item with nested items -->
|
||||
{% elif nav_item == current_page %}
|
||||
<li class="md-nav__item">
|
||||
|
||||
<!-- Active checkbox expands items contained within nested section -->
|
||||
<input class="md-toggle md-nav__toggle" type="checkbox" id="toc" />
|
||||
|
||||
<!-- Expand active pages -->
|
||||
<label class="md-nav__link md-nav__link--active" for="toc">
|
||||
{{ nav_item.title }}
|
||||
</label>
|
||||
<a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
|
||||
class="md-nav__link md-nav__link--active">
|
||||
{{ nav_item.title }}
|
||||
</a>
|
||||
|
||||
<!-- Show table of contents -->
|
||||
{% include "partials/toc.html" %}
|
||||
</li>
|
||||
|
||||
<!-- Main navigation item -->
|
||||
|
Loading…
Reference in New Issue
Block a user