Not able to get transaltion in unordered list

[avinash-0007]

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior: i have created a plugin but somehow transaltion is not getting called

<ul data-bind="foreach: aliases">
    <li>
        <span class="inputBox">
            <span class="inputText" style="user-select:text" data-bind="text: $data,attr: {id: 'alias' + $index()}"> </span>
            <span class="btncopy" data-bind="click: function ($data) { navigator.clipboard.writeText($data);var elementid='aliasbtn' + $index(); document.getElementById(elementid).innerHTML='COPIED';setTimeout(function() {document.getElementById(elementid).innerHTML = 'COPY';}, 2000) },attr: {id: 'aliasbtn' + $index()}" data-i18n="HIDE_MY_EMAIL/COPY"></span>
        </span>
    </li>
</ul>

this line data-i18n="HIDE_MY_EMAIL/COPY" is not showing the translated text inside ul but working outside ul

Expected behavior Should show the translation text

[avinash-0007]

Also how to move javscript inside js folder @the-djmaze

[the-djmaze]

Try with i18nUpdate

<div data-bind="i18nUpdate: aliases">
    <ul data-bind="foreach: aliases">
        <li>
            <span class="inputBox">
                <span class="inputText" style="user-select:text" data-bind="text: $data,attr: {id: 'alias' + $index()}"> </span>
                <span class="btncopy" data-bind="click: function ($data) { navigator.clipboard.writeText($data);var elementid='aliasbtn' + $index(); document.getElementById(elementid).innerHTML='COPIED';setTimeout(function() {document.getElementById(elementid).innerHTML = 'COPY';}, 2000) },attr: {id: 'aliasbtn' + $index()}" data-i18n="HIDE_MY_EMAIL/COPY"></span>
            </span>
        </li>
    </ul>
</div>

how to move javscript inside js folder

You can look here for example https://github.com/the-djmaze/snappymail/tree/master/plugins/nextcloud

[avinash-0007]

@the-djmaze thank you!! i will use the example. How can i use translation in js?

[the-djmaze]

How can i use translation in js?

I think it is rl.i18n but i should document everything from console.dir(rl)

[avinash-0007]

@the-djmaze I tried moving the code in js

(rl => { if (rl) {

        class HMESettings
        {
                constructor()
                {
                        this.aliases = ko.observableArray();
                }
                copyMail($data)
                {
                   navigator.clipboard.writeText($data);
                   var elementid='aliasbtn' + $index();
                   document.getElementById(elementid).innerHTML=rl.i18n('HIDE_MY_EMAIL//COPIED');
                   setTimeout(function() {
                     document.getElementById(elementid).innerHTML = rl.i18n('HIDE_MY_EMAIL/COPY');
                   }, 2000);
                 }

                onBuild()
                {

                        rl.pluginRemoteRequest((iError, oData) => {
                                if (!iError) {

                                        this.aliases.push(JSON.parse(oData.Result.aliases));
                                }
                        }, 'JsonGetHMEAliases');

                }

        }
        rl.addSettingsViewModel(HMESettings, 'HMESectionTab',
                'HIDE_MY_EMAIL/TAB_NAME', 'hide-my-email');

        addEventListener('rl-view-model.create', e => {
                if ('SystemDropDown' === e.detail.viewModelTemplateID) {
                        document
                                .getElementById('SystemDropDown')
                                .content
                                .querySelector('menu .dividerbar + li + li')
                                .before(Element.fromHTML(`<li role="presentation">
                                                <a href="#/settings/hide-my-email" tabindex="-1" data-icon="✉" data-i18n="HIDE_MY_EMAIL/TAB_NAME"></a>
                                        </li>`));
                }
        });
}})(window.rl);

but it didnot work <span class="btncopy" data-bind="attr: {id: 'aliasbtn' + $index()},click: copyMail($data)" data-i18n="HIDE_MY_EMAIL/COPY"></span>

[the-djmaze]

Your code seems to work here.

[avinash-0007]

@the-djmaze this click function is not getting called

copyMail($data) { navigator.clipboard.writeText($data); var elementid='aliasbtn' + $index(); document.getElementById(elementid).innerHTML=rl.i18n('HIDE_MY_EMAIL//COPIED'); setTimeout(function() { document.getElementById(elementid).innerHTML = rl.i18n('HIDE_MY_EMAIL/COPY'); }, 2000); }

[avinash-0007]

i want to call copy mail button on clicking this

<span class="btncopy" data-bind="attr: {id: 'aliasbtn' + $index()},click: copyMail($data)" data-i18n="HIDE_MY_EMAIL/COPY"></span>

[the-djmaze]

Because copyMail is inside the foreach, the scope is the alias. Use click: $root.copyMail" or click: $parent.copyMail".

More info at https://knockoutjs.com/documentation/click-binding.html

[the-djmaze]

Is your plugin working now?

[avinash-0007]

YES