sfWidgetWordCounter plugin (for Symfony 1.3, 1.4)
The sfWidgetWordCounterPlugin is a Symfony widget that adds a
jQuery word counter to a form field. This is a jQuery word counter
that counts the words in a given input field and displays the
counter in a html tag.
Features
The features of the counter are:
A word limit can be supplied. This makes the counter count down
from the limit
A custom message can be displayed when this word limit is
breached
Negative numbers can be shown. This is used when the limit is
breached.
Installation
Install the plugin (via a package)
symfony plugin:install sfWidgetWordCounterPlugin
Activate the plugin in the
apps/YOUR_APP/config/ProjectConfiguration.class.php
class ProjectConfiguration extends sfProjectConfiguration
{
public function setup()
{
$this->enablePlugins('sfWidgetWordCounterPlugin');
}
}
Publish the plugins assets
symfony plugin:publish-assets
Add the js path to the view.yml
javascripts: [ ../sfWidgetWordCounterPlugin/js/wordCounter.jQuery.js]
Add the widget to the autoload.yml
sfWidgetWordCounterPlugin:
name: sfWidgetWordCounterPlugin lib
path: %SFPLUGINSDIR%/sfWidgetWordCounterPlugin/lib/Widget/*
recursive: on
Add the counter widget to the form
$this->widgetSchema['counter'] = new sfWidgetWordCounter( array(
"counterid"=>"IDOFFIELDTOCOUNT",
"targetid"=> "IDOFCOUNTER",
"config"=>"{
//Options
}"
));
Clear you cache
symfony cc
jQueryPlugin Options
limit
- This is the word limit by default this is set to null so the
counter will just just keep counting upwards
defaultNoLimitFormat
- This is the text that is displayed when there isn't a limit by
default its set to "Word count: count%"
limitExceededFormat
- This is the text that is displayed if the word count breaches
the limit by default its set to "Remove count% word(s)"
limitNotExceededFormat
- This is the text that is displayed if the limit hasn't been
exceeded (This is used if limit is true)
defaultSearch
- This is the keyword that is used to search in the messages.
This is replaced by the value of the counter
Examples of use
Standard counter
This would produce a basic counter that just increments the count each time a word is added to the input field
// Form
$this->widgetSchema['example_1'] = new sfWidgetWordCounter( array(
"counterid"=>"example_1",
"targetid"=> "word_count"
));
// Rendered jQuery
$('example_1').wordCounter('example_1','word_count');
Basic with custom message
This would produce the above but with a custom message
// Form
$this->widgetSchema['example_2'] = new sfWidgetWordCounter( array(
"counterid"=>"example_2",
"targetid"=> "word_count"
"config" => "{
defaultNoLimitFormat: "You have managed to write count% word(s)"
}"
));
// Rendered jQuery
$('example-2').wordCounter('example-2','word-count-2',{
defaultNoLimitFormat : "You have managed to write count% word(s)"
});
Limit example 1
Instead of the word count increasing it decreases until the limit is met.
When this happens the user is told how many words are needed to be removed until the word count is 0.
// Form
$this->widgetSchema['example_3'] = new sfWidgetWordCounter( array(
"counterid"=>"example_3",
"targetid"=> "word_count"
"config" => "{
limit: 5
}"
));
// Rendered jQuery
$('example_3').wordCounter('example_3','word-count-3',{
limit : 5
});
Limit example 2
Same as previous example but custom messages are used.
// Form
$this->widgetSchema['example_4'] = new sfWidgetWordCounter( array(
"counterid"=>"example_4",
"targetid"=> "word_count"
"config" => "{
limit : 5,
limitExceededFormat : 'Oh no you have exceeded the word count by count% word(s)',
limitNotExceededFormat : 'Words left count%'
}"
));
// Rendered jQuery
$('example_4').wordCounter('example_4','word-count-4',{
limit : 5,
limitExceededFormat: 'Oh no you have exceeded the word count by count% word(s)',
limitNotExceededFormat: 'Words left count%'
});
Showing negative numbers when the limit has been exceeded
// Form
$this->widgetSchema['example_5'] = new sfWidgetWordCounter( array(
"counterid"=>"example_5",
"targetid"=> "word_count"
"config" => "{
limit : 5,
limitExceededFormat: 'Words left count%',
limitNotExceededFormat: 'Words left count%',
showNegativeNumbers : 1
}"
));
// Rendered jQuery
$('example_5').wordCounter('example_5','word-count-5',{
limit : 5,
limitExceededFormat: 'Words left count%',
limitNotExceededFormat: 'Words left count%',
showNegativeNumbers : 1
});