Try the following:

const SkipToConfig = {
    "settings": {
        "skipTo": {
            // config options for text
            "buttonLabel"  : Joomla.Text._('PLG_SYSTEM_SKIPTO_SKIP_TO'),
            buttonLabel    : 'Skip To...',
            menuLabel      : 'Skip To and Page Outline',
            landmarksLabel : 'Skip To',
            headingsLabel  : 'Page Outline',
        }
    }
};

Of course replacing the other static text strings with Joomla.Text._('xxx')

awesome thanks @C-Lodder

            Factory::getDocument()->addScriptOptions(
	                'settings', 
	                array (
	                    'buttonLabel:'      => Text::_('PLG_SYSTEM_SKIPTO_SKIP_TO'),
	                    'buttonDivTitle:'   => Text::_('PLG_SYSTEM_SKIPTO_SKIP_TO_KEYBOARD'),
	                    'menuLabel:'        => Text::_('PLG_SYSTEM_SKIPTO_SKIP_TO_AND_PAGE_OUTLINE'),
	                    'landmarksLabel:'   => Text::_('PLG_SYSTEM_SKIPTO_SKIP_TO'),
	                    'headingsLabel:'    => Text::_('PLG_SYSTEM_SKIPTO_PAGE_OUTLINE'),
	                    'contentLabel:'     => Text::_('PLG_SYSTEM_SKIPTO_CONTENT'),
	                )
	             );

