Permalink
Browse files

feature: Formatter-Support for all Core-Components

  • Loading branch information...
MikeMitterer committed Feb 24, 2016
1 parent a39ecca commit 8391b6889ae0bd3e2ab3f6b555e199328aa6cd2b
Showing with 1,550 additions and 613 deletions.
  1. +5 −2 lib/mdlformatter.dart
  2. +1 −1 lib/src/application/modules/DomRenderer.dart
  3. +51 −28 lib/src/components/MaterialBadge.dart
  4. +75 −27 lib/src/components/MaterialButton.dart
  5. +105 −63 lib/src/components/MaterialCheckbox.dart
  6. +13 −8 lib/src/components/MaterialDivDataTable.dart
  7. +44 −45 lib/src/components/MaterialIconToggle.dart
  8. +16 −38 lib/src/components/MaterialLabelfield.dart
  9. +101 −75 lib/src/components/MaterialLayout.dart
  10. +73 −54 lib/src/components/MaterialMenu.dart
  11. +28 −26 lib/src/components/MaterialProgress.dart
  12. +128 −98 lib/src/components/MaterialRadio.dart
  13. +1 −1 lib/src/components/MaterialRipple.dart
  14. +103 −54 lib/src/components/MaterialSwitch.dart
  15. +90 −52 lib/src/components/MaterialTextfield.dart
  16. +6 −2 lib/src/core/MdlComponentHandler.dart
  17. +26 −4 lib/src/core/MdlConfig.dart
  18. +2 −2 lib/src/form/components/MaterialFormComponent.dart
  19. +1 −1 lib/src/formatter/ChooseFormatter.dart
  20. +1 −1 lib/src/formatter/DecoratorFormatter.dart
  21. +1 −1 lib/src/formatter/LowerCaseFormatter.dart
  22. +11 −3 lib/src/formatter/NumberFormatter.dart
  23. +7 −1 lib/src/formatter/UpperCaseFormatter.dart
  24. +20 −21 lib/src/formatter/components/MaterialFormatter.dart
  25. +49 −0 lib/src/formatter/utils/FallbackFormatter.dart
  26. +9 −3 lib/src/formatter/{ → utils}/FormatterPipeline.dart
  27. +1 −1 lib/src/template/modules/TemplateRenderer.dart
  28. +34 −0 test/unit/core/language_test.dart
  29. +4 −0 test/unit/form/form_test.dart
  30. +55 −0 test/unit/formatter/Badge_test.dart
  31. +55 −0 test/unit/formatter/Button_test.dart
  32. +73 −0 test/unit/formatter/Checkbox_test.dart
  33. +135 −0 test/unit/formatter/Labelfield_test.dart
  34. +80 −0 test/unit/formatter/Radio_test.dart
  35. +73 −0 test/unit/formatter/Switch_test.dart
  36. +72 −0 test/unit/formatter/Textfield_test.dart
  37. +1 −1 test/visual/core/componenthandler_test.dart
