show file actions in a dropdown menu

css/default.php

@@ -2,7 +2,10 @@
 header('Content-Type: text/css');
 require_once('../inc/lib_base.php');
 ?>
-body {background-color: #F9F9F9;}
+body {
+    background-color: #F9F9F9;
+    margin:0px;
+}
 body.error {background-color: #F0F0F0;}
 body,th,td,ul,li,a,div,p,pre {color:#333333; font-family:Verdana,"Bitstream Vera Sans",Arial,Helvetica,Sans,"Bitstream Vera Serif"; font-size:9.0pt;}
 
@@ -28,7 +31,10 @@ td {
 }
 
 div#nav {
-  margin-bottom:2em;
+  width:100%;
+  background-color: #EEEEEE;
+  padding:0px;
+  margin:0px;
 }
 
 a#owncloud-logo {
@@ -44,7 +50,7 @@ a#owncloud-logo span {
   display:none;
 }
 
-.nametext a {color:#333333; font-size:8pt; font-weight:bold; text-decoration:none;}
+.nametext a, .breadcrumb a{color:#333333; font-size:8pt; font-weight:bold; text-decoration:none;}
 .errortext {color:#CC3333; font-size:9pt; font-weight:bold; text-decoration:none;}
 .highlighttext {color:#333333; font-size:9pt; font-weight:bold; text-decoration:none;}
 .datetext {color:#333333; font-size:7pt;}
@@ -134,4 +140,58 @@ a#owncloud-logo span {
     padding:0px;
     border:0px;
     //do not use display:none here, it breaks iframes in some browsers
+}
+
+div.OCNotification{
+    background:#0c285a;
+    color:white;
+    border:white solid 1px;
+    padding:1px;
+    margin:4px;
+    min-width:200px;
+}
+div.OCNotificationHolder{
+    right:20px;
+    bottom:0px;
+    position:absolute;
+    color:white;
+}
+
+td img.file_actions{
+    cursor:pointer;
+    height:0px;
+    width:9px;
+}
+
+td:hover img.file_actions{
+    height:auto;
+}
+
+td img.rename, td img.delete{
+    height:0px;
+    width:16px;
+    cursor:pointer;
+}
+
+td:hover img.rename, tr:hover img.delete{
+    height:16px;
+}
+
+div.breadcrumb{
+   background-color: #F0F0F0; 
+}
+
+div.fileactionlist{
+    position:absolute;
+    background-color: #DDDDDD;
+    margin-top:5px;
+    border:1px black solid;
+}
+
+div.fileactionlist td{
+    cursor:pointer;
+}
+
+div.fileactionlist td:hover{
+    background-color: #CCCCCC;
 }

inc/lib_base.php

@@ -195,7 +195,7 @@ class OC_UTIL {
   public static function shownavigation(){
     global $WEBROOT;
     global $SERVERROOT;
-    echo('<table cellpadding="5" cellspacing="0" border="0"><tr>');
+    echo('<table class="center" cellpadding="5" cellspacing="0" border="0"><tr>');
     echo('<td class="navigationitem1"><a href="'.$WEBROOT.'/">'.$_SESSION['username'].'</a></td>');
     if($_SERVER['SCRIPT_NAME']==$WEBROOT.'/index.php') echo('<td class="navigationitemselected"><a href="'.$WEBROOT.'/">Files</a></td>'); else echo('<td class="navigationitem"><a href="'.$WEBROOT.'/">Files</a></td>');
 

inc/templates/header.php

@@ -6,8 +6,8 @@
 	<base href="<?php echo($WEBROOT); ?>/"/>
 	<link rel="stylesheet" type="text/css" href="css/default.php"/>
 	<script type='text/ecmascript' src='<?php echo($WEBROOT)?>/js/lib_ajax.js'></script>
-<!-- 	<script type='text/ecmascript' src='<?php echo($WEBROOT)?>/js/timer.js'></script> -->
-<!-- 	<script type='text/ecmascript' src='<?php echo($WEBROOT)?>/js/notification.js'></script> -->
+	<script type='text/ecmascript' src='<?php echo($WEBROOT)?>/js/lib_timer.js'></script>
+	<script type='text/ecmascript' src='<?php echo($WEBROOT)?>/js/lib_notification.js'></script>
 	<script type='text/ecmascript' src='<?php echo($WEBROOT)?>/js/lib_xmlloader.js'></script>
 	<script type='text/ecmascript' src='<?php echo($WEBROOT)?>/js/lib_files.js'></script>
 <?php

js/lib_files.js

@@ -84,6 +84,9 @@ OC_FILES.showbrowser_callback=function(content){
     var td=null;
     var img=null;
     
+    body=document.getElementsByTagName('body').item(0);
+    body.setAttribute('onclick',body.getAttribute('onclick')+' ; OC_FILES.hideallactions()');
+    
     //remove current content;
     var contentNode=document.getElementById('content');
     if(contentNode.hasChildNodes()){
@@ -92,12 +95,13 @@ OC_FILES.showbrowser_callback=function(content){
        }
     }
     
+    var browser=document.createElement('div');
+    browser.className='center';
+    var table=document.createElement('table');
+    browser.appendChild(table);
+    
     // breadcrumb
     if(dirs.length>0) {
-       var breadcrumb=document.createElement('div');
-       breadcrumb.className='center';
-       var table=document.createElement('table');
-       breadcrumb.appendChild(table);
        table.setAttribute('cellpadding',2);
        table.setAttribute('cellspacing',0);
        var tbody=document.createElement('tbody');//some IE versions need this
@@ -106,7 +110,8 @@ OC_FILES.showbrowser_callback=function(content){
        tbody.appendChild(tr);
        td=document.createElement('td');
        tr.appendChild(td);
-       td.className='nametext';
+       td.setAttribute('colspan','6');
+       td.className='breadcrumb';
        var a=document.createElement('a');
        td.appendChild(a);
        a.setAttribute('href','#');
@@ -117,9 +122,9 @@ OC_FILES.showbrowser_callback=function(content){
           d=dirs[index];
           currentdir+='/'+d;
           if(d!=''){
-             td=document.createElement('td');
-             tr.appendChild(td);
-             td.className='nametext';
+//              td=document.createElement('td');
+//              tr.appendChild(td);
+//              td.className='breadcrumb';
              a=document.createElement('a');
              td.appendChild(a);
              a.setAttribute('href','#'+currentdir);
@@ -130,15 +135,9 @@ OC_FILES.showbrowser_callback=function(content){
              a.appendChild(document.createTextNode(' ' +d));
           }
       }
-      contentNode.appendChild(breadcrumb);
     }
 
     // files and directories
-    var files=document.createElement('div');
-    OC_FILES.browser=files;
-    files.className='center';
-    var table=document.createElement('table');
-    files.appendChild(table);
     table.setAttribute('cellpadding',6);
     table.setAttribute('cellspacing',0);
     table.className='browser';
@@ -162,20 +161,28 @@ OC_FILES.showbrowser_callback=function(content){
          td.appendChild(input);
          td=document.createElement('td');
          tr.appendChild(td);
-         td.className='nametext';
-         td.setAttribute('name','name');
-         td.appendChild(document.createTextNode('name'))
-         sizeTd=document.createElement('td');
-         tr.appendChild(sizeTd);
-         sizeTd.className='sizetext';
-         sizeTd.appendChild(document.createTextNode('size'));
-         td=document.createElement('td');
-         tr.appendChild(td);
-         td.className='sizetext';
-         td.appendChild(document.createTextNode('date'));
-       for(index in content){
+         td.setAttribute('colspan','4');
+         dropdown=document.createElement('select');
+         td.appendChild(dropdown);
+         dropdown.setAttribute('id','selected_action');
+         for(index in this.actions_selected){
+            if(this.actions_selected[index].call){
+                option=document.createElement('option');
+                dropdown.appendChild(option);
+                option.setAttribute('value',index);
+                option.appendChild(document.createTextNode(index));
+            }
+         }
+         td.appendChild(document.createTextNode(' selected. '));
+         button=document.createElement('button');
+         td.appendChild(button);
+         button.appendChild(document.createTextNode('Go'));
+         button.setAttribute('onclick','OC_FILES.action_selected()');
+         for(index in content){
           file=content[index];
           if(file.name){
+             file.name=file.name.replace('\'','');
+             OC_FILES.files[file['name']]=new OC_FILES.file(dir,file['name'],file['type']);
              tr=document.createElement('tr');
              tbody.appendChild(tr);
              tr.className='browserline';
@@ -209,52 +216,20 @@ OC_FILES.showbrowser_callback=function(content){
              a=document.createElement('a');
              img=document.createElement('img');
              td.appendChild(img);
-             img.className='rename';
-             img.alt='rename'
-             img.title='rename';
-             img.src=WEBROOT+'/img/icons/rename.png';
-             img.setAttribute('onclick','OC_FILES.rename(\''+dir+'\',\''+file['name']+'\')')
+             img.className='file_actions';
+             img.alt=''
+             img.title='actions';
+             img.src=WEBROOT+'/img/arrow_down.png';
+             img.setAttribute('onclick','OC_FILES.showactions(\''+file['name']+'\')')
              td=document.createElement('td');
              tr.appendChild(td);
              td.className='sizetext';
              td.appendChild(document.createTextNode(file['date']));
-             if(file['type']!='dir'){
-                td=document.createElement('td');
-                tr.appendChild(td);
-                img=document.createElement('img');
-                td.appendChild(img);
-                img.className='delete';
-                img.alt='delete'
-                img.title='delete';
-                img.src=WEBROOT+'/img/icons/delete.png';
-                img.setAttribute('onclick','OC_FILES.remove(\''+dir+'\',\''+file['name']+'\')')
-             }
           }
        }
     }
-    tr=document.createElement('tr');
-    tbody.appendChild(tr);
-    tr.className='utilrow';
     td=document.createElement('td');
     tr.appendChild(td);
-    td.setAttribute('colspan','6');
-    dropdown=document.createElement('select');
-    td.appendChild(dropdown);
-    dropdown.setAttribute('id','selected_action');
-    for(index in this.actions_selected){
-        if(this.actions_selected[index].call){
-            option=document.createElement('option');
-            dropdown.appendChild(option);
-            option.setAttribute('value',index);
-            option.appendChild(document.createTextNode(index));
-        }
-    }
-    td.appendChild(document.createTextNode(' selected. '));
-    button=document.createElement('button');
-    td.appendChild(button);
-//     button.type='button';
-    button.appendChild(document.createTextNode('Go'));
-    button.setAttribute('onclick','OC_FILES.action_selected()');
     tr=document.createElement('tr');
     tbody.appendChild(tr);
     tr.className='utilrow';
@@ -263,7 +238,7 @@ OC_FILES.showbrowser_callback=function(content){
     td.className='upload';
     td.setAttribute('colspan','6');
     this.showuploader(dir,td,content['max_upload']);
-    contentNode.appendChild(files);
+    contentNode.appendChild(browser);
 }
 
 OC_FILES.showuploader=function(dir,parent,max_upload){
@@ -298,9 +273,7 @@ OC_FILES.upload=function(dir){
    var max_upload=document.getElementById('max_upload').value;
    if(fileSelector.files && fileSelector.files[0].fileSize){
        var size=fileSelector.files[0].fileSize
-//        new OCNotification('size: '+size,1000);
        if(size>max_upload){
-//            new OCNotification('Chosen file is to large',20000);
            return false;
        }
    }
@@ -313,7 +286,6 @@ OC_FILES.upload_callback=function(dir){
 
 OC_FILES.rename=function(dir,file){
    var item=document.getElementById(file);
-//    item=item.item(0);
    item.oldContent=Array();
    if(item.hasChildNodes()){
       while(item.childNodes.length >=1){
@@ -430,6 +402,98 @@ OC_FILES.actions_selected['delete']=function(){
     }
 }
 
+OC_FILES.files=Array();
+
+OC_FILES.file=function(dir,file,type){
+    this.type=type;
+    this.file=file;
+    this.dir=dir;
+    this.actions=new Object();
+    this.extention=file.substr(file.indexOf('.'));
+    for(index in OC_FILES.fileActions.all){
+        if(OC_FILES.fileActions.all[index].call){
+            this.actions[index]=OC_FILES.fileActions.all[index];
+        }
+    }
+    if(OC_FILES.fileActions[this.extention])
+    for(index in OC_FILES.fileActions[this.extention]){
+        if(OC_FILES.fileActions[this.extention][index].call){
+            this.actions[index]=OC_FILES.fileActions[this.extention][index];
+        }
+    }
+}
+
+OC_FILES.file.prototype.showactions=function(){
+    OC_FILES.showactions(this.file);
+}
+
+OC_FILES.file.prototype.hideactions=function(){
+    OC_FILES.showactions(this.file,true);
+}
+
+OC_FILES.fileActions=new Object();
+
+OC_FILES.fileActions.all=new Object();
+
+OC_FILES.fileActions.all.remove=function(){
+    OC_FILES.remove(this.dir,this.file);
+}
+OC_FILES.fileActions.all.rename=function(){
+    OC_FILES.rename(this.dir,this.file);
+}
+OC_FILES.fileActions.all.download=function(){
+    window.location=WEBROOT+'/files/get_file.php?dir='+this.dir+'&files='+this.file;
+}
+
+OC_FILES.showactions=function(file,hide){
+    node=document.getElementById(file);
+    if(node.actionsshown || hide){
+        if(node.actionsdiv){
+            node.removeChild(node.actionsdiv);
+        }
+        node.actionsdiv=null;
+        node.actionsshown=false
+    }else{
+//         OC_FILES.hideallactions();
+        node.actionsshown=true
+        div=document.createElement('div');
+        node.actionsdiv=div;
+        div.className='fileactionlist';
+        table=document.createElement('table');
+        div.appendChild(table);
+        tbody=document.createElement('tbody');
+        table.appendChild(tbody);
+        actions=OC_FILES.files[file].actions;
+        for(name in actions){
+            if(actions[name].call){
+                tr=document.createElement('tr');
+                tbody.appendChild(tr);
+                td=document.createElement('td');
+                tr.appendChild(td);
+                a=document.createElement('a');
+                td.appendChild(a);
+                a.appendChild(document.createTextNode(name));
+                td.setAttribute('onclick','OC_FILES.files[\''+file+'\'].actions[\''+name+'\'].call(OC_FILES.files[\''+file+'\'])');
+            }
+        }
+        node.appendChild(div);
+        OC_FILES.hideallenabled=false;
+        setTimeout('OC_FILES.hideallenabled=true',50);
+    }
+}
+
+OC_FILES.hideallactions=function(){
+    if(OC_FILES.hideallenabled){
+        for(name in OC_FILES.files){
+            if(OC_FILES.files[name].hideactions){
+                OC_FILES.files[name].hideactions.call(OC_FILES.files[name]);
+            }
+        }
+    }
+}
+
+OC_FILES.hideallenabled=true; //used to prevent browsers from hiding actionslists right after they are displayed;
+
 sizeFormat=function(size){
     var orig=size;
     var steps=Array('B','KiB','MiB','GiB','TiB');
@@ -438,7 +502,6 @@ sizeFormat=function(size){
         step++;
         size=size/1024;
     }
-//     size=orig/(1024^(step+1));//recalculate the size in one time to minimalize rounding errors;
     if(size.toFixed){
         size=size.toFixed(2);
     }

js/lib_xmlloader.js

@@ -49,19 +49,22 @@ OCXMLLoader.prototype={
       request=(request)?request:"";
       method=this.method;
       contentType=(!this.contentType && method=="POST")?"application/x-www-form-urlencoded":this.contentType;
-      if(window.XDomainRequest){
-         req=new XDomainRequest();
-      }else if(window.XMLHttpRequest){
+      if(window.XMLHttpRequest){
          req=new XMLHttpRequest();
+      }else if(window.XDomainRequest){
+         req=new XDomainRequest();
       }else if(window.ActiveXObject){
          req=new ActiveXObject('Microsoft.XMLHTTP')
       }
       if (req){
+         this.req=req;
          try{
-            var loader=this;
-            req.onreadystatechange=function(){
-               loader.onReadyState.call(loader,req)
-            }
+//             var loader=this;
+//             req.onreadystatechange=function(){
+//                loader.onReadyState.call(loader,req)
+//             }
+            var callback=new callBack(this.onReadyState,this);
+            req.onreadystatechange=function(){eval('callBack.call('+callback.id+')');};
             req.open(method,url,this.async);
             if (contentType){
                req.setRequestHeader("Content-Type",contentType);
@@ -76,15 +79,15 @@ OCXMLLoader.prototype={
          }
       }
    },
-   onReadyState:function(req){
-      var ready=req.readyState;
+   onReadyState:function(){
+      var ready=this.req.readyState;
       if (ready==READY_STATE_COMPLETE){
          var HttpStatus=req.status;
          if (HttpStatus==200 || HttpStatus==0){
             //alert("response: "+this.req.responseText);
-            this.callBack(req);
+            this.callBack(this.req);
          }else{
-            this.errorCallBack(req);
+            this.errorCallBack(this.req);
          }
       }
    },