From 5ac201dc834664989b04da9b28fc44bcd84874da Mon Sep 17 00:00:00 2001 From: Robin Date: Mon, 29 Mar 2010 15:25:00 +0200 Subject: [PATCH 1/2] most of the ajax frontend works in IE now (IE8 not sure about other versions) --- js/lib_ajax.js | 11 +++++++++++ js/lib_files.js | 15 +++++++++------ 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/js/lib_ajax.js b/js/lib_ajax.js index 9997942251..28062e6653 100644 --- a/js/lib_ajax.js +++ b/js/lib_ajax.js @@ -21,10 +21,21 @@ //The callBack object provides an easy way to pass a member of an object as callback parameter and makes sure that the 'this' is always set correctly when called. callBack=function(func,obj){ + this.id=callBack.callBacks.length; + callBack.callBacks[this.id]=this; this.func=func; this.obj=obj; } +callBack.callBacks=Array(); + +callBack.call=function(id,arg1,arg2,arg3,arg4,arg5,arg6,arg7,arg8,arg9,arg10){ + callback=callBack.callBacks[id]; + if(callback){ + callback.func.call(callback.obj,arg1,arg2,arg3,arg4,arg5,arg6,arg7,arg8,arg9,arg10); + } +} + callBack.prototype=function(arg1,arg2,arg3,arg4,arg5,arg6,arg7,arg8,arg9,arg10){ this.call(false,arg1,arg2,arg3,arg4,arg5,arg6,arg7,arg8,arg9,arg10); } diff --git a/js/lib_files.js b/js/lib_files.js index 2b2c566506..466bf2f676 100644 --- a/js/lib_files.js +++ b/js/lib_files.js @@ -30,7 +30,8 @@ OC_FILES.getdirectorycontent_parse=function(req){ files['max_upload']=dir.getAttribute('max_upload'); var fileElements=response.getElementsByTagName('file'); if(fileElements.length>0){ - for(index in fileElements){ + for(index=0;index=1){ item.oldContent[item.oldContent.length]=item.firstChild; From e658a0025895d5aecc2c067234c5120cc21a63a2 Mon Sep 17 00:00:00 2001 From: Robin Date: Mon, 29 Mar 2010 21:49:11 +0200 Subject: [PATCH 2/2] show file actions in a dropdown menu --- css/default.php | 66 ++++++++++++- img/arrow_down.png | Bin 0 -> 134 bytes inc/lib_base.php | 2 +- inc/templates/header.php | 4 +- js/lib_files.js | 199 ++++++++++++++++++++++++++------------- js/lib_xmlloader.js | 25 ++--- 6 files changed, 211 insertions(+), 85 deletions(-) create mode 100755 img/arrow_down.png diff --git a/css/default.php b/css/default.php index 8d10b89cab..6ab515cca7 100755 --- a/css/default.php +++ b/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; } \ No newline at end of file diff --git a/img/arrow_down.png b/img/arrow_down.png new file mode 100755 index 0000000000000000000000000000000000000000..0e0ab3c4c0835db1e3bd767b9684248f544a9a3a GIT binary patch literal 134 zcmeAS@N?(olHy`uVBq!ia0vp^oFL4>1|%O$WD@{!3OpiM0~ECI zba4!kn7X##l8-?_fGPdH_4|i=v$J)sNMvd#$gE(P^P?xK2AE3X9I-JH06 e<$SZ)z0!JoYT;eFH(h{cFnGH9xvX'); + echo(''); echo(''); if($_SERVER['SCRIPT_NAME']==$WEBROOT.'/index.php') echo(''); else echo(''); diff --git a/inc/templates/header.php b/inc/templates/header.php index 2035aba538..ec71468458 100755 --- a/inc/templates/header.php +++ b/inc/templates/header.php @@ -6,8 +6,8 @@ - - + + 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); } diff --git a/js/lib_xmlloader.js b/js/lib_xmlloader.js index 14fd3ee8af..ce6fd824fc 100644 --- a/js/lib_xmlloader.js +++ b/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); } } },