The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

New Select Code with line number!

View previous topic View next topic Go down

New Select Code with line number!

Post by JScript on 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:


Any suggestions for improvement?

JS

JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

Re: New Select Code with line number!

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

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

Van-Helsing
Hyperactive

Male Posts : 2222
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Re: New Select Code with line number!

Post by brandon_g on 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.


Remember to mark your topic when a solution is found.

brandon_g
Support Moderator
Support Moderator

Male Posts : 5359
Reputation : 489
Language : English
Location : USA

http://broadcastingduo.forumotion.com/

Back to top Go down

Re: New Select Code with line number!

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

Very nice i like this new selection code!

Mati
Active Poster

Posts : 1885
Reputation : 283
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://footballforums.forumotion.net/

Back to top Go down

Re: New Select Code with line number!

Post by Zzbaivong on 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
Forumember

Posts : 95
Reputation : 47
Language : JavaScript ^^

http://devs.forumvi.com

Back to top Go down

Re: New Select Code with line number!

Post by JScript on 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
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

Re: New Select Code with line number!

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

What do you mean? Numbering or performance issues?

Zzbaivong
Forumember

Posts : 95
Reputation : 47
Language : JavaScript ^^

http://devs.forumvi.com

Back to top Go down

Re: New Select Code with line number!

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

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

JS

JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

Re: New Select Code with line number!

Post by Zzbaivong on 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
Forumember

Posts : 95
Reputation : 47
Language : JavaScript ^^

http://devs.forumvi.com

Back to top Go down

Re: New Select Code with line number!

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

This code is awesome. Thank you, JScript! Smile

Alex14
New Member

Posts : 16
Reputation : 1
Language : Romanian

http://crazy-tutorials.forumer.ro

Back to top Go down

View previous topic View next topic Back to top


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