New Select Code with line number!

This code adds line counter and some useful buttons to tag code!

In your ACP: Modules -> HTML&JAVASCRIPT -> JavaScript codes management -> [Create a new JavaScript]
Title *: <- Whatever you want
Placement : <- In the topics
Javascript Code * : <- Select, copy and paste the code below in this field:

Code:


(function() {
   var style = document.createElement("style");
   style.type = "text/css";
   style.innerHTML =
      'code.jsCode_block, pre.jsCode_block {' +
      '  background-color: #FAFAFA !important;' +
      '  border: 1px solid #C9C9C9 !important;' +
      '  color: #000000;' +
      '  font-family: Consolas,"Bitstream Vera Sans Mono","Andale Mono",Monaco,"DejaVu Sans Mono","Lucida Console",monospace !important;' +
      '  font-size: 11px !important;' +
      '  line-height: 110% !important;' +
      '  margin-top: 0 !important;' +
      '  max-height: 250px !important;' +
      '  overflow: auto !important;' +
      '  padding: 5px !important;' +
      '  white-space: pre-wrap !important;' +
      '  width: auto !important;' +
      '}' +
      '.jsCodetop {' +
      '  background-color: #FFDEAD !important;' +
      '  color: #1D3652;' +
      '  font-size: 10px;' +
      '  font-weight: bold;' +
      '  line-height: 100%;' +
      '  margin-top: 5px;' +
      '  padding: 2px 1px 2px 3px;' +
      '}' +
      '.jsCodetop button {' +
      '  background: -moz-linear-gradient(center top , #EDEDED 5%, #DFDFDF 100%) repeat scroll 0 0 #EDEDED;' +
      '  border: 1px solid #BBBBBB;' +
      '  border-radius: 3px 3px 3px 3px;' +
      '  color: #1D3652;' +
      '  cursor: pointer;' +
      '  display: inline-block;' +
      '  font-size: 10px;' +
      '  padding: 0 6px;' +
      '  text-decoration: none;' +
      '}' +
      '.jsCodetop button:hover {' +
      '  background: -moz-linear-gradient(center top , #DFDFDF 5%, #EDEDED 100%) repeat scroll 0 0 #DFDFDF;' +
      '  border-color: #9A9A9A;' +
      '  color: #3D70A3;' +
      '}' +
      '.jsCodetop button:active {' +
      '  position: relative;' +
      '  top: 1px;' +
      '}' +
      'pre.jsCode_block.expand, code.jsCode_block.expand {' +
      '  max-height: 100% !important;' +
      '}' +
      'pre ol.linenums {' +
      '  color: #afafaf;' +
      '  font-size: 12px;' +
      '  list-style: outside none decimal;' +
      '  padding: 5px 0 5px 42px !important;' +
      '  margin: -16px 0 0;' +
      '  width: auto;' +
      '}' +
      'pre ol.linenums li > span {' +
      '  color: #000000;' +
      '}' +
      'pre ol.linenums li {' +
      '  border-left: 3px solid #6ce26c;' +
      '  padding-left: 15px;' +
      '  list-style: inherit;' +
      '  font-size: inherit !important;' +
      '}';
   document.getElementsByTagName("head")[0].appendChild(style);
})();

jQuery(function() {
   var tagCode = jQuery('.cont_code, code'),
      codebox = null;

   for (var i = 0, len = tagCode.length; i < len; i++) {
      codebox = jQuery(tagCode[i]).closest('.codebox');
      codebox.before(
         '<div class="jsCodetop">Code &nbsp; &nbsp; &nbsp; &nbsp;<button onclick="jsCodeExpand(this); return false;">expand</button>' +
         '  <button style="display: none" onclick="jsCodeCollapse(this); return false;">collapse</button>&nbsp; ' +
         '  <button onclick="jsCodeSelect(this); return false;">select</button>&nbsp; ' +
         '  <button onclick="jsCodePopup(this); return false;">popup</button>&nbsp; ' +
         '  <button style="margin-right: 50px; float: right;" onclick="jsCodeAbout(this); return false;">?</button>' +
         '</div>' +
         '<pre class="jsCode_block">' +
         '  <ol class="linenums">' + tagCode[i].innerHTML.replace(/<br>/mg, '<li class="L1"><span>') + '</ol>' +
         '</pre>'
      );
      codebox.remove();
   }
});

function jsCodeExpand(oThis) {
   jQuery(oThis).css('display', 'none');
   jQuery(oThis).next().css('display', '');
   jQuery(oThis).parent().next('pre.jsCode_block').addClass('expand');
}

