Translations // Keep track of translation status

Someone might have just added one character by chance. Or someone might have written a first sentence, but was then interrupted.

Yes, that’s true. :slight_smile: But then there is no guarantee of anything. I mean, maybe I translated everything except the last sentence.

I think it’s just a decision of what rules the plugin should have and go with that. See it as a helper, not as a total truth?

1 Like

I speak from my personal experience here but we are two people writing on the same blog and often translating over a period of time a long article. If I have started editing the content, it doesn’t mean that I have finished the article although the fields do differ.

@jenstornell, the same way your “status plugin” offers more states than visible / invisible, I think that having that kind of granular control over different languages would be a killer plugin for complex multilingual websites.

@flokosiol, I like where this is going. Please do tell if I can be of any help !

1 Like

Thanks @Thiousi. Feedback and ideas help a lot and I think there will also be some testing to do in the future …

I think I will definitely add a third state (orange), though I’m not sure in which way (as discussed above). But it may take some time, because I will be on vacation until the end of June.

:sunrise: :palm_tree: :beach:

1 Like

As mentioned above, I finally added a third state (so far only to the develop branch) which indicates that the language .txt file exists, but the content is not up to date. It looks like this …

Unfortunately the checkbox isn’t always set correctly as reported in this topic. :confused:

Next steps

  • Some more testing
  • Translate „Translation is up to date“ (or maybe make it customizable via the blueprint??)
  • Add possibility to delete a translation
3 Likes

Amazing! That looks like a must-have for upcoming multilanguage sites.

…when the checkbox value issue is solved at least :sweat_smile:

1 Like

Nice! :slight_smile:

Some feedback on the screenshot:

  • I would not translate the “Translation is up to date” with a blueprint option. Because it’s in the blueprint it’s needed to be set on every new site. If it’s a l::set it’s added once in the plugin and then never again. Go for l::set. At least I would.
  • “Translation is up to date” is quite long. I don’t know if it’s possible but a shorter label would look good, but not if comes with the cost of not understanding it.
  • A really minor thing I see is that the space is not the same between the languages and the checkbox block.

Questions:

  • What happends if there are more languages than these? Will it break the layout?
  • About the checkbox problem, you probably can go around this issue with js and just a textfield. When I use js I almost always use input text or textarea because they are easy to work with. But maybe a fix will be in 2.4 and then there is no need for another solution? Just a thougt.

Anyway, nice field and great idea!

For my Splitview plugin I built a language switcher. Maybe it can be helpful?

In this case a path looks like this:

  • /my-plugin/languages/en.php
  • /my-plugin/languages/de.php

https://github.com/jenstornell/splitview/blob/master/core/language-switcher.php

Update

I just made a language switcher class which is probably much better…

3 Likes

Thanks for your feedback, Jens!

I hope not. :wink: If there’s not enough space for the checkbox, it will move to the next line (but I didn’t check it for all browsers so far).

If you use the built-in grid classes it should work. The Panel uses them internally as well to define field widths. And if there’s no more room, the next field just wraps around to the next line.

I’ll give it a try. But the language fields should “grow” up to fullwidth if necessary. This doesn’t match any grid, right?

No, the grid classes only support fixed percentages as far as I know.
Flexbox sounds like a good fit for this kind of behavior.

Version 0.3

Just release an update for Kirby Translations. And while I’m typing these words I recognize, that I forgot to add a changelog :blush: Here are some changes I made so far (more to come):

  • Translations can be deleted without deleting the whole page (all other translations and the uploaded files)
  • A new checkbox makes it possible to mark a translation as “up to date”. This can also be used to filter or hide pages based on the editors input (as with any other checkbox).

Please notice that Kirby Translations now comes as a plugin, not as a simple field. Keep that in mind if you are updating from a previous version.


BIG THANKS to @lenatwitteada for super fast testing and feedback and to @texnixe for verifying the checkbox issue :tada:

1 Like

Version 0.4

There’s a new version available. The two main changes are the following:

  • option to activate/deactivate up to date checkbox
  • option to activate/deactivate delete functionality

Please find all changes in the new changelog.

First of all, this field is very useful, many many thanks ! :slight_smile:

