openrat-cms

commit 10908c7764e9049009c810324ae500230ac97c35
parent 8d0bbf298acc97ee2678163b6db9c451e2f648a7
Author: dankert <devnull@localhost>
Date:   Thu, 17 Feb 2011 21:50:56 +0100

Vervollständigung des Baumes mit Auf-/Zu-Knöpfen.

Diffstat:
themes/default/css/layout.css
 | 
102
++++++++++++++++++++++++++++++++++++++-----------------------------------------
themes/default/images/tree_minus.png
 | 
0

themes/default/images/tree_plus.png
 | 
0

themes/default/js/openrat.js
 | 
45
++++++++++++++++++++++++++++++---------------

4 files changed, 79 insertions(+), 68 deletions(-)
diff --git a/themes/default/css/layout.css b/themes/default/css/layout.css
@@ -1,4 +1,3 @@
-body
 /*
 OpenRat Content Management System
 Copyright (C) 2002-2010 Jan Dankert
@@ -329,20 +328,6 @@ body.title table tr td {
 	padding:3px;
 }
 
-/* Baum-Innenabstand */
-body.tree {
-	padding:5px;
-}
-
-
-/* Gerade aktivierte Baumelemente */
-body.tree tr.opened td.treevalue a,
-body.tree tr.opened td.treevalue,
-/* Aktive Menuepunkte */
-body.main table.main table.menu td.action a.menu_highlight
-{
-	font-weight:bold; /* fett */
-}
 
 /* Submenu-Entrys */
 body.menu tr.menu td table tr td,
@@ -370,11 +355,6 @@ body.main tr.title span.title
 	text-shadow:#cac2a6 2px 1px 3px;
 }
 
-/* Tree-Icons */
-body.tree td.treevalue img {
-	padding-right:2px;
-	padding-left:2px;
-}
 
 /* Icon-Innenabstand */
 img[align=left],
@@ -582,20 +562,6 @@ table.notice tr.warning
 }
 
 
-/* Baum */
-table.tree td.treecol,
-table.tree td.treeimage
-{
-	width:1%;
-}
-table.tree td.treevalue
-{
-	vertical-align:middle;
-	white-space:nowrap;
-	text-align: left;
-}
-
-
 
 /* Kalender */
 table.calendar
@@ -661,47 +627,76 @@ form.xlogin
 
 
 
+
+
+
+
 /*   B a u m   */
 ul.tree,
 ul.tree ul
 {
 	list-style-type: none;
 	background: url(../images/tree_line.gif) repeat-y;
-	margin: 0;
-	padding: 0;
+	margin: 0; padding: 0; 
+}
+
+ul.tree ul
+{
+	margin-left:18px;
 }
 
-ul.tree:xlast-child,
-ul.tree ul:xlast-child
+ul.tree div.tree
 {
-	list-style-type: none;
-	background: url(../images/tree_none_end.gif) repeat-y;
-	margin: 0;
-	padding: 0;
+	width:18px;
+	min-width:18px;
+	height:18px;
+	xbackground-color:red;
+	float:left;
+}
+ul.tree div.tree,
+ul.tree div.entry
+{
+	height:18px;
+	max-height:18px;
+	min-height:18px;
 }
 
-ul.tree ul
+ul.tree div img
 {
-	margin-left: 0px;
+	cfloat:left;
 }
 
 ul.tree li
-{
-	margin: 0;
-	padding:0 18px;
-	line-height: 16px;
-	xbackground: url(../images/tree_plus.gif) no-repeat;
+{margin: 0; padding: 0 0px; 
+	line-height: 18px;
+	background: url(../images/tree_none.gif) no-repeat;
 	xcolor: #369;
-	font-weight: bold;
+	font-weight: normal;
 	white-space:nowrap;
 }
 
 ul.tree li.last,
 ul.tree li:last-child
 {
-	xbackground: #fff url(../images/tree_plus_end.gif) no-repeat;
+	background: url(../images/tree_none_end.gif) no-repeat;
 } 
 
+div.tree.open
+{
+	background: url(../images/tree_minus.png) no-repeat;
+}
+div.tree.closed
+{
+	background: url(../images/tree_plus.png) no-repeat;
+}
+
+div#tree div.content,
+ul.tree li.last,
+ul.tree li:last-child
+{
+	background-color:white;
+}
+
 body > div { display:none; }
 
 
@@ -830,7 +825,7 @@ table > tr.data:nth-child(2n) {
 
 /* Datenzeile - Mauseffekt */
 table tr.data:hover,
-body.tree tr:hover
+div#tree div.content li div.entry:hover
 {
 	background-color:#EEEEEE;
 }
@@ -841,7 +836,8 @@ table tr.data td[onclick]:hover{
 }
 
 tr.data > td[onclick],
-div.dropdown div[onclick]
+div.dropdown div[onclick],
+ul.tree div
 {
 cursor:pointer;
 }
diff --git a/themes/default/images/tree_minus.png b/themes/default/images/tree_minus.png
Binary files differ.
diff --git a/themes/default/images/tree_plus.png b/themes/default/images/tree_plus.png
Binary files differ.
diff --git a/themes/default/js/openrat.js b/themes/default/js/openrat.js
@@ -128,11 +128,13 @@ array('Source','-', 'ShowBlocks','Maximize') );
 function loadTree()
 {
 	// Oberstes Tree-Element erzeugen
-	$('div#tree div.window div.content').html("Wird geladen");
-	$('div#tree div.window div.content').append('<ul class="tree"><li class="root">Baum</li></ul>');
+	$('div#tree div.window div.content').html("&nbsp;");
+	//$('div#tree div.window div.content').append('<ul class="tree"><li class="root"><div>Baum</div></li></ul>');
 	
 	// Wurzel des Baums laden
-	loadBranch( $('div#tree ul.tree > li'),'root',0);
+	//loadBranch( $('div#tree ul.tree > li'),'root',0);
+	loadBranch( $('div#tree div.content'),'root',0);
+	$('div#tree div.content > ul.tree > li > div.tree').delay(500).click();
 }
 
 
@@ -147,23 +149,35 @@ function loadBranch(li,type,id)
 {
 	//alert("hier rein: "+$(li).html() );
 	$.getJSON('./dispatcher.php?action=tree&subaction=loadBranch&id='+id+'&type='+type, function(json) {
-		$(li).append('<ul style="display:none;"/>');
+		$(li).append('<ul class="tree" style="display:none;"/>');
+		//alert("öffne: "+$(li).html()+"                     neu: "+$(li).html());
 		var ul = $(li).children('ul').first();
 		$.each(json['branch'],function(idx,line)
 		{
-			var img = (line.url!==undefined?'tree_plus':'tree_none');
-			$(ul).append( '<li><img class="tree" src="'+OR_THEMES_EXT_DIR+'default/images/'+img+'.gif" /><a href="javascript:void(0)" title="'+ line.description + '"><img class="entry" src="'+OR_THEMES_EXT_DIR+'default/images/icon_'+line['icon']+'.png" />'+ line.text + '</a></li>' );
+			//var img = (line.url!==undefined?'tree_plus':'tree_none');
+			$(ul).append( '<li><div class="tree">&nbsp;</div><div class="entry" title="'+ line.description + '"><img src="'+OR_THEMES_EXT_DIR+'default/images/icon_'+line['icon']+'.png" />'+ line.text + '</div></li>' );
 			var new_li = $(ul).children('li').last();
-			$(new_li).children('img.tree').unbind('click');
-			$(new_li).children('img.tree').click( {},function(e) {loadBranch( $(e.target).parent(),line.type,line.internalId) }); // Zweig öffnen
-			$(new_li).children('a').click( function() { loadViewByName('content',line['url'].replace(/&amp;/g,'&')); }); // Objekt laden
+			//$(new_li).children('div').unbind('click');
+			if ( line.type )
+			{
+				$(new_li).children('div.tree').addClass('closed');
+				$(new_li).children('div.tree').click( {},function(e) {loadBranch( $(e.target).parent(),line.type,line.internalId) }); // Zweig öffnen
+			}
+			
+			if	( line.url )
+			{
+				$(new_li).children('div.entry').click( function() { loadViewByName('content',line.url.replace(/&amp;/g,'&')); }); // Objekt laden
+			}
+				
 		});
+		//$(ul).children('li:last-child').addClass('last');
 		$(ul).fadeIn(600); // Einblenden
 	});
 	
-	$(li).children('img.tree').unbind('click');
-	$(li).children('img.tree').click( function(e) { closeBranch($(e.target).parent(),type,id) } );
-	$(li).children('img.tree').attr('src',OR_THEMES_EXT_DIR+'default/images/tree_minus.gif');
+	$(li).children('div.tree').unbind('click');
+	$(li).children('div.tree').removeClass('closed').addClass('open');
+	$(li).children('div.tree').click( function(e) { closeBranch($(e.target).parent(),type,id) } );
+	//$(li).children('img.tree').attr('src',OR_THEMES_EXT_DIR+'default/images/tree_minus.gif');
 }
 
 
@@ -176,9 +190,10 @@ function closeBranch(li,type,id)
 {
 	//alert("schließen:"+$(li).html() );
 	$(li).children('ul').fadeOut('slow').remove();
-	$(li).children('img.tree').unbind('click');
-	$(li).children('img.tree').click( function() { loadBranch($(this).parent(),type,id) });
-	$(li).children('img.tree').attr('src',OR_THEMES_EXT_DIR+'default/images/tree_plus.gif');
+	$(li).children('div.tree').unbind('click');
+	//alert( "wieder öffnen: "+$(li).children('div').first().html());
+	$(li).children('div.tree').click( function() { loadBranch($(this).parent(),type,id) });
+	//$(li).children('img.tree').attr('src',OR_THEMES_EXT_DIR+'default/images/tree_plus.gif');
 }