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
define({
load: function(name, localRequire, load, config) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = localRequire.toUrl(name);
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
}
});
/* Common values */
.BoxWrapper {
overflow: hidden;
position: relative;
}
.BoxContent {
}
.BoxNorthWest {
top: 0px;
left: 0px;
position: absolute;
}
.BoxNorth {
left: 0px;
top: 0px;
width: 1000px;
position: absolute;
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
}
.BoxNorthEast {
top: 0px;
right: -0px;
position: absolute;
margin: 0px;
padding: 0px;
}
.BoxWest {
position: absolute;
top: 0px;
left: 0px;
height: 5000px;
background-repeat: repeat-y;
margin: 0px;
padding: 0px;
}
.BoxEast {
position: absolute;
top: 0px;
right: 0px;
height: 5000px;
background-repeat: repeat-y;
margin: 0px;
padding: 0px;
}
.BoxSouthWest {
position: absolute;
bottom: 0px;
left: 0px;
margin: 0px;
padding: 0px;
}
.BoxSouth {
position: absolute;
bottom: 0px;
right: 0px;
width: 1000px;
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
}
.BoxSouthEast {
position: absolute;
bottom: 0px;
right: 0px;
margin: 0px;
padding: 0px;
}
.validationerrorcontainer {
position:relative;
}
.validationerrorcontainer.has-errors select,
.validationerrorcontainer.has-errors input {
border-color: red;
}
.validationerrorcontainer.has-errors select:focus,
.validationerrorcontainer.has-errors input:focus {
border-color:#D6D6D6;
}
.validationerrorcontainer .validationfielderrors {
position:absolute;
bottom:100%;
min-width:130px;
max-width:100%;
}
.validationerrorcontainer .validationfielderrors .fielderrorpopup {
border:1px solid red;
padding:8px;
background:white;
}
.fielderrorpopup {
margin:3px 6px 24px 3px;
}
.fielderrorpopup.BoxWrapper {
overflow:visible;
background-color:white;
color:#777777;
}
.fielderrorpopup h1 {
font: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
}
.fielderrorpopup h2 {
font: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 12px;
font-weight: bold;
}
.fielderrorpopup .BoxNorthWest {
background-image: url("../Images/Components/box-error-popup-corners.png");
background-position: 0px 0px;
width: 3px;
height: 3px;
position:absolute;
left:-3px;
top:-3px;
}
.fielderrorpopup .BoxNorth {
background-image: url("../Images/Components/box-error-popup-ns.png");
background-position: 0px -24px;
width:100%;
height: 3px;
top:-3px;
position:absolute;
}
.fielderrorpopup .BoxNorthEast {
background-image: url("../Images/Components/box-error-popup-corners.png");
background-position: -46px 0px;
width: 3px;
height: 3px;
position:absolute;
right:-3px;
top:-3px;
}
.fielderrorpopup .BoxWest {
background-image: url("../Images/Components/box-error-popup-ew.png");
background-position: -6px 0px;
width: 3px;
height:100%;
position:absolute;
left:-3px;
}
.fielderrorpopup .BoxEast {
background-image: url("../Images/Components/box-error-popup-ew.png");
background-position: 0px 0px;
width: 6px;
height:100%;
position:absolute;
right:-6px;
}
.fielderrorpopup .BoxSouthWest {
background-image: url("../Images/Components/box-error-popup-corners.png");
background-position: 0px 24px;
width: 46px;
height: 24px;
position:absolute;
bottom:-24px;
left:-3px;
}
.fielderrorpopup .BoxSouth {
background-image: url("../Images/Components/box-error-popup-ns.png");
background-position: 0px 0px;
width:100%;
height: 24px;
position:absolute;
bottom:-24px;
}
.fielderrorpopup .BoxSouthEast {
background-image: url("../Images/Components/box-error-popup-corners.png");
background-position: -46px 24px;
width: 6px;
height: 24px;
position:absolute;
bottom:-24px;
right:-6px;
}
.fielderrorpopup .BoxContent {
/*margin: 5px;*/
}
.ModalContainer {
z-index: 10000;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.ModalContainer .ModalOverlay {
opacity: .6;
filter: alpha(opacity=60);
background-color: black;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: absolute;
}
.ModalContainer .ModalWindow {
position: absolute;
padding: 0;
margin: 0;
min-width: 40%;
}
.ModalContainer .ModalWindow .ModalHeader {
position: relative;
clear: both;
height: 0px;
}
.ModalContainer .ModalWindow .ModalHeader .ModalTitle {
color: white;
font-size: 12pt;
}
.ModalTitle h1 {
padding: 0;
margin: 0;
font: normal 28px Trebuchet MS,Arial,Helvetica,sans-serif;
}
.ModalContainer .ModalWindow .ModalHeader .ModalActions {
position: absolute;
bottom: -37px;
right: 14px;
}
.ModalContainer .ModalWindow .ModalHeader .ModalActions .ModalClose {
width: 26px;
height: 23px;
background: url(../Images/gallery/btn_close.png) no-repeat top right;
display: block;
color: black;
}
.ModalContainer .ModalWindow .ModalContent {
margin: 0;
padding: 0;
background-color: white;
overflow: scrollable;
}
@import url("modal.css");
@import url("boxes.css");
@import url("fielderrors.css");
define([
'jquery',
'underscore',
'backbone',
], function($, _, Backbone) {
var modelClass, collectionClass;
var bindings = {};
bindings['error-*'] = {
publishes: true,
bind: function(el) {
var self = this;
var holder = this.validationHolder = {
marker: el.parentNode.insertBefore(document.createComment(" rivets: " + this.type + " "), el),
focus: function() {
$(holder.container).find('> .validationfielderrors').show();
},
blur: function() {
holder.lastObj.seen(holder.lastId, true);
$(holder.container).find('> .validationfielderrors').hide();
holder.lastObj.validate();
},
validated: function(isValid, model, errors) {
var errorList = errors[holder.lastId];
var $container = $(holder.container);
var $fieldErrors = $container.find('> .validationfielderrors').empty();
if (errorList && holder.lastObj.seen(holder.lastId)) {
$container.addClass('has-errors');
localRequire(['text!./templates/fielderrorpopup.html!strip'], function(templateHtml) {
$fieldErrors.empty().append($($.parseHTML(templateHtml)).find('.template-content').append($.parseHTML(errorList)).end());
});
} else {
$container.removeClass('has-errors');
}
}
};
localRequire(['text!./templates/fielderrorpopup.html!strip']);
localRequire(['css!./css/styles.css']);
holder.container = $.parseHTML('<span class="validationerrorcontainer"><div class="validationfielderrors"></div></span>');
$(holder.container).find('> .validationfielderrors').hide();
$(holder.marker).after($(holder.container).append(el));
diveIntoObject(this.model, this.keypath, function(obj, id) {
holder.lastObj = obj;
holder.lastId = id;
obj.on('validated', holder.validated);
});
$(el).on('focus', holder.focus).on('blur', holder.blur);
rivetsBinderCall(this, this.args[0], 'bind', arguments);
},
unbind: function(el) {
var holder = this.validationHolder;
$(this.validationHolder.marker).after(el).remove();
$(el).off('focus', holder.focus).off('blur', holder.blur);
diveIntoObject(this.model, this.keypath, function(obj, id) {
obj.off('validated', holder.validated);
});
delete this.validationHolder;
rivetsBinderCall(this, this.args[0], 'unbind', arguments);
},
routine: function(el, value) {
rivetsBinderCall(this, this.args[0], 'routine', arguments);
}
}
modelClass = Backbone.Model.extend({
initialize: function(attrs, options) {
modelClass.__super__.initialize.apply(this, arguments);
this._seen = {};
},
seen: function(attrName, wasSeen) {
if (attrName == null) {
return _.keys(_.clone(this._seen));
}
if (wasSeen) {
this._seen[attrName] = true;
} else if (wasSeen == false) {
delete this._seen[attrName];
} else {
return this._seen[attrName];
}
return this;
},
});
collectionClass = Backbone.Collection.extend({
model: modelClass,
parse: function(models, options) {
var newModels = [];
var subOptions = _.extend({parse: true}, options);
for (var i = 0; i < models.length; i++) {
newModels[newModels.length] = new this.model(models[i], subOptions);
}
return newModels;
}
});
return {
Model: modelClass,
Collection: collectionClass,
bindings: bindings
};
});