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
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>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment