Commit b10a42a9 authored by Pascal Hartig's avatar Pascal Hartig

Animate height change for applists

parent e1619c95
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
<p class="applist-intro"> <p class="applist-intro">
These are examples written in pure JavaScript. These are examples written in pure JavaScript.
</p> </p>
<ul class="applist js"> <ul class="js-app-list-inner applist js">
<li class="routing"> <li class="routing">
<a href="architecture-examples/backbone/" data-source="http://documentcloud.github.com/backbone/" data-content="Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.">Backbone.js</a> <a href="architecture-examples/backbone/" data-source="http://documentcloud.github.com/backbone/" data-content="Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.">Backbone.js</a>
</li> </li>
...@@ -127,7 +127,7 @@ ...@@ -127,7 +127,7 @@
These are applications written in programming These are applications written in programming
languages that compile to JavaScript. languages that compile to JavaScript.
</p> </p>
<ul class="applist js"> <ul class="js-app-list-inner applist js">
<li class="routing"> <li class="routing">
<a href="architecture-examples/spine/" data-source="http://spinejs.com" data-content="Spine is a lightweight framework for building JavaScript web applications. Spine gives you an MVC structure and then gets out of your way, allowing you to concentrate on the fun stuff, building awesome web applications.">Spine</a> <a href="architecture-examples/spine/" data-source="http://spinejs.com" data-content="Spine is a lightweight framework for building JavaScript web applications. Spine gives you an MVC structure and then gets out of your way, allowing you to concentrate on the fun stuff, building awesome web applications.">Spine</a>
</li> </li>
...@@ -162,7 +162,7 @@ ...@@ -162,7 +162,7 @@
These are examples written in JavaScript that These are examples written in JavaScript that
we are still evaluating. we are still evaluating.
</p> </p>
<ul class="applist js"> <ul class="js-app-list-inner applist js">
<li class="routing"> <li class="routing">
<a href="labs/architecture-examples/backbone_marionette/" data-source="http://marionettejs.com" data-content="Backbone.Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications.">MarionetteJS</a> <a href="labs/architecture-examples/backbone_marionette/" data-source="http://marionettejs.com" data-content="Backbone.Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications.">MarionetteJS</a>
</li> </li>
......
...@@ -129,6 +129,7 @@ header nav a:not(:last-child) { ...@@ -129,6 +129,7 @@ header nav a:not(:last-child) {
font-size: 17px; font-size: 17px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
transition: height .5s ease-in-out;
} }
.applist li { .applist li {
......
...@@ -186,24 +186,50 @@ ...@@ -186,24 +186,50 @@
function AppTabs() { function AppTabs() {
document.querySelector(AppTabs.selectors.tabs).addEventListener( document.querySelector(AppTabs.selectors.tabs).addEventListener(
'core-select', this.onSelect.bind(this)); 'core-select', this.onSelect.bind(this));
this.listHeight = 0;
} }
AppTabs.selectors = { AppTabs.selectors = {
'tabs': '.js-app-tabs', tabs: '.js-app-tabs',
'list': '.js-app-list' list: '.js-app-list',
innerList: '.js-app-list-inner'
}; };
AppTabs.prototype.onSelect = function (e) { AppTabs.prototype.onSelect = function (e) {
var selected = e.target.selected; var selected = e.target.selected;
[].slice.call(document.querySelectorAll(AppTabs.selectors.list)).forEach( [].slice.call(document.querySelectorAll(AppTabs.selectors.list)).forEach(
function (e) { function (el) {
var isSelected = e.dataset.appList === selected; if (!e.detail.isSelected) {
e.style.display = isSelected ? 'block' : 'none'; // Don't handle unselection events.
e.classList.toggle('anim-swoosh-in', isSelected); return;
} }
var isSelected = el.dataset.appList === selected;
el.style.display = isSelected ? 'block' : 'none';
el.classList.toggle('anim-swoosh-in', isSelected);
if (isSelected) {
this.adjustHeight(el);
}
}.bind(this)
); );
}; };
AppTabs.prototype.adjustHeight = function (e) {
var list = e.querySelector(AppTabs.selectors.innerList);
list.style.height = this.listHeight + 'px';
var $clone = $(list)
.clone()
.css({ visibility: 'hidden' })
.height('auto')
.appendTo(list.parentElement);
window.requestAnimationFrame(function () {
var naturalHeight = this.listHeight = $clone.outerHeight();
$clone.remove();
list.style.height = naturalHeight + 'px';
}.bind(this));
};
new AppTabs(); new AppTabs();
}()); }());
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment