Skip to content

Instantly share code, notes, and snippets.

@michel-zimmer

michel-zimmer/action-protocol-client.html

Created November 30, 2014 02:57
Show Gist options
  • Save michel-zimmer/fbdda9eb955c0575d673 to your computer and use it in GitHub Desktop.
Save michel-zimmer/fbdda9eb955c0575d673 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
action-protocol-client.html
<!DOCTYPE html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery-linedtextarea.js"></script>
<script>
jQuery( function( $ ) {
function send() {
$( "#url" ).prop( "disabled", true );
$( "#send" ).prop( "disabled", true );
$( "#request" ).prop( "disabled", true );
$.ajax( {
url: $( "#url" ).val(),
data: $( "#request" ).val(),
type: "POST",
dataType : "text",
success: function( text ) {
var action;
$( "#response" ).parent().parent().css( "border-color", "red" );
try {
action = JSON.parse( text );
} catch ( err ) {
$( "#response" ).val( "JSON.parse: " + text );
return;
}
if( action.errors.length === 0 ) {
$( "#response" ).parent().parent().css( "border-color", "lime" );
}
$( "#response" ).val( JSON.stringify( action, null, "\t" ) );
},
error: function( xhr, status, errorThrown ) {
$( "#response" ).parent().parent().css( "border-color", "red" );
$( "#response" ).val( xhr.status + ": " + xhr.responseText );
console.dir( xhr );
},
complete: function( xhr, status ) {
$( "#url" ).prop( "disabled", false );
$( "#send" ).prop( "disabled", false );
$( "#request" ).prop( "disabled", false ).focus();
}
});
}
function resize() {
var request = "";
var response = "";
if( $( "#request" ) ) {
request = $( "#request" ).val();
response = $( "#response" ).val();
$( ".linedwrap" ).remove();
}
$( "body" ).append( "<textarea id=\"request\"></textarea><textarea disabled id=\"response\"></textarea>" );
$( "#request" ).val( request );
$( "#response" ).val( response );
$( "textarea" )
.css( "height", ( $( "body" ).height() - $( "#action" ).height() - 16 ) + "px" )
.css( "width", ( $( "body" ).width() / 2 - 16 ) + "px" )
.linedtextarea();
}
$( "#send" ).click( send );
$( document ).keydown( function( event ){
if( event.keyCode == 82 && ( event.ctrlKey )) {
event.preventDefault();
send();
}
});
$( window ).on( "resize", resize );
resize();
});
</script>
<link rel="stylesheet" href="jquery-linedtextarea.css">
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
.linedwrap {
display: inline-block;
}
</style>
<title>Area 51</title>
<div id="action">
<input id="url" value="http://localhost:1337/">
<button id="send">Send</button>
</div>
Raw
jquery-linedtextarea.css
/**
* jQuery Lined Textarea Plugin
* http://alan.blog-city.com/jquerylinedtextarea.htm
*
* Copyright (c) 2010 Alan Williamson
*
* Released under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
* Usage:
* Displays a line number count column to the left of the textarea
*
* Class up your textarea with a given class, or target it directly
* with JQuery Selectors
*
* $(".lined").linedtextarea({
* selectedLine: 10,
* selectedClass: 'lineselect'
* });
*
*/
.linedwrap {
border: 1px solid #c0c0c0;
padding: 3px;
}
.linedtextarea {
padding: 0px;
margin: 0px;
}
.linedtextarea textarea, .linedwrap .codelines .lineno {
font-size: 10pt;
font-family: monospace;
line-height: normal !important;
}
.linedtextarea textarea {
padding-right:0.3em;
padding-top:0.3em;
border: 0;
}
.linedwrap .lines {
margin-top: 0px;
width: 50px;
float: left;
overflow: hidden;
border-right: 1px solid #c0c0c0;
margin-right: 10px;
}
.linedwrap .codelines {
padding-top: 5px;
}
.linedwrap .codelines .lineno {
color:#AAAAAA;
padding-right: 0.5em;
padding-top: 0.0em;
text-align: right;
white-space: nowrap;
}
.linedwrap .codelines .lineselect {
color: red;
}
Raw
jquery-linedtextarea.js
/**
* jQuery Lined Textarea Plugin
* http://alan.blog-city.com/jquerylinedtextarea.htm
*
* Copyright (c) 2010 Alan Williamson
*
* Version:
* $Id: jquery-linedtextarea.js 464 2010-01-08 10:36:33Z alan $
*
* Released under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
* Usage:
* Displays a line number count column to the left of the textarea
*
* Class up your textarea with a given class, or target it directly
* with JQuery Selectors
*
* $(".lined").linedtextarea({
* selectedLine: 10,
* selectedClass: 'lineselect'
* });
*
* History:
* - 2010.01.08: Fixed a Google Chrome layout problem
* - 2010.01.07: Refactored code for speed/readability; Fixed horizontal sizing
* - 2010.01.06: Initial Release
*
*/
(function($) {
$.fn.linedtextarea = function(options) {
// Get the Options
var opts = $.extend({}, $.fn.linedtextarea.defaults, options);
/*
* Helper function to make sure the line numbers are always
* kept up to the current system
*/
var fillOutLines = function(codeLines, h, lineNo){
while ( (codeLines.height() - h ) <= 0 ){
if ( lineNo == opts.selectedLine )
codeLines.append("<div class='lineno lineselect'>" + lineNo + "</div>");
else
codeLines.append("<div class='lineno'>" + lineNo + "</div>");
lineNo++;
}
return lineNo;
};
/*
* Iterate through each of the elements are to be applied to
*/
return this.each(function() {
var lineNo = 1;
var textarea = $(this);
/* Turn off the wrapping of as we don't want to screw up the line numbers */
textarea.attr("wrap", "off");
textarea.css({resize:'none'});
var originalTextAreaWidth = textarea.outerWidth();
/* Wrap the text area in the elements we need */
textarea.wrap("<div class='linedtextarea'></div>");
var linedTextAreaDiv = textarea.parent().wrap("<div class='linedwrap' style='width:" + originalTextAreaWidth + "px'></div>");
var linedWrapDiv = linedTextAreaDiv.parent();
linedWrapDiv.prepend("<div class='lines' style='width:50px'></div>");
var linesDiv = linedWrapDiv.find(".lines");
linesDiv.height( textarea.height() + 6 );
/* Draw the number bar; filling it out where necessary */
linesDiv.append( "<div class='codelines'></div>" );
var codeLinesDiv = linesDiv.find(".codelines");
lineNo = fillOutLines( codeLinesDiv, linesDiv.height(), 1 );
/* Move the textarea to the selected line */
if ( opts.selectedLine != -1 && !isNaN(opts.selectedLine) ){
var fontSize = parseInt( textarea.height() / (lineNo-2) );
var position = parseInt( fontSize * opts.selectedLine ) - (textarea.height()/2);
textarea[0].scrollTop = position;
}
/* Set the width */
var sidebarWidth = linesDiv.outerWidth();
var paddingHorizontal = parseInt( linedWrapDiv.css("border-left-width") ) + parseInt( linedWrapDiv.css("border-right-width") ) + parseInt( linedWrapDiv.css("padding-left") ) + parseInt( linedWrapDiv.css("padding-right") );
var linedWrapDivNewWidth = originalTextAreaWidth - paddingHorizontal;
var textareaNewWidth = originalTextAreaWidth - sidebarWidth - paddingHorizontal - 20;
textarea.width( textareaNewWidth );
linedWrapDiv.width( linedWrapDivNewWidth );
/* React to the scroll event */
textarea.scroll( function(tn){
var domTextArea = $(this)[0];
var scrollTop = domTextArea.scrollTop;
var clientHeight = domTextArea.clientHeight;
codeLinesDiv.css( {'margin-top': (-1*scrollTop) + "px"} );
lineNo = fillOutLines( codeLinesDiv, scrollTop + clientHeight, lineNo );
});
/* Should the textarea get resized outside of our control */
textarea.resize( function(tn){
var domTextArea = $(this)[0];
linesDiv.height( domTextArea.clientHeight + 6 );
});
});
};
// default options
$.fn.linedtextarea.defaults = {
selectedLine: -1,
selectedClass: 'lineselect'
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment