Now also display sublinks if link is expanded.

Updated theme

draft/application/cms/src/theme/cms_theme.e

@@ -35,7 +35,7 @@ feature -- Conversion
 
 	menu_html (a_menu: CMS_MENU; is_horizontal: BOOLEAN): STRING_8
 		do
-			create Result.make_from_string ("<div id=%""+ a_menu.name +"%">")
+			create Result.make_from_string ("<div id=%""+ a_menu.name +"%" class=%"menu%">")
 			if is_horizontal then
 				Result.append ("<ul class=%"horizontal%" >%N")
 			else
@@ -44,12 +44,7 @@ feature -- Conversion
 			across
 				a_menu as c
 			loop
-				if c.item.is_active then
+				append_cms_link_to (c.item, Result)
-					Result.append ("<li class=%"active%">")
-				else
-					Result.append ("<li>")
-				end
-				Result.append ("<a href=%"" + url (c.item.location, c.item.options) + "%">" + html_encoded (c.item.title) + "</a></li>")
 			end
 			Result.append ("</ul>%N")
 			Result.append ("</div>")
@@ -59,4 +54,42 @@ feature -- Conversion
 		deferred
 		end
 
+feature {NONE} -- Implementation
+
+	append_cms_link_to (lnk: CMS_LINK; s: STRING_8)
+		local
+			cl: STRING
+		do
+			create cl.make_empty
+			if lnk.is_active then
+				cl.append ("active ")
+			end
+			if lnk.is_expandable then
+				cl.append ("expandable ")
+			end
+			if lnk.is_expanded then
+				cl.append ("expanded ")
+			end
+			if cl.is_empty then
+				s.append ("<li>")
+			else
+				s.append ("<li class=%""+ cl + "%">")
+			end
+			s.append ("<a href=%"" + url (lnk.location, lnk.options) + "%">" + html_encoded (lnk.title) + "</a>")
+			if
+				lnk.is_expanded and then
+				attached lnk.children as l_children
+			then
+				s.append ("<ul>%N")
+				across
+					l_children as c
+				loop
+					append_cms_link_to (c.item, s)
+				end
+				s.append ("</ul>")
+			end
+			s.append ("</li>")
+		end
+
+
 end

draft/application/cms/www/themes/default/res/ewfcms.js

@@ -0,0 +1,91 @@
+/*
+ * EWF CMS javascript based on JQuery
+ */
+
+/**
+ * Override jQuery.fn.init to guard against XSS attacks.
+ *
+ * See http://bugs.jquery.com/ticket/9521
+ */
+
+(function () {
+  var jquery_init = jQuery.fn.init;
+  jQuery.fn.init = function (selector, context, rootjQuery) {
+    // If the string contains a "#" before a "<", treat it as invalid HTML.
+    if (selector && typeof selector === 'string') {
+      var hash_position = selector.indexOf('#');
+      if (hash_position >= 0) {
+        var bracket_position = selector.indexOf('<');
+        if (bracket_position > hash_position) {
+          throw 'Syntax error, unrecognized expression: ' + selector;
+        }
+      }
+    }
+    return jquery_init.call(this, selector, context, rootjQuery);
+  };
+  jQuery.fn.init.prototype = jquery_init.prototype;
+})();
+
+
+var EWFCMS = EWFCMS || { };
+
+EWFCMS.toggleFieldset = function(fieldset) { 
+		if ($(fieldset).is('.collapsed')) {
+			var content = $('> div:not(.action)', fieldset);
+			$(fieldset).removeClass('collapsed');
+			content.hide();
+			content.slideDown( {
+				duration: 'fast',
+				easing: 'linear',
+				complete: function() {
+					//Drupal.collapseScrollIntoView(this.parentNode);
+					this.parentNode.animating = false;
+					$('div.action', fieldset).show();
+					},
+				step: function() {
+					// Scroll the fieldset into view
+					//Drupal.collapseScrollIntoView(this.parentNode);
+				  }
+				});
+		} else {
+			var content = $('> div:not(.action)', fieldset).slideUp('fast', function() {
+				$(this.parentNode).addClass('collapsed');
+				this.parentNode.animating = false;
+			});
+		}
+	};
+
+jQuery(document).ready(function(){
+	//$('.collapsed').hide();
+	$('fieldset.collapsible > legend').each(function() {
+		var fieldset = $(this.parentNode);
+		// turn legen into clickable link and wrap contents
+		var text = this.innerHTML;
+		$(this).empty()
+		.append($('<a href="#">'+ text + '</a>').click(function() {
+			var fieldset = $(this).parents('fieldset:first')[0];
+			if (!fieldset.animating) {
+				fieldset.animating = true;
+				EWFCMS.toggleFieldset(fieldset);
+			}
+			return false;
+		}
+		))
+		.after($('<div class="fieldset-wrapper"></div>')
+		.append(fieldset.children(':not(legend):not(.action)')))
+		.addClass('collapse-processed');
+	});
+	$('fieldset.collapsed').each(function() {
+			$(this).removeClass('collapsed');
+			EWFCMS.toggleFieldset(this);
+	});
+});
+
+jQuery(document).ready(function(){
+	$('#tabs').tabs();
+});
+
+//jQuery(document).ready(function(){
+	//$('#second_sidebar').hide();
+//});
+

