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

Closed
frequent opened this Issue Feb 11, 2013 · 15 comments

Comments

Projects
None yet
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

This comment has been minimized.

Show comment Hide comment
@jamuhl

jamuhl Feb 12, 2013

Member

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?

Member

jamuhl commented Feb 12, 2013

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

This comment has been minimized.

Show comment Hide comment
@frequent

frequent Feb 12, 2013

Perfect! Vielen Dank!

Perfect! Vielen Dank!

@frequent frequent closed this Feb 12, 2013

@frequent

This comment has been minimized.

Show comment Hide comment
@frequent

frequent Feb 12, 2013

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

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

@frequent

This comment has been minimized.

Show comment Hide comment
@frequent

frequent Feb 12, 2013

Never mind. Very nice!

Never mind. Very nice!

@jamuhl

This comment has been minimized.

Show comment Hide comment
@jamuhl

jamuhl Feb 12, 2013

Member

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

Member

jamuhl commented Feb 12, 2013

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

@frequent

This comment has been minimized.

Show comment Hide comment
@frequent

frequent Feb 14, 2013

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

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 Feb 14, 2013

@jamuhl

This comment has been minimized.

Show comment Hide comment
@jamuhl

jamuhl Feb 14, 2013

Member

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.

Member

jamuhl commented Feb 14, 2013

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

This comment has been minimized.

Show comment Hide comment
@frequent

frequent Feb 15, 2013

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!

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

This comment has been minimized.

Show comment Hide comment
@frequent

frequent Feb 19, 2013

@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

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

This comment has been minimized.

Show comment Hide comment
@jamuhl

jamuhl Feb 19, 2013

Member

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

Member

jamuhl commented Feb 19, 2013

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

@frequent

This comment has been minimized.

Show comment Hide comment
@frequent

frequent Feb 19, 2013

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 :-)

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

This comment has been minimized.

Show comment Hide comment
@jamuhl

jamuhl Feb 20, 2013

Member

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

Member

jamuhl commented Feb 20, 2013

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

@jamuhl

This comment has been minimized.

Show comment Hide comment
@jamuhl

jamuhl Apr 24, 2013

Member

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?

Member

jamuhl commented Apr 24, 2013

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

This comment has been minimized.

Show comment Hide comment
@frequent

frequent Apr 24, 2013

@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 : 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 Apr 24, 2013

@jamuhl

This comment has been minimized.

Show comment Hide comment
@jamuhl

jamuhl Apr 24, 2013

Member

perfect...glad you found a solution.

Member

jamuhl commented Apr 24, 2013

perfect...glad you found a solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment