iTop/datamodels/2.x/itop-config/templates/Edit.ready.js.twig

var EditorUtils = (function() {
	var STORAGE_RANGE_KEY = 'cfgEditorRange';
	var STORAGE_LINE_KEY = 'cfgEditorFirstline';
	var _editorSavedRange = null;
	var _editorSavedFirstLine = null;

	var saveEditorDisplay = function(editor) {
		_initObjectValues(editor);
		_persistObjectValues();
	};

	var _initObjectValues = function(editor) {
		_editorSavedRange = editor.getSelectionRange();
		_editorSavedFirstLine = editor.renderer.getFirstVisibleRow();
	};

	var _persistObjectValues = function() {
		sessionStorage.setItem(EditorUtils.STORAGE_RANGE_KEY, JSON.stringify(_editorSavedRange));
		sessionStorage.setItem(EditorUtils.STORAGE_LINE_KEY, _editorSavedFirstLine);
	};

	var restoreEditorDisplay = function(editor) {
		_restoreObjectValues();
		_setEditorDisplay(editor);
	};

	var _restoreObjectValues = function() {
		if ((sessionStorage.getItem(STORAGE_RANGE_KEY) == null)
			|| (sessionStorage.getItem(STORAGE_LINE_KEY) == null)) {
			return;
		}

		_editorSavedRange = JSON.parse(sessionStorage.getItem(EditorUtils.STORAGE_RANGE_KEY));
		_editorSavedFirstLine = sessionStorage.getItem(EditorUtils.STORAGE_LINE_KEY);
		sessionStorage.removeItem(STORAGE_RANGE_KEY);
		sessionStorage.removeItem(STORAGE_LINE_KEY);
	};

	var _setEditorDisplay = function(editor) {
		if ((_editorSavedRange == null) || (_editorSavedFirstLine == null)) {
			return;
		}

		editor.selection.setRange(_editorSavedRange);
		editor.renderer.scrollToRow(_editorSavedFirstLine);
	};

	var getEditorForm = function(editor) {
	    var editorContainer = editor.container;
	    return editorContainer.parentElement;
	};

	var updateConfigEditorButtonState = function(editor) {
	    var isSameContent = (editor.getValue() === document.querySelector('input[name="prev_config"]').value);
	    var hasNoError = editor.getSession().getAnnotations().length === 0;
	    document.getElementById('cancel_button').disabled = isSameContent;
	    document.getElementById('submit_button').disabled = isSameContent || !hasNoError;
	};

	return {
		STORAGE_RANGE_KEY: STORAGE_RANGE_KEY,
		STORAGE_LINE_KEY : STORAGE_LINE_KEY,
		saveEditorDisplay : saveEditorDisplay,
		restoreEditorDisplay : restoreEditorDisplay,
		getEditorForm : getEditorForm,
		updateConfigEditorButtonState : updateConfigEditorButtonState
	};
})();




editor = ace.edit("new_config");

var configurationSource = document.querySelector('input[name="new_config"]');
editor.getSession().setValue(configurationSource.value);

editor.getSession().on('change', function()
{
  configurationSource.value = editor.getSession().getValue();
  EditorUtils.updateConfigEditorButtonState(editor);
});
editor.getSession().on("changeAnnotation", function()
{
  EditorUtils.updateConfigEditorButtonState(editor);
});

editor.setTheme("ace/theme/eclipse");
editor.getSession().setMode("ace/mode/php");
editor.commands.addCommand({
    name: 'save',
    bindKey: {win: "Ctrl-S", "mac": "Cmd-S"},
    exec: function(editor) {
        var editorForm = EditorUtils.getEditorForm(editor);
        var submitButton = document.getElementById('submit_button');

        if (submitButton.is(":enabled")) {
           editorForm.trigger('submit');
        }
    }
});


var editorForm = EditorUtils.getEditorForm(editor);
editorForm.addEventListener('submit', function() {
	EditorUtils.saveEditorDisplay(editor);
});


EditorUtils.restoreEditorDisplay(editor);
editor.focus();


const repositionEditor = () => {
	let oSubmitButton = document.getElementById('submit_button');
	let iBottomPosition = oSubmitButton.offsetTop + oSubmitButton.offsetHeight + 10;
	document.getElementById('new_config').style.top = iBottomPosition+"px";
};
repositionEditor();

document.getElementById('ibo-main-content').addEventListener('click',repositionEditor);

document.getElementById('cancel_button').onclick = ()=>{
	if (confirm({{ 'config-confirm-cancel'|dict_s|json_encode|raw }})) {
		document.querySelector('input[name="new_config"]').value = document.querySelector('input[name="prev_config"]').value;
		return true;
	}
	return false;
};