Character counter #1276

gyrus · 2019-06-05T14:44:41Z

Addition of field parameters which provide functionality for character counters, and character limit enforcement.

Description

Functionality for text, textarea and WYSIWYG field types only.
Not available for grouped WYSIWYG fields.

New field parameters

char_counter: 'characters' | 'words'
char_max: integer. When defined, counter shows remaining chars / words.
char_max_msg: string, default: 'Your text may be truncated.'
char_max_enforce: boolean, default: false. Currently only applied (as maxlength attribute) to text and textarea fields which use 'characters' for counter.

Motivation and Context

This was a suggested feature which I needed for a project and seemed like a useful addition to the plugin.

Fixes #1241

Risk Level

Medium risk? Has been tested on front-end forms.

Testing procedure

Tested in a local vanilla WP installation with Twenty-Fifteen theme and no other plugins (admin only).
Also tested on a live client project with a complex custom theme and 40+ other plugins - both admin and front-end forms.
Tested in latest Chrome, Safari, Firefox (Mac), IE11 (Win10 / Win7) and MS Edge (Win10).
The only issue I've found is an 'Uncaught TypeError' in console when using the Chrome Form Filler extension to fill a field with dummy content. However, functionality doesn't seem to be affected.

Types of changes

New feature (non-breaking change which adds functionality)

Checklist

My code follows the code style of this project.
My code and pull requests meets the Contributing guidelines.
Unfortunately I'm not familiar enough with unit testing to have written unit tests (or be sure they're even needed!).
I can prepare all proper docs for CSS classes, etc.

IMPORTANT NOTES

Due to problems with jshint, cmb2.min.js isn't currently working. JS all works fine when unminified scripts are used in a dev environment. AFAIK the problem is with the use of _.debounce() in cmb2-char-counter.js. This is copied from WP core handling of TinyMCE. The _ is available in core. Either Grunt jshint needs modifying so it can recognise core code as being available, or I need an alternative debounce.
In any case, the code here needs a proper build process to be run to get cmb2.min.js properly synched.
New @since tags are marked with ???? placeholder, to be replaced when release version is known.

Other notes

New JS uses wp.utils.WordCounter(), but the word-count core script is only enqueued when needed. This was throwing an error on pages where main CMB2 JS is included, but there's no fields (e.g. admin dashboard). So I include it with: ( wp.utils ? new wp.utils.WordCounter() : {} )

Screenshots

…in repeatable groups

…fault on front-end)

…r views where counter script isn't needed

…using 'characters' counter

adriantoll · 2019-08-01T15:37:15Z

@jtsternberg @tw2113 Hello. Is there an ETA for a decision on this? I could do with this for a project I'm working on, and wondering whether to roll my own or wait for this to land in core.

tw2113 · 2019-08-01T15:44:14Z

@adriantoll None I'm aware of. Feel free to pull in the changes to your own copy of the repo and try out. It'd also aid in testing and making sure nothing would break.

adriantoll · 2019-08-01T16:03:32Z

@tw2113 OK, will try to do that in the next few working days and will report back.

adriantoll · 2019-08-09T09:27:11Z

@tw2113 I've tried this on a local copy of a client site, both front and back end, and it works well.

@gyrus A couple of small points:

The character counter doesn't count spaces as characters - not sure if that's intentional or not. I'd expect it to count spaces.
char_max_msg isn't hidden on the front end to begin with, unlike the back end which is conditional on hitting the limit. That could create uncertainty because it's displayed when the text shouldn't be at risk of being truncated.

gyrus · 2019-08-09T11:05:46Z

@adriantoll I can look into the spaces issue with the character. The code uses the WP core function from /wp-admin/js/word-count.js, which takes 3 types: 'words', 'characters_excluding_spaces' or 'characters_including_spaces' - and I am passing 'characters_including_spaces' there. So something odd going on.

Regarding the char_max_msg on the front-end, thanks for spotting that, looks like I've been developing with cmb2_enqueue_css set to false. I'll add some bare-bones styling to the front-end CSS.

gyrus · 2019-08-09T14:32:45Z

@adriantoll I've added .cmb2-char-max-msg { display: none; } to _front.scss. As far as I can see the idea in front-end styles in CMB2 is to keep to absolute essentials, so I've followed that - minimal functional CSS, nothing decorative.

