Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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

Closed
frequent opened this Issue · 15 comments

2 participants

@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
Owner

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 frequent closed this
@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
Owner

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

@frequent frequent reopened this
@jamuhl
Owner

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
Owner

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
Owner

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

@jamuhl
Owner

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.

@frequent frequent closed this
@jamuhl
Owner

perfect...glad you found a solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.