alpaca
Version:
Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide
297 lines (239 loc) • 9.13 kB
JavaScript
(function($) {
var Alpaca = $.alpaca;
Alpaca.Fields.JSONField = Alpaca.Fields.TextAreaField.extend(
/**
* @lends Alpaca.Fields.JSONField.prototype
*/
{
/**
* @see Alpaca.Fields.TextAreaField#getFieldType
*/
getFieldType: function() {
return "json";
},
/**
* @see Alpaca.ContainerField#getValue
*/
setValue: function(value)
{
if (Alpaca.isObject(value) || typeof(value) === "object")
{
value = JSON.stringify(value, null, 3);
}
this.base(value);
},
/**
* @see Alpaca.Fields.ControlField#getControlValue
*/
getControlValue: function()
{
var val = this.base();
if (val && Alpaca.isString(val))
{
val = JSON.parse(val);
}
return val;
},
/**
* @see Alpaca.Fields.TextField#handleValidate
*/
handleValidate: function()
{
var baseStatus = this.base();
var valInfo = this.validation;
var status = this._validateJSON();
valInfo["stringNotAJSON"] = {
"message": status.status ? "" : this.getMessage("stringNotAJSON") +" "+ status.message,
"status": status.status
};
return baseStatus && valInfo["stringNotAJSON"]["status"] ;
},
/**
* Validates if it is a valid JSON object.
* @returns {Boolean} true if it is a valid JSON object
*/
_validateJSON: function()
{
var textValue = this.control.val();
// allow null
if (Alpaca.isValEmpty(textValue))
{
return {
"status" : true
};
}
// parse the string
try
{
var obj = JSON.parse(textValue);
// format the string as well
this.setValue(JSON.stringify(obj, null, 3));
return {
"status" : true
};
}
catch(e)
{
return {
"status" : false,
"message" : e.message
};
}
},
/**
* @see Alpaca.Fields.TextAreaField#postRender
*/
afterRenderControl: function(model, callback)
{
var self = this;
this.base(model, function() {
if (self.control)
{
// Some auto-formatting capabilities
self.control.bind('keypress', function(e) {
var code = e.keyCode || e.wich;
if (code === 34) {
self.control.insertAtCaret('"');
}
if (code === 123) {
self.control.insertAtCaret('}');
}
if (code === 91) {
self.control.insertAtCaret(']');
}
});
self.control.bind('keypress', 'Ctrl+l', function() {
self.getFieldEl().removeClass("alpaca-field-focused");
// set class from state
self.refreshValidationState();
});
self.control.attr('title','Type Ctrl+L to format and validate the JSON string.');
}
callback();
});
}
/* builder_helpers */
,
/**
* @see Alpaca.Fields.TextAreaField#getTitle
*/
getTitle: function() {
return "JSON Editor";
},
/**
* @see Alpaca.Fields.TextAreaField#getDescription
*/
getDescription: function() {
return "Editor for JSON objects with basic validation and formatting.";
}
/* end_builder_helpers */
});
// Additional Registrations
Alpaca.registerMessages({
"stringNotAJSON": "This value is not a valid JSON string."
});
Alpaca.registerFieldClass("json", Alpaca.Fields.JSONField);
$.fn.insertAtCaret = function (myValue) {
return this.each(function() {
//IE support
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
} else if (this.selectionStart || this.selectionStart == '0') { // jshint ignore:line
//MOZILLA / NETSCAPE support
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos, this.value.length);
this.focus();
this.selectionStart = startPos /*+ myValue.length*/;
this.selectionEnd = startPos /*+ myValue.length*/;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
});
};
/*
* jQuery Hotkeys Plugin
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Based upon the plugin by Tzury Bar Yochay:
* http://github.com/tzuryby/hotkeys
*
* Original idea by:
* Binny V A, http://www.openjs.com/scripts/events/keyboard_shortcuts/
*/
jQuery.hotkeys = {
version: "0.8",
specialKeys: {
8: "backspace", 9: "tab", 13: "return", 16: "shift", 17: "ctrl", 18: "alt", 19: "pause",
20: "capslock", 27: "esc", 32: "space", 33: "pageup", 34: "pagedown", 35: "end", 36: "home",
37: "left", 38: "up", 39: "right", 40: "down", 45: "insert", 46: "del",
96: "0", 97: "1", 98: "2", 99: "3", 100: "4", 101: "5", 102: "6", 103: "7",
104: "8", 105: "9", 106: "*", 107: "+", 109: "-", 110: ".", 111 : "/",
112: "f1", 113: "f2", 114: "f3", 115: "f4", 116: "f5", 117: "f6", 118: "f7", 119: "f8",
120: "f9", 121: "f10", 122: "f11", 123: "f12", 144: "numlock", 145: "scroll", 191: "/", 224: "meta"
},
shiftNums: {
"`": "~", "1": "!", "2": "@", "3": "#", "4": "$", "5": "%", "6": "^", "7": "&",
"8": "*", "9": "(", "0": ")", "-": "_", "=": "+", ";": ": ", "'": "\"", ",": "<",
".": ">", "/": "?", "\\": "|"
}
};
function keyHandler( handleObj ) {
// Only care when a possible input has been specified
if ( typeof handleObj.data !== "string" ) {
return;
}
var origHandler = handleObj.handler,
keys = handleObj.data.toLowerCase().split(" ");
handleObj.handler = function( event ) {
// Don't fire in text-accepting inputs that we didn't directly bind to
if ( this !== event.target && (/textarea|select/i.test( event.target.nodeName ) ||
event.target.type === "text") ) {
return;
}
// Keypress represents characters, not special keys
var special = event.type !== "keypress" && jQuery.hotkeys.specialKeys[ event.which ],
character = String.fromCharCode( event.which ).toLowerCase(),
key, modif = "", possible = {};
// check combinations (alt|ctrl|shift+anything)
if ( event.altKey && special !== "alt" ) {
modif += "alt+";
}
if ( event.ctrlKey && special !== "ctrl" ) {
modif += "ctrl+";
}
// TODO: Need to make sure this works consistently across platforms
if ( event.metaKey && !event.ctrlKey && special !== "meta" ) {
modif += "meta+";
}
if ( event.shiftKey && special !== "shift" ) {
modif += "shift+";
}
if ( special ) {
possible[ modif + special ] = true;
} else {
possible[ modif + character ] = true;
possible[ modif + jQuery.hotkeys.shiftNums[ character ] ] = true;
// "$" can be triggered as "Shift+4" or "Shift+$" or just "$"
if ( modif === "shift+" ) {
possible[ jQuery.hotkeys.shiftNums[ character ] ] = true;
}
}
for ( var i = 0, l = keys.length; i < l; i++ ) {
if ( possible[ keys[i] ] ) {
return origHandler.apply( this, arguments );
}
}
};
}
jQuery.each([ "keydown", "keyup", "keypress" ], function() {
jQuery.event.special[ this ] = { add: keyHandler };
});
})(jQuery);