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                                                                 window.opener.SetUrl(url);
 307                                                                 break;
 308                                             }
 309                                             window.close();
 310                                         };
 311
 312                                         list.appendChild(li);
 313                                         li.appendChild(createLinkBtn);
 314                                         break;
 315                         }
 316
 317                         if (prevColNum != finder.colCpt) {
 318                                 var finderWidth = finder.colCpt * cellWidth;
 319                                 finder.style.width = finderWidth + "px";
 320                                 if (finder.colCpt - prevColNum > 0) {
 321                                         var start = (window.scrollX) ? window.scrollX : document.body.scrollLeft;
 322                                         var stop = finder.colCpt * cellWidth - getWindowWidth();
 323                                         smoothScroll(start, stop);
 324                                 }
 325                         }
 326                 }
 327
 328                 function smoothScroll(start, stop) {
 329                         start += scrollXStep;
 330                         window.scroll(start, 0);
 331                         if (start < stop) {
 332                                 setTimeout('smoothScroll(' + start + ', ' + stop + ')', scrollTimeStep);
 333                         }
 334                 }
 335
 336
 337                 // ]]>
 338                 </script>
 339         </head>
 340         <body>
 341         <table  id="finder" cellspacing="0">
 342         <tr id="finderContent">
 343         <td id="level-0"><ul>
 344                         <li class="folderish">Folder</li>
 345                         <li class="contentish">Content</li>
 346                 </ul>
 347         </td>
 348         </tr>
 349         </table>
 350   </body>
 351 </html>