search

locize / translation-check

This package shows an overview of your translations. Check which keys are not yet translated.
MIT License
119 stars 4 forks source link

No keys are showed on the pop up window #1

Closed ghost closed 2 years ago

ghost commented 2 years ago

I wish to use i18next on client side and found this amazing plugin. So thanks a lot for offering this ! For now sticking to translation-check (maybe the cloud service later)..

🐛 Bug Report

The popup window https://mini.locize.com/ doesn't show my keys defined in common.json files (which are loaded fine and also tested on client t.key()...). It simply show the same page like when you click on this link https://mini.locize.com/

To Reproduce

I want through examples, and no error is being thrown. I think everything is fine here ?

  i18next
    .use(HttpApi)
    .use(LanguageDetector)
    .use(i18nextPlugin)
    .init({
      fallbackLng: 'en-US',
      debug: true,
      ns: ['common'],
      defaultNS: 'common',
      backend: {
        // load from i18next-gitbook repo
        loadPath: '/locales/{{lng}}/common.json',
        crossDomain: true
      }
    }).then(function(t) {
      // initialized and ready to go!
      document.getElementById('output').innerHTML = i18next.t('greetings.title')
      document.getElementById("open-editor").onclick = function (){
        showTranslations(i18next, { // optional options, if not provided it will guess based on your i18next config
          sourceLng: 'en-US',
          targetLngs: ['fr', 'ar'],
          preserveEmptyStrings: false
        }) 
      }
    })

I'm running my example on localhost. To my understanding, the popup window pushes some data to https://mini.locize.com/ somehow (this HTTP ability is new to me) so maybe this is a constraint (crossDomain is set true...).

Expected behavior

I think the expected result is a collection of my definition in translation files, loaded on that nice UI.

Your Environment

Thanks a lot for this repo and your consideration.

ghost commented 2 years ago

By the way, hopefully when I get things to work, I have a question that I can't figure out from documentation: Is it possible to save (download) the JSON file after edition? What are limits of this solution VS the cloud solution.

adrai commented 2 years ago

Can you provide a reproducible example repository? Or codesandbox example?

it's readonly... save is not possible

adrai commented 2 years ago

example:


<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/21.0.0/i18next.min.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/translation-check/dist/umd/translationCheck.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/1.2.1/jquery-i18next.min.js" ></script>
    <!-- <script src="/jquery-i18next.min.js" ></script> -->
  </head>

  <body>

    <ul class="nav">
      <li><a href="#" data-i18n="nav.home"></a></li>
      <li><a href="#" data-i18n="nav.page1"></a></li>
      <li><a href="#" data-i18n="nav.page2"></a></li>
    </ul>

    <div class="content">
      <input data-i18n="[placeholder]input.placeholder; [title]input.placeholder" />
    </div>

    <div class="extra" style="margin-top: 50px;">
      <button id="open-editor">show translation state</button>
    </div>

    <script>
      $(document).ready(function() {
        // use plugins and options as needed, for options, detail see
        // http://i18next.com/docs/
        i18next.use(window.translationCheck.i18nextPlugin).init({
          lng: 'en', // evtl. use language-detector https://github.com/i18next/i18next-browser-languageDetector
          supportedLngs: ['en', 'de', 'it'],
          resources: { // evtl. load via http https://github.com/i18next/i18next-http-backend
            en: {
              translation: {
                input: {
                  placeholder: "a placeholder"
                },
                nav: {
                  home: 'Home',
                  page1: 'Page One',
                  page2: 'Page Two'
                }
              }
            },
            de: {
              translation: {
                input: {
                  placeholder: "ein Platzhalter"
                }
              }
            }
          }
        }, function(err, t) {
          // for options see
          // https://github.com/i18next/jquery-i18next#initialize-the-plugin
          jqueryI18next.init(i18next, $);

          // start localizing, details:
          // https://github.com/i18next/jquery-i18next#usage-of-selector-function
          $('.nav').localize();
          $('.content').localize();
        });

        $('#open-editor').click(() => window.translationCheck.showTranslations(i18next));
      });
    </script>

  </body>

</html>
adrai commented 2 years ago

Here another example with react-i18next and i18next-http-backend: https://codesandbox.io/s/react-i18next-http-example-forked-k3vkkk?file=/src/i18n.js

ghost commented 2 years ago

@adrai thank you so much for taking time with examples. I will try more tomorrow and get back with results. Much appreciated.

ghost commented 2 years ago

@adrai thank you so much for the follow up. I don't know what's missing in my installation and environment. I'm abandoning this for now. Plus I don't want to add jQuery dependency and also because at the end, UI doesn't offer -download Closing for now. Sorry for the inconvenience

adrai commented 2 years ago

fyi: you don't need jQuery dependency... but ok