? NPM Resource Changed ? ? Pending

User tests: Successful: Unsuccessful:

avatar brianteeman
brianteeman
4 Feb 2020

redo of #25262 and #27359

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)

image

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}

Documentation

Needs updating to document the new charcounter option

avatar brianteeman brianteeman - open - 4 Feb 2020
avatar brianteeman brianteeman - change - 4 Feb 2020
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 4 Feb 2020
Category Administration com_config Language & Strings JavaScript Repository Layout Libraries NPM Change
avatar brianteeman brianteeman - change - 4 Feb 2020
Labels Added: ? NPM Resource Changed ?
avatar richard67
richard67 - comment - 4 Feb 2020

@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.

avatar brianteeman
brianteeman - comment - 4 Feb 2020

yeah - something isn't right - but too tired now - will look again in the morning

avatar richard67
richard67 - comment - 4 Feb 2020

I can continue testing tomorrow evening after work.

avatar richard67
richard67 - comment - 5 Feb 2020

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?

avatar brianteeman
brianteeman - comment - 5 Feb 2020

@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

avatar richard67
richard67 - comment - 5 Feb 2020

@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.

avatar brianteeman
brianteeman - comment - 5 Feb 2020

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

avatar richard67
richard67 - comment - 5 Feb 2020

@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?

avatar brianteeman
brianteeman - comment - 5 Feb 2020

Yes

avatar richard67
richard67 - comment - 5 Feb 2020

Should we ping Fedik to check if there is an issue with the web asset manager?

avatar richard67
richard67 - comment - 5 Feb 2020

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)

avatar brianteeman
brianteeman - comment - 5 Feb 2020

Can't do hex but I can do binary

avatar richard67
richard67 - comment - 5 Feb 2020

Even better ;-)

avatar richard67 richard67 - test_item - 5 Feb 2020 - Tested successfully
avatar richard67
richard67 - comment - 5 Feb 2020

I have tested this item successfully on 483db5b

Works like a charm and looks good.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27804.

avatar jwaisner jwaisner - test_item - 5 Feb 2020 - Tested successfully
avatar jwaisner
jwaisner - comment - 5 Feb 2020

I have tested this item successfully on 483db5b


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27804.

avatar richard67 richard67 - change - 5 Feb 2020
Status Pending Ready to Commit
avatar richard67
richard67 - comment - 5 Feb 2020

RTC


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27804.

avatar brianteeman
brianteeman - comment - 5 Feb 2020

From the original post

If accepted it is quick to add it to all the meta description fields)

avatar richard67
richard67 - comment - 5 Feb 2020

@Fedik When this PR has been merged, could you have a look on assets handling and if possible in a future PR replace the htmlhelper calls here by usage of the new methods with asset manager?

avatar richard67
richard67 - comment - 5 Feb 2020

@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?

avatar brianteeman
brianteeman - comment - 5 Feb 2020

the only place to put it is the meta description. I will add them all to this PR tomorrow

avatar richard67
richard67 - comment - 5 Feb 2020

@brianteeman So shall I remove RTC? Or leave it?

avatar brianteeman brianteeman - change - 5 Feb 2020
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - change - 5 Feb 2020
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
avatar brianteeman
brianteeman - comment - 5 Feb 2020

Now includes all components and updated original post

avatar brianteeman brianteeman - change - 5 Feb 2020
The description was changed
avatar brianteeman brianteeman - edited - 5 Feb 2020
avatar Quy
Quy - comment - 5 Feb 2020

Edit an article.
Go to Publising tab.
Below the textarea box.
String not translated.
COM_CONFIG_METADESC_COUNTER

avatar richard67 richard67 - change - 5 Feb 2020
Status Ready to Commit Pending
avatar brianteeman
brianteeman - comment - 5 Feb 2020

Oops. Will correct in the morning by changing to a global string

avatar brianteeman brianteeman - change - 6 Feb 2020
Labels Removed: ?
avatar brianteeman
brianteeman - comment - 6 Feb 2020

@Quy language issues should be resolved now

avatar brianteeman
brianteeman - comment - 6 Feb 2020

Please retest as @Fedik has provided the correct js changes to use webassets

avatar richard67
richard67 - comment - 6 Feb 2020

Will retest tonight after work (CET). Thanks @Fedik .

avatar jwaisner
jwaisner - comment - 6 Feb 2020

After applying this PR the article layout is messed up and I am showing errors.

27804

I ran npm ci as well. I also applied this PR via Patchtester and the diff.

Not sure if this a problem, but I noticed that the package.json and package-lock.json files were modified when applying the PR.

avatar richard67
richard67 - comment - 6 Feb 2020

Not sure if this a problem, but I noticed that the package.json and package-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.

avatar Quy Quy - test_item - 6 Feb 2020 - Tested successfully
avatar Quy
Quy - comment - 6 Feb 2020

I have tested this item successfully on a73e030


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27804.

avatar jwaisner
jwaisner - comment - 6 Feb 2020

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.

avatar richard67
richard67 - comment - 6 Feb 2020

@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).

avatar jwaisner
jwaisner - comment - 6 Feb 2020

@richard67 I am using 4.0 beta 2. Should I fall back to 3.0?


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27804.

avatar richard67
richard67 - comment - 6 Feb 2020

@jwaisner If you have npm: Yes, then apply patch and run "npm install". Then clear cache just to be sure. or switch off CI integration, then it should behave like pt 3.

avatar richard67 richard67 - test_item - 6 Feb 2020 - Tested successfully
avatar richard67
richard67 - comment - 6 Feb 2020

I have tested this item successfully on a73e030

  • Global Config - Site
  • Category
  • Contact
  • Article
  • Content Language
  • Newsfeed
  • Tags

All ok.

No errors in PHP log or browser console, no unwanted side effects noticed.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27804.

avatar richard67 richard67 - change - 6 Feb 2020
Status Pending Ready to Commit
avatar richard67
richard67 - comment - 6 Feb 2020

RTC


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27804.

avatar wilsonge wilsonge - change - 6 Feb 2020
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: ?
avatar wilsonge
wilsonge - comment - 6 Feb 2020

Thanks!

avatar brianteeman
brianteeman - comment - 6 Feb 2020

Woohoo. Thanks all!!!

avatar richard67
richard67 - comment - 6 Feb 2020

@brianteeman Shall I now make the PR to change to binary numbers?

avatar kernusr
kernusr - comment - 5 Mar 2020

@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

Add a Comment

Login with GitHub to post a comment