arrow-admin
Version:
Arrow Admin Website
232 lines (207 loc) • 8.34 kB
JavaScript
define(['jquery', 'lodash', 'markdown'], function ($, _) {
var fields = {
/**
* Email field type
* @param {Object} _form JQuery object reference to form
* @param {String} _field The field object
* @param {String} _prop The key of this field
* @param {String} _value The value for this field
*/
email: function(_form, _field, _prop, _value) {
var id = _prop + '_' + Math.floor(Math.random() * 1000); // Should always be unique...but just in case
var field = $('<input id="' + id + '" type="email" class="form-control" name="' + _prop + '" value="' + _value + '" placeholder="Enter email">');
$(document).on('input', '#' + id, function() {
var val = field.val();
if(val && !val.match(/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/)) {
_form.find(':submit').prop('disabled', true);
field.addClass('fieldWarning');
} else {
_form.find(':submit').prop('disabled', false);
field.removeClass('fieldWarning');
}
});
return field;
},
/**
* Listfield type
* @param {Object} _form JQuery object reference to form
* @param {String} _field The field object
* @param {String} _prop The key of this field
* @param {String} _value The value for this field
*/
list: function(_form, _field, _prop, _value) {
var id = _prop + '_' + Math.floor(Math.random() * 1000); // Should always be unique...but just in case
var field = $('<select id="' + id + '" name="' + _prop + '" class="form-control"></select>');
field.append('<option></option>');
_field.options.forEach(function(_val) {
var isSelected = (_value === _val) ? 'selected' : null;
field.append('<option ' + isSelected + '>' + _val + '</option>');
});
return field;
},
/**
* Date type
* @param {Object} _form JQuery object reference to form
* @param {String} _field The field object
* @param {String} _prop The key of this field
* @param {String} _value The value for this field
*
* TODO this is not working yet for some reason
*/
date: function(_form, _field, _prop, _value) {
var id = _prop + '_' + Math.floor(Math.random() * 1000); // Should always be unique...but just in case
var field = $(
'<div class="datepicker dropdown" id="myDatepicker">' +
'<div class="input-append">' +
'<div class="dropdown-menu"></div>' +
'<input id="' + id + '" name="' + _prop + '" type="text" class="span2" value="' + _value + '" data-toggle="dropdown">' +
'<button type="button" class="btn " data-toggle="dropdown"><i class="icon-calendar"></i></button>' +
'</div>' +
'</div>' +
'');
$(document).one('cms-form-ready', function() {
field.datepicker({
date: _value
});
});
return field;
},
/**
* Textarea type
* @param {Object} _form JQuery object reference to form
* @param {String} _field The field object
* @param {String} _prop The key of this field
* @param {String} _value The value for this field
*/
textarea: function(_form, _field, _prop, _value) {
var id = _prop + '_' + Math.floor(Math.random() * 1000); // Should always be unique...but just in case
var field = $('<textarea class="form-control" id="' + id + '" name="' + _prop + '" rows="10">' + _value + '</textarea>');
$(document).one('cms-form-ready', function() {
if(_field.style === 'markdown') {
field.pagedownBootstrap();
}
});
return field;
},
/**
* Number primitive type
* @param {Object} _form JQuery object reference to form
* @param {String} _field The field object
* @param {String} _prop The key of this field
* @param {String} _value The value for this field
*/
number: function(_form, _field, _prop, _value) {
var id = _prop + '_' + Math.floor(Math.random() * 1000); // Should always be unique...but just in case
var field = $('<input id="' + id + '" type="number" class="form-control" name="' + _prop + '" value="' + _value + '" />');
return field;
},
/**
* Url type
* @param {Object} _form JQuery object reference to form
* @param {String} _field The field object
* @param {String} _prop The key of this field
* @param {String} _value The value for this field
*/
url: function(_form, _field, _prop, _value) {
var id = _prop + '_' + Math.floor(Math.random() * 1000); // Should always be unique...but just in case
var field = $('<input id="' + id + '" type="url" class="form-control" name="' + _prop + '" value="' + _value + '" />');
return field;
},
/**
* Telephone type
* @param {Object} _form JQuery object reference to form
* @param {String} _field The field object
* @param {String} _prop The key of this field
* @param {String} _value The value for this field
*/
tel: function(_form, _field, _prop, _value) {
var id = _prop + '_' + Math.floor(Math.random() * 1000); // Should always be unique...but just in case
var field = $('<input id="' + id + '" type="tel" class="form-control" name="' + _prop + '" value="' + _value + '" />');
return field;
},
/**
* Range type
* @param {Object} _form JQuery object reference to form
* @param {String} _field The field object
* @param {String} _prop The key of this field
* @param {String} _value The value for this field
*/
range: function(_form, _field, _prop, _value) {
var id = _prop + '_' + Math.floor(Math.random() * 1000); // Should always be unique...but just in case
var max = _field.max || 10;
var min = _field.min || 0;
var field = $('<input id="' + id + '" type="range" max="' + max + '" min="' + min + '" class="form-control" name="' + _prop + '" value="' + _value + '" />');
return field;
},
/**
* Mask type
* @param {Object} _form JQuery object reference to form
* @param {String} _field The field object
* @param {String} _prop The key of this field
* @param {String} _value The value for this field
*/
mask: function(_form, _field, _prop, _value) {
var id = _prop + '_' + Math.floor(Math.random() * 1000); // Should always be unique...but just in case
var field = $('<input id="' + id + '" type="text" class="form-control" name="' + _prop + '" value="' + _value + '" />');
$(document).one('cms-form-ready', function() {
field.inputmask(_field.mask);
});
return field;
},
/**
* Pillbox type for arrays
* @param {Object} _form JQuery object reference to form
* @param {String} _field The field object
* @param {String} _prop The key of this field
* @param {String} _value The value for this field
*/
pillbox: function(_form, _field, _prop, _value) {
var id = _prop + '_' + Math.floor(Math.random() * 1000); // Should always be unique...but just in case
var items = '';
var field = $('' +
'<div class="fuelux">' +
'<div class="cms-pillbox pillbox" data-key="' + _prop + '" id="' + id + '">' +
items +
'<ul class="clearfix pill-group">' +
'<li class="pillbox-input-wrap btn-group">' +
'<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">' +
'</li>' +
'</ul>' +
'</div>' +
'</div>');
$(document).one('cms-form-ready', function() {
var data = [];
if(_value) {
_value.forEach(function(_item) {
data.push({
text: _item, value: _item
});
});
}
field.pillbox('addItems', 0, data);
});
return field;
}
};
/**
* Routes to the appropriate field type
* @param {Object} _form JQuery object reference to form
* @param {String} _field The field object
* @param {String} _prop The key of this field
* @param {String} _value The value for this field
* @param {Boolean} _disabled Indicate if form field should be disabled
*/
return function(_form, _field, _prop, _value, _disabled) {
var field;
if(_disabled) {
// TODO Figure out how to handle nested objects and arrays. For now we disable them.
field = $('<input class="form-control" type="text" value="' + _value + '" readonly>');
} else if(_field && _field.type && fields[_field.type]) {
field = fields[_field.type](_form, _field, _prop, _value);
} else {
// Default field if none exists
field = $('<input type="text" class="form-control" name="' + _prop + '" value="' + _value + '" />');
}
return field;
};
});