Permalink
Browse files

feature: MdlFormComponent emits FormChangedEvents

  • Loading branch information...
MikeMitterer committed Feb 22, 2016
1 parent 42e56d7 commit 56590f903df76f819f1c69c5fe37f01da92265ad
@@ -289,8 +289,13 @@ $_form_default_button_width : $_form_default_label_width !default;
width : 100%;
}
.mdl-checkbox {
padding: 12px 0;
.mdl-checkbox, .mdl-switch, .mdl-radio {
margin-top: 12px;
margin-bottom: 12px;
//@include max-screen($mq-small) {
// margin-top: 12px;
// margin-bottom: 12px;
//}
}
.mdl-form__group--with-border {
@@ -309,7 +314,7 @@ $_form_default_button_width : $_form_default_label_width !default;
box-sizing : border-box;
&.mdl-form__group--with-border {
padding: inherit;
//padding: inherit;
border-bottom: 1px solid $form-border-color;
}
@@ -321,7 +326,7 @@ $_form_default_button_width : $_form_default_label_width !default;
}
&--slider {
padding: 12px 0 12px 16px;
padding: 12px 8px 12px 16px;
&:first-child {
margin-top: 20px;
@@ -10271,8 +10271,9 @@ mdl-draggable {
margin-right: 24px; }
.mdl-form .mdl-form__content .mdl-textfield, .mdl-form-registration .mdl-form__content .mdl-textfield, .mdl-form .mdl-form__content .mdl-slider, .mdl-form-registration .mdl-form__content .mdl-slider {
width: 100%; }
.mdl-form .mdl-form__content .mdl-checkbox, .mdl-form-registration .mdl-form__content .mdl-checkbox {
padding: 12px 0; }
.mdl-form .mdl-form__content .mdl-checkbox, .mdl-form-registration .mdl-form__content .mdl-checkbox, .mdl-form .mdl-form__content .mdl-switch, .mdl-form-registration .mdl-form__content .mdl-switch, .mdl-form .mdl-form__content .mdl-radio, .mdl-form-registration .mdl-form__content .mdl-radio {
margin-top: 12px;
margin-bottom: 12px; }
.mdl-form .mdl-form__content .mdl-form__group--with-border, .mdl-form-registration .mdl-form__content .mdl-form__group--with-border {
padding: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
@@ -10302,14 +10303,13 @@ mdl-draggable {
align-items: center;
box-sizing: border-box; }
.mdl-form .mdl-form__content .mdl-form__group.mdl-form__group--with-border, .mdl-form-registration .mdl-form__content .mdl-form__group.mdl-form__group--with-border {
padding: inherit;
border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.mdl-form .mdl-form__content .mdl-form__group > *, .mdl-form-registration .mdl-form__content .mdl-form__group > * {
width: inherit;
min-width: 96px;
margin-right: 8px; }
.mdl-form .mdl-form__content .mdl-form__group--slider, .mdl-form-registration .mdl-form__content .mdl-form__group--slider {
padding: 12px 0 12px 16px; }
padding: 12px 8px 12px 16px; }
.mdl-form .mdl-form__content .mdl-form__group--slider:first-child, .mdl-form-registration .mdl-form__content .mdl-form__group--slider:first-child {
margin-top: 20px; }
.mdl-form .mdl-form__content .mdl-form__group--slider > *, .mdl-form-registration .mdl-form__content .mdl-form__group--slider > * {

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -127,6 +127,8 @@
}
// --- basic modes -------------------------------------------------------------
// See https://www.google.com/design/spec/layout/responsive-ui.html for
// more details
// < 599
@mixin xsmall($orientation: false) {
View
@@ -19,6 +19,7 @@
library mdlform;
import 'dart:async';
import 'dart:html' as dom;
import 'package:logging/logging.dart';
@@ -103,7 +103,7 @@ abstract class MdlComponent extends Object with MdlEventListener {
/// Searches for child of [element] based on the given [selector]
///
/// Shortcut to [querySelector]
/// Shortcut to [element.querySelector]
dom.Element query(final String selector) => element.querySelector(selector);
//- private -----------------------------------------------------------------------------------
@@ -18,28 +18,6 @@
*/
part of mdlform;
/// 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 _MaterialFormComponentCssClasses {
final String IS_UPGRADED = 'is-upgraded';
final String INVALID = 'is-invalid';
final String DIRTY = 'is-dirty';
final String SUBMIT_BUTTON = 'mdl-button--submit';
const _MaterialFormComponentCssClasses(); }
/// Store constants in one place so they can be updated easily.
class _MaterialFormComponentConstant {
static const String WIDGET_SELECTOR = "mdl-form";
const _MaterialFormComponentConstant();
}
/// Basic DI configuration for this Component or Service
/// Usage:
/// class MainModule extends di.Module {
@@ -57,6 +35,12 @@ enum _MaterialFormState {
VALID, INVALID
}
class FormChangedEvent {
final MdlComponent currentTarget;
FormChangedEvent(this.currentTarget);
}
/**
* Upgrades mdl-form und does some validation checks.
*
@@ -66,7 +50,6 @@ enum _MaterialFormState {
* If MaterialFormComponent finds mdl-button--submit it enables/disables this
* element depending on the validation check.
*
* Usage:
* <form method="post" class="right mdl-form mdl-form-registration demo-registration">
* <h5 class="mdl-form__title">Register for launch</h5>
* <div class="mdl-form__content">
@@ -105,6 +88,8 @@ class MaterialFormComponent extends MdlComponent {
/// [onChange]
bool isDirty = false;
StreamController<FormChangedEvent> _onChange;
MaterialFormComponent.fromElement(final dom.HtmlElement element,final di.Injector injector)
: super(element,injector) {
@@ -128,6 +113,13 @@ class MaterialFormComponent extends MdlComponent {
/// Returns true if all requirements are fulfilled
bool get isValid => _isFormValid();
Stream<FormChangedEvent> get onChange {
if(_onChange == null) {
_onChange = new StreamController<FormChangedEvent>.broadcast(onCancel: () => _onChange = null);
}
return _onChange.stream;
}
// - EventHandler -----------------------------------------------------------------------------
@@ -157,6 +149,8 @@ class MaterialFormComponent extends MdlComponent {
isDirty = true;
element.classes.add(_cssClasses.DIRTY);
_fire(new FormChangedEvent(component));
}));
});
@@ -200,8 +194,11 @@ class MaterialFormComponent extends MdlComponent {
});
}
void _fire(final FormChangedEvent event) {
if(_onChange != null && _onChange.hasListener) {
_onChange.add(event);
}
}
}
/// registration-Helper
@@ -222,3 +219,24 @@ void registerMaterialFormComponent() {
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 _MaterialFormComponentCssClasses {
final String IS_UPGRADED = 'is-upgraded';
final String INVALID = 'is-invalid';
final String DIRTY = 'is-dirty';
final String SUBMIT_BUTTON = 'mdl-button--submit';
const _MaterialFormComponentCssClasses(); }
/// Store constants in one place so they can be updated easily.
class _MaterialFormComponentConstant {
static const String WIDGET_SELECTOR = "mdl-form";
const _MaterialFormComponentConstant();
}

0 comments on commit 56590f9

Please sign in to comment.