Regarding the spaces in character counting, it looks like the counter's not immediately updating when you type a space at the end of the string - but it updates, including the space, once you type another non-space character. This is because the string is trimmed before the count is done. This seems right, to discount trailing spaces. Let me know if I've missed something though.

mike-weiner · 2019-08-23T23:12:37Z

Any updates as to whether or not this is in the works to be pulled into CMB2?

gyrus · 2019-08-24T09:04:58Z

@mike-weiner Apart from the minor issues in the CMB2 build process for this (documented above, I assume easily resolved by CMB2 devs), there's nothing from my point of view currently holding it back.

jtsternberg · 2019-08-24T15:17:52Z

@gyrus great work on this and thank you for your patience. Thanks to all others for testing, it really helps the process and helps to confirm that this is a good addition! I will be merging and making some tweaks to the update, hopefully very soon, but feel free to bump this thread as a reminder if it lags again.

mike-weiner · 2019-08-24T15:29:52Z

@gyrus This is freaking awesome!

Is there anyway to add in an option to his feature to limit a field to a certain type of character along with your character limit? Like alphanumeric only? Etc.?

If not, no worries! Thank you for all of the hard work!

jtsternberg · 2019-08-24T17:41:15Z

@mike-weiner hmm I’d rather not turn this into a validation tool. That’s certainly needed, but a bit out of scope for something like this. A simple fix for validation is to use the html5 validation field types and attributes.

jtsternberg · 2019-08-24T19:25:09Z

@gyrus there's some cleanup that needs to be done. I will do it, but I ask that you test the cleaned up version with all your existing testing procedures so you can let me know if anything breaks as a result. Some of the things I'll be cleaning up:

redundancy in code
if:endif; -- does not follow code style of CMB2 (vs if{})
enqueue snafus... word-count does not appear to be enqueued in all cases, and also since you're using underscore _.debounce(), we need to make sure that is also enqueued explicitly
Maybe some others. Still reviewing.

gyrus · 2019-08-25T11:10:42Z

@mike-weiner Agree with @jtsternberg that character type is extending the scope a bit here. But many thanks for your support, glad you like the feature.

@jtsternberg Great news! Thanks for the tidy-up, and of course I'm happy to thoroughly test the merged version. Keep us posted.

mike-weiner · 2019-08-25T12:45:26Z

I am testing this in a dev. environment of mine and everything seems to be working great, except for one thing.

I am trying to overwrite the default the char_max_msg, but it looks as though it is not updating. (See screenshot below).

jtsternberg · 2019-08-25T12:56:25Z

Yes good point. I removed that in favor of the way we handle other text strings, as well as added the other text strings to be able to be overridden. See the text parameter described here: https://github.com/CMB2/CMB2/wiki/Field-Parameters#text

You can see the text ids documented in the changelog entry: https://github.com/CMB2/CMB2/blob/develop/CHANGELOG.md

jtsternberg · 2019-08-25T13:00:06Z

@gyrus it’s merged/updated. You can test with the development branch.

mike-weiner · 2019-08-25T13:03:49Z

Ah!

Thank you @jtsternberg !

gyrus · 2019-09-15T10:37:36Z

@jtsternberg Current code in develop works well with our tests.

