JAVASCRIPT   76

jQuery Lined Textarea Plugin

Guest on 7th May 2022 02:20:35 AM

  1. /**
  2.  * jQuery Lined Textarea Plugin
  3.  *   http://alan.blog-city.com/jquerylinedtextarea.htm
  4.  *
  5.  * Copyright (c) Alan Williamson
  6.  *
  7.  * Version:
  8.  *    $Id: jquery-linedtextarea.js alan $
  9.  *
  10.  * Released under the MIT License:
  11.  *    http://www.opensource.org/licenses/mit-license.php
  12.  *
  13.  * Usage:
  14.  *   Displays a line number count column to the left of the textarea
  15.  *  
  16.  *   Class up your textarea with a given class, or target it directly
  17.  *   with JQuery Selectors
  18.  *  
  19.  *   $(".lined").linedtextarea({
  20.  *      selectedLine: 10,
  21.  *    selectedClass: 'lineselect'
  22.  *   });
  23.  *
  24.  * History:
  25.  *   - 2010.01.08: Fixed a Google Chrome layout problem
  26.  *   - 2010.01.07: Refactored code for speed/readability; Fixed horizontal sizing
  27.  *   - 2010.01.06: Initial Release
  28.  *
  29.  */
  30. (function($) {
  31.  
  32.         $.fn.linedtextarea = function(options) {
  33.                
  34.                 // Get the Options
  35.                 var opts = $.extend({}, $.fn.linedtextarea.defaults, options);
  36.                
  37.                
  38.                 /*
  39.                  * Helper function to make sure the line numbers are always
  40.                  * kept up to the current system
  41.                  */
  42.                 var fillOutLines = function(codeLines, h, lineNo){
  43.                         while ( (codeLines.height() - h ) <= 0 ){
  44.                                 if ( lineNo == opts.selectedLine )
  45.                                         codeLines.append("<div class='lineno lineselect'>" + lineNo + "</div>");
  46.                                 else
  47.                                         codeLines.append("<div class='lineno'>" + lineNo + "</div>");
  48.                                
  49.                                 lineNo++;
  50.                         }
  51.                         return lineNo;
  52.                 };
  53.                
  54.                
  55.                 /*
  56.                  * Iterate through each of the elements are to be applied to
  57.                  */
  58.                 return this.each(function() {
  59.                         var lineNo = 1;
  60.                         var textarea = $(this);
  61.                        
  62.                         /* Turn off the wrapping of as we don't want to screw up the line numbers */
  63.                         textarea.attr("wrap", "off");
  64.                         textarea.css({resize:'none'});
  65.                         var originalTextAreaWidth       = textarea.outerWidth();
  66.  
  67.                         /* Wrap the text area in the elements we need */
  68.                         textarea.wrap("<div class='linedtextarea'></div>");
  69.                         var linedTextAreaDiv    = textarea.parent().wrap("<div class='linedwrap' style='width:" + originalTextAreaWidth + "px'></div>");
  70.                         var linedWrapDiv                        = linedTextAreaDiv.parent();
  71.                        
  72.                         linedWrapDiv.prepend("<div class='lines' style='width:50px'></div>");
  73.                        
  74.                         var linesDiv    = linedWrapDiv.find(".lines");
  75.                         linesDiv.height( textarea.height() + 6 );
  76.                        
  77.                        
  78.                         /* Draw the number bar; filling it out where necessary */
  79.                         linesDiv.append( "<div class='codelines'></div>" );
  80.                         var codeLinesDiv        = linesDiv.find(".codelines");
  81.                         lineNo = fillOutLines( codeLinesDiv, linesDiv.height(), 1 );
  82.  
  83.                         /* Move the textarea to the selected line */
  84.                         if ( opts.selectedLine != -1 && !isNaN(opts.selectedLine) ){
  85.                                 var fontSize = parseInt( textarea.height() / (lineNo-2) );
  86.                                 var position = parseInt( fontSize * opts.selectedLine ) - (textarea.height()/2);
  87.                                 textarea[0].scrollTop = position;
  88.                         }
  89.  
  90.                        
  91.                         /* Set the width */
  92.                         var sidebarWidth                                        = linesDiv.outerWidth();
  93.                         var paddingHorizontal           = parseInt( linedWrapDiv.css("border-left-width") ) + parseInt( linedWrapDiv.css("border-right-width") ) + parseInt( linedWrapDiv.css("padding-left") ) + parseInt( linedWrapDiv.css("padding-right") );
  94.                         var linedWrapDivNewWidth        = originalTextAreaWidth - paddingHorizontal;
  95.                         var textareaNewWidth                    = originalTextAreaWidth - sidebarWidth - paddingHorizontal - 20;
  96.  
  97.                         textarea.width( textareaNewWidth );
  98.                         linedWrapDiv.width( linedWrapDivNewWidth );
  99.                        
  100.  
  101.                        
  102.                         /* React to the scroll event */
  103.                         textarea.scroll( function(tn){
  104.                                 var domTextArea         = $(this)[0];
  105.                                 var scrollTop           = domTextArea.scrollTop;
  106.                                 var clientHeight        = domTextArea.clientHeight;
  107.                                 codeLinesDiv.css( {'margin-top': (-1*scrollTop) + "px"} );
  108.                                 lineNo = fillOutLines( codeLinesDiv, scrollTop + clientHeight, lineNo );
  109.                         });
  110.  
  111.  
  112.                         /* Should the textarea get resized outside of our control */
  113.                         textarea.resize( function(tn){
  114.                                 var domTextArea = $(this)[0];
  115.                                 linesDiv.height( domTextArea.clientHeight + 6 );
  116.                         });
  117.  
  118.                 });
  119.         };
  120.  
  121.   // default options
  122.   $.fn.linedtextarea.defaults = {
  123.         selectedLine: -1,
  124.         selectedClass: 'lineselect'
  125.   };
  126. })(jQuery);

Raw Paste


Login or Register to edit or fork this paste. It's free.