The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

New Select Code with line number!

+3
brandon_g
Van-Helsing
JScript
7 posters

Go down

New Select Code with line number! Empty New Select Code with line number!

Post by JScript June 18th 2015, 8:30 pm

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:
New Select Code with line number! 48EGuSO

Any suggestions for improvement?

JS
JScript
JScript
Forumember

Male Posts : 741
Reputation : 175
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

New Select Code with line number! Empty Re: New Select Code with line number!

Post by Van-Helsing June 18th 2015, 11:00 pm

Hello @JScript,
Perfect code especially for communities which are using codes.
Very useful.
~1~
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

New Select Code with line number! Empty Re: New Select Code with line number!

Post by brandon_g June 19th 2015, 9:19 pm

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 Smile.


New Select Code with line number! Brando10
Remember to mark your topic New Select Code with line number! Solved15 when a solution is found.
General Rules | Tips & Tricks | FAQ | Forgot Founder Password?

New Select Code with line number! Scre1476
Team Leader
Review Section Rules | Request A Review | Sticker Points
brandon_g
brandon_g
Manager
Manager

Male Posts : 10106
Reputation : 923
Language : English
Location : USA

https://www.broadcastingduo.com

Back to top Go down

New Select Code with line number! Empty Re: New Select Code with line number!

Post by Mati June 20th 2015, 11:29 pm

Very nice i like this new selection code!
Mati
Mati
Hyperactive

Posts : 2020
Reputation : 330
Language : HTML, CSS & JavaScript
Location : Forum Services

https://forumservice.forumotion.com/

Back to top Go down

New Select Code with line number! Empty Re: New Select Code with line number!

Post by Zzbaivong June 21st 2015, 2:32 pm

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
Zzbaivong
Forumember

Posts : 101
Reputation : 51
Language : JavaScript ^^

http://devs.forumvi.com

Back to top Go down

New Select Code with line number! Empty Re: New Select Code with line number!

Post by JScript June 21st 2015, 3:58 pm

@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
JScript
JScript
Forumember

Male Posts : 741
Reputation : 175
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

New Select Code with line number! Empty Re: New Select Code with line number!

Post by Zzbaivong June 21st 2015, 4:11 pm

What do you mean? Numbering or performance issues?
Zzbaivong
Zzbaivong
Forumember

Posts : 101
Reputation : 51
Language : JavaScript ^^

http://devs.forumvi.com

Back to top Go down

New Select Code with line number! Empty Re: New Select Code with line number!

Post by JScript June 21st 2015, 5:04 pm

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

JS
JScript
JScript
Forumember

Male Posts : 741
Reputation : 175
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

New Select Code with line number! Empty Re: New Select Code with line number!

Post by Zzbaivong June 21st 2015, 5:29 pm

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  Crying or Very sad

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 Razz
Zzbaivong
Zzbaivong
Forumember

Posts : 101
Reputation : 51
Language : JavaScript ^^

http://devs.forumvi.com

Back to top Go down

New Select Code with line number! Empty Re: New Select Code with line number!

Post by Alex14 August 5th 2015, 9:19 am

This code is awesome. Thank you, JScript! Smile
avatar
Alex14
New Member

Posts : 16
Reputation : 1
Language : Romanian

http://crazy-tutorials.forumer.ro

Back to top Go down

New Select Code with line number! Empty Re: New Select Code with line number!

Post by SLGray February 23rd 2017, 8:01 am

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


New Select Code with line number! Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51452
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum