Skip to content
This repository has been archived by the owner on Jul 11, 2019. It is now read-only.

Commit

Permalink
feature: Formatter-Support for all Core-Components
Browse files Browse the repository at this point in the history
  • Loading branch information
@MikeMitterer
MikeMitterer committed Feb 24, 2016
1 parent a39ecca commit 8391b68
Show file tree
Hide file tree
Showing 37 changed files with 1,550 additions and 613 deletions.
7 changes: 5 additions & 2 deletions lib/mdlformatter.dart
View file
Expand Up @@ -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';
Expand All @@ -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
Expand All @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion lib/src/application/modules/DomRenderer.dart
View file
Expand Up @@ -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.
Expand Down
79 changes: 51 additions & 28 deletions lib/src/components/MaterialBadge.dart
View file
Expand Up @@ -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');

Expand All @@ -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"] : "";
Expand All @@ -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();
}
102 changes: 75 additions & 27 deletions lib/src/components/MaterialButton.dart
View file
Expand Up @@ -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');

Expand All @@ -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() {
Expand All @@ -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(); }

0 comments on commit 8391b68

Please sign in to comment.