bzr branch
http://gegoxaren.bato24.eu/bzr/lenasys/trunk
|
15.1.1
by galaxyAbstractor
Started implementation of a new codeviewer using Ace |
1 |
<?php include 'showcode.php'; ?> |
2 |
<html>
|
|
3 |
<head>
|
|
4 |
<script src="../js/ace/ace.js" type="text/javascript" charset="utf-8"></script> |
|
5 |
<script src="../js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script> |
|
6 |
<script type="text/javascript"> |
|
7 |
aceeditors = []; |
|
8 |
</script> |
|
9 |
<style type="text/css" media="screen"> |
|
10 |
body { |
|
11 |
margin: 0; |
|
12 |
padding: 0; |
|
13 |
}
|
|
14 |
||
15 |
#header { |
|
16 |
clear:both;
|
|
17 |
float:left;
|
|
18 |
width:100%;
|
|
19 |
background-color: #eee; |
|
20 |
}
|
|
21 |
.colleft { |
|
22 |
float:left;
|
|
23 |
width:100%;
|
|
24 |
position:relative;
|
|
25 |
}
|
|
26 |
.col1,
|
|
27 |
.col2,
|
|
28 |
.col3 { |
|
29 |
float:left;
|
|
30 |
position:relative;
|
|
31 |
padding:0 0 0 0; |
|
32 |
overflow:hidden;
|
|
33 |
}
|
|
34 |
||
35 |
/* column container */ |
|
36 |
.colmask { |
|
37 |
position:relative; /* This fixes the IE7 overflow hidden bug */ |
|
38 |
clear:both;
|
|
39 |
float:left;
|
|
40 |
width:100%; /* width of whole page */ |
|
41 |
overflow:hidden; /* This chops off any overhanging divs */ |
|
42 |
}
|
|
43 |
||
44 |
/* 2 Column (left menu) settings */ |
|
45 |
.leftmenu { |
|
46 |
background:#fff; /* right column background colour */ |
|
47 |
}
|
|
48 |
.leftmenu .colleft { |
|
49 |
right:60%; /* right column width */ |
|
50 |
background:#f4f4f4; /* left column background colour */ |
|
51 |
}
|
|
52 |
.leftmenu .col1 { |
|
53 |
width:60%; /* right column content width */ |
|
54 |
left:100%; /* 100% plus left column left padding */ |
|
55 |
}
|
|
56 |
.leftmenu .col2 { |
|
57 |
width:31%; /* left column content width (column width minus left and right padding) */ |
|
58 |
left:4%; /* (right column left and right padding) plus (left column left padding) */ |
|
59 |
}
|
|
60 |
.ace { |
|
61 |
height:500px;
|
|
62 |
width:100%;
|
|
63 |
}
|
|
64 |
||
65 |
.highlighted { |
|
66 |
background-color: #ff00ff; |
|
67 |
opacity: 0.5; |
|
68 |
position: absolute; |
|
69 |
z-index: 4; |
|
70 |
}
|
|
71 |
</style> |
|
72 |
||
73 |
</head>
|
|
74 |
<body>
|
|
75 |
<div id="header"> |
|
76 |
Test test test<br> |
|
77 |
test test hhh |
|
78 |
</div> |
|
79 |
<div class="colmask leftmenu"> |
|
80 |
<div class="colleft"> |
|
81 |
<div class="col1"> |
|
82 |
<?php showfile("showcode.php", "php");?> |
|
83 |
<?php showfile("index.php", "html");?> |
|
84 |
</div> |
|
85 |
<div class="col2"> |
|
86 |
|
|
87 |
<div id="doc"> |
|
88 |
<?php |
|
89 |
showdoc("DomExample1.htm"); |
|
90 |
?>
|
|
91 |
</div> |
|
92 |
</div> |
|
93 |
||
94 |
</div> |
|
95 |
</div> |
|
96 |
||
97 |
</body>
|
|
98 |
||
99 |
<script type="text/javascript"> |
|
100 |
||
101 |
function highlight(id, word){ |
|
102 |
clearHighlights();
|
|
103 |
for(var x = 0; x < id.length; x++) { |
|
104 |
var Range = require("ace/range").Range; |
|
105 |
var Search = require("ace/search").Search; |
|
106 |
||
107 |
var editor = ace.edit(id[x]); |
|
108 |
||
109 |
srch = new Search(); |
|
110 |
srch.set({needle:word}); |
|
111 |
numbers = []; |
|
112 |
numbers = srch.findAll(editor.getSession()); |
|
113 |
||
114 |
||
115 |
for(var i = 0; i < numbers.length;i++){ |
|
116 |
editor.getSession().addMarker(numbers[i], "highlighted", "text",false); |
|
117 |
}} |
|
118 |
||
119 |
} |
|
120 |
||
121 |
function clearHighlights(){ |
|
122 |
for(var i = 0; i < aceeditors.length; i++){ |
|
123 |
var editor = ace.edit(aceeditors[i]); |
|
124 |
markers = editor.getSession().getMarkers(false); |
|
125 |
||
126 |
$.each(markers, function(index, value){ |
|
127 |
editor.getSession().removeMarker(index); |
|
128 |
}); |
|
129 |
} |
|
130 |
} |
|
131 |
</script> |
|
132 |
</html> |