/// <summary>
/// Render all CSS properties
/// use a mapping to map ux properties and css properties
/// </summary>
/// <param name="control"></param>
/// <param name="css"></param>
public void RenderCSSProperties(UXControl control, CodeCSS css)
{
control.Get("Width", (s, v) => { css.Body.Add("width", v.Value.ToString() + "px"); });
control.Get("Height", (s, v) => { css.Body.Add("height", v.Value.ToString() + "px"); });
control.Get("BackColor", (s, v) => { css.BackgroundColor = new CSSColor(v.Value); });
control.Get("ForeColor", (s, v) => { css.ForegroundColor = new CSSColor(v.Value); });
control.Get("Padding", (s, v) => { css.Body.Add("padding", v.Value); });
control.Get("Margin", (s, v) => { css.Body.Add("margin", v.Value); });
control.Get("Border", (s, v) => { css.Body.Add("border", v.Value); });
control.Get("Border-Spacing", (s, v) => { css.Body.Add("border-spacing", v.Value); });
control.Get("Border-Width", (s, v) => { css.Body.Add("border-width", v.Value + "px"); });
control.Get("Border-Height", (s, v) => { css.Body.Add("border-height", v.Value + "px"); });
control.Get("Border-Color", (s, v) => { css.Body.Add("border-color", v.Value + "px"); });
control.Get("Height-Minimum", (s, v) => { css.Body.Add("min-height", v.Value.ToString() + "px"); });
control.Get("align", (s, v) => { css.Body.Add("text-align", v.Value); });
control.Get("valign", (s, v) => { css.Body.Add("vertical-align", v.Value); });
}
public WebRenderer()
{
StringBuilder sb = new StringBuilder();
this.project = new Project();
Projects.Add(projectName, this.project);
this.project.CreationDate = DateTime.Now;
this.project.Title = projectName;
this.project.Revision = 1;
Projects.TrySelect(projectName, out this.project);
// add js link
//this.project.JavascriptUrls.Add("jquery-3.3.1.min.js");
this.project.JavascriptUrls.Add("jquery-ui.1.12/external/jquery/jquery.js");
this.project.JavascriptUrls.Add("jquery-ui.1.12/jquery-ui.js");
// creating all master-objects and tools
HTMLTool tool = new HTMLTool();
tool.ConstraintHeight = EnumConstraint.AUTO;
tool.ConstraintWidth = EnumConstraint.AUTO;
tool.Path = "html";
tool.Name = "readOnlyText";
tool.Id = "labelText";
tool.HTML = "<div style='cursor:default' onselectstart='javascript:return false;' ondragstart='javascript:return false;'>{0}</div>";
this.project.Tools.Add(tool);
tool = new HTMLTool();
tool.ConstraintHeight = EnumConstraint.AUTO;
tool.ConstraintWidth = EnumConstraint.AUTO;
tool.Path = "html";
tool.Name = "selectableText";
tool.Id = "labelSelectableText";
tool.HTML = "<div id='{0}' onmouseover='javascript:RaiseArrow(this);' indexValue='{1}' style='cursor:default' onselectstart='javascript:return false;' ondragstart='javascript:return false;'>{2}</div>";
this.project.Tools.Add(tool);
tool = new HTMLTool();
tool.ConstraintHeight = EnumConstraint.AUTO;
tool.ConstraintWidth = EnumConstraint.AUTO;
tool.Path = "html";
tool.Name = "box";
tool.HTML = "<div id='{0}'>{1}</div>";
tool.Id = "boxContainer";
this.project.Tools.Add(tool);
tool = new HTMLTool();
tool.ConstraintHeight = EnumConstraint.AUTO;
tool.ConstraintWidth = EnumConstraint.AUTO;
tool.Path = "html";
tool.Name = "li";
tool.Id = "liContainer";
sb = new StringBuilder();
sb.Append("<li><span itemName='{1}' style='display:inline' onclick='javascript:onTreeItemChanged(this);'>- </span>{0}</li>");
tool.HTML = sb.ToString();
this.project.Tools.Add(tool);
tool = new HTMLTool();
tool.Path = "html";
tool.Name = "default";
tool.Id = "defaultCode";
CodeCSS outerDiv = new CodeCSS(".outerDiv");
outerDiv.Discret("margin-top", "auto");
outerDiv.Discret("margin-bottom", "auto");
outerDiv.Discret("margin-left", "auto");
outerDiv.Discret("margin-right", "auto");
outerDiv.Discret("width", "150px");
outerDiv.Discret("height", "30px");
outerDiv.Discret("padding", "5px");
outerDiv.Discret("background-color", "#EFFAFC");
outerDiv.Discret("border", "3px solid #3F48CC");
outerDiv.Discret("border-radius", "25px");
outerDiv.Discret("vertical-align", "middle");
outerDiv.Discret("cursor", "pointer");
tool.CSSAdditional.Add(outerDiv);
CodeCSS innerDiv = new CodeCSS(".innerDiv");
innerDiv.Discret("width", "auto");
innerDiv.Discret("height", "auto");
innerDiv.Discret("padding", "5px");
innerDiv.Discret("font-size", "11pt");
innerDiv.Discret("background-color", "#FDFEFE");
innerDiv.Discret("border", "1px solid white");
innerDiv.Discret("text-align", "center");
tool.CSSAdditional.Add(innerDiv);
CodeCSS lineUp = new CodeCSS(".lineUp");
lineUp.Discret("width", "auto");
lineUp.Discret("height", "auto");
lineUp.Discret("padding", "5px");
lineUp.Discret("font-size", "11pt");
lineUp.Discret("background-color", "#0000FF");
lineUp.Discret("color", "#FFFFFF");
tool.CSSAdditional.Add(lineUp);
CodeCSS lineDown = new CodeCSS(".lineDown");
lineDown.Discret("width", "auto");
lineDown.Discret("height", "auto");
lineDown.Discret("padding", "5px");
lineDown.Discret("font-size", "11pt");
lineDown.Discret("background-color", "#222222");
lineDown.Discret("color", "#000000");
tool.CSSAdditional.Add(lineDown);
sb = new StringBuilder();
sb.Append("var currentIndex; function onRoll(obj) { obj.oldBackgroundColor = obj.style.backgroundColor; ");
sb.Append("obj.oldTextColor = obj.style.color; obj.style.backgroundColor = obj.rollBackColor; obj.style.color = obj.rollColor; } ");
sb.Append("function unRoll(obj) { if (obj.oldBorderColor != undefined) { obj.style.borderColor = obj.oldBorderColor; ");
sb.Append("obj.oldBorderColor = null; } obj.style.backgroundColor = obj.oldBackgroundColor; ");
sb.Append("obj.style.color = obj.oldTextColor; } ");
sb.Append("function onClickDown(obj) { obj.oldBorderColor = obj.style.borderColor; obj.style.borderColor = obj.clickBorderColor; } ");
sb.Append("function onClickUp(obj) { if (obj.oldBorderColor != undefined) { obj.style.borderColor = obj.oldBorderColor; ");
sb.Append("obj.oldBorderColor = null; } } ");
sb.Append("function onSelectLine(obj) { obj.className = 'lineUp'; } ");
sb.Append("function onUnselectLine(obj) { obj.className = 'lineDown'; } ");
sb.Append("function RaiseArrow(obj) { var img; if (currentIndex) { img = document.getElementById('imgLeft_' + currentIndex); if (img) { img.src='left.png' }; img = document.getElementById('imgRight_' + currentIndex); if (img) { img.src='right.png' }; }; img = document.getElementById('imgLeft_' + obj.indexValue); if (img) { img.src='left_on.png' }; img = document.getElementById('imgRight_' + obj.indexValue); if (img) { img.src='right_on.png' }; currentIndex = obj.indexValue; }");
sb.Append("function LeaveArrow() { if (currentIndex) { img = document.getElementById('imgLeft_' + currentIndex); if (img) { img.src='left.png' }; img = document.getElementById('imgRight_' + currentIndex); if (img) { img.src='right.png' }; }; currentIndex = null; }");
sb.Append("function onImageRoll(obj) { if (obj.rollSrc != undefined) { obj.saveSrc = obj.src; obj.src = obj.rollSrc; } else { onRoll(obj); } }");
sb.Append(" function unImageRoll(obj) { if (obj.rollSrc != undefined) { obj.src = obj.saveSrc; } else { unRoll(obj); } }");
sb.Append("function onImageClickDown(obj) { if (obj.clickSrc != undefined) { obj.saveSrc = obj.src; obj.src = obj.clickSrc; } else { onClickDown(obj); } } ");
sb.Append("function onImageClickUp(obj) { if (obj.clickSrc != undefined) { obj.src = obj.saveSrc; } else { onClickUp(obj); } } ");
sb.Append("function serverSideCall(notif, data) { var p = document.getElementById('serverSideHandler'); p.setAttribute('notif', notif); p.setAttribute('data',data); p.click(); }");
sb.Append("function onTreeItemChanged(obj) { if (obj.innerText == '+') { obj.innerText = '- '; var i = document.getElementById(obj.itemName); i.style.display='block';} else { obj.innerText = '+'; var i = document.getElementById(obj.itemName); i.style.display='none';} }");
tool.JavaScript.Code = sb.ToString();
tool.HTML = @"<div id='serverSideHandler' style='display:none'></div>";
this.project.Tools.Add(tool);
tool = new HTMLTool();
tool.Path = "html";
tool.Name = "button";
tool.Id = "buttonObject";
sb = new StringBuilder();
sb.Append("<table cellspacing='0' cellpadding='0' width='100%' height='100%' style='border:1px solid red'>");
sb.Append("<tr><td><button id='{0}' class='md-raised'>{1}</button></td></tr></table>");
tool.HTML = sb.ToString();
this.project.Tools.Add(tool);
tool = new HTMLTool();
tool.Path = "html";
tool.Name = "link";
tool.Id = "clickableObject";
sb = new StringBuilder();
sb.Append("<table cellspacing='0' cellpadding='0' width='100%' height='100%'>");
sb.Append("<tr><td><div onselectstart='javascript:return false;' id='{0}'>");
sb.Append("<a href='javascript:void(0);' ondragstart='javascript:return false;'>{1}</a></div></td></tr></table>");
tool.HTML = sb.ToString();
this.project.Tools.Add(tool);
tool = new HTMLTool();
tool.Path = "html";
tool.Name = "image";
tool.Id = "imageObject";
sb = new StringBuilder();
sb.Append("<table cellspacing='0' cellpadding='0' width='100%' height='100%'>");
sb.Append("<tr><td><div onselectstart='javascript:return false;'>");
sb.Append("<img src='{1}' width='{2}px' height='{3}px' id='{0}' ondragstart='javascript:return false;'/></div></td></tr></table>");
tool.HTML = sb.ToString();
this.project.Tools.Add(tool);
tool = new HTMLTool();
tool.Path = "html";
tool.Name = "clickableImage";
tool.Id = "clickableImageObject";
sb = new StringBuilder();
sb.Append("<table cellspacing='0' cellpadding='0' width='100%' height='100%'>");
sb.Append("<tr><td><div onselectstart='javascript:return false;' id='{0}'>");
sb.Append("<img src='{1}' clickSrc='{5}' rollSrc='{6}' rollBackColor='{2}' rollColor='{3}' clickBorderColor='{4}' onmousedown='javascript:onImageClickDown(this);' onmouseup='javascript:onImageClickUp(this);' ");
sb.Append("onmouseover='javascript:onImageRoll(this);' onmouseout='javascript:unImageRoll(this);' ondragstart='javascript:return false;'/></div></td></tr></table>");
tool.HTML = sb.ToString();
this.project.Tools.Add(tool);
}