GreenTree.Nachtragsmanagement/GreenTree.Nachtragsmanagement.Web/Views/Home/Index.cshtml

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@model GreenTree.Nachtragsmanagement.Web.Models.Home.HomeModel

<script>
	var openOffsetX = 10;
	var openOffsetY = 5;

	var popupStatus = {};
	var popupImages = {};
	var popupDescriptions = {};
	var popupWidths = {};
	var popupHeights = {};
	var popupLocations = {};

	var contentX = 0;
	var contentY = 0;

	@foreach (var g in Model.AvailableFunctions)
	{
		foreach (var i in g.Value)
		{
			ViewContext.Writer.WriteLine("popupImages[\"" + i.Name + "\"] = \"" + Url.Content(i.ImageUrl) + "\";");
			ViewContext.Writer.WriteLine("popupDescriptions[\"" + i.Name + "\"] = \"" + i.Description + "\";");
		}
	}

	$(document).ready(function () {
		$(".functionNavigationContainer").height($(window).height() - $(".globalFooter").height() - 3);
		$(".functionContentContainer").height($(window).height() - $(".globalFooter").height() - 3);
		$(".functionContentContainer").width($(window).width() - $(".functionNavigationContainer").width() - 3);
		contentX = $(".functionContentContainer").position().left;
		contentY = $(".functionContentContainer").position().top;
	})

	function showFunction(e) {
		if (!e) return;
		var controls = ASPxClientControl.GetControlCollection();
		var popupName = e.item.name + "-Popup";
		var popupElement = controls.GetByName(popupName);
		var popupControl = MVCxClientPopupControl.Cast(popupElement);
		if (popupControl.IsVisible()) return;
		if (popupStatus[e.item.name] && popupStatus[e.item.name] == "minimized") {
			popupControl.Show();
		} else {
			popupControl.RefreshContentUrl();
			popupControl.ShowAtPos(contentX + openOffsetX, contentX + openOffsetY);
			openOffsetX += 50;
			openOffsetY += 25;
			var popupPanel = $(
				'<div id="' + e.item.name + 'PanelItem" class="popupPanelItem" onclick=\'normalizeFunction("' + e.item.name + '")\'>' +
					'<img src="' + popupImages[e.item.name] + '" />' +
					'<span>' + popupDescriptions[e.item.name] + '</span>' +
					'<img src="@Url.Content("~/Content/Images/close-16.png")" onclick=\'hideFunction("' + e.item.name + '", false)\' />' +
				'</div>')
				.hide()
				.appendTo(".popupPanel")
				.fadeIn(500);
		}
		popupStatus[e.item.name] = "normalized";
	}

	function normalizeFunction(popupName) {
		var controls = ASPxClientControl.GetControlCollection();
		var popupElementName = popupName + "-Popup";
		var popupElement = controls.GetByName(popupElementName);
		var popupControl = MVCxClientPopupControl.Cast(popupElement);
		popupControl.Show();
	}

	function toggleMaximizeFunction(popupName) {
		var controls = ASPxClientControl.GetControlCollection();
		var popupElementName = popupName + "-Popup";
		var popupElement = controls.GetByName(popupElementName);
		var popupControl = MVCxClientPopupControl.Cast(popupElement);
		if (popupStatus[popupName] && popupStatus[popupName] == "minimized") {
			popupControl.Show();
		} else if (popupStatus[popupName] && popupStatus[popupName] == "normalized") {
			popupLocations[popupName] = popupControl.GetPosition();
			popupWidths[popupName] = popupControl.GetWidth();
			popupHeights[popupName] = popupControl.GetHeight();
			popupControl.ShowAtPos(contentX, contentY);
			popupControl.SetWidth($(".functionContentContainer").width());
			popupControl.SetHeight($(".functionContentContainer").height());
		} else if (popupStatus[popupName] && popupStatus[popupName] == "maximized") {
			popupControl.ShowAtPos(contentX, contentY);
			popupControl.SetWidth(popupWidths[popupName]);
			popupControl.SetHeight(popupHeights[popupName]);
		}
	}

	function hideFunction(popupName, minimize) {
		var controls = ASPxClientControl.GetControlCollection();
		var popupElement = controls.GetByName(popupName + "-Popup");
		var popupControl = MVCxClientPopupControl.Cast(popupElement);
		popupControl.Hide();
		if (minimize == true) {
			popupStatus[popupName] = "minimized";
		} else {
			popupStatus[popupName] = "closed";
			var iframe = popupControl.GetWindowContentIFrame();
			iframe.contentWindow.document.open();
			iframe.contentWindow.document.write("");
			iframe.contentWindow.document.close();
			$("#" + popupName + "PanelItem").fadeOut(500, function () {
				$(this).remove();
			});
		}
	}
