Writing a Style Library


Style processing is perhaps the most complex part of the browser. Encapsulating all details into a library is definitively a good idea. Here we continue revising the library of "Writing an Event Library" to encapsulate the details of style processing. You can see the source file gossip-0.4.js directly.

We'll use the revised library to rewrite several examples we've seen. First, we rewrite the first example of Getting and Setting Styles.
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <script type="text/javascript" src="js/gossip-0.4.js"></script>
        <script type="text/javascript">
            XD.bind(window, 'load', function() {
                XD('#message').css({
                    color : '#ffffff',
                    backgroundColor : '#ff0000',
                    width : '300px',
                    height : '200px',
                    paddingLeft : '250px',
                    paddingTop : '150px'
                });
            });
        </script>
    </head>
    <body>
        <div id="message">This is a message.</div>
    </body>
</html>

Then, we write its second example.
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <script type="text/javascript" src="js/gossip-0.4.js"></script>
        <style type="text/css">
            #message {
                color: #ffffff;
                background-color: #ff0000;
                width: 500px;
                height: 200px;
                padding-left: 250px;
                padding-top: 150px;
            }
        </style>
        <script type="text/javascript">
            XD.bind(window, 'load', function() {
                XD('#console').html(
                   XD('#message').css('backgroundColor')
                );
            });
        </script>
    </head>
    <body>
        <div id="message">This is a message.</div>
        <span id="console"></span>
    </body>
</html>

The following is the third example of Element Positions.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <style type="text/css">
            #container {
                color: #ffffff;
                background-color: #ff0000;
                height: 50px;
                position: absolute;
                top: -100px;
                left:-100px;
            }
        </style>
        <script type="text/javascript" src="js/gossip-0.4.js"></script>
        <script type="text/javascript">
            XD.bind(window, 'load', function() {
                var search = XD('#search').offset();
                XD('#container').css({
                    left : search.left + 'px',
                    top  : search.top + search.offsetHeight + 'px',
                    width: search.offsetWidth + 'px'
                });
            });
        </script>        
    </head>
    <body>
        <div id="container">This is a message</div>
        <hr>
        Search: <input id="search" type="text">
    </body>
</html>

The following is the first example of Display, Visibility and Opacity:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <style type="text/css">
            #message {
                color: #ffffff;
                background-color: #ff0000;
                border-width: 10px;
                border-color: black;
                border-style: solid;
                width: 100px;
                height: 50px;
                padding: 50px;
            }
        </style>
        <script type="text/javascript" src="js/gossip-0.4.js"></script>
        <script type="text/javascript">
            XD.bind(window, 'load', function() {
                XD('#toggle').click(function() {
                    var messageXD = XD('#message');
                    if(messageXD.css('display') === 'none') {
                        messageXD.show();
                    }
                    else {
                        messageXD.hide();
                    }
                });
            });
        </script>        
    </head>
    <body>
        <button id='toggle'>Toggle the visible status</button>
        <hr>
        This is a text! This is a text! This is a text! This is a text! This is a text!
        <div id="message">Message 1</div>
        This is other text!This is other text!This is other text!This is other text!This is other text!
    </body>
</html>

The following is its second example.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <script type="text/javascript" src="js/gossip-0.4.js"></script>
        <script type="text/javascript">
            XD.bind(window, 'load', function() {
                XD('#fadeIn').click(function() {
                    XD('#image').fadeIn(10000);
                });
                XD('#fadeOut').click(function() {
                    XD('#image').fadeOut(10000);
                });
            });
        </script>        
    </head>
    <body>
        <button id='fadeOut'>Fade Out</button>
        <button id='fadeIn'>Fade In</button><br>
        <img id="image" src="../images/caterpillar_small.jpg">
    </body>
</html>

The following is the rewritten example of The className Property.
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <style type="text/css">
            .released {
                border-width: 1px;
                border-color: red;
                border-style: dashed;
            }
            .pressed {
                border-width: 5px;
                border-color: black;
                border-style: solid;
            }
        </style>
        <script type="text/javascript" src="js/gossip-0.4.js"></script>
        <script type="text/javascript">
            XD.bind(window, 'load', function() {         
                XD('#logo').click(function() {
                    XD(this).toggleClass('released', 'pressed');
                });
            });
        </script>
    </head>
    <body>
        <img id="logo" class='released' 
             src="../images/caterpillar_small.jpg">
    </body>
</html>

The following is the written example of Window Dimensions.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <style type="text/css">
            #message1 {
                text-align: center;
                vertical-align: middle;
                color: #ffffff;
                background-color: #ff0000;
                width: 100px;
                height: 50px;
                position: absolute;
                top: 0px;
                left: 0px;
            }
        </style>
        <script type="text/javascript" src="js/gossip-0.4.js"></script>
        <script type="text/javascript">
            XD.bind(window, 'load', function() {         
                var message1XD = XD('#message1');
                message1XD.opacity(0.5);
                var viewport = XD.viewport();
                message1XD.css({
                    width : viewport.width + 'px',
                    height: viewport.height / 2 + 'px',
                    paddingTop : viewport.height / 2 + 'px'
                });
                XD('#confirm').click(function() {
                    message1XD.css({
                        width: '0px',
                        height: '0px',
                        paddingTop: '0px',
                        display: 'none'
                    });
                });
            });
        </script>        
    </head>
    <body>
        Blah...Blah...<br>Blah...Blah...<br>Blah...Blah...<br>
        <button>Do it</button>
        <div id="message1">
            Ads...Ads...<br><br>
            <button id="confirm">confirm</button>
        </div>
    </body>
</html>