draft/application/cms/www/themes/default/res/style.css

@@ -70,8 +70,18 @@ div#main-wrapper {
 }
 div#main { margin: 0; padding: 0; clear: both; height:0; display: block;  }
 
+div#content { padding: 5px 3px 5px 20px; 
+	margin-top: 10px;
+	min-width: 80%;
+	display: inline;
+	float: left;
+	position: relative;
+	background-color: #ffffff;
+	padding-bottom: 30px;
+}
+
 div#first_sidebar {
-	width: 20%;
+	width: 200px;
 	margin: 5px; 
 	padding: 5px;
 	display: inline;
@@ -79,12 +89,13 @@ div#first_sidebar {
 	position: relative;
 }
 div#second_sidebar {
-	width: 20%;
+	width: 100px;
 	margin: 5px; 
 	padding: 5px;
 	display: inline;
-	float: left;
+	float: right;
 	position: relative;
+	background-color: #eee;
 }
 div.sidebar div.block {
 	margin-bottom: 5px;
@@ -101,16 +112,6 @@ div.sidebar div.block div.title {
 div.sidebar div.block div.inside {
 	margin: 3px;
 }
-
-div#content { padding: 5px 3px 5px 20px; 
-	margin-top: 10px;
-	width: 50%;
-	display: inline;
-	float: left;
-	position: relative;
-	background-color: #ffffff;
-	padding-bottom: 30px;
-}
 div#footer { margin: 10px 0 10px 0; clear: both; display: block; text-align: center; padding: 10px; border-top: solid 1px #00f; color: #fff; background-color: #333;}
 div#footer a { color: #ff0; }
 
@@ -180,3 +181,61 @@ div#message li.warning {
 	color: #aa2200;
 	background-color: #ffcc99;
 }
+
+div.columns {
+	margin-top: 10px;
+	display: inline-block;
+	clear: both;
+}
+
+div.columns>* {
+	padding-left: 10px;
+	padding-top: 5px;
+	border-top: dotted 1px #999;
+	border-left: dotted 1px #999;
+	margin-left: 1px;
+	margin-right: 10px;
+	float: left;
+}
+
+/* Link */
+
+a {
+	text-decoration: none;
+}
+a:hover {
+	text-decoration: underline;
+}
+
+div.menu ul.vertical {
+	margin: 0;
+	padding-left: 10px;
+	list-style-type: none;
+}
+
+div.menu ul.vertical ul {
+	border-left: solid 3px #eee;
+	list-style-type: none;
+	margin: 0;
+	padding-left: 5px;
+	margin-left: 5px;
+	margin-bottom: 5px;
+}
+
+/* Fieldset and collapsible */
+
+fieldset.collapsible legend a {
+	padding-left: 15px;
+	background: url(menu-expanded.png) 5px 75% no-repeat;
+}
+
+fieldset.collapsed legend a {
+	padding-left: 15px;
+	background: url(menu-collapsed.png) 5px 50% no-repeat;
+}
+
+fieldset.collapsed {
+	border: none;
+	border-top: dotted 1px #000;
+}
+