Permalink
Browse files

doc: Accordion added to styleguide

  • Loading branch information...
MikeMitterer committed Feb 24, 2015
1 parent 5d8e7dc commit 8aa587452bc850777f0d2ea46cfe01c608c3eb95
@@ -8,4 +8,3 @@
}
}
}
-

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -28,6 +28,7 @@ <h2>WSK-Material</h2>
<ul><li><a href="styleguide.html">Styleguide</a> (takes a while - loads all other samples in iframe)</li></ul>
<h2>WSK-Material-Samples</h2>
<ol>
+ <li><a href="accordion/web/index.html">accordion/web/index.html</a><span class="script">[ with main.dart ]</span></li>
<li><a href="animation/web/index.html">animation/web/index.html</a><span class="script">[ with main.dart ]</span></li>
<li><a href="button/web/index.html">button/web/index.html</a><span class="script">[ with main.dart ]</span></li>
<li><a href="card/web/index.html">card/web/index.html</a></li>
View
@@ -1,4 +1,5 @@
import 'dart:html' as html;
+import "dart:async";
import 'dart:js';
import 'package:logging/logging.dart';
@@ -8,6 +9,8 @@ import 'package:wsk_material/wskcomponets.dart';
final Logger _logger = new Logger('example.Styleguide');
+const String LOADER_TEXT = "Wait! Loading {{nrofiframes}} iframes...";
+
main() {
configLogging();
loadDemos();
@@ -27,17 +30,22 @@ void loadDemos() {
return;
}
+ _setLoaderInfo(totalDemosPendingLoading);
iframe.onLoad.listen((final html.Event event) {
+ _setLoaderInfo(totalDemosPendingLoading);
var jsIFrame = new JsObject.fromBrowserObject(iframe);
// contentDocument.documentElement is not implemented in Dart!!!!!
final int contentHeight = jsIFrame["contentDocument"]["documentElement"]["scrollHeight"];
- iframe.style.height = "${contentHeight}px";
+ iframe.style.height = "${contentHeight * 1.5}px";
iframe.classes.add("heightSet");
totalDemosPendingLoading--;
+ _setLoaderInfo(totalDemosPendingLoading);
+
if (totalDemosPendingLoading <= 0) {
html.querySelector("body").classes.add("demosLoaded");
+ html.querySelector("body").classes.remove("loadingDemos");
}
});
}
@@ -46,7 +54,9 @@ void loadDemos() {
final List<html.HtmlElement> demos = html.querySelectorAll('.styleguide-demo');
totalDemosPendingLoading = demos.length;
+ _setLoaderInfo(totalDemosPendingLoading);
for (int i = 0;i < demos.length;i++) {
+ new Future.delayed(new Duration(milliseconds: 200),() {
final String demoTitle = (demos[i].querySelector('h1') as html.HtmlElement).text ;
final String anchorLink = 'demo-$i';
@@ -63,12 +73,22 @@ void loadDemos() {
// Size iframe
_sizeDemo(demos[i]);
+ });
}
}
_sizeDemos();
}
+void _setLoaderInfo(final int nrOfFramesLeft) {
+ new Future(() {
+ final html.HtmlElement element = html.querySelector('div.loader') as html.HtmlElement;
+ if(element != null) {
+ element.text = LOADER_TEXT.replaceFirst("{{nrofiframes}}","$nrOfFramesLeft");
+ }
+ });
+}
+
void configLogging() {
hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK
View
@@ -1365,7 +1365,7 @@ body {
font-weight: 300; }
.wsk-styleguide .wsk-layout__drawer .wsk-navigation__link {
- padding: 10px 24px; }
+ padding: 8px 24px 5px; }
.demosLoaded .styleguide-demo {
opacity: 1; }
@@ -1382,3 +1382,9 @@ iframe.heightSet {
margin: 24px; }
.demo-wrapper iframe {
border: 1px solid rgba(0, 0, 0, 0.5); }
+
+.loader {
+ display: none; }
+ .loadingDemos .loader {
+ display: block;
+ padding: 24px; }
View
@@ -18,12 +18,14 @@
rel=stylesheet type=text/css>
<link rel=stylesheet href=./styleguide.css>
</head>
-<body>
+<body class="loadingDemos">
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-drawer wsk-styleguide">
<div class=wsk-layout__drawer><span class=wsk-layout-title>WSK <strong>Style Guide</strong></span>
<nav id=main-navigation class=wsk-navigation></nav>
</div>
<div class=wsk-layout__content>
+ <div class="loader">Wait! Loading more than 20 iframes...</div>
+
<div class=styleguide-demo><h1>Typography</h1>
<iframe src=./typography/web/index.html scrolling=no></iframe>
</div>
@@ -63,6 +65,9 @@
<div class=styleguide-demo><h1>Switch</h1>
<iframe src=./switch/web/index.html scrolling=no></iframe>
</div>
+ <div class=styleguide-demo><h1>Accordion</h1>
+ <iframe src=./accordion/web/index.html scrolling=no></iframe>
+ </div>
<div class=styleguide-demo><h1>Icon Toggle</h1>
<iframe src=./icon-toggle/web/index.html scrolling=no></iframe>
</div>
View
@@ -85,3 +85,12 @@ iframe.heightSet {
border: 1px solid rgba(0,0,0,0.5);
}
}
+
+.loader {
+ display: none;
+
+ .loadingDemos & {
+ display: block;
+ padding: 24px;
+ }
+}
View
@@ -1,2 +1,4 @@
This folder is a 1:1 copy of
-web-starter-kit-0.6.0/material-css-src/app/styleguide
+web-starter-kit-0.6.0/material-css-src/app/styleguide
+
+accordion - is not part of the original wsk-version
@@ -0,0 +1 @@
+/* Dummy to make gensamples happy */
Oops, something went wrong.

0 comments on commit 8aa5874

Please sign in to comment.