[CB] 'Jump to Code'

[SubDevo]

'Jump to Code' by SubDevo
Tested in IE, FF, Safari and Chrome.

THE CODE JUMP DOES NOT WORK IN OPERA
The extra buttons function normally. The jumps are visible and filled with code titles,
but it will not "jump" to the code.

PREVIEW (animated gif)

Features:
Resize your Code Area (Can be disabled)
This code resizes your code area to make it easier to work. Now more of your code is viewable at one time, with fewer linewraps!

Use a CSS class to style your code areas in the "Advanced" version of this code.

This code gives you two extra "Save Changes" buttons, two "Reset" buttons, two "Sort/Unsort" buttons and two dropdown Code Jumps in your headers/footers area. See Preview pic above to get a better idea!
It also remembers (for 10 minutes) the last code you edited so it will instantly jump to that code when you go back to your code area. Very handy if you are tweaking a code!

Details:
This code allows you to instantly find and jump to individual codes within your headers and footers! "Jump to Code" scans your headers/footers for Javascript codes and puts their titles into the Code Jumps. When you select a code from the jump, it finds that code, highlights the title and scrolls the code box to bring the code into view! No more time consuming scrolling! Either Global, Main or the Board name is displayed, so you always know what area you are working in. A "Reset" button is also provided which instantly fills the code areas with the code that was there before you made any changes. (Not having to reload the page is nice!) You can change the code lists from sorted to unsorted (and Vice Versa) at your whim without reloading the page. When you look for a code and you know the name of it, Sort the list. If you don't remember the name of the code, but you know it is somewhere near the bottom of your footers, Unsort the code and it will be easier to find.

Enjoy!!!
SubDevo

By default, the list of codes in the jump, are in the order that they are listed in your headers/footers. If you prefer, you may change it to an alphabetical listing when you first load your headers/footers, in this line:

var nSort=0; // Sort Code Names Alphabetically at Startup. 1=Yes, 0=No
(You may use the "Sort/Unsort" button, to toggle sorted/unsorted Code Titles, at any time, in the Code Jump.)

There are two versions of this code. The only difference between them, is how you want to specify the "look" of your code areas.
"Standard" version: Specify width and height only, set in the code.
"Advanced" version: Use a class to change any visual aspect of your code areas. Background (color or image), font (color, size, type etc.), and borders.
Since you (the Admin), is the only one using the code areas, why not "personalize" them just for you!

---

"Standard" Version:

---

Set the Code Area Size: (pixels)
var nWidth=764; // Desired Width (Default is 631)
var nHeight=594; // Desired Height (Default is 297)

You may use the default PB size by setting one of the variables to "0".

Example:
var nWidth=0; // Desired Width (Default is 631)
(This disables resizing of the code area)

---

"Advanced" Version:

---

You may enter any class name in this variable:
var nClass="jumptocode"; // Name of Class to Style the Code Areas.

Set all properties in your chosen class. A "default" class in included in the code.

