User tests: Successful: Unsuccessful:
A request was made to have a character count when entering a meta description. I have done this and applied it to the Site Meta Description in the global configuration as shown in the screenshot and all the meta description fields)
This can be applied to any textarea field by adding charcounter="true"
to the field definition in the xml.
The character count has a default maximum of 200 characters but this can be configured in the field xml by adding maxlength="160"
Accessibility is obviously very important and this PR addresses this as well. The meta description text is announced when the user focuses on the input together with the string to indicate the characters used. Obviously a live count announced by the screenreader would be distracting so it waits 2000 milliseconds before updating the user with the screen reader user with the current count.
The string 86 characters remaining of 160 characters.
is a regular joomla language string except the numbers are replaced by the script. In this example I chose
"{remaining} characters remaining of {maxlength} characters."
. Available placeholders are {remaining}, {maxlength}, {length}
Needs updating to document the new charcounter option
Status | New | ⇒ | Pending |
Category | ⇒ | Administration com_config Language & Strings JavaScript Repository Layout Libraries NPM Change |
Labels |
Added:
?
NPM Resource Changed
?
|
yeah - something isn't right - but too tired now - will look again in the morning
I can continue testing tomorrow evening after work.
Btw. my suggested changes are still valid. Last comment that you can forget about them applies only if value of variable “$class” has already a space at the end, but I don’t think that’s the case. Comment clearly says that but for a quick reader it might be less clear. Maybe my changes will even fix the js problem because they will fix css classes of the html element?
@richard67 I am stepping through the code to see what causes the break - currently I am getting an error without the js changes I made
Undefined method enableAsset in class Joomla\CMS\WebAsset\WebAssetManager
~So I am guessing that something went wrong with the conflict fix. ~ guessed wrong
@brianteeman Without this PR I don't get any JS error, and with this PR I get it only when going to Global Configuration where the character count is used.
What if the short-and-sweet js does a DOM query for css class "charcount" and doesn't find it due to the missing space between class names which I mentioned in my suggested changes, and there is no error handling?
I strongly suggest to apply my changes for a test and then see what happens.
I have fixed the space - it was a valid issue but not related to the problem you saw
I have switched to using htmlhelper to load the script for now as I couldnt work out how to use the webasset stuff.
As this is for review as a concept I think thats ok for now
thanks for all your help
@brianteeman No, thank YOU for all the work you do for Joomla .. I would be an a..hole if I could help but would not do.
Is it ready for testing?
Yes
Should we ping Fedik to check if there is an issue with the web asset manager?
Ah, and by the way: Could we display the counter in hex instead of decimal? Those template ranters say our backend is made by developers for developers, and I don't wanna disappoint them ;-) (joking)
Can't do hex but I can do binary
Even better ;-)
I have tested this item
Works like a charm and looks good.
I have tested this item
Status | Pending | ⇒ | Ready to Commit |
RTC
From the original post
If accepted it is quick to add it to all the meta description fields)
@brianteeman Good question where to add it. Only all the meta descriptions? Or do we have other fields, too, where it could be useful?
Update: Metadata of course important because of recommendations and limitations by Google etc.
I gave RTC because I assumed you will do the other fields with another, future PR, but if you wanna do it with this one here it is also OK. In the latter case: Shall I remove RTC?
the only place to put it is the meta description. I will add them all to this PR tomorrow
@brianteeman So shall I remove RTC? Or leave it?
Labels |
Added:
?
|
Category | Administration com_config Language & Strings JavaScript Repository Layout Libraries NPM Change | ⇒ | Administration com_categories com_config com_contact com_content com_languages com_newsfeeds com_tags Language & Strings JavaScript Repository Front End Layout Libraries NPM Change |
Now includes all components and updated original post
Edit an article.
Go to Publising tab.
Below the textarea box.
String not translated.
COM_CONFIG_METADESC_COUNTER
Status | Ready to Commit | ⇒ | Pending |
Oops. Will correct in the morning by changing to a global string
Labels |
Removed:
?
|
Not sure if this a problem, but I noticed that the
package.json
andpackage-lock.json
files were modified when applying the PR.
@jwaisner Is not a problem, is desired. This PR modifies them because introducing a new 3rd party npm package named "short-and-sweet" for the character counting.
I have tested this item
I still have the same issue after the latest commit... I am backing out of testing this one as it is apparent I am unable to understand why this PR behaves any differently than others I have tested.
@jwaisner The message said that there is no asset (js or css) for the short-and-sweet package. Which version of patchtester did you use? Latest 4 beta still has issues when having a PR like this here which changes package-lock.json. Or 3? If 3: Have you run npm install
? It will see the changed package.json
and fetch the package and later build and copy the assets includinh the ones of this new package, and then it will update package-lock.json, too, if necessary (but should not be neccessary when using the package-lock.json from this PR because there it is all included already).
@richard67 I am using 4.0 beta 2. Should I fall back to 3.0?
I have tested this item
All ok.
No errors in PHP log or browser console, no unwanted side effects noticed.
Status | Pending | ⇒ | Ready to Commit |
RTC
Status | Ready to Commit | ⇒ | Fixed in Code Base |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2020-02-06 21:46:15 |
Closed_By | ⇒ | wilsonge | |
Labels |
Added:
?
|
Thanks!
Woohoo. Thanks all!!!
@brianteeman Shall I now make the PR to change to binary numbers?
@brianteeman Do you put a strict limit on the maximum length of the field? This will not save the form if the meta-description is longer than the set field length?
If so, then this approach is not true!
The limit on the maximum number of characters in the meta description, as in the browser header, is a recommendation and should not limit the user
@brianteeman I just tested with your last change for the asset structure. I get following JS error when opening global config:
TypeError: menuToggleIcon is null, file admin-menu.js, line 72, column 7
.