/**
* This delegate handle the translation inline editor and hopefully
* make it easier to translate texts.
* @author Jean-Philippe Dery (jean-philippe.dery@lemieuxbedard.com)
* @since 1.0.0
*/
var MooTranslationDelegate =
{
/**
* @var array The windows.
*/
windows: null,
/**
* Initialize the delegate.
* @author Jean-Philippe Dery (jean-philippe.dery@lemieuxbedard.com)
* @since 1.0.0
*/
initialize: function(el) {
this.windows = [];
},
/**
* This event happens when the mouse enters
* @author Jean-Philippe Dery (jean-philippe.dery@lemieuxbedard.com)
* @since 1.0.0
*/
onTranslationTextMouseEnter: function(el) {
var translationBox = $('translation-inline-editor-button');
if (!translationBox) {
translationBox = new Element('div');
translationBox.set('id', 'translation-inline-editor-button');
translationBox.setStyle('position', 'absolute');
translationBox.setText('Modifier sur cette page');
translationBox.hide();
translationBox.inject(document.body);
}
var translationPosition = el.getCoordinates();
translationBox.setStyle('top', translationPosition.top + 'px');
translationBox.setStyle('left', translationPosition.left + 'px');
translationBox.show('block');
translationBox.onclick = function() {
$$('.translation-inline-editor').dispose();
translationBox.hide();
var translationId = el.getId().replace('translation-', '');
var translationText = el.getHtml();
translationText = translationText.replace(/
/g, "");
translationText = translationText.replace(//g, "");
translationText = translationText.replace(/
/g, "");
var translationPosition = el.getCoordinates();
// its quite possible the translation window is already opened so in this case
// we do not need and should not open the window
var editorWindow = document.getElement('.translation-inline-editor-for-' + translationId);
if (editorWindow == null) {
this.createEditorWindow(el, translationId, translationText, translationPosition.left, translationPosition.top + translationPosition.height);
}
}.bind(this);
},
/**
* This event happens when the mouse leaves the translation editor.
* @author Jean-Philippe Dery (jean-philippe.dery@lemieuxbedard.com)
* @since 1.0.0
*/
onTranslationTextMouseLeave: function(el) {
},
/**
* This event happens when the mouse enter the editor window.
* @author Jean-Philippe Dery (jean-philippe.dery@lemieuxbedard.com)
* @since 1.0.0
*/
onEditorWindowMouseEnter: function() {
},
/**
* This event happens when the mouse leave the editor window.
* @author Jean-Philippe Dery (jean-philippe.dery@lemieuxbedard.com)
* @since 1.0.0
*/
onEditorWindowMouseLeave: function() {
//$$('.translation-inline-editor').dispose();
},
/**
* This event happens when the mouse hit the editor window.
* @author Jean-Philippe Dery (jean-philippe.dery@lemieuxbedard.com)
* @since 1.0.0
*/
onEditorWindowMouseDown: function() {
},
/**
* This event happens when the mouse enters
* @author Jean-Philippe Dery (jean-philippe.dery@lemieuxbedard.com)
* @since 1.0.0
*/
createEditorWindow: function(associatedElement, translationId, translationText, left, top) {
// create the window by making a clone of the current form
var editorWindow = $('translation-inline-editor').clone(true);
editorWindow.addClass('translation-inline-editor')
editorWindow.addClass('translation-inline-editor-for-' + translationId);
editorWindow.setStyle('top', top + 'px');
editorWindow.setStyle('left', left + 'px');
editorWindow.setStyle('display', 'block');
editorWindow.setStyle('position', 'absolute');
editorWindow.store('translation_id', translationId);
editorWindow.addEvent('mouseenter', this.onEditorWindowMouseEnter.bind(this));
editorWindow.addEvent('mouseleave', this.onEditorWindowMouseLeave.bind(this));
editorWindow.addEvent('mousedown', this.onEditorWindowMouseDown.bind(this));
editorWindow.fade('hide');
editorWindow.inject(document.body);
editorWindow.fade(1);
// add the text into the textarea
var textarea = editorWindow.getElement('textarea');
if (textarea) {
textarea.value = translationText;
}
// add an event on the main window that will make sure the window is put on
// the top of the other when it gets clicked
editorWindow.addEvent('mousedown', function(e) {
this.putEditorWindowOnTop(e.target);
}.bind(this));
// add an event on all the elements inside that window that will also make sure
// it comes on the top
editorWindow.getElements('*').each(function(el) {
el.addEvent('mousedown', function(e) {
this.putEditorWindowOnTop(e.target.getParent('.translation-inline-editor'));
}.bind(this));
}.bind(this));
// update the form action so the translation id parameter is updated
// to the current translation id
var form = editorWindow.getElement('form');
if (form) {
form.action = form.action.replace('1111', translationId);
}
// add the event that will hide the window when the user clicks
// on the close button
var closeButton = editorWindow.getElement('.close-button');
if (closeButton) {
closeButton.addEvent('click', function(el) {
editorWindow.dispose();
});
}
// use ajax to save yay
// use ajax to save the content yay
var button = editorWindow.getElement('input[type=submit]');
if (button) {
button.type = 'button';
button.addEvent('click', function() {
button.set('value', 'Sauvegarde en cours...');
button.fade(0.5);
// make sure we send a json request even if we don't really need to
// because otherwise it creates a redirection
form.set('send', {
headers: { 'Accept': 'application/json' },
onComplete: function() {
// once saved, we load the page inside an ajax request so we will be
// able to reload the updated piece of text correctly filtered
new Request.HTML({
url: window.location.href,
method: 'get',
evalScripts: false,
onComplete: function(responseTree, responseElements, responseHtml, responseJavaScript) {
var found = new MooElementFinder(responseHtml).find('#' + associatedElement.getId());
if (found) {
new Fx.Tween(associatedElement)
.start('opacity', 1, 0)
.chain(function() {
associatedElement.setHtml(found.getHtml());
associatedElement.fade(1);
editorWindow.dispose();
});
}
}
}).send();
}
});
form.send();
});
}
// make the window draggeable
var windowDrag = new Drag.Move(editorWindow, { handle: editorWindow.getElement('.title') });
// finally we set a z index on the window to make the last apppear
this.putEditorWindowOnTop(editorWindow);
// save the window and save it's position in the stack, t
this.windows.push(editorWindow);
},
/**
* Put the given window on the top of the others.
* @author Jean-Philippe Dery (jean-philippe.dery@lemieuxbedard.com)
* @since 1.0.0
*/
putEditorWindowOnTop: function(editorWindow) {
var topIndex = 1000;
this.windows.each(function(editorWindowItem, index) {
var editorWindowZIndex = parseInt(editorWindowItem.getStyle('z-index'));
if (editorWindowZIndex > topIndex) {
topIndex = editorWindowZIndex;
}
}.bind(this));
topIndex = topIndex + 1;
// update the editor window z index
editorWindow.setStyle('z-index', topIndex);
}
};
new MooSelector().start
({
/**
* Initialize the delegate.
* @author Jean-Philippe Dery (jean-philippe.dery@lemieuxbedard.com)
* @since 1.0.0
*/
'body #translation-inline-editor': function(el) {
MooTranslationDelegate.initialize(el);
},
/**
* Show the inline editor when the user move his mouse over an editable text.
* @author Jean-Philippe Dery (jean-philippe.dery@lemieuxbedard.com)
* @since 1.0.0
*/
'body .translation-text::mouseenter': function(el) {
MooTranslationDelegate.onTranslationTextMouseEnter(el);
}
});
/**
* Show a translation box for a single item. This has to be a function
* because this will be used for special items generated by javascript.
* @author Jean-Philippe Dery (jean-philippe.dery@lemieuxbedard.com)
* @since 1.0.0
*/
function showTranslationBox(el, translationId)
{
var translationBox = $('translation-json-editor-button');
if (!translationBox) {
translationBox = new Element('div');
translationBox.set('id', 'translation-json-editor-button');
translationBox.setStyle('position', 'absolute');
translationBox.setText('Modifier');
translationBox.hide();
translationBox.inject(document.body);
}
var translationPosition = el.getCoordinates();
translationBox.setStyle('top', translationPosition.top + 'px');
translationBox.setStyle('left', translationPosition.left + 'px');
translationBox.show('block');
translationBox.onclick = function() {
document.location.href = $('translation-page-editor').get('action') + '?translation_ids[]=' + translationId + '&redirect=' + document.location.href;;
}
}
/**
* Hide the translation box.
* @author Jean-Philippe Dery (jean-philippe.dery@lemieuxbedard.com)
* @since 1.0.0
*/
function hideTranslationBox(el)
{
}