Skip to content

GitLab

Commit cab377ce authored by Zéfling's avatar Zéfling 🎨
Browse files

Un arbre qui marche nickel 

Je me suis efforcé de faire en sorte que l'arbre fonctionnement parfaitement avec ce qui est en place :
- quand on clique sur une lien dans l'arbre ça l'ouvre (uniquement si il n'est pas ouvert)
- quand on clique sur la petite flèche blanche cela a le même effet
- quand on clique sur la petite flèche noire cela ferme la brache et si la liste des fichiers se trouve dans l'un des niveaux que l'on ferme ramène la liste est ramène au nœud que l'on ferme
- dans la liste des fichiers quand on double clic sur un dossier cela ouvre le nœud dans l'arbre uniquement si celui-ci n'est pas ouvert (pour éviter de les écrasements de sous-niveaux ouverts).

Je ne sais pas si je suis assez clair mais cela m'a demandé une sacrée dose de réflexion dans la logique de cet arbre :P

18/03/2008
parent 319f31d8
Hide whitespace changes
Inline Side-by-side
Showing with 454 additions and 41 deletions
Dossier.php
View file @ cab377ce
......@@ -7,31 +7,49 @@ class Dossier {
public $nbDossiers = 0;
public $nbFichiers = 0;
public $taille = 0;
public $limite = array();
public $scriptDraggable = '';
public $scriptDroppable = '';
public function __construct ($rep) {
public function __construct ($rep, $limite = array()) {
$this->rep = $rep;
$this->limite = $limite;
}
public function fermerDossier () {
$liste .= '<li'.$id.'><img src="icones/folder_'.$typeF.'.png" alt=""'.$onclickImg.'/><span'.$onclick.'>'.$f.'</span></li>';
}
public function lireDossier ($ret = 1) {
$rep = $this->rep;
if (!empty($rep)) {
$aRep = explode ('/', $rep);
$repCourant = $aRep[count($aRep)-1];
$rep .= '/';
$aRep = explode ('/', $rep);
$repCourant = $aRep[count($aRep)-1];
$rep .= '/';
} else {
$rep = './';
}
$dir = opendir($rep);
$liste = '';
while ($f = readdir($dir)) {
if(!is_file($rep.$f) && $f != '.' && $f != '..') {
$ouvrir = true;
if (count($this->limite) > 0) {
$ouvrir = false;
for($i =0; $i< count($this->limite); $i++) {
if ($this->limite[$i] == $f) {
$ouvrir = true;
}
}
}
if(!is_file($rep.$f) && $f != '.' && $f != '..' && $ouvrir) {
// test si il y a des sous dossiers
$ssDir = opendir($rep.$f.'/');
$ssDossier = false;
......@@ -41,25 +59,28 @@ class Dossier {
}
}
$md5 = md5($rep.$f);
// si il y a des sous-dossiers ou non
if ($ssDossier) {
$id = ' id="'.$rep.$f.'"';
$onclick = ' onclick="xajax_arbreDossierOuvrir(\''.$rep.$f.'\');return false;"';
$id = ' id="d-'.$md5.'"';
$onclick = ' onclick="xajax_arbreDossierOuvrir(\''.$md5.'\', \''.addslashes($rep.$f).'\', 1);"';
$typeF = 'close';
$onclickImg = ' onclick="xajax_arbreDossierOuvrir(\''.$rep.$f.'\');"';
$onclickImg = ' onclick="xajax_arbreDossierOuvrir(\''.$md5.'\', \''.addslashes($rep.$f).'\');"';
} else {
$id = '';
$onclick = ' onclick="xajax_afficherDossier(\''.$rep.$f.'\');return false;"';
$onclick = ' onclick="xajax_afficherDossier(this.title);"';
$typeF = 'none';
$onclickImg = '';
}
$liste .= '<li'.$id.'><img src="icones/folder_'.$typeF.'.png" alt=""'.$onclickImg.'/><a href=""'.$onclick.'>'.$f.'</a></li>';
$liste .= '<li'.$id.'><img src="icones/folder_'.$typeF.'.png" alt="fermé" id="i-'.$md5.'" '.$onclickImg.'/><span'.$onclick.' id="l-'.$md5.'" title="'.addslashes($rep.$f).'" >'.$f.'</span></li>';
}
}
closedir($dir);
return (($ret == 1) ? '<img src="icones/folder_open.png" alt="" onclick="xajax_arbreDossierFermer(\''.$rep.$f.'\');" /><a href="" onclick="xajax_afficherDossier(\''.$rep.$f.'\');return false;">'.$repCourant.'</a>' : '').'<ul id="'.$rep.'">'.$liste.'</ul>';
$md5 = md5(substr($rep.$f, 0, -1));
return (($ret == 1) ? '<img alt="ouvert" id="i-'.$md5.'" src="icones/folder_open.png" alt="" onclick="arbreDossierFermer(\''.addslashes(substr($rep, 0, -1)).'\');" /><span id="l-'.$md5.'" onclick="xajax_afficherDossier(\''.substr($rep.$f, 0, -1).'\');return false;">'.$repCourant.'</span>' : '').'<ul>'.$liste.'</ul>';
/*Droppables.add('panier',
{accept:'products',
......@@ -104,7 +125,7 @@ class Dossier {
$fileinfo = new FileInfo($rep, $f);
if (!is_file($rep.$f)) {
$liste .= '<div class="ligne_fichier" id="f-'.$md5.'" title="'.addslashes($rep.$f).'" onclick="testSelectionFichier(this)" ondblclick="xajax_arbreDossierOuvrir(\''.$rep.$f.'\')">';
$liste .= '<div class="ligne_fichier" id="f-'.$md5.'" title="'.addslashes($rep.$f).'" onclick="testSelectionFichier(this)" ondblclick="demandeDossierOuvrir(\''.$rep.$f.'\');">';
$nbDossiers++;
} else {
$liste .= '<div class="ligne_fichier" id="f-'.$md5.'" title="'.addslashes($rep.$f).'" onclick="testSelectionFichier(this)" >';
......
index.css
View file @ cab377ce
......@@ -36,6 +36,52 @@ body {
#tete{
width : 100%;
}
#barreIcones {
width:100%;
display: table;
height: 24px;
}
#barreIcones div {
display: table-cell;
}
#barreIcones span {
display: block;
height : 24px;
position:relative;
margin-top:-12px;
}
#barreIcones #precedent,#barreIcones #suivant, #barreIcones #parent {
width : 24px;
}
#barreIcones .boutonSuivantActif,
#barreIcones .boutonSuivantNonactif{
width : 24px;
background-image:url(interface/suivant.png);
background-position: 0% 0%;
}
#barreIcones .boutonSuivantNonactif{
background-position: 0% 100%;
}
#barreIcones .boutonPrecedentActive,
#barreIcones .boutonPrecedentNonactif {
width : 24px;
background-image:url(interface/precedent.png);
background-position: 0% 0%;
}
#barreIcones .boutonPrecedentNonactif {
background-position: 0% 100%;
}
#barreIcones .boutonParentActive,
#barreIcones .boutonParentNonactif {
width : 24px;
background-image:url(interface/ParentA.png);
background-position: 50% 50%;
}
#barreIcones .boutonParentNonactif {
background-image:url(interface/ParentD.png);
}
#chemin {
white-space: nowrap;
border-left : 1px solid #dbdbdb;
......@@ -70,10 +116,10 @@ body {
position: relative;
float:left;
}
#arbre li a{
padding : 0px 0px 0px 17px;
#arbre li span{
margin : 0px 0px 0px 17px;
}
#arbre li a:hover {
#arbre li span:hover {
text-decoration: underline;
color:#7a84d4;
}
......
index.js
View file @ cab377ce
......@@ -28,6 +28,53 @@ var fichiers = new Array();
var fichierCopie = new Array();
var couper = false;
var suivant = new Array ();
var courant = '';
var precedent = new Array ();
function cliqueDossier(adresse) {
if (courant != ''){
document.getElementById('l-'+hex_md5(courant)).style.backgroundColor = "transparent";
precedent[precedent.length] = courant;
}
courant = adresse;
document.getElementById('l-'+hex_md5(courant)).style.backgroundColor = "#dbeaff";
suivant = new Array ();
boutonSuivant(false);
if (courant == ''){
boutonPrecedent(true);
}
}
function dossierSuivant() {
}
function dossierPredent() {
}
function boutonSuivant(mode) {
if (mode) {
document.getElementById('suivant').innerHTML = '<span onclick="" onmouveover="" class="boutonSuivantActif" />';
} else {
document.getElementById('suivant').innerHTML = '<span class="boutonSuivantNonactif" />';
}
}
function boutonPrecedent(mode) {
if (mode) {
document.getElementById('precedent').innerHTML = '<span onclick="" onmouseover="" class="boutonPrecedentActive" />';
} else {
document.getElementById('precedent').innerHTML = '<span class="boutonPrecedentNonactif" />';
}
}
function boutonsStart() {
boutonSuivant(false);
boutonPrecedent(false);
}
var nombreDossiers = 0;
var nombreFichiers = 0;
......@@ -85,7 +132,47 @@ document.onkeyup = function () {
//document.getElementById('info').innerHTML = '...';
};
function trace () {
function arbreDossierFermer (rep) {
// test pour savoir si il faut actualiser le listage du dossier pour qu'il soit en cohérence avec l'arbre ouvert
var lrep = rep.split('/');
var lcur = courant.split('/');
var nbrLrep = lrep.length;
var nbrLcur = lcur.length;
var nbr = (nbrLcur < nbrLrep) ? nbrLcur : nbrLrep;
var i = 0;
while (i < nbr && lrep[i] == lcur[i]) {
i++;
}
if (i == nbr && nbrLrep < nbrLcur) {
xajax_afficherDossier(rep);
}
// destruction du nœud et mise en place des liens de réouverture
var repCourant = lrep[lrep.length-1];
var id = hex_md5(rep);
document.getElementById('d-'+id).innerHTML =
'<img onclick="xajax_arbreDossierOuvrir(\''+ id + '\', \'' + rep + '\');" alt="" src="icones/folder_close.png"/>'+
'<span id="l-'+hex_md5+'" title="' + rep + '" onclick="xajax_arbreDossierOuvrir(\''+ id + '\', \'' + rep + '\', 1);">'+ repCourant +'</span>';
}
function demandeDossierOuvrir(rep) {
var md5 = hex_md5(rep);
var type = document.getElementById('i-'+md5).alt;
if (type == 'fermé') {
xajax_arbreDossierOuvrir(md5, rep, 1);
} else {
xajax_afficherDossier(rep);
}
}
/*function trace () {
var nbrFichiers = fichiers.length;
var slt = '';
for(i=0; i < nbrFichiers; i++) {
......@@ -93,7 +180,7 @@ function trace () {
}
document.getElementById('info').innerHTML = slt;
}
}*/
function lister() {
var nbrFichiers = fichiers.length;
......@@ -130,11 +217,11 @@ function copierListeFichiers () {
}
alert(i);
}
function collerListeFichiers() {
xajax_coller(fichierCopie);
}
function testSelectionFichier (div) {
nom = div.id;
......@@ -142,7 +229,6 @@ function testSelectionFichier (div) {
if (!ctrl) {
var temp = fichiers;
nbrFichiers = temp.length;
//alert(nbrFichiers)
for(j=0; j < nbrFichiers; j++) {
if (temp[j] != nom) {
selectionFichier(temp[j], document.getElementById(temp[j]), false);
......@@ -163,7 +249,6 @@ function testSelectionFichier (div) {
if (selection) {
selectionFichier(nom, div, true);
}
//trace ();
}
function selectionFichier(nom, div, etat) {
......@@ -174,10 +259,8 @@ function selectionFichier(nom, div, etat) {
div.style.backgroundColor = "transparent";
var temp = new Array();
var nbrFichiers = fichiers.length;
//alert(nbrFichiers);
var j = 0;
for(i=0; i < nbrFichiers; i++){
//alert(nom+" != "+fichiers[i]);
if (nom != fichiers[i]) {
temp[j++] = fichiers[i];
}
......
index.php
View file @ cab377ce
......@@ -14,7 +14,7 @@ $xajax = new xajax(); //On initialise l'objet xajax
require_once('xajax.php');
$dossier = new Dossier('racine');
$dossier = new Dossier('', array('racine'));
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
......@@ -28,15 +28,21 @@ $dossier = new Dossier('racine');
<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
<script src="scriptaculous/src/dragdrop.js" type="text/javascript"></script>
<script src="md5.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
</head>
<body onload="xajax_arbreDossierOuvrir('racine');tailleFenetre();">
<body onload="boutonsStart();xajax_arbreDossierOuvrir('<?php echo md5('./racine'); ?>', './racine', 1);tailleFenetre();">
<div id="conteneur">
<div id="tete">
<div id="barreIcones"></div>
<div id="barreIcones">
<div id="precedent" title="Précédent">&nbsp;</div>
<div id="suivant" title="Suivant">&nbsp;</div>
<div id="parent" title="Dossier Parent">&nbsp;</div>
<div>&nbsp;</div>
</div>
<div id="chemin">&nbsp;</div>
<div id="info">...</div>
</div>
</div>
<div id="exploreur">
<div id="arbre"><?php echo $dossier->lireDossier (0) ?></div>
<div id="fichiers"></div>
......
md5.js 0 → 100644
View file @ cab377ce
/*
* A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
* Digest Algorithm, as defined in RFC 1321.
* Version 2.1 Copyright (C) Paul Johnston 1999 - 2002.
* Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
* Distributed under the BSD License
* See http://pajhome.org.uk/crypt/md5 for more info.
*/
/*
* Configurable variables. You may need to tweak these to be compatible with
* the server-side, but the defaults work in most cases.
*/
var hexcase = 0; /* hex output format. 0 - lowercase; 1 - uppercase */
var b64pad = ""; /* base-64 pad character. "=" for strict RFC compliance */
var chrsz = 8; /* bits per input character. 8 - ASCII; 16 - Unicode */
/*
* These are the functions you'll usually want to call
* They take string arguments and return either hex or base-64 encoded strings
*/
function hex_md5(s){ return binl2hex(core_md5(str2binl(s), s.length * chrsz));}
function b64_md5(s){ return binl2b64(core_md5(str2binl(s), s.length * chrsz));}
function str_md5(s){ return binl2str(core_md5(str2binl(s), s.length * chrsz));}
function hex_hmac_md5(key, data) { return binl2hex(core_hmac_md5(key, data)); }
function b64_hmac_md5(key, data) { return binl2b64(core_hmac_md5(key, data)); }
function str_hmac_md5(key, data) { return binl2str(core_hmac_md5(key, data)); }
/*
* Perform a simple self-test to see if the VM is working
*/
function md5_vm_test()
{
return hex_md5("abc") == "900150983cd24fb0d6963f7d28e17f72";
}
/*
* Calculate the MD5 of an array of little-endian words, and a bit length
*/
function core_md5(x, len)
{
/* append padding */
x[len >> 5] |= 0x80 << ((len) % 32);
x[(((len + 64) >>> 9) << 4) + 14] = len;
var a = 1732584193;
var b = -271733879;
var c = -1732584194;
var d = 271733878;
for(var i = 0; i < x.length; i += 16)
{
var olda = a;
var oldb = b;
var oldc = c;
var oldd = d;
a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);
d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);
c = md5_ff(c, d, a, b, x[i+ 2], 17, 606105819);
b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);
a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);
d = md5_ff(d, a, b, c, x[i+ 5], 12, 1200080426);
c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);
b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);
a = md5_ff(a, b, c, d, x[i+ 8], 7 , 1770035416);
d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);
c = md5_ff(c, d, a, b, x[i+10], 17, -42063);
b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162);
a = md5_ff(a, b, c, d, x[i+12], 7 , 1804603682);
d = md5_ff(d, a, b, c, x[i+13], 12, -40341101);
c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290);
b = md5_ff(b, c, d, a, x[i+15], 22, 1236535329);
a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);
d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);
c = md5_gg(c, d, a, b, x[i+11], 14, 643717713);
b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);
a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);
d = md5_gg(d, a, b, c, x[i+10], 9 , 38016083);
c = md5_gg(c, d, a, b, x[i+15], 14, -660478335);
b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);
a = md5_gg(a, b, c, d, x[i+ 9], 5 , 568446438);
d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);
c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);
b = md5_gg(b, c, d, a, x[i+ 8], 20, 1163531501);
a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);
d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);
c = md5_gg(c, d, a, b, x[i+ 7], 14, 1735328473);
b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734);
a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);
d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);
c = md5_hh(c, d, a, b, x[i+11], 16, 1839030562);
b = md5_hh(b, c, d, a, x[i+14], 23, -35309556);
a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);
d = md5_hh(d, a, b, c, x[i+ 4], 11, 1272893353);
c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);
b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640);
a = md5_hh(a, b, c, d, x[i+13], 4 , 681279174);
d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);
c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);
b = md5_hh(b, c, d, a, x[i+ 6], 23, 76029189);
a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);
d = md5_hh(d, a, b, c, x[i+12], 11, -421815835);
c = md5_hh(c, d, a, b, x[i+15], 16, 530742520);
b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);
a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);
d = md5_ii(d, a, b, c, x[i+ 7], 10, 1126891415);
c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905);
b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);
a = md5_ii(a, b, c, d, x[i+12], 6 , 1700485571);
d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);
c = md5_ii(c, d, a, b, x[i+10], 15, -1051523);
b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);
a = md5_ii(a, b, c, d, x[i+ 8], 6 , 1873313359);
d = md5_ii(d, a, b, c, x[i+15], 10, -30611744);
c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);
b = md5_ii(b, c, d, a, x[i+13], 21, 1309151649);
a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);
d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379);
c = md5_ii(c, d, a, b, x[i+ 2], 15, 718787259);
b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);
a = safe_add(a, olda);
b = safe_add(b, oldb);
c = safe_add(c, oldc);
d = safe_add(d, oldd);
}
return Array(a, b, c, d);
}
/*
* These functions implement the four basic operations the algorithm uses.
*/
function md5_cmn(q, a, b, x, s, t)
{
return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b);
}
function md5_ff(a, b, c, d, x, s, t)
{
return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
}
function md5_gg(a, b, c, d, x, s, t)
{
return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
}
function md5_hh(a, b, c, d, x, s, t)
{
return md5_cmn(b ^ c ^ d, a, b, x, s, t);
}
function md5_ii(a, b, c, d, x, s, t)
{
return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
}
/*
* Calculate the HMAC-MD5, of a key and some data
*/
function core_hmac_md5(key, data)
{
var bkey = str2binl(key);
if(bkey.length > 16) bkey = core_md5(bkey, key.length * chrsz);
var ipad = Array(16), opad = Array(16);
for(var i = 0; i < 16; i++)
{
ipad[i] = bkey[i] ^ 0x36363636;
opad[i] = bkey[i] ^ 0x5C5C5C5C;
}
var hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz);
return core_md5(opad.concat(hash), 512 + 128);
}
/*
* Add integers, wrapping at 2^32. This uses 16-bit operations internally
* to work around bugs in some JS interpreters.
*/
function safe_add(x, y)
{
var lsw = (x & 0xFFFF) + (y & 0xFFFF);
var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
return (msw << 16) | (lsw & 0xFFFF);
}
/*
* Bitwise rotate a 32-bit number to the left.
*/
function bit_rol(num, cnt)
{
return (num << cnt) | (num >>> (32 - cnt));
}
/*
* Convert a string to an array of little-endian words
* If chrsz is ASCII, characters >255 have their hi-byte silently ignored.
*/
function str2binl(str)
{
var bin = Array();
var mask = (1 << chrsz) - 1;
for(var i = 0; i < str.length * chrsz; i += chrsz)
bin[i>>5] |= (str.charCodeAt(i / chrsz) & mask) << (i%32);
return bin;
}
/*
* Convert an array of little-endian words to a string