textarea with statistics property

textarea with statistics - styles

.extended-textArea .textArea-wrapper {
    display: inline-block;
}

.extended-textArea textarea {
    width: 500px;
}

.extended-textArea .statistics {
    display: inline-block;
    vertical-align: top;
    color: #999;
    font-style: italic;
}

textarea with statistics - template

<div class="dijitInline extended-textArea" tabindex="-1" role="presentation">
    <div data-dojo-attach-point="stateNode, tooltipNode" class="textArea-wrapper">
        <textarea class="textArea-default-wrapping" data-dojo-attach-point="textArea" data-dojo-type="dijit.form.Textarea"></textarea>
    </div>
    <div class="statistics">
        <div>Characters: <span data-dojo-attach-point="totalCharacters">0</span></div>
        <div>Words: <span data-dojo-attach-point="totalWords">0</span></div>
        <div>Lines: <span data-dojo-attach-point="totalLines">1</span></div>
    </div>
</div>

textarea with statistics - using in model

public class TestPage : SitePageData
{
    [ClientEditor(ClientEditingClass = "textAreaWithStatistics.textAreaWidget")]
    public virtual string Teaser { get; set; }
}

textarea with statistics - widget

define([
        "dojo/_base/declare",
        "dojo/_base/lang",
        "dijit/_Widget",
        "dijit/_TemplatedMixin",
        "dijit/_WidgetsInTemplateMixin",
        "epi/epi",
        "epi/shell/widget/_ValueRequiredMixin",
        "dojo/text!./template.html",
        "xstyle/css!./styles.css"
    ],
    function(
        declare,
        lang,
        _Widget,
        _TemplatedMixin,
        _WidgetsInTemplateMixin,
        epi,
        _ValueRequiredMixin,
        template
    ) {

        return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, _ValueRequiredMixin], {
            templateString: template,

            intermediateChanges: false,

            value: null,

            postCreate: function() {
                this.inherited(arguments);

                this.textArea.set("intermediateChanges", this.intermediateChanges);
                this.connect(this.textArea, "onChange", this._onInputChange);
                this.connect(this.textArea, "onKeyDown", this._refreshStatistics);
                this.connect(this.textArea, "onKeyUp", this._refreshStatistics);
            },

            _setValueAttr: function (value) {
                this._setValue(value, true);
            },

            _setReadOnlyAttr: function (value) {
                this._set("readOnly", value);
                this.textArea.set("readOnly", value);
            },

            _setIntermediateChangesAttr: function (value) {
                this.textArea.set("intermediateChanges", value);
                this._set("intermediateChanges", value);
            },

            _onInputChange: function (value) {
                this._setValue(value);
            },

            _setValue: function (value, updateTextarea) {
                if (this._started && epi.areEqual(this.value, value)) {
                    return;
                }
                this._set("value", value);

                if (updateTextarea) {
                    this.textArea.set("value", value);
                }
                this._refreshStatistics();

                if (this._started && this.validate()) {
                    this.onChange(value);
                }
            },

            _refreshStatistics: function () {
                var value = this.textArea.get("value");
                this.totalCharacters.innerHTML = value.length;
                if (value.trim().length > 0) {
                    this.totalWords.innerHTML = value.trim().replace(/\s+/gi, ' ').split(' ').length;
                } else {
                    this.totalWords.innerHTML = "0";
                }
                this.totalLines.innerHTML = value.split(/\r*\n/).length;
            }
        });
    });