# Source: ui/text.reel/text.js

    /*global require, exports, console, MontageElement */

    /**
     * @module "montage/ui/text.reel"
     */
    var Component = require("../component").Component;

    /**
     * A Text component shows plain text. Any text can be safely displayed without
     * escaping, but the browser will treat all sequences of white space as a
     * single space.
     *
     * The text component replaces the inner DOM of its element with a TextNode and
     * it renders the [value]{@link Text#value} string in it.
     *
     * @class module:montage/ui/text.Text
     * @extends module:montage/ui/component.Component
     * @classdesc A component that displays a string of plain text.
     */
    var MontageText = exports.Text = Component.specialize( /**  @lends module:montage/ui/text.Text# */ {

        hasTemplate: {
            value: false
        },

        _value: {
            value: null
        },

        /**
         * The string to be displayed. `null` is equivalent to the empty string.
         * @type {string}
         * @default null
         */
        value: {
            get: function () {
                return this._value;
            },
            set: function (value) {
                if (this._value !== value) {
                    this._value = value;
                    this.needsDraw = true;
                }
            }
        },

        /**
         * An optional converter for transforming the `value` into the
         * corresponding rendered text.
         * Converters are called at time of draw.
         * @type {?Converter}
         * @default null
        */
        converter: {
            value: null
        },

        /**
         * The default string value assigned to the Text instance.
         * @type {string}
         * @default "" empty string
         */
        defaultValue: {
            value: ""
        },

        _valueNode: {
            value: null
        },

        _RANGE: {
            value: document.createRange()
        },

        enterDocument: {
            value: function (firstTime) {
                if (firstTime) {
                    var range = this._RANGE;
                    range.selectNodeContents(this.element);
                    range.deleteContents();
                    this._valueNode = document.createTextNode("");
                    range.insertNode(this._valueNode);
                    this.element.classList.add("montage-Text");
                }
            }
        },

        draw: {
            value: function () {
                // get correct value
                var displayValue = (typeof this._value !== "undefined" && this._value !== null) ? this._value : this.defaultValue;

                //push to DOM
                this._valueNode.data = this.converter ? this.converter.convert(displayValue) : displayValue;
            }
        }

    });

    if (window.MontageElement) {
        MontageElement.define("montage-text", MontageText, {
            observedAttributes: ['value']
        });
    }