Skip to content

Commit 6e0762f

Browse files
anthonykoerberanthonykoerber
committed
mm-form WIP
1 parent 4979338 commit 6e0762f

9 files changed

Lines changed: 299 additions & 4 deletions

File tree

‎src/mm-dropdown/mm-dropdown.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<link rel="import" href="../shared/behaviors/stackable.html">
1919
<link rel="import" href="../shared/behaviors/stylable.html"/>
2020
<link rel="import" href="../shared/behaviors/resolvable.html"/>
21+
<link rel="import" href="../shared/behaviors/formable.html"/>
2122
<link rel="import" href="../mm-item-recycler/mm-item-recycler.html">
2223
<link rel="import" href="../mm-icon/mm-icon.html"/>
2324
<link rel="import" href="../mm-list-item/mm-list-item.html"/>

‎src/mm-dropdown/mm-dropdown.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,8 @@
8989
StrandTraits.Jqueryable,
9090
StrandTraits.AutoTogglable,
9191
StrandTraits.PositionableDropdown,
92-
StrandTraits.Refable
92+
StrandTraits.Refable,
93+
StrandTraits.Formable
9394
],
9495

9596
_widthLocked: false,

‎src/mm-form/index.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script language="javascript" src="../../bower_components/webcomponentsjs/webcomponents.js"></script>
5+
<!-- <link rel="import" href="../../build/strand.html" /> -->
6+
<link rel="import" href="../mm-dropdown/mm-dropdown.html" />
7+
<link rel="import" href="../mm-input/mm-input.html" />
8+
<link rel="import" href="../mm-inline-box/mm-inline-box.html" />
9+
<link rel="import" href="../mm-header/mm-header.html" />
10+
<link rel="import" href="mm-form.html" />
11+
<style type="text/css">
12+
body, html {
13+
height: 100%;
14+
min-height: 100%;
15+
}
16+
17+
body {
18+
margin:0;
19+
padding:0;
20+
background: #eee;
21+
}
22+
23+
.col {
24+
box-sizing: border-box;
25+
padding: 10px 0 10px 10px;
26+
}
27+
28+
mm-form[unresolved] {
29+
display: none;
30+
}
31+
</style>
32+
</head>
33+
<body>
34+
35+
<mm-form unresolved>
36+
37+
<div class="col" span="1">
38+
<mm-header size="medium">Header</mm-header>
39+
<mm-input form-id="input"
40+
fitparent
41+
placeholder="Type Here Bro"
42+
error-target="#inputError"></mm-input>
43+
<mm-inline-box id="inputError" type="error" fitparent>
44+
You done messed up, now what?
45+
</mm-inline-box>
46+
</div>
47+
<div class="col" span="1">
48+
<mm-header size="medium">Header</mm-header>
49+
<mm-dropdown form-id="dropdown"
50+
fitparent
51+
placeholder="Select Here Bro"
52+
validate="empty"
53+
error-target="#dropdownError">
54+
<mm-list-item>List Item 1</mm-list-item>
55+
<mm-list-item>List Item 2</mm-list-item>
56+
<mm-list-item>List Item 3</mm-list-item>
57+
<mm-list-item>List Item 4</mm-list-item>
58+
</mm-dropdown>
59+
<mm-inline-box id="dropdownError" type="error" fitparent>
60+
You done messed up, now what?
61+
</mm-inline-box>
62+
</div>
63+
<!--
64+
<div class="col" span="1">
65+
<mm-header size="medium">Header</mm-header>
66+
<mm-input fitparent placeholder="Type Here Bro"></mm-input>
67+
</div>
68+
<div class="col" span="1">
69+
<mm-header size="medium">Header</mm-header>
70+
<mm-input fitparent placeholder="Type Here Bro"></mm-input>
71+
</div>
72+
-->
73+
</mm-form>
74+
75+
</body>
76+
</html>

‎src/mm-form/mm-form.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!--
2+
* @license
3+
* Copyright (c) 2015 MediaMath Inc. All rights reserved.
4+
* This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt
5+
6+
-->
7+
<link rel="import" href="../../bower_components/polymer/polymer.html"/>
8+
<link rel="import" href="../shared/fonts/fonts.html"/>
9+
<link rel="import" href="../shared/behaviors/lightdomgettable.html"/>
10+
<link rel="import" href="../shared/behaviors/resolvable.html"/>
11+
12+
<dom-module id="mm-form">
13+
<link rel="import" type="css" href="mm-form.css"/>
14+
<template>
15+
<content></content>
16+
</template>
17+
</dom-module>
18+
19+
<script src="mm-form.js"></script>

‎src/mm-form/mm-form.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2015 MediaMath Inc. All rights reserved.
4+
* This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt
5+
6+
*/
7+
(function (scope) {
8+
9+
scope.MMForm = Polymer({
10+
is: 'mm-form',
11+
12+
behaviors: [
13+
StrandTraits.LightDomGettable,
14+
StrandTraits.Resolvable
15+
],
16+
17+
properties: {
18+
columns: {
19+
type: Number,
20+
value: 4,
21+
reflectToAttribute: true
22+
},
23+
spacing: {
24+
type: Number,
25+
value: 10,
26+
reflectToAttribute: true
27+
},
28+
formData: {
29+
type: Object,
30+
value: function() { return {}; }
31+
}
32+
},
33+
34+
observers: [
35+
"_applyStyles(columns, spacing)"
36+
],
37+
38+
ready: function() {
39+
// build form data object
40+
41+
},
42+
43+
// styling concerns (columns)
44+
_applyStyles: function(columns, spacing) {
45+
var items = this.getLightDOM();
46+
47+
if (items.length > 0) {
48+
var spanItems = items.filter(function(item){
49+
return item.hasAttribute('span');
50+
}),
51+
columnWidth = 100/columns;
52+
53+
spanItems.forEach(function(item, index){
54+
var span = parseInt(item.getAttribute('span')),
55+
colWidth = columnWidth * span,
56+
calc = 'calc(' + colWidth + '% - ' + spacing + 'px)';
57+
58+
item.style.width = calc;
59+
item.style.marginRight = spacing + 'px';
60+
item.style.marginBottom = spacing + 'px';
61+
});
62+
}
63+
}
64+
65+
});
66+
67+
})(window.Strand = window.Strand || {});

