Permalink
Browse files

feature: Formatter (number, uppercase + lowercase) added

  • Loading branch information...
MikeMitterer committed Jul 29, 2015
1 parent f88955f commit 78ba4fe4668f92e6f61b725732b6f4417b5de543
Showing with 810 additions and 63 deletions.
  1. +12 −0 example/mdld_formatter/.sitegen/html/_content/index.html
  2. +2 −0 example/mdld_formatter/.sitegen/site.yaml
  3. +33 −0 example/mdld_formatter/pubspec.yaml
  4. +5 −0 example/mdld_formatter/web/demo.scss
  5. +91 −0 example/mdld_formatter/web/index.html
  6. +61 −0 example/mdld_formatter/web/main.dart
  7. +0 −2 example/mdld_observe/.sitegen/html/_content/index.html
  8. +0 −2 example/mdld_observe/web/index.html
  9. +0 −1 example/mdld_observe/web/main.dart
  10. +13 −0 example/styleguide/.sitegen/html/_content/views/formatter.html
  11. +8 −0 example/styleguide/.sitegen/html/_content/views/usage/formatter.html
  12. +1 −0 example/styleguide/.sitegen/html/_data/directives.json
  13. +1 −0 example/styleguide/.sitegen/html/_data/samples.json
  14. +43 −0 example/styleguide/.sitegen/html/_partials/usage/formatter/dart.html
  15. +8 −0 example/styleguide/.sitegen/html/_partials/usage/formatter/html.html
  16. +2 −0 example/styleguide/.sitegen/html/_partials/usage/formatter/readme.html
  17. +3 −0 example/styleguide/web/assets/styles/_demo/_formatter.scss
  18. +1 −0 example/styleguide/web/index.html
  19. +46 −0 example/styleguide/web/main.dart
  20. +13 −0 example/styleguide/web/views/formatter.html
  21. +14 −0 example/styleguide/web/views/samples.html
  22. +82 −0 example/styleguide/web/views/usage/formatter.html
  23. +4 −1 lib/mdl.dart
  24. +1 −0 lib/mdldirective.dart
  25. +96 −0 lib/mdlformatter.dart
  26. +1 −1 lib/src/application/mirrors/Invoke.dart
  27. +4 −56 lib/src/directive/components/MaterialObserve.dart
  28. +32 −0 lib/src/formatter/DecoratorFormatter.dart
  29. +98 −0 lib/src/formatter/FormatterPipeline.dart
  30. +31 −0 lib/src/formatter/LowerCaseFormatter.dart
  31. +72 −0 lib/src/formatter/NumberFormatter.dart
  32. +31 −0 lib/src/formatter/UpperCaseFormatter.dart
  33. +1 −0 tool/grinder/samples.dart
@@ -0,0 +1,12 @@
title: FORMATTER
samplename: formatter
sampleurl: https://github.com/MikeMitterer/dart-material-design-lite/tree/mdl/example/mdld_formatter/web
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div class="demo-preview-block">
PI: <span mdl-observe="pi"></span><br>
PI with formatter: <span mdl-observe="pi | number(value,2)"></span><br>
<br>
Name: <span mdl-observe="name"></span><br>
Name with formatter: <span mdl-observe="name | uppercase(value)"></span> (UpperCaseFormatter)<br>
Name with formatter: <span mdl-observe="name | lowercase(value)"></span> (LowerCaseFormatter)<br>
</div>
@@ -0,0 +1,2 @@
template_dir: ../_templates
assets_dir: ../_assets
@@ -0,0 +1,33 @@
name: mdl_formatter_sample
description: Material Design Lite 'Formatter' 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,5 @@
//@import "packages/mdl/assets/styles/material-design-lite";
.demo-page--formatter, .demo-section--formatter {
}
@@ -0,0 +1,91 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Material Design Lite (MDL/Dart) for Dart is a library of components for web developers based on Google's Material Design, ported to Dart.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FORMATTER</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="prism-default.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--formatter mdl-upgrading"> <div class="loading">Loading...</div>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-color--grey-100">
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--grey-100 mdl-color-text--grey-800">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">FORMATTER-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--formatter">
<div class="demo-preview-block">
PI: <span mdl-observe="pi"></span><br>
PI with formatter: <span mdl-observe="pi | number(value,2)"></span><br>
<br>
Name: <span mdl-observe="name"></span><br>
Name with formatter: <span mdl-observe="name | uppercase(value)"></span> (UpperCaseFormatter)<br>
Name with formatter: <span mdl-observe="name | lowercase(value)"></span> (LowerCaseFormatter)<br>
</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>
<div class="mdl-mini-footer--right-section">
<p class="mm-link">Brought to you by:
<a href="http://www.mikemitterer.at/" target="_blank">Mike Mitterer, IT-Consulting and Development Ltd.</a>
</p>
</div>
</footer>
</div>
<a href="https://github.com/MikeMitterer/dart-material-design-lite/tree/mdl/example/mdld_formatter/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>
<!-- Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-64837522-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
@@ -0,0 +1,61 @@
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 @di.Injectable()
class Application extends MaterialApplication {
final Logger _logger = new Logger('main.Application');
final ObservableProperty<double> pi = new ObservableProperty<double>(3.14159265359);
final ObservableProperty<String> name = new ObservableProperty<String>("Mike");
final List<String> xmen;
Application() : xmen = ['Angel/Archangel', 'Apocalypse', 'Bishop', 'Beast','Caliban','Colossus',
'Cyclops','Firestar','Emma Frost','Gambit','High Evolutionary','Dark Phoenix',
'Marvel Girl','Iceman','Juggernaut','Magneto','Minos','Mr. Sinister','Mystique',
'Nightcrawler','Professor X','Pyro','Psylocke','Rogue','Sabretooth','Shadowcat','Storm',
'Talker','Wolverine','X-23' ];
@override
void run() {
final Math.Random rnd = new Math.Random();
new Timer.periodic(new Duration(milliseconds: 500),(final Timer timer) {
final int index = rnd.nextInt(xmen.length);
name.value = xmen[index];
});
}
//- private -----------------------------------------------------------------------------------
}
main() async {
final Logger _logger = new Logger('main.Formatter');
configLogging();
registerMdl();
final MaterialApplication application = await componentFactory().
rootContext(Application).run(enableVisualDebugging: true);
application.run();
}
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());
}
@@ -10,8 +10,6 @@
<p>
Now it's: <span mdl-observe="time"></span><br>
Nr. of records: <span mdl-observe="records"></span><br>
PI: <span mdl-observe="pi"></span><br>
PI with formatter: <span mdl-observe="pi | number(value,2)"></span><br>
</p>
<div mdl-repeat="language in languages">
{{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
@@ -57,8 +57,6 @@
<p>
Now it's: <span mdl-observe="time"></span><br>
Nr. of records: <span mdl-observe="records"></span><br>
PI: <span mdl-observe="pi"></span><br>
PI with formatter: <span mdl-observe="pi | number(value,2)"></span><br>
</p>
<div mdl-repeat="language in languages">
@@ -27,7 +27,6 @@ class Application extends MaterialApplication {
final ObservableList<_Language> languages = new ObservableList<_Language>();
final ObservableProperty<String> time = new ObservableProperty<String>("",interval: new Duration(seconds: 1));
final ObservableProperty<String> records = new ObservableProperty<String>("");
final ObservableProperty<double> pi = new ObservableProperty<double>(3.14159265359);
Application() {
records.observes(() => (languages.isNotEmpty ? languages.length.toString() : "<empty>"));
@@ -0,0 +1,13 @@
<section class="demo-section demo-section--formatter demo-page--formatter">
<div id="usage" class="mdl-include mdl-js-include" data-url="views/usage/formatter.html">
Loading...
</div>
<div class="demo-preview-block">
PI: <span mdl-observe="pi"></span><br>
PI with formatter: <span mdl-observe="pi | number(value,2)"></span><br>
<br>
Name: <span mdl-observe="name"></span><br>
Name with formatter: <span mdl-observe="name | uppercase(value)"></span> (UpperCaseFormatter)<br>
Name with formatter: <span mdl-observe="name | lowercase(value)"></span> (LowerCaseFormatter)<br>
</div>
</section>
@@ -0,0 +1,8 @@
template: usage
dart: ->usage.formatter.dart
html: ->usage.formatter.html
readme: ->usage.formatter.readme
component: formatter
~~~
@@ -1,6 +1,7 @@
[
{ "name": "attribute", "link": "#/attribute" },
{ "name": "class", "link": "#/class" },
{ "name": "formatter", "link": "#/formatter" },
{ "name": "model", "link": "#/model" },
{ "name": "observe", "link": "#/observe" },
{ "name": "repeat", "link": "#/repeat" }
@@ -12,6 +12,7 @@
{ "name": "dialog", "original": false, "prefix": "mdlx_" },
{ "name": "dnd", "original": false, "prefix": "mdlx_" },
{ "name": "footer", "original": true, "prefix": "mdl_" },
{ "name": "formatter", "original": false, "prefix": "mdld_" },
{ "name": "forms", "original": false, "prefix": "mdlx_" },
{ "name": "grid", "original": true, "prefix": "mdl_" },
{ "name": "icon-toggle", "original": true, "prefix": "mdl_" },
@@ -0,0 +1,43 @@
import &#39;package:mdl&#47;mdl.dart&#39;;
import &#39;package:mdl&#47;mdlobservable.dart&#39;;
@MdlComponentModel @di.Injectable()
class Application extends MaterialApplication &#123;
final Logger _logger = new Logger(&#39;main.Application&#39;);
final ObservableProperty&lt;double&gt; pi = new ObservableProperty&lt;double&gt;(3.14159265359);
final ObservableProperty&lt;String&gt; name = new ObservableProperty&lt;String&gt;(&quot;Mike&quot;);
final List&lt;String&gt; xmen;
Application() : xmen = [&#39;Angel&#47;Archangel&#39;, &#39;Apocalypse&#39;, &#39;Bishop&#39;, &#39;Beast&#39;,&#39;Caliban&#39;,&#39;Colossus&#39;,
&#39;Cyclops&#39;,&#39;Firestar&#39;,&#39;Emma Frost&#39;,&#39;Gambit&#39;,&#39;High Evolutionary&#39;,&#39;Dark Phoenix&#39;,
&#39;Marvel Girl&#39;,&#39;Iceman&#39;,&#39;Juggernaut&#39;,&#39;Magneto&#39;,&#39;Minos&#39;,&#39;Mr. Sinister&#39;,&#39;Mystique&#39;,
&#39;Nightcrawler&#39;,&#39;Professor X&#39;,&#39;Pyro&#39;,&#39;Psylocke&#39;,&#39;Rogue&#39;,&#39;Sabretooth&#39;,&#39;Shadowcat&#39;,&#39;Storm&#39;,
&#39;Talker&#39;,&#39;Wolverine&#39;,&#39;X-23&#39; ];
@override
void run() &#123;
final Math.Random rnd = new Math.Random();
new Timer.periodic(new Duration(milliseconds: 500),(final Timer timer) &#123;
final int index = rnd.nextInt(xmen.length);
name.value = xmen[index];
&#125;);
&#125;
&#47;&#47;- private -----------------------------------------------------------------------------------
&#125;
main() async &#123;
final Logger _logger = new Logger(&#39;main.Formatter&#39;);
registerMdl();
final MaterialApplication application = await componentFactory().
rootContext(Application).run(enableVisualDebugging: true);
application.run();
&#125;
@@ -0,0 +1,8 @@
&lt;div class=&quot;demo-preview-block&quot;&gt;
PI: &lt;span mdl-observe=&quot;pi&quot;&gt;&lt;&#47;span&gt;&lt;br&gt;
PI with formatter: &lt;span mdl-observe=&quot;pi | number(value,2)&quot;&gt;&lt;&#47;span&gt;&lt;br&gt;
&lt;br&gt;
Name: &lt;span mdl-observe=&quot;name&quot;&gt;&lt;&#47;span&gt;&lt;br&gt;
Name with formatter: &lt;span mdl-observe=&quot;name | uppercase(value)&quot;&gt;&lt;&#47;span&gt; (UpperCaseFormatter)&lt;br&gt;
Name with formatter: &lt;span mdl-observe=&quot;name | lowercase(value)&quot;&gt;&lt;&#47;span&gt; (LowerCaseFormatter)&lt;br&gt;
&lt;&#47;div&gt;
@@ -0,0 +1,2 @@
<h4>formatter</h4>
<p>...will be here soon</p>
@@ -0,0 +1,3 @@
.demo-page--formatter, .demo-section--formatter {
}
@@ -102,6 +102,7 @@
<div class="mdl-accordion--content">
<a class="mdl-navigation__link mdl-color-text--primary" href="#/attribute">attribute</a>
<a class="mdl-navigation__link mdl-color-text--primary" href="#/class">class</a>
<a class="mdl-navigation__link mdl-color-text--primary" href="#/formatter">formatter</a>
<a class="mdl-navigation__link mdl-color-text--primary" href="#/model">model</a>
<a class="mdl-navigation__link mdl-color-text--primary" href="#/observe">observe</a>
<a class="mdl-navigation__link mdl-color-text--primary" href="#/repeat">repeat</a>
Oops, something went wrong.

0 comments on commit 78ba4fe

Please sign in to comment.