But have a few concerns with the way it’s currently displayed for a client’s website :

  • Dealing with this field in the middle of the other content fields is quite confusing, it is not a content field per-say but more an indicator of the page’s architecture and its status.
  • One consequence is that it disappears on scroll, that’s quite teddious if I’m editing a field at the bottom of a long page, have to scroll up then scroll down again to translate what I just wrote (whereas having it in the sidebar keeps the scrollTop of the mainbar).
  • With tabbed pages, the addition of tabs + translation buttons becomes a quite complex and unintuitive visual structure (-> too many options up here).

Therefore I wanted to display it in the sidebar instead :

That’s about when you should be warned, I’ve never messed around with the sidebar before and this is a very quick and dirty fix (but hey, it sort of works). From what I understood there’s no easy path-to-the-sidebar-field, besides javascript ? Here’s what I did if someone wants to do something similar :
(so, it goes without saying, use this at your own risk or don’t)

First, I renamed this plugin as /plugins/sidetranslations (and all the files / references that come with), so that I don’t get confused when added via the blueprint.

I call it in my blueprint within a field called ‘sidetranslations’ :

fields:
  sidetranslations:
    type: sidetranslations

In short, a few javascript prepends the field to the $('.sidebar-content') and makes sure it stays that way.
I didn’t manage to get the ‘Translate is up to date’ input working when I completely moved the field (saving the page didn’t search for the checked attribute in the sidebar and always reloaded a blank input), so instead it clones it.

Meaning I have a sidetranslations field in the $('.mainbar') which I visually hide :

.mainbar .field-name-sidetranslations {
    opacity: 0;
    height: 0;
    pointer-events: none;
}

and a cloned (and visible) one in the sidebar (though, it’s the regular and hidden one that does all the work).

I added this bit at the beginning of the .js file :

(...)

moveField();

// Deletes the current clone if it exists and prepend an actualized one
function moveField() {
       var _sidebar = $('.sidebar-content');
           _sidebar.find('.field-name-sidetranslations').remove();
           _sidebar.prepend($('.field-name-sidetranslations').clone());
}

// Listens to changes in the DOM and makes sure the clone is refreshed
$(document).on('change pageReload', function() {
    if ($('.field-name-sidetranslations')) {
        moveField();
    }
});

// On click on the cloned input, preventDefault() and triggers click on the original input instead
$(document).on('click','.sidebar-content .input-with-checkbox .checkbox', function (e) {
      $('.mainbar .input-with-checkbox .checkbox').trigger('click');
      e.preventDefault();
      return false;
});

(...)

pageReload is an event I added in the panel’s js source files :

  • in ./components/content.js, inside the replace function.
  • in ./app.js, basically everywhere :innocent: (after the form().trigger('submit'), iniside the load function and inside the isLoading function, when the fn is done).

Then added a bit of styling so that it’s well displayed at every screen sizes.

Now, it’s working fine on pages with few assets to load (no blank screen), but there’s a short delay when the page reloads more content. There’s no delay anymore when triggering the pageReload as stated above, even with pages with a bit of content to load. Yay !

If you’ve survived all this hacky stuff, do you see a way to shorten this delay / achieve this in a prettier way ? (or is it a terrible idea and it will backfire somehow ? :grimacing:)

[edit] Edited with a fix for the inconsistent and delayed rendering of the field.

2 Likes

Thanks for the kind feedback and your detailed explanation. I like that idea.

To keep it short: I don’t know any better ways to achieve this. As you mentioned, there’s no other way (so far) to extend the sidebar than using JavaScript.

There is a great suggestion regarding sidebar widgets by @jenstornell in the panel issues on GitHub: https://github.com/getkirby/panel/issues/940

I’m not sure if there’s any active development on this, though.

By the way, does anyone know what happened to the Trello board linked in the issue?

1 Like

The board still exists, but not publicly, I’m afraid.

I changed the way how textfiles for a single language get deleted. Now it should be more robust (and with panel notification). Furthermore there’s a first draft of a panel widget which lists untranslated pages of the currently active language.

Both changes are available in the develop branch.

Anyone who would like to test it?
Any feedback appreciated :wink:

Thanks in advance and have a nice weekend, folks.

Version 0.5

There’s a new version available which comes along with a nice resync functionality added by @sylvainjule. It’s explained in detail and demonstrated with an animated gif in the pull request:

1 Like

Very nice!
Thank you for sharing @flokosiol

Would be nice to use it with Kirby 3 as well :slight_smile: