Switch Text Status not updateable.

[darbid]

Describe the bug
I am using the Switch Text Status.

my HTML is simply

<input type="checkbox" checked data-role="switch" data-on="on" data-off="off">

I want to change the on and off - for example to ein and aus in German.

I have tried;

element.setAttribute('data-on', 'ein'); element.setAttribute('data-off', 'aus');

This does not update the checkbox status text.

To Reproduce
just call element.setAttribute('data-on', 'ein'); on any element.

Expected behavior
The Text Status changes.

Desktop (please complete the following information):

• OS: Win10
• Browser firefox
• Metro Version Metro 4 - v4.4.3. Built at: 27/12/2020 15:34:21 / m4q - v1.0.10. Built at 08/12/2020 00:01:48

Additional context
I tried sending a coffee to your paypal email address on this page (also just sent you an email) Paypal sent the money to DNService. Is that correct?

[xscode-auto-reply]

Thanks for opening a new issue. The author has been notified and will review it as soon as possible.
For urgent issues and priority support, visit https://xscode.com/olton/Metro-UI-CSS or Patreon

[olton]

For PayPal all correct. Thank you.
For labels: you must define on/off text in component definition with attributes data-on, data-off. Currently, you can't change attributes value for the switch in runtime,

[darbid]

Great the Paypal worked.

Are we talking about the same thing? I am talking about the Status Text within the element. In the picture the "ON" text.

I am able to set it with <input type="checkbox" checked data-role="switch" data-on="on" data-off="off"> note both data-on and data-off.

My issue is changing these 2 values. I thought element.setAttribute('data-on', 'ein'); element.setAttribute('data-off', 'aus'); would do it.

[olton]

<input type="checkbox" data-role="switch" data-on="ein" data-off="aus" data-material="true">
<input type="checkbox" data-role="switch" data-on="ein" data-off="aus" checked data-material="true">

https://codepen.io/olton/pen/oNbOZzr

[darbid]

I am at that point too. But what if my page supports multiple languages?

Once my document is ready I loop though all the elements and set the innerHTML to a certain language. I would like to do the same for data-on data-off?

[olton]

I added it to TODO for 4.5.0

[darbid]

Ok. Sounds good. I suppose making them updateable would be the best.

Maybe because they are either on/off or positive/negative that they could also form part of your https://metroui.org.ua/i18n.html as well. However that would be alot of work in supporting all the languages.

[olton]

I will add support for Metro4 i18n subsystem

[darbid]

Is it possible that Select Components also do not update their text as well?

As I explained above I am using javascript to set option text based on language setting after the document has loaded;

<select id="languageselect" data-role="select">
          <option value="language_default">Default</option>
          <option value="language_en">English</option>
          <option value="language_de">German</option>
        </select>

I have tried using;

el.innerHTML = "newvalue";
el.textContent = "newvalue";
el.innerText = "newvalue";

[olton]

Is it possible that Select Components also do not update their text as well?

As I explained above I am using javascript to set option text based on language setting after the document has loaded;

<select id="languageselect" data-role="select">
          <option value="language_default">Default</option>
          <option value="language_en">English</option>
          <option value="language_de">German</option>
        </select>

I have tried using;

el.innerHTML = "newvalue";
el.textContent = "newvalue";
el.innerText = "newvalue";

https://github.com/olton/Metro4-Examples/tree/master/src/ajax

[olton]

Please do not mix questions in the same thread for different components. And if it's not a bug, use the discussions!

[olton]

in 4.5.0 I added:

• Switch: To show on-off label you must set attribute data-show-on-off='true' and use attributes: data-on, data-text-on, data-off, data-text-off or i18n configs with attribute data-locale
• Switch: added i18n support with props locale.switch.on, locale.switch.off
• Switch: added changing on-off text in runtime with API method i18n(locale_name)

[olton]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">

    <title>Test Switch - Metro 4 :: Popular HTML, CSS and JS library</title>

</head>
<body class="m4-cloak">
<div class="container">
    <h1>Switch test page</h1>

    <div class="mb-10">
        <button class="button">en-US</button>
        <button class="button">uk-UA</button>
        <button class="button">ru-RU</button>
    </div>
    <div>
        <input type="checkbox" data-role="switch" data-on="on" data-off="off">
        <input type="checkbox" data-role="switch" data-text-on="yes" data-text-off="no">
        <input type="checkbox" data-role="switch" checked data-locale="uk-UA">
        <input type="checkbox" data-role="switch" id="switch1">
    </div>
</div>

<script>
    window.metroSwitchSetup = {
        showOnOff: true
    }
</script>
<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
    $("button").on("click", function(){
        Metro.getPlugin("#switch1", "switch").i18n($(this).text())
    })
</script>
</body>
</html>