Char counter for text/textarea fields

[Soma]

Aha yes now I see. Ryan explains why and he's correct that a InputfieldTextareaCount would be a good/better way to go.

I think a way around it could be a check at line #41

if ($this->process != 'ProcessField') {
    return;
}

Edit: There's a bug filed on github long time ago.

But as with many modules up here, the problem is, dev's have time to make the module but not maintain it.

[Soma]

I've helped so many modules and filed issues or proposed a fix, it's getting annoying :/

[Joss]

I've helped so many modules and filed issues or proposed a fix, it's getting annoying :/

That's because you are one of the good guys!

[bfncs]

Hi everyone,

thanks, Joss for again pointing to the issue and Some for suggesting a fix.

I want to maintain the module and would be more than happy to add a fix to the repository. The bug described (as well as the one on Github) does only occured when used in conjunction with Formbuilder, which is a paid module. I don't own it because I have no particular use for it, so it's also not possible for me to test suggested fixes.

If someone could please check whether Soma's suggestion works out (which I suppose, because actually he is one of the good guys) and I'll add it in an instant.

P.S.: Ryan's post mentioned above is actually an answer to me seeking advice on the best implementation. At the time asked and answered I didn't see too much benefit in implementing the functionality as an Inputfield of it's own in comparison with the current implementation - both had their advantages and drawbacks.

Seeing that that this now caused confusion to some and the Inputfield implementation could possibly be used with Formbuilder, I see the really benefit in doing the other implementation. I'm seriously considering to add the other implementation as a separate module now.

[Soma]

@boundaryfunctions

I think this would also happen if used in a front-end form with using form API, which used Inputfield->render(). This would be the same as Formbuilder.

[Joss]

That might explain why it is happening in my front end form.

I have tried that edit and it seems to work. I haven't checked thoroughly whether it causes any other issues in the process, though I cant think what problems it would cause.

boundaryfunctions - you should be able to check those yourself okay because it is not a question of having form builder installed.

Thanks guys!

[Martijn Geerts]

Probably you could check it against processPageEdit process, and otherwise disable it.

[bfncs]

Ok, I just pushed an update to the modules repository, also bumping the version number to 1.0.3. Could you please confirm that this fixes the problem for you?

@Soma:

I just tried to force the error in a frontend form but that worked fine instead. The problem in this case was in the function hooked after InputfieldTextarea::getConfigInputfields() which was only called in the backend. Thanks anyway for your - as always - very helpful suggestion!

@Martijn:

Thanks for the suggestion. I'm not sure whether this would be too restrictive because there might be handy uses of this module in the frontend - which would then be forbidden. I currently much favour to convert it into an Inputfield on it's own.

Thanks a lot to all of you for your help.

[Joss]

There is an up and downside as an input field.

The up is that conflicts should be non-existent.

The down is that you cannot add it to an existing field.

Maybe there is a way to do it where it targets very specific fields rather than just hitting all textareas.

That way it might also play with text fields as well? (is that possible?) for instance when you want to limit a title length.

[Soma]

Hmm nananana... you can always switch the fieldtype and inputfield. As they would be compatible.

Now this module gets loaded on every request.

[bbb]

Any chance this module can be updated to support textarea language fields?

[Martijn Geerts]

Hi Barry, you could install Admin Custom Files and use the 'ProcessPageEditTruncate.js' drop-in. That one is multi-language aware.

[Juergen]

Unfortunately it doesnt work with FREDI in modal windows.

[asbjorn]

Great tip, Martijn Geerts!

Do anyone here now how to setup fields in ProcessPageEditTruncate.js? 

Readme says 4. Configure your fields in ProcessPageEditTruncate.js and save the file.

But I cannot see how to do it in the JS-file.

[Martijn Geerts]

@laban, sorry didn't spot your question earlier.

But here's the answer.

// DOM is ready
$(function () {
    // field with the name attribute title
    $("[name='title']").truncate({
        characters: 55,
        prefix: '',
        suffix: ' character(s)'
    });

    // field with the name attribute an-other-field
    $("[name='an-other-field']").truncate({
        characters: 160,
        prefix: '',
        suffix: ' character(s)'
    });

});

[asbjorn]

I have now installed the plugin, moved ProcessPageEditTruncate.js to AdminCustomFiles's root folder in "modules" and tested the custom settings you have provided (thank you!) multiple places, but I cannot seem to get it right. I'll paste my code below.

ProcessPageEdit is also activated in the module settings in ProcessWire (but no other options have been setup there).

Some guidance on what I am doing wrong would be much appreciated. (I am running ProcessWire 2.7.2). 

(function ($) {
	$.fn.truncate = function(options) {

		var $fields = this,
			name = $fields.attr('name'),
			settings = $.extend({
				characters: 128,
				prefix: '',
				suffix: '',
				class: 'notes'
			}, options );

		if ($fields.parent('.LanguageSupport').length) {
			var $fields = $("#langTabs_Inputfield_" + name ).find("input, textarea");
		}

		$fields.after("<span class='" + settings.class + "'></span>");

		$fields.each(function (index, el) {
			var truncate = function () {
				var value = $(el).val(),
					typed = typeof value != 'undefined' ? value.length : 0,
					left = settings.characters - typed;
				if (left < 0) {
					$(el).val(value.substr(0, settings.characters));
					truncate();
				} else {
					$(el).next("span").text(settings.prefix + left + settings.suffix);
				}
			}

			$(el).keyup(function() { truncate(); });
			truncate();
		});

		return this;
	};

}(jQuery));

// DOM is ready
$(function () {
    // field with the name attribute title
    $("[name='meta_title']").truncate({
        characters: 55,
        prefix: 'You have',
        suffix: ' character(s) left'
    });

});

[Martijn Geerts]

01. Is the name of your field in the actually 'meta_title'?

02. ProcessPageEditTruncate.js should be in '/site/templates/AdminCustomFiles/'!

[asbjorn]

1. Yes.

2. Thanks, this is where I messed up! It works