Merge pull request #20 from Brightspace/dbatiste/expand-collapse

Adding frame-friendly vanilla expand collapse behavior.
BrightspaceUI · May 3, 2018 · c51fd75 · c51fd75
2 parents 71f537a + d3a0523
commit c51fd75
Show file tree

Hide file tree

Showing 6 changed files with 299 additions and 1 deletion.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,7 @@
 {
-  "extends": "brightspace/polymer-config"
+  "extends": "brightspace/polymer-config",
+  "globals": {
+    "fastdom": false,
+    "Promise": false
+  }
 }
diff --git a/bower.json b/bower.json
@@ -14,6 +14,7 @@
     "wct.conf.json"
   ],
   "dependencies": {
+    "d2l-fastdom-import": "https://github.com/Brightspace/fastdom-import.git#v1.0.2",
     "polymer": "1 - 2"
   },
   "devDependencies": {

diff --git a/d2l-dom-expand-collapse.html b/d2l-dom-expand-collapse.html
@@ -0,0 +1,110 @@
+<link rel="import" href="d2l-dom.html">
+<link rel="import" href="../d2l-fastdom-import/fastdom.html">
+<script>
+(function() {
+	'use strict';
+
+	var ExpandCollapse = {
+
+		DEFAULT_TRANSITION: 'height 400ms cubic-bezier(0, 0.7, 0.5, 1)',
+
+		expand: function(node) {
+			return new Promise(function(resolve, reject) {
+
+				if (!node) reject('No element specified.');
+
+				var transitionEnd = function() {
+					node.removeEventListener('transitionend', transitionEnd);
+					fastdom.mutate(function() {
+						node.style.transition = node.getAttribute('data-d2l-ec-transition');
+						node.removeAttribute('data-d2l-ec-transition');
+						node.style.overflow = node.getAttribute('data-d2l-ec-overflow');
+						node.removeAttribute('data-d2l-ec-overflow');
+						node.style.height = node.getAttribute('data-d2l-ec-height');
+						node.removeAttribute('data-d2l-ec-height');
+						resolve();
+					});
+				};
+				node.addEventListener('transitionend', transitionEnd);
+
+				fastdom.mutate(function() {
+					node.style.overflow = 'hidden';
+					node.style.transition = '';
+					node.style.height = '0px';
+					node.style.display = node.getAttribute('data-d2l-ec-display');
+					node.removeAttribute('data-d2l-ec-display');
+					if (node.classList.contains('d2l-hidden')) node.classList.remove('d2l-hidden');
+
+					fastdom.measure(function() {
+						var height = node.getAttribute('data-d2l-ec-height');
+						if (height === null) height = node.scrollHeight + 'px';
+						fastdom.mutate(function() {
+							node.style.transition = D2L.Dom.ExpandCollapse.DEFAULT_TRANSITION;
+							node.style.height = height;
+						});
+
+					});
+
+				});
+
+			});
+		},
+
+		collapse: function(node) {
+			return new Promise(function(resolve, reject) {
+
+				if (!node) reject('No element specified.');
+
+				var transitionEnd = function() {
+					node.removeEventListener('transitionend', transitionEnd);
+					fastdom.mutate(function() {
+						node.style.display = 'none';
+						resolve();
+					});
+				};
+				node.addEventListener('transitionend', transitionEnd);
+
+				fastdom.measure(function() {
+
+					var original = {
+						display: node.style.display,
+						height: node.style.height,
+						overflow: node.style.overflow,
+						transition: node.style.transition
+					};
+
+					var height = node.getBoundingClientRect().height;
+
+					fastdom.mutate(function() {
+
+						if (original.display !== '') node.setAttribute('data-d2l-ec-display', original.display);
+						if (original.height !== '') node.setAttribute('data-d2l-ec-height', original.height);
+						if (original.overflow !== '') node.setAttribute('data-d2l-ec-overflow', original.overflow);
+						if (original.transition !== '') node.setAttribute('data-d2l-ec-transition', original.transition);
+
+						node.style.overflow = 'hidden';
+						node.style.height = height + 'px';
+
+						node.style.transition = D2L.Dom.ExpandCollapse.DEFAULT_TRANSITION;
+
+						fastdom.measure(function() {
+							fastdom.mutate(function() {
+								node.style.height = '0px';
+							});
+						});
+
+					});
+
+				});
+
+			});
+		}
+
+	};
+
+	window.D2L = window.D2L || {};
+	window.D2L.Dom = window.D2L.Dom || {};
+	window.D2L.Dom.ExpandCollapse = ExpandCollapse;
+
+})();
+</script>
diff --git a/demo/dom-expand-collapse/index.html b/demo/dom-expand-collapse/index.html
@@ -0,0 +1,59 @@
+<html>
+<head>
+	<title>D2L DOM Expand/Collapse</title>
+	<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+	<link rel="stylesheet" href="../demo-styles.css">
+	<link rel="import" href="../../../polymer/polymer.html">
+	<link rel="import" href="../../d2l-dom-expand-collapse.html">
+	<style>
+		.fixture {
+			box-sizing: border-box;
+			border: 1px solid black;
+			margin-top: 20px;
+		}
+		.fixture > div {
+			padding: 50px 20px;
+		}
+		.d2l-hidden {
+			display: none !important;
+		}
+	</style>
+</head>
+<body unresolved>
+
+	<h1>d2l-dom-expand-collapse</h1>
+
+	<div style="width: 60%;">
+		<button onclick="collapse('container1');">Collapse</button>
+		<button onclick="expand('container1');">Expand</button>
+		<div id="container1" class="fixture"><div>
+			Lorem ipsum dolor sit amet, scelerisque consectetuer lacus quam lectus orci, suscipit at duis, felis ligula pellentesque, dapibus mauris natoque eros sed, suspendisse wisi non. Non dictum turpis magna elit in eros, nostra tempor vulputate malesuada. Arcu imperdiet amet est massa. Sociis phasellus aliquip vel vestibulum rutrum magnis, fusce metus class mi lorem dolor integer, in leo. Imperdiet consequat, urna ipsum ipsum mauris, vel pellentesque rutrum in, metus cras etiam, leo ut. Luctus aliquet, urna condimentum nulla in, et libero. Quis ut vitae. Morbi in at est et, quod ullamcorper feugiat diam lacinia, in egestas lorem ornare. Cursus id nec ante, amet quam in at nibh, primis eget ac consectetuer massa blandit. Vivamus posuere. Porta tempora mauris et, nullam corporis, wisi luctus vestibulum neque nunc, risus venenatis cras libero morbi.
+
+			Ut vel sed, libero congue condimentum. Libero at dolor netus metus placerat, dui varius consectetuer tempus. Mi posuere volutpat elit et et, dignissim augue pulvinar wisi, mauris elementum convallis sed nulla magna dolor, nunc dis nulla amet, elit in gravida mi dui molestie. A feugiat neque pede morbi, nullam in tellus vel proin natoque eget. Mauris non venenatis, erat vel. Erat dapibus massa nulla facilisi. Ac ac per, malesuada varius. Lorem sociosqu ipsum. Donec quis. Nibh urna sem luctus cras, tortor condimentum, molestie lorem ut est amet et augue, lorem id fringilla. Lacinia neque, lacinia orci, nisl nunc faucibus.
+		</div></div>
+	</div>
+
+	<script>
+
+	function expand(id) {
+		D2L.Dom.ExpandCollapse.expand(document.getElementById(id))
+			.then(function() {
+				console.log('expanded!');
+			}).catch(function(reason) {
+				console.log(reason);
+			});
+	}
+
+
+	function collapse(id) {
+		D2L.Dom.ExpandCollapse.collapse(document.getElementById(id))
+			.then(function() {
+				console.log('collapsed!');
+			}).catch(function(reason) {
+				console.log(reason);
+			});
+	}
+
+	</script>
+</body>
+</html>
diff --git a/test/dom-expand-collapse.html b/test/dom-expand-collapse.html
@@ -0,0 +1,123 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>d2l-dom-expand-collapse tests</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+		<script src="../../web-component-tester/browser.js"></script>
+		<link rel="import" href="../d2l-dom-expand-collapse.html">
+		<style>
+			.d2l-hidden {
+				display: none !important;
+			}
+		</style>
+	</head>
+	<body>
+
+		<test-fixture id="collapseFixture">
+			<template>
+				<div>Some content.</div>
+			</template>
+		</test-fixture>
+
+		<test-fixture id="expandFixture">
+			<template>
+				<div style="height: 0; overflow: hidden; display: none;">Some content.</div>
+			</template>
+		</test-fixture>
+
+		<script>
+
+			describe('d2l-dom-expand-collapse', function() {
+
+				describe('collapse', function() {
+
+					var collapseFixture;
+
+					beforeEach(function() {
+						collapseFixture = fixture('collapseFixture');
+					});
+
+					it('returns rejected promise if node not specified', function(done) {
+						D2L.Dom.ExpandCollapse.collapse()
+							.catch(function() {
+								done();
+							});
+					});
+
+					it('collapses element', function(done) {
+						D2L.Dom.ExpandCollapse.collapse(collapseFixture)
+							.then(function() {
+								expect(collapseFixture.getBoundingClientRect().height).to.equal(0);
+								expect(collapseFixture.offsetParent).to.equal(null);
+								done();
+							});
+					});
+
+					it('restores existing style properties', function(done) {
+						collapseFixture.style.display = 'inline-block';
+						collapseFixture.style.height = '500px';
+						collapseFixture.style.overflow = 'visible';
+						collapseFixture.style.transition = 'transform 2s ease-out';
+						D2L.Dom.ExpandCollapse.collapse(collapseFixture)
+							.then(function() {
+								return D2L.Dom.ExpandCollapse.expand(collapseFixture);
+							})
+							.then(function() {
+								expect(collapseFixture.style.display).to.equal('inline-block');
+								expect(collapseFixture.style.height).to.equal('500px');
+								expect(collapseFixture.style.overflow).to.equal('visible');
+								expect(collapseFixture.style.transition).to.equal('transform 2s ease-out');
+								expect(collapseFixture.getAttribute('data-d2l-ec-display')).to.equal(null);
+								expect(collapseFixture.getAttribute('data-d2l-ec-height')).to.equal(null);
+								expect(collapseFixture.getAttribute('data-d2l-ec-overflow')).to.equal(null);
+								expect(collapseFixture.getAttribute('data-d2l-ec-transition')).to.equal(null);
+								done();
+							});
+					});
+
+				});
+
+				describe('expand', function() {
+
+					var expandFixture;
+
+					beforeEach(function() {
+						expandFixture = fixture('expandFixture');
+					});
+
+					it('returns rejected promise if node not specified', function(done) {
+						D2L.Dom.ExpandCollapse.expand()
+							.catch(function() {
+								done();
+							});
+					});
+
+					it('expands element', function(done) {
+						D2L.Dom.ExpandCollapse.expand(expandFixture)
+							.then(function() {
+								expect(expandFixture.getBoundingClientRect().height).not.to.equal(0);
+								expect(expandFixture.offsetParent).not.to.equal(null);
+								done();
+							});
+					});
+
+					it('removes d2l-hidden if present', function(done) {
+						expandFixture.classList.add('d2l-hidden');
+						D2L.Dom.ExpandCollapse.expand(expandFixture)
+							.then(function() {
+								expect(expandFixture.getBoundingClientRect().height).not.to.equal(0);
+								expect(expandFixture.classList.contains('d2l-hidden')).to.equal(false);
+								expect(expandFixture.offsetParent).not.to.equal(null);
+								done();
+							});
+					});
+
+				});
+
+			});
+
+		</script>
+	</body>
+</html>
diff --git a/test/index.html b/test/index.html
@@ -10,6 +10,7 @@
 		<script>
 		var testVariants = [], tests = [
 			'dom.html',
+			'dom-expand-collapse.html',
 			'dom-visibility.html',
 			'dom-focus.html',
 			'focusable-behavior.html',