Permalink
Browse files

doc: Extra 'observe' sample added

  • Loading branch information...
MikeMitterer committed Jun 26, 2015
1 parent a20448a commit 85c4a34317248154df11a2378877df36a8a91374
@@ -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>
@@ -0,0 +1,2 @@
template_dir: ../_templates
assets_dir: ../_assets
@@ -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
@@ -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;
}
}
}
@@ -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>
@@ -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());
}
@@ -0,0 +1,3 @@
<section class="demo-section">
<p>Default content! - I live in home.html</p>
</section>
@@ -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>
@@ -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>
@@ -0,0 +1,3 @@
<section class="demo-section">
<p>Magneto - I live in test2.html</p>
</section>
@@ -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 >
@@ -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 >
Oops, something went wrong.

0 comments on commit 85c4a34

Please sign in to comment.