display/hide a div upon editing

[marcesh]

i was wondering if there is a simple solution to display a div in the page upon active editing and make it display:none again upon end of editing. maybe one of the classes does that and could be added to the div but i cant seem to find one

[anthonyjb]

Hi @marcesh - the easiest way to do this would be to listen for the start and stop editor events and then apply a class or style to display/hide the element in question. For examples:

var editor = ContentTools.EditorApp.get();

editor.addEventListener('start', function (ev) {
    document.getElementById('some-elm').classsList.add('hide-me');
});

editor.addEventListener('stop', function (ev) {
    document.getElementById('some-elm').classsList.remove('hide-me');
});

[rvanlaak]

We use above listeners to update innnerHTML before editing, because the data we actually want to edit is inside one of the dataset values.

Problem here is that on stop, we revert innerHTML to the original value, but thereafter ContentTools overwrites the value again.

editor.addEventListener('start', function (ev) {
    var elements = Array.prototype.slice.call(document.getElementsByTagName('x-trans'));
    elements.forEach(function(item, index) {
        item.innerHTML = item.dataset.plain;
    });
});
editor.addEventListener('revert', function (ev) {
    var elements = Array.prototype.slice.call(document.getElementsByTagName('x-trans'));
    elements.forEach(function(item, index) {
        item.innerHTML = item.dataset.value;
    });
});

So, start works okay, but stop then sets back the innerHTML value that was set on start. None of the events listed can be used to handle this?

[anthonyjb]

@rvanlaak there are now 2 new events available against the editor (started and stopped) these complement the existing start/stop events by being trigger after editor has started or stopped. Not in the docs yet (new as of release 1.5.5) but thought you might find them useful.

[rvanlaak]

Great @anthonyjb ! I think I was missing them while implementing https://github.com/php-translation/symfony-bundle/pull/104

... what happened over there, was that the editor was not able to retrieve the proper value (read: old value was returned). Can you confirm that this is "fixed" by the two new events before I try again? 👍

[anthonyjb]

@rvanlaak when you say the old value was returned can you briefly describe the behaviour, looks like:

• You set a dataset attribute against an element in the HTML (e.g data-value='some value').
• Then when you start the editor you change the innerHTML of the element to 'some value' (based on the data-value).
• Where I get lost is what's going wrong on save/stop?

[rvanlaak]

Yes, the first two are correct. So, it sets the value correctly, but I can't properly get back the data to send it for storage.