function jsCodeCollapse(oThis) {
   jQuery(oThis).css('display', 'none');
   jQuery(oThis).prev().css('display', '');
   jQuery(oThis).parent().next('pre.jsCode_block').removeClass('expand');
}

function jsCodePopup(oThis) {
   var content = jQuery(oThis).parent().next('pre.jsCode_block').html();
   var my_window = window.open("", "To select the code: [Ctrl] + [A]", "scrollbars=1toolbar=no,menubar=no,personalbar=no,status=0,left=0,location=0,menubar=0,top=0,width=640,height=480");
   my_window.document.write('<pre>' + content + '</pre>');
}

function jsCodeAbout(oThis) {
   alert('Simple code to add line counter fuctionality for Forumotion\n\nBy JScript FROM Brazil - 2015/04/10\n');
}

function jsCodeSelect(oThis) {
   var doc = document;
   var text = jQuery(oThis).parent().next('pre.jsCode_block')[0];
   if (doc.body.createTextRange) {
      var range = doc.body.createTextRange();
      range.moveToElementText(text);
      range.select();
   } else if (window.getSelection) {
      var selection = window.getSelection();
      var range = doc.createRange();
      range.selectNodeContents(text);
      selection.removeAllRanges();
      selection.addRange(range);
   }
}


Result:


Any suggestions for improvement?

JS

Hello @JScript,
Perfect code especially for communities which are using codes.
Very useful.

Ah yes this is the code you developed to help with my phpbb2/conflicting avacweb coding problem. Works great and has been very helpful. Thanks again for this lovely code and feature JScript .

Very nice i like this new selection code!

I also wrote code to count the number of lines. My way is count br tag length and create numbered columns.

Code:

$("code").each(function() {
   var $this = $(this),
      lines = $("br", $this).length,
      i,
      $numbers = $("<div>", {
         "class": "lineNumber"
      }).insertBefore($this);

   for (i = 0; i <= lines; i++) {
      $numbers.append($("<span>", {
         text: (i + 1)
      }));
   }
});

I have written code discrimination 3 types of code html, css and js. Maybe it would be helpful if you want highlight codes. http://jsfiddle.net/baivong/v6WUw/

@Zzbaivong
His method is manual, my method is done automatically with < ol > tag!

Imagine having to enumerate codes on a topic that contains 10 threads and each contain a 800 code lines!!!

JS

What do you mean? Numbering or performance issues?

@Zzbaivong
Performance! Compare your way of numbering with my ...

JS

First test:

Code:

console.time("jScript");
var tagCode = jQuery('.cont_code, code'),
   codebox = null;

for (var i = 0, len = tagCode.length; i < len; i++) {
   codebox = jQuery(tagCode[i]).closest('.codebox');
   codebox.before(
      '<pre class="jsCode_block">' +
      '  <ol class="linenums">' + tagCode[i].innerHTML.replace(/<br>/mg, '<li class="L1"><span>') + '</ol>' +
      '</pre>'
   );
   codebox.remove();
}
console.timeEnd("jScript");
>> jScript: 7.25 ms

Code:

console.time("baivong");
$("code").each(function() {
   var $this = $(this),
      lines = $("br", $this).length,
      i,
      $numbers = $("<div>", {
         "class": "lineNumber"
      }).insertBefore($this);

   for (i = 0; i <= lines; i++) {
      $numbers.append($("<span>", {
         text: (i + 1)
      }));
   }
});
console.timeEnd("baivong");
>> baivong: 28.79 ms

@JScript won  

Then I have revised my codes and test again:

Code:

console.time("baivong");
$("code").each(function() {
   var $this = $(this),
      lines = $("br", $this).length,
      i, arr = [],
      $numbers = $("<div>", {
         "class": "lineNumber"
      }).insertBefore($this);

   for (i = 0; i <= lines; i++) {
      arr[i] = '<span></span>';
   }
   $numbers.html(arr.join(''));
});
console.timeEnd("baivong");
>> baivong: 2.45 ms

console.time("baivong");
var code = document.getElementsByTagName("CODE"),
    codeLength = code.length;
for (var i = 0; i < codeLength; i++) {
    var codeEach = code[i],
        lines = codeEach.getElementsByTagName("BR").length,
        arr = [];
    var linesBlock = document.createElement("div");
    linesBlock.className = "lineNumber";
    codeEach.parentNode.insertBefore(linesBlock, codeEach);
    for (var j = 0; j <= lines; j++) {
        arr[j] = '<span></span>';
    }
    linesBlock.innerHTML = arr.join('');
}
console.timeEnd("baivong");
>> baivong: 1.97 ms

I won

This code is awesome. Thank you, JScript!

This will no longer be supported by JScript: https://help.forumotion.com/t151137-in-memory-of-jscript-joao-carlos.