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                         console.log('dblclick !', li, window.parent);
  94                         switch(window.parent.name) {
  95                                 case 'PlinnImageDialog' :
  96                                         if (li.className == 'contentish-selected') {
  97                                                 window.parent.updateOrInsertImage(li.link);
  98                                                 window.close();
  99                                         }
 100                                         break;
 101                                 case 'StandaloneBrowser' :
 102                                         if (li.className == 'contentish-selected') {
 103                                                 window.opener.SetUrl(li.link);
 104                                                 window.close();
 105                                         }
 106                                         break;
 107                                 default :
 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>