Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
textarea with statistics property
.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;
}
<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>
public class TestPage : SitePageData
{
[ClientEditor(ClientEditingClass = "textAreaWithStatistics.textAreaWidget")]
public virtual string Teaser { get; set; }
}
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;
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment