Some additional info :
This is supposed to work fine with RTE. How can I use this with textfield now. Any thoughts will be helpful.
--------------------------------------------------------------------------------------------------------------------
CQ.Ext.namespace("EXAMPLE.CQ.rte");
/**
* Rich Text Editor plugin which displays an icon in the RTE toolbar
* indicating whether or not the text content has passed a set of
* thresholds.
*
* The plugin can be configured with a defaultColor configuration property
* (defaults to green) which will be used when none of the thresholds has been reached.
*
* The thresholds themselves are populated by a thresholds configuration
* property. This is a multivalued property like this:
* 10;yellow
* 30;red
*
* which indicates that if there are more than 10 characters, but less than 30,
* the icon should be yellow and if there are more than 30 characters, the
* icon should be red.
*/
EXAMPLE.CQ.rte.ThresholdsPlugin = CQ.Ext.extend(CQ.form.rte.plugins.Plugin, {
/**
* @private
*/
indicatorUI: null,
/**
* @private
*/
thresholds: null,
constructor: function(editorKernel) {
EXAMPLE.CQ.rte.ThresholdsPlugin.superclass.constructor.call(this, editorKernel);
},
getFeatures: function() {
return [ "thresholds" ];
},
notifyPluginConfig: function(pluginConfig) {
var plugin = this;
pluginConfig = pluginConfig || { };
CQ.Util.applyDefaults(pluginConfig, {
"tooltips": {
"thresholds": {
"title": CQ.I18n.getMessage("Thresholds"),
"text": CQ.I18n.getMessage("Indicates the length of the text relative to the configured thresholds")
}
},
"defaultColor" : "green"
});
this.thresholds = [];
if (pluginConfig.thresholds) {
$CQ.each(pluginConfig.thresholds, function(index, value) {
if (value.indexOf(";") !== -1) {
var parts = value.split(";");
plugin.thresholds.push({
"lowerBoundary" : parseInt(parts[0]),
"color" : parts[1]
});
}
});
}
if (this.thresholds.length) {
pluginConfig.features = "*";
}
this.config = pluginConfig;
},
updateState: function(selDef) {
if (this.indicatorUI &&
this.indicatorUI.getExtUI() &&
this.indicatorUI.getExtUI().btnEl) {
var newColor = this.config.defaultColor;
// get the HTML from the editor
var currentText = this.editorKernel.getProcessedHtml();
// then strip the HTML
currentText = CQ.Ext.util.Format.stripTags(currentText);
currentText = currentText.replace(/ /g, "");
// then remove the extra whitespace
currentText = CQ.Util.trim(currentText.replace(/^\s+$/g," "));
$CQ.each(this.thresholds, function(index, value) {
if (currentText.length >= value.lowerBoundary) {
newColor = value.color;
}
});
this.indicatorUI.getExtUI().btnEl.setStyle("background-color", newColor);
}
},
initializeUI: function(tbGenerator) {
var plg = CQ.form.rte.plugins;
var ui = CQ.form.rte.ui;
if (this.isFeatureEnabled("thresholds")) {
this.indicatorUI = new ui.TbElement("thresholds", this, false,
this.getTooltip("thresholds"));
tbGenerator.addElement("thresholds", plg.Plugin.SORT_LINKS, this.indicatorUI, 10);
}
}
});
CQ.form.rte.plugins.PluginRegistry.register("thresholds", EXAMPLE.CQ.rte.ThresholdsPlugin);