View
@@ -33,7 +33,8 @@ import 'package:mdl/mdlapplication.dart';
part 'src/formatter/components/MaterialFormatter.dart';
part 'src/formatter/FormatterPipeline.dart';
part 'src/formatter/utils/FallbackFormatter.dart';
part 'src/formatter/utils/FormatterPipeline.dart';
part 'src/formatter/ChooseFormatter.dart';
part 'src/formatter/DecoratorFormatter.dart';
@@ -45,7 +46,7 @@ part 'src/formatter/UpperCaseFormatter.dart';
* Formatter ist a collection of formatters.
* To add your own formatter follow the sample below
*
* Sample:
* @MdlComponentModel @di.Injectable()
* class MyFormatter extends Formatter {
*
* // Your super cool formatter
@@ -72,6 +73,8 @@ part 'src/formatter/UpperCaseFormatter.dart';
*
* HTML:
* <span mdl-observe="pi | test(value)"></span>
* or
* <div class="mdl-labelfield" mdl-formatter="uppercase(value)">...</div>
*/
@MdlComponentModel @di.Injectable()
class Formatter {
@@ -46,7 +46,7 @@ class DomRenderer {
final List<_DomRenderFunction> _renderFunctions = new List<_DomRenderFunction>();
DomRenderer() {
_logger.info("CTOR for DomRenderer");
//_logger.info("CTOR for DomRenderer");
}
/// Renders the {content} String into the given {parent} - {content} must have ONE! top level element.
@@ -19,30 +19,9 @@
part of mdlcomponents;
/// Store strings for class names defined by this component that are used in
/// Dart. This allows us to simply change it in one place should we
/// decide to modify at a later date.
class _MaterialBadgeCssClasses {
static const String MAIN_CLASS = "mdl-js-badge";
final String IS_UPGRADED = 'is-upgraded';
const _MaterialBadgeCssClasses();
}
/// Store constants in one place so they can be updated easily.
class _MaterialBadgeConstant {
const _MaterialBadgeConstant();
}
/// creates MdlConfig for MaterialBadge
MdlConfig materialBadgeConfig() => new MdlWidgetConfig<MaterialBadge>(
_MaterialBadgeCssClasses.MAIN_CLASS, (final dom.HtmlElement element,final di.Injector injector)
=> new MaterialBadge.fromElement(element,injector));
/// registration-Helper
void registerMaterialBadge() => componentHandler().register(materialBadgeConfig());
/// Controller-View for
/// <div class="mdl-badge" data-badge="1"></div>
///
class MaterialBadge extends MdlComponent {
final Logger _logger = new Logger('mdlcomponents.MaterialBadge');
@@ -56,15 +35,12 @@ class MaterialBadge extends MdlComponent {
static MaterialBadge widget(final dom.HtmlElement element) => mdlComponent(element,MaterialBadge) as MaterialBadge;
// Central Element - by default this is where mdl-js-badge was found (element)
// html.Element get hub => element;
void set value(final String value) {
if(value == null || value.isEmpty) {
element.dataset.remove("badge");
return;
}
element.dataset["badge"] = value;
element.dataset["badge"] = MaterialFormatter.widget(element).format(value);
}
String get value => element.dataset.containsKey("badge") ? element.dataset["badge"] : "";
@@ -73,7 +49,54 @@ class MaterialBadge extends MdlComponent {
void _init() {
_logger.fine("MaterialBadge - init");
/// Reformat according to [MaterialFormatter] definition
void _kickInFormatter() {
value = value;
}
_kickInFormatter();
element.classes.add(_cssClasses.IS_UPGRADED);
}
}
/// Registers the MaterialBadge-Component
///
/// main() {
/// registerMaterialBadge();
/// ...
/// }
///
void registerMaterialBadge() {
/// creates MdlConfig for MaterialBadge
final MdlConfig config = new MdlWidgetConfig<MaterialBadge>(
_MaterialBadgeCssClasses.MAIN_CLASS,
(final dom.HtmlElement element,final di.Injector injector)
=> new MaterialBadge.fromElement(element,injector));
// If you want <mdl-badge></mdl-badge> set selectorType to SelectorType.TAG.
// If you want <div mdl-badge=""></div> set selectorType to SelectorType.ATTRIBUTE.
// By default it's used as a class name. (<div class="mdl-badge"></div>)
config.selectorType = SelectorType.CLASS;
componentHandler().register(config);
}
/// Store strings for class names defined by this component that are used in
/// Dart. This allows us to simply change it in one place should we
/// decide to modify at a later date.
class _MaterialBadgeCssClasses {
static const String MAIN_CLASS = "mdl-badge";
final String IS_UPGRADED = 'is-upgraded';
const _MaterialBadgeCssClasses();
}
/// Store constants in one place so they can be updated easily.
class _MaterialBadgeConstant {
const _MaterialBadgeConstant();
}
@@ -19,31 +19,16 @@
part of mdlcomponents;
/// Store strings for class names defined by this component that are used in
/// JavaScript. This allows us to simply change it in one place should we
/// decide to modify at a later date.
class _MaterialButtonCssClasses {
static const String MAIN_CLASS = "mdl-js-button";
final String RIPPLE_EFFECT = 'mdl-js-ripple-effect';
final String RIPPLE_CONTAINER = 'mdl-button__ripple-container';
final String RIPPLE = 'mdl-ripple';
const _MaterialButtonCssClasses();
}
/// Store constants in one place so they can be updated easily.
class _MaterialButtonConstant { const _MaterialButtonConstant(); }
/// creates MdlConfig for MaterialButton
MdlConfig materialButtonConfig() => new MdlWidgetConfig<MaterialButton>(
_MaterialButtonCssClasses.MAIN_CLASS, (final dom.HtmlElement element,final di.Injector injector)
=> new MaterialButton.fromElement(element,injector));
/// registration-Helper
void registerMaterialButton() => componentHandler().register(materialButtonConfig());
/// Controller-View for
/// <button id="button" class="mdl-button">Flat</button>
/// <button class="mdl-button mdl-js-ripple-effect">Flat</button>
/// <button class="mdl-button mdl-js-button mdl-button--fab">
/// <i class="material-icons">add</i>
/// </button>
///
/// final MaterialButton button = MaterialButton.widget(dom.querySelector("#button");
/// button.disable();
///
class MaterialButton extends MdlComponent {
final Logger _logger = new Logger('mdlcomponents.MaterialButton');
@@ -70,6 +55,14 @@ class MaterialButton extends MdlComponent {
void set enabled(final bool _enabled) => _enabled ? enable() : disable();
bool get enabled => !(element as dom.ButtonElement).disabled;
void set value(final String value) {
if(value != null) {
_valueElement.text = MaterialFormatter.widget(element).format(value);
}
}
String get value => _valueElement.text;
//- private -----------------------------------------------------------------------------------
void _init() {
@@ -85,17 +78,72 @@ class MaterialButton extends MdlComponent {
eventStreams.add(rippleElement.onMouseUp.listen(_blurHandler));
element.append(rippleContainer);
_logger.finer("MaterialButton - init done...");
}
eventStreams.add(element.onMouseUp.listen(_blurHandler));
eventStreams.add(element.onMouseLeave.listen(_blurHandler));
/// Reformat according to [MaterialFormatter] definition
void _kickInFormatter() {
value = value;
}
_kickInFormatter();
element.classes.add(_cssClasses.IS_UPGRADED);
_logger.finer("MaterialButton - init done...");
}
void _blurHandler(final dom.MouseEvent event) {
_logger.finer("blur...");
element.blur();
}
/// If <button> has children like material-icons it returns the first child
/// and assumes this is the element to set the value for
dom.HtmlElement get _valueElement {
dom.HtmlElement valueElement = element;
// Ignore "Text" for example
if(valueElement.hasChildNodes() && valueElement.firstChild is dom.HtmlElement) {
valueElement = valueElement.firstChild;
}
return valueElement;
}
}
/// Registers the MaterialButton-Component
///
/// main() {
/// registerMaterialButton();
/// ...
/// }
///
void registerMaterialButton() {
/// creates MdlConfig for MaterialButton
final MdlConfig config = new MdlWidgetConfig<MaterialButton>(
_MaterialButtonCssClasses.MAIN_CLASS,
(final dom.HtmlElement element,final di.Injector injector)
=> new MaterialButton.fromElement(element,injector));
componentHandler().register(config);
}
/// Store strings for class names defined by this component that are used in
/// JavaScript. This allows us to simply change it in one place should we
/// decide to modify at a later date.
class _MaterialButtonCssClasses {
static const String MAIN_CLASS = "mdl-button";
final String RIPPLE_EFFECT = 'mdl-js-ripple-effect';
final String RIPPLE_CONTAINER = 'mdl-button__ripple-container';
final String RIPPLE = 'mdl-ripple';
final String IS_UPGRADED = 'is-upgraded';
const _MaterialButtonCssClasses();
}
/// Store constants in one place so they can be updated easily.
class _MaterialButtonConstant { const _MaterialButtonConstant(); }
Oops, something went wrong.

0 comments on commit 8391b68

Please sign in to comment.