0

I am trying to simplify the following code shown at the bottom of the question. The issues here are the following:

  • How to make it so the Ace Editor is created once, instead of once per editor.
  • For the setValue of the Ace Editor, each editor pulls in their specific information from an object that was returned from the backend (I have no access to the backend). You can see the object in the code as widgetEditor and featureEditor.
  • The code works correctly as it is now, but I believe it can be simplified a lot.
  • The only variables between the Ace editors are the setValue, the getSession and the ace.edit option.
  • I checked out the following link which helped with the ace.edit option but did not with the other 2 values Can Ace Editor support multiple code editors in one page?

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; }); });
Improve this question

1 Answer 1

Reset to default
1

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]; }
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

That looks like an amazing answer. Just beautiful. Let me try it out ban17 and will report soon enough.
I changed code to include all 7 in second block and corrected some error, I think it will work if you just copy paste it. I implemented something similar here collectcodes.com/basic/php/hello-world/answers .
Amazing code ban17. Very clean, optimized and simple to use. Excellent work.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.