can I specify an element to be translates the same way as title attributes are handled?

[frequent]

More a question, than an issue, but maybe you can help:

I'm working on a Jquery Mobile application using your plugin.

Following problem: I'm using a Jquery Mobile navbar so my inital HTML markup is like this:

<div data-role="footer" data-position="fixed">
  <div data-role="navbar" data-grid="d">
    <ul class="apple-navbar-ui comboSprite">
      <li><a href="index.html" class="t" data-icon="menu" data-i18n="[title]gen.index_info;gen.index">d</a></li>
                        ...
    </ul>
   </div>
</div>

Problem is, Jquery Mobile changes the <a href=...> into this:

  <a class="ui-btn-right ui-btn ui-btn-up-a ui-shadow ui-btn-corner-all ui-btn-icon-left" data-icon="index" href="index.html" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">Index</span>
        <span class="ui-icon ui-icon-index ui-icon-shadow">&nbsp;</span>
    </span>
  </a>

So my i18n translation should not go on the <a> element, but on the child ui-btn-text span.

Any idea if it's possible to specify a "target" of where the translated text should be appended to?

Thanks for your great plugin! Really nice working with it :-)

[jamuhl]

Actually there is no way to do this right now.

But i added data-i18n-target="#inner" for the next release (might be published today or tomorrow).

eg.:

  <div id="container" data-i18n-target="#inner" data-i18n="[html]simpleTest">
    <div id="inner"></div>
  </div>

$('#container').i18n() will result in (given 'simpleTest': 'test'):

  <div id="container" data-i18n-target="#inner" data-i18n="[html]simpleTest">
    <div id="inner">test</div>
  </div>

will this be what you need?

[frequent]

Perfect! Vielen Dank!

[frequent]

on second thought: what if I use data-i18n-target="#inner" with a class vs an id? Will all classes be translated?

[frequent]

Never mind. Very nice!

[jamuhl]

Nope only one element - but if you need it feel free to open another issue - will than be added to next release.

[frequent]

Ok. I do have one more thing/idea to make i18next fully-usable with jquery mobile:

Some widgets reformat from something like this:

<input type="button" value="hello" />

to this:

<div class="ui-btn">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">hello</span>
    </span>
    <input type="hidden" />
</div>

So question would be, when specifying a target data-i18n-target=".ui-btn-text", could you start searching for the target class from the parent element of the current element? Not really sure, if this is too specific though.

Thanks

[jamuhl]

Wonder if lookup from parent is the only case?

If not i would prefer an option to just override the default function to get the element to set translations on - so it can be configured freely.

[frequent]

Give me some time, I will translate an application with a pretty much all Jquery Mobile widgets. Then I will see if parent() is the only case. Will post, when through. Thanks!

[frequent]

@jamuhl

so I'm thinking:
Is there a callback of some sort, which I could run from i18n() once it's done translating.

i18n({"callback":callback)}

Idea is to wait until all translations are made and then run the JQM enhancements from the callback. This way the correct texts will be in the source code by the time JQM starts modifying elements and there would be no need to worry about destinations of some text elements.

[jamuhl]

nice idea - could be usefull in other scenarios as well.

[frequent]

problem is if you are translating elements with multiple attributes ([title]gen.foo;[html]gen.bar) it's hard to catch when everything is done.

I tried a little with triggering a custom event when _translate ran plus keeping count of localization triggers. Very hackish:

inside addJqueryFunct

$.fn.i18n = function (options) {
  // callback listener
  var i = 0, l = 0;
  // my callback function
  if (options.callback) {
    $(window).on('t', function() {
       i = i+1;
       if (i === l) {
         options.callback();
         $(window).off('t');
         i = 0;
         l = 0;
       }
    });
  }
  return this.each(function() {
      // localize element itself
      localize($(this), options);
      l += 1;
      // localize childs
      var elements =  $(this).find('[' + o.selectorAttr + ']');
      elements.each(function(i) { 
          if (i !== 0) {
            console.log("more than one");
            l += 1;
          }
          localize($(this), options);
      });
  });

There should be a better way :-)

[jamuhl]

We for sure find a good solution. Will have a look the next days/week.

[jamuhl]

sorry had no time to get back onto this one. did you found any nicer solution? in the current state i prefer not adding this?

[frequent]

@jamuhl : no problem.

The only challenge is the initial translation, because JQM "create" (the method which adds extra elements, including text containers) does not have a callback, so I never know when to call translate i18n()

I cheated myself out of the problem by just adding the default language hardcoded in the HTML, so I start with... English and when the user switches, i18n can access all elements, because they are there.

So I'm cool with data-i18n-target

Thanks for coming back with this.

[jamuhl]

perfect...glad you found a solution.