1

ok, voila mon soucis, je suis en train de faire un "tree" en jquery, j'en suis à la mise en place d'un "fil de fer" symbolisant les répertoires,
pour le trait orizontal de chaque fichiers pas de soucis, mais le trait vertical est trop grand

forcement mettre un background-size : 1px calc(100% - 8px); ne fonctionne pas

j'ai testé de mettre un background-clip en content-box associé à divers padding sur les ul et li ca découpais le bg mais les padding décalais le reste ...

le bg vertical est sur le ul, l'horizontal sur les li

j'ai regardé un peu un script équivalent, lui utilise une très très grande image pour faire le trait vertical (et l'horizontal en même temps) j'aimerais éviter de faire la même chose et rester avec un "simple" bg

au passage si qq peu me dire comment utiliser un background-color en lieu et place du background-image mais qui utiliserais les positions et taille indiquées ça m'aiderais grandement
ul.jtree ul { background-repeat : no-repeat; background-position : 0 0; background-size : 1px 100%; background-image : url([url]img/icons/dot.png); } ul.jtree ul li { background-repeat : no-repeat; background-position : 0 8px; background-size : 10px 1px; background-image : url([url]img/icons/dot.png); }

bref si un guru du css pouvais me mettre la puce à l'oreille :- D

hFJY
et la le mec il le pécho par le bras et il lui dit '

2

j'ai finalement utilisé le fait que css3 autorise plusieurs background, bref j'ai positionné un second bg de la couleur de fond, positionné depuis le bas et avec une taille y de 8px

DT7Q

si qq peu me dire comment éviter ce bidouillage, ou du moins éviter l'utilisation d'images de 1px et spécifier plutôt une couleur je lui en serais gré ^^
et la le mec il le pécho par le bras et il lui dit '

3

quel monde de merde, dire que je trouvais que le graphiste avais de la chance de pas être dev, la qu'il est en vacance je pense le contraire tongue

eXvb

bon je vais trifouiller les sélecteurs css pour essayer de détecter ce cas particulier cheeky
et la le mec il le pécho par le bras et il lui dit '

4

quel bordel, impossible en css pur, obligé de rajouter du jquery testant au clic d'un répertoire si c'est le dernier élément de la liste actuelle ...

bsbZ
et la le mec il le pécho par le bras et il lui dit '

5

Excuse-moi de t'interrompre dans ton topic, mais graphiquement, si le trait vertical démarrait deux ou trois pixels plus bas et vers la gauche, ça serait pas un peu plus joli ? cheeky

6

Excuse-moi de t'interrompre dans ton topic
yaronet n'est pas un blog confus

non bien au contraire, je suis ouvert à tout, c'est pas pour rien que je poste, même si au début c'étais du fait que j'avais qq soucis en dehors de mes attributions classiques ^^

j'ai fait les modif que tu as préconisées, oui c'est bien mieux :- )
et la le mec il le pécho par le bras et il lui dit '

7

hey, c'était de l'humour m'sieur grin
Et c'est plus joli à mon goût aussi happy

8

moi aussi c'étais de l'humour cheeky
même si des fois mes threads en monologue me font penser à un blog embarrassed

oui c'est plus jolie, reste néanmoins encore qq soucis d'animations ^^

je vais aussi essayer de dégager la bidouille du second background blanc du bas

puis transformer le code en vrai plugin jquery et y implémenter moult callbacks et autre trucs manquants dans les scripts similaires
et la le mec il le pécho par le bras et il lui dit '

9

r043v (./4) :
testant au clic d'un répertoire si c'est le dernier élément de la liste actuelle ...


y a pas un selecteur CSS pour ca ? :last ou un truc du genre ?
Ancien pseudo : lolo

10

