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