Script variables for addkeyboards

[RustyE]

kmw.init({attachType:'auto'});
kmw.addKeyboards('@en'); // Loads default English keyboard from Keyman Cloud (CDN)
kmw.addKeyboards('@th'); // Loads default Thai keyboard from Keyman Cloud (CDN)

In the above script, (which works fine :)), I would like to provide a variable for the addkeyboards values. I.E. instead of kmw.addkeyboards(’@en"), I’d like to send variables like (language1 = ‘en’ as an example: kmw.addkeyboards(language1)… kmw.addkeyboards(language2) and so forth.
The reason, is that on my webpage, the user may select a language on one page and expect it to load the appropriate keyboard on the next. The languages from which the user can select are over 100, thus (I think) making it burdensome to put 100+ addkeyboards statements on each page.
Any ideas are greatly appreciated

[Marc]

Is this what you are looking for? Note that I am adding all keyboards in a single addKeyboards call to reduce the number of server roundtrips.

const tags = ['en','fr','ta'];
kmw.addKeyboards(...tags.map(tag => '@'+tag));

I’ve used the ... spread operator here, which is not available in older browsers. You can do the same thing with kmw.addKeyboards.apply(kmw, tags.map(tag => '@'+tag)); if you need to support those old browsers – it’s just a little uglier to read!.

[RustyE]

Thanks Marc, this works with a constant perfectly
Is there a way to pass in a variable list of languages into this?
I’m embedding the Java script into MVC views.
I can pass the variable languages within the model or a viewbag variable, but wish to refer to these within your script.

i.e.
kmw.init({ attachType: ‘auto’ });
var tags = @Model.PreferredKeyboards;
kmw.addKeyboards(…tags.map(tag =>’@@’+tag))

Where a string array PreferredKeyboards is within the model and is populated with en, hi, es, fr etc.

Also, I have two texts on a view, one is English (or other) and the other is Spanish (or other). The keyboard shows below the texts, but I’d like to be able to change the keyboard language prgramatically based upon the language of the focused text. Any ideas?

[Marc]

Regarding initialization: this is getting outside the scope of what we can support here – it’s more general programming than KeymanWeb-specific. I don’t know anything about the framework you are using or the specifics of your MVC views and their initialisation order, so it’s hard to say how to pass a variable in from there. KeymanWeb is just Javascript so if you can console.log() a variable in the same place as you currently do kmw.init, then you should be able to pass that variable.

In terms of changing the keyboard programatically, you can associate a specific keyboard with a text control with setKeyboardForControl.

[RustyE]

My Controller is passing a string array of ISOcode language codes …

For those users implementing within an MVC application, this was accomplished with:

In a java script

   function (kmw) {
         kmw.init({ attachType: 'auto' });
         var tags = ['en', 'fr', 'hi'];         //set default
         var str = '@Html.Raw(Json.Encode(Model.PreferredKeyboards))';
         var newtags = str.split(",");
         let output = [];
         let tmp;

//for my received model string, it comes formatted as [“en”, “es”, “fr”]
//As i’m new at javascript, this isn’t very efficient, I’m sure, but it works.
for(let i = 0; i < newtags.length; i++){
tmp = newtags[i];
tmp = tmp.replace(‘"’, ‘’);
tmp = tmp.replace(‘"’, ‘’);
tmp = tmp.replace(‘[’, ‘’);
tmp = tmp.replace(‘]’, ‘’);
/* alert(tmp + ’ ’ + i)/
output.push(tmp);
}
/ alert(output)*/
kmw.addKeyboards(…output.map(tag =>‘@@’+tag))
})(keyman);

Any advice IS appreciated

[Marc]

Json.Encode is going to return a valid Javascript array for you so it should be injectable as an expression like I’ve done below:

function (kmw) {
  kmw.init({ attachType: 'auto' });
  var tags = @Html.Raw(Json.Encode(Model.PreferredKeyboards));
  kmw.addKeyboards(...tags.map(tag =>'@@'+tag))
})(keyman);

[RustyE]

This worked perfectly! Thanks Marc.
I have two textboxes (actually summernote textboxes). I have changed the interface to the float method, which looks good.
Is there a way to set the language based upon which textbox gains focus?
In other words, textbox 1 may be English and Textbox2 Hindi.
When textbox1 gains focus, I’d like the defaulted Keyman language to show English, when textbox2 gains focus, I’d like the defaulted Keyman language to show Hindi.
Thanks in advance
Rusty

[Marc]

Yes, this can be done with setKeyboardForControl.