si, mais en css pur, je trouve que des choses manques (ou du moins je n'ai pas trouvé) par exemple je peu sélectionner le dernier li de mes listes, ok, par contre je doit tester la classe de son span pour savoir si c'est un répertoire ouvert, donc ul li:last-child span.folder-open mais de la comment "remonter" dans le dom et pouvoir sélectionner les parents ? ici en l’occurrence je veut toucher le ul[nosmile]
et forcement un truc comme çà c'etais trop cher à inclure dans la norme : ul li:last-child span.folder-opentonguearenttonguearent

une fois le ul sélectionné, le vrai soucis etais de changer la taille du bg, et le css pour ca ne prend que des px ou %, depuis le haut ou le bas
il faut calculer la taille en px suivant l'index et la hauteur du li span.folder-open

calc() ne fonctionnant pas, déjà ça par mal ^^ et l'index d'un élément est visiblement impossible à récupérer depuis css sad

encore une fois permettre des choses comme ça c'etais trop cher : ul li:last-child span.folder-opentonguearenttonguearent { background-size-y: (li:last-child span).index * (li:last-child span).height; }

voila c'etais mon coup de gueule du jour face à un langage bien mais qui n'à pas été pensé pour les dev du tout, qui pourrais être 100 fois mieux et puissant et qui ne le sera pas de si tôt, et surement jamais


bref je vais tout reprendre et, je pense, faire le bg vertical et horizontal dans les li directement, les taille devrais se calculer directement sans devoir placer du jquery nulle part, sauf pour le dernier li qui devra être bridé, soit avec du calcul, soit avec la bidouille du second bg de la couleur de fond ^^
et la le mec il le pécho par le bras et il lui dit '

11

[nosmile]qq aurais une meilleure alternative que ca pour evincer les span ayant un ul à coté ?

forcement $(this).find('span:not(+ul)'); ni $(this).find('span').not("span+ul"); ne fonctionnent sad

var t = $(this);
var folder = t.find('span + ul').siblings('span');
return t.find('span').not(folder);
et la le mec il le pécho par le bras et il lui dit '

12

[nosmile]c'est un truc de ouf la création d'addon jquery ^^
	$.fn.jtreeChildFolder = function()
	{	var obj = $(); this.each(function(){ obj = obj.add($(this).siblings("ul")); }); return obj;
	}
var opt = { autoToggle:true,multiFolder:false,iconFolder:"[url]img/icons/" };
var tree = $("ul.jtree").jtree(opt);
tree.jtreeFolders().jtreeChildFolder().css("backgroundColor","red");
tree.jtreeFiles().css("color","yellow").jtreeParentFolder().css("backgroundColor","green");

QEtj

edit : et de se prendre la tête pour rien aussi grin
$.fn.jtreeChildFolder = function()
	{	return $(this).siblings("ul");
	}
; return obj; }
 est pareil que :$.fn.jtreeChildFolder = function()
	{	var obj = $(); this.each(function(){ obj = obj.add($(this).siblings("ul")); })
et la le mec il le pécho par le bras et il lui dit '

13

version alpha du plugin http://jtree.tk

options du plugin :

autoToggle : true/false // le plugin doit 'il gérer lui même les ouvertures et fermetures ?
multiFolder : true/false // fermeture automatique des autres répertoires du même niveau, j'ai pas encore codé le calcul du fil de fer, donc il y aura des bug graphique si à true
iconFolder // le repertoire, depuis l'endroit actuel ou se trouve les icones
icons: [ { icon:"images.png", ext:[ "jpg","jpeg","gif","png","bmp" ] },{ icon:"page_code.png", ext:[ "htm","html","php","txt" ] } ] // les icones à utiliser en fonction des extensions
openSpeed // vitesse d'ouverture des répertoires en ms
closeSpeed // vitesse de fermeture
icon // nom de fichier de l'icône par défaut

api

// création du "tree"
$.jtree(options)

// récupération de tous les répertoires
$.jtreeFolders()

// récupération de tous les fichiers
$.jtreeFiles()

// récupération de tout, fichier et rep
$.jtreeAll()

// le répertoire courant est il ouvert ?
$.jtreeOpened()

// ferme un répertoire
$.jtreeClose(options)

// ouvre un répertoire
$.jtreeOpen(options)

// inverse l'état d'un répertoire
$.jtreeToggle(options)

// récupère le niveau du dessus (à faire sur un répertoire)
$.jtreeParent()

// récupère le ul du dessus
$.jtreeParentList()

// récupère le ul associé au répertoire courant
$.jtreeGetList()

// path complet du fichier/répertoire actuel
$.jtreeGetPath()

code css, les images dot.png et dotb.png sont des images de 1px, une de la couleur du fil de fer et l'autre de la couleur de fond, chacune de 1px²
il faut aussi définir les images des répertoires ouverts/fermés (celles de famfamfam sont très bien)
[nosmile]
			ul.jtree span {
				cursor:pointer;
				padding:0;margin:0;
				display:inline-block;
				min-height:20px;
				padding-left:20px;
				margin-left:10px;
				background-position:0 0, 8px 18px;
				background-size : auto auto, 1px 100%;
				background-repeat:no-repeat;
			}

			ul.jtree ul {
				background-repeat : no-repeat;
				background-position : 0 bottom , 0 0;
				background-size : 1px 11px, 1px 100%;
				background-image : url([url]img/icons/dotb.png), url([url]img/icons/dot.png);
				padding:0;margin:0;
			}

			ul.jtree ul li {
				background-repeat : no-repeat;
				background-position : 0 8px;
				background-size : 8px 1px;
				background-image : url([url]img/icons/dot.png);
				padding:0;margin:0;
			}

			ul.jtree span[data-state=open] { background-image:url([url]img/icons/folder_open.png), url([url]img/icons/dot.png); }
			ul.jtree span:not([data-state=open]) { background-image:url([url]img/icons/folder.png); }

			ul.jtree span:hover {
				color:blue;
				background-color:rgba(0,0,255,0.1);
			}

			ul.jtree {
				list-style:none; font:1.2em;
				background-color:#ffffff;
			}

			ul.jtree span:not([data-style="unclosable"]) + ul { display:none; }
			ul.jtree span + ul { list-style:none; font-size:95%; margin-left:18px; }


code php scannant récursivement un répertoire

seed : le répertoire d'entrée
valid : extensions de fichier permises
unvalid : extension de fichier à dégager (c'est un ou l'autre)
path : laisser vide

function rscandir($seed,$valid=array(),$unvalid=array(),$path='')
{	$files = array_diff(scandir($seed.$path),array('.','..'));
	$farray = array(); $darray = array();
	foreach($files as $f)
	{	$c = $path.$f;
		$cp = $seed.$c;
		if(is_file($cp))
		{	if(!empty($valid))
			{	$nfo = pathinfo($cp);
				$ext = $nfo['extension'];
				if(in_array($ext,$valid)) $farray[$f]=$c;
			} else if(!empty($unvalid))
			{	$nfo = pathinfo($cp);
				$ext = $nfo['extension'];
				if(!in_array($ext,$unvalid)) $farray[$f]=$c;
			} else 	$farray[$f]=$c;
		}
	      else
		{	$dir = rscandir($seed,$valid,$unvalid,$c.'/');
			if(!empty($dir)) $darray[$f]=$dir;
		}
	}
	ksort($darray); ksort($farray);
	return array_merge($darray,$farray);
}


code php générant le html attendu (des ul li imbriqués avec des span pour les nom, tout est class free sauf le ul du départ qui à une classe, nécessaire pour récupérer le path via jtreeGetPath)
data-state="open" à mettre si le répertoire doit être ouvert par default
data-style="unclosable" à mettre si le répertoire est infermable ^^

function getJtree($tree,$seed=1)
{	$out = '';
	if($seed) $out .= '<ul class="jtree"><li><span data-state="open" data-style="unclosable">root</span><ul>';
	foreach($tree as $name => $t)
	{	if(is_array($t))
			$out .= '<li><span>'.$name.'</span><ul>'.getJtree($t,0).'</ul></li>';
		else	$out .= '<li><span>'.$name.'</span></li>';
	}
	if($seed) $out .= '</ul></li></ul>';
	return $out;
}


récupérer le contenu complet d'un répertoire, générer le html et l'afficher

print getJtree(rscandir('/var/www/monsite/data/',array('html','jpg','png')));

exemple de code jquery pour creer l'arbre
$("ul.jtree").jtree();

exemple de code pour afficher au clic sur un fichier le path correspondant :

$("ul.jtree").jtree().jtreeFiles().click(function(){ alert( $(this).jtreeGetPath() ); });

exemple de code pour faire soit même l'ouverture fermeture des répertoires :

var opt = { autoToggle:false };
var tree = $("ul.jtree").jtree(opt);

tree.jtreeFolders().click(function()
{	$(this).jtreeToggle();

	ou :
	var t = $(this);	if(t.jtreeOpened()) t.jtreeClose(); else t.jtreeOpen();
});


exemple : mettre en vert tous les nom de fichier et au hover ils serons magenta, en rouge tous les nom de répertoire, au clic sur un répertoire on met celui ci en bleu :

var tree = $("ul.jtree").jtree();
tree.jtreeFiles().css("color","green").hover(function(){ $(this).css("color","#ff00ff"); },function(){ $(this).css("color","green"); });
tree.jtreeFolders().css("color","red").click(function(){ $(this).css("color","blue"); });


pour rester dans l'esprit jquery, tout est chainable :
exemple : fermer puis rouvrir un répertoire dès qu'il est ouvert cheeky

var opt = { autoToggle:false };
var tree = $("ul.jtree").jtree(opt);

tree.jtreeFolders().click(function()
{	var t = $(this);	if(t.jtreeOpened()) t.jtreeClose(); else t.jtreeOpen().jtreeClose().jtreeOpen();
});


marche aussi en mode automatique :

var tree = $("ul.jtree").jtree();

tree.jtreeFolders().click(function()
{	var t = $(this);	if(t.jtreeOpened()) t.jtreeClose().jtreeOpen();
});


exemple : fermer aussi le répertoire parent à la fermeture d'un répertoire

var tree = $("ul.jtree").jtree();

tree.jtreeFolders().click(function()
{	var t = $(this);	if(!t.jtreeOpened()) t.jtreeParent().jtreeClose();
});


tous les events jquery classiques sont utilisables depuis jtreeFolders / jtreeFiles et les fonctions équivalentes

reste à finir le calcul du fil de fer pour le mode multifolder, le nécessaire pour remplir/supprimer/modifier/déplacer des fichiers et répertoires, et finir proprement l'api
et la le mec il le pécho par le bras et il lui dit '

14

mise à jour du plugin, changement de méthode pour le fil de fer maintenant une seule image de 1px² nécessaire, de la couleur du fil
de plus il est fait entièrement en css, donc désactivable simplement

l'option multifolder est maintenant par défaut sur "siblings", en gros ca laisse les répertoires du même niveau que l'actuel ouvert, enfin c'est dur à expliquer, le mieux est de tester

des petits ajout à l'api :

$.jtreeChildFolders();
$.fn.jtreeChildFiles();
$.fn.jtreeChildAll();

qui récupèrent les répertoires / fichiers ou fichiers et répertoires du répertoire actuel (les fonctions non child les prennent tous, qu'importe le niveau, ici ça se limite au level 1)

mise à jour également du petit site, http://jtree.tk avec des démos
et la le mec il le pécho par le bras et il lui dit '

15

Joli ! smile

Marrant, root n'est pas "collapsable" ? (en langage assimilé TI ^^)

16

merci :- )

n data-state="open" data-style="unclosable">root</span>oui, par défaut je l'ai mis déjà ouvert et "infermable"<spamais c'est vrai que "uncollapsable" serais peu être mieux que "unclosable" comme mot clef ^^
et la le mec il le pécho par le bras et il lui dit '

17

Il me semble qu'on dit « collapsible » wink
avatar
Le scénario de notre univers a été rédigée par un bataillon de singes savants. Tout s'explique enfin.
T'as un problème ? Tu veux un bonbon ?
[CrystalMPQ] C# MPQ Library/Tools - [CrystalBoy] C# GB Emulator - [Monoxide] C# OSX library - M68k Opcodes

18

c'est bon à savoir smile
et la le mec il le pécho par le bras et il lui dit '

19

version préliminaire du remplissage en live et du déplacement d'éléments

http://jtree.tk/demo

clic sur un fichier ou répertoire pour le sélectionner,

"move to parent" déplace le fichier sélectionné dans le répertoire parent

"new file" et "new folder" vont créer une nouvelle entrée dans le répertoire sélectionné
et la le mec il le pécho par le bras et il lui dit '

20

re-mise à jour, drag and drop rulez, même url
et la le mec il le pécho par le bras et il lui dit '

21

enrichissement de l'api
* une fonction de sélection de fichier/répertoire suivant un path
* une fonction d'ouverture automatique des parents d'un fichier/répertoire
* une fonction combinant les deux précédentes
* une fonction de suppression de fichier/répertoire
* une fonction d'insertion "générique" acceptant un type (fichier ou rep) plus un nom ou un objet jquery
* une fonction de déplacement d'éléments (j'ai pas encore testé mais le déplacement entre éléments de deux tree différents devrais marcher)