‎src/mm-form/mm-form.scss‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2015 MediaMath Inc. All rights reserved.
4+
* This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt
5+
6+
*/
7+
@import "_bourbon";
8+
9+
@mixin flexGrid(
10+
// $count:4,
11+
12+
// $paddingTop:0px,
13+
// $paddingRight:0px,
14+
// $paddingBottom:0px,
15+
// $paddingLeft:0px,
16+
17+
// $marginTop:0px,
18+
// $marginRight:0px,
19+
// $marginBottom:0px,
20+
// $marginLeft:0px
21+
){
22+
:host ::content .col {
23+
box-sizing: border-box;
24+
// padding-top: $paddingTop;
25+
// padding-right: $paddingRight;
26+
// padding-bottom: $paddingBottom;
27+
// padding-left: $paddingLeft;
28+
}
29+
30+
// The loop that creates all of span[n] columns classes
31+
// @for $i from 1 through $count {
32+
// :host ::content [span='#{$i}'] {
33+
// $pct: percentage(1/$count * $i);
34+
// $marginTotal: $marginRight + $marginLeft;
35+
36+
// width: calc(#{$pct} - #{$marginTotal});
37+
// min-width: calc(#{$pct} - #{$marginTotal});
38+
39+
// margin-top: $marginTop;
40+
// margin-right: $marginRight;
41+
// margin-bottom: $marginBottom;
42+
// margin-left: $marginLeft;
43+
// }
44+
// }
45+
}
46+
47+
// Defining Your Grid
48+
49+
:host {
50+
display: flex;
51+
flex-wrap: wrap;
52+
position: relative;
53+
}
54+
55+
:host ::content mm-header,
56+
:host ::content mm-input,
57+
:host ::content mm-dropdown {
58+
margin-bottom: 10px;
59+
}
60+
61+
// @include flexGrid(4, 20px, 10px, 20px, 10px, 0px, 5px, 5px, 0px);
62+
@include flexGrid();

‎src/mm-input/mm-input.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<link rel="import" href="../shared/behaviors/stylable.html"/>
1414
<link rel="import" href="../shared/behaviors/validatable.html"/>
1515
<link rel="import" href="../shared/behaviors/refable.html"/>
16+
<link rel="import" href="../shared/behaviors/formable.html"/>
1617

1718
<dom-module id="mm-input">
1819
<link rel="import" type="css" href="mm-input.css"/>
@@ -35,4 +36,4 @@
3536
</template>
3637
</dom-module>
3738

38-
<script src="mm-input.js"></script>
39+
<script src="mm-input.js"></script>

‎src/mm-input/mm-input.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
StrandTraits.Resolvable,
1414
StrandTraits.Stylable,
1515
StrandTraits.Validatable,
16-
StrandTraits.Refable
16+
StrandTraits.Refable,
17+
StrandTraits.Formable
1718
],
1819

1920
properties: {
@@ -87,6 +88,7 @@
8788
},
8889
_layout: {
8990
type: String,
91+
value: false,
9092
reflectToAttribute: true
9193
},
9294
_clearVisible: {
@@ -171,4 +173,4 @@
171173

172174
});
173175

174-
})(window.Strand = window.Strand || {});
176+
})(window.Strand = window.Strand || {});

‎src/shared/behaviors/formable.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<link rel="import" href="validatable.html"/>
2+
<script>
3+
/**
4+
* @license
5+
* Copyright (c) 2015 MediaMath Inc. All rights reserved.
6+
* This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt
7+
8+
*/
9+
(function (scope) {
10+
11+
var Formable = {
12+
13+
behaviors: [
14+
StrandTraits.Validatable
15+
],
16+
17+
properties: {
18+
formId: {
19+
type: String,
20+
observer: "_formIdChanged",
21+
reflectToAttribute: true
22+
},
23+
// errorMessage: {
24+
// type: String,
25+
// value: "you done messed up, now what'cha gon do?",
26+
// obsrver: "_errorMessageChanged"
27+
// },
28+
errorTarget: {
29+
type: Object,
30+
observer: "_errorTargetChanged"
31+
},
32+
_errorTarget: {
33+
type: Object
34+
}
35+
},
36+
37+
_formIdChanged: function(newVal, oldVal) {
38+
if (newVal) {
39+
//
40+
}
41+
},
42+
43+
// similar to target on positionables
44+
_errorTargetChanged: function(target, oldTarget) {
45+
if(typeof target === 'string') {
46+
this.async(function() {
47+
this._errorTarget = this._scope === document ?
48+
document.querySelector(target) : Polymer.dom(this._scope).querySelector(target);
49+
});
50+
}
51+
},
52+
53+
// _errorMessageChanged: function(newVal, oldVal) {
54+
// this.errorTarget.message = newVal;
55+
// },
56+
57+
//
58+
};
59+
60+
scope.Formable = [
61+
scope.Validatable,
62+
Formable
63+
];
64+
65+
})(window.StrandTraits = window.StrandTraits || {});
66+
</script>

0 commit comments

Comments
 (0)