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 popupNames = [];
	
	var popupElements = {};
	var popupStatus = {};
	var popupImages = {};
	var popupDescriptions = {};
	var popupWidths = {};
	var popupHeights = {};
	var popupLocationsX = {};
	var popupLocationsY = {};
	var popupMinimized = {};

	var contentX = 0;
	var contentY = 0;

	var dragElement = null;
	var dragStart = {};

	@foreach (var g in Model.AvailableFunctions)
	{
		foreach (var i in g.Value)
		{
			ViewContext.Writer.WriteLine("popupNames.push(\"" + i.Name + "\");");
			ViewContext.Writer.WriteLine("popupElements[\"" + i.Name + "\"] = \"" + i.Name + "_PW-1\";");
			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;
		for (var i = 0; i < popupNames.length; i++) {
			var popupElem = $("#" + popupNames[i] + "-Popup_PW-1");
			var headerElem = $("#" + popupNames[i] + "-Popup_PW-1 > .dxpc-mainDiv > .dxpc-header");
			var contentWrapper = $("#" + popupNames[i] + "-Popup_PW-1 .dxpc-contentWrapper");
			var content = $("#" + popupNames[i] + "-Popup_PW-1 .dxpc-content");
			popupElem.draggable({
				containment: $(".functionContentContainer"),
				handle: headerElem
			});
			popupElem.resizable({
				containment: $(".functionContentContainer"),
				alsoResize: [contentWrapper, content]
			});
			popupElem.on("dragstop", function (e, s) {
				var controls = ASPxClientControl.GetControlCollection();
				var popupName = e.currentTarget.id.replace("_PW-1", "");
				var functionName = e.currentTarget.id.replace("-Popup_PW-1", "");
				var popupElement = controls.GetByName(popupName);
				var popupControl = MVCxClientPopupControl.Cast(popupElement);
				var popupPositionX = $(this).position().left;
				var popupPositionY = $(this).position().top;
				popupLocationsX[functionName] = popupPositionX;
				popupLocationsY[functionName] = popupPositionY;
			});
			popupElem.on("resizestop", function (e, s) {
				var controls = ASPxClientControl.GetControlCollection();
				var popupName = e.currentTarget.id.replace("_PW-1", "");
				var functionName = e.currentTarget.id.replace("-Popup_PW-1", "");
				var popupElement = controls.GetByName(popupName);
				var popupControl = MVCxClientPopupControl.Cast(popupElement);
				var popupWidth = $(this).width();
				var popupHeight = $(this).height();
				popupWidths[functionName] = popupWidth;
				popupHeights[functionName] = popupHeight;
				popupControl.SetWidth(popupWidth);
				popupControl.SetHeight(popupHeight);
			});
		}
	})

	//function checkResizeBorders(s, e) {
	//	var controls = ASPxClientControl.GetControlCollection();
	//	var popupName = s.name.replace("-Popup", "");
	//	var popupElement = controls.GetByName(s.name);
	//	var popupControl = MVCxClientPopupControl.Cast(popupElement);
	//	var curWidth = popupControl.GetWidth();
	//	var curHeight = popupControl.GetHeight();
	//	if (popupLocationsX[popupName] + curWidth >= contentX + $(".functionContentContainer").width()) {
	//		popupControl.SetWidth($(".functionContentContainer").width() - popupLocationsX[popupName]);
	//	}
	//	if (popupLocationsY[popupName] + curHeight >= contentY + $(".functionContentContainer").height()) {
	//		popupControl.SetHeight($(".functionContentContainer").height() - popupLocationsY[popupName]);
	//	}
	//}

	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 (popupMinimized[e.item.name] == true) {
			popupControl.Show();
			$("#" + e.item.name + "-PanelItem").fadeTo(500, 1);
		} else if (!popupStatus[e.item.name] || popupStatus[e.item.name] == "closed") {
			if (popupWidths[e.item.name] && popupHeights[e.item.name]) {
				popupControl.SetWidth(popupWidths[e.item.name]);
				popupControl.SetHeight(popupHeights[e.item.name]);
			}
			popupControl.RefreshContentUrl();
			popupControl.ShowAtPos(contentX + openOffsetX, contentY + openOffsetY);
			popupLocationsX[e.item.name] = contentX + openOffsetX;
			popupLocationsY[e.item.name] = contentY + 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);
		if (popupStatus[popupName] == "maximized") {
			popupControl.Show();
		} else {
			popupControl.ShowAtPos(popupLocationsX[popupName], popupLocationsY[popupName]);
			popupStatus[popupName] = "normalized";
		}
		popupMinimized[popupName] = false;
		$("#" + popupName + "-PanelItem").fadeTo(500, 1);
	}

	function toggleMaximizeFunction(popupName) {
		var controls = ASPxClientControl.GetControlCollection();
		var popupElementName = popupName + "-Popup";
		var popupElement = controls.GetByName(popupElementName);
		var popupControl = MVCxClientPopupControl.Cast(popupElement);
		var popupElem = $("#" + popupElementName + "_PW-1");
		var popupContentElem = $("#" + popupElementName + "_PW-1 > .dxpc-mainDiv");
		var popupHeaderElem = $("#" + popupElementName + "_PW-1 > .dxpc-mainDiv > .dxpc-header");
		if (popupStatus[popupName] && popupStatus[popupName] == "minimized") {
			popupControl.Show();
		} else if (popupStatus[popupName] && popupStatus[popupName] == "normalized") {
			popupWidths[popupName] = popupControl.GetWidth();
			popupHeights[popupName] = popupControl.GetHeight();
			popupControl.ShowAtPos(contentX, contentY);
			popupControl.SetWidth($(".functionContentContainer").width());
			popupControl.SetHeight($(".functionContentContainer").height() - 1);
			popupStatus[popupName] = "maximized";
			popupContentElem.removeClass("dxpc-shadow");
			popupHeaderElem.removeClass("devExAllowDrag");
			popupElem.draggable("disable");
			popupElem.resizable("disable");
		} else if (popupStatus[popupName] && popupStatus[popupName] == "maximized") {
			popupControl.ShowAtPos(popupLocationsX[popupName], popupLocationsY[popupName]);
			popupControl.SetWidth(popupWidths[popupName]);
			popupControl.SetHeight(popupHeights[popupName]);
			popupStatus[popupName] = "normalized";
			popupContentElem.addClass("dxpc-shadow");
			popupHeaderElem.addClass("devExAllowDrag");
			popupElem.draggable("enable");
			popupElem.resizable("enable");
			// Prevent growing of function container so it breaks below navigation container
			$(".functionContentContainer").width($(".functionContentContainer").width() - 50);
			$(".functionContentContainer").width($(".functionContentContainer").width() + 50);
		}
	}

	function hideFunction(popupName, minimize) {
		var controls = ASPxClientControl.GetControlCollection();
		var popupElementName = popupName + "-Popup";
		var popupElement = controls.GetByName(popupElementName);
		var popupControl = MVCxClientPopupControl.Cast(popupElement);
		var popupContentElem = $("#" + popupElementName + "_PW-1 > .dxpc-mainDiv");
		popupControl.Hide();
		if (minimize == true) {
			if (popupStatus[popupName] == "maximized") {
				popupLocationsX[popupName] = contentX;
				popupLocationsY[popupName] = contentY;
			}
			popupMinimized[popupName] = true;
			$("#" + popupName + "-PanelItem").fadeTo(500, 0.6);
		} else {
			popupStatus[popupName] = "closed";
			popupContentElem.addClass("dxpc-shadow");
			popupContentElem.addClass("devExAllowDrag");
			var iframe = popupControl.GetWindowContentIFrame();
			iframe.contentWindow.document.open();
			iframe.contentWindow.document.write("");
			iframe.contentWindow.document.close();
			$("#" + popupName + "-PanelItem").fadeOut(500, function () {
				$(this).remove();
			});
		}
		event.stopPropagation();
	}
</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;
				s.AllowDragging = false;
				//s.AllowResize = true;
				//s.ClientSideEvents.Resize = "function (s, e) { checkResizeBorders(s, e); }";
				s.Styles.Header.CssClass += "devExAllowDrag";
			}).GetHtml();
		}
	}

<table class="homeContainer">
	<tbody>
		<tr>
			<td 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()
			</td>
			<td class="functionContentContainer">

			</td>
		</tr>
	</tbody>
</table>