Skip to content

brainfood / rivets-backbone-validation

Go to a project
Toggle navigation
Toggle navigation pinning
0c17126d by Ean Schuessler
Options

Pulled functionality from bf-base into standalone

1 parent be40ecc3
Inline Side-by-side
Showing 10 changed files with 359 additions and 0 deletions
1 define({
2 load: function(name, localRequire, load, config) {
3 var head = document.getElementsByTagName('head')[0];
4 var link = document.createElement('link');
5 link.href = localRequire.toUrl(name);
6 link.rel = 'stylesheet';
7 link.type = 'text/css';
8 head.appendChild(link);
9 }
10 });
1 /* Common values */
2 .BoxWrapper {
3 overflow: hidden;
4 position: relative;
5 }
6 .BoxContent {
7 }
8 .BoxNorthWest {
9 top: 0px;
10 left: 0px;
11 position: absolute;
12 }
13 .BoxNorth {
14 left: 0px;
15 top: 0px;
16 width: 1000px;
17 position: absolute;
18 background-repeat: repeat-x;
19 margin: 0px;
20 padding: 0px;
21 }
22 .BoxNorthEast {
23 top: 0px;
24 right: -0px;
25 position: absolute;
26 margin: 0px;
27 padding: 0px;
28 }
29 .BoxWest {
30 position: absolute;
31 top: 0px;
32 left: 0px;
33 height: 5000px;
34 background-repeat: repeat-y;
35 margin: 0px;
36 padding: 0px;
37 }
38 .BoxEast {
39 position: absolute;
40 top: 0px;
41 right: 0px;
42 height: 5000px;
43 background-repeat: repeat-y;
44 margin: 0px;
45 padding: 0px;
46 }
47 .BoxSouthWest {
48 position: absolute;
49 bottom: 0px;
50 left: 0px;
51 margin: 0px;
52 padding: 0px;
53 }
54 .BoxSouth {
55 position: absolute;
56 bottom: 0px;
57 right: 0px;
58 width: 1000px;
59 background-repeat: repeat-x;
60 margin: 0px;
61 padding: 0px;
62 }
63 .BoxSouthEast {
64 position: absolute;
65 bottom: 0px;
66 right: 0px;
67 margin: 0px;
68 padding: 0px;
69 }
1 .validationerrorcontainer {
2 position:relative;
3 }
4 .validationerrorcontainer.has-errors select,
5 .validationerrorcontainer.has-errors input {
6 border-color: red;
7 }
8
9 .validationerrorcontainer.has-errors select:focus,
10 .validationerrorcontainer.has-errors input:focus {
11 border-color:#D6D6D6;
12 }
13
14 .validationerrorcontainer .validationfielderrors {
15 position:absolute;
16 bottom:100%;
17 min-width:130px;
18 max-width:100%;
19 }
20 .validationerrorcontainer .validationfielderrors .fielderrorpopup {
21 border:1px solid red;
22 padding:8px;
23 background:white;
24 }
25 .fielderrorpopup {
26 margin:3px 6px 24px 3px;
27 }
28 .fielderrorpopup.BoxWrapper {
29 overflow:visible;
30 background-color:white;
31 color:#777777;
32 }
33 .fielderrorpopup h1 {
34 font: Arial, Helvetica, sans-serif;
35 font-size: 20px;
36 font-weight: bold;
37 }
38 .fielderrorpopup h2 {
39 font: Arial, Helvetica, sans-serif;
40 font-size: 10px;
41 line-height: 12px;
42 font-weight: bold;
43 }
44 .fielderrorpopup .BoxNorthWest {
45 background-image: url("../Images/Components/box-error-popup-corners.png");
46 background-position: 0px 0px;
47 width: 3px;
48 height: 3px;
49 position:absolute;
50 left:-3px;
51 top:-3px;
52 }
53 .fielderrorpopup .BoxNorth {
54 background-image: url("../Images/Components/box-error-popup-ns.png");
55 background-position: 0px -24px;
56 width:100%;
57 height: 3px;
58 top:-3px;
59 position:absolute;
60 }
61 .fielderrorpopup .BoxNorthEast {
62 background-image: url("../Images/Components/box-error-popup-corners.png");
63 background-position: -46px 0px;
64 width: 3px;
65 height: 3px;
66 position:absolute;
67 right:-3px;
68 top:-3px;
69 }
70 .fielderrorpopup .BoxWest {
71 background-image: url("../Images/Components/box-error-popup-ew.png");
72 background-position: -6px 0px;
73 width: 3px;
74 height:100%;
75 position:absolute;
76 left:-3px;
77 }
78 .fielderrorpopup .BoxEast {
79 background-image: url("../Images/Components/box-error-popup-ew.png");
80 background-position: 0px 0px;
81 width: 6px;
82 height:100%;
83 position:absolute;
84 right:-6px;
85 }
86 .fielderrorpopup .BoxSouthWest {
87 background-image: url("../Images/Components/box-error-popup-corners.png");
88 background-position: 0px 24px;
89 width: 46px;
90 height: 24px;
91 position:absolute;
92 bottom:-24px;
93 left:-3px;
94 }
95 .fielderrorpopup .BoxSouth {
96 background-image: url("../Images/Components/box-error-popup-ns.png");
97 background-position: 0px 0px;
98 width:100%;
99 height: 24px;
100 position:absolute;
101 bottom:-24px;
102 }
103 .fielderrorpopup .BoxSouthEast {
104 background-image: url("../Images/Components/box-error-popup-corners.png");
105 background-position: -46px 24px;
106 width: 6px;
107 height: 24px;
108 position:absolute;
109 bottom:-24px;
110 right:-6px;
111 }
112 .fielderrorpopup .BoxContent {
113 /*margin: 5px;*/
114 }
1 .ModalContainer {
2 z-index: 10000;
3 position: absolute;
4 top: 0px;
5 left: 0px;
6 width: 100%;
7 height: 100%;
8 }
9 .ModalContainer .ModalOverlay {
10 opacity: .6;
11 filter: alpha(opacity=60);
12 background-color: black;
13 width: 100%;
14 height: 100%;
15 top: 0px;
16 left: 0px;
17 position: absolute;
18
19 }
20 .ModalContainer .ModalWindow {
21 position: absolute;
22 padding: 0;
23 margin: 0;
24 min-width: 40%;
25 }
26 .ModalContainer .ModalWindow .ModalHeader {
27 position: relative;
28 clear: both;
29 height: 0px;
30 }
31 .ModalContainer .ModalWindow .ModalHeader .ModalTitle {
32 color: white;
33 font-size: 12pt;
34 }
35
36 .ModalTitle h1 {
37 padding: 0;
38 margin: 0;
39 font: normal 28px Trebuchet MS,Arial,Helvetica,sans-serif;
40 }
41 .ModalContainer .ModalWindow .ModalHeader .ModalActions {
42 position: absolute;
43 bottom: -37px;
44 right: 14px;
45 }
46 .ModalContainer .ModalWindow .ModalHeader .ModalActions .ModalClose {
47 width: 26px;
48 height: 23px;
49 background: url(../Images/gallery/btn_close.png) no-repeat top right;
50 display: block;
51 color: black;
52 }
53 .ModalContainer .ModalWindow .ModalContent {
54 margin: 0;
55 padding: 0;
56 background-color: white;
57 overflow: scrollable;
58 }
59
1 @import url("modal.css");
2 @import url("boxes.css");
3 @import url("fielderrors.css");
4
1 define([
2 'jquery',
3 'underscore',
4 'backbone',
5 ], function($, _, Backbone) {
6 var modelClass, collectionClass;
7
8 var bindings = {};
9
10 bindings['error-*'] = {
11 publishes: true,
12 bind: function(el) {
13 var self = this;
14 var holder = this.validationHolder = {
15 marker: el.parentNode.insertBefore(document.createComment(" rivets: " + this.type + " "), el),
16 focus: function() {
17 $(holder.container).find('> .validationfielderrors').show();
18 },
19 blur: function() {
20 holder.lastObj.seen(holder.lastId, true);
21 $(holder.container).find('> .validationfielderrors').hide();
22 holder.lastObj.validate();
23 },
24 validated: function(isValid, model, errors) {
25 var errorList = errors[holder.lastId];
26 var $container = $(holder.container);
27 var $fieldErrors = $container.find('> .validationfielderrors').empty();
28 if (errorList && holder.lastObj.seen(holder.lastId)) {
29 $container.addClass('has-errors');
30 localRequire(['text!./templates/fielderrorpopup.html!strip'], function(templateHtml) {
31 $fieldErrors.empty().append($($.parseHTML(templateHtml)).find('.template-content').append($.parseHTML(errorList)).end());
32 });
33 } else {
34 $container.removeClass('has-errors');
35 }
36 }
37 };
38 localRequire(['text!./templates/fielderrorpopup.html!strip']);
39 localRequire(['css!./css/styles.css']);
40 holder.container = $.parseHTML('<span class="validationerrorcontainer"><div class="validationfielderrors"></div></span>');
41 $(holder.container).find('> .validationfielderrors').hide();
42 $(holder.marker).after($(holder.container).append(el));
43 diveIntoObject(this.model, this.keypath, function(obj, id) {
44 holder.lastObj = obj;
45 holder.lastId = id;
46 obj.on('validated', holder.validated);
47 });
48 $(el).on('focus', holder.focus).on('blur', holder.blur);
49 rivetsBinderCall(this, this.args[0], 'bind', arguments);
50 },
51 unbind: function(el) {
52 var holder = this.validationHolder;
53 $(this.validationHolder.marker).after(el).remove();
54 $(el).off('focus', holder.focus).off('blur', holder.blur);
55 diveIntoObject(this.model, this.keypath, function(obj, id) {
56 obj.off('validated', holder.validated);
57 });
58 delete this.validationHolder;
59 rivetsBinderCall(this, this.args[0], 'unbind', arguments);
60 },
61 routine: function(el, value) {
62 rivetsBinderCall(this, this.args[0], 'routine', arguments);
63 }
64 }
65
66 modelClass = Backbone.Model.extend({
67 initialize: function(attrs, options) {
68 modelClass.__super__.initialize.apply(this, arguments);
69 this._seen = {};
70 },
71 seen: function(attrName, wasSeen) {
72 if (attrName == null) {
73 return _.keys(_.clone(this._seen));
74 }
75 if (wasSeen) {
76 this._seen[attrName] = true;
77 } else if (wasSeen == false) {
78 delete this._seen[attrName];
79 } else {
80 return this._seen[attrName];
81 }
82 return this;
83 },
84 });
85
86 collectionClass = Backbone.Collection.extend({
87 model: modelClass,
88 parse: function(models, options) {
89 var newModels = [];
90 var subOptions = _.extend({parse: true}, options);
91 for (var i = 0; i < models.length; i++) {
92 newModels[newModels.length] = new this.model(models[i], subOptions);
93 }
94 return newModels;
95 }
96 });
97
98 return {
99 Model: modelClass,
100 Collection: collectionClass,
101 bindings: bindings
102 };
103 });