Utilisation d'une css différentes pour autoriser des customisation parfois nécessaires…
[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 'PlinnImageDialog' :
95 if (li.className == 'contentish-selected') {
96 window.parent.updateOrInsertImage(li.link);
97 window.close();
98 }
99 break;
100 case 'StandaloneBrowser' :
101 if (li.className == 'contentish-selected') {
102 window.opener.SetUrl(li.link);
103 window.close();
104 }
105 break;
106 case '' :
107 case '_blank' :
108 var funcNum = GetUrlParam('CKEditorFuncNum');
109 window.opener.CKEDITOR.tools.callFunction(funcNum, li.link);
110 window.close();
111 break;
112 }
113 }
114
115 function onKeydownHandler(evt) {
116 evt = (evt) ? evt : window.event;
117 if(!currentColumn) currentColumn = finder.getElementsByTagName('ul')[0];
118 if(!currentColumn.currentRow) {
119 raiseMouseEvent(currentColumn.firstChild,'click');
120 return;
121 }
122
123 var ob, evtType='click';
124 switch (evt.keyCode) {
125 case keyUp :
126 ob = currentColumn.currentRow.previousSibling;
127 break;
128 case keyDown :
129 ob = currentColumn.currentRow.nextSibling;
130 break;
131 case keyLeft :
132 var currentLevel = parseInt(currentColumn.parentNode.id.slice(6));
133 if (currentLevel) {
134 ob = document.getElementById('level-' + (currentLevel - 1)).firstChild;
135 if (ob.nodeType == 3) // text node
136 ob = ob.nextSibling
137 ob = ob.currentRow;
138 }
139 break;
140 case keyRight :
141 if(currentColumn.currentRow.className != 'folderish-selected')
142 return;
143 ob = document.getElementById('level-' + (parseInt(currentColumn.parentNode.id.slice(6)) + 1)).firstChild.firstChild;
144 break;
145 case keyEnter :
146 ob = currentColumn.currentRow;
147 evtType = 'dblclick'
148 break;
149 };
150 if (ob)
151 raiseMouseEvent(ob, evtType);
152 }
153
154 function resizeBrowser() {
155 var columns = finder.getElementsByTagName('ul');
156 var col;
157 for (var i=0 ; i<columns.length ; i++) {
158 col = columns[i];
159 col.style.height = getWindowHeight() - scrollbarPlaceholder_offset + "px";;
160
161 }
162 //document.body.style.width = getWindowWidth();
163 }
164
165 /* from fck default browser */
166 function GetUrlParam( paramName )
167 {
168 var oRegex = new RegExp( '[\?&]' + paramName + '=([^&]+)', 'i' ) ;
169 var oMatch = oRegex.exec( window.location.search ) ;
170
171 if ( oMatch && oMatch.length > 1 )
172 return unescape(oMatch[1]) ;
173 else
174 return '' ;
175 }
176
177
178
179 function populateBrowser(command, path) {
180 var prevColNum = finder.colCpt;
181 var level = -1;
182 for (var i = 0 ; i<path.length ; i++){
183 if (path.charAt(i) == '/')
184 level += 1;
185 }
186 level = level - baseDepth;
187
188 // prepare / cleanup columns
189 var cellLevel, startCleanup = 3;
190 switch (level) {
191 case 0 : // initialization case
192 startCleanup = 0;
193 cellLevel = document.getElementById('level-0');
194 cellLevel.style.width = cellWidth + "px";
195 // remove default content
196 cellLevel.removeChild(cellLevel.firstChild);
197
198 // cosmetic: display the second col with a scrollbar
199 var c1 = document.createElement('td');
200 c1.id = "level-1";
201 c1.style.width = cellWidth + "px";
202 c1.appendChild(document.createElement('ul'));
203 finderContent.appendChild(c1);
204
205 // cosmetic: display the third col without scrollbar
206 var c2 = document.createElement('td');
207 c2.id = "level-2";
208 c2.style.width = cellWidth + "px";
209 finderContent.appendChild(c2);
210 break;
211
212 case 1 :
213 cellLevel = document.getElementById("level-1");
214 cellLevel.removeChild(cellLevel.firstChild);
215 var c2 = document.getElementById("level-2");
216 var ul = c2.firstChild;
217 if (ul)
218 c2.removeChild(ul);
219 break;
220
221 case 2 :
222 cellLevel = document.getElementById("level-2");
223 var ul = cellLevel.firstChild;
224 if (ul) {
225 cellLevel.removeChild(ul);
226 }
227 break;
228
229 default :
230 cellLevel = document.getElementById("level-" + level);
231 if (!cellLevel) {
232 cellLevel = document.createElement('td');
233 cellLevel.id = "level-" + level;
234 cellLevel.style.width = cellWidth + "px";
235 finderContent.appendChild(cellLevel);
236 startCleanup = 0;
237 finder.colCpt += 1;
238 }
239 else {
240 cellLevel.removeChild(cellLevel.firstChild);
241 startCleanup = level + 1
242 }
243 }
244 if (startCleanup) {
245 var nextColumn = document.getElementById("level-" + startCleanup);
246 while (nextColumn) {
247 finderContent.removeChild(nextColumn);
248 finder.colCpt -= 1;
249 nextColumn = document.getElementById("level-" + ++startCleanup);
250 }
251 }
252
253 // request
254 var req = new XMLHttpRequest();
255 req.open("POST", sConnUrl, false); // synchrone
256 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
257 req.send("command=" + command + "&path="+escape(path) + "&Type=" + ressourceType);
258 var respDom = req.responseXML.documentElement;
259
260
261 var list = document.createElement('UL');
262 list.style.height= getWindowHeight() - scrollbarPlaceholder_offset + "px";
263 cellLevel.appendChild(list);
264
265 switch (respDom.tagName) {
266 case 'ls' :
267 // import listing
268 var rows = respDom.getElementsByTagName('row');
269 var row, listItem, icon;
270
271 for (var i = 0 ; i<rows.length ; i++){
272 row = rows[i];
273 listItem = document.createElement('li');
274 if (row.getAttribute('folderish') != "0")
275 listItem.className = 'folderish';
276 else
277 listItem.className = 'contentish';
278
279 icon = document.createElement('img');
280 with (icon) {
281 src = row.getAttribute('icon');
282 width = "16";
283 height = "16";
284 border = "0";
285 }
286
287 listItem.path = row.getAttribute('path');
288 listItem.link = row.getAttribute('link');
289 listItem.appendChild(icon);
290 listItem.appendChild(document.createTextNode(row.firstChild.nodeValue));
291 list.appendChild(listItem);
292 }
293 break;
294 case 'info' :
295 var li = document.createElement('li');
296 list.appendChild(li);
297 li.innerHTML = respDom.firstChild.nodeValue;
298
299 // add create link button
300 li = document.createElement('li');
301 li.style.textAlign = 'center';
302 var createLinkBtn = document.createElement('button');
303 var text = (ressourceType == 'Image') ? 'Insert' : 'Create link';
304 createLinkBtn.appendChild(document.createTextNode(text));
305
306 createLinkBtn.onclick = function(){
307 var url = respDom.lastChild.firstChild.nodeValue;
308 switch(window.parent.name) {
309 case 'PlinnImageDialog' :
310 window.parent.updateOrInsertImage(url);
311 break;
312 case 'StandaloneBrowser' :
313 window.opener.SetUrl(url);
314 break;
315 default:
316 var funcNum = GetUrlParam('CKEditorFuncNum');
317 window.opener.CKEDITOR.tools.callFunction(funcNum, url);
318 break;
319 }
320 window.close();
321 };
322
323 list.appendChild(li);
324 li.appendChild(createLinkBtn);
325 break;
326 }
327
328 if (prevColNum != finder.colCpt) {
329 var finderWidth = finder.colCpt * cellWidth;
330 finder.style.width = finderWidth + "px";
331 if (finder.colCpt - prevColNum > 0) {
332 var start = (window.scrollX) ? window.scrollX : document.body.scrollLeft;
333 var stop = finder.colCpt * cellWidth - getWindowWidth();
334 smoothScroll(start, stop);
335 }
336 }
337 }
338
339 function smoothScroll(start, stop) {
340 start += scrollXStep;
341 window.scroll(start, 0);
342 if (start < stop) {
343 setTimeout('smoothScroll(' + start + ', ' + stop + ')', scrollTimeStep);
344 }
345 }
346
347
348 // ]]>
349 </script>
350 </head>
351 <body>
352 <table id="finder" cellspacing="0">
353 <tr id="finderContent">
354 <td id="level-0"><ul>
355 <li class="folderish">Folder</li>
356 <li class="contentish">Content</li>
357 </ul>
358 </td>
359 </tr>
360 </table>
361 </body>
362 </html>