← 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

Dispatch now generates an index for each plugin type, allowing plugins to
be written which are aware of other plugins, and other plugin types.

All view plugins now subclass from ivle.webapp.base.plugins.ViewPlugin,
as opposed to subclassing BasePlugin directly. This will allow us to
easily re-write console as an OverlayPlugin, and allow future new
plugins types to be created.

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
-- simple select example
 
360
-- 
 
361
SELECT * FROM books
 
362
        WHERE price > 100.00 and price < 150.00
 
363
        ORDER BY title
 
364
 
 
365
SELECT books.title, count(*) AS Authors
 
366
        FROM books
 
367
        JOIN book_authors 
 
368
                ON books.book_number = book_authors.book_number
 
369
        GROUP BY books.title
 
370
 
 
371
-- insert, update and delete examples
 
372
        
 
373
INSERT INTO my_table (field1, field2, field3) VALUES ('test', 'N', NULL);
 
374
 
 
375
BEGIN WORK;
 
376
        UPDATE inventory SET quantity = quantity - 3 WHERE item = 'pants';
 
377
COMMIT;
 
378
</textarea>
 
379
 
 
380
<textarea id="cp-html" class="hidden-code">
 
381
<html>
 
382
<head>
 
383
        <title>CodePress - Online Real Time Syntax Highlighting Editor</title>
 
384
 
 
385
        <style type="text/css">
 
386
        @import url(styles.css);        
 
387
        </style>
 
388
        <script type="text/javascript">
 
389
        function getCode() {
 
390
                alert(textWithoutHighlighting);
 
391
        }
 
392
        </script>
 
393
</head>
 
394
<body>
 
395
<div id="logo">
 
396
        <h1><a href="http://codepress.org/">CodePress</a></h1>
 
397
        <h2>Online Real Time Syntax Highlighting Editor</h2>
 
398
        <img src="testimage.gif" />
 
399
</div>
 
400
<div id="languages">
 
401
        <em>choose language:</em> 
 
402
        <button onclick="edit('codepress.php',this)" id="default">PHP</button> 
 
403
        <button onclick="edit('FileManager.java',this)">Java</button> 
 
404
</div>
 
405
</body>
 
406
</html>
 
407
</textarea>
 
408
 
 
409
<textarea id="cp-css" class="hidden-code">
 
410
/* CSS comment */
 
411
 
 
412
body {
 
413
        color:#000;
 
414
        background-color:white;
 
415
        font:15px Georgia, "Lucida Grande", Arial, sans-serif; 
 
416
        letter-spacing:0.01em;
 
417
        margin:15px;
 
418
}
 
419
 
 
420
p { 
 
421
        margin:0 0 15px 0; 
 
422
}
 
423
 
 
424
a,a:visited {
 
425
        color:#7f0055;
 
426
}
 
427
 
 
428
select {
 
429
        background:#ffffe1;
 
430
}
 
431
 
 
432
h1 {
 
433
        color:#7f0055;
 
434
        margin:0;
 
435
        padding:0;
 
436
        font-size:42px;
 
437
}
 
438
</textarea>
 
439
 
 
440
 
 
441
<script src="codepress.js" type="text/javascript"></script>
 
442
</body>
 
443
</html>