I am trying to simplify the following code shown at the bottom of the question. The issues here are the following:
So, what can be done to lower the amount of code here in a way that still makes ace editor work correctly. Basically, on the same page it shows 10 ace editors, 3 for the widgetEditor object and 7 for the featureEditor (As seen on the code).
$.post(engineUrl, {
systemDevCall: true,
engineApiEnabled: engineApiEnabled,
engineDataSplitter: engineDataSplitter,
systemDevType: 'widgetCall',
systemDevValue: [widgetIdSelected,widgetSelected]
},
function(data) {
tabSelected = 'widget';
if (engineApiEnabled != 1) {
var dataSplit = data.split(engineDataSplitter);
var data = dataSplit[1];
}
// Parse Data
var widgetEditor = JSON.parse(data);
// PHP Editor
phpeditor = ace.edit("phpcode");
phpeditor.$blockScrolling = Infinity;
phpeditor.setValue(widgetEditor.php);
phpeditor.setShowPrintMargin(false);
phpeditor.setTheme("ace/theme/monokai");
phpeditor.getSession().setMode("ace/mode/php");
phpeditor.setFadeFoldWidgets();
phpeditor.session.getScrollTop();
phpeditor.session.setScrollTop(1);
phpeditor.session.getScrollLeft();
phpeditor.session.setScrollLeft(1);
phpeditor.focus();
phpeditor.navigateFileStart();
// CSS Editor
csseditor = ace.edit("csscode");
csseditor.$blockScrolling = Infinity;
csseditor.setValue(widgetEditor.css);
csseditor.setShowPrintMargin(false);
csseditor.setTheme("ace/theme/monokai");
csseditor.getSession().setMode("ace/mode/css");
csseditor.setFadeFoldWidgets();
csseditor.session.getScrollTop();
csseditor.session.setScrollTop(1);
csseditor.session.getScrollLeft();
csseditor.session.setScrollLeft(1);
csseditor.focus();
csseditor.navigateFileStart();
// JAVASCRIPT Editor
jseditor = ace.edit("jscode");
jseditor.$blockScrolling = Infinity;
jseditor.setValue(widgetEditor.js);
jseditor.setShowPrintMargin(false);
jseditor.setTheme("ace/theme/monokai");
jseditor.getSession().setMode("ace/mode/javascript");
jseditor.setFadeFoldWidgets();
jseditor.session.getScrollTop();
jseditor.session.setScrollTop(1);
jseditor.session.getScrollLeft();
jseditor.session.setScrollLeft(1);
jseditor.focus();
jseditor.navigateFileStart();
});
});
$('#featureSelection').on('change',function() {
$('#featureSelection').addClass('selectOption');
$('#widgetSelection').removeClass('selectOption');
$('.featureListOptions').show();
if ( !$('.featureListOptions li').hasClass('active') ) {
$('li.memberProfileHeader').addClass('active');
}
var featureSelected = $(this).val();
var featureIdSelected = $('option:selected', this).data('id');
selectedOption = featureIdSelected;
selectSelected = '#featureSelection';
$('li.memberProfileHeader').on('click',function() {
memberProfileHeaderCodeEditor.focus();
memberProfileHeaderCodeEditor.navigateFileStart();
});
$('li.memberProfilePage').on('click',function() {
memberProfilePageCodeEditor.focus();
memberProfilePageCodeEditor.navigateFileStart();
});
$('li.memberProfileFooter').on('click',function() {
memberProfileFooterCodeEditor.focus();
memberProfileFooterCodeEditor.navigateFileStart();
});
$('li.searchResultHeader').on('click',function() {
searchResultHeaderCodeEditor.focus();
searchResultHeaderCodeEditor.navigateFileStart();
});
$('li.searchResultPage').on('click',function() {
searchResultPageCodeEditor.focus();
searchResultPageCodeEditor.navigateFileStart();
});
$('li.searchResultFooter').on('click',function() {
searchResultFooterCodeEditor.focus();
searchResultFooterCodeEditor.navigateFileStart();
});
$('li.detailPage').on('click',function() {
detailPageCodeEditor.focus();
detailPageCodeEditor.navigateFileStart();
});
$.post(engineUrl, {
systemDevCall: true,
engineApiEnabled: engineApiEnabled,
engineDataSplitter: engineDataSplitter,
systemDevType: 'featureCall',
systemDevValue: [featureIdSelected,featureSelected]
},
function(data) {
tabSelected = 'feature';
if (engineApiEnabled != 1) {
var dataSplit = data.split(engineDataSplitter);
var data = dataSplit[1];
}
// Parse Data
var featureEditor = JSON.parse(data);
// Member Profile Header Editor
memberProfileHeaderCodeEditor = ace.edit("memberProfileHeaderCode");
memberProfileHeaderCodeEditor.$blockScrolling = Infinity;
memberProfileHeaderCodeEditor.setValue(featureEditor.memberProfileHeader);
memberProfileHeaderCodeEditor.setShowPrintMargin(false);
memberProfileHeaderCodeEditor.setTheme("ace/theme/monokai");
memberProfileHeaderCodeEditor.getSession().setMode("ace/mode/php");
memberProfileHeaderCodeEditor.setFadeFoldWidgets();
memberProfileHeaderCodeEditor.session.getScrollTop();
memberProfileHeaderCodeEditor.session.setScrollTop(1);
memberProfileHeaderCodeEditor.session.getScrollLeft();
memberProfileHeaderCodeEditor.session.setScrollLeft(1);
memberProfileHeaderCodeEditor.focus();
memberProfileHeaderCodeEditor.navigateFileStart();
focusedEditor = memberProfileHeaderCodeEditor;
// Member Profile Page Editor
memberProfilePageCodeEditor = ace.edit("memberProfilePageCode");
memberProfilePageCodeEditor.$blockScrolling = Infinity;
memberProfilePageCodeEditor.setValue(featureEditor.memberProfilePage);
memberProfilePageCodeEditor.setShowPrintMargin(false);
memberProfilePageCodeEditor.setTheme("ace/theme/monokai");
memberProfilePageCodeEditor.getSession().setMode("ace/mode/php");
memberProfilePageCodeEditor.setFadeFoldWidgets();
memberProfilePageCodeEditor.session.getScrollTop();
memberProfilePageCodeEditor.session.setScrollTop(1);
memberProfilePageCodeEditor.session.getScrollLeft();
memberProfilePageCodeEditor.session.setScrollLeft(1);
memberProfilePageCodeEditor.focus();
memberProfilePageCodeEditor.navigateFileStart();
focusedEditor = memberProfilePageCodeEditor;
// Member Profile Footer Editor
memberProfileFooterCodeEditor = ace.edit("memberProfileFooterCode");
memberProfileFooterCodeEditor.$blockScrolling = Infinity;
memberProfileFooterCodeEditor.setValue(featureEditor.memberProfileFooter);
memberProfileFooterCodeEditor.setShowPrintMargin(false);
memberProfileFooterCodeEditor.setTheme("ace/theme/monokai");
memberProfileFooterCodeEditor.getSession().setMode("ace/mode/php");
memberProfileFooterCodeEditor.setFadeFoldWidgets();
memberProfileFooterCodeEditor.session.getScrollTop();
memberProfileFooterCodeEditor.session.setScrollTop(1);
memberProfileFooterCodeEditor.session.getScrollLeft();
memberProfileFooterCodeEditor.session.setScrollLeft(1);
memberProfileFooterCodeEditor.focus();
memberProfileFooterCodeEditor.navigateFileStart();
focusedEditor = memberProfileFooterCodeEditor;
// Search Result Header Editor
searchResultHeaderCodeEditor = ace.edit("searchResultHeaderCode");
searchResultHeaderCodeEditor.$blockScrolling = Infinity;
searchResultHeaderCodeEditor.setValue(featureEditor.searchResultHeader);
searchResultHeaderCodeEditor.setShowPrintMargin(false);
searchResultHeaderCodeEditor.setTheme("ace/theme/monokai");
searchResultHeaderCodeEditor.getSession().setMode("ace/mode/php");
searchResultHeaderCodeEditor.setFadeFoldWidgets();
searchResultHeaderCodeEditor.session.getScrollTop();
searchResultHeaderCodeEditor.session.setScrollTop(1);
searchResultHeaderCodeEditor.session.getScrollLeft();
searchResultHeaderCodeEditor.session.setScrollLeft(1);
searchResultHeaderCodeEditor.focus();
searchResultHeaderCodeEditor.navigateFileStart();
focusedEditor = searchResultHeaderCodeEditor;
// Search Result Page Editor
searchResultPageCodeEditor = ace.edit("searchResultPageCode");
searchResultPageCodeEditor.$blockScrolling = Infinity;
searchResultPageCodeEditor.setValue(featureEditor.searchResultPage);
searchResultPageCodeEditor.setShowPrintMargin(false);
searchResultPageCodeEditor.setTheme("ace/theme/monokai");
searchResultPageCodeEditor.getSession().setMode("ace/mode/php");
searchResultPageCodeEditor.setFadeFoldWidgets();
searchResultPageCodeEditor.session.getScrollTop();
searchResultPageCodeEditor.session.setScrollTop(1);
searchResultPageCodeEditor.session.getScrollLeft();
searchResultPageCodeEditor.session.setScrollLeft(1);
searchResultPageCodeEditor.focus();
searchResultPageCodeEditor.navigateFileStart();
focusedEditor = searchResultPageCodeEditor;
// Search Result Footer Editor
searchResultFooterCodeEditor = ace.edit("searchResultFooterCode");
searchResultFooterCodeEditor.$blockScrolling = Infinity;
searchResultFooterCodeEditor.setValue(featureEditor.searchResultFooter);
searchResultFooterCodeEditor.setShowPrintMargin(false);
searchResultFooterCodeEditor.setTheme("ace/theme/monokai");
searchResultFooterCodeEditor.getSession().setMode("ace/mode/php");
searchResultHeaderCodeEditor.setFadeFoldWidgets();
searchResultFooterCodeEditor.session.getScrollTop();
searchResultFooterCodeEditor.session.setScrollTop(1);
searchResultFooterCodeEditor.session.getScrollLeft();
searchResultFooterCodeEditor.session.setScrollLeft(1);
searchResultFooterCodeEditor.focus();
searchResultFooterCodeEditor.navigateFileStart();
focusedEditor = searchResultFooterCodeEditor;
// Detail Page Editor
detailPageCodeEditor = ace.edit("detailPageCode");
detailPageCodeEditor.$blockScrolling = Infinity;
detailPageCodeEditor.setValue(featureEditor.detailPage);
detailPageCodeEditor.setShowPrintMargin(false);
detailPageCodeEditor.setTheme("ace/theme/monokai");
detailPageCodeEditor.getSession().setMode("ace/mode/php");
detailPageCodeEditor.setFadeFoldWidgets();
detailPageCodeEditor.session.getScrollTop();
detailPageCodeEditor.session.setScrollTop(1);
detailPageCodeEditor.session.getScrollLeft();
detailPageCodeEditor.session.setScrollLeft(1);
detailPageCodeEditor.focus();
detailPageCodeEditor.navigateFileStart();
focusedEditor = detailPageCodeEditor;
});
});
You can put them in array, write config with things which are different and iterate through it. Here is example for 7 blocks at the end, you can use same logic for 3 blocks at start of your code, or maybe you can put all 10 in same config:
var configs = {
1: {name: 'memberProfileHeaderCode', value: featureEditor.memberProfileHeader},
2: {name: 'memberProfilePageCode', value: featureEditor.memberProfilePage},
3: {name: 'memberProfileFooterCode', value: featureEditor.memberProfileFooter},
4: {name: 'searchResultHeaderCode', value: featureEditor.searchResultHeader},
5: {name: 'searchResultPageCode', value: featureEditor.searchResultPage},
6: {name: 'searchResultFooterCode', value: featureEditor.searchResultFooter},
7: {name: 'detailPageCode', value: featureEditor.detailPage}
};
var editor = [];
for (a in configs) {
var tmp = configs[a],
name = tmp.name;
console.log(a, tmp);
editor[name] = ace.edit(tmp.name);
editor[name].$blockScrolling = Infinity;
editor[name].setValue(tmp.value);
editor[name].setShowPrintMargin(false);
editor[name].setTheme("ace/theme/monokai");
editor[name].getSession().setMode("ace/mode/php");
editor[name].setFadeFoldWidgets();
editor[name].session.getScrollTop();
editor[name].session.setScrollTop(1);
editor[name].session.getScrollLeft();
editor[name].session.setScrollLeft(1);
editor[name].focus();
editor[name].navigateFileStart();
focusedEditor = editor[name];
}