Skip to content
This repository has been archived by the owner on Feb 22, 2018. It is now read-only.

Commit

Permalink
refactor(form example): html & dart cleanup
Browse files Browse the repository at this point in the history 
Closes #1373
  • Loading branch information
@vicb @jbdeboer
vicb authored and jbdeboer committed Aug 25, 2014
1 parent 4c0fe21 commit 76ff760
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 50 deletions.
4 changes: 4 additions & 0 deletions example/web/css/forms.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,3 +227,7 @@ form { margin:0; }
display:list-item;
list-style:disc outside;
}

.error {
color:red;
}
65 changes: 28 additions & 37 deletions example/web/form.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,12 @@ import 'package:angular/application_factory.dart';
selector: '[form-controller]',
publishAs: 'form_ctrl')
class FormCtrl {
static const String _COLOR_HEX = "hex";
static const String _COLOR_HSL = "hsl";
static const String _COLOR_RGB = "rgb";
static const String _COLOR_NAME = "name";

static const String COLOR_HEX = "hex";
static const String COLOR_HSL = "hsl";
static const String COLOR_RGB = "rgb";
static const String COLOR_NAME = "name";

static const _COLOR_TYPES = const [COLOR_RGB, COLOR_HSL, COLOR_HEX, COLOR_NAME];
static const _COLOR_TYPES = const [_COLOR_RGB, _COLOR_HSL, _COLOR_HEX, _COLOR_NAME];

static const _RESOLUTIONS = const ['1024x600',
'1280x800',
Expand All @@ -24,56 +23,53 @@ class FormCtrl {
'2560x1440',
'2560x1600'];

Scope scope;
NgForm form;
final Scope scope;
final NgForm form;
final List colors = [];
final List formattedColors = [];

FormCtrl(Scope this.scope, NgForm this.form) {
newColor(COLOR_HEX, '#222');
newColor(COLOR_HEX, '#444');
newColor(COLOR_HEX, '#000');
FormCtrl(this.scope, this.form) {
newColor(_COLOR_HEX, '#222');
newColor(_COLOR_HEX, '#444');
newColor(_COLOR_HEX, '#000');
}

List<String> get color_types => _COLOR_TYPES;
List<String> get colorTypes => _COLOR_TYPES;

List<String> get resolutions => _RESOLUTIONS;

submit() {
this.form.reset();
void submit() {
form.reset();
}

getTotalSquares(value) {
int defaultValue = 4;
if(value != null) {
int getTotalSquares(inputValue) {
var value = 4;
if(inputValue != null) {
try {
value = double.parse(value.toString());
value = double.parse(inputValue.toString());
} catch(e) {
value = defaultValue;
}
} else {
value = defaultValue;
}
return (value * value).toInt();
}

formatColors() {
List<String> formatColors() {
formattedColors.clear();
colors.forEach((color) {
var value = null;
switch(color['type']) {
case COLOR_HEX:
case _COLOR_HEX:
value = color['hex'];
break;
case COLOR_HSL:
case _COLOR_HSL:
var hue = color['hue'];
var saturation = color['saturation'];
var luminance = color['luminance'];
if(hue != null && saturation != null && luminance != null) {
value = "hsl($hue, $saturation%, $luminance%)";
}
break;
case COLOR_RGB:
case _COLOR_RGB:
var red = color['red'];
var blue = color['blue'];
var green = color['green'];
Expand All @@ -92,36 +88,31 @@ class FormCtrl {
return formattedColors;
}

newColor([String type = COLOR_HEX, String color]) {
var data = {
void newColor([String type = _COLOR_HEX, String color]) {
colors.add({
'id' : colors.length,
'type' : type,
'hex' : '',
'hex' : type == _COLOR_HEX ? color : '',
'hue' : '',
'saturation' : '',
'luminance' : '',
'red' : '',
'green' : '',
'blue': '',
'name': ''
};
if(type == COLOR_HEX) {
data['hex'] = color;
}
colors.add(data);
});
}
}

@Controller(
selector: '[preview-controller]',
publishAs: 'preview')
class PreviewCtrl {

static const DEFAULT_COLOR = '#555';
static const _DEFAULT_COLOR = '#555';

List _collection = [];

expandList(items, limit) {
List expandList(items, limit) {
_collection.clear();
if(items != null && items.length > 0) {
for (var i = 0; i < limit; i++) {
Expand Down
26 changes: 13 additions & 13 deletions example/web/form.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<title>Form example</title>
<link rel="stylesheet" type="text/css" href="css/gumby.css" />
<link rel="stylesheet" type="text/css" href="css/forms.css" />
<style>
.error { color:red; }

</style>
</head>
<body class="container" ng-cloak>
Expand Down Expand Up @@ -65,7 +65,7 @@ <h3>Colors</h3>
<div class="field">
<div class="picker">
<select ng-model="color.type">
<option ng-repeat="type in form_ctrl.color_types" ng-value="type">{{ type }}</option>
<option ng-repeat="type in form_ctrl.colorTypes">{{ type }}</option>
</select>
</div>
</div>
Expand Down Expand Up @@ -121,41 +121,41 @@ <h3>There was an error</h3>

<h4>Account Details &amp; Wallpaper</h4>
<ol class="errors-list clear-list">
<li class="bullet" ng-if="myForm['resolution'].invalid && myForm['resolution'].hasErrorState('ng-required')">
<li class="bullet" ng-if="myForm['resolution'].hasErrorState('ng-required')">
You did not select a wallpaper <strong>resolution size</strong>.
</li>

<li class="bullet" ng-if="myForm['first_name'].invalid && myForm['first_name'].hasErrorState('ng-required')">
<li class="bullet" ng-if="myForm['first_name'].hasErrorState('ng-required')">
You did not enter your <strong>first name</strong>.
</li>

<li class="bullet" ng-if="myForm['last_name'].invalid && myForm['last_name'].hasErrorState('ng-required')">
<li class="bullet" ng-if="myForm['last_name'].hasErrorState('ng-required')">
You did not enter your <strong>last name</strong>.
</li>

<li class="bullet" ng-if="myForm['email'].invalid && myForm['email'].hasErrorState('ng-required')">
<li class="bullet" ng-if="myForm['email'].hasErrorState('ng-required')">
You left your <strong>email address</strong> blank.
</li>
<li class="bullet" ng-if="myForm['email'].invalid && myForm['email'].hasErrorState('ng-email')">
<li class="bullet" ng-if="myForm['email'].hasErrorState('ng-email')">
You did not enter your <strong>email address</strong>correctly
</li>

<li class="bullet" ng-if="myForm['age'].invalid && myForm['age'].hasErrorState('ng-required')">
<li class="bullet" ng-if="myForm['age'].hasErrorState('ng-required')">
You did not select your <strong>age</strong>
</li>
<li class="bullet" ng-if="myForm['age'].invalid && myForm['age'].hasErrorState('ng-number')">
<li class="bullet" ng-if="myForm['age'].hasErrorState('ng-number')">
You have selected an invalid <strong>age</strong>
</li>

<li class="bullet" ng-if="myForm['city'].invalid && myForm['city'].hasErrorState('ng-required')">
<li class="bullet" ng-if="myForm['city'].hasErrorState('ng-required')">
You did not enter what <strong>city</strong> you live in
</li>

<li class="bullet" ng-if="myForm['about'].invalid && myForm['about'].hasErrorState('ng-required')">
<li class="bullet" ng-if="myForm['about'].hasErrorState('ng-required')">
You did not enter any <strong>additional info</strong> about yourself
</li>

<li class="bullet" ng-if="myForm['about'].invalid && myForm['about'].hasErrorState('ng-minlength')">
<li class="bullet" ng-if="myForm['about'].hasErrorState('ng-minlength')">
You did not input <strong>enough text</strong> for your additional info
</li>
</ol>
Expand Down

0 comments on commit 76ff760

Please sign in to comment.