(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);