optimisations du code, blindage de certaines fonctions, résolutions de bug

taille minifié actuelle : 5578 octets

plus qq nouvelles demos : http://jtree.tk/demo
et la le mec il le pécho par le bras et il lui dit '

22

introduction de sélecteurs jquery customisés lovetree.jtreeSelect("plugins/editable").jtreeChildFiles(":jtreeExt(png,jpg)").css("color","red");
et la le mec il le pécho par le bras et il lui dit '

23

c'est tout de même fou, t.parentsUntil('ul.jtree','ul'); met l'ordre inverse, normal car on remonte l'arbre

et t.next("ul").add(t.parentsUntil('ul.jtree','ul')); est dans l'ordre naturel de la descente Oo

j’espère que ça ne va pas changer dans les prochaines versions de jquery

mis à part ça : http://jtree.tk/img love
et la le mec il le pécho par le bras et il lui dit '

24

muhuhuhuhahahaha love

redis + json + jquery template + jtree + drag and drop => reorder ultra simple

géré entièrement en js via le jtree et super simple à charger et sauver grâce à la magie du json

c'est pas fini, mais ca poutre, ça va permettre une super gestion unifiés des admins menus/pages/catégories/produits/déclinaisons/ ... :-D
et la le mec il le pécho par le bras et il lui dit '

