From 4646dc695d8392ee41e3be7b726e227046e5c82f Mon Sep 17 00:00:00 2001 From: Jono Brandel Date: Tue, 1 Feb 2011 16:04:39 -0800 Subject: [PATCH 1/4] Tried to update the animations for documentation and utterly failed. Sad face. Line 89 of demo.css --- demo/demo.css | 14 ++++++-------- gui.css | 2 +- index.html | 7 +++++-- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/demo/demo.css b/demo/demo.css index 966a9ad..1a6f6b5 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -86,16 +86,14 @@ div.expanded h2:before, div.collapsed h2:before { font-size: 9px; font-family: Monaco, monospace; } - -div.collapsed .collapsable { +/* Can't seem to get this transition to work :( */ +div.collapsable { overflow: hidden; clear: both; - height: 0; -} -div.expanded .collapsable { - overflow: hidden; - clear: both; - height: auto; + height: 0px; + -moz-transition: height .2s linear; + -webkit-transition: height .2s linear; + transition: height .2s linear; } div.expanded { cursor: pointer; } diff --git a/gui.css b/gui.css index f05ca69..63f79be 100644 --- a/gui.css +++ b/gui.css @@ -100,7 +100,7 @@ a.guidat-toggle:hover { border: 0; color: #1ed36f; margin-right: 2px; -width: 148px; + width: 148px; } .guidat-controller.boolean { diff --git a/index.html b/index.html index 00632bf..c52f203 100644 --- a/index.html +++ b/index.html @@ -74,8 +74,11 @@ if(this.className == 'collapsed') { this.className = 'expanded'; + var children = this.childNodes; + this.childNodes[3].style.height = 'auto'; } else { this.className = 'collapsed'; + this.childNodes[3].style.height = '0px'; } } @@ -241,7 +244,7 @@ gui.add(obj, "changingProperty").listen(); // Make your own loop setInterval(function() { - gui.listen(); // updates values you've marked with listen() + gui.listen(); // updates values you've marked with listen() }, 1000 / 60);

Alternatively, you can forego calling listen() on individual controllers, and instead choose to monitor changes in all values controlled by your gui.

@@ -253,7 +256,7 @@ gui.add(obj, "properties"); // Make your own loop setInterval(function() { - gui.listenAll(); // updates ALL values managed by this gui + gui.listenAll(); // updates ALL values managed by this gui }, 1000 / 60); From 79602505b97b89cd2afd6e898cf74ba19650d906 Mon Sep 17 00:00:00 2001 From: Jono Brandel Date: Thu, 3 Feb 2011 14:36:28 -0800 Subject: [PATCH 2/4] css3 animations work for documentation page, thanks szimek! --- demo/demo.css | 36 ++++++++++++++++++------- index.html | 74 ++++++++++++++++++++++++++++++++------------------- 2 files changed, 72 insertions(+), 38 deletions(-) diff --git a/demo/demo.css b/demo/demo.css index 966a9ad..0d52950 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -49,14 +49,14 @@ h2 { } h2.section { -margin: 0; -padding: 20px 0 20px; -cursor: pointer; -border-top: 1px dotted #ccc; --webkit-transition: color 0.15s linear; + margin: 0; + padding: 20px 0 20px; + cursor: pointer; + border-top: 1px dotted #ccc; + -webkit-transition: color 0.15s linear; } h2.section:hover { -color: #00aeff; + color: #00aeff; } div.collapsed h2, div.expanded h2 { @@ -66,11 +66,14 @@ div.collapsed h2, div.expanded h2 { width: 100%; cursor: pointer; } -h2.last { -border-bottom: 1px dotted #ccc; -margin-bottom: 20px; -} +div.trans { + border-top: 1px dotted #ccc; + margin: 0px 0px 20px 0px; +} +ol#secrets { + padding: 0px 0px 20px 0px; +} div.expanded h2:before { content: '-'; } @@ -87,6 +90,18 @@ div.expanded h2:before, div.collapsed h2:before { font-family: Monaco, monospace; } +div.collapsable { + overflow: hidden; + clear: both; + -moz-transition: height .2s ease-out; + -webkit-transition: height .2s ease-out; + transition: height .2s ease-out; +} + +div.collapsable div { + height: auto; +} + div.collapsed .collapsable { overflow: hidden; clear: both; @@ -97,6 +112,7 @@ div.expanded .collapsable { clear: both; height: auto; } + div.expanded { cursor: pointer; } #helvetica-demo { diff --git a/index.html b/index.html index 00632bf..ddf2c2b 100644 --- a/index.html +++ b/index.html @@ -72,10 +72,15 @@ function toggle(e) { - if(this.className == 'collapsed') { + var collapsable = this.childNodes[3], + wrapper = collapsable.childNodes[1]; + + if (this.className === 'collapsed') { this.className = 'expanded'; + collapsable.style.height = wrapper.clientHeight + 'px'; } else { this.className = 'collapsed'; + collapsable.style.height = '0px'; } } @@ -186,20 +191,22 @@ window.onload = function() { -