</script>

	@foreach (var g in Model.AvailableFunctions)
	{
		foreach (var i in g.Value)
		{
			Html.DevExpress().PopupControl(s =>
			{
				s.Name = i.Name + "-Popup";
				s.HeaderText = i.Description;
				s.SetHeaderTemplateContent(
					"<div class=\"functionHeader\">" +
						"<img class=\"headerIcon\" src=\"" + Url.Content(i.ImageUrl) + "\" />" +
						"<span class=\"headerText\">" + i.Description + "</span>" +
						"<img class=\"controlIcon\" src=\"" +
							Url.Content("~/Content/Images/close-16.png") + "\" onclick=\"hideFunction('" + i.Name + "',false);\" />" +
						"<img class=\"controlIcon\" src=\"" +
							Url.Content("~/Content/Images/maximize-16.png") + "\" onclick=\"toggleMaximizeFunction('" + i.Name + "');\" />" +
						"<img class=\"controlIcon\" src=\"" +
							Url.Content("~/Content/Images/minimize-16.png") + "\" onclick=\"hideFunction('" + i.Name + "',true);\" />" +
					"</div>");
				s.ContentUrl = Url.RouteUrl(i.RouteName);
				s.Modal = false;
				s.ShowMaximizeButton = (i.AllowMaximize.HasValue && i.AllowMaximize.Value) ? true : false;
				s.Width = new Unit(i.BaseWidth.Value, UnitType.Pixel);
				s.Height = new Unit(i.BaseHeight.Value, UnitType.Pixel);
				s.MinWidth = new Unit(i.MinWidth.Value, UnitType.Pixel);
				s.MinHeight = new Unit(i.MinHeight.Value, UnitType.Pixel);
				s.CloseAction = CloseAction.None;
			}).GetHtml();
		}
	}

<div class="functionNavigationContainer">
	@Html.DevExpress().NavBar(s =>
{
	s.Name = "devNavBarFunctions";
	s.Width = new Unit(100, UnitType.Percentage);
	s.ClientSideEvents.ItemClick = "function (s, e) { showFunction(e); }";
	s.Styles.Item.Cursor = "pointer";
	s.ControlStyle.Border.BorderStyle = BorderStyle.None;
	s.Styles.GroupHeader.Border.BorderStyle = BorderStyle.None;
	s.Styles.GroupHeader.CssClass += "devExBorderBottom devExBorderBottomGray devExBorderBottomSmall";
	s.Styles.GroupContent.Border.BorderStyle = BorderStyle.None;
	s.Styles.GroupContent.CssClass += "devExBorderBottom";
	s.Styles.Item.Border.BorderStyle = BorderStyle.None;
	s.Styles.Item.CssClass += "devExBorderBottom";

	foreach (var g in Model.AvailableFunctions)
	{
		s.Groups.Add(n1 =>
		{
			n1.Name = g.Key.Name;
			n1.Text = g.Key.Description;
			n1.ItemImagePosition = ImagePosition.Top;

			foreach (var i in g.Value)
			{
				n1.Items.Add(n2 =>
				{
					n2.Name = i.Name;
					n2.Text = i.Description;
					n2.Image.Url = i.ImageUrl;
					n2.Image.UrlHottracked = GreenTree.Nachtragsmanagement.Core.StaticHelper.AddSuffix(i.ImageUrl, "-contrast", true);
				});
			}
		});
	}
}).GetHtml()
</div>

<div class="functionContentContainer">

</div>