← Back to branch summary

~azzar1/unity/add-show-desktop-key

« back to all changes in this revision

Viewing changes to www/media/common/codepress/index.html

  • Committer: William Grant
  • Date: 2012-06-28 01:52:02 UTC
  • Revision ID: me@williamgrant.id.au-20120628015202-f6ru7o367gt6nvgz
Hah

Show diffs side-by-side

added added

removed removed

Lines of Context:
www/media/common/codepress/index.html
1
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
 
 
3
 
<html>
4
 
<head>
5
 
        <title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title>
6
 
 
7
 
        <style>
8
 
        body {color:#000;background-color:white;font:15px georgia, "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; letter-spacing:0.01em;margin:15px;}
9
 
        p {margin:0 0 15px 0;}
10
 
        a,a:visited {color:#7f0055;}
11
 
        select {background:#ffffe1;}
12
 
        button {margin-top:5px;}
13
 
        button.actions {width:171px;font-family:arial;}
14
 
        h1 {color:#7f0055;margin:0;padding:0;font-size:42px;font-weight:normal;}
15
 
        h1 a {text-decoration:none;}
16
 
        h2 {margin:0;}
17
 
        h2 a {text-decoration:none;font-weight:normal;font-size:22px;color:black !important;}
18
 
        h3 {font-size:20px;font-weight:normal;padding:0;margin:25px 0 5px 0;color:#7f0055;font-weight:bold;border-bottom:2px dotted #d8d8d8;}
19
 
        h4 {font-size:18px;font-weight:normal;z-index:0;}       
20
 
        code {color:#0080c0;font-size:13px;font-weight:bold;}
21
 
        ol, ul {padding:5px 0 5px 25px;margin:0;}
22
 
        ol li, ul li {margin:8px 0 8px 0;}
23
 
        
24
 
        #logo {text-align:center;background-color:#d6d6d6;padding:10px;-moz-border-radius:5px;border:1px solid silver;}
25
 
        #container {width:700px;margin:20px auto;padding:25px;border:3px solid #d9d9d9;-moz-border-radius:10px;background:#f8f8f8;}
26
 
        #languages {margin:5px 0;}
27
 
        
28
 
        #menu {width:100%;background:#7f0055;-moz-border-radius:4px;}
29
 
        #menu a {font:bold 17px georgia;color:white;padding:4px;display:block;border-left:1px solid white;text-align:center;text-decoration:none;}
30
 
        #menu a:hover {background:#b9669e;} 
31
 
 
32
 
        .hidden-code {display:none;}
33
 
        .copycode {border:1px dotted gray;padding:10px;background:white;font-family:monospace;color:gray}
34
 
        </style>
35
 
 
36
 
</head>
37
 
 
38
 
<body>
39
 
<div id="container">
40
 
 
41
 
<div id="logo">
42
 
        <h1><a href="http://codepress.org/">CodePress</a></h1>
43
 
        <h2><a href="http://codepress.org/">Online Real Time Syntax Highlighting Editor</a></h2>
44
 
</div>
45
 
 
46
 
<br />
47
 
 
48
 
<table cellpadding="0" cellspacing="0" id="menu">
49
 
<tr>
50
 
        <td>
51
 
                <a href="http://www.codepress.org/index.php">Home/Download</a>
52
 
        </td>
53
 
        <td>
54
 
                <a href="http://www.codepress.org/install.php">&nbsp;&nbsp;Install&nbsp;&nbsp;</a>
55
 
        </td>
56
 
        <td>
57
 
                <a href="http://www.codepress.org/to-do.php">&nbsp;&nbsp;To-do&nbsp;&nbsp;</a>
58
 
        </td>
59
 
        <td>
60
 
                <a href="http://www.codepress.org/about.php" id="about">&nbsp;&nbsp;About&nbsp;&nbsp;</a>
61
 
        </td>
62
 
</tr>
63
 
</table>
64
 
 
65
 
<h4>
66
 
        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.
67
 
</h4>
68
 
        
69
 
<p>
70
 
        Go to <strong><a href="http://codepress.org/">http://codepress.org/</a></strong> for updates.
71
 
</p>
72
 
 
73
 
<h3>Demo</h3>
74
 
<div id="languages">
75
 
        <em>choose example in:</em> 
76
 
        <button onclick="cp1.edit('cp-php','php')">PHP</button> 
77
 
        <button onclick="cp1.edit('cp-javascript','javascript')">JavaScript</button> 
78
 
        <button onclick="cp1.edit('cp-java','java')">Java</button>
79
 
        <button onclick="cp1.edit('cp-perl','perl')">Perl</button>
80
 
        <button onclick="cp1.edit('cp-sql','sql')">SQL</button> 
81
 
        <button onclick="cp1.edit('cp-html','html')">HTML</button> 
82
 
        <button onclick="cp1.edit('cp-css','css')">CSS</button>         
83
 
</div>
84
 
 
85
 
<textarea id="cp1" class="codepress php" style="width:700px;height:300px;" wrap="off">
86
 
<?php
87
 
// Very simple implementation of server side script
88
 
 
89
 
if(isset($_GET['file'])) {
90
 
        $file = basename($_GET['file']);
91
 
        $full_file = $path['server'].'/'.$path['webdocs'].'/'.$path['files']."/".$file;
92
 
        if(file_exists($full_file)) {
93
 
                $code = file_get_contents($full_file);
94
 
                $code = preg_replace("/>/","&amp;gt;",$code);
95
 
                $code = preg_replace("/</","&amp;lt;",$code);
96
 
                $language = getLanguage($file);
97
 
        }
98
 
}
99
 
?>
100
 
 
101
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
102
 
<html>
103
 
<head>
104
 
        <title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title>
105
 
        <link type="text/css" href="languages/codepress-<?=$language?>.css" rel="stylesheet" id="cp-lang-style" />
106
 
        <script type="text/javascript" src="codepress.js"></script>
107
 
        <script type="text/javascript">
108
 
                CodePress.language = '<?=$language?>';
109
 
        </script>
110
 
</head>
111
 
<body id="ffedt"><pre id="ieedt"><?=$code?></pre></body>
112
 
</html>
113
 
</textarea>
114
 
 
115
 
<br /><br />
116
 
 
117
 
<textarea id="codepress2" class="codepress javascript linenumbers-off" style="width:700px;height:200px;" wrap="off">
118
 
//set language
119
 
this.setLanguage = function() {
120
 
        if(arguments[0]) {
121
 
                language = (typeof(Content.languages[arguments[0]])!='undefined') ? arguments[0] : this.setLanguage();
122
 
                cpLanguage.innerHTML = Content.languages[language].name;
123
 
                if(cpBody.document.designMode=='on') cpBody.document.designMode = 'off';
124
 
                CodePress.loadScript(cpBody.document, '../languages/'+language+'.js', function () { cpBody.CodePress.syntaxHighlight('init'); })
125
 
                cpBody.document.getElementById('cp-lang-style').href = '../languages/'+language+'.css';
126
 
                this.hideMenu();
127
 
        }
128
 
        else {
129
 
                var extension = filename.replace(/.*\.([^\.]+)$/,'$1');
130
 
                var aux = false;
131
 
                for(lang in Content.languages) {
132
 
                        extensions = ','+Content.languages[lang].extensions+',';
133
 
                        if(extensions.match(','+extension+',')) aux = lang;
134
 
                }
135
 
                language = (aux) ? aux : 'generic';
136
 
        }
137
 
}
138
 
</textarea>
139
 
 
140
 
<p>
141
 
        <button class="actions" onclick="alert(codepress2.getCode())">get code from editor</button>
142
 
        <button class="actions" onclick="codepress2.toggleEditor()">turn on/off CodePress</button>
143
 
        <button class="actions" onclick="codepress2.toggleLineNumbers()">show/hide line numbers</button>
144
 
        <button class="actions" onclick="codepress2.toggleAutoComplete()">turn on/off auto-complete</button>
145
 
        <button class="actions" onclick="codepress2.toggleReadOnly()">turn on/off read only</button>
146
 
</p>
147
 
 
148
 
 
149
 
 
150
 
<h3>Installation</h3>
151
 
<ol>
152
 
        <li>
153
 
                <p>
154
 
                        <a href="http://codepress.org/">Download</a> and uncompress CodePress under a directory inside your webserver.<br>
155
 
                        Example:<strong> http://yourserver/codepress/</strong><br />
156
 
                        Since CodePress is pure JavaScript and HTML, you can also test it without a webserver.
157
 
                </p>
158
 
        </li>
159
 
        <li>
160
 
                <p>
161
 
                        Insert CodePress script somewhere in your page inside the <code>&lt;head&gt;</code> or above the <code>&lt;/body&gt;</code> tag.
162
 
                </p>
163
 
        
164
 
                <p class="copycode">
165
 
                        &lt;script src="/codepress/codepress.js" type="text/javascript"&gt;&lt;/script&gt;
166
 
                </p>
167
 
        </li>
168
 
        
169
 
        <li>
170
 
                <p>
171
 
                        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.
172
 
                        When the page loads, it will automatically replace your textarea with a CodePress window.
173
 
                </p>
174
 
                <p class="copycode">
175
 
                        &lt;textarea id="myCpWindow" class="codepress javascript linenumbers-off"&gt;<br />
176
 
                        &nbsp;&nbsp;&nbsp;// your code here<br />
177
 
                        &lt;/textarea&gt;
178
 
                </p>
179
 
                <ul>
180
 
                        <li>
181
 
                                The <code>javascript</code> portion of the class="" means that the language being edited is JavaScript.
182
 
                        </li>
183
 
                        <li>
184
 
                                The <code>codepress</code> portion of the class="" is mandatory and indicates a textarea to be replaced for a CodePress window.
185
 
                        </li>
186
 
                        <li>
187
 
                                Other class options are <code>linenumbers-off</code>, <code>autocomplete-off</code> and <code>readonly-on</code>.
188
 
                        </li>                   
189
 
                        <li>
190
 
                                Careful not to use the same id for two different CodePress windows (<code>&lt;textarea id="<strong>xx</strong>"...&gt;</code>)
191
 
                        </li>
192
 
                </ul>
193
 
 
194
 
        </li>
195
 
</ol>
196
 
 
197
 
<h3>You also can...</h3>
198
 
<ol>
199
 
        <li>
200
 
                Open/edit code from a different textarea.<br />
201
 
                Example: <code>textarea_id.edit('other_textarea_id','language')</code><br>
202
 
        </li>
203
 
        <li>
204
 
                Get code from CodePress window.<br />
205
 
                Example: <code>textarea_id.getCode()</code><br>
206
 
        </li>
207
 
        <li>
208
 
                Turn on/off CodePress editor and return to the regular textarea.<br />
209
 
                Example: <code>textarea_id.toggleEditor()</code><br>
210
 
        </li>
211
 
        <li>
212
 
                Turn on/off line numbers.<br />
213
 
                Example: <code>textarea_id.toggleLineNumbers()</code><br>
214
 
        </li>
215
 
        <li>
216
 
                Turn on/off read only.<br />
217
 
                Example: <code>textarea_id.toggleReadOnly()</code><br>
218
 
        </li>
219
 
        <li>
220
 
                Turn on/off auto-complete.<br />
221
 
                Example: <code>textarea_id.toggleAutoComplete()</code><br>
222
 
        </li>
223
 
        
224
 
</ol>
225
 
 
226
 
<!-- p>
227
 
        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.
228
 
</p>
229
 
<p>
230
 
        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).
231
 
</p -->
232
 
 
233
 
<h3>License</h3>
234
 
<p>
235
 
        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.
236
 
</p>
237
 
 
238
 
 
239
 
</div><!--/container-->
240
 
 
241
 
 
242
 
 
243
 
<!-- hidden codes for loading -->
244
 
<textarea id="cp-php" class="hidden-code">
245
 
<?php
246
 
// Very simple implementation of server side script
247
 
 
248
 
if(isset($_GET['file'])) {
249
 
        $file = basename($_GET['file']);
250
 
        $full_file = $path['server'].'/'.$path['webdocs'].'/'.$path['files']."/".$file;
251
 
        if(file_exists($full_file)) {
252
 
                $code = file_get_contents($full_file);
253
 
                $code = preg_replace("/>/","&amp;gt;",$code);
254
 
                $code = preg_replace("/</","&amp;lt;",$code);
255
 
                $language = getLanguage($file);
256
 
        }
257
 
}
258
 
?>
259
 
 
260
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
261
 
<html>
262
 
<head>
263
 
        <title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title>
264
 
        <link type="text/css" href="languages/codepress-<?=$language?>.css" rel="stylesheet" id="cp-lang-style" />
265
 
        <script type="text/javascript" src="codepress.js"></script>
266
 
        <script type="text/javascript">
267
 
                CodePress.language = '<?=$language?>';
268
 
        </script>
269
 
</head>
270
 
<body id="ffedt"><pre id="ieedt"><?=$code?></pre></body>
271
 
</html>
272
 
</textarea>
273
 
 
274
 
<textarea id="cp-javascript" class="hidden-code">
275
 
CodePress = function(obj) {
276
 
        var self = document.createElement('iframe');
277
 
        self.textarea = obj;
278
 
        self.textarea.disabled = true;
279
 
        self.style.height = self.textarea.clientHeight +'px';
280
 
        self.style.width = self.textarea.clientWidth +'px';
281
 
        
282
 
        self.initialize = function() {
283
 
                self.editor = self.contentWindow.CodePress;
284
 
                self.editor.body = self.contentWindow.document.getElementsByTagName('body')[0];
285
 
                self.editor.setCode(self.textarea.value);
286
 
                self.editor.syntaxHighlight('init');
287
 
        }
288
 
        
289
 
        self.edit = function(id,language) {
290
 
                self.language = (language) ? language : self.textarea.className.replace(/ ?codepress ?/,'');
291
 
                self.src = cpPath+'modules/codepress.html?engine='+self.getEngine()+'&language='+self.language;
292
 
                if(self.attachEvent) self.attachEvent('onload',self.initialize);
293
 
                else self.addEventListener('load',self.initialize,false);
294
 
        }
295
 
}
296
 
</textarea>
297
 
 
298
 
<textarea id="cp-autoit" class="hidden-code">
299
 
#include
300
 
IsNumber(15)
301
 
@Macro
302
 
;comment
303
 
$var = "string"
304
 
</textarea>
305
 
 
306
 
<textarea id="cp-java" class="hidden-code">
307
 
import java.io.FileFilter;
308
 
import java.io.IOException;
309
 
import java.io.PrintWriter;
310
 
 
311
 
/**
312
 
 * Project ECCO - File manager class
313
 
 * @author Fernando M.A.d.S.
314
 
 */
315
 
public class FileManager extends HttpServlet {
316
 
 
317
 
        private static final long serialVersionUID = 1L;
318
 
        private static String login = "feanndor"; // session var should come here
319
 
        private static String usersPath = System.getProperty("user.dir")+File.separator+"htdocs"+File.separator+"ecco"+File.separator+"users"+File.separator;
320
 
        private static File dir = new File(usersPath+login+File.separator);
321
 
        static boolean existDirectories = false;
322
 
        static int isDirectory = 0;
323
 
 
324
 
        public FileFilter filterFiles(File dir) {
325
 
                return (new FileFilter() {
326
 
                        public boolean accept(File pathname) {
327
 
                                return !(pathname.isDirectory());
328
 
                        }
329
 
                });
330
 
        }
331
 
}
332
 
</textarea>
333
 
 
334
 
<textarea id="cp-perl" class="hidden-code">
335
 
#!/usr/bin/perl      
336
 
# The first line of the script envokes Perl 
337
 
 
338
 
# Scalar variables
339
 
$var1 = "Hello World";   
340
 
$var2 = 14.6;
341
 
 
342
 
# Array variables
343
 
@arr1 = ("zero","one","two","three","four");
344
 
 
345
 
# Hash variable, or associative array
346
 
%hash1 = ("one","Monday","two", "Tuesday","three", "Wednesday","four","Thursday");
347
 
 
348
 
# Some simple printing
349
 
print $var1; 
350
 
 
351
 
# Subroutine
352
 
sub test() {
353
 
        print "ok";
354
 
}
355
 
</textarea>
356
 
 
357
 
<textarea id="cp-sql" class="hidden-code">
358
 
--
359
 
SELECT * FROM books
360
 
        WHERE price > 100.00 and price < 150.00
361
 
        ORDER BY title
362
 
 
363
 
SELECT books.title, count(*) AS Authors
364
 
        FROM books
365
 
        JOIN book_authors 
366
 
                ON books.book_number = book_authors.book_number
367
 
        GROUP BY books.title
368
 
 
369
 
        
370
 
INSERT INTO my_table (field1, field2, field3) VALUES ('test', 'N', NULL);
371
 
 
372
 
BEGIN WORK;
373
 
        UPDATE inventory SET quantity = quantity - 3 WHERE item = 'pants';
374
 
COMMIT;
375
 
</textarea>
376
 
 
377
 
<textarea id="cp-html" class="hidden-code">
378
 
<html>
379
 
<head>
380
 
        <title>CodePress - Online Real Time Syntax Highlighting Editor</title>
381
 
 
382
 
        <style type="text/css">
383
 
        @import url(styles.css);        
384
 
        </style>
385
 
        <script type="text/javascript">
386
 
        function getCode() {
387
 
                alert(textWithoutHighlighting);
388
 
        }
389
 
        </script>
390
 
</head>
391
 
<body>
392
 
<div id="logo">
393
 
        <h1><a href="http://codepress.org/">CodePress</a></h1>
394
 
        <h2>Online Real Time Syntax Highlighting Editor</h2>
395
 
        <img src="testimage.gif" />
396
 
</div>
397
 
<div id="languages">
398
 
        <em>choose language:</em> 
399
 
        <button onclick="edit('codepress.php',this)" id="default">PHP</button> 
400
 
        <button onclick="edit('FileManager.java',this)">Java</button> 
401
 
</div>
402
 
</body>
403
 
</html>
404
 
</textarea>
405
 
 
406
 
<textarea id="cp-css" class="hidden-code">
407
 
/* CSS comment */
408
 
 
409
 
body {
410
 
        color:#000;
411
 
        background-color:white;
412
 
        font:15px Georgia, "Lucida Grande", Arial, sans-serif; 
413
 
        letter-spacing:0.01em;
414
 
        margin:15px;
415
 
}
416
 
 
417
 
p { 
418
 
        margin:0 0 15px 0; 
419
 
}
420
 
 
421
 
a,a:visited {
422
 
        color:#7f0055;
423
 
}
424
 
 
425
 
select {
426
 
        background:#ffffe1;
427
 
}
428
 
 
429
 
h1 {
430
 
        color:#7f0055;
431
 
        margin:0;
432
 
        padding:0;
433
 
        font-size:42px;
434
 
}
435
 
</textarea>
436
 
 
437
 
 
438
 
<script src="codepress.js" type="text/javascript"></script>
439
 
</body>
440
 
</html>