IGEM:Kyoto/link
From OpenWetWare
(Difference between revisions)
| Line 1: | Line 1: | ||
| - | + | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | |
<html lang="ja"> | <html lang="ja"> | ||
<head> | <head> | ||
| - | |||
| - | |||
<title>Link<!-- ここにタイトルを入れる --></title> | <title>Link<!-- ここにタイトルを入れる --></title> | ||
| - | + | <script type="text/javascriptt"> | |
| - | + | /*jquery-1.2.2.pack.js*/ | |
| - | + | eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(J(){7(1e.19)L w=1e.19;L E=1e.19=J(a,b){K 1D E.2m.4Y(a,b)};7(1e.$)L D=1e.$;1e.$=E;L u=/^[^<]*(<(.|\\s)+>)[^>]*$|^#(\\w+)$/;L G=/^.[^:#\\[\\.]*$/;E.1i=E.2m={4Y:J(d,b){d=d||T;7(d.15){6[0]=d;6.M=1;K 6}N 7(1v d=="25"){L c=u.39(d);7(c&&(c[1]||!b)){7(c[1])d=E.5c([c[1]],b);N{L a=T.5N(c[3]);7(a)7(a.2s!=c[3])K E().2r(d);N{6[0]=a;6.M=1;K 6}N d=[]}}N K 1D E(b).2r(d)}N 7(E.1q(d))K 1D E(T)[E.1i.21?"21":"43"](d);K 6.6G(d.1n==1N&&d||(d.5j||d.M&&d!=1e&&!d.15&&d[0]!=10&&d[0].15)&&E.2H(d)||[d])},5j:"1.2.2",82:J(){K 6.M},M:0,22:J(a){K a==10?E.2H(6):6[a]},2E:J(b){L a=E(b);a.56=6;K a},6G:J(a){6.M=0;1N.2m.1h.1j(6,a);K 6},V:J(a,b){K E.V(6,a,b)},5E:J(b){L a=-1;6.V(J(i){7(6==b)a=i});K a},1K | |
| - | + | /*ajaxcodedisplay-or.js*/ | |
| - | + | // when the web page is ready | |
| - | + | $(document).ready( | |
| - | + | function(){ | |
| - | + | // get all links with the class codeexample and apply a function | |
| - | + | $('a.codeexample').each( | |
| - | + | function(){ | |
| - | + | // if the class 'dodisplay' is present | |
| - | + | if(this.className.indexOf('dodisplay') !==- 1){ | |
| - | + | // add functionality to toggle the display of the output | |
| - | + | $(this).toggle( | |
| - | + | // on the first click and subsequent odd clicks | |
| - | + | function(){ | |
| - | + | // create an IFRAME after the element that shows the document | |
| - | + | // the original link points to | |
| - | + | $(this).after('<iframe class="codeexample" src='+this.href+'></iframe>'); | |
| - | + | // store the original text in the link and change it to 'close' | |
| - | + | this.oldhtml = this.innerHTML; | |
| - | + | this.innerHTML = 'close'; | |
| - | + | }, | |
| + | // on the second and subsequent even clicks | ||
| + | function(){ | ||
| + | // remove the IFRAME and change the link text back to the old text | ||
| + | this.parentNode.removeChild(this.nextSibling); | ||
| + | this.innerHTML = this.oldhtml; | ||
| + | } | ||
| + | ); | ||
| + | } | ||
| + | // store the link reference in 'link' | ||
| + | var link = this; | ||
| + | // are there any highlights to be done? | ||
| + | var highlights = this.className.match(/highlight\[([^\]]+)/); | ||
| + | // shall I only display a range of lines? | ||
| + | var boundaries = this.className.match(/lines\[([^\]]+)/); | ||
| + | // convert the ranges defined in classes to arrays | ||
| + | // [1,5-7,12-15] => [1,5,6,7,12,13,14,15] | ||
| + | var getrange = function(range){ | ||
| + | var elms = range.split(','); | ||
| + | var range = []; | ||
| + | for(var i=0,j=elms.length;i<j;i++){ | ||
| + | if(elms[i].indexOf('-')===-1){ | ||
| + | range.push(+elms[i]); | ||
| + | } else { | ||
| + | var s = +elms[i].split('-')[0]; | ||
| + | var e = +elms[i].split('-')[1]; | ||
| + | for(s;s<=e;s++){ | ||
| + | range.push(+s); | ||
| + | }; | ||
| + | }; | ||
| + | }; | ||
| + | return range; | ||
| + | }; | ||
| + | // convert code returned from the Ajax call | ||
| + | var convert = function(code){ | ||
| + | // define output array | ||
| + | var codeout = []; | ||
| + | // replace HTML special chars | ||
| + | // change tabs to spaces | ||
| + | code = code.replace(/\t/g,' '); | ||
| + | // split code on newlines to get the lines | ||
| + | var lines = code.split(/\r?\n/); | ||
| + | // if there are highlights to be done | ||
| + | if(highlights){ | ||
| + | // get the full highlight range and loop over it | ||
| + | var tohighlight = getrange(highlights[1]); | ||
| + | for(var i=0,j=tohighlight.length;i<j;i++){ | ||
| + | // ger the appropriate line and add strong elements | ||
| + | // around it | ||
| + | var line = lines[tohighlight[i]-1]; | ||
| + | if(line){ | ||
| + | lines[tohighlight[i]-1] = '<strong>' + line + '</strong>'; | ||
| + | }; | ||
| + | }; | ||
| + | }; | ||
| + | // if there are only a few lines to be displayed | ||
| + | if(boundaries){ | ||
| + | // get all the needed lines and loop over them | ||
| + | var chunk = getrange(boundaries[1]); | ||
| + | for(var i=0,j=chunk.length;i<j;i++){ | ||
| + | var line = lines[chunk[i]-1]; | ||
| + | // add spacers in between different line blocks | ||
| + | if(i>0 && chunk[i] !== (chunk[i-1])+1){ | ||
| + | codeout.push('[...]'); | ||
| + | }; | ||
| + | // add a span with the line number, followed by a tab | ||
| + | if(line){ | ||
| + | var html = '<span>'+(chunk[i])+'</span>\t'+line; | ||
| + | codeout.push(html); | ||
| + | }; | ||
| + | }; | ||
| + | // if there are no boundaries just add line numbers to each line | ||
| + | } else { | ||
| + | for(var i=0,j=lines.length;i<j;i++){ | ||
| + | var html = lines[i]; | ||
| + | codeout.push(html); | ||
| + | }; | ||
| + | }; | ||
| + | // create a pre with a code and the joined output after the link | ||
| + | $(link).after( | ||
| + | '<div class="codeexample"><span>' + | ||
| + | codeout.join('\n') + | ||
| + | '</span></div>' | ||
| + | ); | ||
| + | }; | ||
| + | // do the ajax, timeout after 100 milliseconds if the | ||
| + | // document is not available | ||
| + | $.ajax({ | ||
| + | url:this.href, | ||
| + | timeout:500, | ||
| + | success:convert | ||
| + | }); | ||
| + | } | ||
| + | ); | ||
| + | } | ||
| + | ); | ||
| + | </script> | ||
</head> | </head> | ||
| + | |||
| + | <body><a href="http://openwetware.org/wiki/IGEM:Kyoto/2010/css" class="codeexample"></a></body> | ||
<body> | <body> | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
<!-- 以下サブメニューと本文 --> | <!-- 以下サブメニューと本文 --> | ||
<div class="base"> | <div class="base"> | ||
Revision as of 05:45, 13 December 2009
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


