Added line number to the input textarea.

Author: Nurrl

assets/css/style.css

@@ -36,6 +36,8 @@ textarea {
  border: none; border-radius: 4px;
  padding: 8px;
 
+ word-wrap: break-word;
+ word-break: break-all;
  box-sizing: border-box;
  resize: none;
 }
@@ -151,6 +153,7 @@ button:disabled {
  width: 100%;
 
  display: none;
+ z-index: 2;
 }
 .tooltip > span {
  /* Size */

assets/js/lib/jquery-linenumbers.js

@@ -0,0 +1,87 @@
+
+ let textWidth = function (elem, text) {
+ $body = $('body');
+ $this = elem;
+ $text = text;
+ var calc = '<div style="clear:both;display:block;visibility:hidden;"><span style="width;inherit;margin:0;font-family:' + $this.css('font-family') + ';font-size:' + $this.css('font-size') + ';font-weight:' + $this.css('font-weight') + '">' + $text + '</span></div>';
+ $body.append(calc);
+ var width = $('body').find('span:last').width();
+ $body.find('span:last').parent().remove();
+ return width;
+ };
+(function($){
+ $.fn.linenumbers = function(inopts){
+ let opts = $.extend({
+ width: 32,
+ padding: 8,
+ start: 1,
+ digits: 4
+ }, inopts);
+ $('[data-name="linenumbers"]').remove();
+
+ return this.each(function(){
+ let self = this;
+ let width = $(this).width();
+ let height = $(this).height();
+ let newwidth = width - opts.width;
+
+ $(this).before('<textarea \
+ data-name="linenumbers" \
+ style=" \
+ width: ' + newwidth + 'px; \
+ height: ' + height + 'px; \
+ float: left; \
+ margin-right: -' + newwidth + 'px; \
+ white-space: pre; overflow: hidden;\
+ " disabled></textarea>');
+ $(this).css({'width': newwidth + 'px', 'height': height + 'px',
+ 'padding': opts.padding + 'px', 'float': 'right'});
+ $(this).after('<div style="clear: both;"></div>');
+
+ let lnbox = $(this).parent().find('textarea[data-name="linenumbers"]');
+
+ // Determine textarea len with chars
+ let charlen = -1;
+ for (let i = 0; charlen == -1; i++)
+ if (textWidth($(this), "*".repeat(i)) >= newwidth - opts.padding * 2)
+ charlen = i - 2;
+ $(this).bind('blur focus change keyup keydown', function() {
+ // Break apart and regex the lines, everything to spaces sans linebreaks
+ let lines = $(this).val().split('\n');
+
+ // declare output var
+ let output='';
+ // declare spacers and max_spacers vars, and set defaults
+ let max_spacers = '';
+ for(i=0; i < opts.digits; i++)
+ max_spacers += ' ';
+ // Loop through and process each line
+ $.each(lines,function(k, v) {
+ // Add a line if not blank
+ if (k != 0)
+ output += '\n';
+ // Determine the appropriate number of leading spaces
+ let lencheck = k + opts.start + '!';
+ let spacers = max_spacers.substr(lencheck.length - 1);
+ // Add the line with out line number, to the output variable
+ if (k >= Math.pow(10, opts.digits) - 1)
+ output += "\n"
+ else {
+ output += spacers + (k + opts.start) + ':';
+ output += "\n---".repeat((v.length - 1) / charlen);
+ }
+ });
+ // Give the text area out modified content.
+ $(lnbox).val(output);
+ // Change scroll position as they type, makes sure they stay in sync
+ $(lnbox).scrollTop($(this).scrollTop());
+ });
+ // Lock scrolling together, for mouse-wheel scrolling
+ $(this).scroll(function(){
+ $(lnbox).scrollTop($(this).scrollTop());
+ });
+ // Fire it off once to get things started
+ $(this).trigger('keydown');
+ });
+ };
+})(jQuery);

assets/js/main.js

@@ -1,5 +1,9 @@
 $(function() { /* Wait for jQuery */
 
+
+ /* Textarea */
+ $(".input > #input").linenumbers();
+
  /* Init lets */
  let isCodeCompiled = false;
  let Duck = new Duckuino();
@@ -10,7 +14,13 @@ $(function() { /* Wait for jQuery */
  } catch (e) {}
 
  /* Compile button enable/disable */
- $(".input > textarea").keyup(function() {
+ $(".input > #input").keyup(function() {
+ // Disable export when input is changed
+ $(".copy-but").prop("disabled", true);
+ $(".export .copy-but").text("Copy !");
+ $(".dl-but button").prop("disabled", true);
+ $(".dl-but select").prop("disabled", true);
+
  if($(this).val() !== "") {
  $(".process-but button").prop("disabled", false);
  $(".process-but select").prop("disabled", false);
@@ -28,7 +38,7 @@ $(function() { /* Wait for jQuery */
 
  /* Compile button click */
  $(".process-but button").click(function() {
- let duckyScript = $(".input > textarea").val();
+ let duckyScript = $(".input > #input").val();
  let selectedModule = mods[$(".process-but select").find(":selected").val()];
 
  /* Load Duckuino & Compile */

index.html

@@ -27,7 +27,7 @@ <h6>This is where you put the DuckyScript</h6>
  <br>
 
  <!-- Input textarea -->
- <textarea placeholder="Enter some DuckyScript to begin :D"></textarea>
+ <textarea id="input" placeholder="Enter some DuckyScript to begin :D"></textarea>
  </div>
  <div class="part process">
  <div class="combined-but process-but">
@@ -62,6 +62,7 @@ <h4>Option 2: Copy/Paste</h4>
  <script src="assets/js/lib/jquery-3.1.0.min.js"></script>
  <script src="assets/js/lib/jszip-3.1.2.min.js"></script>
  <script src="assets/js/lib/FileSaver-1.3.2.min.js"></script>
+ <script src="assets/js/lib/jquery-linenumbers.js"></script>
 
  <!-- Handmade js <3 -->
  <script src="Duckuino.js"></script>