Skip to content

Commit 1548256

Browse files
ractoonractoon
committed
Merge branch 'diptopol-feature/text-count-overflow-message'
2 parents 2546bda + 4dac259 commit 1548256

File tree

6 files changed

+83
-38
lines changed

6 files changed

+83
-38
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,4 +159,4 @@ init : function(el){} // Callback: function(element
159159
- [juliovedovatto](https://github.com/juliovedovatto) / [alvaro-canepa](https://github.com/alvaro-canepa) - multiple classes support for counter container
160160
- [dtipson](https://github.com/dtipson) - multiple classes error fix
161161
- [jmichalicek](https://github.com/jmichalicek) - count carriage returns/newlines as 2 characters
162-
- [diptopol](https://github.com/diptopol) - `stopInputAtMaximum` with `twoCharCarriageReturn` count fix, trimmed newline calculation fix, maximum text reached condition fix
162+
- [diptopol](https://github.com/diptopol) - `stopInputAtMaximum` with `twoCharCarriageReturn` count fix, trimmed newline calculation fix, maximum text reached condition fix, text count overflow notification

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jquery-text-counter",
3-
"version": "0.6.4",
3+
"version": "0.7.0",
44
"main": "textcounter.js",
55
"license": "MIT",
66
"ignore": [

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"minimum",
1212
"maximum"
1313
],
14-
"version": "0.6.4",
14+
"version": "0.7.0",
1515
"author": {
1616
"name": "ractoon",
1717
"url": "http://www.ractoon.com"

‎textcounter.jquery.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"minimum",
1010
"maximum"
1111
],
12-
"version": "0.6.4",
12+
"version": "0.7.0",
1313
"author": {
1414
"name": "ractoon",
1515
"url": "http://www.ractoon.com"

‎textcounter.js‎

Lines changed: 77 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* jQuery Text Counter Plugin v0.6.4
2+
* jQuery Text Counter Plugin v0.7.0
33
* https://github.com/ractoon/jQuery-Text-Counter
44
*
55
* Copyright 2014 ractoon
@@ -24,9 +24,17 @@
2424
// append the count element
2525
var counterText = base.options.countDown ? base.options.countDownText : base.options.counterText,
2626
counterNum = base.options.countDown ? base.options.max : 0,
27-
$formatted_counter_text = $('<div/>').html(counterText.replace('%d', '<span class="' + base.options.textCountClass + '">' + counterNum + '</span>')).contents();
27+
$formatted_counter_text = $('<div/>').addClass(base.options.textCountMessage)
28+
.html(counterText.replace('%d', '<span class="' + base.options.textCountClass + '">' + counterNum + '</span>')),
29+
$count_overflow_text = $('<div/>').addClass(base.options.countOverflowContainerClass);
30+
31+
base.hideMessage($count_overflow_text);
32+
33+
base.$container = $('<' + base.options.countContainerElement + '/>')
34+
.addClass(base.options.countContainerClass)
35+
.append($formatted_counter_text)
36+
.append($count_overflow_text);
2837

29-
base.$container = $('<' + base.options.countContainerElement + '/>').addClass(base.options.countContainerClass).append($formatted_counter_text);
3038
base.$text_counter = base.$container.find('span');
3139
base.$el.after(base.$container);
3240

@@ -86,6 +94,7 @@
8694
if (textCount === base.options.max && base.options.max !== 0) {
8795
// TextCounter: maxcount(el) Callback
8896
base.options.maxcount(base.el);
97+
base.clearErrors('max');
8998

9099
} else if (textCount > base.options.max && base.options.max !== 0) {
91100
if (base.options.stopInputAtMaximum) { // if the string should be trimmed at the maximum length
@@ -218,29 +227,61 @@
218227
$this.addClass(base.options.inputErrorClass);
219228
$countEl.addClass(base.options.counterErrorClass);
220229

221-
if (base.options.displayErrorText) {
222-
switch(type) {
223-
case 'min':
230+
switch(type) {
231+
case 'min':
224232
errorText = base.options.minimumErrorText;
225233
break;
226-
case 'max':
234+
case 'max':
227235
errorText = base.options.maximumErrorText;
236+
237+
if (base.options.countOverflow) {
238+
base.setOverflowMessage();
239+
}
240+
228241
break;
229-
}
242+
}
230243

244+
if (base.options.displayErrorText) {
231245
if (!$countEl.children('.error-text-' + type).length) {
232246
$countEl.append('<' + base.options.errorTextElement + ' class="error-text error-text-' + type + '">' + errorText + '</' + base.options.errorTextElement + '>');
233247
}
234248
}
235249
};
236250

251+
base.setOverflowMessage = function () {
252+
base.hideMessage(base.$container.find('.' + base.options.textCountMessage));
253+
254+
base.removeOverflowMessage();
255+
256+
var overflowText = base.options.countOverflowText
257+
.replace('%d', base.textCount(base.$el.val()) - base.options.max)
258+
.replace('%type', base.options.type + 's');
259+
260+
var overflowDiv = base.$container.find('.' + base.options.countOverflowContainerClass).append(overflowText);
261+
base.showMessage(overflowDiv);
262+
},
263+
264+
base.removeOverflowMessage = function () {
265+
base.$container.find('.' + base.options.countOverflowContainerClass).empty();
266+
},
267+
268+
base.showMessage = function ($selector) {
269+
$selector.css('display', 'inline');
270+
},
271+
272+
base.hideMessage = function ($selector) {
273+
$selector.css('display', 'none');
274+
},
275+
237276
base.clearErrors = function(type) {
238277
var $this = base.$el,
239278
$countEl = base.$container;
240279

241280
$countEl.children('.error-text-' + type).remove();
242281

243282
if ($countEl.children('.error-text').length == 0) {
283+
base.removeOverflowMessage();
284+
base.showMessage(base.$container.find('.' + base.options.textCountMessage));
244285
$this.removeClass(base.options.inputErrorClass);
245286
$countEl.removeClass(base.options.counterErrorClass);
246287
}
@@ -251,32 +292,36 @@
251292
};
252293

253294
$.textcounter.defaultOptions = {
254-
'type' : "character", // "character" or "word"
255-
'min' : 0, // minimum number of characters/words
256-
'max' : 200, // maximum number of characters/words, -1 for unlimited, 'auto' to use maxlength attribute
257-
'countContainerElement' : "div", // HTML element to wrap the text count in
258-
'countContainerClass' : "text-count-wrapper", // class applied to the countContainerElement
259-
'textCountClass' : "text-count", // class applied to the counter length
260-
'inputErrorClass' : "error", // error class appended to the input element if error occurs
261-
'counterErrorClass' : "error", // error class appended to the countContainerElement if error occurs
262-
'counterText' : "Total Count: %d", // counter text
263-
'errorTextElement' : "div", // error text element
264-
'minimumErrorText' : "Minimum not met", // error message for minimum not met,
265-
'maximumErrorText' : "Maximum exceeded", // error message for maximum range exceeded,
266-
'displayErrorText' : true, // display error text messages for minimum/maximum values
267-
'stopInputAtMaximum' : true, // stop further text input if maximum reached
268-
'countSpaces' : false, // count spaces as character (only for "character" type)
269-
'countDown' : false, // if the counter should deduct from maximum characters/words rather than counting up
270-
'countDownText' : "Remaining: %d", // count down text
271-
'countExtendedCharacters' : false, // count extended UTF-8 characters as 2 bytes (such as Chinese characters)
272-
'twoCharCarriageReturn' : false, // count carriage returns/newlines as 2 characters
295+
'type' : "character", // "character" or "word"
296+
'min' : 0, // minimum number of characters/words
297+
'max' : 200, // maximum number of characters/words, -1 for unlimited, 'auto' to use maxlength attribute
298+
'countContainerElement' : "div", // HTML element to wrap the text count in
299+
'countContainerClass' : "text-count-wrapper", // class applied to the countContainerElement
300+
'textCountMessage' : "text-count-message", // class applied to the counter message
301+
'textCountClass' : "text-count", // class applied to the counter length (the count number)
302+
'inputErrorClass' : "error", // error class appended to the input element if error occurs
303+
'counterErrorClass' : "error", // error class appended to the countContainerElement if error occurs
304+
'counterText' : "Total Count: %d", // counter text
305+
'errorTextElement' : "div", // error text element
306+
'minimumErrorText' : "Minimum not met", // error message for minimum not met,
307+
'maximumErrorText' : "Maximum exceeded", // error message for maximum range exceeded,
308+
'displayErrorText' : true, // display error text messages for minimum/maximum values
309+
'stopInputAtMaximum' : true, // stop further text input if maximum reached
310+
'countSpaces' : false, // count spaces as character (only for "character" type)
311+
'countDown' : false, // if the counter should deduct from maximum characters/words rather than counting up
312+
'countDownText' : "Remaining: %d", // count down text
313+
'countExtendedCharacters' : false, // count extended UTF-8 characters as 2 bytes (such as Chinese characters)
314+
'twoCharCarriageReturn' : false, // count carriage returns/newlines as 2 characters
315+
'countOverflow' : false, // display text overflow element
316+
'countOverflowText' : "Maximum %type exceeded by %d", // count overflow text
317+
'countOverflowContainerClass' : "text-count-overflow-wrapper", // class applied to the count overflow wrapper
273318

274319
// Callback API
275-
'maxunder' : function(el){}, // Callback: function(element) - Fires when counter under max limit
276-
'minunder' : function(el){}, // Callback: function(element) - Fires when counter under min limit
277-
'maxcount' : function(el){}, // Callback: function(element) - Fires when the counter hits the maximum word/character count
278-
'mincount' : function(el){}, // Callback: function(element) - Fires when the counter hits the minimum word/character count
279-
'init' : function(el){} // Callback: function(element) - Fires after the counter is initially setup
320+
'maxunder' : function(el){}, // Callback: function(element) - Fires when counter under max limit
321+
'minunder' : function(el){}, // Callback: function(element) - Fires when counter under min limit
322+
'maxcount' : function(el){}, // Callback: function(element) - Fires when the counter hits the maximum word/character count
323+
'mincount' : function(el){}, // Callback: function(element) - Fires when the counter hits the minimum word/character count
324+
'init' : function(el){} // Callback: function(element) - Fires after the counter is initially setup
280325
};
281326

282327
$.fn.textcounter = function(options) {

0 commit comments

Comments
 (0)