Пример #1
0
        /// <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?
        }
Пример #2
0
        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);
        }
Пример #3
0
        /// <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";
        }
Пример #4
0
        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();
        }