Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added the ability to run the code by pressing CMD/Ctrl+Enter #23

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

egfanboy
Copy link

@egfanboy egfanboy commented Oct 5, 2019

Fixes #22

  • Added the ability to run the code by pressing CMD + ENTER or CTRL + Enter

I also added nodemon as a dev dependency since everyone would need to have it installed globally. I can remove if you want.

//init
(() => {
//DOM binding
submitProgramElem = document.getElementById('submitBtn');
editorElement = document.getElementById('editor');
Copy link
Owner

@itaditya itaditya Oct 6, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@EricTurf in this project I'm using pub-sub design pattern to enable proper Separation of Concerns. Each component is responsible to deal with their own DOM. submitProgram component shouldn't querySelect the codeEditor component.

The components interact with each other by dispatching events and subscribing to events.

What you have to do is in the codeEditor component, add the _keyDown event listener and the whole CMD + P logic. When you detect that it was indeed CMD + P you dispatch an event say codeEditor:runcode.
Then in the submitProgram component, listen to the codeEditor:runcode event using addEvent helper. When the codeEditor:runcode is triggered, you have to call the _onClick method.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For reference see how submitProgram and langSel components interact with each other.

@itaditya
Copy link
Owner

itaditya commented Oct 6, 2019

@EricTurf, pub-sub design pattern is pretty advanced stuff, so don't worry if you feel overwhelmed. If you get stuck, ask me without any hesitance.

The objective is that you learn something new.

@egfanboy
Copy link
Author

egfanboy commented Oct 6, 2019

@itaditya Pushed changes based on your comments.

@@ -34,10 +34,27 @@ const _onChange = event => {
dispatchEvent('codeEditor:change');
};

let MacCMDPressed = false;

const MacCommandKeys = ['MetaLeft', 'MetaRight'];
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what does this do?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So for mac if you want to run the code using the Command key you cannot use the normal event.ctrlKey + enter to run the command.

The key to the left and right Command keys on MAC are MetaLeft/Right so if you pressed the Command key it will set MacCMDPressed to true and if your next keystroke is enter it will run the command.

On any key that is not MetaLeft/Right it will set MacCMDPressed back to false

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add keyboard shortcut CMD/Ctrl + Enter to Run Code
2 participants