84232c88aa12169ef4dc392b879e3f0bce3278e9
[ckeditor.git] / skins / ckeditor / filemanager / browser / mac_finder / browser.html.dtml
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
6 <title>Site browser</title>
7 <link rel="stylesheet" href="browser.css" type="text/css" media="screen" title="Browser style" charset="utf-8" />
8 <script type="text/javascript" language="javascript" charset="utf-8" src="epoz_script_detect.js"></script>
9 <script type="text/javascript" language="javascript" charset="utf-8" src="javascript_events_api.js"></script>
10 <script type="text/javascript" language="javascript" charset="utf-8" src="sarissa.js"></script>
11 <script type="text/javascript" language="javascript" charset="utf-8">
12 // <![CDATA[
13 /* keyboard keycodes */
14 var keyLeft = 37, keyUp = 38, keyRight = 39, keyDown = 40, keyEnter = 13;
15
16 /* globals variables */
17 var finder, finderContent, cellWidth, currentColumn;
18 var scrollbarPlaceholder_offset = 0;
19 var scrollXStep = 25, scrollTimeStep = 10;
20 var ressourceType = GetUrlParam('Type');
21 var sConnUrl = GetUrlParam( 'Connector' ) ;
22 var baseDepth = 0;
23 if ( sConnUrl.substr(0,1) != '/' && sConnUrl.indexOf( '://' ) < 0 )
24 sConnUrl = window.location.href.replace( /browser.html.*$/, '' ) + sConnUrl ;
25 var getWindowWidth = (window.innerWidth != undefined) ? function(){return window.innerWidth;} : function(){return document.body.parentElement.clientWidth;};
26 var getWindowHeight = (window.innerHeight != undefined) ? function(){return window.innerHeight;} : function(){return document.body.parentElement.clientHeight;};
27
28
29 function _initBrowser(){
30 finder = document.getElementById('finder');
31 finder.colCpt = 3; // column counter;
32 finderContent = document.getElementById('finderContent');
33 cellWidth = Math.floor(getWindowWidth() / 3);
34
35 addListener(window, 'resize', resizeBrowser);
36 addListener(finder, 'click', onClickHandler);
37 addListener(finder, 'dblclick', onDblClickHandler);
38 var path = GetUrlParam('path');
39 path = (path) ? path : '/';
40 var level = -1;
41 for (var i = 0 ; i<path.length ; i++){
42 if (path.charAt(i) == '/')
43 level += 1;
44 }
45 baseDepth = level;
46
47 populateBrowser('ls', path);
48
49 if (browser.isGecko)
50 document.body.style.overflowX = 'scroll';
51 resizeBrowser();
52 scrollbarPlaceholder_offset = (window.scrollMaxY) ? window.scrollMaxY : document.body.offsetHeight - document.body.clientHeight;
53 resizeBrowser();
54 finder.style.width = cellWidth * 3 + "px";
55 }
56 addListener(window, 'load', _initBrowser);
57 addListener(document, 'keydown', onKeydownHandler);
58
59 function onClickHandler(evt) {
60 var li = getTargetedObject(evt);
61 switch (li.tagName) {
62 case 'IMG':
63 if (li.width != 16) // this img is a preview thumbnail.
64 return;
65 li = li.parentNode;
66 case 'LI':
67 // click on the current selected row
68 if (currentColumn == li.parentNode && currentColumn.currentRow == li)
69 return;
70
71 currentColumn = li.parentNode;
72 // hightlight row
73 if (currentColumn.currentRow) {
74 currentColumn.currentRow.className = currentColumn.currentRow.className.replace('-selected', '');
75 }
76 var command = li.className == 'folderish' ? 'ls' : 'info';
77 li.className += '-selected';
78 currentColumn.currentRow = li;
79
80 populateBrowser(command, li.path);
81 }
82 }
83
84 function onDblClickHandler(evt) {
85 var li = getTargetedObject(evt);
86
87 if(li.tagName != 'LI') {
88 if (li.tagName == 'IMG' && li.parentNode.tagName == 'LI')
89 li = t.parentNode;
90 else
91 return;
92 }
93 switch(window.parent.name) {
94 case 'FCKeditorDialog_PlinnImage' :
95 if (li.className == 'contentish-selected') {
96 window.parent.updateOrInsertImage(li.link);
97 window.close();
98 }
99 break;
100 case 'FCKBrowseWindow' :
101 window.opener.SetUrl(li.link);
102 window.close();
103 break;
104 }
105 }
106
107 function onKeydownHandler(evt) {
108 evt = (evt) ? evt : window.event;
109 if(!currentColumn) currentColumn = finder.getElementsByTagName('ul')[0];
110 if(!currentColumn.currentRow) {
111 raiseMouseEvent(currentColumn.firstChild,'click');
112 return;
113 }
114
115 var ob, evtType='click';
116 switch (evt.keyCode) {
117 case keyUp :
118 ob = currentColumn.currentRow.previousSibling;
119 break;
120 case keyDown :
121 ob = currentColumn.currentRow.nextSibling;
122 break;
123 case keyLeft :
124 var currentLevel = parseInt(currentColumn.parentNode.id.slice(6));
125 if (currentLevel) {
126 ob = document.getElementById('level-' + (currentLevel - 1)).firstChild;
127 if (ob.nodeType == 3) // text node
128 ob = ob.nextSibling
129 ob = ob.currentRow;
130 }
131 break;
132 case keyRight :
133 if(currentColumn.currentRow.className != 'folderish-selected')
134 return;
135 ob = document.getElementById('level-' + (parseInt(currentColumn.parentNode.id.slice(6)) + 1)).firstChild.firstChild;
136 break;
137 case keyEnter :
138 ob = currentColumn.currentRow;
139 evtType = 'dblclick'
140 break;
141 };
142 if (ob)
143 raiseMouseEvent(ob, evtType);
144 }
145
146 function resizeBrowser() {
147 var columns = finder.getElementsByTagName('ul');
148 var col;
149 for (var i=0 ; i<columns.length ; i++) {
150 col = columns[i];
151 col.style.height = getWindowHeight() - scrollbarPlaceholder_offset + "px";;
152
153 }
154 //document.body.style.width = getWindowWidth();
155 }
156
157 /* from fck default browser */
158 function GetUrlParam( paramName )
159 {
160 var oRegex = new RegExp( '[\?&]' + paramName + '=([^&]+)', 'i' ) ;
161 var oMatch = oRegex.exec( window.location.search ) ;
162
163 if ( oMatch && oMatch.length > 1 )
164 return unescape(oMatch[1]) ;
165 else
166 return '' ;
167 }
168
169
170
171 function populateBrowser(command, path) {
172 var prevColNum = finder.colCpt;
173 var level = -1;
174 for (var i = 0 ; i<path.length ; i++){
175 if (path.charAt(i) == '/')
176 level += 1;
177 }
178 level = level - baseDepth;
179
180 // prepare / cleanup columns
181 var cellLevel, startCleanup = 3;
182 switch (level) {
183 case 0 : // initialization case
184 startCleanup = 0;
185 cellLevel = document.getElementById('level-0');
186 cellLevel.style.width = cellWidth + "px";
187 // remove default content
188 cellLevel.removeChild(cellLevel.firstChild);
189
190 // cosmetic: display the second col with a scrollbar
191 var c1 = document.createElement('td');
192 c1.id = "level-1";
193 c1.style.width = cellWidth + "px";
194 c1.appendChild(document.createElement('ul'));
195 finderContent.appendChild(c1);
196
197 // cosmetic: display the third col without scrollbar
198 var c2 = document.createElement('td');
199 c2.id = "level-2";
200 c2.style.width = cellWidth + "px";
201 finderContent.appendChild(c2);
202 break;
203
204 case 1 :
205 cellLevel = document.getElementById("level-1");
206 cellLevel.removeChild(cellLevel.firstChild);
207 var c2 = document.getElementById("level-2");
208 var ul = c2.firstChild;
209 if (ul)
210 c2.removeChild(ul);
211 break;
212
213 case 2 :
214 cellLevel = document.getElementById("level-2");
215 var ul = cellLevel.firstChild;
216 if (ul) {
217 cellLevel.removeChild(ul);
218 }
219 break;
220
221 default :
222 cellLevel = document.getElementById("level-" + level);
223 if (!cellLevel) {
224 cellLevel = document.createElement('td');
225 cellLevel.id = "level-" + level;
226 cellLevel.style.width = cellWidth + "px";
227 finderContent.appendChild(cellLevel);
228 startCleanup = 0;
229 finder.colCpt += 1;
230 }
231 else {
232 cellLevel.removeChild(cellLevel.firstChild);
233 startCleanup = level + 1
234 }
235 }
236 if (startCleanup) {
237 var nextColumn = document.getElementById("level-" + startCleanup);
238 while (nextColumn) {
239 finderContent.removeChild(nextColumn);
240 finder.colCpt -= 1;
241 nextColumn = document.getElementById("level-" + ++startCleanup);
242 }
243 }
244
245 // request
246 var req = new XMLHttpRequest();
247 req.open("POST", sConnUrl, false); // synchrone
248 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
249 req.send("command=" + command + "&path="+escape(path) + "&Type=" + ressourceType);
250 var respDom = req.responseXML.documentElement;
251
252
253 var list = document.createElement('UL');
254 list.style.height= getWindowHeight() - scrollbarPlaceholder_offset + "px";
255 cellLevel.appendChild(list);
256
257 switch (respDom.tagName) {
258 case 'ls' :
259 // import listing
260 var rows = respDom.getElementsByTagName('row');
261 var row, listItem, icon;
262
263 for (var i = 0 ; i<rows.length ; i++){
264 row = rows[i];
265 listItem = document.createElement('li');
266 if (row.getAttribute('folderish') != "0")
267 listItem.className = 'folderish';
268 else
269 listItem.className = 'contentish';
270
271 icon = document.createElement('img');
272 with (icon) {
273 src = row.getAttribute('icon');
274 width = "16";
275 height = "16";
276 border = "0";
277 }
278
279 listItem.path = row.getAttribute('path');
280 listItem.link = row.getAttribute('link');
281 listItem.appendChild(icon);
282 listItem.appendChild(document.createTextNode(row.firstChild.nodeValue));
283 list.appendChild(listItem);
284 }
285 break;
286 case 'info' :
287 var li = document.createElement('li');
288 list.appendChild(li);
289 li.innerHTML = respDom.firstChild.nodeValue;
290
291 // add create link button
292 li = document.createElement('li');
293 li.style.textAlign = 'center';
294 var createLinkBtn = document.createElement('button');
295 var text = (ressourceType == 'Image') ? 'Insert' : 'Create link';
296 createLinkBtn.appendChild(document.createTextNode(text));
297
298 createLinkBtn.onclick = function(){
299 var url = respDom.lastChild.firstChild.nodeValue;
300 switch(window.parent.name) {
301 case 'FCKeditorDialog_PlinnImage' :
302 window.parent.updateOrInsertImage(url);
303 break;
304 case 'FCKBrowseWindow' :
305 default:
306 var funcNum = GetUrlParam('CKEditorFuncNum');
307 window.opener.CKEDITOR.tools.callFunction(funcNum, url);
308 break;
309 }
310 window.close();
311 };
312
313 list.appendChild(li);
314 li.appendChild(createLinkBtn);
315 break;
316 }
317
318 if (prevColNum != finder.colCpt) {
319 var finderWidth = finder.colCpt * cellWidth;
320 finder.style.width = finderWidth + "px";
321 if (finder.colCpt - prevColNum > 0) {
322 var start = (window.scrollX) ? window.scrollX : document.body.scrollLeft;
323 var stop = finder.colCpt * cellWidth - getWindowWidth();
324 smoothScroll(start, stop);
325 }
326 }
327 }
328
329 function smoothScroll(start, stop) {
330 start += scrollXStep;
331 window.scroll(start, 0);
332 if (start < stop) {
333 setTimeout('smoothScroll(' + start + ', ' + stop + ')', scrollTimeStep);
334 }
335 }
336
337
338 // ]]>
339 </script>
340 </head>
341 <body>
342 <table id="finder" cellspacing="0">
343 <tr id="finderContent">
344 <td id="level-0"><ul>
345 <li class="folderish">Folder</li>
346 <li class="contentish">Content</li>
347 </ul>
348 </td>
349 </tr>
350 </table>
351 </body>
352 </html>