~azzar1/unity/add-show-desktop-key : contents of www/media/common/codepress/index.html at revision 999

~azzar1/unity/add-show-desktop-key : (revision 999)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
	<title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title>

	<style>
	body {color:#000;background-color:white;font:15px georgia, "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; letter-spacing:0.01em;margin:15px;}
	p {margin:0 0 15px 0;}
	a,a:visited {color:#7f0055;}
	select {background:#ffffe1;}
	button {margin-top:5px;}
	button.actions {width:171px;font-family:arial;}
	h1 {color:#7f0055;margin:0;padding:0;font-size:42px;font-weight:normal;}
	h1 a {text-decoration:none;}
	h2 {margin:0;}
	h2 a {text-decoration:none;font-weight:normal;font-size:22px;color:black !important;}
	h3 {font-size:20px;font-weight:normal;padding:0;margin:25px 0 5px 0;color:#7f0055;font-weight:bold;border-bottom:2px dotted #d8d8d8;}
	h4 {font-size:18px;font-weight:normal;z-index:0;}	
	code {color:#0080c0;font-size:13px;font-weight:bold;}
	ol, ul {padding:5px 0 5px 25px;margin:0;}
	ol li, ul li {margin:8px 0 8px 0;}
	
	#logo {text-align:center;background-color:#d6d6d6;padding:10px;-moz-border-radius:5px;border:1px solid silver;}
	#container {width:700px;margin:20px auto;padding:25px;border:3px solid #d9d9d9;-moz-border-radius:10px;background:#f8f8f8;}
	#languages {margin:5px 0;}
	
	#menu {width:100%;background:#7f0055;-moz-border-radius:4px;}
	#menu a {font:bold 17px georgia;color:white;padding:4px;display:block;border-left:1px solid white;text-align:center;text-decoration:none;}
	#menu a:hover {background:#b9669e;} 

	.hidden-code {display:none;}
	.copycode {border:1px dotted gray;padding:10px;background:white;font-family:monospace;color:gray}
	</style>

</head>

<body>
<div id="container">

<div id="logo">
	<h1><a href="http://codepress.org/">CodePress</a></h1>
	<h2><a href="http://codepress.org/">Online Real Time Syntax Highlighting Editor</a></h2>
</div>

<br />

<table cellpadding="0" cellspacing="0" id="menu">
<tr>
	<td>
		<a href="http://www.codepress.org/index.php">Home/Download</a>
	</td>
	<td>
		<a href="http://www.codepress.org/install.php">&nbsp;&nbsp;Install&nbsp;&nbsp;</a>
	</td>
	<td>
		<a href="http://www.codepress.org/to-do.php">&nbsp;&nbsp;To-do&nbsp;&nbsp;</a>
	</td>
	<td>
		<a href="http://www.codepress.org/about.php" id="about">&nbsp;&nbsp;About&nbsp;&nbsp;</a>
	</td>
</tr>
</table>

<h4>
	CodePress is web-based source code editor with syntax highlighting written in JavaScript that colors text in real time while it's being typed in the browser.
</h4>
	
<p>
	Go to <strong><a href="http://codepress.org/">http://codepress.org/</a></strong> for updates.
</p>

<h3>Demo</h3>
<div id="languages">
	<em>choose example in:</em> 
	<button onclick="cp1.edit('cp-php','php')">PHP</button> 
	<button onclick="cp1.edit('cp-javascript','javascript')">JavaScript</button> 
	<button onclick="cp1.edit('cp-java','java')">Java</button>
	<button onclick="cp1.edit('cp-perl','perl')">Perl</button>
	<button onclick="cp1.edit('cp-sql','sql')">SQL</button>	
	<button onclick="cp1.edit('cp-html','html')">HTML</button> 
	<button onclick="cp1.edit('cp-css','css')">CSS</button> 	
</div>

<textarea id="cp1" class="codepress php" style="width:700px;height:300px;" wrap="off">
<?php
// Very simple implementation of server side script

if(isset($_GET['file'])) {
	$file = basename($_GET['file']);
	$full_file = $path['server'].'/'.$path['webdocs'].'/'.$path['files']."/".$file;
	if(file_exists($full_file)) {
		$code = file_get_contents($full_file);
		$code = preg_replace("/>/","&amp;gt;",$code);
		$code = preg_replace("/</","&amp;lt;",$code);
		$language = getLanguage($file);
	}
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title>
	<link type="text/css" href="languages/codepress-<?=$language?>.css" rel="stylesheet" id="cp-lang-style" />
	<script type="text/javascript" src="codepress.js"></script>
	<script type="text/javascript">
		CodePress.language = '<?=$language?>';
	</script>
</head>
<body id="ffedt"><pre id="ieedt"><?=$code?></pre></body>
</html>
</textarea>

<br /><br />

<textarea id="codepress2" class="codepress javascript linenumbers-off" style="width:700px;height:200px;" wrap="off">
//set language
this.setLanguage = function() {
	if(arguments[0]) {
		language = (typeof(Content.languages[arguments[0]])!='undefined') ? arguments[0] : this.setLanguage();
		cpLanguage.innerHTML = Content.languages[language].name;
		if(cpBody.document.designMode=='on') cpBody.document.designMode = 'off';
		CodePress.loadScript(cpBody.document, '../languages/'+language+'.js', function () { cpBody.CodePress.syntaxHighlight('init'); })
		cpBody.document.getElementById('cp-lang-style').href = '../languages/'+language+'.css';
		this.hideMenu();
	}
	else {
		var extension = filename.replace(/.*\.([^\.]+)$/,'$1');
		var aux = false;
		for(lang in Content.languages) {
			extensions = ','+Content.languages[lang].extensions+',';
			if(extensions.match(','+extension+',')) aux = lang;
		}
		language = (aux) ? aux : 'generic';
	}
}
</textarea>

<p>
	<button class="actions" onclick="alert(codepress2.getCode())">get code from editor</button>
	<button class="actions" onclick="codepress2.toggleEditor()">turn on/off CodePress</button>
	<button class="actions" onclick="codepress2.toggleLineNumbers()">show/hide line numbers</button>
	<button class="actions" onclick="codepress2.toggleAutoComplete()">turn on/off auto-complete</button>
	<button class="actions" onclick="codepress2.toggleReadOnly()">turn on/off read only</button>
</p>



<h3>Installation</h3>
<ol>
	<li>
		<p>
			<a href="http://codepress.org/">Download</a> and uncompress CodePress under a directory inside your webserver.<br>
			Example:<strong> http://yourserver/codepress/</strong><br />
			Since CodePress is pure JavaScript and HTML, you can also test it without a webserver.
		</p>
	</li>
	<li>
		<p>
			Insert CodePress script somewhere in your page inside the <code>&lt;head&gt;</code> or above the <code>&lt;/body&gt;</code> tag.
		</p>
	
		<p class="copycode">
			&lt;script src="/codepress/codepress.js" type="text/javascript"&gt;&lt;/script&gt;
		</p>
	</li>
	
	<li>
		<p>
			Add the <code>&lt;textarea&gt;</code> tag to the place on your page you want CodePress to appear. CodePress will inherit the width and height of your textarea.
			When the page loads, it will automatically replace your textarea with a CodePress window.
		</p>
		<p class="copycode">
			&lt;textarea id="myCpWindow" class="codepress javascript linenumbers-off"&gt;<br />
			&nbsp;&nbsp;&nbsp;// your code here<br />
			&lt;/textarea&gt;
		</p>
		<ul>
			<li>
				The <code>javascript</code> portion of the class="" means that the language being edited is JavaScript.
			</li>
			<li>
				The <code>codepress</code> portion of the class="" is mandatory and indicates a textarea to be replaced for a CodePress window.
			</li>
			<li>
				Other class options are <code>linenumbers-off</code>, <code>autocomplete-off</code> and <code>readonly-on</code>.
			</li>			
			<li>
				Careful not to use the same id for two different CodePress windows (<code>&lt;textarea id="<strong>xx</strong>"...&gt;</code>)
			</li>
		</ul>

	</li>
</ol>

<h3>You also can...</h3>
<ol>
	<li>
		Open/edit code from a different textarea.<br />
		Example: <code>textarea_id.edit('other_textarea_id','language')</code><br>
	</li>
	<li>
		Get code from CodePress window.<br />
		Example: <code>textarea_id.getCode()</code><br>
	</li>
	<li>
		Turn on/off CodePress editor and return to the regular textarea.<br />
		Example: <code>textarea_id.toggleEditor()</code><br>
	</li>
	<li>
		Turn on/off line numbers.<br />
		Example: <code>textarea_id.toggleLineNumbers()</code><br>
	</li>
	<li>
		Turn on/off read only.<br />
		Example: <code>textarea_id.toggleReadOnly()</code><br>
	</li>
	<li>
		Turn on/off auto-complete.<br />
		Example: <code>textarea_id.toggleAutoComplete()</code><br>
	</li>
	
</ol>

<!-- p>
	You may want to use [id].getCode() to get the content code from CodePress window and save it to your server since CodePress only edit files and do not save them.
</p>
<p>
	You may also want to open files from server. You'll have to write a server side script and replace the JavaScript call on codepress.js from codepress.html to codepress.php (if your server side language is PHP, of course).
</p -->

<h3>License</h3>
<p>
	CodePress is distributed under the <a href="http://www.opensource.org/licenses/lgpl-license.php">LGPL</a>. If your software is <a href="http://www.gnu.org/philosophy/license-list.html#GPLCompatibleLicenses">compatible</a> with this licence or it is under <a href="http://creativecommons.org/">Creative Commons</a>, you can use it as you want. Just keep the credits somewhere around.
</p>


</div><!--/container-->



<!-- hidden codes for loading -->
<textarea id="cp-php" class="hidden-code">
<?php
// Very simple implementation of server side script

if(isset($_GET['file'])) {
	$file = basename($_GET['file']);
	$full_file = $path['server'].'/'.$path['webdocs'].'/'.$path['files']."/".$file;
	if(file_exists($full_file)) {
		$code = file_get_contents($full_file);
		$code = preg_replace("/>/","&amp;gt;",$code);
		$code = preg_replace("/</","&amp;lt;",$code);
		$language = getLanguage($file);
	}
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title>
	<link type="text/css" href="languages/codepress-<?=$language?>.css" rel="stylesheet" id="cp-lang-style" />
	<script type="text/javascript" src="codepress.js"></script>
	<script type="text/javascript">
		CodePress.language = '<?=$language?>';
	</script>
</head>
<body id="ffedt"><pre id="ieedt"><?=$code?></pre></body>
</html>
</textarea>

<textarea id="cp-javascript" class="hidden-code">
CodePress = function(obj) {
	var self = document.createElement('iframe');
	self.textarea = obj;
	self.textarea.disabled = true;
	self.style.height = self.textarea.clientHeight +'px';
	self.style.width = self.textarea.clientWidth +'px';
	
	self.initialize = function() {
		self.editor = self.contentWindow.CodePress;
		self.editor.body = self.contentWindow.document.getElementsByTagName('body')[0];
		self.editor.setCode(self.textarea.value);
		self.editor.syntaxHighlight('init');
	}
	
	self.edit = function(id,language) {
		self.language = (language) ? language : self.textarea.className.replace(/ ?codepress ?/,'');
		self.src = cpPath+'modules/codepress.html?engine='+self.getEngine()+'&language='+self.language;
		if(self.attachEvent) self.attachEvent('onload',self.initialize);
		else self.addEventListener('load',self.initialize,false);
	}
}
</textarea>

<textarea id="cp-autoit" class="hidden-code">
#include
IsNumber(15)
@Macro
;comment
$var = "string"
</textarea>

<textarea id="cp-java" class="hidden-code">
import java.io.FileFilter;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * Project ECCO - File manager class
 * @author Fernando M.A.d.S.
 */
public class FileManager extends HttpServlet {

	private static final long serialVersionUID = 1L;
	private static String login = "feanndor"; // session var should come here
	private static String usersPath = System.getProperty("user.dir")+File.separator+"htdocs"+File.separator+"ecco"+File.separator+"users"+File.separator;
	private static File dir = new File(usersPath+login+File.separator);
	static boolean existDirectories = false;
	static int isDirectory = 0;

	public FileFilter filterFiles(File dir) {
		return (new FileFilter() {
			public boolean accept(File pathname) {
				return !(pathname.isDirectory());
			}
		});
	}
}
</textarea>

<textarea id="cp-perl" class="hidden-code">
#!/usr/bin/perl      
# The first line of the script envokes Perl 

# Scalar variables
$var1 = "Hello World";   
$var2 = 14.6;

# Array variables
@arr1 = ("zero","one","two","three","four");

# Hash variable, or associative array
%hash1 = ("one","Monday","two", "Tuesday","three", "Wednesday","four","Thursday");

# Some simple printing
print $var1; 

# Subroutine
sub test() {
	print "ok";
}
</textarea>

<textarea id="cp-sql" class="hidden-code">
--
-- simple select example
-- 
SELECT * FROM books
	WHERE price > 100.00 and price < 150.00
	ORDER BY title

SELECT books.title, count(*) AS Authors
	FROM books
	JOIN book_authors 
		ON books.book_number = book_authors.book_number
	GROUP BY books.title

-- insert, update and delete examples
	
INSERT INTO my_table (field1, field2, field3) VALUES ('test', 'N', NULL);

BEGIN WORK;
	UPDATE inventory SET quantity = quantity - 3 WHERE item = 'pants';
COMMIT;
</textarea>

<textarea id="cp-html" class="hidden-code">
<html>
<head>
	<title>CodePress - Online Real Time Syntax Highlighting Editor</title>

	<style type="text/css">
	@import url(styles.css);	
	</style>
	<script type="text/javascript">
	function getCode() {
		alert(textWithoutHighlighting);
	}
	</script>
</head>
<body>
<div id="logo">
	<h1><a href="http://codepress.org/">CodePress</a></h1>
	<h2>Online Real Time Syntax Highlighting Editor</h2>
	<img src="testimage.gif" />
</div>
<div id="languages">
	<em>choose language:</em> 
	<button onclick="edit('codepress.php',this)" id="default">PHP</button> 
	<button onclick="edit('FileManager.java',this)">Java</button> 
</div>
</body>
</html>
</textarea>

<textarea id="cp-css" class="hidden-code">
/* CSS comment */

body {
	color:#000;
	background-color:white;
	font:15px Georgia, "Lucida Grande", Arial, sans-serif; 
	letter-spacing:0.01em;
	margin:15px;
}

p { 
	margin:0 0 15px 0; 
}

a,a:visited {
	color:#7f0055;
}

select {
	background:#ffffe1;
}

h1 {
	color:#7f0055;
	margin:0;
	padding:0;
	font-size:42px;
}
</textarea>


<script src="codepress.js" type="text/javascript"></script>
</body>
</html>