It looks from the code it should be

 	"settings": {
		"skipTo": {

???

@brianteeman since that script is outdated (es5 unmaintained) I'll propose to just port it directly yo Joomla with the appropriate attributes in the doc block. If that is something people are ok I'll do the porting

@brianteeman what @C-Lodder posted is JS you need to pass the values from the PHP, use the code I provided

@dgrammatiko they accepted a pr from @wilsonge and someone else this year ;)

But if you were to create a dedicated joomla version then it would be awesome if it had the extra features that the facebook skipto has.

@brianteeman sorry I've missed that. Here is my approach to this:

Create a PR in their repo and just add next to window.wordpress, the value || (window.Joomla && typeof window.Joomla.getOptions === 'function' && window.Joomla.getOptions('skipto-settings'))
Also change the 'settings' in the php needs to be renamed to 'skipto-settings'

if it had the extra features that the facebook skipto has

Do you have a link for that?

The facebook code is not available - you can see it by typing Alt /

wow cool:

So the only difference I see id that FB also has another menu with some routes (urls) some help links. Am I reading this correctly?

Am I doing something wrong? I can't install the plugin. I see it in Discovery. The Install command causes an error:

It is still a work in progress

@dgrammatiko yes thats about it

If it is not a plugin from the "system" group, but from the "skipto" group, maybe the language strings should be changed as well? (PLG_SYSTEM_SKIPTO_SKIP_TO , etc.),

@zwiastunsw at the moment I cant get the script or css to load at all :(

@dgrammatiko I must be doing something obviously wrong but I cant see why this isn't doing anything

			HTMLHelper::_('script', 'vendor/skipto/js/skipTo.js', ['version' => 'auto', 'relative' => true]);
			HTMLHelper::_('stylesheet', 'vendor/skipto/css/SkipTo.css', ['version' => 'auto', 'relative' => true], ['defer' => true]);

@zwiastunsw the language string constants are correct. Look at the other system plugin language files and you will see they follow the PLG_SYSTEM_NAME_ convention

I've already noticed - I understood the change in the xml file, sory

@brianteeman you need to init the script, try:

Factory::getDocument()->addScriptDeclaration(
"
window.skipToMenuInit(Joomla.getOptions('skipto-settings'));
"
);

Also you need to change the settings part in https://github.com/joomla/joomla-cms/pull/24042/files#diff-da83472045fbc26e0c9e98f68224eeedR56
to 'skipto-settings'. That should do it

@dgrammatiko that may work - I dont know. the problem is that the two lines that should load the css and js are just not doing anything. no 404, nothing, nada, zilch

Must be something obvious but I cant see it

@brianteeman try this:

			// Add strings for translations in Javascript.
			Factory::getDocument()->addScriptOptions(
				'skipto-settings',
					[
						'settings' => [
							'skipTo' => [
								'buttonLabel:'      => Text::_('PLG_SYSTEM_SKIPTO_SKIP_TO'),
								'buttonDivTitle:'   => Text::_('PLG_SYSTEM_SKIPTO_SKIP_TO_KEYBOARD'),
								'menuLabel:'        => Text::_('PLG_SYSTEM_SKIPTO_SKIP_TO_AND_PAGE_OUTLINE'),
								'landmarksLabel:'   => Text::_('PLG_SYSTEM_SKIPTO_SKIP_TO'),
								'headingsLabel:'    => Text::_('PLG_SYSTEM_SKIPTO_PAGE_OUTLINE'),
								'contentLabel:'     => Text::_('PLG_SYSTEM_SKIPTO_CONTENT'),
							]
						]
					]
			);
			HTMLHelper::_('script', 'vendor/skipto/skipTo.js', ['version' => 'auto', 'relative' => true]);
			HTMLHelper::_('stylesheet', 'vendor/skipto/SkipTo.css', ['version' => 'auto', 'relative' => true]);

			$document->addScriptDeclaration("window.skipToMenuInit(Joomla.getOptions('skipto-settings'));");

@brianteeman silly question, but did you run npm i?

@C-Lodder yes and it created
media/vendor/skipto/js/skipTo.js
media/vendor/skipto/css/SkipTo.css

if the files were not there then I would have expected to get a 404 or something. but the css and js are not even in the source of the generated page

@brianteeman @C-Lodder the error is on the relative path and the fact that the path given was absolute. The snippet above should fix that

Eg. HTMLHelper::_('script', 'vendor/skipto/skipTo.js', ['version' => 'auto', 'relative' => true]);
whenever you use 'relative' => true you shouldn't have the path with the js or css in it or the file will not get served

yes - looks like progress. - thanks

I will carry on working on this now

@dgrammatiko ah yes, didn't even notice the js/css in the path

@brianteeman - Just seen you've added a dropdown menu script. Would you be able to try using the Custom Element, as I've done here: https://github.com/joomla/joomla-cms/pull/23665/files ?

Only thing missing from my PR is fetching it via NPM

@C-Lodder I added it because I realised the paypal script came with it. They combine it into the skipto.js file in their build tools but we arent using the tools so I assumed I needed to do it this way.

More than happy to use anything you want me to use.

But right now I am still getting js errors

Uncaught TypeError: Cannot read property 'nodeType' of null
Uncaught TypeError: window.skipToMenuInit is not a function

As you can tell I really dont have a clue with js

I'm more than happy to help when I get back from work in a couple of hours

Thanks - I am out this evening but you can always do a pr on my branch

In the mean time, it looks like you're missing some config options:

https://github.com/paypal/skipto#configuring-skipto-options

such as the ID's. So that would probably explain the first error above.

From what I can tell the defaults are being used which should be ok - anyway moving on to work on something else for now

Fixed one of the errors
Uncaught TypeError: Cannot read property 'nodeType' of null
by adding defer

The skipto toolbar now loads and works
But the second problem still exists which prevents customisation
Uncaught TypeError: window.skipToMenuInit is not a function

@brianteeman if you type skipToMenuInit() in the browser's console what are you getting?

undefined

@zwiastunsw although it is not completely working yet (the changes to make language strings work) you can test the functionality right now. It requires a composer install and a npm install.

You can find out more about the plugin here http://paypal.github.io/skipto/

I tested it. It works well.
My questions:

• Will the add-on be configurable?
• Will it be able to be enabled on the front page?
• Also, are you considering adding accessibility help links (just like on Facebook)?

Will the add-on be configurable?

Once someone helps me work out why the current options isnt working

Will it be able to be enabled on the front page?

It could be. I was thinking - admin - on by default, site on by option

Also, are you considering adding accessibility help links (just like on Facebook)?

would love to but that would require creating our own version of the script

My suggestion: merge the plugins as it is now, to work on its usefulness (adding landmarks, adding headers on backend pages, etc.).

I really don't want to merge it until at least the translation is working

thanks to @wilsonge we dont get any javascript errors now.

still dont get the settings being used though :(

I will take another look tomorrow

Sorry I edited my code to fix that. Then the settings are used

Btw. How do you actually activate this thing. I can see it in the dom. just can't see any way to visually get it on screen. Or is that the idea?

Hit the tab key or alt 0

On Sat, 9 Mar 2019, 00:19 George Wilson, notifications@github.com wrote:

Btw. How do you actually activate this thing. I can see it in the dom.
just can't see any way to visually get it on screen. Or is that the idea?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#24042 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABPH8SMa1ZdRUfdGo1cmWu8VipQEZ4kAks5vUv34gaJpZM4bVRRy
.

@brianteeman try

$document->addScriptDeclaration("document.addEventListener('DOMContentLoaded', function() {
    window.skipToMenuInit(Joomla.getOptions('skipto-settings'));
});");

Hit the tab key or alt 0

OK. Either way - make the javascript change I suggested - @dgrammatiko 's is wrong (that function doesn't take an options argument)

$document->addScriptDeclaration("document.addEventListener('DOMContentLoaded', function() {
    window.SkipToConfig = Joomla.getOptions('skipto-settings');
    window.skipToMenuInit();
});");

Then see if the strings translate for you or not

I will do after the rugby #priorities

It's only important if scotland manage to upset :D :D

@wilsonge Thanks!!!!

The javascript is now working and like you I have had to add the $this->loadLanguage()

I am going to work on adding options etc in the plugin now

See #24142

@wilsonge yeah for sure I'm wrong: