doc: Extra 'observe' sample added

MikeMitterer · Jun 26, 2015 · 85c4a34 · 85c4a34
1 parent a20448a
commit 85c4a34
Show file tree

Hide file tree

Showing 16 changed files with 432 additions and 185 deletions.
diff --git a/example/spa_observe/.sitegen/html/_content/index.html b/example/spa_observe/.sitegen/html/_content/index.html
@@ -0,0 +1,18 @@
+title: Observe
+samplename: observe
+sampleurl: https://github.com/MikeMitterer/dart-material-design-lite/tree/mdl/example/spa_observe/web
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<div class="demo-preview-block">
+    <p>Wait 2 secs - A timer will add 10 more List-Items!</p>
+    <div class="mdl-repeat" data-mdl-list="language in languages">
+        {{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
+        <div template class="language" >
+            Language: {{language.name}} ({{language.type}})
+            <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
+                    data-mdl-click="remove({{language.name}})">Remove</button>
+        </div>
+        |= {{ }} =| {{! ----- Turn on mustache ---- }}
+    </div>
+</div>
+
+
diff --git a/example/spa_observe/.sitegen/site.yaml b/example/spa_observe/.sitegen/site.yaml
@@ -0,0 +1,2 @@
+template_dir: ../_templates
+assets_dir: ../_assets
diff --git a/example/spa_observe/pubspec.yaml b/example/spa_observe/pubspec.yaml
@@ -0,0 +1,33 @@
+name: mdl_observe_sample
+description: Material Design Lite 'observe' Sample
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-material-design-lite
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  mdl:
+    path: ../../
+
+  di: any
+
+transformers:
+  - di
+
+#  - $dart2js:
+#      minify: false
+#      sourceMaps: true
+
+
+
diff --git a/example/spa_observe/web/demo.scss b/example/spa_observe/web/demo.scss
@@ -0,0 +1,21 @@
+//@import "packages/mdl/assets/styles/material-design-lite";
+
+.demo-page--repeat {
+    .mdl-repeat div {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: flex-start; // ⇾
+        align-content: space-between; // ||
+        align-items: center; // ↓
+
+        padding: 12px;
+
+        .mdl-checkbox {
+            margin-top: 0;
+            margin-bottom: 0;
+
+            width: initial;
+        }
+    }
+}
diff --git a/example/spa_observe/web/index.html b/example/spa_observe/web/index.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Observe</title>
+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="Material Design Lite">
+    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
+    <!-- Tile icon for Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#3372DF">
+    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
+    <!--
+    <link rel="canonical" href="http://www.example.com/">
+    -->
+    <!--<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>-->
+    <!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
+    <link rel="stylesheet" href="packages/mdl/assets/styles/material.min.css">
+    <link rel="stylesheet" href="demo.css">
+    <link rel="stylesheet" href="styles.css">
+    <style>
+        div.loading { display: none; }
+        body.mdl-upgrading > * { display: none; }
+        body.mdl-upgrading div.loading { display: block; }
+        header, body { padding: 0; margin: 0; }
+
+    </style>
+</head>
+<body class="demo-page demo-page--observe mdl-upgrading">  <div class="loading">Loading...</div>
+<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
+    <header class="mdl-layout__header mdl-layout__header--scroll mdl-layout--fixed-header mdl-color--grey-100 mdl-color-text--grey-800">
+        <div class="mdl-layout__header-row">
+            <span class="mdl-layout-title">Observe-Sample</span>
+            <div class="mdl-layout-spacer"></div>
+        </div>
+    </header>
+    <div class="ribbon mdl-color--primary"></div>
+    <main class="mdl-layout__content">
+        <div class="container mdl-grid">
+            <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
+            <div class="content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
+                <section class="demo-section demo-section--observe">
+                    <div class="demo-preview-block">
+    <p>Wait 2 secs - A timer will add 10 more List-Items!</p>
+    <div class="mdl-repeat" data-mdl-list="language in languages">
+
+        <div template class="language" >
+            Language: {{language.name}} ({{language.type}})
+            <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
+                    data-mdl-click="remove({{language.name}})">Remove</button>
+        </div>
+
+    </div>
+</div>
+
+                </section>
+            </div>
+        </div>
+    </main>
+    <footer class="mdl-mini-footer">
+        <div class="mdl-mini-footer--left-section">
+            <p class="sitegen-link">Page was generated with <a href="https://pub.dartlang.org/packages/sitegen" target="_blank">SiteGen.</a>
+             <span class="additional-info">The static site generator for Dart.</span></p>
+        </div>
+    </footer>
+</div>
+<a href="https://github.com/MikeMitterer/dart-material-design-lite/tree/mdl/example/spa_observe/web" target="_blank" id="view-source">
+    <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--accent"><i class="material-icons">pageview</i></button>
+</a>
+<script type="application/dart" src="main.dart"></script>
+<script data-pub-inline src="packages/browser/dart.js"></script>
+</body>
+</html>
diff --git a/example/spa_observe/web/main.dart b/example/spa_observe/web/main.dart
@@ -0,0 +1,89 @@
+import "dart:html" as dom;
+import "dart:async";
+import "dart:math" as Math;
+
+import 'package:logging/logging.dart';
+import 'package:console_log_handler/console_log_handler.dart';
+import 'package:di/di.dart' as di;
+
+import 'package:mdl/mdl.dart';
+import 'package:mdl/mdlobservable.dart';
+
+
+@MdlComponentModel
+class _Language {
+    final String name;
+    final String type;
+    _Language(this.name, this.type);
+}
+
+class _Natural extends _Language {
+    _Natural(final String name) : super(name,"natural");
+}
+
+@MdlComponentModel @di.Injectable()
+class AppController {
+    final Logger _logger = new Logger('main.AppController');
+
+    final ObservableList<_Language> languages = new ObservableList<_Language>();
+
+    AppController() {
+        languages.add(new _Natural("English"));
+        languages.add(new _Natural("German"));
+        languages.add(new _Natural("Italian"));
+        languages.add(new _Natural("French"));
+        languages.add(new _Natural("Spanish"));
+
+        new Timer(new Duration(seconds: 2),() {
+            for(int index = 0;index < 10;index++) {
+                languages.add(new _Natural("Sample - $index"));
+            }
+        });
+    }
+
+    void remove(final String language) {
+        _logger.info("Remove $language clicked!!!!!");
+
+        final _Language lang = languages.firstWhere(
+                (final _Language check) {
+
+                    final bool result = (check.name.toLowerCase() == language.toLowerCase());
+                    _logger.fine("Check: ${check.name} -> $language, Result: $result");
+
+                    return result;
+                });
+
+        if(language == "German") {
+
+            int index = languages.indexOf(lang);
+            languages[index] = new _Natural("Austrian");
+
+        } else {
+            languages.remove(lang);
+        }
+    }
+}
+
+main() {
+    final Logger _logger = new Logger('main.MaterialRepeat');
+
+    configLogging();
+
+    registerMdl();
+
+    componentFactory().rootContext(AppController).run(enableVisualDebugging: true).then((_) {
+        new AppController();
+
+    });
+
+}
+
+
+void configLogging() {
+    hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK
+
+    // now control the logging.
+    // Turn off all logging first
+    Logger.root.level = Level.INFO;
+    Logger.root.onRecord.listen(new LogConsoleHandler());
+}
diff --git a/example/spa_observe/web/views/home.html b/example/spa_observe/web/views/home.html
@@ -0,0 +1,3 @@
+<section class="demo-section">
+    <p>Default content! - I live in home.html</p>
+</section>
diff --git a/example/spa_observe/web/views/slider.html b/example/spa_observe/web/views/slider.html
@@ -0,0 +1,31 @@
+<section class="demo-section demo-section--slider mdl-upgrading">
+    <p>Slider sample - I live in slider.html</p>
+    <div class="demo-preview-block">
+        <p>
+            <input class="mdl-slider mdl-js-slider" type="range"
+                   min="0" max="100" value="0" tabindex="0" id="slider1"/>
+        </p>
+
+        <p>
+            <input class="mdl-slider mdl-js-slider" type="range"
+                   min="0" max="100" value="10" tabindex="0" id="slider2"/>
+        </p>
+
+        <p>
+            <input class="mdl-slider mdl-js-slider" type="range"
+                   min="0" max="100" value="0" tabindex="0" disabled id="slider3"/>
+        </p>
+
+        <p>
+            <input class="mdl-slider mdl-js-slider" type="range"
+                   min="0" max="100" value="10" tabindex="0" disabled id="slider4"/>
+        </p>
+
+        <p>
+            Drag me:
+            <input class="mdl-slider mdl-js-slider" type="range"
+                   min="0" max="100" value="10" tabindex="0" id="slider5"/>
+        </p>
+
+    </div>
+</section>
diff --git a/example/spa_observe/web/views/test.html b/example/spa_observe/web/views/test.html
@@ -0,0 +1,23 @@
+<section class="demo-section">
+    <p>Charles Francis Xavier - I live in test.html</p>
+    <p>Source for this little sample: (comes from test.html)</p>
+    <pre class="prettyprint linenums dart">
+main() {
+    final Logger _logger = new Logger('main.MaterialInclude');
+
+    configLogging();
+
+    registerAllMdlComponents();
+    registerAllMdlRemoteComponents();
+
+    upgradeAllRegistered().then((_) {
+        final MaterialInclude include = MaterialInclude.widget(dom.querySelector(&quot;#main&quot;));
+
+        include.onLoadEnd.listen((_) {
+
+            prettyPrint();
+            _logger.info(&quot;Loaded&quot;);
+        });
+    });
+}</pre>
+</section>
diff --git a/example/spa_observe/web/views/test2.html b/example/spa_observe/web/views/test2.html
@@ -0,0 +1,3 @@
+<section class="demo-section">
+    <p>Magneto - I live in test2.html</p>
+</section>
diff --git a/example/spa_repeat/.sitegen/html/_content/index.html b/example/spa_repeat/.sitegen/html/_content/index.html
@@ -3,16 +3,6 @@
 sampleurl: https://github.com/MikeMitterer/dart-material-design-lite/tree/mdl/example/spa_repeat/web
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div class="demo-preview-block">
-    <div id="autolist" class="mdl-repeat" data-mdl-list="language in languages">
-        {{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
-        <div template class="language" >
-            Language: {{language.name}} ({{language.type}})
-            <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
-                    data-mdl-click="remove({{language.name}})">Remove</button>
-        </div>
-        |= {{ }} =| {{! ----- Turn on mustache ---- }}
-    </div>
-
     <div id="main" class="mdl-repeat">
         {{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
         <div template >

diff --git a/example/spa_repeat/web/index.html b/example/spa_repeat/web/index.html
@@ -49,15 +49,6 @@
             <div class="content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
                 <section class="demo-section demo-section--repeat">
                     <div class="demo-preview-block">
-    <div id="autolist" class="mdl-repeat" data-mdl-list="language in languages">
-
-        <div template class="language" >
-            Language: {{language.name}} ({{language.type}})
-            <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
-                    data-mdl-click="remove({{language.name}})">Remove</button>
-        </div>
-
-    </div>
     <div id="main" class="mdl-repeat">
 
         <div template >