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