Merge pull request #4 from bartoszWesolowski/added-line-numbers-to-input-field
Added line numbers to input field
This commit is contained in:
mielvds
GitHub
commit
03ccb2f154
|
|
@ -0,0 +1,68 @@
|
|||
/**
|
||||
* 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;
|
||||
}
|
||||
|
|
@ -3,7 +3,9 @@
|
|||
<title>Turtle validator</title>
|
||||
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
|
||||
<script src="js/ttl.js"></script>
|
||||
<script src="js/lined-textarea.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/lined-textarea.css">
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
||||
</head>
|
||||
|
|
@ -15,7 +17,7 @@
|
|||
<h2>Paste your turtle file in here and press validate</h2>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<textarea class="area" id="ta_turtle"></textarea>
|
||||
<textarea class="area lined" id="ta_turtle"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="button" id="btn_validate" class="btn btn-default" value="Validate!"/>
|
||||
|
|
|
|||
|
|
@ -17,3 +17,5 @@ $("#btn_validate").click( function () {
|
|||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(".lined").linedtextarea();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,126 @@
|
|||
/**
|
||||
* 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);
|
||||
Loading…
Reference in New Issue