* upstream/develop: (93 commits) Ensure to enqueue wp-color-picker Add props for CMB2#1331 Update "develop" bootstrap classname Proposal of CODE OF CONDUCT File Update version/copyright in scripts/stylesheets Fix issues with some tests to get them all passing `CMB2::is_box_type()` now also checks for taxonomies if box is registered to "term" object type. Prepare for 2.7.0 release Add all missing props/udpates to changelog bump tested-to value Rename CMB2_hookup to CMB2_Hookup Fixes CMB2#1328 Validate composer.json Tested Up To confirmations. Update issue templates Add license file to meet Community standards Add changelog for the register_rest_field_cb param Abstract some aspects of the getting/setting of box rest fields to make custom handling easier Add ability to short-circuit the register_rest_field with a callback. Allows registering callback with a different rest slug Oops, send the fallback value to the box_types method Add props for CMB2#1238 Fixes CMB2#1238 by merging with changes, and add CMB2::is_box_type method for checking. Fixes CMB2#1158 Add props for CMB2#1314 minify minify Re-add padding to textareas for readability Fix alpha color picker sample color styling clarify coment limit to 5.3 branch update block editor radio fix initial 5.3 prep work Add new "cmb2_display_class_{$fieldtype}" filter and field "display_class" parameter to allow specifying the class to use to display the field (in admin columns, etc) Fix another place where taxonomy_select_hierarchical was missed Add props for CMB2#1296 & CMB2#1297 Add props for CMB2#1300 Add props for CMB2#1307 Update npm dependencis. Fixes CMB2#1308 Remove grunt-contrib-compress and grunt-combine-media-queries to cut down on npm dependencies taxonomy_select_hierarchical is added in order to save correctly in to database Fix tests broke by introduction of character counter field property Fix issue introduced in 7cb3e00 where field was updated not not returned, breaking things If field has supporting data (e.g. file), add supporting data to field data (i.e supporting field id/value) Add changelog and props for CMB2#1300 Update .min file for CMB2#1300 Add comments to document changes in CMB2#1300 Include .CodeMirror class in sortable exclusions Run the field-specific actions for all fields (including fields in groups). Fixes CMB2#1157 Escaping Improvements to File Base Escaping improvements to File Fields Add changelog and props for CMB2#1276 Refactor character-counter integration ...

gyrus added 11 commits April 16, 2019 18:28

Exchange: Character counters to work with new CMB2 plugin contribution

2c6d1c6

Character counter for textarea fields

ae93ca4

Character counter: maxlength attribute for optional enforcement

077ff85

Character counter: Add iterator to field ID for repeatable fields

48de657

Character counter: Max length attribute for text fields

8d3d8da

Character counter: Working for WYSIWYG; not yet working with WYSIWYG …

188d341

…in repeatable groups

Character counter: Add 'word-count' JS dependency (not included by de…

fa01aaf

…fault on front-end)

Character counter: Conditional for passing wp.utils.WordCounter(), fo…

ad53cc4

…r views where counter script isn't needed

Character counter: Don't add for grouped WYSIWYGs

2f2d58d

Character counter: Remove redundant 'char_max_enforce' parameter default

6729857

Character counter: 'char_max_enforce' reinstated for text / textarea …

6888f68

…using 'characters' counter

Character counter: .cmb2-char-max-msg set to display:none in _front.scss

6ef3b68

jtsternberg merged commit 6ef3b68 into CMB2:develop Aug 25, 2019

jtsternberg added a commit that referenced this pull request Aug 25, 2019

Add changelog and props for #1276

0dd8d17

greatislander mentioned this pull request Feb 23, 2020

feat: limit short title to 72 characters (resolves #271) platform-coop-toolkit/coop-library-framework#289

Merged

2 tasks

Character counter #1276

Character counter #1276

Uh oh!

Conversation

gyrus commented Jun 5, 2019

Description

New field parameters

Motivation and Context

Risk Level

Testing procedure

Types of changes

Checklist

IMPORTANT NOTES

Other notes

Screenshots

Uh oh!

adriantoll commented Aug 1, 2019

Uh oh!

tw2113 commented Aug 1, 2019

Uh oh!

adriantoll commented Aug 1, 2019

Uh oh!

adriantoll commented Aug 9, 2019

Uh oh!

gyrus commented Aug 9, 2019

Uh oh!

gyrus commented Aug 9, 2019

Uh oh!

mike-weiner commented Aug 23, 2019

Uh oh!

gyrus commented Aug 24, 2019

Uh oh!

jtsternberg commented Aug 24, 2019

Uh oh!

mike-weiner commented Aug 24, 2019

Uh oh!

jtsternberg commented Aug 24, 2019

Uh oh!

jtsternberg commented Aug 24, 2019

Uh oh!

gyrus commented Aug 25, 2019

Uh oh!

mike-weiner commented Aug 25, 2019

Uh oh!

jtsternberg commented Aug 25, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jtsternberg commented Aug 25, 2019

Uh oh!

mike-weiner commented Aug 25, 2019

Uh oh!

gyrus commented Sep 15, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

jtsternberg commented Aug 25, 2019 •

edited

Loading