Search code examples
javascriptjqueryvirtual-keyboardlanguage-switching

How to change display name of custom keys in mottie virtual keyboard

I'm using mottie virtual keyboard and it's working well.

I created a custom button for language switcher between Arabic and English language, by default it's showing English as a default language.

When this button is clicked it's switching language correctly but not change display name of langSwitcher key.

$("#searchInput").keyboard({
      language: 'en',// default language
      keyBinding: 'mousedown touchstart',
      layout: 'qwerty',
      caretToEnd: true,
      autoAccept: true,
      usePreview: false,
      appendLocally: true,
      autoAcceptOnValid: true,
      display: {
        langSwitcher: 'English',

      },
      container: {theme: 'b', cssClass: 'ui-body'},
    });

    $.keyboard.keyaction.langSwitcher = function (keyboard) {

      if (keyboard.options.language == 'en') {
        keyboard.options.display.langSwitcher = "English";
        keyboard.options.layout = 'ms-Arabic (102)';
        keyboard.options.language = 'ar';
        

      } else {
        keyboard.options.display.langSwitcher = 'عربي';
        keyboard.options.layout = 'qwerty';
        keyboard.options.language = 'en';

      }
      console.log(keyboard.options.display.langSwitcher);
      keyboard.redraw();
    };
<link href="https://mottie.github.io/Keyboard/docs/css/bootstrap.min.css" rel="stylesheet">

	<link href="https://mottie.github.io/Keyboard/docs/css/font-awesome.min.css" rel="stylesheet">
	<link href="https://mottie.github.io/Keyboard/docs/css/jquery-ui.min.css" rel="stylesheet">

	<!-- keyboard widget css & script (required) -->
	<link href="https://mottie.github.io/Keyboard/css/keyboard.css" rel="stylesheet">
	<link href="https://mottie.github.io/Keyboard/css/keyboard-previewkeyset.css" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://mottie.github.io/Keyboard/docs/js/jquery-ui.min.js"></script>
<script src="https://mottie.github.io/Keyboard/docs/js/bootstrap.min.js"></script>
<script src="http://samsung.developnet.net/assets/js/plugins/vkeyboard/dist/js/jquery.keyboard.js"></script>

	<!-- keyboard extensions (optional) -->
	<script src="https://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script>
	<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
	<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-previewkeyset.js"></script>

	<script src="http://samsung.developnet.net/assets/js/plugins/vkeyboard/dist/layouts/keyboard-layouts-microsoft.min.js"></script>
Search : <input type='text' name='q' id='searchInput' />

I tried to print the display name in console when language changing.
it's changed to the new language and new name but not appear on button text.

How to solve this issue?

Solution

  • If I'm right you have to describe localization to your button:

    $(document).ready(function() {
   $("#searchInput").keyboard({
      language: 'en',// default language
      keyBinding: 'mousedown touchstart',
      layout: 'qwerty',
      caretToEnd: true,
      autoAccept: true,
      usePreview: false,
      appendLocally: true,
      autoAcceptOnValid: true,
      container: {theme: 'b', cssClass: 'ui-body'},
    });
    
    // important part is here!
    $.keyboard.language = {
        ar: {
            display: {
                langSwitcher: 'English'
            }
        },
        en: {
            display: {
                langSwitcher: 'عربي'
            }
        }
    };
    
    $.keyboard.keyaction.langSwitcher = function (keyboard) {
      if (keyboard.options.language == 'en') {
        keyboard.options.layout = 'ms-Arabic (102)';
        keyboard.options.language = 'ar';
      } else {
        keyboard.options.layout = 'qwerty';
        keyboard.options.language = 'en';

      }
      console.log(keyboard.options.display.langSwitcher);
      keyboard.redraw();
    }; 
});
    <!DOCTYPE html>
<html>
<head>
  <link href="https://mottie.github.io/Keyboard/docs/css/bootstrap.min.css" rel="stylesheet">

	<link href="https://mottie.github.io/Keyboard/docs/css/font-awesome.min.css" rel="stylesheet">
	<link href="https://mottie.github.io/Keyboard/docs/css/jquery-ui.min.css" rel="stylesheet">

	<!-- keyboard widget css & script (required) -->
	<link href="https://mottie.github.io/Keyboard/css/keyboard.css" rel="stylesheet">
	<link href="https://mottie.github.io/Keyboard/css/keyboard-previewkeyset.css" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://mottie.github.io/Keyboard/docs/js/jquery-ui.min.js"></script>
<script src="https://mottie.github.io/Keyboard/docs/js/bootstrap.min.js"></script>
<script src="http://samsung.developnet.net/assets/js/plugins/vkeyboard/dist/js/jquery.keyboard.js"></script>

	<!-- keyboard extensions (optional) -->
	<script src="https://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script>
	<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
	<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-previewkeyset.js"></script>

	<script src="http://samsung.developnet.net/assets/js/plugins/vkeyboard/dist/layouts/keyboard-layouts-microsoft.min.js"></script>

</head>
<body>
Search : <input type='text' name='q' id='searchInput' />
</body>
</html>

    1. Sample from documentation
    2. JSBin