Permalink
Browse files

feature: MaterialObserver supports templates + objects

  • Loading branch information...
MikeMitterer committed Aug 13, 2015
1 parent f13438b commit 5bd4c35e0c226e2c9885d7fe5ef99cd11f5a4c71
Showing with 2,021 additions and 127 deletions.
  1. +26 −7 example/mdld_observe/.sitegen/html/_content/index.html
  2. +10 −0 example/mdld_observe/web/demo.scss
  3. +25 −7 example/mdld_observe/web/index.html
  4. +33 −3 example/mdld_observe/web/main.dart
  5. +11 −9 example/mdld_repeat/.sitegen/html/_content/index.html
  6. +11 −9 example/mdld_repeat/web/index.html
  7. +15 −9 example/mdlx_dnd/.sitegen/html/_content/index.html
  8. +15 −9 example/mdlx_dnd/web/index.html
  9. +1 −0 lib/assets/styles/_components.scss
  10. +4 −0 lib/assets/styles/material.css
  11. +1 −1 lib/assets/styles/material.min.css
  12. +4 −0 lib/assets/styles/template/_template.scss
  13. +1 −0 lib/mdlcore.dart
  14. +4 −0 lib/mdldirective.dart
  15. +2 −0 lib/mdlformatter.dart
  16. +3 −1 lib/mdltemplate.dart
  17. +110 −0 lib/mustache.dart
  18. +13 −1 lib/src/application/mirrors/StringToFunction.dart
  19. +1 −0 lib/src/application/modules/DomRenderer.dart
  20. +71 −0 lib/src/core/ConvertValue.dart
  21. +9 −8 lib/src/core/MdlComponentHandler.dart
  22. +85 −17 lib/src/directive/components/MaterialObserve.dart
  23. +1 −1 lib/src/dnd/MaterialDraggable.dart
  24. +37 −0 lib/src/formatter/ChooseFormatter.dart
  25. +117 −0 lib/src/mustache/lambda_context.dart
  26. +96 −0 lib/src/mustache/node.dart
  27. +373 −0 lib/src/mustache/parser.dart
  28. +343 −0 lib/src/mustache/renderer.dart
  29. +381 −0 lib/src/mustache/scanner.dart
  30. +45 −0 lib/src/mustache/template.dart
  31. +116 −0 lib/src/mustache/template_exception.dart
  32. +40 −0 lib/src/mustache/token.dart
  33. +4 −36 lib/src/observable/ObservableProperty.dart
  34. +12 −8 lib/src/template/components/MaterialRepeat.dart
  35. +1 −1 pubspec.yaml
