Started with MaterialFormatter

lib/mdlcomponents.dart

@@ -29,6 +29,7 @@ import 'package:di/di.dart' as di;
 import 'package:validate/validate.dart';
 
 import "package:mdl/mdlcore.dart";
+import "package:mdl/mdlformatter.dart";
 
 part "src/components/MaterialAccordion.dart";
 part "src/components/MaterialBadge.dart";

lib/mdlformatter.dart

@@ -19,22 +19,27 @@
 
 library mdlformatter;
 
-import "package:validate/validate.dart";
-import "package:intl/intl.dart";
+import 'dart:html' as dom;
+
+import 'dart:collection';
 import 'package:di/di.dart' as di;
+import 'package:intl/intl.dart';
+import 'package:logging/logging.dart';
+import 'package:validate/validate.dart';
 
 import 'package:mdl/mdlcore.dart';
 import 'package:mdl/mdlcomponents.dart';
-import "package:mdl/mdlapplication.dart";
+import 'package:mdl/mdlapplication.dart';
 
-part "src/formatter/FormatterPipeline.dart";
+part 'src/formatter/components/MaterialFormatter.dart';
 
-part "src/formatter/NumberFormatter.dart";
-part "src/formatter/UpperCaseFormatter.dart";
-part "src/formatter/LowerCaseFormatter.dart";
-part "src/formatter/ChooseFormatter.dart";
+part 'src/formatter/FormatterPipeline.dart';
 
-part "src/formatter/DecoratorFormatter.dart";
+part 'src/formatter/ChooseFormatter.dart';
+part 'src/formatter/DecoratorFormatter.dart';
+part 'src/formatter/LowerCaseFormatter.dart';
+part 'src/formatter/NumberFormatter.dart';
+part 'src/formatter/UpperCaseFormatter.dart';
 
 /**
  * Formatter ist a collection of formatters.
@@ -94,4 +99,6 @@ void registerMdlFormatterComponents() {
     }
 
     _addModule();
+
+    registerMaterialFormatter();
 }

lib/src/components/MaterialLabelfield.dart

@@ -81,6 +81,7 @@ class MaterialLabelfield extends MdlComponent {
 
     String get value {
         final dom.HtmlElement _text = element.querySelector(".${_cssClasses.TEXT}");
+
         return _text != null ? _text.text.trim() : "";
     }
 
@@ -91,7 +92,8 @@ class MaterialLabelfield extends MdlComponent {
         if(_text != null) {
             // final HtmlEscape escaper = new HtmlEscape();
             // _text.text = (escaper.convert(v.trim()));
-            _text.text = v.trim();
+
+            _text.text = MaterialFormatter.widget(element).format(v);
         }
     }
 

lib/src/components/MaterialTextfield.dart

@@ -116,7 +116,7 @@ class MaterialTextfield extends MdlComponent {
                 (_relaxedInput).setSelectionRange(position,position);
             }
 
-            _relaxedInput.value = value;
+            _relaxedInput.value = MaterialFormatter.widget(element).format(value);
             _placeTheCursorWhereItWasBefore(selStart);
         }
 

lib/src/core/utils.dart

@@ -32,11 +32,14 @@ class WrongComponentTypeException implements Exception {
  *
  * If [type] is null and if there are more than one types available it throws and error!
  *
+ * [showWarning] indicates a list of available components for this element
+ * if it cannot find the requested component.
+ *
  * Sample:
  *      static MaterialAccordion widget(final dom.HtmlElement element) =>
  *          mdlComponent(MaterialAccordion,element) as MaterialAccordion;
  */
