Merge pull request #4 from bartoszWesolowski/added-line-numbers-to-input-field

Added line numbers to input field

public/css/lined-textarea.css

@@ -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;
+}

public/index.html

@@ -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!"/>

public/js/app.js

@@ -17,3 +17,5 @@ $("#btn_validate").click( function () {
     }
   });
 });
+
+$(".lined").linedtextarea();

public/js/lined-textarea.js

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