I finally managed to solve my issue, but not in the most elegant way : polling. I would still be interested in more elegant solution !
The main issue I have is that the point move is done in the iframe containing the site preview, whereas the theme customizer form inputs are in the main document. So I need a way to pass variable from the iframe to the main document.
Inside the iframe :
// update point global var
$('.point').draggable({
drag: function(event, ui){
// update the position value
var ref="id"+$(this).attr('data-id');
points[ref].top = ui.position.top;
points[ref].left = ui.position.left;
}
});
In the theme customizer :
setInterval(function(){
if(frames.length) {
var from = $('#customize-points').val();
var to = JSON.stringify(frames[0].points);
// use theme customizer API in order to enable the save button
if(from != to) $('#customize-points').val(to).change();
}
}, 500);
I have also added a system to calculate the points position relative to the background image, but that’s not the subject here.
I know that the theme customizer generate events targetting the preview iframe to enable the theme author to live update the preview, but I can’t find how to do the other way round : generate an event from the preview to the theme customizer.
You can see the result online here: focus.tv5monde.com, even if you cannot access to the backend.