25

{"subs":[{"label":"google","url":"http://google.fr","target":"_blank"},{"label":"contact","url":"contact","target":""}]}

?? cheeky

26

c'est le json source, mais vu que je créais aussi des entrées en live c'est pas très représentatif ^^

le json c'est une manière de stocker des info dans une chaine, ici en l’occurrence pour gerer un menu avec sous menu sur une page web il contient un label de texte, une url et une manière d'ouvrir le lien au clic

par exemple pour ce menu la : Mo6c

ubs":[{"label":"mysubtest"},{"label":"mysubtest2"}]}]}en mettant juste les sous entrées et les label ca fait{"subs":[{"label":"google"},{"label":"contact","s
] } ] }
et de manière plus humaine :{
    "subs": [
        {
            "label": "google"
        },
        {
            "label": "contact",
            "subs": [
                {
                    "label": "mysubtest"
                },
                {
                    "label": "mysubtest2"
                }
      
ensuite, pratiquement chaque langage peu transformer ce bout de texte en objet ou array, en l’occurrence c'est directement compréhensible par le javascript (d'ou le J de json j’imagine)

bref ici au lien de créer une clef dans la base par entrée de mon menu et faire 12000 requêtes pour le récupérer entier, je sauve dans ma base une seule clef qui va tout contenir ^^
je délègue ensuite toute la gestion et l'admin à du javascript, et vu que j'avais fait ce jolie arbre, c'est pratiquement déjà tout cuit, bref coté serveur le seul bout d'admin que j'ai à faire est simplement une sauvegarde de la chaîne dans la base plutôt que de me taper du code qui va créer/modifier/supprimer/déplacer des entrées de mon menu via la base de donnée et ca c'est ultra pawa je gagne à mort de temps :-)

restera simplement à rajouter un peu de code permettant de pouvoir modifier de manière générique des data supplémentaires livrées dans l'arbre, comme justement le type d'ouverture du lien, ou l'url dans le cas de mon menu web, tout ca pour à la fin pouvoir décliner cette méthode d'admin à la gestion de mes pages, de mes produits/catégories dans le module ecommerce, comme ca tout est ultra simple et unifié ^^
et la le mec il le pécho par le bras et il lui dit '