@@ -11,15 +11,34 @@
Now it's: <span mdl-observe="time"></span><br>
Nr. of records: <span mdl-observe="records"></span><br>
</p>
<div mdl-repeat="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>
Observe Object (_Name): <span mdl-observe="isNameNull | choose(value, '(Name-Object is null!)','')"></span>
<div mdl-observe="name" class="name mdl-color--100">
{{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
<template>
<div>
Firstname: {{first}},<br>
Last name: {{last}}<br>
<div>Text in <strong>DIV</strong></div>
</div>
</template>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</div>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</div>
<p>
<div mdl-repeat="language in languages">
{{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
<template>
<div 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>
</template>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</div>
</p>
</div>
@@ -1,6 +1,16 @@
//@import "packages/mdl/assets/styles/material-design-lite";
.demo-page--observe, .demo-section--observe {
[mdl-observe].name {
padding: 8px;
border-radius: 8px;
&:empty {
display: none;
}
}
.mdl-repeat div {
display: flex;
flex-direction: row;
@@ -57,15 +57,33 @@
Now it's: <span mdl-observe="time"></span><br>
Nr. of records: <span mdl-observe="records"></span><br>
</p>
<div mdl-repeat="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>
Observe Object (_Name): <span mdl-observe="isNameNull | choose(value, '(Name-Object is null!)','')"></span>
<div mdl-observe="name" class="name mdl-color--100">
<template>
<div>
Firstname: {{first}},<br>
Last name: {{last}}<br>
<div>Text in <strong>DIV</strong></div>
</div>
</template>
</div>
</div>
<p>
<div mdl-repeat="language in languages">
<template>
<div 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>
</template>
</div>
</p>
</div>
</section>
@@ -16,6 +16,18 @@ class _Language {
_Language(this.name, this.type);
}
@MdlComponentModel
class _Name {
final String first;
final String last;
_Name(this.first, this.last);
@override
String toString() {
return "$first $last";
}
}
class _Natural extends _Language {
_Natural(final String name) : super(name,"natural");
}
@@ -27,25 +39,43 @@ 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<_Name> name = new ObservableProperty<_Name>(new _Name("Mike","Mitterer"));
final ObservableProperty<bool> isNameNull = new ObservableProperty<bool>(true);
final List<_Name> _names = new List<_Name>();
Application() {
records.observes(() => (languages.isNotEmpty ? languages.length.toString() : "<empty>"));
time.observes(() => _getTime());
}
@override
void run() {
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"));
_names.add(new _Name("Bill","Gates"));
_names.add(new _Name("Steven","Jobs"));
_names.add(new _Name("Larry","Page"));
_names.add(null);
}
@override
void run() {
new Timer(new Duration(seconds: 2),() {
for(int index = 0;index < 10;index++) {
languages.add(new _Natural("Sample - $index"));
}
});
int counter = 0;
new Timer.periodic(new Duration(milliseconds: 1000),(final Timer timer) {
name.value = _names[counter % 4]; // 0,1,2,...
isNameNull.value = name.value == null;
counter++;
});
}
void remove(final String language) {
@@ -5,15 +5,17 @@
<div class="demo-preview-block">
<div mdl-repeat id="main">
{{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
<div template >
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="check-{{id}}">
<input type="checkbox" id="check-{{id}}" class="mdl-checkbox__input"
data-mdl-click="clicked('{{name}}')" />
<span class="mdl-checkbox__label">Repeat me: <strong>{{name}}</strong> (ID: {{id}})</span>
</label>
<button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
data-mdl-click="remove()">Remove</button>
</div>
<template>
<div>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="check-{{id}}">
<input type="checkbox" id="check-{{id}}" class="mdl-checkbox__input"
data-mdl-click="clicked('{{name}}')" />
<span class="mdl-checkbox__label">Repeat me: <strong>{{name}}</strong> (ID: {{id}})</span>
</label>
<button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
data-mdl-click="remove()">Remove</button>
</div>
</template>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</div>
</div>
@@ -51,15 +51,17 @@
<div class="demo-preview-block">
<div mdl-repeat id="main">
<div template >
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="check-{{id}}">
<input type="checkbox" id="check-{{id}}" class="mdl-checkbox__input"
data-mdl-click="clicked('{{name}}')" />
<span class="mdl-checkbox__label">Repeat me: <strong>{{name}}</strong> (ID: {{id}})</span>
</label>
<button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
data-mdl-click="remove()">Remove</button>
</div>
<template>
<div>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="check-{{id}}">
<input type="checkbox" id="check-{{id}}" class="mdl-checkbox__input"
data-mdl-click="clicked('{{name}}')" />
<span class="mdl-checkbox__label">Repeat me: <strong>{{name}}</strong> (ID: {{id}})</span>
</label>
<button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
data-mdl-click="remove()">Remove</button>
</div>
</template>
</div>
</div>
@@ -12,9 +12,11 @@ <h2>Drag & Drop (experimental)</h2>
<h6>Choose language</h6>
<div mdl-repeat="language in languages" class="source langbox mdl-dnd__drag-container" >
{{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
<mdl-draggable template class="language" consumes="language" drop-zone="{{language.type}}">
{{language.name}}
</mdl-draggable>
<template>
<mdl-draggable class="language" consumes="language" drop-zone="{{language.type}}">
{{language.name}}
</mdl-draggable>
</template>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</div>
</div>
@@ -30,9 +32,11 @@ <h6>Programming languages</h6>
<!-- mdl-repeat takes its for-each param from the next SCOPE-AWARE-Parent (mld-dropzone is not SCOPE-AWARE) -->
<div mdl-repeat="language in programming" class="mdl-dnd__drag-container">
{{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
<mdl-draggable template class="language" consumes="language" drop-zone="trash">
{{language.name}}
</mdl-draggable>
<template>
<mdl-draggable class="language" consumes="language" drop-zone="trash">
{{language.name}}
</mdl-draggable>
</template>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</div>
</mdl-dropzone>
@@ -48,9 +52,11 @@ <h6>Natural languages</h6>
<!-- mdl-repeat takes its for-each param from the next SCOPE-AWARE-Parent (mld-dropzone is not SCOPE-AWARE) -->
<div mdl-repeat="language in natural" class="mdl-dnd__drag-container">
{{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
<mdl-draggable template class="language" consumes="language" drop-zone="trash">
{{language.name}}
</mdl-draggable>
<template>
<mdl-draggable class="language" consumes="language" drop-zone="trash">
{{language.name}}
</mdl-draggable>
</template>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</div>
</mdl-dropzone>
@@ -55,9 +55,11 @@ <h2>Drag & Drop (experimental)</h2>
<h6>Choose language</h6>
<div mdl-repeat="language in languages" class="source langbox mdl-dnd__drag-container" >
<mdl-draggable template class="language" consumes="language" drop-zone="{{language.type}}">
{{language.name}}
</mdl-draggable>
<template>
<mdl-draggable class="language" consumes="language" drop-zone="{{language.type}}">
{{language.name}}
</mdl-draggable>
</template>
</div>
</div>
@@ -70,9 +72,11 @@ <h6>Programming languages</h6>
<!-- mdl-repeat takes its for-each param from the next SCOPE-AWARE-Parent (mld-dropzone is not SCOPE-AWARE) -->
<div mdl-repeat="language in programming" class="mdl-dnd__drag-container">
<mdl-draggable template class="language" consumes="language" drop-zone="trash">
{{language.name}}
</mdl-draggable>
<template>
<mdl-draggable class="language" consumes="language" drop-zone="trash">
{{language.name}}
</mdl-draggable>
</template>
</div>
</mdl-dropzone>
@@ -85,9 +89,11 @@ <h6>Natural languages</h6>
<!-- mdl-repeat takes its for-each param from the next SCOPE-AWARE-Parent (mld-dropzone is not SCOPE-AWARE) -->
<div mdl-repeat="language in natural" class="mdl-dnd__drag-container">
<mdl-draggable template class="language" consumes="language" drop-zone="trash">
{{language.name}}
</mdl-draggable>
<template>
<mdl-draggable class="language" consumes="language" drop-zone="trash">
{{language.name}}
</mdl-draggable>
</template>
</div>
</mdl-dropzone>
@@ -24,6 +24,7 @@
@import "spinner/spinner";
@import "switch/switch";
@import "tabs/tabs";
@import "template/template";
@import "textfield/textfield";
@import "tooltip/tooltip";
@@ -6603,6 +6603,10 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
opacity: 1;
width: 100%; } }
template, div[template] {
display: none;
visibility: hidden; }
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,4 @@
template, div[template] {
display: none;
visibility: hidden;
}
View
@@ -35,6 +35,7 @@ import 'package:di/di.dart' as di;
part "src/core/annotations.dart";
part "src/core/interfaces.dart";
part "src/core/utils.dart";
part "src/core/ConvertValue.dart";
part "src/core/MdlComponentHandler.dart";
part "src/core/MdlConfig.dart";
View
@@ -24,6 +24,7 @@ import 'dart:mirrors';
import 'dart:html' as dom;
import 'package:intl/intl.dart';
import 'dart:collection';
import 'package:logging/logging.dart';
import 'package:validate/validate.dart';
@@ -35,6 +36,9 @@ import 'package:mdl/mdlapplication.dart';
import 'package:mdl/mdlobservable.dart';
import "package:mdl/mdlformatter.dart";
import 'package:mdl/mustache.dart';
part "src/directive/components/MaterialObserve.dart";
part "src/directive/components/MaterialModel.dart";
part "src/directive/components/MaterialClass.dart";
View
@@ -33,6 +33,7 @@ part "src/formatter/FormatterPipeline.dart";
part "src/formatter/NumberFormatter.dart";
part "src/formatter/UpperCaseFormatter.dart";
part "src/formatter/LowerCaseFormatter.dart";
part "src/formatter/ChooseFormatter.dart";
part "src/formatter/DecoratorFormatter.dart";
@@ -74,6 +75,7 @@ class Formatter {
final DecoratorFormatter decorate = new DecoratorFormatter();
final UpperCaseFormatter uppercase = new UpperCaseFormatter();
final LowerCaseFormatter lowercase = new LowerCaseFormatter();
final ChooseFormatter choose = new ChooseFormatter();
}
/// Makes Formatter available in DI
View
@@ -27,9 +27,11 @@ import 'dart:async';
import 'package:logging/logging.dart';
import 'package:validate/validate.dart';
import 'package:mustache/mustache.dart';
//import 'package:mustache/mustache.dart';
import 'package:di/di.dart' as di;
import 'package:mdl/mustache.dart';
import 'package:mdl/mdlcore.dart';
import 'package:mdl/mdlcomponets.dart';
import 'package:mdl/mdlapplication.dart';
Oops, something went wrong.

0 comments on commit 5bd4c35

Please sign in to comment.