First of all, this field is very useful, many many thanks !
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 (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 ? )
[edit] Edited with a fix for the inconsistent and delayed rendering of the field.