Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>Decorator test</title>
    <script type="text/javascript">
      <!--
        /**
         * Paragraph is the master object that the client will interact with
         * in a black-box composite fashion.
         */
        Paragraph = function() {
            this.text = new Text();
        }
        Paragraph.prototype.set_text = function(text) {
            this.text.set_text(text);
        };
        Paragraph.prototype.add_decoration = function(decoration) {
            this.text = new decoration(this.text);
        }
        Paragraph.prototype.remove_decoration = function(decoration) {
            if(this.text.remove_decoration) {
                this.text.remove_decoration(this, decoration);
            }
        };
        Paragraph.prototype.render = function() {
            return this.text.render();
        };

        /**
         * Text is a sub-object of Paragraph that can be decorated. When it is decorated
         * in Paragraph.prototype.add_decoration, Paragraph is unaware of the change when
         * rendering. all decorations must share the interface of Text
         */
        Text = function() {};
        Text.prototype.set_text = function(text) {
            this.text = text;
        };
        Text.prototype.render = function() {
            return this.text;
        };

        /**
         * Decorator is the base abstract class of all Decorators. it exists to match the
         * interface of all Decorators to the interface of Text, and to define the constructor
         */
        Decorator = function Decorator(text) {
            this.text = text;
        };
        Decorator.prototype.render = function() {
            return this.text.render();
        };
        Decorator.prototype.remove_decoration = function(parent, decoration) {
            if(decoration.name == this.name) {
                parent.text = this.text;
            }
            if(this.text.remove_decoration) {
                this.text.remove_decoration(this, decoration);
            }
        };

        /**
         * the individual decorators just modify the render method to do their own thing,
         * before calling this.text.render, which encapsulates Paragraph.text.
         */
        BoldDecorator = function BoldDecorator(text) {
            this.text = text;
            this.name = 'BoldDecorator';
        };
        BoldDecorator.prototype = new Decorator();
        BoldDecorator.prototype.render = function() {
            return '<b>' + this.text.render() + '</b>';
        };

        ItalicDecorator = function ItalicDecorator(text) {
            this.text = text;
            this.name = 'ItalicDecorator';
        };
        ItalicDecorator.prototype = new Decorator();
        ItalicDecorator.prototype.render = function() {
            return '<i>' + this.text.render() + '</i>';
        };

        var init = function init() {
            var p = new Paragraph(),
                output = document.getElementById('output');

            output.innerHTML = 'Rendering:' + '<br />';

            // Paragraph -> Text.set_text
            p.set_text('this is the text');

            // Paragraph -> Text.render
            output.innerHTML += p.render() + '<br />';

            // Paragraph.add_decoration
            p.add_decoration(BoldDecorator);

            // Paragraph -> BoldDecorator.render -> Text.render
            output.innerHTML += p.render() + '<br />';

            // Paragraph.add_decoration
            p.add_decoration(ItalicDecorator);

            // Paragraph -> ItalicDecorator.render -> BoldDecorator.render -> Text.render
            output.innerHTML += p.render() + '<br />';

            // Paragraph.remove_decoration -> ItalicDecorator.remove_decoration
            //   -> BoldDecorator.remove_decoration
            p.remove_decoration(BoldDecorator);

            // Paragraph -> ItalicDecorator.render -> Text.render
            output.innerHTML += p.render() + '<br />';
        };

        window.onload = init;
      -->
    </script>
  </head>
  <body>
    <h1>Decorator Test</h1>
    <div id="output"></div>
  </body>
</html>