/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
var s = new IHTMLStyle
{
// http://www.w3schools.com/tags/att_style_scoped.asp
// http://caniuse.com/style-scoped
scoped = true
}.AttachTo(page.Content);
s.setAttribute("scoped", "scoped");
s.StyleSheet[IHTMLElement.HTMLElementEnum.span].style.color = "red";
// does not work yet?
}
static IStyleSheet InternalConstructor()
{
var s = new HTML.IHTMLStyle();
// http://phrogz.net/JS/AddCSS_test.html
var h = Native.Document.getElementsByTagName("head");
if (h.Length > 0)
{
h[0].appendChild(s);
}
else
{
s.AttachToDocument();
}
return(s.StyleSheet);
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// http://davidwalsh.name/add-rules-stylesheets
// http://stackoverflow.com/questions/5359943/javascript-set-print-stylesheet
var pstyle = new IHTMLStyle
{
type = "text/css",
media = "print"
};
//pstyle.AttachTo(
// Native.document.head
//);
// .StyleSheet is available only if attached to DOM?
pstyle["h1"].border = "13px solid green";
//pstyle["h1"].backgroundColor = "yellow";
//pstyle["h1"].color = "green";
//IStyleSheet.Default["@media print { h1 }"].style.color = "yellow";
// http://www.w3schools.com/css/css_mediatypes.asp
#region test
var mp = IStyleSheet.Default["@media print"];
// { type = 4 }
Console.WriteLine(
new
{
mp.type,
CSSRuleTypes.MEDIA_RULE
}
);
if (mp.type == CSSRuleTypes.MEDIA_RULE)
{
var mpr = (CSSMediaRule)(object)mp;
foreach (var media in mpr.media)
{
// { media = print }
Console.WriteLine(new { media });
}
}
#endregion
// __awIABmCv4jKFf2Sg5roQag(__bQIABjls6jSgl0UFIggGlQ()[1], 'h1').style.color = 'purple';
//page.Header.cl
//page.Header.EnsureID();
// http://www.w3schools.com/css/css_attribute_selectors.asp
//page.Header.setAttribute("style-id", "45");
IStyleSheet.Default[CSSMediaTypes.print][page.Header].style.color =
"blue";
IStyleSheet.Default[CSSMediaTypes.print][page.Header].style.boxShadow =
"inset 0 0 0 10000px yellow";
//Console.WriteLine(
// new
// {
// page.Header.style.parentRule,
// page.Header.style.cssText,
// //IStyleSheet.Default[CSSMediaTypes.print]["h1"].style.cssText
// }
// );
// @media print
// {
// h1 {
// border: 3px solid blue;
// }
//}
//new IHTMLDiv { }.AttachToHead().innerHTML =
// @"<style type='text/css' media='print'>h1{ border: 13px solid yellow;}</style>";
//f.FormBorderStyle = FormBorderStyle.None;
new Form1{FormBorderStyle = FormBorderStyle.None}.AttachFormTo(page.output);
//f.GetHTMLTarget().AttachTo(page.output);
//f.Show();
//f.WindowState = FormWindowState.Maximized;
IStyleSheet.Default
[CSSMediaTypes.print]
[page.output].style.border = "0px solid black";
//IStyle.OverflowEnum.hidden;
page.Print.onclick +=
delegate
{
Native.window.print();
};
IStyleSheet.Default
[CSSMediaTypes.print]
[page.Print].style.display = IStyle.DisplayEnum.none;
var s = new SpecialLayout();
var i = new IHTMLIFrame();
// hide it from plain sight
i.style.display = IStyle.DisplayEnum.none;
//new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox }.AttachToDocument().With(
// x =>
// {
// x.onclick += delegate
// {
// i.ToggleVisible();
// };
// }
//);
// it will never load with out this call!
i.AttachToDocument();
// Uncaught TypeError: Cannot read property 'document' of undefined
page.PrintFromIframe.disabled = true;
i.onload += delegate
{
var idoc = i.contentWindow.document;
// http://stackoverflow.com/questions/16649943/css-to-set-a4-paper-size
idoc.body.style.minWidth = "21cm";
var x = new IHTMLStyle().AttachTo(idoc.body);
s.AttachTo(idoc.body);
x.StyleSheet[CSSMediaTypes.print][s.Header].style.color =
"yellow";
x.StyleSheet[CSSMediaTypes.print][s.Header].style.boxShadow =
"inset 0 0 0 10000px red";
s.Header.innerText = "test";
x.StyleSheet[CSSMediaTypes.print][s.SpecialText].before.style.content = "'print hello world'";
x.StyleSheet[CSSMediaTypes.print][s.SpecialText].before.style.color = "red";
x.StyleSheet[CSSMediaTypes.print][s.SpecialText].before.style.borderBottom = "1px solid red";
// http://www.w3schools.com/cssref/pr_gen_content.asp
//x.StyleSheet
// //[CSSMediaTypes.print]
// ["#" + s.SpecialText.id + ":before"]
// .style.setProperty("content", "'hello world'", "");
new Form1 { Text = "for print" }.AttachFormTo(s.output);
page.PrintFromIframe.disabled = false;
page.PrintFromIframe.onclick +=
delegate
{
i.contentWindow.print();
};
};
i.src = "about:blank";
}
public __TreeView()
{
this.InternalElement.style.backgroundColor = "yellow";
// for svg renderer we would want full view?
this.InternalElement.style.overflow = IStyle.OverflowEnum.auto;
// can it work for shadow elements too?
// need it only once?
// what triggers it?
this.InternalAtAfterVisibleChanged +=
delegate
{
// Uncaught Error: fault at IHTMLStyle.StyleSheet
var style = new IHTMLStyle { }.AttachTo(InternalElement);
// dont want to see it in svg render
// yes this seems to do the trick.
style.style.display = IStyle.DisplayEnum.none;
var selector = "." + typeof(__TreeNode).Name + ">.Header:hover";
Console.WriteLine(new { selector });
// we need to wait until attached to document?
//var rule = style.StyleSheet.AddRule("." + typeof(__TreeNode).Name + ":hover");
new IStyle(style[selector])
{
textDecoration = "underline",
cursor = IStyle.CursorEnum.pointer,
backgroundColor = "blue",
color = "white"
};
// Content
// level1
//new IStyle(style["." + typeof(__TreeNode).Name + ">.Content"])
//{
// textIndent = "2em"
//};
// level2
//new IStyle(style["." + typeof(__TreeNode).Name + " ." + typeof(__TreeNode).Name + ">.Content"])
//{
// textIndent = "4em"
//};
};
this.Nodes = new __TreeNodeCollection { that__TreeView = this };
//this.InternalElement[].click
// will we get the same font in svg render?
this.InternalSetDefaultFont();
}