<style type="text/css">
<!--
.jumptocode{width: 730px; height: 594px; background-color: #1E1E34; color: #C3C3D6;}
-->
</style>

Remove the options from the class that you do not need. And add other options as desired. Place this class (or your own) ABOVE the code.

Setup Instructions:

My code looks for codes by finding a "<script" tag:
"<script"
Once it finds that, it looks for the first remark line:
"// " or "/* " (Note: There must be a "space" after the remark!)
It uses the text from that line for the code title in the Code Jump.

IMPORTANT! For Best Results:

• Make SURE there is NOT a space BEFORE "<script".
  
• Make SURE there IS a space after the Title Remark! "/*<space>" OR "//<space>".
  
• Make SURE every script has a Title Remark and it is the FIRST remark after the script tag.
  
  Example:
  <script type="text/javascript">
  <!--
  /* Jump to Code by SubDevo */
  or
  // Jump to Code by SubDevo

If you have code that doesn't have any "remark" lines, it will either:

• Put a blank line in the Code Jump.
  In this case, Unsort the jump and click the code directly above the blank entry. The "offending" title will be the next code down from that one.
  
• Or you may get an error on the page.
  (you will know that is the case if you don't see the buttons or jumps!)
  In most cases, this is caused by the first remark after a script tag, being a variable instead of a code title.
  
  Example:
  <script type="text/javascript">
  <!--
  // var redRum=omega; <----- BAD!!

Just spend a few minutes and go through your code to make sure every code has a remark in it and you will be fine.

If you need more help just let me know!

---

Location: Main Footer (Choose a version)

"Standard" Version. Specify width and height in the code.

<script type="text/javascript">
/* 'Jump to Code' by SubDevo */
/* Go to last code edited by Wormopolis */
/* Main Footer - Please leave this header intact. Do not repost. */
/* interoceandesigns.com or lsdp.proboards.com */

var nSort=0; // Sort Code Names Alphabetically at Startup. 1=Yes, 0=No
var nWidth="764"; // Desired Width (Default is 631)
var nHeight="594"; // Desired Height (Default is 297)

if(pb_action=="headersfooters2"){
   var nCode=document.createElement("div"),n_D=[],cj=[],bLab="Sort";
   var nForm,nArea,nBo,nBn,nInner,lText,stuff,xD,nC,a,i,x;
   for(i=0;i<2;i++){ nArea=(i==0)?"header":"footer";
      n_D=document.getElementsByName(nArea)[0]; nForm=n_D.parentNode;
      if(nForm.nodeName=="FONT"){nForm=nForm.parentNode;}
      nBo=nForm.parentNode.firstChild; nBo=(nBo.nodeName=="FONT")?nBo.innerHTML:nBo.nodeValue;
      nInner=n_D.previousSibling.previousSibling; nBn=nBo.slice(21,nBo.indexOf(" header"));
      if(!nBn){nBn=nBo.slice(56,nBo.length-1);}
      if(nWidth&&nHeight){a=n_D.style; a.height=nHeight; a.width=nWidth;}
      lText=(nBn+" "+nInner.innerHTML).toUpperCase();
      nInner.innerHTML=lText+'<hr size="1" class="hr"/>';
      stuff='<select size=1 id="cj'+nArea+'" onchange="fText(this.value,'+i+');"><option value="" selected="">'+lText+' Code Jump</option>';
      xD=n_D.value.split(/\r\n/); nC=[];
      if(xD.length<2){xD=n_D.value.split(/(\r|\n)/g);}
      for(x=0;x<xD.length;x++){
         if(xD[x].match(/^(<script)/i)){
            while(!xD[x].match(/^(\/[\/|*]\s)/)){x++;}
            nC.push(xD[x].replace(/(\/\/\s|\/\*\s|\*\/)/g,""));
         }
      } cj=nC.slice(); x=-1; if(nSort){bLab="Unsort";}
      while(nC[++x]){stuff+="<option value='"+nC[x]+"'>"+nC[x]+"</option>";}
      nCode.innerHTML='<input type="submit" title="Save Code" accesskey="s" value="Save Changes"/> <input type="reset" title="Undo Changes" value="Reset" accesskey="r" onClick="reset"/> '+stuff+'</select> <input type="button" id="j'+nArea+'" value="'+bLab+'" title="Sort/Unsort Code Titles" accesskey="a" onClick="gCode(this.id,'+i+')"/>';
      n_D.parentNode.insertBefore(nCode.cloneNode(true),n_D.previousSibling);
   } nSort= !nSort; gCode("jheader",0); nSort= !nSort; gCode("jfooter",1);
   setTimeout("changeCode()",2000);
}
function changeCode(){
   var n=(document.cookie.match(/lastCodeEdited=(.*?)(;|$)/))?RegExp.$1.split("±"):0;
   if(n){fText(n[1],n[0]);}
}
function gCode(nID,nH){ var nOpt=[];
   nSort= !nSort; nOpt=cj[nH].slice(); if(nSort){nOpt.sort();}
   document.getElementById(nID).value=(nSort)?"Unsort":"Sort";
   var nJ=document.getElementById("c"+nID),a,i=-1; nJ.selectedIndex="0";
   while(nOpt[++i]){ a=nJ.options[i+1];
      a.text=nOpt; a.value=nOpt;
}}
function fText(nVal,nT){
   var exptime=new Date(),t=n_D[nT],start,end,kev,a;
   if(nVal==""||t.value.indexOf(nVal)==-1){return;}
   exptime.setMinutes(exptime.getMinutes()+10);
   document.cookie="lastCodeEdited="+nT+"±"+nVal+"; expires="+exptime.toUTCString();
   nVal=" "+nVal; start=t.value.indexOf(nVal); end=start+nVal.length;
   t.scrollTop=t.scrollHeight;
   if(t.setSelectionRange){
      if(!window.TextEvent){ t.setSelectionRange(end-1,end);
         kev=document.createEvent("KeyEvents");
         kev.initKeyEvent("keypress",true,true,window,false,false,false,false,0,t.value.charCodeAt(end-1));
      }else{ t.setSelectionRange(start,end);
         kev=document.createEvent("TextEvent");
         kev.initTextEvent("textInput",true,true,null,nVal);
      } t.dispatchEvent(kev); t.setSelectionRange(start,end);
   }else if(document.selection){
      a=t.createTextRange(); a.collapse(true); a.findText(nVal); a.select();
   } t.focus();
}
</script>

"Advanced" Version. Use a CSS class to set the visual properties of the code area.

<style type="text/css">
<!--
.jumptocode{width: 730px; height: 594px; background-color: #1E1E34; color: #C3C3D6;}
-->
</style>

<script type="text/javascript">
/* 'Jump to Code' by SubDevo */
/* Go to last code edited by Wormopolis */
/* Main Footer - Please leave this header intact. Do not repost. */
/* interoceandesigns.proboards.com or lsdp.proboards.com */

var nSort=0; // Sort Code Names Alphabetically at Startup. 1=Yes, 0=No
var nClass="jumptocode"; // Name of Class to Style the Code Areas.

if(pb_action=="headersfooters2"){
   var nCode=document.createElement("div"),n_D=[],cj=[],bLab="Sort";
   var nForm,nArea,nBo,nBn,nInner,lText,stuff,xD,nC,a,i,x;
   for(i=0;i<2;i++){ nArea=(i==0)?"header":"footer";
      n_D=document.getElementsByName(nArea)[0];
      nForm=n_D.parentNode; n_D.className=nClass;
      if(nForm.nodeName=="FONT"){nForm=nForm.parentNode;}
      nBo=nForm.parentNode.firstChild; nBo=(nBo.nodeName=="FONT")?nBo.innerHTML:nBo.nodeValue;
      nInner=n_D.previousSibling.previousSibling; nBn=nBo.slice(21,nBo.indexOf(" header"));
      if(!nBn){nBn=nBo.slice(56,nBo.length-1);}
      lText=(nBn+" "+nInner.innerHTML).toUpperCase();
      nInner.innerHTML=lText+'<hr size="1" class="hr"/>';
      stuff='<select size=1 id="cj'+nArea+'" onchange="fText(this.value,'+i+');"><option value="" selected="">'+lText+' Code Jump</option>';
      xD=n_D.value.split(/\r\n/); nC=[];
      if(xD.length<2){xD=n_D.value.split(/(\r|\n)/g);}
      for(x=0;x<xD.length;x++){
         if(xD[x].match(/^(<script)/i)){
            while(!xD[x].match(/^(\/[\/|*]\s)/)){x++;}
            nC.push(xD[x].replace(/(\/\/\s|\/\*\s|\*\/)/g,""));
         }
      } cj=nC.slice(); x=-1; if(nSort){bLab="Unsort";}
      while(nC[++x]){stuff+="<option value='"+nC[x]+"'>"+nC[x]+"</option>";}
      nCode.innerHTML='<input type="submit" title="Save Code" accesskey="s" value="Save Changes"/> <input type="reset" title="Undo Changes" value="Reset" accesskey="r" onClick="reset"/> '+stuff+'</select> <input type="button" id="j'+nArea+'" value="'+bLab+'" title="Sort/Unsort Code Titles" accesskey="a" onClick="gCode(this.id,'+i+')"/>';
      n_D.parentNode.insertBefore(nCode.cloneNode(true),n_D.previousSibling);
   } nSort= !nSort; gCode("jheader",0); nSort= !nSort; gCode("jfooter",1);
   setTimeout("changeCode()",2000);
}
function changeCode(){
   var n=(document.cookie.match(/lastCodeEdited=(.*?)(;|$)/))?RegExp.$1.split("±"):0;
   if(n){fText(n[1],n[0]);}
}
function gCode(nID,nH){ var nOpt=[];
   nSort= !nSort; nOpt=cj[nH].slice(); if(nSort){nOpt.sort();}
   document.getElementById(nID).value=(nSort)?"Unsort":"Sort";
   var nJ=document.getElementById("c"+nID),a,i=-1; nJ.selectedIndex="0";
   while(nOpt[++i]){ a=nJ.options[i+1];
      a.text=nOpt; a.value=nOpt;
}}
function fText(nVal,nT){
   var exptime=new Date(),t=n_D[nT],start,end,kev,a;
   if(nVal==""||t.value.indexOf(nVal)==-1){return;}
   exptime.setMinutes(exptime.getMinutes()+10);
   document.cookie="lastCodeEdited="+nT+"±"+nVal+"; expires="+exptime.toUTCString();
   nVal=" "+nVal; start=t.value.indexOf(nVal); end=start+nVal.length;
   t.scrollTop=t.scrollHeight;
   if(t.setSelectionRange){
      if(!window.TextEvent){ t.setSelectionRange(end-1,end);
         kev=document.createEvent("KeyEvents");
         kev.initKeyEvent("keypress",true,true,window,false,false,false,false,0,t.value.charCodeAt(end-1));
      }else{ t.setSelectionRange(start,end);
         kev=document.createEvent("TextEvent");
         kev.initTextEvent("textInput",true,true,null,nVal);
      } t.dispatchEvent(kev); t.setSelectionRange(start,end);
   }else if(document.selection){
      a=t.createTextRange(); a.collapse(true); a.findText(nVal); a.select();
   } t.focus();
}
</script>

EDIT: The code above is an updated version. If you are already using "Jump to Code", and you do not have "sort" buttons, please get this version. In this version, single quotes ' and double quotes " are allowed in the code titles. Also includes Code Area resize capability using pixels instead of cols and rows.

EDIT 2:
I changed the variable nD to n_D in the fText function, to make it "unique". This helps avoid conflicts with any codes that use "nD" as a variable.

EDIT 3: 9/09/2009
Made a very small (two words) code change to ensure no partial code title matches when "jumping" to a code.

EDIT 4: 3/23/2010
Updated code for compatibility with Safari and Chrome. With partial functionality in Opera.

EDIT 5: 3/24/2010
Made a boo boo with previous update. FF broke. Fixed now.

EDIT 6: 2/03/2011
Using FF, sometimes the jumps and buttons would not show. Fixed.

EDIT 7: 8/15/2011
The code now remembers the last code you edited (for 10 min) and it will instantly jump to that code when you go back to your code area. Also, when a code is selected, it will now scroll to the top of the code area.

SubDevo