bootstrap.min.js
8 years ago
linedtextarea.js
8 years ago
popper.min.js
8 years ago
script.js
8 years ago
select2.min.js
8 years ago
linedtextarea.js
126 lines
| 1 | /** |
| 2 | * jQuery Lined Textarea Plugin |
| 3 | * http://alan.blog-city.com/jquerylinedtextarea.htm |
| 4 | * |
| 5 | * Copyright (c) 2010 Alan Williamson |
| 6 | * |
| 7 | * Version: |
| 8 | * $Id: jquery-linedtextarea.js 464 2010-01-08 10:36:33Z 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'></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); |