-MdlComponent mdlComponent(final dom.HtmlElement element,final Type type) {
+MdlComponent mdlComponent(final dom.HtmlElement element,final Type type, { final bool showWarning: true }) {
     //final Logger _logger = new Logger('mdlcore.mdlComponent');
 
     if(element == null) {
@@ -90,8 +93,10 @@ MdlComponent mdlComponent(final dom.HtmlElement element,final Type type) {
         return (jsElement[typeAsString] as MdlComponent);
     }
 
-    // Show the available names
-    _listNames(jsElement);
+    if(showWarning) {
+        // Show the available names
+        _listNames(jsElement);
+    }
 
     throw "$element is not a ${typeAsString}-Component!!!\n(ID: ${element.id}, class: ${element.classes})\n"
         "These components are available: ${jsElement[MDL_COMPONENT_PROPERTY] as String}";

lib/src/formatter/ChooseFormatter.dart

@@ -23,7 +23,7 @@ part of mdlformatter;
 /// ChooseFormatter must be registered in mdlformatter.Formatter
 /// Sample:
 ///     <span mdl-observe="isNameNull | choose(value, '(Name-Object is null!)','')"></span>
-@MdlComponentModel
+//@MdlComponentModel
 class ChooseFormatter {
     // final Logger _logger = new Logger('mdlformatter.ChooseFormatter');
 

lib/src/formatter/DecoratorFormatter.dart

@@ -20,7 +20,7 @@
 part of mdlformatter;
 
 /// Just for Testing
-@MdlComponentModel
+//@MdlComponentModel
 class DecoratorFormatter {
     // final Logger _logger = new Logger('mdlformatter.DecoratorFormatter');
 

lib/src/formatter/LowerCaseFormatter.dart

@@ -23,7 +23,7 @@ part of mdlformatter;
 ///
 ///     <span mdl-observe="name | lowercase(value)"></span>
 ///
-@MdlComponentModel
+//@MdlComponentModel
 class LowerCaseFormatter {
     String lowercase(final String value) {
         return value.toLowerCase();

lib/src/formatter/NumberFormatter.dart

@@ -24,7 +24,7 @@ part of mdlformatter;
  *
  *      <span mdl-observe="pi | number(value,2)"></span>
  */
-@MdlComponentModel
+//@MdlComponentModel
 class NumberFormatter {
     // final Logger _logger = new Logger('mdlformatter.NumberFormatter');
 

lib/src/formatter/UpperCaseFormatter.dart

@@ -23,7 +23,7 @@ part of mdlformatter;
 ///
 ///     <span mdl-observe="name | uppercase(value)"></span>
 ///
-@MdlComponentModel
+//@MdlComponentModel
 class UpperCaseFormatter {
     String uppercase(final String value) {
         return value.toUpperCase();

lib/src/formatter/components/MaterialFormatter.dart

@@ -0,0 +1,156 @@
+/*
+ * Copyright (c) 2016, Michael Mitterer (office@mikemitterer.at),
+ * IT-Consulting and Development Limited.
+ * 
+ * All Rights Reserved.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+part of mdlformatter;
+
+/// Basic DI configuration for [MaterialFormatter]
+///
+/// Usage:
+///     class MainModule extends di.Module {
+///         MainModule() {
+///             install(new MaterialFormatterModule());
+///         }     
+///     }
+class MaterialFormatterModule  extends di.Module {
+    MaterialFormatterModule() {
+        // bind(DeviceProxy);
+
+        // -- services
+        // bind(SignalService, toImplementation: SignalServiceImpl);
+    }
+}
+
+MaterialDummyFormatter _dummyFormatter = null;
+
+/// Controller for <element mdl-formatter="formattername()"></element>
+///
+@MdlComponentModel
+class MaterialFormatter extends MdlComponent {
+    final Logger _logger = new Logger('mdlformatter.MaterialFormatter');
+
+    //static const _MaterialFormatterConstant _constant = const _MaterialFormatterConstant();
+    static const _MaterialFormatterCssClasses _cssClasses = const _MaterialFormatterCssClasses();
+
+    /// Like Unix Pipe for formatters
+    FormatterPipeline _lazyPipe;
+
+    MaterialFormatter.fromElement(final dom.HtmlElement element,final di.Injector injector)
+        : super(element,injector) {
+
+        _init();
+    }
+
+    static MaterialFormatter widget(final dom.HtmlElement element) {
+        MaterialFormatter formatter;
+        try {
+            formatter = mdlComponent(element,MaterialFormatter,showWarning: false) as MaterialFormatter;
+        } on String {
+
+            formatter = (_dummyFormatter ??= new MaterialDummyFormatter(element,componentFactory().injector));
+        }
+        return formatter;
+    }
+
+    String format(final value) => _pipeline.format(value);
+
+    //- private -----------------------------------------------------------------------------------
+
+    void _init() {
+        _logger.info("MaterialFormatter - init");
+
+        // Recommended - add SELECTOR as class if this component is a TAG or an ATTRIBUTE!
+        element.classes.add(_MaterialFormatterConstant.WIDGET_SELECTOR);
+
+        element.classes.add(_cssClasses.IS_UPGRADED);
+    }
+
+    UnmodifiableListView<String> get _parts {
+        return new UnmodifiableListView<String>(
+            element.attributes[_MaterialFormatterConstant.WIDGET_SELECTOR].trim().split("|"));
+    }
+
+    FormatterPipeline get _pipeline {
+        if(_lazyPipe == null) {
+            final UnmodifiableListView<String> parts = _parts;
+            _lazyPipe = new FormatterPipeline.fromList(injector.get(Formatter),parts.getRange(0,parts.length));
+        }
+        return _lazyPipe;
+    }
+}
+
+class MaterialDummyFormatter extends MaterialFormatter {
+
+    static const _MaterialFormatterCssClasses _cssClasses = const _MaterialFormatterCssClasses();
+
+    MaterialDummyFormatter(final dom.HtmlElement element,final di.Injector injector)
+        : super.fromElement(element,injector);
+
+    @override
+    String format(final value) => value.toString();
+
+    @override
+    void _init() {
+        _logger.info("MaterialDummyFormatter - init");
+
+        // Recommended - add SELECTOR as class if this component is a TAG or an ATTRIBUTE!
+        element.classes.add(_MaterialFormatterConstant.WIDGET_SELECTOR);
+
+        element.classes.add(_cssClasses.IS_UPGRADED);
+    }
+}
+
+/// Registers the MaterialFormatter-Component
+///
+///     main() {
+///         registerMaterialFormatter();
+///         ...
+///     }
+///
+void registerMaterialFormatter() {
+    final MdlConfig config = new MdlConfig<MaterialFormatter>(
+        _MaterialFormatterConstant.WIDGET_SELECTOR,
+            (final dom.HtmlElement element,final di.Injector injector) => new MaterialFormatter.fromElement(element,injector)
+    );
+
+    // If you want <mdl-formatter></mdl-formatter> set selectorType to SelectorType.TAG.
+    // If you want <div mdl-formatter></div> set selectorType to SelectorType.ATTRIBUTE.
+    // By default it's used as a class name. (<div class="mdl-formatter"></div>)
+    config.selectorType = SelectorType.ATTRIBUTE;
+
+    componentHandler().register(config);
+}
+
+//- private Classes ----------------------------------------------------------------------------------------------------
+
+/// 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 _MaterialFormatterCssClasses {
+
+    final String IS_UPGRADED = 'is-upgraded';
+
+    const _MaterialFormatterCssClasses(); }
+
+/// Store constants in one place so they can be updated easily.
+class _MaterialFormatterConstant {
+
+    static const String WIDGET_SELECTOR = "mdl-formatter";
+
+    const _MaterialFormatterConstant();
+}